Confirm new expenses with a “View” toast on Spend instead of scrolling to and highlighting the row

src/ONYXKEYS.ts

@@ -783,9 +783,6 @@ const ONYXKEYS = {
     /** Whether the user has denied the contact import permission prompt */
     HAS_DENIED_CONTACT_IMPORT_PROMPT: 'hasDeniedContactImportPrompt',
 
-    /** The transaction IDs to be highlighted when opening the Expenses search route page */
-    TRANSACTION_IDS_HIGHLIGHT_ON_SEARCH_ROUTE: 'transactionIdsHighlightOnSearchRoute',
-
     /** The report ID to be highlighted when returning to the workspace rooms page */
     ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE: 'roomIDHighlightOnRoomsPage',
 
@@ -1723,7 +1720,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS]: string[];
     [ONYXKEYS.HAS_DENIED_CONTACT_IMPORT_PROMPT]: boolean | undefined;
     [ONYXKEYS.PERSONAL_POLICY_ID]: string;
-    [ONYXKEYS.TRANSACTION_IDS_HIGHLIGHT_ON_SEARCH_ROUTE]: Record<string, Record<string, boolean>>;
     [ONYXKEYS.ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE]: string | null;
     [ONYXKEYS.DOMAIN_GROUP_CREATE_PREFERRED_POLICY_ID]: string | undefined;
 };

src/components/MoneyRequestHeaderSecondaryActions.tsx

@@ -33,6 +33,7 @@ import initSplitExpense from '@libs/actions/SplitExpenses';
 import {setNameValuePair} from '@libs/actions/User';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getExistingTransactionID} from '@libs/IOUUtils';
+import {surfaceExpenseCreatedFeedback} from '@libs/Navigation/helpers/navigateAfterExpenseCreate';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportsSplitNavigatorParamList, RightModalNavigatorParamList} from '@libs/Navigation/types';
@@ -243,11 +244,12 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
         const optimisticIOUReportID = generateReportID();
         const activePolicyCategoriesMap = defaultPolicyCategories ?? {};
 
+        let lastDuplicate: {iouReportID?: string; transactionID?: string} | undefined;
         for (const item of transactions) {
             const existingTransactionID = getExistingTransactionID(item.linkedTrackedExpenseReportAction);
             const existingTransactionDraft = existingTransactionID ? transactionDrafts?.[existingTransactionID] : undefined;
 
-            duplicateTransactionAction({
+            const result = duplicateTransactionAction({
                 transaction: item,
                 optimisticChatReportID,
                 optimisticIOUReportID,
@@ -271,6 +273,13 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
                 delegateAccountID,
                 policyTagList,
             });
+            if (result?.transactionID) {
+                lastDuplicate = {iouReportID: result.iouReport?.reportID, transactionID: result.transactionID};
+            }
+        }
+
+        if (lastDuplicate?.transactionID) {
+            surfaceExpenseCreatedFeedback(lastDuplicate);
         }
     };
 

src/components/Search/ChatSearchView.tsx

@@ -4,7 +4,7 @@ import CONST from '@src/CONST';
 
 import type {NativeSyntheticEvent} from 'react-native';
 
-import React, {useImperativeHandle} from 'react';
+import React from 'react';
 
 import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps} from './searchViewProps';
@@ -41,15 +41,13 @@ function ChatSearchView({
     SearchTableHeader: searchTableHeader,
     tableHeaderVisible,
     hasLoadedAllTransactions,
-    newTransactions,
     onSelectRow,
     ListFooterComponent,
     onEndReached,
     onLayout,
     onScroll,
     contentContainerStyle,
     containerStyle,
-    ref,
 }: ChatSearchViewProps) {
     const {type} = queryJSON;
 
@@ -65,9 +63,6 @@ function ChatSearchView({
     const selectedItemsLength = data.reduce((acc, item) => acc + (item.keyForList && selectedTransactions[item.keyForList]?.isSelected ? 1 : 0), 0);
     const totalItems = data.filter((item) => !isRowDeleted(item)).length;
 
-    // Flat data maps 1:1 to the rendered list, so highlight-scroll-to-index is the same as scroll-to-data-index.
-    useImperativeHandle(ref, () => ({scrollToIndex: scrollToListIndex}), [scrollToListIndex]);
-
     const renderItem = (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => (
         // Chat rows never animate their exit (only grouped expenses do), so the wrapper just preserves the overflow clip.
         <AnimatedExitRow
@@ -132,7 +127,6 @@ function ChatSearchView({
                 ListFooterComponent={ListFooterComponent}
                 onLayout={onLayout}
                 contentContainerStyle={contentContainerStyle}
-                newTransactions={newTransactions}
             />
             {modal}
         </SearchListViewLayout>

src/components/Search/ExpenseFlatSearchView.tsx

@@ -4,7 +4,7 @@ import CONST from '@src/CONST';
 
 import type {NativeSyntheticEvent} from 'react-native';
 
-import React, {useImperativeHandle} from 'react';
+import React from 'react';
 
 import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps, TransactionViewExtras} from './searchViewProps';
@@ -32,8 +32,7 @@ const isRowDeleted = (item: SearchListItem) => item.pendingAction === CONST.RED_
  * renderer, single-pass visibility/selection counts, and the highlight-scroll imperative handle.
  * `TransactionListItem` is the only row renderer here and rows always animate, so the
  * group/sticky/chat/task branches of `SearchList` do not apply. Keyboard navigation is inherited from
- * `BaseSearchList`; the post-create highlight stays in the router (the snapshot stamps
- * `shouldAnimateInHighlight`, and `newTransactions` flows into `extraData`).
+ * `BaseSearchList`.
  */
 function ExpenseFlatSearchView({
     queryJSON,
@@ -47,15 +46,13 @@ function ExpenseFlatSearchView({
     SearchTableHeader: searchTableHeader,
     tableHeaderVisible,
     hasLoadedAllTransactions,
-    newTransactions,
     onSelectRow,
     ListFooterComponent,
     onEndReached,
     onLayout,
     onScroll,
     contentContainerStyle,
     containerStyle,
-    ref,
 }: ExpenseFlatSearchViewProps) {
     const {type} = queryJSON;
 
@@ -89,9 +86,6 @@ function ExpenseFlatSearchView({
     const selectedItemsLength = data.reduce((acc, item) => acc + (item.keyForList && selectedTransactions[item.keyForList]?.isSelected ? 1 : 0), 0);
     const totalItems = data.filter((item) => !isRowDeleted(item)).length;
 
-    // Flat data maps 1:1 to the rendered list, so highlight-scroll-to-index is the same as scroll-to-data-index.
-    useImperativeHandle(ref, () => ({scrollToIndex: scrollToListIndex}), [scrollToListIndex]);
-
     const renderItem = (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => {
         const isDisabled = isRowDeleted(item);
         // Only expense row exits animate; invoice and trip transaction lists do not (matches the legacy per-type gate).
@@ -171,7 +165,6 @@ function ExpenseFlatSearchView({
                 ListFooterComponent={ListFooterComponent}
                 onLayout={onLayout}
                 contentContainerStyle={contentContainerStyle}
-                newTransactions={newTransactions}
                 isAttendeesEnabledForMovingPolicy={isAttendeesEnabledForMovingPolicy}
                 nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
             />

src/components/Search/ExpenseGroupedSearchView.tsx

@@ -15,7 +15,7 @@ import type {Transaction} from '@src/types/onyx';
 
 import type {NativeSyntheticEvent} from 'react-native';
 
-import React, {useImperativeHandle, useState} from 'react';
+import React, {useState} from 'react';
 
 import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps, TransactionViewExtras} from './searchViewProps';
@@ -65,7 +65,7 @@ function buildSplitGroupData(data: SearchListItem[], shouldSplitGroups: boolean)
     };
 }
 
-/** Maps each group's `keyForList` to the id of a just-created transaction inside it, for the highlight animation. */
+/** Maps each group's `keyForList` to the id of a newly-added transaction inside it, used to refetch the group's child snapshot. */
 function buildNewTransactionIDMap(data: SearchListItem[], newTransactions: Transaction[], groupBy: SearchQueryJSON['groupBy']) {
     const map = new Map<string, string>();
     if (newTransactions.length === 0) {
@@ -110,7 +110,6 @@ function ExpenseGroupedSearchView({
     onScroll,
     contentContainerStyle,
     containerStyle,
-    ref,
 }: ExpenseGroupedSearchViewProps) {
     const {type, groupBy} = queryJSON;
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -173,26 +172,6 @@ function ExpenseGroupedSearchView({
     const firstVisibleIndex = listData.findIndex(isItemVisible);
     const lastVisibleIndex = listData.findLastIndex(isItemVisible);
 
-    // The router highlights by source-data index; remap it to the split-list index before scrolling.
-    useImperativeHandle(
-        ref,
-        () => ({
-            scrollToIndex: (index: number, animated = true) => {
-                if (!shouldSplit) {
-                    scrollToListIndex(index, animated);
-                    return;
-                }
-                const item = data.at(index);
-                if (!item) {
-                    return;
-                }
-                const splitIndex = item.keyForList ? listData.findIndex((listItem) => listItem.keyForList === `header_${item.keyForList}`) : -1;
-                scrollToListIndex(splitIndex !== -1 ? splitIndex : index, animated);
-            },
-        }),
-        [data, listData, shouldSplit, scrollToListIndex],
-    );
-
     const getItemType = (item: SearchListItem) => {
         if (!shouldSplit) {
             return undefined;
@@ -347,7 +326,6 @@ function ExpenseGroupedSearchView({
                 ListFooterComponent={ListFooterComponent}
                 onLayout={onLayout}
                 contentContainerStyle={contentContainerStyle}
-                newTransactions={newTransactions}
                 isAttendeesEnabledForMovingPolicy={isAttendeesEnabledForMovingPolicy}
                 nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                 stickyHeaderIndices={stickyHeaderIndices}

src/components/Search/ExpenseReportSearchView.tsx

@@ -6,7 +6,7 @@ import CONST from '@src/CONST';
 
 import type {NativeSyntheticEvent} from 'react-native';
 
-import React, {useImperativeHandle} from 'react';
+import React from 'react';
 
 import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps} from './searchViewProps';
@@ -47,15 +47,13 @@ function ExpenseReportSearchView({
     SearchTableHeader: searchTableHeader,
     tableHeaderVisible,
     hasLoadedAllTransactions,
-    newTransactions,
     onSelectRow,
     ListFooterComponent,
     onEndReached,
     onLayout,
     onScroll,
     contentContainerStyle,
     containerStyle,
-    ref,
 }: ExpenseReportSearchViewProps) {
     const {type} = queryJSON;
 
@@ -92,9 +90,6 @@ function ExpenseReportSearchView({
         emptyReports.reduce((acc, item) => acc + (isRowSelected(item.keyForList, selectedTransactions) ? 1 : 0), 0);
     const totalItems = flattenedTransactions.filter((item) => !isRowDeleted(item)).length + emptyReports.filter((item) => !isRowDeleted(item)).length;
 
-    // Report data maps 1:1 to the rendered list, so highlight-scroll-to-index is the same as scroll-to-data-index.
-    useImperativeHandle(ref, () => ({scrollToIndex: scrollToListIndex}), [scrollToListIndex]);
-
     const renderItem = (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => (
         // Report rows never animate their exit (only grouped expenses do), so the wrapper just preserves the overflow clip.
         <AnimatedExitRow
@@ -167,7 +162,6 @@ function ExpenseReportSearchView({
                 ListFooterComponent={ListFooterComponent}
                 onLayout={onLayout}
                 contentContainerStyle={contentContainerStyle}
-                newTransactions={newTransactions}
             />
             {modal}
         </SearchListViewLayout>

src/components/Search/SearchList/BaseSearchList/index.tsx

@@ -64,7 +64,6 @@ function BaseSearchList({
     onLayout,
     contentContainerStyle,
     flattenedItemsLength,
-    newTransactions,
     isAttendeesEnabledForMovingPolicy,
     nonPersonalAndWorkspaceCards,
     stickyHeaderIndices,
@@ -171,8 +170,8 @@ function BaseSearchList({
     }, [setHasKeyBeenPressed]);
 
     const extraData = useMemo(
-        () => [focusedIndex, columns, newTransactions, nonPersonalAndWorkspaceCards, isAttendeesEnabledForMovingPolicy],
-        [focusedIndex, columns, newTransactions, nonPersonalAndWorkspaceCards, isAttendeesEnabledForMovingPolicy],
+        () => [focusedIndex, columns, nonPersonalAndWorkspaceCards, isAttendeesEnabledForMovingPolicy],
+        [focusedIndex, columns, nonPersonalAndWorkspaceCards, isAttendeesEnabledForMovingPolicy],
     );
 
     return (

src/components/Search/SearchList/BaseSearchList/types.ts

@@ -2,7 +2,7 @@ import type {SearchListItem} from '@components/Search/SearchList/ListItem/types'
 import type {SearchColumnType} from '@components/Search/types';
 import type {ExtendedTargetedEvent} from '@components/SelectionList/ListItem/types';
 
-import type {CardList, Transaction} from '@src/types/onyx';
+import type {CardList} from '@src/types/onyx';
 
 import type {FlashListProps, FlashListRef} from '@shopify/flash-list';
 import type {RefObject} from 'react';
@@ -32,9 +32,6 @@ type BaseSearchListProps = Pick<
     /** The columns that might change to trigger re-render via extraData */
     columns: SearchColumnType[];
 
-    /** The transactions that might trigger re-render via extraData */
-    newTransactions: Transaction[];
-
     /** The length of the flattened items in the list */
     flattenedItemsLength: number;
 

src/components/Search/TaskSearchView.tsx

@@ -4,7 +4,7 @@ import CONST from '@src/CONST';
 
 import type {NativeSyntheticEvent} from 'react-native';
 
-import React, {useImperativeHandle} from 'react';
+import React from 'react';
 
 import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps} from './searchViewProps';
@@ -40,15 +40,13 @@ function TaskSearchView({
     SearchTableHeader: searchTableHeader,
     tableHeaderVisible,
     hasLoadedAllTransactions,
-    newTransactions,
     onSelectRow,
     ListFooterComponent,
     onEndReached,
     onLayout,
     onScroll,
     contentContainerStyle,
     containerStyle,
-    ref,
 }: TaskSearchViewProps) {
     const {type} = queryJSON;
 
@@ -62,9 +60,6 @@ function TaskSearchView({
     const selectedItemsLength = data.reduce((acc, item) => acc + (item.keyForList && selectedTransactions[item.keyForList]?.isSelected ? 1 : 0), 0);
     const totalItems = data.filter((item) => !isRowDeleted(item)).length;
 
-    // Flat data maps 1:1 to the rendered list, so highlight-scroll-to-index is the same as scroll-to-data-index.
-    useImperativeHandle(ref, () => ({scrollToIndex: scrollToListIndex}), [scrollToListIndex]);
-
     const renderItem = (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => (
         // Task rows never animate their exit (only grouped expenses do), so the wrapper just preserves the overflow clip.
         <AnimatedExitRow
@@ -130,7 +125,6 @@ function TaskSearchView({
                 ListFooterComponent={ListFooterComponent}
                 onLayout={onLayout}
                 contentContainerStyle={contentContainerStyle}
-                newTransactions={newTransactions}
             />
             {modal}
         </SearchListViewLayout>