Jakubkalinski0/odometer move odometer image stitching to confirmation page backup

src/components/MoneyRequestConfirmationList.tsx

@@ -164,6 +164,9 @@ type MoneyRequestConfirmationListProps = {
     /** 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 @@ function MoneyRequestConfirmationList({
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest = false,
     isPolicyExpenseChat = false,
@@ -1315,6 +1319,7 @@ function MoneyRequestConfirmationList({
                 isDistanceRequest={isDistanceRequest}
                 isManualDistanceRequest={isManualDistanceRequest}
                 isOdometerDistanceRequest={isOdometerDistanceRequest}
+                isLoadingReceipt={isLoadingReceipt}
                 isGPSDistanceRequest={isGPSDistanceRequest}
                 isPerDiemRequest={isPerDiemRequest}
                 isTimeRequest={isTimeRequest}
@@ -1410,5 +1415,6 @@ export default memo(
         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

@@ -55,6 +55,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';
@@ -139,6 +140,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;
 
@@ -281,6 +285,7 @@ function MoneyRequestConfirmationListFooter({
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest,
     isTimeRequest,
@@ -1089,91 +1094,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'}} />}
+                {!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,
@@ -1184,9 +1190,13 @@ function MoneyRequestConfirmationListFooter({
         receiptThumbnail,
         fileExtension,
         isDistanceRequest,
-        isOdometerDistanceRequest,
         handleReceiptLoad,
-        handleCompactReceiptContainerLayout,
+        isOdometerDistanceRequest,
+        transactionID,
+        isReceiptEditable,
+        reportID,
+        action,
+        iouType,
     ]);
 
     const visibleFields = fields.filter((field) => field.shouldShow);
@@ -1270,7 +1280,7 @@ function MoneyRequestConfirmationListFooter({
                 )}
             </View>
             {(!shouldShowMap || isManualDistanceRequest || isOdometerDistanceRequest) &&
-                (hasReceiptImageOrThumbnail
+                (hasReceiptImageOrThumbnail || isLoadingReceipt
                     ? receiptThumbnailContent
                     : showReceiptEmptyState && (
                           <ReceiptEmptyState
@@ -1364,5 +1374,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/hooks/useRestartOnOdometerImagesFailure.ts

@@ -0,0 +1,89 @@
+import {useEffect} from 'react';
+import {Platform} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {checkIfLocalFileIsAccessible, removeMoneyRequestOdometerImage, setMoneyRequestOdometerReading, setMoneyRequestReceipt} from '@libs/actions/IOU';
+import {removeDraftTransactionsByIDs} from '@libs/actions/TransactionEdit';
+import {navigateToStartMoneyRequestStep} from '@libs/IOUUtils';
+import {getOdometerImageUri} from '@libs/OdometerImageUtils';
+import {getRequestType} from '@libs/TransactionUtils';
+import type {IOUAction, IOUType} from '@src/CONST';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft';
+import type {Transaction} from '@src/types/onyx';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import useOnyx from './useOnyx';
+
+// When the component mounts, if there are odometer images or a stitched receipt, see if the files can be read from the disk.
+// If not, redirect the user to the starting step of the flow.
+// This is because until the request is saved, the image files are only stored in the browser's memory as blob:// URLs
+// and if the browser is refreshed, then the images cease to exist.
+// The best way for the user to recover from this is to start over from the start of the request process.
+const useRestartOnOdometerImagesFailure = (transaction: OnyxEntry<Transaction>, reportID: string, iouType: IOUType, action: IOUAction) => {
+    const [draftTransactionIDs, draftTransactionsMetadata] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
+
+    useEffect(() => {
+        if (Platform.OS !== 'web' || !transaction || action !== CONST.IOU.ACTION.CREATE || isLoadingOnyxValue(draftTransactionsMetadata)) {
+            return;
+        }
+
+        const startImage = transaction.comment?.odometerStartImage;
+        const endImage = transaction.comment?.odometerEndImage;
+        const stitchedUri = transaction.receipt?.source?.toString();
+
+        const urlsToCheck = [
+            {
+                filename: typeof startImage === 'object' ? startImage?.name : undefined,
+                path: getOdometerImageUri(startImage),
+                type: typeof startImage === 'object' ? startImage?.type : undefined,
+            },
+            {
+                filename: typeof endImage === 'object' ? endImage?.name : undefined,
+                path: getOdometerImageUri(endImage),
+                type: typeof endImage === 'object' ? endImage?.type : undefined,
+            },
+            {
+                filename: transaction.receipt?.filename,
+                path: stitchedUri,
+                type: undefined,
+            },
+        ].filter(({path}) => !!path && path.startsWith('blob:'));
+
+        if (urlsToCheck.length === 0) {
+            return;
+        }
+
+        let canBeRead = true;
+
+        Promise.all(
+            urlsToCheck.map(({filename, path, type}) =>
+                checkIfLocalFileIsAccessible(
+                    filename,
+                    path,
+                    type,
+                    () => {},
+                    () => {
+                        canBeRead = false;
+                    },
+                ),
+            ),
+        )?.then(() => {
+            const requestType = getRequestType(transaction);
+            if (canBeRead || requestType !== CONST.IOU.REQUEST_TYPE.DISTANCE_ODOMETER) {
+                return;
+            }
+
+            setMoneyRequestReceipt(transaction.transactionID, '', '', true);
+            setMoneyRequestOdometerReading(transaction.transactionID, null, null, true);
+            removeMoneyRequestOdometerImage(transaction.transactionID, CONST.IOU.ODOMETER_IMAGE_TYPE.START, true);
+            removeMoneyRequestOdometerImage(transaction.transactionID, CONST.IOU.ODOMETER_IMAGE_TYPE.END, true);
+            removeDraftTransactionsByIDs(draftTransactionIDs, true);
+            navigateToStartMoneyRequestStep(requestType, iouType, transaction.transactionID, reportID);
+        });
+
+        // We want this hook to run on mounting only
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draftTransactionsMetadata]);
+};
+
+export default useRestartOnOdometerImagesFailure;

src/hooks/useRestartOnReceiptFailure.ts

@@ -1,6 +1,6 @@
 import {useEffect} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {checkIfScanFileCanBeRead, setMoneyRequestReceipt} from '@libs/actions/IOU';
+import {checkIfLocalFileIsAccessible, setMoneyRequestReceipt} from '@libs/actions/IOU';
 import {removeDraftTransactionsByIDs} from '@libs/actions/TransactionEdit';
 import {isLocalFile as isLocalFileUtil} from '@libs/fileDownload/FileUtils';
 import {navigateToStartMoneyRequestStep} from '@libs/IOUUtils';
@@ -40,7 +40,7 @@ const useRestartOnReceiptFailure = (transaction: OnyxEntry<Transaction>, reportI
             setMoneyRequestReceipt(transaction.transactionID, '', '', true);
         };
 
-        checkIfScanFileCanBeRead(itemReceiptFilename, itemReceiptPath, itemReceiptType, () => {}, onFailure)?.then(() => {
+        checkIfLocalFileIsAccessible(itemReceiptFilename, itemReceiptPath, itemReceiptType, () => {}, onFailure)?.then(() => {
             const requestType = getRequestType(transaction);
             if (isScanFilesCanBeRead || requestType !== CONST.IOU.REQUEST_TYPE.SCAN) {
                 return;

src/libs/OdometerImageUtils.ts

@@ -0,0 +1,33 @@
+import type {FileObject} from '@src/types/utils/Attachment';
+
+function getOdometerImageUri(image: FileObject | string | null | undefined): string | undefined {
+    return typeof image === 'string' ? image : image?.uri;
+}
+
+/**
+ * Revokes a blob URL previously associated with an odometer image, but only when
+ * the image has actually changed (i.e. the old URL differs from the new one).
+ *
+ * Skips revocation when:
+ *  - The `URL` API is not available (non-browser environments / native)
+ *  - The URI is not a blob: URL (e.g. file:// on native, https:// for uploaded images)
+ *  - The old and new URIs are identical (image was not replaced)
+ */
+function revokeOdometerImageUri(image: FileObject | string | null | undefined, nextImage?: FileObject | string | null): void {
+    if (typeof URL === 'undefined') {
+        return;
+    }
+
+    const currentUri = getOdometerImageUri(image);
+    if (!currentUri?.startsWith('blob:')) {
+        return;
+    }
+    const nextUri = getOdometerImageUri(nextImage);
+    if (currentUri === nextUri) {
+        return;
+    }
+    URL.revokeObjectURL(currentUri);
+}
+
+export {getOdometerImageUri};
+export default revokeOdometerImageUri;