refactor: IOURequestStepScan clean-up, phase 3: Consolidate isMobile() and add useDragAndDropSupport

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

@@ -23,7 +23,6 @@
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearUserLocation, setUserLocation} from '@libs/actions/UserLocation';
@@ -46,6 +45,7 @@
 import NavigationAwareCamera from './NavigationAwareCamera/WebCamera';
 import ReceiptPreviews from './ReceiptPreviews';
 import type IOURequestStepScanProps from './types';
+import useDragAndDropSupport from './useDragAndDropSupport';
 import useReceiptScan from './useReceiptScan';
 
 function IOURequestStepScan({
@@ -62,9 +62,8 @@
 }: Omit<IOURequestStepScanProps, 'user'>) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    // we need to use isSmallScreenWidth instead of shouldUseNarrowLayout because drag and drop is not supported on mobile
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
+    const isMobileWeb = isMobile();
+    const canUseDragAndDrop = useDragAndDropSupport();
     const {translate} = useLocalize();
     const {isDraggingOver} = useDragAndDropState();
     const [cameraPermissionState, setCameraPermissionState] = useState<PermissionState | undefined>('prompt');
@@ -140,7 +139,7 @@
      * The last deviceId is of regular len camera.
      */
     const requestCameraPermission = useCallback(() => {
-        if (!isMobile()) {
+        if (!isMobileWeb) {
             return;
         }
 
@@ -191,7 +190,7 @@
                 setVideoConstraints(defaultConstraints);
                 setCameraPermissionState('denied');
             });
     }, []);
 
     // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, make the user star scanning flow from scratch.
     // This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then
@@ -227,7 +226,7 @@
     }, []);
 
     useEffect(() => {
-        if (!isMobile() || !isTabActive) {
+        if (!isMobileWeb || !isTabActive) {
             setVideoConstraints(undefined);
             return;
         }
@@ -468,7 +467,7 @@
                             mirrored={false}
                             screenshotQuality={0}
                         />
-                        {canUseMultiScan && isMobile() ? (
+                        {canUseMultiScan && isMobileWeb ? (
                             <View style={[styles.flashButtonContainer, styles.primaryMediumIcon, isFlashLightOn && styles.bgGreenSuccess, !isTorchAvailable && styles.opacity0]}>
                                 <PressableWithFeedback
                                     role={CONST.ROLE.BUTTON}
@@ -533,7 +532,7 @@
                         height={CONST.RECEIPT.SHUTTER_SIZE}
                     />
                 </PressableWithFeedback>
-                {canUseMultiScan && isMobile() ? (
+                {canUseMultiScan && isMobileWeb ? (
                     <PressableWithFeedback
                         accessibilityRole="button"
                         role={CONST.ROLE.BUTTON}
@@ -567,7 +566,7 @@
                     </PressableWithFeedback>
                 )}
             </View>
-            {canUseMultiScan && isMobile() && shouldShowMultiScanEducationalPopup && (
+            {canUseMultiScan && isMobileWeb && shouldShowMultiScanEducationalPopup && (
                 <FeatureTrainingModal
                     title={translate('iou.scanMultipleReceipts')}
                     image={lazyIllustrations.MultiScan}
@@ -597,9 +596,9 @@
     const [containerHeight, setContainerHeight] = useState(0);
     const [desktopUploadViewHeight, setDesktopUploadViewHeight] = useState(0);
     const [alternativeMethodsHeight, setAlternativeMethodsHeight] = useState(0);
-    // We use isMobile() here to explicitly hide the alternative methods component on both mobile web and native apps
-    const chooseFilesPaddingVertical = Number(styles.chooseFilesView(isSmallScreenWidth).paddingVertical);
-    const shouldHideAlternativeMethods = isMobile() || alternativeMethodsHeight + desktopUploadViewHeight + chooseFilesPaddingVertical * 2 > containerHeight;
+    // We use isMobileWeb here to explicitly hide the alternative methods component on both mobile web and native apps
+    const chooseFilesPaddingVertical = Number(styles.chooseFilesView(!canUseDragAndDrop).paddingVertical);
+    const shouldHideAlternativeMethods = isMobileWeb || alternativeMethodsHeight + desktopUploadViewHeight + chooseFilesPaddingVertical * 2 > containerHeight;
 
     const desktopUploadView = () => (
         <View
@@ -660,10 +659,10 @@
                         }
                         onLayout(setTestReceiptAndNavigate);
                     }}
-                    style={[styles.flex1, !isMobile() && styles.chooseFilesView(isSmallScreenWidth)]}
+                    style={[styles.flex1, canUseDragAndDrop && styles.chooseFilesView(!canUseDragAndDrop)]}
                 >
-                    <View style={[styles.flex1, !isMobile() && styles.alignItemsCenter, styles.justifyContentCenter]}>
-                        {!(isDraggingOver ?? isDraggingOverWrapper) && (isMobile() ? mobileCameraView() : desktopUploadView())}
+                    <View style={[styles.flex1, canUseDragAndDrop && styles.alignItemsCenter, styles.justifyContentCenter]}>
+                        {!(isDraggingOver ?? isDraggingOverWrapper) && (isMobileWeb ? mobileCameraView() : desktopUploadView())}
                     </View>
                     <DragAndDropConsumer onDrop={handleDropReceipt}>
                         <DropZoneUI

src/pages/iou/request/step/IOURequestStepScan/useDragAndDropSupport/index.native.ts

@@ -0,0 +1,8 @@
+/**
+ * Drag-and-drop for file upload is not supported in native apps.
+ */
+function useDragAndDropSupport(): boolean {
+    return false;
+}
+
+export default useDragAndDropSupport;

src/pages/iou/request/step/IOURequestStepScan/useDragAndDropSupport/index.ts

@@ -0,0 +1,10 @@
+import {isMobile} from '@libs/Browser';
+
+/**
+ * Drag-and-drop is supported on desktop web only. Returns false on mobile web.
+ */
+function useDragAndDropSupport(): boolean {
+    return !isMobile();
+}
+
+export default useDragAndDropSupport;