fix: BUG: [distance] request confirmation offline doesn't show TBD

src/components/ConfirmedRoute.js

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import lodashIsNil from "lodash/isNil";
 import _ from 'underscore';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
@@ -43,7 +44,7 @@ const getWaypointMarkers = (waypoints) => {
     const lastWaypointIndex = numberOfWaypoints - 1;
     return _.filter(
         _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+            if (!waypoint || lodashIsNil(waypoint.lng) || lodashIsNil(waypoint.lat)) {
                 return;
             }
 

src/components/DistanceRequest.js

@@ -90,11 +90,13 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
 
     const lastWaypointIndex = numberOfWaypoints - 1;
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
-    const hasRouteError = lodashHas(transaction, 'errorFields.route');
+    const hasRouteError = !lodashIsNull(lodashGet(transaction, 'errorFields.route'));
     const haveWaypointsChanged = !_.isEqual(previousWaypoints, waypoints);
-    const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');
+    const doesRouteExist = TransactionUtils.doesRouteExist(transaction)
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
-    const shouldFetchRoute = (!doesRouteExist || haveWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
+    const hasMultipleValidWaypoints = _.size(validatedWaypoints) > 1;
+    const isRouteAbsentWithNoErrors = !hasRouteError && !doesRouteExist;
+    const shouldFetchRoute = (haveWaypointsChanged || isRouteAbsentWithNoErrors) && !isLoadingRoute && hasMultipleValidWaypoints;
     const waypointMarkers = useMemo(
         () =>
             _.filter(

src/components/MoneyRequestConfirmationList.js

@@ -33,6 +33,7 @@ import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
 import * as IOU from '../libs/actions/IOU';
+import * as TransactionUtils from "../libs/TransactionUtils";
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -173,7 +174,8 @@ function MoneyRequestConfirmationList(props) {
     const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
-    const formattedAmount = CurrencyUtils.convertToDisplayString(
+    const doesRouteExist = TransactionUtils.doesRouteExist(transaction)
+    const formattedAmount = (props.isDistanceRequest && !doesRouteExist) ? translate('common.tbd') : CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
         props.isDistanceRequest ? currency : props.iouCurrencyCode,
     );
@@ -466,7 +468,7 @@ function MoneyRequestConfirmationList(props) {
                     {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={props.iouMerchant}
+                            title={doesRouteExist ? props.iouMerchant : translate('common.tbd')}
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}

src/languages/en.ts

@@ -239,6 +239,7 @@ export default {
         kilometers: 'kilometers',
         recent: 'Recent',
         all: 'All',
+        tbd: 'TBD',
     },
     anonymousReportFooter: {
         logoTagline: 'Join the discussion.',

src/languages/es.ts

@@ -238,6 +238,7 @@ export default {
         kilometers: 'kilómetros',
         recent: 'Reciente',
         all: 'Todo',
+        tbd: 'A definir'
     },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discusión.',

src/libs/TransactionUtils.js

@@ -1,6 +1,7 @@
 import Onyx from 'react-native-onyx';
 import {format, parseISO, isValid} from 'date-fns';
 import lodashGet from 'lodash/get';
+import lodashIsNil from 'lodash/isNil';
 import _ from 'underscore';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
@@ -271,6 +272,16 @@ function hasMissingSmartscanFields(transaction) {
     return hasReceipt(transaction) && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction);
 }
 
+/**
+ * Check if the transaction has a defined route
+ *
+ * @param {Object} transaction
+ * @returns {Boolean}
+ */
+function doesRouteExist(transaction) {
+    return !lodashIsNil(lodashGet(transaction, 'routes.route0.geometry.coordinates'))
+}
+
 /**
  * Get the transactions related to a report preview with receipts
  * Get the details linked to the IOU reportAction
@@ -345,6 +356,7 @@ function getValidWaypoints(waypoints, reArrangeIndexes = false) {
 
 export {
     buildOptimisticTransaction,
+    doesRouteExist,
     getUpdatedTransaction,
     getTransaction,
     getDescription,