Merge pull request Expensify#87242 from samranahm/79929/IOURequestStepScan-phase-6-v2

roryabraham · web-flow · commit 5f9df4698c2b · 2026-04-08T08:29:30.000-07:00
refactor: `IOURequestStepScan` clean-up, phase 6: move multi-scan state to hook and use `key` for reset (v2)
diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx
@@ -98,7 +98,6 @@ function IOURequestStartPage({
     });
 
     const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES);
-    const [isMultiScanEnabled, setIsMultiScanEnabled] = useState(false);
     const [currentDate] = useOnyx(ONYXKEYS.CURRENT_DATE);
     const {isOffline} = useNetwork();
     const [hasUserSubmittedExpenseOrScannedReceipt] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING, {selector: isTestReceiptTooltipDismissedSelector});
@@ -188,7 +187,6 @@ function IOURequestStartPage({
             if (transaction?.iouRequestType === newIOUType) {
                 return;
             }
-            setIsMultiScanEnabled(false);
             initMoneyRequest({
                 reportID,
                 policy,
@@ -347,14 +345,12 @@ function IOURequestStartPage({
                                     {() => (
                                         <TabScreenWithFocusTrapWrapper>
                                             <IOURequestStepScan
+                                                key={transactionRequestType}
                                                 route={route}
                                                 navigation={navigation}
                                                 onLayout={(setTestReceiptAndNavigate) => {
                                                     setTestReceiptAndNavigateRef.current = setTestReceiptAndNavigate;
                                                 }}
-                                                isMultiScanEnabled={isMultiScanEnabled}
-                                                setIsMultiScanEnabled={setIsMultiScanEnabled}
-                                                isStartingScan
                                             />
                                         </TabScreenWithFocusTrapWrapper>
                                     )}
diff --git a/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx b/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx
@@ -41,10 +41,10 @@ type MobileWebCameraViewProps = {
     iouType: IOUType;
     currentUserPersonalDetails: CurrentUserPersonalDetails;
     reportID: string;
-    isMultiScanEnabled?: boolean;
-    isStartingScan?: boolean;
+    isMultiScanEnabled: boolean;
+    isStartingScan: boolean;
     updateScanAndNavigate: (file: FileObject, source: string) => void;
-    setIsMultiScanEnabled?: (value: boolean) => void;
+    setIsMultiScanEnabled: (value: boolean) => void;
     PDFValidationComponent: React.ReactNode;
     shouldAcceptMultipleFiles: boolean;
     receiptFiles: ReceiptFile[];
@@ -54,8 +54,8 @@ type MobileWebCameraViewProps = {
     navigateToConfirmationStep: (files: ReceiptFile[], locationPermissionGranted?: boolean, isTestTransaction?: boolean) => void;
     shouldSkipConfirmation: boolean;
     setStartLocationPermissionFlow: (value: boolean) => void;
-    onLayout?: () => void;
     onBackButtonPress: () => void;
+    onLayout?: () => void;
     shouldShowWrapper: boolean;
 };
 
@@ -65,7 +65,7 @@ function MobileWebCameraView({
     iouType,
     currentUserPersonalDetails,
     reportID,
-    isMultiScanEnabled = false,
+    isMultiScanEnabled,
     isStartingScan,
     updateScanAndNavigate,
     setIsMultiScanEnabled,
@@ -78,8 +78,8 @@ function MobileWebCameraView({
     navigateToConfirmationStep,
     shouldSkipConfirmation,
     setStartLocationPermissionFlow,
-    onLayout,
     onBackButtonPress,
+    onLayout,
     shouldShowWrapper,
 }: MobileWebCameraViewProps) {
     const {blinkStyle, canUseMultiScan, shouldShowMultiScanEducationalPopup, showBlink, toggleMultiScan, dismissMultiScanEducationalPopup, submitReceipts, submitMultiScanReceipts} =
@@ -93,6 +93,7 @@ function MobileWebCameraView({
             shouldSkipConfirmation,
             setStartLocationPermissionFlow,
             setIsMultiScanEnabled,
+            setReceiptFiles,
         });
     const theme = useTheme();
     const styles = useThemeStyles();
diff --git a/src/pages/iou/request/step/IOURequestStepScan/hooks/useMobileReceiptScan.ts b/src/pages/iou/request/step/IOURequestStepScan/hooks/useMobileReceiptScan.ts
@@ -18,13 +18,14 @@ import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft'
 function useMobileReceiptScan({
     initialTransaction,
     iouType,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
+    isMultiScanEnabled,
+    isStartingScan,
     receiptFiles,
     navigateToConfirmationStep,
     shouldSkipConfirmation,
     setStartLocationPermissionFlow,
     setIsMultiScanEnabled,
+    setReceiptFiles,
 }: UseMobileReceiptScanParams) {
     const [shouldStartLocationPermissionFlow] = useOnyx(ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT, {
         selector: shouldStartLocationPermissionFlowSelector,
@@ -78,7 +79,10 @@ function useMobileReceiptScan({
         }
         removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
         removeDraftTransactionsByIDs(draftTransactionIDs, true);
-        setIsMultiScanEnabled?.(!isMultiScanEnabled);
+        if (isMultiScanEnabled) {
+            setReceiptFiles([]);
+        }
+        setIsMultiScanEnabled(!isMultiScanEnabled);
     }
 
     function dismissMultiScanEducationalPopup() {
diff --git a/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptScan.ts b/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptScan.ts
@@ -1,6 +1,6 @@
 import shouldStartLocationPermissionFlowSelector from '@selectors/LocationPermission';
 import {hasSeenTourSelector} from '@selectors/Onboarding';
-import {useEffect, useMemo, useState} from 'react';
+import {useMemo, useState} from 'react';
 import TestReceipt from '@assets/images/fake-receipt.png';
 import useDefaultExpensePolicy from '@hooks/useDefaultExpensePolicy';
 import useFilesValidation from '@hooks/useFilesValidation';
@@ -24,6 +24,7 @@ import {setMoneyRequestReceipt} from '@userActions/IOU/Receipt';
 import {buildOptimisticTransactionAndCreateDraft, removeDraftTransactionsByIDs} from '@userActions/TransactionEdit';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
 import {validTransactionDraftsSelector} from '@src/selectors/TransactionDraft';
 import type Transaction from '@src/types/onyx/Transaction';
 import type {FileObject} from '@src/types/utils/Attachment';
@@ -38,8 +39,7 @@ function useReceiptScan({
     currentUserPersonalDetails,
     backTo,
     backToReport,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
+    routeName,
     updateScanAndNavigate,
     getSource,
 }: UseReceiptScanParams) {
@@ -70,6 +70,8 @@ function useReceiptScan({
     const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
     const draftTransactionIDs = Object.keys(allTransactionDrafts ?? {});
+    const [isMultiScanEnabled, setIsMultiScanEnabled] = useState(false);
+    const isStartingScan = routeName === SCREENS.MONEY_REQUEST.CREATE;
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isReplacingReceipt = (isEditing && hasReceipt(initialTransaction)) || (!!initialTransaction?.receipt && !!backTo);
@@ -90,15 +92,6 @@ function useReceiptScan({
     const [startLocationPermissionFlow, setStartLocationPermissionFlow] = useState(false);
     const [receiptFiles, setReceiptFiles] = useState<ReceiptFile[]>([]);
 
-    // Clear receipt files when multi-scan is disabled
-    useEffect(() => {
-        if (isMultiScanEnabled) {
-            return;
-        }
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setReceiptFiles([]);
-    }, [isMultiScanEnabled]);
-
     const [recentWaypoints] = useOnyx(ONYXKEYS.NVP_RECENT_WAYPOINTS);
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
 
@@ -233,6 +226,9 @@ function useReceiptScan({
     });
     return {
         transactions,
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         isEditing,
         isReplacingReceipt,
         shouldAcceptMultipleFiles,
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
@@ -57,14 +57,12 @@ import type IOURequestStepScanProps from './types';
 function IOURequestStepScan({
     report,
     route: {
+        name: routeName,
         params: {action, iouType, reportID, transactionID: initialTransactionID, backTo, backToReport},
     },
     transaction: initialTransaction,
     currentUserPersonalDetails,
     onLayout,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
-    setIsMultiScanEnabled,
 }: IOURequestStepScanProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -224,6 +222,9 @@ function IOURequestStepScan({
 
     const {
         isEditing,
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         shouldAcceptMultipleFiles,
         shouldSkipConfirmation,
         startLocationPermissionFlow,
@@ -245,8 +246,7 @@ function IOURequestStepScan({
         currentUserPersonalDetails,
         backTo,
         backToReport,
-        isMultiScanEnabled,
-        isStartingScan,
+        routeName,
         updateScanAndNavigate,
         getSource,
     });
@@ -262,6 +262,7 @@ function IOURequestStepScan({
             shouldSkipConfirmation,
             setStartLocationPermissionFlow,
             setIsMultiScanEnabled,
+            setReceiptFiles,
         });
 
     const maybeCancelShutterSpan = useCallback(() => {
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx
@@ -28,14 +28,12 @@ import type IOURequestStepScanProps from './types';
 function IOURequestStepScan({
     report,
     route: {
+        name: routeName,
         params: {action, iouType, reportID, transactionID: initialTransactionID, backTo, backToReport},
     },
     transaction: initialTransaction,
     currentUserPersonalDetails,
     onLayout,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
-    setIsMultiScanEnabled,
 }: Omit<IOURequestStepScanProps, 'user'>) {
     const isMobileWeb = isMobile();
     const policy = usePolicy(report?.policyID);
@@ -63,6 +61,9 @@ function IOURequestStepScan({
 
     const {
         transactions,
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         isEditing,
         isReplacingReceipt,
         shouldAcceptMultipleFiles,
@@ -86,8 +87,7 @@ function IOURequestStepScan({
         currentUserPersonalDetails,
         backTo,
         backToReport,
-        isMultiScanEnabled,
-        isStartingScan,
+        routeName,
         updateScanAndNavigate,
         getSource,
     });
@@ -128,7 +128,7 @@ function IOURequestStepScan({
             if (isAllScanFilesCanBeRead) {
                 return;
             }
-            setIsMultiScanEnabled?.(false);
+            setIsMultiScanEnabled(false);
             removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
             removeDraftTransactionsByIDs(draftTransactionIDs, true);
         });
diff --git a/src/pages/iou/request/step/IOURequestStepScan/types.ts b/src/pages/iou/request/step/IOURequestStepScan/types.ts
@@ -38,11 +38,8 @@ type UseReceiptScanParams = {
     /** Report ID to navigate back to */
     backToReport: string | undefined;
 
-    /** Whether multi-scan is enabled */
-    isMultiScanEnabled: boolean | undefined;
-
-    /** Whether the user is starting a scan request */
-    isStartingScan: boolean | undefined;
+    /** The route name to determine if scan is starting */
+    routeName: IOURequestStepScanProps['route']['name'];
 
     /** Callback to replace receipt and navigate back when editing */
     updateScanAndNavigate: (file: FileObject, source: string) => void;
@@ -59,10 +56,10 @@ type UseMobileReceiptScanParams = {
     iouType: IOUType;
 
     /** Whether multi-scan is enabled */
-    isMultiScanEnabled?: boolean;
+    isMultiScanEnabled: boolean;
 
     /** Whether the user is starting a scan request */
-    isStartingScan?: boolean;
+    isStartingScan: boolean;
 
     /** The current receipt files being scanned */
     receiptFiles: ReceiptFile[];
@@ -76,8 +73,11 @@ type UseMobileReceiptScanParams = {
     /** Callback to start the location permission flow */
     setStartLocationPermissionFlow: (value: boolean) => void;
 
-    /** Callback to update multi-scan enabled state in parent */
-    setIsMultiScanEnabled: ((value: boolean) => void) | undefined;
+    /** Callback to update multi-scan enabled state */
+    setIsMultiScanEnabled: (value: boolean) => void;
+
+    /** Callback to update scanned receipt files */
+    setReceiptFiles: (value: ReceiptFile[]) => void;
 };
 
 type IOURequestStepScanProps = WithCurrentUserPersonalDetailsProps &
@@ -90,15 +90,6 @@ type IOURequestStepScanProps = WithCurrentUserPersonalDetailsProps &
          * Receives a function (`setTestReceiptAndNavigate`) as an argument,
          */
         onLayout?: (setTestReceiptAndNavigate: () => void) => void;
-
-        /** If the receipts preview should be shown */
-        isMultiScanEnabled?: boolean;
-
-        /** Updates isMultiScanEnabled flag */
-        setIsMultiScanEnabled?: (value: boolean) => void;
-
-        /** Indicates whether users start to create scan request */
-        isStartingScan?: boolean;
     };
 
 type ReceiptFile = {
diff --git a/tests/ui/IOURequestStepScanTest.tsx b/tests/ui/IOURequestStepScanTest.tsx
@@ -1,5 +1,5 @@
 import {NavigationContainer} from '@react-navigation/native';
-import {act, render} from '@testing-library/react-native';
+import {act, fireEvent, render, screen} from '@testing-library/react-native';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -172,17 +172,6 @@ describe('IOURequestStepScan', () => {
         const POLICY_ID = 'policy-1';
         const TRANSACTION_ID_1 = '101';
 
-        const transaction1 = createRandomTransaction(1);
-        transaction1.reportID = REPORT_ID;
-        transaction1.transactionID = TRANSACTION_ID_1;
-        transaction1.receipt = {source: 'file://first-receipt.png', state: CONST.IOU.RECEIPT_STATE.OPEN};
-
-        await act(async () => {
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, createMinimalReport(REPORT_ID, POLICY_ID));
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${TRANSACTION_ID_1}`, transaction1);
-        });
-        await waitForBatchedUpdates();
-
         render(
             <OnyxListItemProvider>
                 <LocaleContextProvider>
@@ -191,27 +180,36 @@ describe('IOURequestStepScan', () => {
                             route={
                                 {
                                     key: 'StepScan2',
-                                    name: SCREENS.MONEY_REQUEST.STEP_SCAN,
+                                    name: SCREENS.MONEY_REQUEST.CREATE,
                                     params: {
                                         action: CONST.IOU.ACTION.CREATE,
                                         iouType: CONST.IOU.TYPE.SUBMIT,
                                         reportID: REPORT_ID,
                                         transactionID: TRANSACTION_ID_1,
                                         pageIndex: 0,
                                     },
-                                } as unknown as PlatformStackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.STEP_SCAN>['route']
+                                } as unknown as PlatformStackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.CREATE>['route']
                             }
                             navigation={{} as never}
-                            isMultiScanEnabled
-                            isStartingScan
-                            setIsMultiScanEnabled={jest.fn()}
                         />
                     </NavigationContainer>
                 </LocaleContextProvider>
             </OnyxListItemProvider>,
         );
 
         await waitForBatchedUpdatesWithAct();
+        fireEvent.press(screen.getByLabelText('multi-scan'));
+        await waitForBatchedUpdates();
+        const transaction1 = createRandomTransaction(1);
+        transaction1.reportID = REPORT_ID;
+        transaction1.transactionID = TRANSACTION_ID_1;
+        transaction1.receipt = {source: 'file://first-receipt.png', state: CONST.IOU.RECEIPT_STATE.OPEN};
+
+        await act(async () => {
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, createMinimalReport(REPORT_ID, POLICY_ID));
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${TRANSACTION_ID_1}`, transaction1);
+        });
+        await waitForBatchedUpdates();
 
         expect(triggerFileSelection).not.toBeNull();
 
diff --git a/tests/unit/hooks/useMobileReceiptScan.test.ts b/tests/unit/hooks/useMobileReceiptScan.test.ts
diff --git a/tests/unit/hooks/useReceiptScan.test.ts b/tests/unit/hooks/useReceiptScan.test.ts
