fix: unify TBD-related logic for Distance requests

src/components/DistanceEReceipt.js

@@ -7,7 +7,6 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -35,8 +34,7 @@ function DistanceEReceipt({transaction}) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {};
-    const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction);
-    const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd');
+    const {formattedAmount: formattedTransactionAmount, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction);
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const sortedWaypoints = useMemo(

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -152,7 +152,13 @@ function MoneyRequestPreview(props) {
     // Pay button should only be visible to the manager of the report.
     const isCurrentUserManager = managerID === sessionAccountID;
 
-    const {amount: requestAmount, currency: requestCurrency, comment: requestComment, merchant} = ReportUtils.getTransactionDetails(props.transaction);
+    const {
+        amount: requestAmount,
+        formattedAmount: formattedRequestAmount,
+        currency: requestCurrency,
+        comment: requestComment,
+        merchant,
+    } = ReportUtils.getTransactionDetails(props.transaction);
     const description = truncate(requestComment, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
     const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
     const hasReceipt = TransactionUtils.hasReceipt(props.transaction);
@@ -166,13 +172,10 @@ function MoneyRequestPreview(props) {
     // Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan
     const shouldShowMerchant = !_.isEmpty(requestMerchant) && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
     const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant && !isScanning;
-    const hasPendingWaypoints = lodashGet(props.transaction, 'pendingFields.waypoints', null);
 
     let merchantOrDescription = requestMerchant;
     if (!shouldShowMerchant) {
         merchantOrDescription = description || '';
-    } else if (hasPendingWaypoints) {
-        merchantOrDescription = requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd'));
     }
 
     const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction)] : [];
@@ -221,10 +224,6 @@ function MoneyRequestPreview(props) {
     };
 
     const getDisplayAmountText = () => {
-        if (isDistanceRequest) {
-            return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency) : translate('common.tbd');
-        }
-
         if (isScanning) {
             return translate('iou.receiptScanning');
         }
@@ -233,7 +232,7 @@ function MoneyRequestPreview(props) {
             return Localize.translateLocal('iou.receiptMissingDetails');
         }
 
-        return CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency);
+        return formattedRequestAmount;
     };
 
     const getDisplayDeleteAmountText = () => {

src/components/ReportActionItem/MoneyRequestView.js

@@ -128,7 +128,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
     const {
         created: transactionDate,
         amount: transactionAmount,
-        currency: transactionCurrency,
+        formattedAmount: formattedTransactionAmount,
         comment: transactionDescription,
         merchant: transactionMerchant,
         billable: transactionBillable,
@@ -140,11 +140,6 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
     } = ReportUtils.getTransactionDetails(transaction);
     const isEmptyMerchant = transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
-    let formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : '';
-    const hasPendingWaypoints = lodashGet(transaction, 'pendingFields.waypoints', null);
-    if (isDistanceRequest && (!formattedTransactionAmount || hasPendingWaypoints)) {
-        formattedTransactionAmount = translate('common.tbd');
-    }
     const formattedOriginalAmount = transactionOriginalAmount && transactionOriginalCurrency && CurrencyUtils.convertToDisplayString(transactionOriginalAmount, transactionOriginalCurrency);
     const isCardTransaction = TransactionUtils.isCardTransaction(transaction);
     const cardProgramName = isCardTransaction ? CardUtils.getCardDescription(transactionCardID) : '';
@@ -297,7 +292,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
                     <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
                         <MenuItemWithTopDescription
                             description={translate('common.distance')}
-                            title={hasPendingWaypoints ? transactionMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')) : transactionMerchant}
+                            title={transactionMerchant}
                             interactive={canEditDistance}
                             shouldShowRightIcon={canEditDistance}
                             titleStyle={styles.flex1}

src/components/ReportActionItem/ReportPreview.js

@@ -154,11 +154,8 @@ function ReportPreview(props) {
     const hasErrors = hasReceipts && hasMissingSmartscanFields;
     const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3);
     const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction));
-    let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null;
-    const hasPendingWaypoints = formattedMerchant && hasOnlyDistanceRequests && _.every(transactionsWithReceipts, (transaction) => lodashGet(transaction, 'pendingFields.waypoints', null));
-    if (hasPendingWaypoints) {
-        formattedMerchant = formattedMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd'));
-    }
+    const formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null;
+    const hasOnlyLoadingDistanceRequests = hasOnlyDistanceRequests && _.every(transactionsWithReceipts, (transaction) => TransactionUtils.isLoadingDistanceRequest(transaction));
     const previewSubtitle =
         formattedMerchant ||
         props.translate('iou.requestCount', {
@@ -175,7 +172,7 @@ function ReportPreview(props) {
     );
 
     const getDisplayAmount = () => {
-        if (hasPendingWaypoints) {
+        if (hasOnlyLoadingDistanceRequests) {
             return props.translate('common.tbd');
         }
         if (totalDisplaySpend) {
@@ -184,9 +181,6 @@ function ReportPreview(props) {
         if (isScanning) {
             return props.translate('iou.receiptScanning');
         }
-        if (hasOnlyDistanceRequests) {
-            return props.translate('common.tbd');
-        }
 
         // If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid ₫60" or "paid -₫60 elsewhere")
         let displayAmount = '';

src/libs/ReportUtils.ts

@@ -292,6 +292,7 @@ type TransactionDetails =
           cardID: number;
           originalAmount: number;
           originalCurrency: string;
+          formattedAmount: string;
       }
     | undefined;
 
@@ -1829,11 +1830,23 @@ function getTransactionDetails(transaction: OnyxEntry<Transaction>, createdDateF
     if (!transaction) {
         return;
     }
+
     const report = getReport(transaction?.reportID);
+    const amount = TransactionUtils.getAmount(transaction, isNotEmptyObject(report) && isExpenseReport(report));
+    const currency = TransactionUtils.getCurrency(transaction);
+
+    let formattedAmount;
+    if (TransactionUtils.isLoadingDistanceRequest(transaction)) {
+        formattedAmount = Localize.translateLocal('common.tbd');
+    } else {
+        formattedAmount = amount ? CurrencyUtils.convertToDisplayString(amount, currency) : '';
+    }
+
     return {
         created: TransactionUtils.getCreated(transaction, createdDateFormat),
-        amount: TransactionUtils.getAmount(transaction, isNotEmptyObject(report) && isExpenseReport(report)),
-        currency: TransactionUtils.getCurrency(transaction),
+        amount,
+        currency,
+        formattedAmount,
         comment: TransactionUtils.getDescription(transaction),
         merchant: TransactionUtils.getMerchant(transaction),
         waypoints: TransactionUtils.getWaypoints(transaction),

src/libs/TransactionUtils.ts

@@ -11,6 +11,7 @@ import type {Comment, Receipt, Waypoint, WaypointCollection} from '@src/types/on
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isCorporateCard, isExpensifyCard} from './CardUtils';
 import DateUtils from './DateUtils';
+import * as Localize from './Localize';
 import * as NumberUtils from './NumberUtils';
 
 type AdditionalTransactionChanges = {comment?: string; waypoints?: WaypointCollection};
@@ -307,11 +308,30 @@ function getOriginalAmount(transaction: Transaction): number {
     return Math.abs(amount);
 }
 
+/**
+ * Verify if the transaction is of Distance request and is not fully ready:
+ * - it has a zero amount, which means the request was created offline and expects the distance calculation from the server
+ * - it is in `isLoading` state, which means the waypoints were updated offline and the distance requires re-calculation
+ */
+function isLoadingDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
+    if (!transaction) {
+        return false;
+    }
+
+    const amount = getAmount(transaction, false);
+    return isDistanceRequest(transaction) && (!!transaction?.isLoading || amount === 0);
+}
+
 /**
  * Return the merchant field from the transaction, return the modifiedMerchant if present.
  */
 function getMerchant(transaction: OnyxEntry<Transaction>): string {
-    return transaction?.modifiedMerchant ? transaction.modifiedMerchant : transaction?.merchant ?? '';
+    if (!transaction) {
+        return '';
+    }
+
+    const merchant = transaction.modifiedMerchant ? transaction.modifiedMerchant : transaction.merchant ?? '';
+    return isLoadingDistanceRequest(transaction) ? merchant.replace(CONST.REGEX.FIRST_SPACE, Localize.translateLocal('common.tbd')) : merchant;
 }
 
 function getDistance(transaction: Transaction): number {
@@ -566,6 +586,7 @@ export {
     isReceiptBeingScanned,
     getValidWaypoints,
     isDistanceRequest,
+    isLoadingDistanceRequest,
     isExpensifyCardTransaction,
     isCardTransaction,
     isPending,

src/types/onyx/Transaction.ts

@@ -94,6 +94,8 @@ type Transaction = {
     /** If the transaction was made in a foreign currency, we send the original amount and currency */
     originalAmount?: number;
     originalCurrency?: string;
+
+    isLoading?: boolean;
 };
 
 export default Transaction;