Merge pull request Expensify#83925 from FitseTLT/fix-carousel-auto-scroll-problem

Fix carousel auto scroll problem

Author: marcochavezf

src/CONST/index.ts

@@ -281,6 +281,8 @@ const CONST = {
     ANIMATION_PAID_BUTTON_HIDE_DELAY: 300,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
     SCREEN_TRANSITION_END_TIMEOUT: 1000,
+    PENDING_TRANSACTION_DELETION_DELAY: 4000,
+    PENDING_TRANSACTION_SCROLL_DELAY: 1000,
 
     // Delay before pre-inserting the Search fullscreen route under the RHP on the confirmation screen.
     // Chosen to be long enough for the RHP entrance animation to complete (~250ms) and avoid jank

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -436,7 +436,7 @@ function MoneyRequestReportPreviewContent({
                 viewOffset: -2 * styles.gap2.gap,
                 animated: true,
             });
-        }, CONST.ANIMATED_TRANSITION);
+        }, CONST.PENDING_TRANSACTION_SCROLL_DELAY);
 
         // We only want to scroll to a new transaction when the set of new transaction IDs changes.
         // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/core';
 import type {ListRenderItem} from '@shopify/flash-list';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
@@ -20,7 +21,7 @@ import {contextMenuRef} from '@pages/inbox/report/ContextMenu/ReportActionContex
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {hasOnceLoadedReportActionsSelector} from '@src/selectors/ReportMetaData';
+import {hasOnceLoadedReportActionsSelector, pendingNewTransactionIDsSelector} from '@src/selectors/ReportMetaData';
 import type {Transaction} from '@src/types/onyx';
 import MoneyRequestReportPreviewContent from './MoneyRequestReportPreviewContent';
 import type {MoneyRequestReportPreviewProps} from './types';
@@ -120,7 +121,11 @@ function MoneyRequestReportPreview({
     const [hasOnceLoadedReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.RAM_ONLY_REPORT_LOADING_STATE}${chatReportID}`, {
         selector: hasOnceLoadedReportActionsSelector,
     });
-    const newTransactions = useNewTransactions(hasOnceLoadedReportActions, transactions);
+    const [pendingNewTransactionIDs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${chatReportID}`, {
+        selector: pendingNewTransactionIDsSelector,
+    });
+    const isFocused = useIsFocused();
+    const newTransactions = useNewTransactions(hasOnceLoadedReportActions, transactions, pendingNewTransactionIDs, chatReportID, isFocused);
     const newTransactionIDs = new Set(newTransactions.map((transaction) => transaction.transactionID));
 
     const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];

src/hooks/useNewTransactions.ts

@@ -1,29 +1,77 @@
 import {useEffect, useMemo, useRef} from 'react';
+import {deletePendingNewTransactionIDs} from '@libs/actions/IOU/PendingNewTransactions';
 import CONST from '@src/CONST';
 import type {Transaction} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import usePrevious from './usePrevious';
 
 /**
  * This hook returns new transactions that have been added since the last transactions update.
  * This hook should be used only in the context of highlighting the new transactions on the Report table view.
+ *
+ * When `pendingNewTransactionIDs` is provided, those transactions will be treated as new even on the
+ * first load. This handles the case where a transaction was created before the component mounts
+ * (e.g., submitting a tracked expense from Self DM to a workspace on Web).
  */
-function useNewTransactions(hasOnceLoadedReportActions: boolean | undefined, transactions: Transaction[] | undefined) {
-    // If we haven't loaded report yet we set previous transactions to undefined.
+function useNewTransactions(
+    hasOnceLoadedReportActions: boolean | undefined,
+    transactions: Transaction[] | undefined,
+    pendingNewTransactionIDs?: Record<string, true | null>,
+    reportID?: string,
+    isFocused?: boolean,
+) {
+    // If we haven't loaded report yet we set previous transaction ids to undefined.
     const prevTransactions = usePrevious(hasOnceLoadedReportActions ? transactions : undefined);
 
     // We need to skip the first transactions change, to avoid highlighting transactions on the first load.
     const skipFirstTransactionsChange = useRef(!hasOnceLoadedReportActions);
 
     const newTransactions = useMemo(() => {
+        // If isFocused is not passed (=undefined) we will not return empty.
+        if (isFocused === false) {
+            return CONST.EMPTY_ARRAY as unknown as Transaction[];
+        }
+
         if (transactions === undefined || prevTransactions === undefined || transactions.length <= prevTransactions.length) {
+            // When a transaction is submitted from another report (e.g., Self DM → workspace), it is
+            // already in the transactions list by the time this component mounts.
+            // So we use pendingNewTransactionIDs from report metadata to identify these transactions on first load.
+            if (isFocused && reportID && !isEmptyObject(pendingNewTransactionIDs) && transactions?.length) {
+                const pendingSet = new Set(Object.keys(pendingNewTransactionIDs));
+                const pendingTransactions = transactions.filter(({transactionID}) => pendingSet.has(transactionID) && pendingNewTransactionIDs[transactionID]);
+                return pendingTransactions;
+            }
             return CONST.EMPTY_ARRAY as unknown as Transaction[];
         }
         if (skipFirstTransactionsChange.current) {
             skipFirstTransactionsChange.current = false;
             return CONST.EMPTY_ARRAY as unknown as Transaction[];
         }
         return transactions.filter((transaction) => !prevTransactions?.some((prevTransaction) => prevTransaction.transactionID === transaction.transactionID));
-    }, [transactions, prevTransactions]);
+
+        // We don't need to recalculate on change of prevTransactions or pendingNewTransactionIDs as it will make the value
+        // disappear quickly which will break the scroll and highlight on slower devices like mobile app.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transactions, reportID, isFocused]);
+
+    useEffect(() => {
+        if (!pendingNewTransactionIDs) {
+            return;
+        }
+        const pendingSet = new Set(Object.keys(pendingNewTransactionIDs));
+        const pendingTransactions = newTransactions.filter(({transactionID}) => pendingSet.has(transactionID) && pendingNewTransactionIDs[transactionID]);
+        if (!pendingTransactions.length) {
+            return;
+        }
+
+        // We deletePendingNewTransactionIDs after the scroll and highlight has occurred.
+        setTimeout(() => {
+            deletePendingNewTransactionIDs(
+                reportID,
+                pendingTransactions.map((transaction) => transaction.transactionID),
+            );
+        }, CONST.PENDING_TRANSACTION_DELETION_DELAY);
+    }, [pendingNewTransactionIDs, newTransactions, reportID]);
 
     // In case when we have loaded the report, but there were no transactions in it, then we need to explicitly set skipFirstTransactionsChange to false, as it will be not set in the useMemo above.
     useEffect(() => {

src/libs/Navigation/helpers/navigateAfterExpenseCreate.ts

@@ -1,3 +1,4 @@
+import {addPendingNewTransactionIDs} from '@libs/actions/IOU/PendingNewTransactions';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import Log from '@libs/Log';
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
@@ -17,6 +18,7 @@ type NavigateAfterExpenseCreateParams = {
     isFromGlobalCreate?: boolean;
     isInvoice?: boolean;
     hasMultipleTransactions: boolean;
+    shouldAddPendingNewTransactionIDs?: boolean;
 };
 
 /**
@@ -26,14 +28,24 @@ type NavigateAfterExpenseCreateParams = {
  * - If it is created on the inbox tab, it will open the chat report containing that expense.
  * - If it is created elsewhere, it will navigate to Reports > Expense and highlight the newly created expense.
  */
-function navigateAfterExpenseCreate({activeReportID, transactionID, isFromGlobalCreate, isInvoice, hasMultipleTransactions}: NavigateAfterExpenseCreateParams) {
+function navigateAfterExpenseCreate({
+    activeReportID,
+    transactionID,
+    isFromGlobalCreate,
+    isInvoice,
+    hasMultipleTransactions,
+    shouldAddPendingNewTransactionIDs = false,
+}: NavigateAfterExpenseCreateParams) {
     const isUserOnInbox = isReportTopmostSplitNavigator();
 
     // If the expense is not created from global create or is currently on the inbox tab,
     // we just need to dismiss the money request flow screens
     // and open the report chat containing the IOU report
     if (!isFromGlobalCreate || isUserOnInbox || !transactionID) {
         dismissModalAndOpenReportInInboxTab(activeReportID, isInvoice, hasMultipleTransactions);
+        if (shouldAddPendingNewTransactionIDs) {
+            addPendingNewTransactionIDs(activeReportID, transactionID);
+        }
         return;
     }
 

src/libs/actions/IOU/NavigationHelpers.ts

@@ -39,14 +39,16 @@ function handleNavigateAfterExpenseCreate({
     transactionID,
     isFromGlobalCreate,
     isInvoice,
+    shouldAddPendingNewTransactionIDs = false,
 }: {
     activeReportID?: string;
     transactionID?: string;
     isFromGlobalCreate?: boolean;
     isInvoice?: boolean;
+    shouldAddPendingNewTransactionIDs?: boolean;
 }) {
     const hasMultipleTransactions = Object.values(getAllTransactions()).filter((transaction) => transaction?.reportID === activeReportID).length > 0;
-    navigateAfterExpenseCreate({activeReportID, transactionID, isFromGlobalCreate, isInvoice, hasMultipleTransactions});
+    navigateAfterExpenseCreate({activeReportID, transactionID, isFromGlobalCreate, isInvoice, hasMultipleTransactions, shouldAddPendingNewTransactionIDs});
 }
 
 export {dismissModalAndOpenReportInInboxTab, handleNavigateAfterExpenseCreate, highlightTransactionOnSearchRouteIfNeeded};

src/libs/actions/IOU/PendingNewTransactions.ts

@@ -0,0 +1,25 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function addPendingNewTransactionIDs(reportID: string | undefined, transactionID: string | undefined) {
+    if (!reportID || !transactionID) {
+        return;
+    }
+
+    // We are saving in object form so that consecutive onyx merge will not reset previous value.
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {pendingNewTransactionIDs: {[transactionID]: true}});
+}
+
+function deletePendingNewTransactionIDs(reportID: string | undefined, transactionIDs: string[]) {
+    if (!reportID) {
+        return;
+    }
+
+    const pendingNewTransactionIDs: Record<string, null> = {};
+    for (const transactionID of transactionIDs) {
+        Object.assign(pendingNewTransactionIDs, {[transactionID]: null});
+    }
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {pendingNewTransactionIDs});
+}
+
+export {addPendingNewTransactionIDs, deletePendingNewTransactionIDs};

src/libs/actions/IOU/PerDiem.ts

@@ -1015,7 +1015,7 @@ function submitPerDiemExpense(submitPerDiemExpenseInformation: PerDiemExpenseInf
         notifyNewAction(activeReportID, undefined, participantParams.payeeAccountID === currentUserAccountIDParam);
     }
 
-    return {iouReport};
+    return {iouReport, transactionID: transaction.transactionID};
 }
 
 /**

src/libs/actions/IOU/Split.ts

@@ -2154,8 +2154,14 @@ function createDistanceRequest(distanceRequestInformation: CreateDistanceRequest
     const activeReportID = isMoneyRequestReport && report?.reportID ? report.reportID : parameters.chatReportID;
 
     if (shouldHandleNavigation) {
+        const navigationActiveReportID = backToReport ?? activeReportID;
         highlightTransactionOnSearchRouteIfNeeded(isFromGlobalCreate, parameters.transactionID, CONST.SEARCH.DATA_TYPES.EXPENSE);
-        handleNavigateAfterExpenseCreate({activeReportID: backToReport ?? activeReportID, isFromGlobalCreate, transactionID: parameters.transactionID});
+        handleNavigateAfterExpenseCreate({
+            activeReportID: navigationActiveReportID,
+            isFromGlobalCreate,
+            transactionID: parameters.transactionID,
+            shouldAddPendingNewTransactionIDs: navigationActiveReportID === parameters.chatReportID,
+        });
     }
 
     if (!isMoneyRequestReport) {

src/libs/actions/IOU/TrackExpense.ts

@@ -1883,12 +1883,13 @@ function requestMoney(requestMoneyInformation: RequestMoneyInformation): {iouRep
 
     if (!requestMoneyInformation.isRetry) {
         highlightTransactionOnSearchRouteIfNeeded(isFromGlobalCreate, transaction.transactionID, CONST.SEARCH.DATA_TYPES.EXPENSE);
-
         if (shouldHandleNavigation) {
+            const navigationReportID = backToReport ?? activeReportID;
             handleNavigateAfterExpenseCreate({
-                activeReportID: backToReport ?? activeReportID,
+                activeReportID: navigationReportID,
                 transactionID: transaction.transactionID,
                 isFromGlobalCreate,
+                shouldAddPendingNewTransactionIDs: navigationReportID === chatReport.reportID,
             });
         }
     }
@@ -2689,6 +2690,7 @@ function trackExpense(params: CreateTrackExpenseParams) {
                 activeReportID,
                 transactionID: transaction?.transactionID,
                 isFromGlobalCreate,
+                shouldAddPendingNewTransactionIDs: action === CONST.IOU.ACTION.CATEGORIZE || action === CONST.IOU.ACTION.SHARE,
             });
         }
     }