fixed navigating back afte save on mobile

Author: mukhrr

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -118,7 +118,13 @@ function ReportActionItemImage({
     const isMapDistanceRequest = !!transaction && isDistanceRequest(transaction) && !isManualDistanceRequest(transaction);
     const hasPendingWaypoints = transaction && isFetchingWaypointsFromServer(transaction);
     const hasErrors = !isEmptyObject(transaction?.errors) || !isEmptyObject(transaction?.errorFields?.route) || !isEmptyObject(transaction?.errorFields?.waypoints);
-    const showMapAsImage = isMapDistanceRequest && (hasErrors || hasPendingWaypoints);
+    // After a distance/rate edit the BE regenerates the receipt and invalidates the prior URL, but
+    // the local `receipt.source` only refreshes when the Pusher push arrives. Render `ConfirmedRoute`
+    // (which draws the map from `routes.coordinates`, independent of the URL) while any of these
+    // edits are pending so the thumbnail doesn't briefly try to load the now-404'd URL.
+    const pf = transaction?.pendingFields as Record<string, unknown> | undefined;
+    const hasPendingReceiptRegeneration = !!pf && (!!pf.distance || !!pf.merchant || !!pf.customUnitRateID);
+    const showMapAsImage = isMapDistanceRequest && (hasErrors || !!hasPendingWaypoints || hasPendingReceiptRegeneration);
 
     if (showMapAsImage) {
         return (

src/libs/TransactionUtils/index.ts

@@ -748,6 +748,13 @@ function getUpdatedTransaction({
             updatedTransaction.amount = updatedAmount;
             updatedTransaction.modifiedAmount = updatedAmount;
             updatedTransaction.modifiedMerchant = updatedMerchant;
+
+            // Sync `customUnit.quantity` to the new route distance. Without this the prior manual
+            // quantity (set when the user edited distance manually before changing waypoints) would
+            // linger and drive `getDistanceInMeters`, since that helper prefers quantity over routes.
+            if (unit) {
+                lodashSet(updatedTransaction, 'comment.customUnit.quantity', roundToTwoDecimalPlaces(DistanceRequestUtils.convertDistanceUnit(distanceInMeters, unit)));
+            }
         }
     }
 

src/libs/actions/IOU/UpdateMoneyRequest.ts

@@ -509,7 +509,10 @@ function updateMoneyRequestDistance({
         // Don't sanitize waypoints here - keep all fields for Onyx optimistic data (e.g., keyForList)
         // Sanitization happens when building API params
         ...(waypoints && {waypoints}),
-        routes,
+        // Only include routes when the caller explicitly provided them. Including `routes: undefined`
+        // would make the optimistic merge wipe the existing route, briefly blanking the map thumbnail
+        // and report preview before the server response restores it.
+        ...(routes !== undefined && {routes}),
         ...(distance && {distance}),
         ...(odometerStart !== undefined && {odometerStart}),
         ...(odometerEnd !== undefined && {odometerEnd}),
@@ -966,6 +969,15 @@ function getUpdateMoneyRequestParams(params: GetUpdateMoneyRequestParamsType): U
             .filter((key) => !(shouldSuppressWaypointsAsPending && key === 'waypoints'))
             .map((key) => [key, CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE]),
     );
+    // Flag `merchant` as pending on any edit that causes the BE to regenerate the receipt
+    // (waypoints / distance / rate). `merchant` isn't in `transactionChanges`, so the success-data
+    // merge won't clear it via `clearedPendingFields` — it persists through the gap between API ack
+    // and the Pusher push that delivers the new `receipt.source`. The Pusher push then clears all
+    // pendingFields atomically together with the new URL, eliminating the broken-image flash.
+    // It also drives the Distance row's offline-feedback strikethrough for pure distance edits.
+    if ('waypoints' in transactionChanges || 'distance' in transactionChanges || 'customUnitRateID' in transactionChanges) {
+        pendingFields.merchant = CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE;
+    }
     const clearedPendingFields = getClearedPendingFields(transactionChanges);
     const errorFields = Object.fromEntries(Object.keys(pendingFields).map((key) => [key, getMicroSecondOnyxErrorWithTranslationKey('iou.error.genericEditFailureMessage')]));
 
@@ -1274,7 +1286,11 @@ function getUpdateMoneyRequestParams(params: GetUpdateMoneyRequestParamsType): U
     // Clear out the error fields and loading states on success.
     // Only clear `routes` when waypoints/rate changed (the server will push a fresh route via Pusher).
     // For pure distance edits the route is unchanged, and clearing it would make the map briefly disappear.
-    const shouldClearRoutes = haveWaypointsActuallyChanged || hasModifiedDistanceRate;
+    // When the caller already supplied a valid optimistic route (waypoint edit with route pre-fetched
+    // locally), keep it so the receipt thumbnail and ConfirmedRoute don't flicker between success and
+    // the Pusher route push.
+    const hasValidOptimisticRoute = !!transactionChanges.routes?.route0?.geometry?.coordinates?.length;
+    const shouldClearRoutes = (haveWaypointsActuallyChanged || hasModifiedDistanceRate) && !hasValidOptimisticRoute;
     successData.push({
         onyxMethod: Onyx.METHOD.MERGE,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,

src/pages/iou/request/step/IOURequestStepDistance.tsx

@@ -5,11 +5,8 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ScrollView as RNScrollView} from 'react-native';
 import type {RenderItemParams} from 'react-native-draggable-flatlist/lib/typescript/types';
 import type {OnyxEntry} from 'react-native-onyx';
-import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import DistanceRequestRenderItem from '@components/DistanceRequest/DistanceRequestRenderItem';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import type {NumberWithSymbolFormRef} from '@components/NumberWithSymbolForm';
-import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -37,7 +34,6 @@ import {init, stop} from '@libs/actions/MapboxToken';
 import {openReport} from '@libs/actions/Report';
 import {openDraftDistanceExpense, removeWaypoint, updateWaypoints as updateWaypointsUtil} from '@libs/actions/Transaction';
 import {createBackupTransaction, removeBackupTransaction, restoreOriginalTransactionFromBackup} from '@libs/actions/TransactionEdit';
-import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import type {MileageRate} from '@libs/DistanceRequestUtils';
 import {getLatestErrorField} from '@libs/ErrorUtils';
@@ -333,6 +329,10 @@ function IOURequestStepDistance({
         Navigation.goBack(backTo);
     }, [backTo]);
 
+    const navigateBackAfterSave = useCallback(() => {
+        Navigation.closeRHPFlow();
+    }, []);
+
     /**
      * Takes the user to the page for editing a specific waypoint
      * @param index of the waypoint to edit
@@ -503,7 +503,7 @@ function IOURequestStepDistance({
                     {waypoints: currentTransaction?.comment?.waypoints, routes: currentTransaction?.routes},
                     policy,
                 );
-                navigateBack();
+                navigateBackAfterSave();
                 return;
             }
 
@@ -515,24 +515,17 @@ function IOURequestStepDistance({
             const hasRouteChanged = !deepEqual(transactionBackup?.routes, transaction?.routes);
             if (deepEqual(oldAddresses, addresses)) {
                 transactionWasSaved.current = true;
-                navigateBack();
+                navigateBackAfterSave();
                 return;
             }
             if (transaction?.transactionID && report?.reportID) {
-                // Send the new route distance so the server replaces any stale manual quantity.
-                // Use full precision (no rounding) to avoid triggering the `increasedDistance`
-                // violation when the rounded display value drifts above the exact route distance.
-                const routeDistanceInMeters = transaction?.routes?.route0?.distance;
-                const routeDistanceInUnit = routeDistanceInMeters != null ? DistanceRequestUtils.convertDistanceUnit(routeDistanceInMeters, distanceUnit) : undefined;
-
                 updateMoneyRequestDistance({
                     transaction,
                     transactionThreadReport: report,
                     parentReport,
                     waypoints,
                     recentWaypoints,
                     ...(hasRouteChanged ? {routes: transaction?.routes} : {}),
-                    ...(routeDistanceInUnit != null ? {distance: routeDistanceInUnit} : {}),
                     policy,
                     policyTagList: policyTags,
                     policyCategories,
@@ -547,7 +540,7 @@ function IOURequestStepDistance({
             // Remove the backup eagerly so the parent report view reads the optimistic transaction
             // immediately, instead of the stale backup, while the API request is still in flight.
             removeBackupTransaction(transaction?.transactionID);
-            navigateBack();
+            navigateBackAfterSave();
             return;
         }
 
@@ -561,13 +554,13 @@ function IOURequestStepDistance({
         isLoading,
         isCreatingNewRequest,
         navigateToNextStep,
+        navigateBackAfterSave,
         isEditingSplit,
         originalSplitTransactionDraft,
         transactionBackup,
         waypoints,
         transaction,
         report,
-        navigateBack,
         currentTransaction?.comment?.waypoints,
         currentTransaction?.routes,
         policy,
@@ -579,7 +572,6 @@ function IOURequestStepDistance({
         currentUserEmailParam,
         isASAPSubmitBetaEnabled,
         parentReportNextStep,
-        distanceUnit,
     ]);
 
     const submitManualDistance = useCallback(() => {
@@ -599,7 +591,7 @@ function IOURequestStepDistance({
         if (isEditingSplit && transaction) {
             setMoneyRequestDistance(transactionID, distanceAsFloat, shouldUseTransactionDraft(action, iouType), distanceUnit);
             setDraftSplitTransaction(CONST.IOU.OPTIMISTIC_TRANSACTION_ID, splitDraftTransaction, {distance: distanceAsFloat}, policy);
-            navigateBack();
+            navigateBackAfterSave();
             return;
         }
 
@@ -616,7 +608,7 @@ function IOURequestStepDistance({
 
         if (!isDistanceChanged && !isDistanceUnitChanged && !haveWaypointsChanged) {
             transactionWasSaved.current = true;
-            navigateBack();
+            navigateBackAfterSave();
             return;
         }
 
@@ -639,7 +631,7 @@ function IOURequestStepDistance({
             recentWaypoints,
         });
         transactionWasSaved.current = true;
-        navigateBack();
+        navigateBackAfterSave();
     }, [
         translate,
         distanceRate,
@@ -652,7 +644,7 @@ function IOURequestStepDistance({
         currentTransaction?.comment?.customUnit?.distanceUnit,
         splitDraftTransaction,
         policy,
-        navigateBack,
+        navigateBackAfterSave,
         currentDistance,
         waypoints,
         transactionBackup,
@@ -738,27 +730,23 @@ function IOURequestStepDistance({
     );
 
     if (isEditing) {
-        const hasRequiredData = !!currentTransaction?.comment?.waypoints && !shouldShowNotFoundPage;
         return (
-            <ScreenWrapper
-                shouldEnableMaxHeight={canUseTouchScreen()}
+            <StepScreenWrapper
+                headerTitle={translate('common.distance')}
+                onBackButtonPress={navigateBack}
                 testID="IOURequestStepDistance"
+                shouldShowNotFoundPage={!currentTransaction?.comment?.waypoints || shouldShowNotFoundPage}
+                shouldShowWrapper
             >
-                <FullPageNotFoundView shouldShow={!hasRequiredData}>
-                    <HeaderWithBackButton
-                        title={translate('common.distance')}
-                        onBackButtonPress={navigateBack}
-                    />
-                    <OnyxTabNavigator
-                        id={CONST.TAB.DISTANCE_EDIT_TYPE}
-                        defaultSelectedTab={CONST.TAB_REQUEST.DISTANCE_MAP}
-                        tabBar={TabSelector}
-                    >
-                        <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE_MAP}>{renderMapTab}</TopTab.Screen>
-                        <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE_MANUAL}>{renderManualTab}</TopTab.Screen>
-                    </OnyxTabNavigator>
-                </FullPageNotFoundView>
-            </ScreenWrapper>
+                <OnyxTabNavigator
+                    id={CONST.TAB.DISTANCE_EDIT_TYPE}
+                    defaultSelectedTab={CONST.TAB_REQUEST.DISTANCE_MAP}
+                    tabBar={TabSelector}
+                >
+                    <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE_MAP}>{renderMapTab}</TopTab.Screen>
+                    <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE_MANUAL}>{renderManualTab}</TopTab.Screen>
+                </OnyxTabNavigator>
+            </StepScreenWrapper>
         );
     }