[Odometer] Move odometer image stitching to confirmation page

src/components/MoneyRequestConfirmationList.tsx

@@ -164,6 +164,9 @@
     /** Whether the expense is an odometer distance expense */
     isOdometerDistanceRequest?: boolean;
 
+    /** Whether the odometer receipt is currently being stitched */
+    isLoadingReceipt?: boolean;
+
     /** Whether the expense is a GPS distance expense */
     isGPSDistanceRequest: boolean;
 
@@ -237,6 +240,7 @@
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest = false,
     isPolicyExpenseChat = false,
@@ -1138,7 +1142,7 @@
                 onSendMoney?.(paymentMethod);
             }
         },
         [
             routeError,
             transactionID,
             iouType,
@@ -1263,7 +1267,7 @@
                             enterKeyEventListenerPriority={1}
                             useKeyboardShortcuts
                             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                            isLoading={isConfirmed || isConfirming}
+                            isLoading={isConfirmed || isConfirming || isLoadingReceipt}
                             sentryLabel={CONST.SENTRY_LABEL.MONEY_REQUEST.CONFIRMATION_SUBMIT_BUTTON}
                         />
                     </View>
@@ -1303,6 +1307,7 @@
         styles.productTrainingTooltipWrapper,
         shouldShowProductTrainingTooltip,
         renderProductTrainingTooltip,
+        isLoadingReceipt,
     ]);
 
     const isCompactMode = useMemo(() => !showMoreFields && isScanRequest, [isScanRequest, showMoreFields]);
@@ -1341,6 +1346,7 @@
                 isDistanceRequest={isDistanceRequest}
                 isManualDistanceRequest={isManualDistanceRequest}
                 isOdometerDistanceRequest={isOdometerDistanceRequest}
+                isLoadingReceipt={isLoadingReceipt}
                 isGPSDistanceRequest={isGPSDistanceRequest}
                 isPerDiemRequest={isPerDiemRequest}
                 isTimeRequest={isTimeRequest}
@@ -1436,5 +1442,6 @@
         prevProps.isTimeRequest === nextProps.isTimeRequest &&
         prevProps.iouTimeCount === nextProps.iouTimeCount &&
         prevProps.iouTimeRate === nextProps.iouTimeRate &&
-        prevProps.shouldHideToSection === nextProps.shouldHideToSection,
+        prevProps.shouldHideToSection === nextProps.shouldHideToSection &&
+        prevProps.isLoadingReceipt === nextProps.isLoadingReceipt,
 );

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -58,6 +58,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {Attendee, Participant} from '@src/types/onyx/IOU';
 import type {Unit} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import ActivityIndicator from './ActivityIndicator';
 import Badge from './Badge';
 import Button from './Button';
 import ConfirmedRoute from './ConfirmedRoute';
@@ -146,6 +147,9 @@ type MoneyRequestConfirmationListFooterProps = {
     /** Flag indicating if it is an odometer distance request */
     isOdometerDistanceRequest?: boolean;
 
+    /** Whether the receipt is currently being stitched */
+    isLoadingReceipt?: boolean;
+
     /** Flag indicating if it is a GPS distance request */
     isGPSDistanceRequest: boolean;
 
@@ -288,6 +292,7 @@ function MoneyRequestConfirmationListFooter({
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest,
     isTimeRequest,
@@ -1208,91 +1213,92 @@ function MoneyRequestConfirmationListFooter({
 
         return (
             <View
-                style={[styles.moneyRequestImage, receiptContainerStyle]}
+                style={[styles.moneyRequestImage, receiptContainerStyle, isLoadingReceipt && [styles.justifyContentCenter, styles.alignItemsCenter]]}
                 onLayout={isCompactMode ? handleCompactReceiptContainerLayout : undefined}
             >
-                {isLocalFile && Str.isPDF(receiptFilename) ? (
-                    <PressableWithoutFocus
-                        onPress={() => {
-                            if (!transactionID) {
-                                return;
-                            }
+                {isLoadingReceipt && <ActivityIndicator reasonAttributes={{context: 'MoneyRequestConfirmationListFooter.receiptThumbnail'}} />}
+                {!isLoadingReceipt &&
+                    (isLocalFile && Str.isPDF(receiptFilename) ? (
+                        <PressableWithoutFocus
+                            onPress={() => {
+                                if (!transactionID) {
+                                    return;
+                                }
 
-                            Navigation.navigate(
-                                isReceiptEditable
-                                    ? ROUTES.MONEY_REQUEST_RECEIPT_PREVIEW.getRoute(reportID, transactionID, action, iouType)
-                                    : ROUTES.TRANSACTION_RECEIPT.getRoute(reportID, transactionID),
-                            );
-                        }}
-                        accessibilityRole={CONST.ROLE.BUTTON}
-                        accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                        sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.PDF_RECEIPT_THUMBNAIL}
-                        disabled={!shouldDisplayReceipt}
-                        disabledStyle={styles.cursorDefault}
-                        style={styles.h100}
-                    >
-                        <PDFThumbnail
-                            // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-                            previewSourceURL={resolvedReceiptImage as string}
+                                Navigation.navigate(
+                                    isReceiptEditable
+                                        ? ROUTES.MONEY_REQUEST_RECEIPT_PREVIEW.getRoute(reportID, transactionID, action, iouType)
+                                        : ROUTES.TRANSACTION_RECEIPT.getRoute(reportID, transactionID),
+                                );
+                            }}
+                            accessibilityRole={CONST.ROLE.BUTTON}
+                            accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                            sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.PDF_RECEIPT_THUMBNAIL}
+                            disabled={!shouldDisplayReceipt}
+                            disabledStyle={styles.cursorDefault}
                             style={styles.h100}
-                            onLoadError={onPDFLoadError}
-                            onPassword={onPDFPassword}
-                        />
-                    </PressableWithoutFocus>
-                ) : (
-                    <PressableWithoutFocus
-                        onPress={() => {
-                            if (!transactionID) {
-                                return;
-                            }
+                        >
+                            <PDFThumbnail
+                                // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+                                previewSourceURL={resolvedReceiptImage as string}
+                                style={styles.h100}
+                                onLoadError={onPDFLoadError}
+                                onPassword={onPDFPassword}
+                            />
+                        </PressableWithoutFocus>
+                    ) : (
+                        <PressableWithoutFocus
+                            onPress={() => {
+                                if (!transactionID) {
+                                    return;
+                                }
 
-                            Navigation.navigate(
-                                isReceiptEditable
-                                    ? ROUTES.MONEY_REQUEST_RECEIPT_PREVIEW.getRoute(reportID, transactionID, action, iouType)
-                                    : ROUTES.TRANSACTION_RECEIPT.getRoute(reportID, transactionID),
-                            );
-                        }}
-                        disabled={!shouldDisplayReceipt || isThumbnail}
-                        accessibilityRole={CONST.ROLE.BUTTON}
-                        accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                        sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.RECEIPT_THUMBNAIL}
-                        disabledStyle={styles.cursorDefault}
-                        style={receiptThumbnailStyle}
-                    >
-                        <ReceiptImage
-                            isThumbnail={isThumbnail}
-                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                            source={resolvedThumbnail || resolvedReceiptImage || ''}
-                            // AuthToken is required when retrieving the image from the server
-                            // but we don't need it to load the blob:// or file:// image when starting an expense/split
-                            // So if we have a thumbnail, it means we're retrieving the image from the server
-                            isAuthTokenRequired={!!receiptThumbnail && !isLocalFile}
-                            fileExtension={fileExtension}
-                            shouldUseThumbnailImage
-                            shouldUseInitialObjectPosition={isDistanceRequest}
-                            shouldUseFullHeight={isCompactMode}
-                            onLoad={handleReceiptLoad}
-                            resizeMode={isOdometerDistanceRequest ? 'contain' : undefined}
-                        />
-                    </PressableWithoutFocus>
-                )}
+                                Navigation.navigate(
+                                    isReceiptEditable
+                                        ? ROUTES.MONEY_REQUEST_RECEIPT_PREVIEW.getRoute(reportID, transactionID, action, iouType)
+                                        : ROUTES.TRANSACTION_RECEIPT.getRoute(reportID, transactionID),
+                                );
+                            }}
+                            disabled={!shouldDisplayReceipt || isThumbnail}
+                            accessibilityRole={CONST.ROLE.BUTTON}
+                            accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                            sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.RECEIPT_THUMBNAIL}
+                            disabledStyle={styles.cursorDefault}
+                            style={receiptThumbnailStyle}
+                        >
+                            <ReceiptImage
+                                isThumbnail={isThumbnail}
+                                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                                source={resolvedThumbnail || resolvedReceiptImage || ''}
+                                // AuthToken is required when retrieving the image from the server
+                                // but we don't need it to load the blob:// or file:// image when starting an expense/split
+                                // So if we have a thumbnail, it means we're retrieving the image from the server
+                                isAuthTokenRequired={!!receiptThumbnail && !isLocalFile}
+                                fileExtension={fileExtension}
+                                shouldUseThumbnailImage
+                                shouldUseInitialObjectPosition={isDistanceRequest}
+                                shouldUseFullHeight={isCompactMode}
+                                onLoad={handleReceiptLoad}
+                                resizeMode={isOdometerDistanceRequest ? 'contain' : undefined}
+                            />
+                        </PressableWithoutFocus>
+                    ))}
             </View>
         );
     }, [
         isCompactMode,
         compactReceiptContainerStyle,
         styles.expenseViewImageSmall,
-        styles.moneyRequestImage,
-        styles.flex1,
         styles.h100,
+        styles.flex1,
+        styles.moneyRequestImage,
+        styles.justifyContentCenter,
+        styles.alignItemsCenter,
         styles.cursorDefault,
+        isLoadingReceipt,
+        handleCompactReceiptContainerLayout,
         isLocalFile,
         receiptFilename,
-        transactionID,
-        isReceiptEditable,
-        reportID,
-        action,
-        iouType,
         translate,
         shouldDisplayReceipt,
         resolvedReceiptImage,
@@ -1303,9 +1309,13 @@ function MoneyRequestConfirmationListFooter({
         receiptThumbnail,
         fileExtension,
         isDistanceRequest,
-        isOdometerDistanceRequest,
         handleReceiptLoad,
-        handleCompactReceiptContainerLayout,
+        isOdometerDistanceRequest,
+        transactionID,
+        isReceiptEditable,
+        reportID,
+        action,
+        iouType,
     ]);
 
     const visibleFields = fields.filter((field) => field.shouldShow);
@@ -1396,7 +1406,7 @@ function MoneyRequestConfirmationListFooter({
                 )}
             </View>
             {(!shouldShowMap || isManualDistanceRequest || isOdometerDistanceRequest) &&
-                (hasReceiptImageOrThumbnail
+                (hasReceiptImageOrThumbnail || isLoadingReceipt
                     ? receiptThumbnailContent
                     : showReceiptEmptyState && (
                           <ReceiptEmptyState
@@ -1490,5 +1500,6 @@ export default memo(
         prevProps.showMoreFields === nextProps.showMoreFields &&
         prevProps.isTimeRequest === nextProps.isTimeRequest &&
         prevProps.iouTimeCount === nextProps.iouTimeCount &&
-        prevProps.iouTimeRate === nextProps.iouTimeRate,
+        prevProps.iouTimeRate === nextProps.iouTimeRate &&
+        prevProps.isLoadingReceipt === nextProps.isLoadingReceipt,
 );

src/libs/stitchOdometerImages/constants.ts

@@ -0,0 +1,3 @@
+const STITCHED_ODOMETER_FILENAME_PREFIX = 'stitched_odometer';
+
+export default STITCHED_ODOMETER_FILENAME_PREFIX;

src/libs/stitchOdometerImages/index.native.ts

@@ -2,6 +2,7 @@ import {ImageFormat, Skia} from '@shopify/react-native-skia';
 import RNFS from 'react-native-fs';
 import Log from '@libs/Log';
 import type {FileObject} from '@src/types/utils/Attachment';
+import STITCHED_ODOMETER_FILENAME_PREFIX from './constants';
 import calculateStitchLayout from './stitchLayout';
 
 async function stitchOdometerImages(image1: FileObject | string | undefined, image2: FileObject | string | undefined): Promise<FileObject | null> {
@@ -46,13 +47,13 @@ async function stitchOdometerImages(image1: FileObject | string | undefined, ima
         // Delete any previously stitched files before creating a new one
         try {
             const tempDirContents = await RNFS.readDir(RNFS.TemporaryDirectoryPath);
-            const oldStitchedFiles = tempDirContents.filter((f) => f.name.startsWith('stitched_odometer_') && f.name.endsWith('.jpg'));
+            const oldStitchedFiles = tempDirContents.filter((f) => f.name.startsWith(`${STITCHED_ODOMETER_FILENAME_PREFIX}_`) && f.name.endsWith('.jpg'));
             await Promise.all(oldStitchedFiles.map((f) => RNFS.unlink(f.path)));
         } catch (error) {
             Log.warn('stitchOdometerImages (native) failed to clean up old stitched files', {error});
         }
 
-        const filename = `stitched_odometer_${Date.now()}.jpg`;
+        const filename = `${STITCHED_ODOMETER_FILENAME_PREFIX}_${Date.now()}.jpg`;
         const tempPath = `${RNFS.TemporaryDirectoryPath}/${filename}`;
         await RNFS.writeFile(tempPath, base64, 'base64');
 

src/libs/stitchOdometerImages/index.ts

@@ -1,4 +1,5 @@
 import type {FileObject} from '@src/types/utils/Attachment';
+import STITCHED_ODOMETER_FILENAME_PREFIX from './constants';
 import calculateStitchLayout from './stitchLayout';
 
 // Tracks the single active stitched blob URL so that we can revoke it on the next call so at most one blob URL exists at a time
@@ -45,7 +46,7 @@ function stitchOdometerImages(image1: FileObject | string | undefined, image2: F
                 }
                 const uri = URL.createObjectURL(blob);
                 previousBlobUrl = uri;
-                resolve({uri, name: 'stitched_odometer.jpg', type: 'image/jpeg'});
+                resolve({uri, name: `${STITCHED_ODOMETER_FILENAME_PREFIX}.jpg`, type: 'image/jpeg'});
             }, 'image/jpeg');
         });
     });