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;