Merge pull request #87726 from software-mansion-labs/jakubkalinski0/Odometer_add_save_for_later_functionality

[Odometer] Add save for later functionality

Author: Julesssss

src/CONST/index.ts

@@ -9236,6 +9236,7 @@ const CONST = {
             DISTANCE_MAP_NEXT_BUTTON: 'IOURequestStep-DistanceMapNextButton',
             DISTANCE_MANUAL_NEXT_BUTTON: 'IOURequestStep-DistanceManualNextButton',
             DISTANCE_ODOMETER_NEXT_BUTTON: 'IOURequestStep-DistanceOdometerNextButton',
+            DISTANCE_ODOMETER_SAVE_FOR_LATER_BUTTON: 'IOURequestStep-DistanceOdometerSaveForLaterButton',
             ODOMETER_CHOOSE_FILE_BUTTON: 'IOURequestStep-OdometerChooseFileButton',
             GPS_START_STOP_BUTTON: 'IOURequestStep-GPSStartStopButton',
             GPS_DISCARD_BUTTON: 'IOURequestStep-GPSDiscardButton',

src/ONYXKEYS.ts

@@ -87,6 +87,9 @@ const ONYXKEYS = {
     /** GPS points stored for the GPS distance expense before they're accepted by the user */
     GPS_DRAFT_DETAILS: 'gpsDraftDetails',
 
+    /** Odometer draft stored for the Save for later flow */
+    ODOMETER_DRAFT: 'odometerDraft',
+
     /** Contains all the info for Tasks */
     TASK: 'task',
 
@@ -1357,6 +1360,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.IS_OPEN_APP_FAILURE_MODAL_OPEN]: boolean;
     [ONYXKEYS.IS_GPS_IN_PROGRESS_MODAL_OPEN]: boolean;
     [ONYXKEYS.GPS_DRAFT_DETAILS]: OnyxTypes.GpsDraftDetails;
+    [ONYXKEYS.ODOMETER_DRAFT]: OnyxTypes.OdometerDraft;
     [ONYXKEYS.FULLSCREEN_VISIBILITY]: boolean;
     [ONYXKEYS.NETWORK]: OnyxTypes.Network;
     [ONYXKEYS.NEW_GROUP_CHAT_DRAFT]: OnyxTypes.NewGroupChatDraft;

src/hooks/useOdometerDraftHydrator.ts

@@ -0,0 +1,58 @@
+import {useEffect} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {IOURequestType} from '@userActions/IOU';
+import {hydrateOdometerDraftIntoTransaction} from '@userActions/OdometerTransactionUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {OdometerDraft, Transaction} from '@src/types/onyx';
+import useOnyx from './useOnyx';
+
+type UseOdometerDraftHydratorParams = {
+    transaction: OnyxEntry<Transaction>;
+    transactionRequestType: IOURequestType | undefined;
+    isLoadingTransaction?: boolean;
+    isLoadingSelectedTab?: boolean;
+};
+
+// Module-level so it survives host screen remounts; otherwise the mount effect re-fires and
+// clobbers Replace/Crop/Rotate results with the stale rehydrated draft.
+let lastHydratedDraft: OdometerDraft | null = null;
+
+function useOdometerDraftHydrator({
+    transaction,
+    transactionRequestType,
+    isLoadingTransaction = false,
+    isLoadingSelectedTab = false,
+}: UseOdometerDraftHydratorParams): (newIOUType: IOURequestType) => void {
+    const [odometerDraft] = useOnyx(ONYXKEYS.ODOMETER_DRAFT);
+
+    useEffect(() => {
+        if (transactionRequestType !== CONST.IOU.REQUEST_TYPE.DISTANCE_ODOMETER) {
+            return;
+        }
+        if (!odometerDraft) {
+            return;
+        }
+        if (isLoadingTransaction || isLoadingSelectedTab) {
+            return;
+        }
+        if (lastHydratedDraft === odometerDraft) {
+            return;
+        }
+        hydrateOdometerDraftIntoTransaction(transaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID, odometerDraft, transaction?.comment);
+        lastHydratedDraft = odometerDraft;
+        // transaction.comment intentionally excluded — it changes after our own merge and would re-fire.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transactionRequestType, odometerDraft, isLoadingTransaction, isLoadingSelectedTab]);
+
+    return (newIOUType: IOURequestType) => {
+        if (newIOUType !== CONST.IOU.REQUEST_TYPE.DISTANCE_ODOMETER) {
+            return;
+        }
+        // No guard: callers invoke this right after initMoneyRequest wipes the comment, so re-hydration is intended.
+        hydrateOdometerDraftIntoTransaction(transaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID, odometerDraft, transaction?.comment);
+        lastHydratedDraft = odometerDraft ?? null;
+    };
+}
+
+export default useOdometerDraftHydrator;

src/hooks/useResetIOUType.ts

@@ -10,6 +10,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Policy, Report, Transaction} from '@src/types/onyx';
 import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useOdometerDraftHydrator from './useOdometerDraftHydrator';
 import useOnyx from './useOnyx';
 import usePersonalPolicy from './usePersonalPolicy';
 import usePrevious from './usePrevious';
@@ -67,6 +68,13 @@ function useResetIOUType({
     const personalPolicy = usePersonalPolicy();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
+    const hydrateOdometerOnLanding = useOdometerDraftHydrator({
+        transaction,
+        transactionRequestType,
+        isLoadingTransaction,
+        isLoadingSelectedTab,
+    });
+
     const resetIOUTypeIfChanged = (newIOUType: IOURequestType) => {
         if (!(skipKeyboardDismissForPerDiem && newIOUType === CONST.IOU.REQUEST_TYPE.PER_DIEM)) {
             Keyboard.dismiss();
@@ -95,6 +103,10 @@ function useResetIOUType({
             hasOnlyPersonalPolicies: hasOnlyPersonalPolicies ?? true,
             draftTransactionIDs,
         });
+
+        // Layer odometer draft fields onto the freshly-rebuilt transaction. The merge queues after
+        // initMoneyRequest's Onyx.set, so the odometer fields land on top.
+        hydrateOdometerOnLanding(newIOUType);
     };
 
     const tabSelectedTypeRef = useRef<IOURequestType | null>(null);

src/hooks/useRestartOnOdometerImagesFailure/index.ts

@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import useOnyx from '@hooks/useOnyx';
 import {checkIfLocalFileIsAccessible} from '@libs/actions/IOU/Receipt';
-import clearOdometerDraftTransactionState from '@libs/actions/OdometerTransactionUtils';
+import clearOdometerDraftTransactionState, {hydrateOdometerDraftIntoTransaction} from '@libs/actions/OdometerTransactionUtils';
 import {navigateToStartMoneyRequestStep} from '@libs/IOUUtils';
 import {getOdometerImageUri} from '@libs/OdometerImageUtils';
 import type {IOUType} from '@src/CONST';
@@ -12,25 +12,29 @@ import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft'
 import type {Transaction} from '@src/types/onyx';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
-// 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.
-// Returns `hasVerifiedBlobs` so callers can gate dependent side-effects (e.g. odometer image stitching)
-// until this check has confirmed the blobs are still readable. When there are no blob URLs to verify
-// (e.g. native file:// paths or remote URLs), `hasVerifiedBlobs` is `true` as soon as Onyx has loaded.
+type BackupHandledArgs = {
+    shouldResetLocalState: boolean;
+};
+
 const useRestartOnOdometerImagesFailure = (
     transaction: OnyxEntry<Transaction>,
     reportID: string,
     iouType: IOUType,
     backToReport: string | undefined,
-    onBackupHandled?: () => void,
+    onBackupHandled?: (args: BackupHandledArgs) => void,
 ): {hasVerifiedBlobs: boolean} => {
     const [, draftTransactionsMetadata] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
+    const [odometerDraft, odometerDraftStatus] = useOnyx(ONYXKEYS.ODOMETER_DRAFT);
     const hasCheckedRef = useRef(false);
     const [asyncVerificationPassed, setAsyncVerificationPassed] = useState(false);
 
+    // Updated via useEffect (not render-time) for React Compiler. The one-render lag is benign:
+    // a missed bail just lets recovery fire, and recovery itself rehydrates correctly.
+    const transactionRef = useRef(transaction);
+    useEffect(() => {
+        transactionRef.current = transaction;
+    }, [transaction]);
+
     const hasBlobUrls = (() => {
         if (!transaction) {
             return false;
@@ -40,22 +44,19 @@ const useRestartOnOdometerImagesFailure = (
     })();
 
     useEffect(() => {
-        if (!transaction || isLoadingOnyxValue(draftTransactionsMetadata)) {
+        if (!transaction || isLoadingOnyxValue(draftTransactionsMetadata) || isLoadingOnyxValue(odometerDraftStatus)) {
             return;
         }
 
-        // Run only once after Onyx finishes loading — blob:// URLs are ephemeral and only need
-        // to be verified on the first render after the data is available.
-        // It has to be resolved this way in order to have a complete dependency array for the useEffect hook.
         if (hasCheckedRef.current) {
             return;
         }
         hasCheckedRef.current = true;
 
         const startImage = transaction.comment?.odometerStartImage;
         const endImage = transaction.comment?.odometerEndImage;
-        const stitchedUri = transaction.receipt?.source?.toString();
 
+        // Source images only — the stitched receipt URL is derived and OdometerReceiptStitcher regenerates it.
         const urlsToCheck = [
             {
                 filename: typeof startImage === 'object' ? startImage?.name : undefined,
@@ -67,17 +68,10 @@ const useRestartOnOdometerImagesFailure = (
                 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;
-        }
-
+        // Empty urlsToCheck flows through Promise.all -> [].every(Boolean) === true -> marks verification passed
+        // Later blob additions (draft hydration, fresh capture) are minted in this session and stay trusted
         Promise.all(
             urlsToCheck.map(
                 ({filename, path, type}) =>
@@ -98,13 +92,29 @@ const useRestartOnOdometerImagesFailure = (
                 return;
             }
 
-            onBackupHandled?.();
-            clearOdometerDraftTransactionState(transaction);
+            // Bail if another flow already replaced the images (ODOMETER_DRAFT rehydration / fresh capture).
+            const liveStartUri = getOdometerImageUri(transactionRef.current?.comment?.odometerStartImage);
+            const liveEndUri = getOdometerImageUri(transactionRef.current?.comment?.odometerEndImage);
+            if (liveStartUri !== getOdometerImageUri(startImage) || liveEndUri !== getOdometerImageUri(endImage)) {
+                setAsyncVerificationPassed(true);
+                return;
+            }
+
+            // Rehydrate over the dead URLs when a draft exists — clearing first races the destination's
+            // auto-hydrator and ends up dropping the wrong URL.
+            if (odometerDraft) {
+                onBackupHandled?.({shouldResetLocalState: false});
+                hydrateOdometerDraftIntoTransaction(transaction.transactionID, odometerDraft, transaction.comment);
+            } else {
+                onBackupHandled?.({shouldResetLocalState: true});
+                clearOdometerDraftTransactionState(transaction);
+            }
+
             navigateToStartMoneyRequestStep(CONST.IOU.REQUEST_TYPE.DISTANCE_ODOMETER, iouType, transaction.transactionID, reportID, CONST.IOU.ACTION.CREATE, backToReport);
         });
-    }, [draftTransactionsMetadata, transaction, iouType, reportID, backToReport, onBackupHandled]);
+    }, [draftTransactionsMetadata, transaction, iouType, reportID, backToReport, onBackupHandled, odometerDraft, odometerDraftStatus]);
 
-    const isOnyxLoading = isLoadingOnyxValue(draftTransactionsMetadata);
+    const isOnyxLoading = isLoadingOnyxValue(draftTransactionsMetadata, odometerDraftStatus);
     const hasVerifiedBlobs = !!transaction && !isOnyxLoading && (!hasBlobUrls || asyncVerificationPassed);
 
     return {hasVerifiedBlobs};

src/languages/de.ts

@@ -1463,6 +1463,7 @@ const translations: TranslationDeepObject<typeof en> = {
             manySplitsProvided: `Die maximale Anzahl zulässiger Aufteilungen beträgt ${CONST.IOU.SPLITS_LIMIT}.`,
             dateRangeExceedsMaxDays: `Der Datumsbereich darf ${CONST.IOU.SPLITS_LIMIT} Tage nicht überschreiten.`,
             stitchOdometerImagesFailed: 'Kilometerzählerbilder konnten nicht zusammengeführt werden. Bitte versuchen Sie es später noch einmal.',
+            failedToSaveOdometerDraft: 'Dein Kilometerzähler-Entwurf konnte nicht gespeichert werden. Bitte versuche es erneut.',
         },
         dismissReceiptError: 'Fehler ausblenden',
         dismissReceiptErrorConfirmation: 'Achtung! Wenn du diesen Fehler schließt, wird deine hochgeladene Quittung vollständig entfernt. Bist du sicher?',

src/languages/en.ts

@@ -1484,6 +1484,7 @@ const translations = {
             distanceAmountTooLargeReduceRate: 'The total amount is too large. Lower the rate.',
             odometerReadingTooLarge: (formattedMax: string) => `Odometer readings cannot exceed ${formattedMax}.`,
             stitchOdometerImagesFailed: 'Failed to combine odometer images. Please try again later.',
+            failedToSaveOdometerDraft: "Couldn't save your odometer draft. Please try again.",
             invalidIntegerAmount: 'Please enter a whole dollar amount before continuing',
             invalidTaxAmount: (amount: string) => `Maximum tax amount is ${amount}`,
             invalidSplit: 'The sum of splits must equal the total amount',

src/languages/es.ts

@@ -1387,6 +1387,7 @@ const translations: TranslationDeepObject<typeof en> = {
             distanceAmountTooLargeReduceRate: 'El importe total es demasiado alto. Disminuye la tarifa.',
             odometerReadingTooLarge: (formattedMax: string) => `Las lecturas del odómetro no pueden superar ${formattedMax}.`,
             stitchOdometerImagesFailed: 'No se pudieron combinar las imágenes del odómetro. Por favor, inténtalo de nuevo más tarde.',
+            failedToSaveOdometerDraft: 'No se pudo guardar el borrador del odómetro. Por favor, inténtalo de nuevo.',
             invalidIntegerAmount: 'Por favor, introduce un importe entero en dólares antes de continuar',
             invalidTaxAmount: (amount) => `El importe máximo del impuesto es ${amount}`,
             invalidSplit: 'La suma de las partes debe ser igual al importe total',

src/languages/fr.ts

@@ -1466,6 +1466,7 @@ const translations: TranslationDeepObject<typeof en> = {
             manySplitsProvided: `Le nombre maximal de répartitions autorisées est de ${CONST.IOU.SPLITS_LIMIT}.`,
             dateRangeExceedsMaxDays: `La plage de dates ne peut pas dépasser ${CONST.IOU.SPLITS_LIMIT} jours.`,
             stitchOdometerImagesFailed: 'Échec de la combinaison des images de l’odomètre. Veuillez réessayer plus tard.',
+            failedToSaveOdometerDraft: 'Impossible d’enregistrer votre brouillon de compteur kilométrique. Veuillez réessayer.',
         },
         dismissReceiptError: 'Ignorer l’erreur',
         dismissReceiptErrorConfirmation: 'Attention ! Ignorer cette erreur supprimera complètement votre reçu téléversé. Êtes-vous sûr ?',

src/languages/it.ts

@@ -1460,6 +1460,7 @@ const translations: TranslationDeepObject<typeof en> = {
             manySplitsProvided: `Il numero massimo di suddivisioni consentite è ${CONST.IOU.SPLITS_LIMIT}.`,
             dateRangeExceedsMaxDays: `L’intervallo di date non può superare ${CONST.IOU.SPLITS_LIMIT} giorni.`,
             stitchOdometerImagesFailed: 'Impossibile combinare le immagini del contachilometri. Riprova più tardi.',
+            failedToSaveOdometerDraft: 'Impossibile salvare la tua bozza del contachilometri. Riprova.',
         },
         dismissReceiptError: 'Ignora errore',
         dismissReceiptErrorConfirmation: 'Attenzione! Chiudere questo errore rimuoverà completamente la ricevuta che hai caricato. Sei sicuro?',