Fix distance still shows Pending when preview and report header already show distance

src/components/MoneyRequestConfirmationList.tsx

@@ -257,13 +257,7 @@ function MoneyRequestConfirmationList({
 
     const isMovingTransactionFromTrackExpense = IOUUtils.isMovingTransactionFromTrackExpense(action);
 
-    const distance = useMemo(() => {
-        const value = TransactionUtils.getDistance(transaction);
-        if (canUseP2PDistanceRequests && isMovingTransactionFromTrackExpense && unit && !TransactionUtils.isFetchingWaypointsFromServer(transaction)) {
-            return DistanceRequestUtils.convertToDistanceInMeters(value, unit);
-        }
-        return value;
-    }, [isMovingTransactionFromTrackExpense, unit, transaction, canUseP2PDistanceRequests]);
+    const distance = TransactionUtils.getDistanceInMeters(transaction, unit);
     const prevDistance = usePrevious(distance);
 
     const shouldCalculateDistanceAmount = isDistanceRequest && (iouAmount === 0 || prevRate !== rate || prevDistance !== distance);
@@ -360,7 +354,7 @@ function MoneyRequestConfirmationList({
         if (isDistanceRequest) {
             const customUnitRate = getCustomUnitRate(policy, customUnitRateID);
             taxCode = customUnitRate?.attributes?.taxRateExternalID ?? '';
-            taxableAmount = DistanceRequestUtils.getTaxableAmount(policy, customUnitRateID, TransactionUtils.getDistance(transaction));
+            taxableAmount = DistanceRequestUtils.getTaxableAmount(policy, customUnitRateID, distance);
         } else {
             taxableAmount = transaction?.amount ?? 0;
             taxCode = transaction?.taxCode ?? TransactionUtils.getDefaultTaxCode(policy, transaction) ?? '';
@@ -369,7 +363,7 @@ function MoneyRequestConfirmationList({
         const taxAmount = TransactionUtils.calculateTaxAmount(taxPercentage, taxableAmount, currency);
         const taxAmountInSmallestCurrencyUnits = CurrencyUtils.convertToBackendAmount(Number.parseFloat(taxAmount.toString()));
         IOU.setMoneyRequestTaxAmount(transaction?.transactionID ?? '', taxAmountInSmallestCurrencyUnits);
-    }, [policy, shouldShowTax, previousTransactionAmount, previousTransactionCurrency, transaction, isDistanceRequest, customUnitRateID, currency]);
+    }, [policy, shouldShowTax, previousTransactionAmount, previousTransactionCurrency, transaction, isDistanceRequest, customUnitRateID, currency, distance]);
 
     // If completing a split expense fails, set didConfirm to false to allow the user to edit the fields again
     if (isEditingSplitBill && didConfirm) {

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -222,7 +222,7 @@ function MoneyRequestView({
     const {unit} = mileageRate;
     const rate = transaction?.comment?.customUnit?.defaultP2PRate ?? mileageRate.rate;
 
-    const distance = DistanceRequestUtils.convertToDistanceInMeters(TransactionUtils.getDistance(transaction), unit);
+    const distance = TransactionUtils.getDistanceInMeters(transaction, unit);
     const rateToDisplay = DistanceRequestUtils.getRateForDisplay(unit, rate, currency, translate, toLocaleDigit, isOffline);
     const distanceToDisplay = DistanceRequestUtils.getDistanceForDisplay(hasRoute, distance, unit, rate, translate);
     let merchantTitle = isEmptyMerchant ? '' : transactionMerchant;
@@ -324,7 +324,7 @@ function MoneyRequestView({
             <OfflineWithFeedback pendingAction={getPendingFieldAction('waypoints')}>
                 <MenuItemWithTopDescription
                     description={translate('common.distance')}
-                    title={getPendingFieldAction('waypoints') ? translate('iou.fieldPending') : distanceToDisplay}
+                    title={distanceToDisplay}
                     interactive={canEditDistance && !readonly}
                     shouldShowRightIcon={canEditDistance && !readonly}
                     titleStyle={styles.flex1}

src/libs/TransactionUtils/getDistanceInMeters.ts

@@ -0,0 +1,19 @@
+import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+import type {OnyxInputOrEntry, Transaction} from '@src/types/onyx';
+import type {Unit} from '@src/types/onyx/Policy';
+
+function getDistanceInMeters(transaction: OnyxInputOrEntry<Transaction>, unit: Unit | undefined) {
+    // If we are creating a new distance request, the distance is available in routes.route0.distance and it's already in meter.
+    if (transaction?.routes?.route0?.distance) {
+        return transaction.routes.route0.distance;
+    }
+
+    // If the request is completed, transaction.routes is cleared and comment.customUnit.quantity holds the new distance in the selected unit.
+    // We need to convert it from the selected distance unit to meters.
+    if (transaction?.comment?.customUnit?.quantity && unit) {
+        return DistanceRequestUtils.convertToDistanceInMeters(transaction.comment.customUnit.quantity, unit);
+    }
+    return 0;
+}
+
+export default getDistanceInMeters;

src/libs/TransactionUtils.ts → src/libs/TransactionUtils/index.ts

@@ -3,23 +3,24 @@ import lodashIsEqual from 'lodash/isEqual';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {TransactionMergeParams} from '@libs/API/parameters';
+import {isCorporateCard, isExpensifyCard} from '@libs/CardUtils';
+import {getCurrencyDecimals} from '@libs/CurrencyUtils';
+import DateUtils from '@libs/DateUtils';
+import * as Localize from '@libs/Localize';
+import * as NumberUtils from '@libs/NumberUtils';
+import Permissions from '@libs/Permissions';
+import {getCleanedTagName, getCustomUnitRate} from '@libs/PolicyUtils';
+// eslint-disable-next-line import/no-cycle
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportConnection from '@libs/ReportConnection';
+import type {IOURequestType} from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Beta, OnyxInputOrEntry, Policy, RecentWaypoint, ReviewDuplicates, TaxRate, TaxRates, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
 import type {Comment, Receipt, TransactionChanges, TransactionPendingFieldsKey, Waypoint, WaypointCollection} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type {IOURequestType} from './actions/IOU';
-import type {TransactionMergeParams} from './API/parameters';
-import {isCorporateCard, isExpensifyCard} from './CardUtils';
-import {getCurrencyDecimals} from './CurrencyUtils';
-import DateUtils from './DateUtils';
-import * as Localize from './Localize';
-import * as NumberUtils from './NumberUtils';
-import Permissions from './Permissions';
-import {getCleanedTagName, getCustomUnitRate} from './PolicyUtils';
-// eslint-disable-next-line import/no-cycle
-import * as ReportActionsUtils from './ReportActionsUtils';
-import * as ReportConnection from './ReportConnection';
+import getDistanceInMeters from './getDistanceInMeters';
 
 let allTransactions: OnyxCollection<Transaction> = {};
 Onyx.connect({
@@ -383,10 +384,6 @@ function getMerchant(transaction: OnyxInputOrEntry<Transaction>): string {
     return transaction?.modifiedMerchant ? transaction.modifiedMerchant : transaction?.merchant ?? '';
 }
 
-function getDistance(transaction: OnyxInputOrEntry<Transaction>): number {
-    return transaction?.comment?.customUnit?.quantity ?? 0;
-}
-
 /**
  * Return the reimbursable value. Defaults to true to match BE logic.
  */
@@ -998,7 +995,7 @@ export {
     getTaxAmount,
     getTaxCode,
     getCurrency,
-    getDistance,
+    getDistanceInMeters,
     getCardID,
     getOriginalCurrency,
     getOriginalAmount,

src/libs/actions/IOU.ts

@@ -712,6 +712,7 @@ function buildOnyxDataForMoneyRequest(
             value: {
                 pendingAction: null,
                 pendingFields: clearedPendingFields,
+                routes: null,
             },
         },
 
@@ -1461,6 +1462,7 @@ function buildOnyxDataForTrackExpense(
             value: {
                 pendingAction: null,
                 pendingFields: clearedPendingFields,
+                routes: null,
             },
         },
     );
@@ -2492,7 +2494,7 @@ function calculateAmountForUpdatedWaypoint(
             ? DistanceRequestUtils.getRateForP2P(policyCurrency)
             : mileageRates?.[customUnitRateID] ?? DistanceRequestUtils.getDefaultMileageRate(policy);
         const {unit, rate} = mileageRate;
-        const distance = TransactionUtils.getDistance(transaction);
+        const distance = TransactionUtils.getDistanceInMeters(transaction, unit);
         const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate ?? 0);
         updatedAmount = ReportUtils.isExpenseReport(iouReport) ? -amount : amount;
         updatedMerchant = DistanceRequestUtils.getDistanceMerchant(true, distance, unit, rate, transaction?.currency ?? CONST.CURRENCY.USD, Localize.translateLocal, (digit) =>
@@ -2755,6 +2757,7 @@ function getUpdateMoneyRequestParams(
             pendingFields: clearedPendingFields,
             isLoading: false,
             errorFields: null,
+            routes: null,
         },
     });
 
@@ -2966,6 +2969,7 @@ function getUpdateTrackExpenseParams(
             pendingFields: clearedPendingFields,
             isLoading: false,
             errorFields: null,
+            routes: null,
         },
     });
 

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

@@ -79,7 +79,7 @@ function IOURequestStepDistanceRate({
         if (shouldShowTax) {
             const policyCustomUnitRate = getCustomUnitRate(policy, customUnitRateID);
             const taxRateExternalID = policyCustomUnitRate?.attributes?.taxRateExternalID ?? '-1';
-            const taxableAmount = DistanceRequestUtils.getTaxableAmount(policy, customUnitRateID, TransactionUtils.getDistance(transaction));
+            const taxableAmount = DistanceRequestUtils.getTaxableAmount(policy, customUnitRateID, TransactionUtils.getDistanceInMeters(transaction, unit));
             const taxPercentage = TransactionUtils.getTaxValue(policy, transaction, taxRateExternalID) ?? '';
             const taxAmount = CurrencyUtils.convertToBackendAmount(TransactionUtils.calculateTaxAmount(taxPercentage, taxableAmount, rates[customUnitRateID].currency ?? CONST.CURRENCY.USD));
             IOU.setMoneyRequestTaxAmount(transactionID, taxAmount);