Merge pull request #73731 from software-mansion-labs/nav/swrhp

Create super wide RHP modal to display expense reports when accessed via Reports page or report previews

Author: mountiny

src/ROUTES.ts

@@ -83,6 +83,17 @@ const ROUTES = {
             return getUrlWithBackToParam(baseRoute, backTo);
         },
     },
+
+    EXPENSE_REPORT_RHP: {
+        route: 'e/:reportID',
+        getRoute: ({reportID, backTo}: {reportID: string; backTo?: string}) => {
+            const baseRoute = `e/${reportID}` as const;
+
+            // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
+            return getUrlWithBackToParam(baseRoute, backTo);
+        },
+    },
+
     SEARCH_REPORT_VERIFY_ACCOUNT: {
         route: `search/view/:reportID/${VERIFY_ACCOUNT}`,
         getRoute: (reportID: string) => `search/view/${reportID}/${VERIFY_ACCOUNT}` as const,

src/SCREENS.ts

@@ -244,6 +244,8 @@ const SCREENS = {
         TRANSACTION_DUPLICATE: 'TransactionDuplicate',
         TRAVEL: 'Travel',
         SEARCH_REPORT: 'SearchReport',
+        SEARCH_REPORT_ACTIONS: 'SearchReportActions',
+        SEARCH_MONEY_REQUEST_REPORT: 'SearchMoneyRequestReport',
         SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters',
         SEARCH_SAVED_SEARCH: 'SearchSavedSearch',
         SETTINGS_CATEGORIES: 'SettingsCategories',
@@ -259,8 +261,10 @@ const SCREENS = {
         REPORT_CHANGE_APPROVER: 'Report_Change_Approver',
         REPORT_VERIFY_ACCOUNT: 'Report_Verify_Account',
         MERGE_TRANSACTION: 'MergeTransaction',
+        EXPENSE_REPORT: 'ExpenseReport',
         DOMAIN: 'Domain',
     },
+    EXPENSE_REPORT_RHP: 'Expense_Report_RHP',
     PUBLIC_CONSOLE_DEBUG: 'Console_Debug',
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',

src/components/MoneyReportHeader.tsx

@@ -42,7 +42,7 @@ import Log from '@libs/Log';
 import {getThreadReportIDsForTransactions, getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {ReportsSplitNavigatorParamList, SearchFullscreenNavigatorParamList, SearchReportParamList} from '@libs/Navigation/types';
+import type {ReportsSplitNavigatorParamList, SearchMoneyRequestReportParamList, SearchReportParamList} from '@libs/Navigation/types';
 import {buildOptimisticNextStepForPreventSelfApprovalsEnabled, buildOptimisticNextStepForStrictPolicyRuleViolations} from '@libs/NextStepUtils';
 import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
 import {selectPaymentType} from '@libs/PaymentUtils';
@@ -185,7 +185,7 @@ function MoneyReportHeader({
     const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
     const route = useRoute<
         | PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>
-        | PlatformStackRouteProp<SearchFullscreenNavigatorParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>
+        | PlatformStackRouteProp<SearchMoneyRequestReportParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>
         | PlatformStackRouteProp<SearchReportParamList, typeof SCREENS.SEARCH.REPORT_RHP>
     >();
     const {login: currentUserLogin, accountID, email} = useCurrentUserPersonalDetails();
@@ -352,9 +352,9 @@ function MoneyReportHeader({
     const {selectedTransactionIDs, removeTransaction, clearSelectedTransactions, currentSearchQueryJSON, currentSearchKey, currentSearchHash} = useSearchContext();
     const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.similarSearchHash, true);
 
-    const {wideRHPRouteKeys} = useContext(WideRHPContext);
+    const {wideRHPRouteKeys, superWideRHPRouteKeys} = useContext(WideRHPContext);
     const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true});
-    const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || (wideRHPRouteKeys.length > 0 && !isSmallScreenWidth);
+    const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || ((wideRHPRouteKeys.length > 0 || superWideRHPRouteKeys.length > 0) && !isSmallScreenWidth);
 
     const showExportProgressModal = useCallback(() => {
         return showConfirmModal({
@@ -1392,7 +1392,7 @@ function MoneyReportHeader({
 
     const showNextStepBar = shouldShowNextStep && !!optimisticNextStep?.message?.length;
     const showNextStepSkeleton = shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline;
-    const shouldShowMoreContent = showNextStepBar || showNextStepSkeleton || !!statusBarProps || isReportInSearch;
+    const shouldShowMoreContent = showNextStepBar || showNextStepSkeleton || !!statusBarProps || (isReportInSearch && !shouldDisplayNarrowMoreButton);
 
     return (
         <View style={[styles.pt0, styles.borderBottom]}>
@@ -1433,6 +1433,12 @@ function MoneyReportHeader({
                                 />
                             </View>
                         )}
+                        {isReportInSearch && (
+                            <MoneyRequestReportNavigation
+                                reportID={moneyRequestReport?.reportID}
+                                shouldDisplayNarrowVersion={!shouldDisplayNarrowMoreButton}
+                            />
+                        )}
                     </View>
                 )}
             </HeaderWithBackButton>
@@ -1477,7 +1483,7 @@ function MoneyReportHeader({
                             />
                         )}
                     </View>
-                    {isReportInSearch && (
+                    {isReportInSearch && !shouldDisplayNarrowMoreButton && (
                         <MoneyRequestReportNavigation
                             reportID={moneyRequestReport?.reportID}
                             shouldDisplayNarrowVersion={shouldDisplayNarrowVersion}

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -5,7 +5,7 @@ import {isUserValidatedSelector} from '@selectors/Account';
 import {accountIDSelector} from '@selectors/Session';
 import {tierNameSelector} from '@selectors/UserWallet';
 import isEmpty from 'lodash/isEmpty';
-import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {DeviceEventEmitter, InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -20,6 +20,7 @@ import {PressableWithFeedback} from '@components/Pressable';
 import ScrollView from '@components/ScrollView';
 import {useSearchContext} from '@components/Search/SearchContext';
 import Text from '@components/Text';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useLoadReportActions from '@hooks/useLoadReportActions';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -165,7 +166,10 @@ function MoneyRequestReportActionsList({
     const isReportArchived = useReportIsArchived(reportID);
     const canPerformWriteAction = canUserPerformWriteAction(report, isReportArchived);
 
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {shouldUseNarrowLayout: shouldUseNarrowLayoutByDefault, isSmallScreenWidth} = useResponsiveLayout();
+    const {superWideRHPRouteKeys} = useContext(WideRHPContext);
+    const shouldUseNarrowLayout = shouldUseNarrowLayoutByDefault && (superWideRHPRouteKeys.length === 0 || isSmallScreenWidth);
 
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
     const [offlineModalVisible, setOfflineModalVisible] = useState(false);

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -1,11 +1,12 @@
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import type {View} from 'react-native';
 import {getButtonRole} from '@components/Button/utils';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
 import {getExpenseHeaders} from '@components/SelectionListWithSections/SearchTableHeader';
 import TransactionItemRow from '@components/TransactionItemRow';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -86,7 +87,9 @@ function MoneyRequestReportTransactionItem({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth, shouldUseNarrowLayout: shouldUseNarrowLayoutByDefault} = useResponsiveLayout();
+    const {superWideRHPRouteKeys} = useContext(WideRHPContext);
+    const shouldUseNarrowLayout = shouldUseNarrowLayoutByDefault && (superWideRHPRouteKeys.length === 0 || isSmallScreenWidth);
     const theme = useTheme();
     const isPendingDelete = isTransactionPendingDelete(transaction);
     const pendingAction = getTransactionPendingAction(transaction);

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -161,7 +161,9 @@ function MoneyRequestReportTransactionList({
     const StyleUtils = useStyleUtils();
     const {translate, localeCompare} = useLocalize();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout: shouldUseNarrowLayoutByDefault, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
+    const {superWideRHPRouteKeys} = useContext(WideRHPContext);
+    const shouldUseNarrowLayout = shouldUseNarrowLayoutByDefault && (superWideRHPRouteKeys.length === 0 || isSmallScreenWidth);
     const {markReportIDAsExpense} = useContext(WideRHPContext);
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -1,18 +1,23 @@
 import {PortalHost} from '@gorhom/portal';
 import React, {useCallback, useMemo} from 'react';
-import {InteractionManager, View} from 'react-native';
+// We use Animated for all functionality related to wide RHP to make it easier
+// to interact with react-navigation components (e.g., CardContainer, interpolator), which also use Animated.
+// eslint-disable-next-line no-restricted-imports
+import {Animated, InteractionManager, ScrollView, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import HeaderGap from '@components/HeaderGap';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import MoneyRequestReceiptView from '@components/ReportActionItem/MoneyRequestReceiptView';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 import useNetwork from '@hooks/useNetwork';
 import useNewTransactions from '@hooks/useNewTransactions';
 import useOnyx from '@hooks/useOnyx';
 import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
 import useParentReportAction from '@hooks/useParentReportAction';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
 import {removeFailedReport} from '@libs/actions/Report';
@@ -56,6 +61,16 @@ function goBackFromSearchMoneyRequest() {
     const rootState = navigationRef.getRootState();
     const lastRoute = rootState.routes.at(-1);
 
+    if (!lastRoute) {
+        Log.hmmm('[goBackFromSearchMoneyRequest()] No last route found in root state.');
+        return;
+    }
+
+    if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+        Navigation.goBack();
+        return;
+    }
+
     if (lastRoute?.name !== NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR) {
         Log.hmmm('[goBackFromSearchMoneyRequest()] goBackFromSearchMoneyRequest was called from a different navigator than SearchFullscreenNavigator.');
         return;
@@ -84,6 +99,10 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
     const reportID = report?.reportID;
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`, {canBeMissing: true});
@@ -129,6 +148,9 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
     const isEmptyTransactionReport = visibleTransactions && visibleTransactions.length === 0 && transactionThreadReportID === undefined;
     const shouldDisplayMoneyRequestActionsList = !!isEmptyTransactionReport || shouldDisplayReportTableView(report, visibleTransactions ?? []);
 
+    const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`, {canBeMissing: true});
+    const shouldShowWideRHPReceipt = visibleTransactions.length === 1 && !isSmallScreenWidth && !!transactionThreadReport;
+
     const reportHeaderView = useMemo(
         () =>
             isTransactionThreadView ? (
@@ -211,47 +233,61 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
             >
                 <HeaderGap />
                 {reportHeaderView}
-                <View style={[styles.overflowHidden, styles.justifyContentEnd, styles.flex1]}>
-                    {shouldDisplayMoneyRequestActionsList ? (
-                        <MoneyRequestReportActionsList
-                            report={report}
-                            policy={policy}
-                            transactions={visibleTransactions}
-                            hasPendingDeletionTransaction={hasPendingDeletionTransaction}
-                            newTransactions={newTransactions}
-                            reportActions={reportActions}
-                            violations={allReportViolations}
-                            hasOlderActions={hasOlderActions}
-                            hasNewerActions={hasNewerActions}
-                            showReportActionsLoadingState={isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions}
-                        />
-                    ) : (
-                        <ReportActionsView
-                            report={report}
-                            reportActions={reportActions}
-                            isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
-                            hasNewerActions={hasNewerActions}
-                            hasOlderActions={hasOlderActions}
-                            parentReportAction={parentReportAction}
-                            transactionThreadReportID={transactionThreadReportID}
-                        />
+                <View style={[styles.flex1, styles.flexRow]}>
+                    {shouldShowWideRHPReceipt && (
+                        <Animated.View style={styles.wideRHPMoneyRequestReceiptViewContainer}>
+                            <ScrollView contentContainerStyle={styles.wideRHPMoneyRequestReceiptViewScrollViewContainer}>
+                                <MoneyRequestReceiptView
+                                    allReports={allReports}
+                                    report={transactionThreadReport}
+                                    fillSpace
+                                    isDisplayedInWideRHP
+                                />
+                            </ScrollView>
+                        </Animated.View>
                     )}
-                    {shouldDisplayReportFooter ? (
-                        <>
-                            <ReportFooter
+                    <View style={[[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]]}>
+                        {shouldDisplayMoneyRequestActionsList ? (
+                            <MoneyRequestReportActionsList
                                 report={report}
-                                reportMetadata={reportMetadata}
                                 policy={policy}
-                                pendingAction={reportPendingAction}
-                                isComposerFullSize={!!isComposerFullSize}
-                                lastReportAction={lastReportAction}
-                                reportTransactions={transactions}
-                                // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
-                                transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
+                                transactions={visibleTransactions}
+                                hasPendingDeletionTransaction={hasPendingDeletionTransaction}
+                                newTransactions={newTransactions}
+                                reportActions={reportActions}
+                                violations={allReportViolations}
+                                hasOlderActions={hasOlderActions}
+                                hasNewerActions={hasNewerActions}
+                                showReportActionsLoadingState={isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions}
+                            />
+                        ) : (
+                            <ReportActionsView
+                                report={report}
+                                reportActions={reportActions}
+                                isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
+                                hasNewerActions={hasNewerActions}
+                                hasOlderActions={hasOlderActions}
+                                parentReportAction={parentReportAction}
+                                transactionThreadReportID={transactionThreadReportID}
                             />
-                            <PortalHost name="suggestions" />
-                        </>
-                    ) : null}
+                        )}
+                        {shouldDisplayReportFooter ? (
+                            <>
+                                <ReportFooter
+                                    report={report}
+                                    reportMetadata={reportMetadata}
+                                    policy={policy}
+                                    pendingAction={reportPendingAction}
+                                    isComposerFullSize={!!isComposerFullSize}
+                                    lastReportAction={lastReportAction}
+                                    reportTransactions={transactions}
+                                    // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
+                                    transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
+                                />
+                                <PortalHost name="suggestions" />
+                            </>
+                        ) : null}
+                    </View>
                 </View>
             </OfflineWithFeedback>
         </View>