Navigate to the clicked expense in a multi-expense report preview #92546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

MonilBhavsar merged 56 commits into Expensify:main from wildan-m:wildan/91042-multi-expense-preview-per-item-nav

Jul 27, 2026

cspell.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -563,6 +563,7 @@ @@
             "diems",
             "dimen",
             "directfeeds",
+            "dispatchable",
             "displaystatus",
             "domainpadding",
             "domelementtype",
@@ Expand Down @@

src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,16 @@ function ReportPreviewActionButton() { @@
         const {buttonMaxWidth} = useReportPreviewUIState();
         const {openReportFromPreview} = useReportPreviewActions();
-        const renderButton = () => {
+        const viewButton = (
+            <Button
+                onPress={openReportFromPreview}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
+            >
+                <Button.Text>{translate('common.view')}</Button.Text>
+            </Button>
+        );
+        const renderPrimaryButton = () => {
             if (reportPreviewAction === CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT) {
                 return <SubmitActionButton />;
             }
@@ Expand All / @@ -45,17 +54,21 @@ function ReportPreviewActionButton() { @@
                 return <AddExpenseActionButton />;
             }
-            return (
-                <Button
-                    onPress={openReportFromPreview}
-                    sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
-                >
-                    <Button.Text>{translate('common.view')}</Button.Text>
-                </Button>
-            );
+            return null;
         };
-        return <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{renderButton()}</View>;
+        const primaryButton = renderPrimaryButton();
+        if (!primaryButton) {
+            return <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{viewButton}</View>;
+        }
+        return (
+            <View style={[buttonMaxWidth, styles.flex1, styles.flexRow, styles.gap2, {height: variables.h40}]}>
+                <View style={[styles.flex1]}>{primaryButton}</View>
+                {viewButton}
+            </View>
+        );
     }
     export default ReportPreviewActionButton;

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

-Original file line number
+Diff line change
@@ -1,6 +1,8 @@
     import {usePersonalDetails} from '@components/OnyxListItemProvider';
     import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
+    import {useWideRHPActions} from '@components/WideRHPContextProvider';
+    import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
     import useNetwork from '@hooks/useNetwork';
     import useNewTransactions from '@hooks/useNewTransactions';
     import useOnyx from '@hooks/useOnyx';
@@ Expand All / @@ -11,8 +13,18 @@ import useStyleUtils from '@hooks/useStyleUtils'; @@
     import useThemeStyles from '@hooks/useThemeStyles';
     import useTransactionViolations from '@hooks/useTransactionViolations';
+    import {createTransactionThreadReport, openReport, setOptimisticTransactionThread} from '@libs/actions/Report';
+    import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
     import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-    import {getIOUActionForReportID, isSplitBillAction as isSplitBillActionReportActionsUtils, isTrackExpenseAction as isTrackExpenseActionReportActionsUtils} from '@libs/ReportActionsUtils';
+    import getPlatform from '@libs/getPlatform';
+    import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
+    import {
+        getIOUActionForReportID,
+        getOriginalMessage,
+        isMoneyRequestAction,
+        isSplitBillAction as isSplitBillActionReportActionsUtils,
+        isTrackExpenseAction as isTrackExpenseActionReportActionsUtils,
+    } from '@libs/ReportActionsUtils';
     import {isIOUReport} from '@libs/ReportUtils';
     import {startSpan} from '@libs/telemetry/activeSpans';
@@ Expand All / @@ -30,12 +42,16 @@ import type {ListRenderItem} from '@shopify/flash-list'; @@
     import type {LayoutChangeEvent} from 'react-native';
     import {useIsFocused} from '@react-navigation/core';
-    import React, {useCallback, useMemo, useRef, useState} from 'react';
+    import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
     import type {MoneyRequestReportPreviewProps} from './types';
     import MoneyRequestReportPreviewContent from './MoneyRequestReportPreviewContent';
+    // Delay (ms) before the pressed expense opens on top of the report's wide RHP. Letting the report settle
+    // into the wide RHP first makes the two panels open as a cascade rather than appearing at once.
+    const PRESSED_EXPENSE_CASCADE_DELAY = 180;
     function MoneyRequestReportPreview({
         iouReportID,
         iouReport,
@@ Expand All / @@ -53,7 +69,11 @@ function MoneyRequestReportPreview({ @@
         const StyleUtils = useStyleUtils();
         // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
         const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+        const {markReportRHPWidth} = useWideRHPActions();
         const personalDetailsList = usePersonalDetails();
+        const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+        const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
+        const [betas] = useOnyx(ONYXKEYS.BETAS);
         const invoiceReceiverPolicyID = chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined;
         const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(invoiceReceiverPolicyID)}`);
         const invoiceReceiverPersonalDetail = chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? personalDetailsList?.[chatReport.invoiceReceiver.accountID] : null;
@@ Expand All / @@ -63,6 +83,19 @@ function MoneyRequestReportPreview({ @@
         // reimbursable derivations so they include optimistically-deleted rows, exactly as before the decomposition.
         const allReportTransactions = Object.values(reportTransactionsCollection ?? {}).filter((transaction): transaction is Transaction => !!transaction);
         const transactions = allReportTransactions.filter((transaction) => isOffline || transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
+        // Tracks how many actions the IOU report has loaded so a deferred expense press can be retried once
+        // the actions arrive (they may be missing right after a cache clear).
+        const [iouReportActionCount] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(iouReportID)}`, {
+            selector: (reportActions) => Object.keys(reportActions ?? {}).length,
+        });
+        // Whether the deferred press's openReport fetch is still in flight. The true -> false flip re-runs the drain
+        // effect below, so a deferred press settles even when the fetch returns the actions we already had.
+        const [isLoadingInitialIOUReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.RAM_ONLY_REPORT_LOADING_STATE}${getNonEmptyStringOnyxID(iouReportID)}`, {
+            selector: (loadingState) => !!loadingState?.isLoadingInitialReportActions,
+        });
+        // Holds a pressed transaction whose thread report could not be resolved yet, so the expense can be
+        // opened once the IOU report's actions have loaded instead of falling back to the parent report.
+        const pendingExpenseTransactionRef = useRef<Transaction | null>(null);
         const policy = usePolicy(policyID);
         const lastTransaction = transactions?.at(0);
         const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
@@ Expand Down Expand Up / @@ -144,27 +177,188 @@ function MoneyRequestReportPreview({ @@
         const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];
-        const renderItem: ListRenderItem<Transaction> = ({item}) => (
-            <TransactionPreview
-                chatReport={chatReport}
-                action={getIOUActionForReportID(item.reportID, item.transactionID)}
-                contextAction={action}
-                reportID={item.reportID}
-                isBillSplit={isSplitBillAction}
-                isTrackExpense={isTrackExpenseAction}
-                isWhisper={isWhisper}
-                isHovered={isHovered}
-                iouReportID={iouReportID}
-                containerStyles={transactionPreviewContainerStyles}
-                transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
-                transactionID={item.transactionID}
-                reportPreviewAction={action}
-                onPreviewPressed={openReportFromPreview}
-                shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
-                shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
-            />
+        // Resolve the target transaction thread report. Prefer the IOU action's childReportID, then the
+        // transaction's own thread id, and finally create the thread inline so the press never lands on a dead route.
+        const resolveChildReportID = useCallback(
+            (transaction: Transaction) => {
+                const transactionIOUAction = getIOUActionForReportID(transaction.reportID, transaction.transactionID);
+                let childReportID = transactionIOUAction?.childReportID ?? transaction.transactionThreadReportID;
+                if (childReportID) {
+                    // The thread already exists, but it may not be present in OnyxDB. Seed its
+                    // optimistic report shell + parent linkage so navigating to it renders the expense instead of a
+                    // blank/not-found screen.
+                    setOptimisticTransactionThread(childReportID, iouReport?.reportID ?? transaction.reportID, transactionIOUAction?.reportActionID, iouReport?.policyID ?? policyID);
+                } else if (transactionIOUAction?.reportActionID) {
+                    const transactionID = isMoneyRequestAction(transactionIOUAction) ? getOriginalMessage(transactionIOUAction)?.IOUTransactionID : undefined;
+                    if (transactionID) {
+                        childReportID = createTransactionThreadReport({
+                            introSelected,
+                            currentUserLogin: currentUserEmail ?? '',
+                            currentUserAccountID,
+                            betas,
+                            iouReport,
+                            iouReportAction: transactionIOUAction,
+                        })?.reportID;
+                    }
+                }
+                return childReportID;
+            },
+            [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, policyID],
+        );
+        const navigateToExpense = useCallback(
+            (childReportID: string) => {
+                startSpan(`${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${childReportID}`, {
+                    name: 'MoneyRequestReportPreview.Transaction',
+                    op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
+                });
+                if (isSmallScreenWidth) {
+                    const backTo = Navigation.getActiveRoute();
+                    if (!iouReportID) {
+                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, backTo));
+                        return;
+                    }
+                    if (getPlatform() === CONST.PLATFORM.WEB) {
+                        // On mobile web, push the parent report first so it gets its own browser-history entry (back stops
+                        // on the report, then the chat), then open the pressed expense in the RHP over it one microtask
+                        // later so the two navigations don't batch into a single history push. Mirrors native's
+                        // back -> report -> chat.
+                        const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
+                        setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
+                        Navigation.navigate(reportRoute);
+                        setNavigationActionToMicrotaskQueue(() => {
+                            // The user may have left the report during the microtask defer; don't open the expense over
+                            // whatever screen is now active.
+                            if (!Navigation.isActiveRoute(reportRoute)) {
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                        });
+                        return;
+                    }
+                    // On native the wide RHP is unavailable and there is a swipe-back gesture, so open the expense with the
+                    // parent report as a real stack entry underneath as a single forward slide.
+                    Navigation.openExpenseOverParentReport(iouReportID, childReportID, backTo);
+                    return;
+                }
+                // On wide layouts open the expense report itself in the wide RHP (super wide for multi-expense
+                // reports) and show the pressed expense on top of it — mirroring how an expense opens from the
+                // report view — rather than navigating to the report in the Inbox. Back returns to the report,
+                // and back again to the chat.
+                if (iouReportID) {
+                    const reportRoute = ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: iouReportID, backTo: Navigation.getActiveRoute()});
+                    markReportRHPWidth(iouReportID, 'super-wide');
+                    Navigation.navigate(reportRoute);
+                    setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
+                        markReportRHPWidth(childReportID, 'wide');
+                        // Let the report's wide RHP settle before opening the pressed expense on top, so the two
+                        // panels open as a cascade rather than at once.
+                        setTimeout(() => {
+                            // The user may have closed the report's wide RHP or navigated away during the cascade delay;
+                            // don't reopen the expense over whatever screen is now active.
+                            if (!Navigation.isActiveRoute(reportRoute)) {
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                        }, PRESSED_EXPENSE_CASCADE_DELAY);
+                    });
+                    return;
+                }
+                // Fallback when the parent report is unknown: open the pressed expense alone in the wide RHP.
+                setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
+                    markReportRHPWidth(childReportID, 'wide');
+                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
+                });
+            },
+            [isSmallScreenWidth, iouReportID, markReportRHPWidth, transactions],
         );
+        const openTransactionFromPreview = useCallback(
+            (transaction: Transaction) => {
+                if (contextMenuRef.current?.isContextMenuOpening) {
+                    return;
+                }
+                // A report with a single expense opens the report itself, not the lone expense — opening the
+                // expense directly would skip the report the user expects to land on.
+                if (transactions.length <= 1) {
+                    openReportFromPreview();
+                    return;
+                }
+                const childReportID = resolveChildReportID(transaction);
+                if (childReportID) {
+                    navigateToExpense(childReportID);
+                    return;
+                }
+                // The thread could not be resolved because this expense's IOU action isn't present in OnyxDB. Fetch the report's actions and
+                // open the expense once the fetch settles, instead of falling back to the parent
+                // report and losing the pressed expense. Skip this while offline: openReport can't fetch, so the
+                // deferred press would never fire (dead tap) — fall through to opening the cached parent report
+                // instead, matching the "View" button.
+                const isIOUActionLoaded = !!getIOUActionForReportID(transaction.reportID, transaction.transactionID);
+                if (!isIOUActionLoaded && iouReportID && !isOffline) {
+                    pendingExpenseTransactionRef.current = transaction;
+                    openReport({reportID: iouReportID, introSelected, betas});
+                    return;
+                }
+                openReportFromPreview();
+            },
+            [betas, introSelected, iouReportID, isOffline, navigateToExpense, openReportFromPreview, resolveChildReportID, transactions.length],
+        );
+        // Completes a deferred expense press once the IOU report's actions have loaded.
+        useEffect(() => {
+            const pendingTransaction = pendingExpenseTransactionRef.current;
+            // Hold the press while the fetch is in flight — the loading flip back to false re-runs this effect, so the
+            // press settles even when the fetched actions match the cache and the action count never changes.
+            if (!pendingTransaction || isLoadingInitialIOUReportActions) {
+                return;
+            }
+            const childReportID = resolveChildReportID(pendingTransaction);
+            if (childReportID) {
+                pendingExpenseTransactionRef.current = null;
+                navigateToExpense(childReportID);
+                return;
+            }
+            // The actions finished loading but the expense still has no resolvable thread — open the parent report.
+            if (iouReportActionCount) {
+                pendingExpenseTransactionRef.current = null;
+                openReportFromPreview();
+            }
+        }, [iouReportActionCount, isLoadingInitialIOUReportActions, navigateToExpense, openReportFromPreview, resolveChildReportID]);
+        const renderItem: ListRenderItem<Transaction> = ({item}) => {
+            const transactionIOUAction = getIOUActionForReportID(item.reportID, item.transactionID);
+            return (
+                <TransactionPreview
+                    chatReport={chatReport}
+                    action={transactionIOUAction}
+                    contextAction={action}
+                    reportID={item.reportID}
+                    isBillSplit={isSplitBillAction}
+                    isTrackExpense={isTrackExpenseAction}
+                    isWhisper={isWhisper}
+                    isHovered={isHovered}
+                    iouReportID={iouReportID}
+                    containerStyles={transactionPreviewContainerStyles}
+                    transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
+                    transactionID={item.transactionID}
+                    reportPreviewAction={action}
+                    onPreviewPressed={() => openTransactionFromPreview(item)}
+                    shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
+                    shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
+                />
+            );
+        };
         return (
             <MoneyRequestReportPreviewContent
                 newTransactionIDs={newTransactionIDs}
@@ Expand Down @@

Navigation Menu

Uh oh!

Navigate to the clicked expense in a multi-expense report preview #92546

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!