Add Waypoint Editor

src/ONYXKEYS.js

@@ -225,6 +225,8 @@ export default {
         MONEY_REQUEST_CREATED_FORM: 'moneyRequestCreatedForm',
         NEW_CONTACT_METHOD_FORM: 'newContactMethodForm',
         PAYPAL_FORM: 'payPalForm',
+        WAYPOINT_FORM: 'waypointForm',
+        WAYPOINT_FORM_DRAFT: 'waypointFormDraft',
         SETTINGS_STATUS_SET_FORM: 'settingsStatusSetForm',
         SETTINGS_STATUS_CLEAR_AFTER_FORM: 'settingsStatusClearAfterForm',
         SETTINGS_STATUS_SET_CLEAR_AFTER_FORM: 'settingsStatusSetClearAfterForm',

src/ROUTES.js

@@ -95,6 +95,7 @@ export default {
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
     MONEY_REQUEST_DISTANCE_TAB: ':iouType/new/:reportID?/distance',
+    MONEY_REQUEST_WAYPOINT: ':iouType/new/waypoint/:waypointIndex',
     IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
     IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,
     IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`,
@@ -104,6 +105,8 @@ export default {
     getMoneyRequestConfirmationRoute: (iouType, reportID = '') => `${iouType}/new/confirmation/${reportID}`,
     getMoneyRequestCurrencyRoute: (iouType, reportID = '', currency, backTo) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}`,
     getMoneyRequestDescriptionRoute: (iouType, reportID = '') => `${iouType}/new/description/${reportID}`,
+    getMoneyRequestDistanceTabRoute: (iouType, reportID = '') => `${iouType}/new/${reportID}/distance`,
+    getMoneyRequestWaypointRoute: (iouType, waypointIndex) => `${iouType}/new/waypoint/${waypointIndex}`,
     SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`,
     getSplitBillDetailsRoute: (reportID, reportActionID) => `r/${reportID}/split/${reportActionID}`,
     getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`,

src/components/AddressSearch/index.js

@@ -1,9 +1,10 @@
 import _ from 'underscore';
 import React, {useMemo, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import {LogBox, ScrollView, View} from 'react-native';
+import {LogBox, ScrollView, View, Text} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import lodashGet from 'lodash/get';
+import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
@@ -14,6 +15,8 @@ import CONST from '../../CONST';
 import * as StyleUtils from '../../styles/StyleUtils';
 import resetDisplayListViewBorderOnBlur from './resetDisplayListViewBorderOnBlur';
 import variables from '../../styles/variables';
+import {withNetwork} from '../OnyxProvider';
+import networkPropTypes from '../networkPropTypes';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -48,6 +51,9 @@ const propTypes = {
     /** A callback function when the value of this field has changed */
     onInputChange: PropTypes.func.isRequired,
 
+    /** A callback function when an address has been auto-selected */
+    onPress: PropTypes.func,
+
     /** Customize the TextInput container */
     // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
@@ -58,21 +64,28 @@ const propTypes = {
     /** A map of inputID key names */
     renamedInputKeys: PropTypes.shape({
         street: PropTypes.string,
+        street2: PropTypes.string,
         city: PropTypes.string,
         state: PropTypes.string,
+        lat: PropTypes.string,
+        lng: PropTypes.string,
         zipCode: PropTypes.string,
     }),
 
     /** Maximum number of characters allowed in search input */
     maxInputLength: PropTypes.number,
 
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     inputID: undefined,
     shouldSaveDraft: false,
     onBlur: () => {},
+    onPress: () => {},
     errorText: '',
     hint: '',
     value: undefined,
@@ -81,9 +94,12 @@ const defaultProps = {
     isLimitedToUSA: true,
     renamedInputKeys: {
         street: 'addressStreet',
+        street2: 'addressStreet2',
         city: 'addressCity',
         state: 'addressState',
         zipCode: 'addressZipCode',
+        lat: 'addressLat',
+        lng: 'addressLng',
     },
     maxInputLength: undefined,
 };
@@ -166,6 +182,9 @@ function AddressSearch(props) {
             zipCode,
             country: '',
             state: state || stateAutoCompleteFallback,
+            lat: lodashGet(details, 'geometry.location.lat', 0),
+            lng: lodashGet(details, 'geometry.location.lng', 0),
+            address: lodashGet(details, 'formatted_address', ''),
         };
 
         // If the address is not in the US, use the full length state name since we're displaying the address's
@@ -194,11 +213,16 @@ function AddressSearch(props) {
         if (props.inputID) {
             _.each(values, (value, key) => {
                 const inputKey = lodashGet(props.renamedInputKeys, key, key);
+                if (!inputKey) {
+                    return;
+                }
                 props.onInputChange(value, inputKey);
             });
         } else {
             props.onInputChange(values);
         }
+
+        props.onPress(values);
     };
 
     return (
@@ -226,6 +250,11 @@ function AddressSearch(props) {
                     fetchDetails
                     suppressDefaultStyles
                     enablePoweredByContainer={false}
+                    ListEmptyComponent={
+                        props.network.isOffline ? null : (
+                            <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{props.translate('common.noResultsFound')}</Text>
+                        )
+                    }
                     onPress={(data, details) => {
                         saveLocationDetails(data, details);
 
@@ -306,7 +335,10 @@ AddressSearch.propTypes = propTypes;
 AddressSearch.defaultProps = defaultProps;
 AddressSearch.displayName = 'AddressSearch';
 
-export default withLocalize(
+export default compose(
+    withNetwork(),
+    withLocalize,
+)(
     React.forwardRef((props, ref) => (
         <AddressSearch
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/DistanceRequest.js

@@ -15,6 +15,8 @@ import Button from './Button';
 import styles from '../styles/styles';
 import variables from '../styles/variables';
 import LinearGradient from './LinearGradient';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
@@ -66,12 +68,12 @@ function DistanceRequest({transactionID, transaction, translate}) {
     const scrollContainerMaxHeight = variables.baseMenuItemHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
 
     useEffect(() => {
-        if (!transaction.transactionID || !_.isEmpty(waypoints)) {
+        if (!transactionID || !_.isEmpty(waypoints)) {
             return;
         }
         // Create the initial start and stop waypoints
-        Transaction.createInitialWaypoints(transaction.transactionID);
-    }, [transaction.transactionID, waypoints]);
+        Transaction.createInitialWaypoints(transactionID);
+    }, [transactionID, waypoints]);
 
     const updateGradientVisibility = (event = {}) => {
         // If a waypoint extends past the bottom of the visible area show the gradient, else hide it.
@@ -111,10 +113,13 @@ function DistanceRequest({transactionID, transaction, translate}) {
                         return (
                             <MenuItemWithTopDescription
                                 description={translate(descriptionKey)}
+                                title={lodashGet(waypoints, [`waypoint${index}`, 'address'], '')}
                                 icon={Expensicons.DragHandles}
+                                iconFill={theme.icon}
                                 secondaryIcon={waypointIcon}
                                 secondaryIconFill={theme.icon}
                                 shouldShowRightIcon
+                                onPress={() => Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', index))}
                                 key={key}
                             />
                         );
@@ -131,7 +136,7 @@ function DistanceRequest({transactionID, transaction, translate}) {
                 <Button
                     small
                     icon={Expensicons.Plus}
-                    onPress={() => Transaction.addStop(transactionID, lastWaypointIndex + 1)}
+                    onPress={() => Transaction.addStop(transactionID)}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
                     innerStyles={[styles.ph10]}

src/components/Form.js

@@ -62,6 +62,12 @@ const propTypes = {
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
 
+    /** Whether the validate() method should run on input changes */
+    shouldValidateOnChange: PropTypes.bool,
+
+    /** Whether the validate() method should run on blur */
+    shouldValidateOnBlur: PropTypes.bool,
+
     /** Whether ScrollWithContext should be used instead of regular ScrollView.
      *  Set to true when there's a nested Picker component in Form.
      */
@@ -89,6 +95,8 @@ const defaultProps = {
     enabledWhenOffline: false,
     isSubmitActionDangerous: false,
     scrollContextEnabled: false,
+    shouldValidateOnChange: true,
+    shouldValidateOnBlur: true,
     footerContent: null,
     style: [],
     validate: () => ({}),
@@ -306,7 +314,9 @@ function Form(props) {
                             // web and mobile web platforms.
                             setTimeout(() => {
                                 setTouchedInput(inputID);
-                                onValidate(inputValues);
+                                if (props.shouldValidateOnBlur) {
+                                    onValidate(inputValues);
+                                }
                             }, 200);
                         }
 
@@ -324,7 +334,10 @@ function Form(props) {
                                 ...prevState,
                                 [inputKey]: value,
                             };
-                            onValidate(newState);
+
+                            if (props.shouldValidateOnChange) {
+                                onValidate(newState);
+                            }
                             return newState;
                         });
 
@@ -341,7 +354,7 @@ function Form(props) {
 
             return childrenElements;
         },
-        [errors, inputRefs, inputValues, onValidate, props.draftValues, props.formID, props.formState, setTouchedInput],
+        [errors, inputRefs, inputValues, onValidate, props.draftValues, props.formID, props.formState, setTouchedInput, props.shouldValidateOnBlur, props.shouldValidateOnChange],
     );
 
     const scrollViewContent = useCallback(

src/languages/en.js

@@ -1580,11 +1580,16 @@ export default {
     },
     distance: {
         addStop: 'Add stop',
+        address: 'Address',
+        waypointEditor: 'Waypoint Editor',
         waypointDescription: {
             start: 'Start',
             finish: 'Finish',
             stop: 'Stop',
         },
+        errors: {
+            selectSuggestedAddress: 'Please select a suggested address',
+        },
     },
     countrySelectorModal: {
         placeholderText: 'Search to see options',

src/languages/es.js

@@ -2052,11 +2052,16 @@ export default {
     },
     distance: {
         addStop: 'Agregar parada',
+        address: 'Dirección',
+        waypointEditor: 'Editor de puntos de ruta',
         waypointDescription: {
             start: 'Comienzo',
             finish: 'Final',
             stop: 'Parada',
         },
+        errors: {
+            selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida',
+        },
     },
     countrySelectorModal: {
         placeholderText: 'Buscar para ver opciones',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -97,6 +97,13 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
         },
         name: 'IOU_Send_Enable_Payments',
     },
+    {
+        getComponent: () => {
+            const WaypointEditorPage = require('../../../pages/iou/WaypointEditorPage').default;
+            return WaypointEditorPage;
+        },
+        name: 'Money_Request_Waypoint',
+    },
 ]);
 
 const SplitDetailsModalStackNavigator = createModalStackNavigator([

src/libs/Navigation/linkingConfig.js

@@ -321,6 +321,7 @@ export default {
                             Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION,
                             Money_Request_Currency: ROUTES.MONEY_REQUEST_CURRENCY,
                             Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION,
+                            Money_Request_Waypoint: ROUTES.MONEY_REQUEST_WAYPOINT,
                             IOU_Send_Enable_Payments: ROUTES.IOU_SEND_ENABLE_PAYMENTS,
                             IOU_Send_Add_Bank_Account: ROUTES.IOU_SEND_ADD_BANK_ACCOUNT,
                             IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD,