Added 'name' field to waypoint

src/components/AddressSearch/index.js

@@ -74,6 +74,9 @@ const propTypes = {
             /** A description of the location (usually the address) */
             description: PropTypes.string,
 
+            /** The name of the location */
+            name: 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 */
@@ -167,9 +170,10 @@ function AddressSearch(props) {
             // 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', ''),
+                    address: lodashGet(details, 'description'),
                     lat: lodashGet(details, 'geometry.location.lat', 0),
                     lng: lodashGet(details, 'geometry.location.lng', 0),
+                    name: lodashGet(details, 'name'),
                 });
             }
             return;
@@ -220,7 +224,7 @@ function AddressSearch(props) {
 
         const values = {
             street: `${streetNumber} ${streetName}`.trim(),
-
+            name: lodashGet(details, 'name', ''),
             // Autocomplete returns any additional valid address fragments (e.g. Apt #) as subpremise.
             street2: subpremise,
             // Make sure country is updated first, since city and state will be reset if the country changes
@@ -382,6 +386,16 @@ function AddressSearch(props) {
                                 />
                             </View>
                         }
+                        renderRow={(data) => {
+                            const title = data.isPredefinedPlace ? data.name : data.structured_formatting.main_text;
+                            const subtitle = data.isPredefinedPlace ? data.description : data.structured_formatting.secondary_text;
+                            return (
+                                <View>
+                                    {title && <Text style={[styles.googleSearchText]}>{title}</Text>}
+                                    <Text style={[styles.textLabelSupporting]}>{subtitle}</Text>
+                                </View>
+                            );
+                        }}
                         renderHeaderComponent={renderHeaderComponent}
                         onPress={(data, details) => {
                             saveLocationDetails(data, details);

src/components/DistanceEReceipt.js

@@ -91,7 +91,8 @@ function DistanceEReceipt({transaction}) {
                                     key={key}
                                 >
                                     <Text style={styles.eReceiptWaypointTitle}>{translate(descriptionKey)}</Text>
-                                    <Text style={styles.eReceiptWaypointAddress}>{waypoint.address || ''}</Text>
+                                    {waypoint.name && <Text style={styles.eReceiptWaypointAddress}>{waypoint.name}</Text>}
+                                    {waypoint.address && <Text style={styles.textLabelSupporting}>{waypoint.address}</Text>}
                                 </View>
                             );
                         })}

src/components/DistanceRequest/DistanceRequestFooter.js

@@ -27,6 +27,7 @@ const propTypes = {
             lat: PropTypes.number,
             lng: PropTypes.number,
             address: PropTypes.string,
+            name: PropTypes.string,
         }),
     ),
 

src/components/DistanceRequest/DistanceRequestRenderItem.js

@@ -14,6 +14,7 @@ const propTypes = {
             lat: PropTypes.number,
             lng: PropTypes.number,
             address: PropTypes.string,
+            name: PropTypes.string,
         }),
     ),
 
@@ -65,10 +66,13 @@ function DistanceRequestRenderItem({waypoints, item, onSecondaryInteraction, get
         waypointIcon = Expensicons.DotIndicator;
     }
 
+    const waypoint = lodashGet(waypoints, [`waypoint${index}`], {});
+    const title = waypoint.name || waypoint.address;
+
     return (
         <MenuItemWithTopDescription
             description={translate(descriptionKey)}
-            title={lodashGet(waypoints, [`waypoint${index}`, 'address'], '')}
+            title={title}
             icon={Expensicons.DragHandles}
             iconFill={theme.icon}
             secondaryIcon={waypointIcon}

src/components/transactionPropTypes.js

@@ -45,6 +45,9 @@ export default PropTypes.shape({
 
             /** The address of the waypoint */
             address: PropTypes.string,
+
+            /** The name of the waypoint */
+            name: PropTypes.string,
         }),
     }),
 

src/libs/TransactionUtils.ts

@@ -396,9 +396,6 @@ function getAllReportTransactions(reportID?: string): Transaction[] {
     return transactions.filter((transaction) => `${transaction.reportID}` === `${reportID}`);
 }
 
-/**
- * Checks if a waypoint has a valid address
- */
 function waypointHasValidAddress(waypoint: RecentWaypoint | Waypoint): boolean {
     return !!waypoint?.address?.trim();
 }

src/pages/iou/WaypointEditor.js

@@ -45,6 +45,9 @@ const propTypes = {
 
     recentWaypoints: PropTypes.arrayOf(
         PropTypes.shape({
+            /** The name of the location */
+            name: PropTypes.string,
+
             /** A description of the location (usually the address) */
             description: PropTypes.string,
 
@@ -163,6 +166,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
             lat: values.lat,
             lng: values.lng,
             address: values.address,
+            name: values.name,
         };
         Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);
 
@@ -264,6 +268,7 @@ export default withOnyx({
         // that the google autocomplete component expects for it's "predefined places" feature.
         selector: (waypoints) =>
             _.map(waypoints ? waypoints.slice(0, 5) : [], (waypoint) => ({
+                name: waypoint.name,
                 description: waypoint.address,
                 geometry: {
                     location: {

src/types/onyx/RecentWaypoint.ts

@@ -1,4 +1,7 @@
 type RecentWaypoint = {
+    /** The name associated with the address of the waypoint */
+    name?: string;
+
     /** The full address of the waypoint */
     address: string;
 

src/types/onyx/Transaction.ts

@@ -4,6 +4,9 @@ import CONST from '../../CONST';
 import RecentWaypoint from './RecentWaypoint';
 
 type Waypoint = {
+    /** The name associated with the address of the waypoint */
+    name?: string;
+
     /** The full address of the waypoint */
     address?: string;