diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 683d3556dec4..0a4ca751140e 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -95,7 +95,7 @@ const AddressSearch = (props) => { query.components = 'country:us'; } - const saveLocationDetails = (details) => { + const saveLocationDetails = (autocompleteData, details) => { const addressComponents = details.address_components; if (!addressComponents) { return; @@ -132,6 +132,11 @@ const AddressSearch = (props) => { // Make sure that the order of keys remains such that the country is always set above the state. // Refer to https://github.com/Expensify/App/issues/15633 for more information. + const { + state: stateAutoCompleteFallback = '', + city: cityAutocompleteFallback = '', + } = GooglePlacesUtils.getPlaceAutocompleteTerms(autocompleteData.terms); + const values = { street: props.value ? props.value.trim() : '', @@ -139,10 +144,10 @@ const AddressSearch = (props) => { // Square, London), otherwise as sublocality (e.g. 384 Court Street Brooklyn). If postalTown is // returned, the sublocality will be a city subdivision so shouldn't take precedence (e.g. // Salagatan, Upssala, Sweden). - city: locality || postalTown || sublocality, + city: locality || postalTown || sublocality || cityAutocompleteFallback, zipCode, country: '', - state, + state: state || stateAutoCompleteFallback, }; // If the address is not in the US, use the full length state name since we're displaying the address's @@ -200,7 +205,7 @@ const AddressSearch = (props) => { suppressDefaultStyles enablePoweredByContainer={false} onPress={(data, details) => { - saveLocationDetails(details); + saveLocationDetails(data, details); // After we select an option, we set displayListViewBorder to false to prevent UI flickering setDisplayListViewBorder(false); diff --git a/src/libs/GooglePlacesUtils.js b/src/libs/GooglePlacesUtils.js index 36b776e05a52..8723598264fb 100644 --- a/src/libs/GooglePlacesUtils.js +++ b/src/libs/GooglePlacesUtils.js @@ -27,7 +27,25 @@ function getAddressComponents(addressComponents, fieldsToExtract) { return result; } +/** + * Finds an address term by type, and returns the value associated to key. Note that each term in the address must + * conform to the following ORDER: + * + * @param {Array} addressTerms + * @returns {Object} + */ +function getPlaceAutocompleteTerms(addressTerms) { + const fieldsToExtract = ['country', 'state', 'city', 'street']; + const result = {}; + _.each(fieldsToExtract, (fieldToExtract, index) => { + const fieldTermIndex = addressTerms.length - (index + 1); + result[fieldToExtract] = fieldTermIndex >= 0 ? addressTerms[fieldTermIndex].value : ''; + }); + return result; +} + export { // eslint-disable-next-line import/prefer-default-export getAddressComponents, + getPlaceAutocompleteTerms, };