diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 3e676b811c16..035b7f43cdf5 100644
--- a/src/components/AddressSearch/index.js
+++ b/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) {
/>
}
+ 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 (
+
+ {title && {title}}
+ {subtitle}
+
+ );
+ }}
renderHeaderComponent={renderHeaderComponent}
onPress={(data, details) => {
saveLocationDetails(data, details);
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index f866de0b885e..98f50b1f682f 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -91,7 +91,8 @@ function DistanceEReceipt({transaction}) {
key={key}
>
{translate(descriptionKey)}
- {waypoint.address || ''}
+ {waypoint.name && {waypoint.name}}
+ {waypoint.address && {waypoint.address}}
);
})}
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index b0f6e0410ad5..c01a3cd77aa4 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -27,6 +27,7 @@ const propTypes = {
lat: PropTypes.number,
lng: PropTypes.number,
address: PropTypes.string,
+ name: PropTypes.string,
}),
),
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js
index 4e4eeee881c5..0e54635e82cc 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/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 (
`${transaction.reportID}` === `${reportID}`);
}
-/**
- * Checks if a waypoint has a valid address
- */
function waypointHasValidAddress(waypoint: RecentWaypoint | Waypoint): boolean {
return !!waypoint?.address?.trim();
}
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index a123976b326e..03ce3cba28bd 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/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: {
diff --git a/src/types/onyx/RecentWaypoint.ts b/src/types/onyx/RecentWaypoint.ts
index 79aded8ede98..097aed3be916 100644
--- a/src/types/onyx/RecentWaypoint.ts
+++ b/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;
diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts
index 21be3c49497e..d0f17cc2cf01 100644
--- a/src/types/onyx/Transaction.ts
+++ b/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;