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(lodashGet(waypoint, 'lng')) || lodashIsNil(lodashGet(waypoint, 'lat'))) {
                 return;
             }
 

src/components/DistanceRequest.js

@@ -2,8 +2,7 @@ import React, {useEffect, useMemo, useState, useRef} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
-import lodashHas from 'lodash/has';
-import lodashIsNull from 'lodash/isNull';
+import lodashIsNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 
@@ -90,16 +89,17 @@ 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 = !lodashIsNil(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 isRouteAbsentWithNoErrors = !hasRouteError && !doesRouteExist;
+    const shouldFetchRoute = (haveWaypointsChanged || isRouteAbsentWithNoErrors) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
     const waypointMarkers = useMemo(
         () =>
             _.filter(
                 _.map(waypoints, (waypoint, key) => {
-                    if (!waypoint || !lodashHas(waypoint, 'lat') || !lodashHas(waypoint, 'lng') || lodashIsNull(waypoint.lat) || lodashIsNull(waypoint.lng)) {
+                    if (!waypoint || lodashIsNil(lodashGet(waypoint, 'lng')) || lodashIsNil(lodashGet(waypoint, 'lat'))) {
                         return;
                     }
 

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,10 +174,14 @@ function MoneyRequestConfirmationList(props) {
     const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
-    const formattedAmount = CurrencyUtils.convertToDisplayString(
-        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
-        props.isDistanceRequest ? currency : props.iouCurrencyCode,
-    );
+    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,
+              );
 
     useEffect(() => {
         if (!shouldCalculateDistanceAmount) {
@@ -466,7 +471,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: 'Por determinar',
     },
     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,

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -23,6 +23,7 @@ import reportPropTypes from '../../reportPropTypes';
 import personalDetailsPropType from '../../personalDetailsPropType';
 import * as FileUtils from '../../../libs/fileDownload/FileUtils';
 import * as Policy from '../../../libs/actions/Policy';
+import useNetwork from '../../../hooks/useNetwork';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import {iouPropTypes, iouDefaultProps} from '../propTypes';
@@ -59,6 +60,7 @@ const defaultProps = {
 };
 
 function MoneyRequestConfirmPage(props) {
+    const {isOffline} = useNetwork();
     const {windowHeight} = useWindowDimensions();
     const prevMoneyRequestId = useRef(props.iou.id);
     const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
@@ -77,8 +79,7 @@ function MoneyRequestConfirmPage(props) {
         if (policyExpenseChat) {
             Policy.openDraftWorkspaceRequest(policyExpenseChat.policyID);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [isOffline, participants]);
 
     useEffect(() => {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request