diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js index e33a5205da51..55e339b63382 100644 --- a/src/components/DistanceRequest.js +++ b/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]); diff --git a/src/libs/actions/Transaction.js b/src/libs/actions/Transaction.js index 1dad0219db1a..b16e8c8753ac 100644 --- a/src/libs/actions/Transaction.js +++ b/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); diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index c043c5d8db30..ef2ebbeac6a1 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -128,6 +128,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, };