Navigate to the clicked expense in a multi-expense report preview (v2)

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -602,9 +602,18 @@ function MoneyRequestReportTransactionList({
         // "Recently added" flow) that belongs to the transaction thread sitting underneath this report.
         // Overwriting and then clearing it would drop that carousel when the user navigates back. Row presses
         // still seed the correct siblings lazily via useNavigateToTransactionThread.
-        if (getActiveTransactionIDs().descriptors) {
+        const {ids: activeIDs, descriptors: activeDescriptors} = getActiveTransactionIDs();
+        if (activeDescriptors) {
             return;
         }
+        // A report preview press seeds these arrows in the carousel's order, which can differ from this list's order.
+        // Keep that seed while it still covers exactly these rows, and re-seed only when the rows themselves change.
+        if (activeIDs && activeIDs.length === visualOrderTransactionIDs.length) {
+            const activeIDSet = new Set(activeIDs);
+            if (visualOrderTransactionIDs.every((transactionID) => activeIDSet.has(transactionID))) {
+                return;
+            }
+        }
         setActiveTransactionIDs(visualOrderTransactionIDs);
         return () => {
             clearActiveTransactionIDs();

src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

@@ -3,9 +3,10 @@ import PrevNextButtons from '@components/PrevNextButtons';
 import {useWideRHPActions} from '@components/WideRHPContextProvider';
 
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 
-import {createTransactionThreadReport, setOptimisticTransactionThread} from '@libs/actions/Report';
+import {createTransactionThreadReport, openReport, setOptimisticTransactionThread} from '@libs/actions/Report';
 import {clearActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import type {RightModalNavigatorParamList} from '@libs/Navigation/types';
 import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
@@ -22,9 +23,9 @@ import getEmptyArray from '@src/types/utils/getEmptyArray';
 import type {GestureResponderEvent} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 
-import {findFocusedRoute} from '@react-navigation/native';
+import {findFocusedRoute, useIsFocused} from '@react-navigation/native';
 import {guidedSetupAndTourStatusSelector} from '@selectors/Onboarding';
-import React, {startTransition, useCallback, useEffect, useMemo} from 'react';
+import React, {startTransition, useCallback, useEffect, useMemo, useRef} from 'react';
 
 type MoneyRequestReportRHPNavigationButtonsProps = {
     currentTransactionID: string;
@@ -43,6 +44,10 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
 
     const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const {markReportRHPWidth} = useWideRHPActions();
+    const {isOffline} = useNetwork();
+    const isFocused = useIsFocused();
+
+    const pendingSiblingRef = useRef<{transactionID: string; originRoute: string} | null>(null);
 
     const {prevTransactionID, nextTransactionID} = useMemo(() => {
         if (!transactionIDsList || transactionIDsList.length < 2) {
@@ -125,9 +130,16 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
         };
     }, []);
 
-    if (transactionIDsList.length < 2) {
-        return;
-    }
+    const stageSiblingPress = (transactionID: string | undefined, parentReportID: string | undefined) => {
+        // Offline there is no fetch to wait for, so the caller builds the thread optimistically instead.
+        if (!transactionID || !parentReportID || isOffline) {
+            return false;
+        }
+        pendingSiblingRef.current = {transactionID, originRoute: Navigation.getActiveRoute()};
+        // Always true here: we are fetching this report's actions, so it must not overwrite its cached name.
+        openReport({reportID: parentReportID, introSelected, conciergeChat, betas, currentUserAccountID, hasReportActions: true});
+        return true;
+    };
 
     const onNext = (e: GestureResponderEvent | KeyboardEvent | undefined) => {
         e?.preventDefault();
@@ -170,6 +182,11 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
             return;
         }
 
+        // A thread created before the parent action loads would have no parent, so wait for the fetch.
+        if (!nextParentReportAction && stageSiblingPress(nextTransactionID, nextTransaction?.reportID)) {
+            return;
+        }
+
         const nextThreadReportID = nextParentReportAction?.childReportID;
         const navigationParams = {
             reportID: nextThreadReportID,
@@ -245,6 +262,11 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
             return;
         }
 
+        // A thread created before the parent action loads would have no parent, so wait for the fetch.
+        if (!prevParentReportAction && stageSiblingPress(prevTransactionID, prevTransaction?.reportID)) {
+            return;
+        }
+
         const prevThreadReportID = prevParentReportAction?.childReportID;
         const navigationParams = {
             reportID: prevThreadReportID,
@@ -282,6 +304,33 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
         });
     };
 
+    // Replays a staged press once its parent action arrives, but only if the user is still where they pressed —
+    // this screen stays mounted under a pushed RHP, and resuming from there would yank them out with a stale backTo.
+    useEffect(() => {
+        const pending = pendingSiblingRef.current;
+        if (!pending) {
+            return;
+        }
+        if (!isFocused || Navigation.getActiveRoute() !== pending.originRoute) {
+            pendingSiblingRef.current = null;
+            return;
+        }
+        if (pending.transactionID === nextTransactionID && nextParentReportAction) {
+            pendingSiblingRef.current = null;
+            onNext(undefined);
+            return;
+        }
+        if (pending.transactionID === prevTransactionID && prevParentReportAction) {
+            pendingSiblingRef.current = null;
+            onPrevious(undefined);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- onNext/onPrevious are rebuilt every render, so listing them would defeat the dependency list
+    }, [isFocused, nextTransactionID, nextParentReportAction, prevTransactionID, prevParentReportAction]);
+
+    if (transactionIDsList.length < 2) {
+        return;
+    }
+
     return (
         <PrevNextButtons
             isPrevButtonDisabled={!prevTransactionID}

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -31,6 +31,8 @@ function MoneyRequestReportPreviewContent({
     invoiceReceiverPersonalDetail,
     lastTransactionViolations,
     renderTransactionItem,
+    onOrderedTransactionsChange,
+    onCancelPendingPress,
     onCarouselLayout,
     onWrapperLayout,
     currentWidth,
@@ -57,6 +59,8 @@ function MoneyRequestReportPreviewContent({
             onPaymentOptionsShow={onPaymentOptionsShow}
             onPaymentOptionsHide={onPaymentOptionsHide}
             renderTransactionItem={renderTransactionItem}
+            onOrderedTransactionsChange={onOrderedTransactionsChange}
+            onCancelPendingPress={onCancelPendingPress}
             currentWidth={currentWidth}
             reportPreviewStyles={reportPreviewStyles}
             newTransactionIDs={newTransactionIDs}

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx

@@ -47,6 +47,7 @@ import {
     ReportPreviewTransactionViolationsContext,
     ReportPreviewUIStateContext,
 } from './MoneyRequestReportPreviewContext';
+import resolvePressOrigin from './resolvePressOrigin';
 import usePreviewMessageAnimation from './usePreviewMessageAnimation';
 import useReportPreviewActionDecision from './useReportPreviewActionDecision';
 import useReportPreviewCarousel from './useReportPreviewCarousel';
@@ -68,6 +69,8 @@ type MoneyRequestReportPreviewProviderProps = ChildrenProps & {
     onPaymentOptionsShow?: () => void;
     onPaymentOptionsHide?: () => void;
     renderTransactionItem: ListRenderItem<Transaction>;
+    onOrderedTransactionsChange?: (orderedTransactions: Transaction[]) => void;
+    onCancelPendingPress?: () => void;
     currentWidth: number;
     reportPreviewStyles: MoneyRequestReportPreviewStyleType;
     newTransactionIDs?: Set<string>;
@@ -96,6 +99,8 @@ function MoneyRequestReportPreviewProvider({
     onPaymentOptionsShow,
     onPaymentOptionsHide,
     renderTransactionItem,
+    onOrderedTransactionsChange,
+    onCancelPendingPress,
     currentWidth,
     reportPreviewStyles,
     newTransactionIDs,
@@ -202,29 +207,35 @@ function MoneyRequestReportPreviewProvider({
         currentWidth,
         newTransactionIDs,
         renderTransactionItem,
+        onOrderedTransactionsChange,
     });
 
     const openReportFromPreview = useCallback(() => {
         if (!iouReportID) {
             return;
         }
+        const routeAtPress = Navigation.getActiveRoute();
+        onCancelPendingPress?.();
+
+        // "View" pressed inside the cascade window lands on a report a card press already opened, so there is
+        // nothing left to push; pushing it again would nest the report under itself.
+        const {wasPressedFromReport, backTo} = resolvePressOrigin(routeAtPress, isSmallScreenWidth ? `r/${iouReportID}` : `e/${iouReportID}`);
+        if (wasPressedFromReport) {
+            return;
+        }
+
         startSpan(`${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${iouReportID}`, {
             name: 'MoneyRequestReportPreviewContent',
             op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
         });
         // Small screens navigate to full report view since super wide RHP
         // is not available on narrow layouts and would break the navigation logic.
         if (isSmallScreenWidth) {
-            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
+            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo));
         } else {
-            Navigation.navigate(
-                ROUTES.EXPENSE_REPORT_RHP.getRoute({
-                    reportID: iouReportID,
-                    backTo: Navigation.getActiveRoute(),
-                }),
-            );
+            Navigation.navigate(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: iouReportID, backTo}));
         }
-    }, [iouReportID, isSmallScreenWidth]);
+    }, [iouReportID, isSmallScreenWidth, onCancelPendingPress]);
 
     const onHoldMenuOpen = useCallback((requestType: string, paymentType?: PaymentMethodType, canPay?: boolean, methodID?: number) => {
         if (requestType !== CONST.IOU.REPORT_ACTION_TYPE.PAY && requestType !== CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {

src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx

@@ -3,8 +3,6 @@ import Button from '@components/ButtonComposed';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-import variables from '@styles/variables';
-
 import CONST from '@src/CONST';
 
 import React from 'react';
@@ -24,7 +22,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 />;
         }
@@ -45,17 +52,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, styles.reportPreviewActionRow]}>{viewButton}</View>;
+    }
+
+    return (
+        <View style={[buttonMaxWidth, styles.flex1, styles.flexRow, styles.gap2, styles.reportPreviewActionRow]}>
+            <View style={[styles.flex1]}>{primaryButton}</View>
+            {viewButton}
+        </View>
+    );
 }
 
 export default ReportPreviewActionButton;