Show recent waypoints when selecting address for distance request

src/ONYXKEYS.ts

@@ -106,6 +106,9 @@ const ONYXKEYS = {
     /** The NVP with the last payment method used per policy */
     NVP_LAST_PAYMENT_METHOD: 'nvp_lastPaymentMethod',
 
+    /** This NVP holds to most recent waypoints that a person has used when creating a distance request */
+    NVP_RECENT_WAYPOINTS: 'expensify_recentWaypoints',
+
     /** Does this user have push notifications enabled for this device? */
     PUSH_NOTIFICATIONS_ENABLED: 'pushNotificationsEnabled',
 
@@ -315,6 +318,7 @@ type OnyxValues = {
     [ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE]: OnyxTypes.BlockedFromConcierge;
     [ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID]: string;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: Record<string, string>;
+    [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoints[];
     [ONYXKEYS.PUSH_NOTIFICATIONS_ENABLED]: boolean;
     [ONYXKEYS.PLAID_DATA]: OnyxTypes.PlaidData;
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;

src/components/AddressSearch/index.js

@@ -61,6 +61,26 @@ const propTypes = {
     /** Should address search be limited to results in the USA */
     isLimitedToUSA: PropTypes.bool,
 
+    /** A list of predefined places that can be shown when the user isn't searching for something */
+    predefinedPlaces: PropTypes.arrayOf(
+        PropTypes.shape({
+            /** A description of the location (usually the address) */
+            description: PropTypes.string,
+
+            /** Data required by the google auto complete plugin to know where to put the markers on the map */
+            geometry: PropTypes.shape({
+                /** Data about the location */
+                location: PropTypes.shape({
+                    /** Lattitude of the location */
+                    lat: PropTypes.number,
+
+                    /** Longitude of the location */
+                    lng: PropTypes.number,
+                }),
+            }),
+        }),
+    ),
+
     /** A map of inputID key names */
     renamedInputKeys: PropTypes.shape({
         street: PropTypes.string,
@@ -102,6 +122,7 @@ const defaultProps = {
         lng: 'addressLng',
     },
     maxInputLength: undefined,
+    predefinedPlaces: [],
 };
 
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
@@ -122,6 +143,19 @@ function AddressSearch(props) {
     const saveLocationDetails = (autocompleteData, details) => {
         const addressComponents = details.address_components;
         if (!addressComponents) {
+            // When there are details, but no address_components, this indicates that some predefined options have been passed
+            // to this component which don't match the usual properties coming from auto-complete. In that case, only a limited
+            // amount of data massaging needs to happen for what the parent expects to get from this function.
+            if (_.size(details)) {
+                props.onPress({
+                    address: lodashGet(details, 'description', ''),
+                    lat: lodashGet(details, 'geometry.location.lat', 0),
+                    lng: lodashGet(details, 'geometry.location.lng', 0),
+                });
+
+                // After we select an option, we set displayListViewBorder to false to prevent UI flickering
+                setDisplayListViewBorder(false);
+            }
             return;
         }
 
@@ -223,6 +257,9 @@ function AddressSearch(props) {
         }
 
         props.onPress(values);
+
+        // After we select an option, we set displayListViewBorder to false to prevent UI flickering
+        setDisplayListViewBorder(false);
     };
 
     return (
@@ -250,17 +287,13 @@ function AddressSearch(props) {
                     fetchDetails
                     suppressDefaultStyles
                     enablePoweredByContainer={false}
+                    predefinedPlaces={props.predefinedPlaces}
                     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);
-
-                        // After we select an option, we set displayListViewBorder to false to prevent UI flickering
-                        setDisplayListViewBorder(false);
-                    }}
+                    onPress={saveLocationDetails}
                     query={query}
                     requestUrl={{
                         useOnPlatform: 'all',

src/pages/iou/WaypointEditor.js

@@ -53,7 +53,7 @@
     transaction: {},
 };
 
-function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, network, translate, transaction}) {
+function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, network, translate, transaction, recentWaypoints}) {
     const textInput = useRef(null);
     const currentWaypoint = lodashGet(transaction, `comment.waypoints.waypoint${waypointIndex}`, {});
     const waypointAddress = lodashGet(currentWaypoint, 'address', '');
@@ -151,6 +151,7 @@
                             lng: null,
                             state: null,
                         }}
+                        predefinedPlaces={recentWaypoints}
                     />
                 </View>
             </Form>
@@ -169,5 +170,22 @@
             key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
             selector: (transaction) => (transaction ? {transactionID: transaction.transactionID, comment: {waypoints: lodashGet(transaction, 'comment.waypoints')}} : null),
         },
+
+        recentWaypoints: {
+            key: ONYXKEYS.NVP_RECENT_WAYPOINTS,
+
+            // Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data
+            // that the google autocomplete component expects for it's "predefined places" feature.
+            selector: (waypoints) =>
+                _.map(waypoints && waypoints.length ? waypoints.slice(0, 5) : [], (waypoint) => ({
+                    description: waypoint.address,
+                    geometry: {
+                        location: {
+                            lat: waypoint.lat,
+                            lng: waypoint.lng,
+                        },
+                    },
+                })),
+        },
     }),
 )(WaypointEditor);

src/types/onyx/RecentWaypoints.ts

@@ -0,0 +1,12 @@
+type RecentWaypoints = {
+    /** The full address of the waypoint */
+    address: string;
+
+    /** The lattitude of the waypoint */
+    lat: number;
+
+    /** The longitude of the waypoint */
+    lng: number;
+};
+
+export default RecentWaypoints;

src/types/onyx/index.ts

@@ -32,7 +32,6 @@ import ReimbursementAccountDraft from './ReimbursementAccountDraft';
 import WalletTransfer from './WalletTransfer';
 import ReceiptModal from './ReceiptModal';
 import MapboxAccessToken from './MapboxAccessToken';
-
 import Download from './Download';
 import PolicyMember from './PolicyMember';
 import Policy from './Policy';
@@ -41,8 +40,8 @@ import ReportAction from './ReportAction';
 import ReportActionReactions from './ReportActionReactions';
 import SecurityGroup from './SecurityGroup';
 import Transaction from './Transaction';
-
 import Form, {AddDebitCardForm} from './Form';
+import RecentWaypoints from './RecentWaypoints';
 
 export type {
     Account,
@@ -89,4 +88,5 @@ export type {
     Transaction,
     Form,
     AddDebitCardForm,
+    RecentWaypoints,
 };