Better offline route fetching

src/components/DistanceRequest.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {ScrollView, View} from 'react-native';
 import lodashGet from 'lodash/get';
+import lodashHas from 'lodash/has';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -68,14 +69,15 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
 
     const lastWaypointIndex = numberOfWaypoints - 1;
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
-    const hasRouteError = Boolean(lodashGet(transaction, 'errorFields.route'));
+    const hasRouteError = lodashHas(transaction, 'errorFields.route');
     const previousWaypoints = usePrevious(waypoints);
     const haveWaypointsChanged = !_.isEqual(previousWaypoints, waypoints);
-    const shouldFetchRoute = haveWaypointsChanged && !isOffline && !isLoadingRoute && TransactionUtils.validateWaypoints(waypoints);
+    const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');
+    const shouldFetchRoute = (!doesRouteExist || haveWaypointsChanged) && !isLoadingRoute && TransactionUtils.validateWaypoints(waypoints);
 
     const waypointMarkers = _.filter(
         _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+            if (!waypoint || !lodashHas(waypoint, 'lat') || !lodashHas(waypoint, 'lng')) {
                 return;
             }
 
@@ -126,14 +128,13 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
         setShouldShowGradient(visibleAreaEnd < scrollContentHeight);
     };
 
-    // Handle fetching the route when there are at least 2 waypoints
     useEffect(() => {
-        if (!shouldFetchRoute) {
+        if (isOffline || !shouldFetchRoute) {
             return;
         }
 
         Transaction.getRoute(transactionID, waypoints);
-    }, [shouldFetchRoute, transactionID, waypoints]);
+    }, [shouldFetchRoute, transactionID, waypoints, isOffline]);
 
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 

src/libs/actions/Transaction.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import lodashHas from 'lodash/has';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as CollectionUtils from '../CollectionUtils';
 import * as API from '../API';
@@ -93,6 +94,14 @@ function saveWaypoint(transactionID, index, waypoint) {
             },
         },
     });
+
+    // You can save offline waypoints without verifying the address (we will geocode it on the backend)
+    // We're going to prevent saving those addresses in the recent waypoints though since they could be invalid addresses
+    // However, in the backend once we verify the address, we will save the waypoint in the recent waypoints NVP
+    if (!lodashHas(waypoint, 'lat') || !lodashHas(waypoint, 'lng')) {
+        return;
+    }
+
     const recentWaypointAlreadyExists = _.find(recentWaypoints, (recentWaypoint) => recentWaypoint.address === waypoint.address);
     if (!recentWaypointAlreadyExists) {
         const clonedWaypoints = _.clone(recentWaypoints);

src/pages/iou/WaypointEditor.js

@@ -126,6 +126,8 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         // Therefore, we're going to save the waypoint as just the address, and the lat/long will be filled in on the backend
         if (isOffline && waypointValue) {
             const waypoint = {
+                lat: null,
+                lng: null,
                 address: waypointValue,
             };