refactor: IOURequestStepScan clean-up, phase 6: move multi-scan state to hook and use key for reset

src/pages/iou/request/IOURequestStartPage.tsx

@@ -97,7 +97,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});
@@ -186,7 +185,6 @@ function IOURequestStartPage({
             if (transaction?.iouRequestType === newIOUType) {
                 return;
             }
-            setIsMultiScanEnabled(false);
             initMoneyRequest({
                 reportID,
                 policy,
@@ -340,14 +338,12 @@ function IOURequestStartPage({
                                     {() => (
                                         <TabScreenWithFocusTrapWrapper>
                                             <IOURequestStepScan
+                                                key={selectedTab ?? CONST.TAB_REQUEST.SCAN}
                                                 route={route}
                                                 navigation={navigation}
                                                 onLayout={(setTestReceiptAndNavigate) => {
                                                     setTestReceiptAndNavigateRef.current = setTestReceiptAndNavigate;
                                                 }}
-                                                isMultiScanEnabled={isMultiScanEnabled}
-                                                setIsMultiScanEnabled={setIsMultiScanEnabled}
-                                                isStartingScan
                                             />
                                         </TabScreenWithFocusTrapWrapper>
                                     )}

src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx

@@ -43,10 +43,9 @@
     iouType: IOUType;
     currentUserPersonalDetails: CurrentUserPersonalDetails;
     reportID: string;
-    isMultiScanEnabled?: boolean;
-    isStartingScan?: boolean;
+    isStartingScan: boolean;
     updateScanAndNavigate: (file: FileObject, source: string) => void;
-    setIsMultiScanEnabled?: (value: boolean) => void;
+    setIsMultiScanEnabled: (value: boolean) => void;
     PDFValidationComponent: React.ReactNode;
     shouldAcceptMultipleFiles: boolean;
     receiptFiles: ReceiptFile[];
@@ -56,9 +55,10 @@
     navigateToConfirmationStep: (files: ReceiptFile[], locationPermissionGranted?: boolean, isTestTransaction?: boolean) => void;
     shouldSkipConfirmation: boolean;
     setStartLocationPermissionFlow: (value: boolean) => void;
-    onLayout?: () => void;
     onBackButtonPress: () => void;
     shouldShowWrapper: boolean;
+    isMultiScanEnabled?: boolean;
+    onLayout?: () => void;
 };
 
 /**
@@ -103,7 +103,6 @@
     iouType,
     currentUserPersonalDetails,
     reportID,
-    isMultiScanEnabled = false,
     isStartingScan,
     updateScanAndNavigate,
     setIsMultiScanEnabled,
@@ -116,9 +115,10 @@
     navigateToConfirmationStep,
     shouldSkipConfirmation,
     setStartLocationPermissionFlow,
-    onLayout,
     onBackButtonPress,
     shouldShowWrapper,
+    isMultiScanEnabled = false,
+    onLayout,
 }: MobileWebCameraViewProps) {
     const {blinkStyle, canUseMultiScan, shouldShowMultiScanEducationalPopup, showBlink, toggleMultiScan, dismissMultiScanEducationalPopup, submitReceipts, submitMultiScanReceipts} =
         useMobileReceiptScan({
@@ -444,7 +444,7 @@
                                 ) : null}
                                 <Animated.View
                                     pointerEvents="none"
                                     style={[StyleSheet.absoluteFillObject, styles.backgroundWhite, blinkStyle, styles.zIndex10]}
                                 />
                             </View>
                         )}

src/pages/iou/request/step/IOURequestStepScan/hooks/useMobileReceiptScan.ts

@@ -19,7 +19,7 @@ function useMobileReceiptScan({
     initialTransaction,
     iouType,
     isMultiScanEnabled = false,
-    isStartingScan = false,
+    isStartingScan,
     receiptFiles,
     navigateToConfirmationStep,
     shouldSkipConfirmation,
@@ -78,7 +78,7 @@ function useMobileReceiptScan({
         }
         removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
         removeDraftTransactionsByIDs(draftTransactionIDs, true);
-        setIsMultiScanEnabled?.(!isMultiScanEnabled);
+        setIsMultiScanEnabled(!isMultiScanEnabled);
     }
 
     function dismissMultiScanEducationalPopup() {

src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptScan.ts

@@ -37,8 +37,6 @@ function useReceiptScan({
     currentUserPersonalDetails,
     backTo,
     backToReport,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
     updateScanAndNavigate,
     getSource,
 }: UseReceiptScanParams) {
@@ -69,6 +67,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((transactions ?? []).length > 1);
+    const isStartingScan = action === CONST.IOU.ACTION.CREATE;
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isArchived = isArchivedReport(reportNameValuePairs);
@@ -232,6 +232,9 @@ function useReceiptScan({
     });
     return {
         transactions,
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         isEditing,
         isReplacingReceipt,
         shouldAcceptMultipleFiles,

src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

@@ -64,9 +64,6 @@ function IOURequestStepScan({
     transaction: initialTransaction,
     currentUserPersonalDetails,
     onLayout,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
-    setIsMultiScanEnabled,
 }: IOURequestStepScanProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -288,6 +285,9 @@ function IOURequestStepScan({
     const getSource = useCallback((file: FileObject) => file.uri ?? '', []);
 
     const {
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         isEditing,
         shouldAcceptMultipleFiles,
         shouldSkipConfirmation,
@@ -310,8 +310,6 @@ function IOURequestStepScan({
         currentUserPersonalDetails,
         backTo,
         backToReport,
-        isMultiScanEnabled,
-        isStartingScan,
         updateScanAndNavigate,
         getSource,
     });

src/pages/iou/request/step/IOURequestStepScan/index.tsx

@@ -32,9 +32,6 @@ function IOURequestStepScan({
     transaction: initialTransaction,
     currentUserPersonalDetails,
     onLayout,
-    isMultiScanEnabled = false,
-    isStartingScan = false,
-    setIsMultiScanEnabled,
 }: Omit<IOURequestStepScanProps, 'user'>) {
     const isMobileWeb = isMobile();
     const policy = usePolicy(report?.policyID);
@@ -62,6 +59,9 @@ function IOURequestStepScan({
 
     const {
         transactions,
+        isMultiScanEnabled,
+        setIsMultiScanEnabled,
+        isStartingScan,
         isEditing,
         isReplacingReceipt,
         shouldAcceptMultipleFiles,
@@ -85,8 +85,6 @@ function IOURequestStepScan({
         currentUserPersonalDetails,
         backTo,
         backToReport,
-        isMultiScanEnabled,
-        isStartingScan,
         updateScanAndNavigate,
         getSource,
     });
@@ -127,7 +125,7 @@ function IOURequestStepScan({
             if (isAllScanFilesCanBeRead) {
                 return;
             }
-            setIsMultiScanEnabled?.(false);
+            setIsMultiScanEnabled(false);
             removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
             removeDraftTransactionsByIDs(draftTransactionIDs, true);
         });

src/pages/iou/request/step/IOURequestStepScan/types.ts

@@ -38,12 +38,6 @@ 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;
-
     /** Callback to replace receipt and navigate back when editing */
     updateScanAndNavigate: (file: FileObject, source: string) => void;
 
@@ -62,7 +56,7 @@ type UseMobileReceiptScanParams = {
     isMultiScanEnabled?: boolean;
 
     /** Whether the user is starting a scan request */
-    isStartingScan?: boolean;
+    isStartingScan: boolean;
 
     /** The current receipt files being scanned */
     receiptFiles: ReceiptFile[];
@@ -76,8 +70,8 @@ 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;
 };
 
 type IOURequestStepScanProps = WithCurrentUserPersonalDetailsProps &
@@ -90,15 +84,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 = {

tests/ui/IOURequestStepScanTest.tsx

@@ -171,15 +171,22 @@ describe('IOURequestStepScan', () => {
         const REPORT_ID = '1';
         const POLICY_ID = 'policy-1';
         const TRANSACTION_ID_1 = '101';
+        const TRANSACTION_ID_2 = '102';
 
         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};
 
+        const transaction2 = createRandomTransaction(2);
+        transaction2.reportID = REPORT_ID;
+        transaction2.transactionID = TRANSACTION_ID_2;
+        transaction2.receipt = {source: 'file://second-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 Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${TRANSACTION_ID_2}`, transaction2);
         });
         await waitForBatchedUpdates();
 
@@ -202,9 +209,6 @@ describe('IOURequestStepScan', () => {
                                 } as unknown as PlatformStackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.STEP_SCAN>['route']
                             }
                             navigation={{} as never}
-                            isMultiScanEnabled
-                            isStartingScan
-                            setIsMultiScanEnabled={jest.fn()}
                         />
                     </NavigationContainer>
                 </LocaleContextProvider>

tests/unit/hooks/useReceiptScan.test.ts

@@ -62,8 +62,6 @@ function createDefaultParams(): Parameters<typeof useReceiptScan>[0] {
         getSource: (file: {uri?: string}) => file?.uri ?? 'file://image.png',
         backTo: undefined,
         backToReport: undefined,
-        isMultiScanEnabled: false,
-        isStartingScan: true,
     };
 }
 
@@ -298,9 +296,9 @@ describe('useReceiptScan', () => {
         });
 
         it('should clear receiptFiles when isMultiScanEnabled changes from true to false', async () => {
-            const multiScanParams = {...params, isMultiScanEnabled: true};
-            const {result, rerender} = renderHook((p: Parameters<typeof useReceiptScan>[0]) => useReceiptScan(p), {
-                initialProps: multiScanParams,
+            const {result} = renderHook(() => useReceiptScan(params));
+            await act(async () => {
+                result.current.setIsMultiScanEnabled(true);
             });
             await waitForBatchedUpdatesWithAct();
 
@@ -311,7 +309,9 @@ describe('useReceiptScan', () => {
             await waitForBatchedUpdatesWithAct();
             expect(result.current.receiptFiles).toHaveLength(1);
 
-            rerender({...multiScanParams, isMultiScanEnabled: false});
+            await act(async () => {
+                result.current.setIsMultiScanEnabled(false);
+            });
             await waitForBatchedUpdatesWithAct();
             expect(result.current.receiptFiles).toEqual([]);
         });
@@ -382,6 +382,11 @@ describe('useReceiptScan', () => {
             const {result} = renderHook(() => useReceiptScan(params));
             await waitForBatchedUpdatesWithAct();
 
+            await act(async () => {
+                result.current.setIsMultiScanEnabled(false);
+            });
+            await waitForBatchedUpdatesWithAct();
+
             const files = [{uri: 'file://receipt.jpg', name: 'receipt.jpg', type: 'image/jpeg'}];
             await act(async () => {
                 result.current.validateFiles(files);
@@ -407,8 +412,12 @@ describe('useReceiptScan', () => {
         });
 
         it('should not call removeDraftTransactionsByIDs when multi-scan is enabled', async () => {
-            const multiScanParams = {...params, isMultiScanEnabled: true, setIsMultiScanEnabled: jest.fn()};
-            const {result} = renderHook(() => useReceiptScan(multiScanParams));
+            const {result} = renderHook(() => useReceiptScan(params));
+            await waitForBatchedUpdatesWithAct();
+
+            await act(async () => {
+                result.current.setIsMultiScanEnabled(true);
+            });
             await waitForBatchedUpdatesWithAct();
 
             const files = [{uri: 'file://receipt.jpg', name: 'receipt.jpg', type: 'image/jpeg'}];
@@ -420,7 +429,7 @@ describe('useReceiptScan', () => {
         });
 
         it('should not call removeDraftTransactionsByIDs when isStartingScan is false', async () => {
-            const nonStartingParams = {...params, isStartingScan: false};
+            const nonStartingParams = {...params, action: CONST.IOU.ACTION.SUBMIT};
             const {result} = renderHook(() => useReceiptScan(nonStartingParams));
             await waitForBatchedUpdatesWithAct();
 
@@ -443,6 +452,11 @@ describe('useReceiptScan', () => {
             const {result} = renderHook(() => useReceiptScan(params));
             await waitForBatchedUpdatesWithAct();
 
+            await act(async () => {
+                result.current.setIsMultiScanEnabled(false);
+            });
+            await waitForBatchedUpdatesWithAct();
+
             const files = [{uri: 'file://receipt.jpg', name: 'receipt.jpg', type: 'image/jpeg'}];
             await act(async () => {
                 result.current.validateFiles(files);