Merge pull request Expensify#63352 from callstack-internal/feature/multi-scan-wire-up

[Multi-Scan] Support Multi-Scan in Receipt page

Author: cristipaval

src/ROUTES.ts

@@ -910,6 +910,11 @@ const ROUTES = {
             `create/${iouType as string}/start/${transactionID}/${reportID}/per-diem/${backToReport ?? ''}` as const,
     },
 
+    MONEY_REQUEST_RECEIPT_VIEW_MODAL: {
+        route: 'receipt-view-modal/:transactionID',
+        getRoute: (transactionID: string, backTo: string) => getUrlWithBackToParam(`receipt-view-modal/${transactionID}`, backTo),
+    } as const,
+
     MONEY_REQUEST_STATE_SELECTOR: {
         route: 'submit/state',
 

src/SCREENS.ts

@@ -253,6 +253,7 @@ const SCREENS = {
         STEP_WAYPOINT: 'Money_Request_Step_Waypoint',
         STEP_TAX_AMOUNT: 'Money_Request_Step_Tax_Amount',
         STEP_TAX_RATE: 'Money_Request_Step_Tax_Rate',
+        RECEIPT_VIEW_MODAL: 'Money_Request_Receipt_View_Modal',
         STEP_SPLIT_PAYER: 'Money_Request_Step_Split_Payer',
         STEP_SEND_FROM: 'Money_Request_Step_Send_From',
         STEP_COMPANY_INFO: 'Money_Request_Step_Company_Info',

src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx

@@ -0,0 +1,118 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {Keyboard, View} from 'react-native';
+import CarouselButtons from '@components/Attachments/AttachmentCarousel/CarouselButtons';
+import AttachmentCarouselPager from '@components/Attachments/AttachmentCarousel/Pager';
+import type {AttachmentCarouselPagerHandle} from '@components/Attachments/AttachmentCarousel/Pager';
+import type {AttachmentSource} from '@components/Attachments/types';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
+import variables from '@styles/variables';
+import type AttachmentCarouselViewProps from './types';
+
+function AttachmentCarouselView({
+    page,
+    attachments,
+    shouldShowArrows,
+    source,
+    report,
+    autoHideArrows,
+    cancelAutoHideArrow,
+    setShouldShowArrows,
+    onAttachmentError,
+    onNavigate,
+    onClose,
+    setPage,
+    attachmentID,
+}: AttachmentCarouselViewProps) {
+    const {translate} = useLocalize();
+    const canUseTouchScreen = canUseTouchScreenUtil();
+    const styles = useThemeStyles();
+    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource>(attachmentID ?? source);
+
+    const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
+
+    /** Updates the page state when the user navigates between attachments */
+    const updatePage = useCallback(
+        (newPageIndex: number) => {
+            Keyboard.dismiss();
+            setShouldShowArrows(true);
+
+            const item = attachments.at(newPageIndex);
+
+            setPage(newPageIndex);
+            if (newPageIndex >= 0 && item) {
+                setActiveAttachmentID(item.attachmentID ?? item.source);
+                if (onNavigate) {
+                    onNavigate(item);
+                }
+                onNavigate?.(item);
+            }
+        },
+        [setShouldShowArrows, attachments, setPage, onNavigate],
+    );
+
+    /**
+     * Increments or decrements the index to get another selected item
+     * @param {Number} deltaSlide
+     */
+    const cycleThroughAttachments = useCallback(
+        (deltaSlide: number) => {
+            if (page === undefined) {
+                return;
+            }
+            const nextPageIndex = page + deltaSlide;
+            updatePage(nextPageIndex);
+            pagerRef.current?.setPage(nextPageIndex);
+
+            autoHideArrows();
+        },
+        [autoHideArrows, page, updatePage],
+    );
+
+    return (
+        <View
+            style={[styles.flex1, styles.attachmentCarouselContainer]}
+            onMouseEnter={() => !canUseTouchScreen && setShouldShowArrows(true)}
+            onMouseLeave={() => !canUseTouchScreen && setShouldShowArrows(false)}
+        >
+            {page === -1 ? (
+                <BlockingView
+                    icon={Illustrations.ToddBehindCloud}
+                    iconWidth={variables.modalTopIconWidth}
+                    iconHeight={variables.modalTopIconHeight}
+                    title={translate('notFound.notHere')}
+                />
+            ) : (
+                <>
+                    <CarouselButtons
+                        page={page}
+                        attachments={attachments}
+                        shouldShowArrows={shouldShowArrows}
+                        onBack={() => cycleThroughAttachments(-1)}
+                        onForward={() => cycleThroughAttachments(1)}
+                        autoHideArrow={autoHideArrows}
+                        cancelAutoHideArrow={cancelAutoHideArrow}
+                    />
+                    <AttachmentCarouselPager
+                        items={attachments}
+                        initialPage={page}
+                        onAttachmentError={onAttachmentError}
+                        activeAttachmentID={activeAttachmentID}
+                        setShouldShowArrows={setShouldShowArrows}
+                        onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
+                        onClose={onClose}
+                        ref={pagerRef}
+                        reportID={report?.reportID}
+                    />
+                </>
+            )}
+        </View>
+    );
+}
+
+AttachmentCarouselView.displayName = 'AttachmentCarouselView';
+
+export default AttachmentCarouselView;