Merge pull request Expensify#66100 from nyomanjyotisa/issue-65536

Add scan shortcut when long-pressing green plus button

Author: tgolen

src/components/FloatingActionButton.tsx

@@ -8,6 +8,7 @@ import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import useIsHomeRouteActive from '@navigation/helpers/useIsHomeRouteActive';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -27,6 +28,9 @@ type FloatingActionButtonProps = {
     /* Callback to fire on request to toggle the FloatingActionButton */
     onPress: (event: GestureResponderEvent | KeyboardEvent | undefined) => void;
 
+    /* Callback to fire on long press of the FloatingActionButton */
+    onLongPress?: (event: GestureResponderEvent | KeyboardEvent | undefined) => void;
+
     /* Current state (active or not active) of the component */
     isActive: boolean;
 
@@ -40,7 +44,7 @@ type FloatingActionButtonProps = {
     isTooltipAllowed: boolean;
 };
 
-function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef<HTMLDivElement | View | Text>) {
+function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef<HTMLDivElement | View | Text>) {
     const {success, buttonDefaultBG, textLight} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
@@ -88,6 +92,19 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
         onPress(event);
     };
 
+    const longPressFabAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
+        // Only execute on narrow layout - prevent event from firing on wide screens
+        if (!shouldUseNarrowLayout) {
+            return;
+        }
+
+        hideProductTrainingTooltip();
+
+        // Drop focus to avoid blue focus ring.
+        fabPressable.current?.blur();
+        onLongPress?.(event);
+    };
+
     return (
         <EducationalTooltip
             shouldRender={shouldShowProductTrainingTooltip}
@@ -108,10 +125,16 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
                         buttonRef.current = el ?? null;
                     }
                 }}
-                style={[styles.h100, styles.navigationTabBarItem]}
+                style={[
+                    styles.h100,
+                    styles.navigationTabBarItem,
+
+                    // Prevent text selection on touch devices (e.g. on long press)
+                    canUseTouchScreen() && styles.userSelectNone,
+                ]}
                 accessibilityLabel={accessibilityLabel}
                 onPress={toggleFabAction}
-                onLongPress={() => {}}
+                onLongPress={longPressFabAction}
                 role={role}
                 shouldUseHapticsOnLongPress={false}
                 testID="floating-action-button"

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

@@ -206,6 +206,18 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
         [quickActionReport?.policyID],
     );
 
+    const startScan = useCallback(() => {
+        interceptAnonymousUser(() => {
+            if (shouldRedirectToExpensifyClassic) {
+                setModalVisible(true);
+                return;
+            }
+
+            // Start the scan flow directly
+            startMoneyRequest(CONST.IOU.TYPE.CREATE, generateReportID(), CONST.IOU.REQUEST_TYPE.SCAN, false);
+        });
+    }, [shouldRedirectToExpensifyClassic]);
+
     /**
      * Check if LHN status changed from active to inactive.
      * Used to close already opened FAB menu when open any other pages (i.e. Press Command + K on web).
@@ -590,6 +602,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
                 isActive={isCreateMenuActive}
                 ref={fabRef}
                 onPress={toggleCreateMenu}
+                onLongPress={startScan}
             />
         </View>
     );