[Payment due @DylanDylann] [Odometer] Show discard changes modal when switching tabs

cspell.json

@@ -830,6 +830,7 @@
         "reimbursability",
         "reimbursementid",
         "reimbursible",
+        "reminted",
         "remotedesktop",
         "remotesync",
         "removeHiddenElems",

src/hooks/useDiscardChangesConfirmation/getDiscardChangesModalConfig.ts

@@ -0,0 +1,18 @@
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+
+/**
+ * Single source of truth for the "Discard changes?" modal content, so every caller (nav-away and tab-switch)
+ * renders an identical modal instead of drifting apart. Behavioral flags like the web-only
+ * `shouldIgnoreBackHandlerDuringTransition` are added per caller, not here
+ */
+function getDiscardChangesModalConfig(translate: LocaleContextProps['translate']) {
+    return {
+        title: translate('discardChangesConfirmation.title'),
+        prompt: translate('discardChangesConfirmation.body'),
+        danger: true,
+        confirmText: translate('discardChangesConfirmation.confirmText'),
+        cancelText: translate('common.cancel'),
+    };
+}
+
+export default getDiscardChangesModalConfig;

src/hooks/useDiscardChangesConfirmation/index.native.ts

@@ -1,16 +1,25 @@
 import type {NavigationAction} from '@react-navigation/native';
-import {useFocusEffect, useIsFocused, usePreventRemove} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused, usePreventRemove, useRoute} from '@react-navigation/native';
 import {useRef} from 'react';
 import {BackHandler} from 'react-native';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
 import navigationRef from '@libs/Navigation/navigationRef';
+import {useRegisterTabSwitchGuard} from '@libs/Navigation/TabSwitchGuardContext';
+import getDiscardChangesModalConfig from './getDiscardChangesModalConfig';
 import type {DiscardChangesConfirmation} from './types';
 import type UseDiscardChangesConfirmationOptions from './types';
 
-function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibilityChange, onConfirm}: UseDiscardChangesConfirmationOptions): DiscardChangesConfirmation {
+function useDiscardChangesConfirmation({
+    getHasUnsavedChanges,
+    onCancel,
+    onVisibilityChange,
+    onConfirm,
+    onTabSwitchDiscard,
+}: UseDiscardChangesConfirmationOptions): DiscardChangesConfirmation {
+    const route = useRoute();
     const {translate} = useLocalize();
     const {showConfirmModal} = useConfirmModal();
     const blockedNavigationAction = useRef<NavigationAction | undefined>(undefined);
@@ -25,17 +34,15 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibi
     });
     const hasUnsavedChanges = () => isFocused && !isSavingRef.current && getHasUnsavedChanges();
 
+    // Also guard tab switches when this screen is an OnyxTabNavigator tab.
+    // Self-disables outside a tab navigator or without an onTabSwitchDiscard handler
+    useRegisterTabSwitchGuard(route.name, getHasUnsavedChanges, onTabSwitchDiscard, onCancel);
+
     const showDiscardModal = (blockedAction?: NavigationAction) => {
         blockedNavigationAction.current = blockedAction;
         isDiscardModalOpen.current = true;
         onVisibilityChange?.(true);
-        showConfirmModal({
-            title: translate('discardChangesConfirmation.title'),
-            prompt: translate('discardChangesConfirmation.body'),
-            danger: true,
-            confirmText: translate('discardChangesConfirmation.confirmText'),
-            cancelText: translate('common.cancel'),
-        }).then((result) => {
+        showConfirmModal(getDiscardChangesModalConfig(translate)).then((result) => {
             isDiscardModalOpen.current = false;
             onVisibilityChange?.(false);
             if (result.action !== ModalActions.CONFIRM) {

src/hooks/useDiscardChangesConfirmation/index.ts

@@ -1,5 +1,5 @@
 import type {NavigationAction} from '@react-navigation/native';
-import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
 import {useEffect, useRef} from 'react';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import useBeforeRemove from '@hooks/useBeforeRemove';
@@ -8,12 +8,25 @@ import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
 import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
 import navigationRef from '@libs/Navigation/navigationRef';
+import {useRegisterTabSwitchGuard} from '@libs/Navigation/TabSwitchGuardContext';
+import getDiscardChangesModalConfig from './getDiscardChangesModalConfig';
 import type {DiscardChangesConfirmation} from './types';
 import type UseDiscardChangesConfirmationOptions from './types';
 
-function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibilityChange, onConfirm}: UseDiscardChangesConfirmationOptions): DiscardChangesConfirmation {
+function useDiscardChangesConfirmation({
+    getHasUnsavedChanges,
+    onCancel,
+    onVisibilityChange,
+    onConfirm,
+    onTabSwitchDiscard,
+}: UseDiscardChangesConfirmationOptions): DiscardChangesConfirmation {
+    const route = useRoute();
     const {translate} = useLocalize();
     const {showConfirmModal, closeModal} = useConfirmModal();
+
+    // Also guard tab switches when this screen is an OnyxTabNavigator tab.
+    // Self-disables outside a tab navigator or without an onTabSwitchDiscard handler
+    useRegisterTabSwitchGuard(route.name, getHasUnsavedChanges, onTabSwitchDiscard, onCancel);
     const blockedNavigationAction = useRef<NavigationAction>(undefined);
     const shouldNavigateBack = useRef(false);
     const isDiscardModalOpen = useRef(false);
@@ -42,11 +55,7 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibi
         isDiscardModalOpen.current = true;
         onVisibilityChange?.(true);
         showConfirmModal({
-            title: translate('discardChangesConfirmation.title'),
-            prompt: translate('discardChangesConfirmation.body'),
-            danger: true,
-            confirmText: translate('discardChangesConfirmation.confirmText'),
-            cancelText: translate('common.cancel'),
+            ...getDiscardChangesModalConfig(translate),
             shouldIgnoreBackHandlerDuringTransition: true,
             shouldHandleNavigationBack: false,
         }).then((result) => {

src/hooks/useDiscardChangesConfirmation/types.ts

@@ -4,6 +4,12 @@ type UseDiscardChangesConfirmationOptions = {
     onCancel?: () => void;
     onVisibilityChange?: (visible: boolean) => void;
     onConfirm?: () => void | Promise<void>;
+
+    /**
+     * Discard action for confirming a tab switch. Provide it to guard tab switches inside an `OnyxTabNavigator`.
+     * Can differ from `onConfirm` (nav-away)
+     */
+    onTabSwitchDiscard?: () => void | Promise<void>;
 };
 
 type DiscardChangesConfirmation = {

src/hooks/useOdometerReceiptStitcher/index.ts

@@ -3,8 +3,8 @@ import {useEffect, useReducer, useRef} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import useRestartOnOdometerImagesFailure from '@hooks/useRestartOnOdometerImagesFailure';
 import Log from '@libs/Log';
-import {getOdometerImageUri} from '@libs/OdometerImageUtils';
 import {deriveOdometerReceipt, stitchTask} from '@libs/OdometerReceipt';
+import {getOdometerImageUri} from '@libs/OdometerUtils';
 import {setMoneyRequestReceipt} from '@userActions/IOU/Receipt';
 import type {FileObject} from '@src/types/utils/Attachment';
 import type {OdometerReceiptState, UseOdometerReceiptStitcherArgs, UseOdometerReceiptStitcherResult} from './types';

src/hooks/useRestartOnOdometerImagesFailure/index.ts

@@ -4,7 +4,7 @@ import useOnyx from '@hooks/useOnyx';
 import {checkIfLocalFileIsAccessible} from '@libs/actions/IOU/Receipt';
 import clearOdometerDraftTransactionState, {hydrateOdometerDraftIntoTransaction} from '@libs/actions/OdometerTransactionUtils';
 import {navigateToStartMoneyRequestStep} from '@libs/IOUUtils';
-import {getOdometerImageUri} from '@libs/OdometerImageUtils';
+import {getOdometerImageUri} from '@libs/OdometerUtils';
 import type {IOUType} from '@src/CONST';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -103,13 +103,20 @@ const useRestartOnOdometerImagesFailure = (
             // 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) {
+                // Tell the backup hook not to revert on unmount, then re-mint the images from the draft. Only flip
+                // verification (and navigate) AFTER the merge lands, else the readings hook snapshots its baseline from
+                // the stale dead-blob image and a later swap to the re-minted image reads as a phantom "Discard changes?".
                 onBackupHandled?.({shouldResetLocalState: false});
-                hydrateOdometerDraftIntoTransaction(transaction.transactionID, odometerDraft, transaction.comment);
-            } else {
-                onBackupHandled?.({shouldResetLocalState: true});
-                clearOdometerDraftTransactionState(transaction);
+                hydrateOdometerDraftIntoTransaction(transaction.transactionID, odometerDraft, transaction.comment).then(() => {
+                    setAsyncVerificationPassed(true);
+                    navigateToStartMoneyRequestStep(CONST.IOU.REQUEST_TYPE.DISTANCE_ODOMETER, iouType, transaction.transactionID, reportID, CONST.IOU.ACTION.CREATE, backToReport);
+                });
+                return;
             }
 
+            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, odometerDraft, odometerDraftStatus]);