diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 536e144f0900..5e7d60b7c295 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect, useRef} from 'react'; import PropTypes from 'prop-types'; import {LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; @@ -33,87 +33,79 @@ const defaultProps = { containerStyles: null, }; -class AddressSearch extends React.Component { - constructor(props) { - super(props); - this.googlePlacesRef = React.createRef(); - } +const AddressSearch = (props) => { + const googlePlacesRef = useRef(); + useEffect(() => { + googlePlacesRef.current?.setAddressText(props.value); + }, []); - componentDidMount() { - this.googlePlacesRef.current?.setAddressText(this.props.value); - } - - getAddressComponent(object, field, nameType) { + // eslint-disable-next-line + const getAddressComponent = (object, field, nameType) => { return _.chain(object.address_components) .find(component => _.contains(component.types, field)) .get(nameType) .value(); - } + }; - /** - * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses - */ - saveLocationDetails = (details) => { + const saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = this.getAddressComponent(details, 'street_number', 'long_name'); - const streetName = this.getAddressComponent(details, 'route', 'long_name'); - const city = this.getAddressComponent(details, 'locality', 'long_name'); - const state = this.getAddressComponent(details, 'administrative_area_level_1', 'short_name'); - const zipCode = this.getAddressComponent(details, 'postal_code', 'long_name'); + const streetNumber = getAddressComponent(details, 'street_number', 'long_name'); + const streetName = getAddressComponent(details, 'route', 'long_name'); + const city = getAddressComponent(details, 'locality', 'long_name'); + const state = getAddressComponent(details, 'administrative_area_level_1', 'short_name'); + const zipCode = getAddressComponent(details, 'postal_code', 'long_name'); // Trigger text change events for each of the individual fields being saved on the server - this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); - this.props.onChangeText('addressCity', city); - this.props.onChangeText('addressState', state); - this.props.onChangeText('addressZipCode', zipCode); + props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); + props.onChangeText('addressCity', city); + props.onChangeText('addressState', state); + props.onChangeText('addressZipCode', zipCode); } - } + }; - render() { - return ( - this.saveLocationDetails(details)} - query={{ - key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', - language: this.props.preferredLocale, - }} - requestUrl={{ - useOnPlatform: 'web', - url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, - }} - textInputProps={{ - InputComp: ExpensiTextInput, - label: this.props.label, - containerStyles: this.props.containerStyles, - }} - styles={{ - textInputContainer: [styles.flexColumn], - listView: [ - styles.borderTopRounded, - styles.borderBottomRounded, - styles.mt1, - styles.overflowAuto, - styles.borderLeft, - styles.borderRight, - ], - row: [ - styles.pv4, - styles.ph3, - styles.overflowAuto, - ], - description: [styles.googleSearchText], - separator: [styles.googleSearchSeparator], - }} - /> - ); - } -} + return ( + saveLocationDetails(details)} + query={{ + key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', + language: props.preferredLocale, + }} + requestUrl={{ + useOnPlatform: 'web', + url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, + }} + textInputProps={{ + InputComp: ExpensiTextInput, + label: props.label, + containerStyles: props.containerStyles, + errorText: props.errorText, + }} + styles={{ + textInputContainer: [styles.flexColumn], + listView: [ + styles.borderTopRounded, + styles.borderBottomRounded, + styles.mt1, + styles.overflowAuto, + styles.borderLeft, + styles.borderRight, + ], + row: [ + styles.pv4, + styles.ph3, + styles.overflowAuto, + ], + description: [styles.googleSearchText], + separator: [styles.googleSearchSeparator], + }} + /> + ); +}; AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; diff --git a/src/languages/en.js b/src/languages/en.js index f2246732fba2..21f27745834f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -428,7 +428,7 @@ export default { phoneNumber: 'Please enter a valid phone number', companyName: 'Please enter a valid legal business name', addressCity: 'Please enter a valid city', - addressStreet: 'Please enter a valid address street that is not a PO Box', + addressStreet: 'Please enter a valid street address that is not a PO Box', addressState: 'Please select a valid state', incorporationDate: 'Please enter a valid date', incorporationState: 'Please enter a valid state', diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 4a1ea2e6f006..16b8a174a6c1 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -70,6 +70,10 @@ class CompanyStep extends React.Component { // These fields need to be filled out in order to submit the form this.requiredFields = [ 'companyName', + 'addressStreet', + 'addressCity', + 'addressState', + 'addressZipCode', 'website', 'companyTaxID', 'incorporationDate', @@ -82,6 +86,10 @@ class CompanyStep extends React.Component { // Map a field to the key of the error's translation this.errorTranslationKeys = { companyName: 'bankAccount.error.companyName', + addressStreet: 'bankAccount.error.addressStreet', + addressCity: 'bankAccount.error.addressCity', + addressState: 'bankAccount.error.addressState', + addressZipCode: 'bankAccount.error.zipCode', companyPhone: 'bankAccount.error.phoneNumber', website: 'bankAccount.error.website', companyTaxID: 'bankAccount.error.taxID', @@ -95,6 +103,23 @@ class CompanyStep extends React.Component { this.getErrors = () => ReimbursementAccountUtils.getErrors(this.props); } + getFormattedAddressValue() { + let addressString = ''; + if (this.state.addressStreet) { + addressString += `${this.state.addressStreet}, `; + } + if (this.state.addressCity) { + addressString += `${this.state.addressCity}, `; + } + if (this.state.addressState) { + addressString += `${this.state.addressState}, `; + } + if (this.state.addressZipCode) { + addressString += `${this.state.addressZipCode}`; + } + return addressString; + } + /** * @param {String} value */ @@ -183,8 +208,9 @@ class CompanyStep extends React.Component { this.clearErrorAndSetValue(fieldName, value)} + errorText={this.getErrorText('addressStreet')} />