Decompose scan pr3 variants router

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import useOnyx from '@hooks/useOnyx';
+import useReportIsArchived from '@hooks/useReportIsArchived';
+import {isPolicyExpenseChat} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import type {IOUAction, IOUType} from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
+import type {Policy, Report} from '@src/types/onyx';
+import type Transaction from '@src/types/onyx/Transaction';
+import MultiScanGate from './components/MultiScanGate';
+import ScanEditReceipt from './components/ScanEditReceipt';
+import ScanFromReport from './components/ScanFromReport';
+import ScanGlobalCreate from './components/ScanGlobalCreate';
+import ScanSkipConfirmation from './components/ScanSkipConfirmation';
+
+type ScanRouterProps = {
+    report: OnyxEntry<Report>;
+    action: IOUAction;
+    iouType: IOUType;
+    reportID: string;
+    transactionID: string;
+    transaction: OnyxEntry<Transaction>;
+    backTo: Route | undefined;
+    backToReport: string | undefined;
+};
+
+type NonGlobalCreateProps = {
+    report: OnyxEntry<Report>;
+    iouType: IOUType;
+    reportID: string;
+    transactionID: string;
+    transaction: OnyxEntry<Transaction>;
+    backToReport: string | undefined;
+};
+
+type NewReceiptProps = NonGlobalCreateProps;
+
+const policyRequiresTagOrCategorySelector = (policy: OnyxEntry<Policy>) => !!policy?.requiresCategory || !!policy?.requiresTag;
+
+/**
+ * Owns the policy + skip-confirmation subscriptions so the edit and global-create branches don't pay for them.
+ * Decides between SkipConfirmation (quick action) and FromReport (report (+) entry).
+ */
+function ScanNonGlobalCreate({report, iouType, reportID, transactionID, transaction, backToReport}: NonGlobalCreateProps) {
+    const [policyRequiresTagOrCategory] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, {selector: policyRequiresTagOrCategorySelector});
+    const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
+    const shouldSkipConfirmation = !!skipConfirmation && !!report?.reportID && !(isPolicyExpenseChat(report) && policyRequiresTagOrCategory);
+
+    if (shouldSkipConfirmation) {
+        return (
+            <ScanSkipConfirmation
+                report={report}
+                iouType={iouType}
+                reportID={reportID}
+                transactionID={transactionID}
+                transaction={transaction}
+                backToReport={backToReport}
+            />
+        );
+    }
+
+    return (
+        <ScanFromReport
+            report={report}
+            iouType={iouType}
+            reportID={reportID}
+            transactionID={transactionID}
+            transaction={transaction}
+            backToReport={backToReport}
+        />
+    );
+}
+
+ScanNonGlobalCreate.displayName = 'ScanNonGlobalCreate';
+
+/**
+ * Splits new-receipt flows: global-create (FAB) vs. report-scoped (FromReport / SkipConfirm).
+ * The archived-report check lives here so neither global-create nor non-global-create variants need to subscribe.
+ */
+function ScanNewReceipt({report, iouType, reportID, transactionID, transaction, backToReport}: NewReceiptProps) {
+    const isArchived = useReportIsArchived(report?.reportID);
+    const isFromGlobalCreate = !!transaction?.isFromGlobalCreate;
+
+    if (!isFromGlobalCreate && !isArchived && iouType !== CONST.IOU.TYPE.CREATE) {
+        return (
+            <ScanNonGlobalCreate
+                report={report}
+                iouType={iouType}
+                reportID={reportID}
+                transactionID={transactionID}
+                transaction={transaction}
+                backToReport={backToReport}
+            />
+        );
+    }
+
+    return (
+        <ScanGlobalCreate
+            iouType={iouType}
+            reportID={reportID}
+            transactionID={transactionID}
+            transaction={transaction}
+            backToReport={backToReport}
+        />
+    );
+}
+
+ScanNewReceipt.displayName = 'ScanNewReceipt';
+
+/**
+ * ScanRouter — selects the appropriate scan variant based on route params and transaction state.
+ *
+ * Edit branch is a fast-path that subscribes to nothing extra. Non-edit branches go through MultiScanGate
+ * and the layered ScanNewReceipt/ScanNonGlobalCreate components, which scope their subscriptions to the
+ * narrowest variant that needs them.
+ */
+function ScanRouter({report, action, iouType, reportID, transactionID, transaction, backTo, backToReport}: ScanRouterProps) {
+    const isEditing = action === CONST.IOU.ACTION.EDIT;
+
+    if (backTo || isEditing) {
+        return (
+            <ScanEditReceipt
+                report={report}
+                transactionID={transactionID}
+                backTo={backTo}
+                isEditing={isEditing}
+            />
+        );
+    }
+
+    return (
+        <MultiScanGate>
+            <ScanNewReceipt
+                report={report}
+                iouType={iouType}
+                reportID={reportID}
+                transactionID={transactionID}
+                transaction={transaction}
+                backToReport={backToReport}
+            />
+        </MultiScanGate>
+    );
+}
+
+ScanRouter.displayName = 'ScanRouter';
+
+export default ScanRouter;

src/pages/iou/request/step/IOURequestStepScan/components/Camera/CameraCapture.tsx

@@ -19,11 +19,11 @@ import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpa
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {useMultiScanActions, useMultiScanState} from '@pages/iou/request/step/IOURequestStepScan/components/MultiScanContext';
 import NavigationAwareCamera from '@pages/iou/request/step/IOURequestStepScan/components/NavigationAwareCamera/WebCamera';
+import ReceiptPreviews from '@pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews';
 import {cropImageToAspectRatio} from '@pages/iou/request/step/IOURequestStepScan/cropImageToAspectRatio';
 import type {ImageObject} from '@pages/iou/request/step/IOURequestStepScan/cropImageToAspectRatio';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {FileObject} from '@src/types/utils/Attachment';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {CameraProps} from './types';
 
@@ -34,7 +34,7 @@ const BLINK_DURATION_MS = 80;
  * Renders a camera viewfinder, shutter button, flash toggle and gallery picker.
  * Calls `onCapture(file, source)` for each photo taken or file picked from the gallery.
  */
-function CameraCapture({onCapture, shouldAcceptMultipleFiles = false, onLayout}: CameraProps) {
+function CameraCapture({onCapture, onPicked, shouldAcceptMultipleFiles = false, onLayout, onMultiScanSubmit}: CameraProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -106,6 +106,13 @@ function CameraCapture({onCapture, shouldAcceptMultipleFiles = false, onLayout}:
 
         const originalFileName = `receipt_${Date.now()}.png`;
         const originalFile = base64ToFile(imageBase64 ?? '', originalFileName);
+
+        if (originalFile.size === 0) {
+            cancelSpan(CONST.TELEMETRY.SPAN_RECEIPT_CAPTURE);
+            cancelSpan(CONST.TELEMETRY.SPAN_SHUTTER_TO_CONFIRMATION);
+            return;
+        }
+
         const imageObject: ImageObject = {file: originalFile, filename: originalFile.name, source: URL.createObjectURL(originalFile)};
         // Some browsers center-crop the viewfinder inside the video element (due to object-position: center),
         // while other browsers let the video element overflow and the container crops it from the top.
@@ -123,13 +130,6 @@ function CameraCapture({onCapture, shouldAcceptMultipleFiles = false, onLayout}:
         capturePhotoWithFlash(getScreenshot);
     };
 
-    const emitPickedFiles = (files: FileObject[]) => {
-        for (const file of files) {
-            const source = file.uri ?? URL.createObjectURL(file as Blob);
-            onCapture(file, source);
-        }
-    };
-
     return (
         <View
             onLayout={onLayout}
@@ -235,11 +235,7 @@ function CameraCapture({onCapture, shouldAcceptMultipleFiles = false, onLayout}:
                                 accessibilityLabel={translate(shouldAcceptMultipleFiles ? 'common.chooseFiles' : 'common.chooseFile')}
                                 role={CONST.ROLE.BUTTON}
                                 style={isMultiScanEnabled && styles.opacity0}
-                                onPress={() => {
-                                    openPicker({
-                                        onPicked: (data) => emitPickedFiles(data),
-                                    });
-                                }}
+                                onPress={() => openPicker({onPicked})}
                                 sentryLabel={shouldAcceptMultipleFiles ? CONST.SENTRY_LABEL.REQUEST_STEP.SCAN.CHOOSE_FILES : CONST.SENTRY_LABEL.REQUEST_STEP.SCAN.CHOOSE_FILE}
                             >
                                 <Icon
@@ -299,6 +295,12 @@ function CameraCapture({onCapture, shouldAcceptMultipleFiles = false, onLayout}:
                     )}
                 </View>
             </View>
+            {canUseMultiScan && !!onMultiScanSubmit && (
+                <ReceiptPreviews
+                    isMultiScanEnabled={isMultiScanEnabled}
+                    submit={onMultiScanSubmit}
+                />
+            )}
         </View>
     );
 }

src/pages/iou/request/step/IOURequestStepScan/components/Camera/FileUpload.tsx

@@ -24,7 +24,7 @@ const panResponder = PanResponder.create({
  * FileUpload — desktop web capture variant.
  * Renders a drag-and-drop zone + file picker button + receipt alternative methods.
  */
-function FileUpload({onDrop, shouldAcceptMultipleFiles = false, onLayout, isReplacingReceipt = false, isDraggingOverWrapper}: CameraProps) {
+function FileUpload({onPicked, shouldAcceptMultipleFiles = false, onLayout, isReplacingReceipt = false}: CameraProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -51,9 +51,7 @@ function FileUpload({onDrop, shouldAcceptMultipleFiles = false, onLayout, isRepl
             return file;
         });
 
-        if (onDrop) {
-            onDrop(files, Array.from(e.dataTransfer?.items ?? []));
-        }
+        onPicked(files, Array.from(e.dataTransfer?.items ?? []));
     };
 
     return (
@@ -65,7 +63,7 @@ function FileUpload({onDrop, shouldAcceptMultipleFiles = false, onLayout, isRepl
             style={[styles.flex1, styles.chooseFilesView(false)]}
         >
             <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                {!(isDraggingOver ?? isDraggingOverWrapper) && (
+                {!isDraggingOver && (
                     <View
                         style={[styles.alignItemsCenter, styles.justifyContentCenter]}
                         onLayout={(e) => setUploadViewHeight(e.nativeEvent.layout.height)}
@@ -78,7 +76,6 @@ function FileUpload({onDrop, shouldAcceptMultipleFiles = false, onLayout, isRepl
                         <View
                             style={[styles.uploadFileViewTextContainer, styles.userSelectNone]}
                             // PanResponder handlers must be spread onto the View for gesture recognition
-
                             {...panResponder.panHandlers}
                         >
                             <Text style={[styles.textFileUpload, styles.mb2]}>{translate(shouldAcceptMultipleFiles ? 'receipt.uploadMultiple' : 'receipt.upload')}</Text>
@@ -94,11 +91,7 @@ function FileUpload({onDrop, shouldAcceptMultipleFiles = false, onLayout, isRepl
                                     text={translate(shouldAcceptMultipleFiles ? 'common.chooseFiles' : 'common.chooseFile')}
                                     accessibilityLabel={translate(shouldAcceptMultipleFiles ? 'common.chooseFiles' : 'common.chooseFile')}
                                     style={[styles.p5]}
-                                    onPress={() => {
-                                        openPicker({
-                                            onPicked: (data) => onDrop?.(data, []),
-                                        });
-                                    }}
+                                    onPress={() => openPicker({onPicked})}
                                     sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.SCAN_SUBMIT_BUTTON}
                                 />
                             )}