From 0a67fed605ce1df77c237297be8d60c7776a44df Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 10:30:21 -0600 Subject: [PATCH 01/38] Add google search lib to code --- .env.example | 1 + .env.production | 1 + .env.staging | 1 + package-lock.json | 20 ++++++++++++++++++-- package.json | 1 + src/CONFIG.js | 1 + 6 files changed, 23 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index 127b7147230..3b8599b94e0 100644 --- a/.env.example +++ b/.env.example @@ -11,3 +11,4 @@ USE_WEB_PROXY=false USE_WDYR=false CAPTURE_METRICS=false ONYX_METRICS=false +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.production b/.env.production index 85c73146dd1..762a420ec17 100644 --- a/.env.production +++ b/.env.production @@ -6,3 +6,4 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=PROD +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.staging b/.env.staging index a7fa6321d89..0dc03f090b0 100644 --- a/.env.staging +++ b/.env.staging @@ -6,3 +6,4 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=STG +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/package-lock.json b/package-lock.json index 69fc6280504..fadb48a47e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32512,8 +32512,7 @@ "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", - "dev": true + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, "lodash.isequal": { "version": "4.5.0", @@ -38525,6 +38524,23 @@ } } }, + "react-native-google-places-autocomplete": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.4.1.tgz", + "integrity": "sha512-NJrzZ5zsguhTqe0C5tIW9PfxOn2wkWDiGYIBFksHzFOIIURxFPUlO0cJmfOjs5CBIDtMampgNXBdgADExBen5w==", + "requires": { + "lodash.debounce": "^4.0.8", + "prop-types": "^15.7.2", + "qs": "~6.9.1" + }, + "dependencies": { + "qs": { + "version": "6.9.6", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", + "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==" + } + } + }, "react-native-image-pan-zoom": { "version": "2.1.12", "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz", diff --git a/package.json b/package.json index 22b16274501..850d4f4a89f 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "react-native-config": "^1.4.0", "react-native-document-picker": "^5.1.0", "react-native-gesture-handler": "1.9.0", + "react-native-google-places-autocomplete": "^2.4.1", "react-native-image-pan-zoom": "^2.1.12", "react-native-image-picker": "^4.0.3", "react-native-keyboard-spacer": "^0.4.1", diff --git a/src/CONFIG.js b/src/CONFIG.js index fcad4bf5519..e164d0f6488 100644 --- a/src/CONFIG.js +++ b/src/CONFIG.js @@ -61,4 +61,5 @@ export default { }, CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', 'false') === 'true', ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', 'false') === 'true', + GOOGLE_PLACES_API_KEY: lodashGet(Config, 'GOOGLE_PLACES_API_KEY', ''), }; From 11bfd928bf888cd77f4f2c66eb32cfdebf31b641 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 10:30:35 -0600 Subject: [PATCH 02/38] Add skeleton component for address search --- src/components/AddressSearch.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/AddressSearch.js diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js new file mode 100644 index 00000000000..dd68072a9b9 --- /dev/null +++ b/src/components/AddressSearch.js @@ -0,0 +1,20 @@ +import React from 'react'; +import {Text} from 'react-native'; + +const propTypes = {}; +const defaultProps = {}; + +class AddressSearch extends React.Component { + constructor(props) { + super(props); + } + + render() { + return (Address Search); + } +}; + +AddressSearch.propTypes = propTypes; +AddressSearch.defaultProps = defaultProps; + +export default AddressSearch; From 57b0d97b5a399764e9f50600f6c7350f497182c3 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 12:20:51 -0600 Subject: [PATCH 03/38] Add test component to the page --- config/webpack/webpack.common.js | 1 + src/components/AddressSearch.js | 16 +++++++++++++++- src/pages/ReimbursementAccount/CompanyStep.js | 2 ++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js index 97f9eb94826..45a2e6b73be 100644 --- a/config/webpack/webpack.common.js +++ b/config/webpack/webpack.common.js @@ -21,6 +21,7 @@ const includeModules = [ 'react-native-onyx', 'react-native-gesture-handler', 'react-native-flipper', + 'react-native-google-places-autocomplete', ].join('|'); const webpackConfig = { diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index dd68072a9b9..8f18098b07c 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,7 @@ import React from 'react'; import {Text} from 'react-native'; +import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; +import CONFIG from '../CONFIG'; const propTypes = {}; const defaultProps = {}; @@ -10,7 +12,19 @@ class AddressSearch extends React.Component { } render() { - return (Address Search); + return ( + { + // 'details' is provided when fetchDetails = true + console.log(data, details); + }} + query={{ + key: CONFIG.GOOGLE_PLACES_API_KEY, + language: 'en', + }} + /> + ); } }; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2a9fa4b9c62..48aff5ba199 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -32,6 +32,7 @@ import ExpensiPicker from '../../components/ExpensiPicker'; import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils'; import reimbursementAccountPropTypes from './reimbursementAccountPropTypes'; import ReimbursementAccountForm from './ReimbursementAccountForm'; +import AddressSearch from '../../components/AddressSearch'; const propTypes = { /** Bank account currently in setup */ @@ -192,6 +193,7 @@ class CompanyStep extends React.Component { disabled={shouldDisableCompanyName} errorText={this.getErrorText('companyName')} /> + Date: Thu, 30 Sep 2021 15:27:41 -0600 Subject: [PATCH 04/38] Remove API key from config --- .env.example | 1 - .env.production | 1 - .env.staging | 1 - src/CONFIG.js | 1 - 4 files changed, 4 deletions(-) diff --git a/.env.example b/.env.example index 3b8599b94e0..127b7147230 100644 --- a/.env.example +++ b/.env.example @@ -11,4 +11,3 @@ USE_WEB_PROXY=false USE_WDYR=false CAPTURE_METRICS=false ONYX_METRICS=false -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.production b/.env.production index 762a420ec17..85c73146dd1 100644 --- a/.env.production +++ b/.env.production @@ -6,4 +6,3 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=PROD -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.staging b/.env.staging index 0dc03f090b0..a7fa6321d89 100644 --- a/.env.staging +++ b/.env.staging @@ -6,4 +6,3 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=STG -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/src/CONFIG.js b/src/CONFIG.js index e164d0f6488..fcad4bf5519 100644 --- a/src/CONFIG.js +++ b/src/CONFIG.js @@ -61,5 +61,4 @@ export default { }, CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', 'false') === 'true', ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', 'false') === 'true', - GOOGLE_PLACES_API_KEY: lodashGet(Config, 'GOOGLE_PLACES_API_KEY', ''), }; From 8cf96d7a05e1e411c0b06a968b9acbb83e560094 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 15:28:03 -0600 Subject: [PATCH 05/38] Make proxy request for search --- src/components/AddressSearch.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 8f18098b07c..5e2c1f337bc 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -20,9 +20,13 @@ class AddressSearch extends React.Component { console.log(data, details); }} query={{ - key: CONFIG.GOOGLE_PLACES_API_KEY, + key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', language: 'en', }} + requestUrl={{ + useOnPlatform: 'web', + url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, + }} /> ); } From f19193d861d0afd67708f9aba232ab37766927b8 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 16:10:44 -0600 Subject: [PATCH 06/38] Collect all place information when selecting an option --- src/components/AddressSearch.js | 51 ++++++++++++++++++++++++++------- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 5e2c1f337bc..c3ac9dc22f9 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,27 +1,58 @@ +import _ from 'underscore'; import React from 'react'; -import {Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; -const propTypes = {}; +const propTypes = { + ...withLocalizePropTypes, +}; const defaultProps = {}; class AddressSearch extends React.Component { constructor(props) { super(props); + + this.saveLocationDetails = this.saveLocationDetails.bind(this); + } + + saveLocationDetails(details) { + console.log(details); + if (details.address_components) { + const streetNumber = _.chain(details.address_components) + .find(component => _.contains(component.types, 'street_number')) + .get('long_name') + .value(); + const streetName = _.chain(details.address_components) + .find(component => _.contains(component.types, 'route')) + .get('long_name') + .value(); + const city = _.chain(details.address_components) + .find(component => _.contains(component.types, 'locality')) + .get('long_name') + .value(); + const state = _.chain(details.address_components) + .find(component => _.contains(component.types, 'administrative_area_level_1')) + .get('long_name') + .value(); + const zipCode = _.chain(details.address_components) + .find(component => _.contains(component.types, 'postal_code')) + .get('long_name') + .value(); + console.log(streetNumber, streetName, city, state, zipCode); + } } render() { return ( { - // 'details' is provided when fetchDetails = true - console.log(data, details); - }} + placeholder="Search" + fetchDetails + currentLocation + onPress={(data, details) => this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', - language: 'en', + language: this.props.preferredLocale, }} requestUrl={{ useOnPlatform: 'web', @@ -30,9 +61,9 @@ class AddressSearch extends React.Component { /> ); } -}; +} AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; -export default AddressSearch; +export default withLocalize(AddressSearch); From fcbe85bb67125d96406d9c41251efa14153fd5ce Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 1 Oct 2021 09:27:36 -0600 Subject: [PATCH 07/38] Use a custom input and style it --- src/components/AddressSearch.js | 19 +++++++++++++++---- src/pages/ReimbursementAccount/CompanyStep.js | 4 +++- src/styles/styles.js | 4 ++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index c3ac9dc22f9..23c0bed187e 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -3,6 +3,8 @@ import React from 'react'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import styles from '../styles/styles'; +import ExpensiTextInput from './ExpensiTextInput'; const propTypes = { ...withLocalizePropTypes, @@ -16,8 +18,10 @@ class AddressSearch extends React.Component { this.saveLocationDetails = this.saveLocationDetails.bind(this); } + /** + * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses + */ saveLocationDetails(details) { - console.log(details); if (details.address_components) { const streetNumber = _.chain(details.address_components) .find(component => _.contains(component.types, 'street_number')) @@ -39,16 +43,14 @@ class AddressSearch extends React.Component { .find(component => _.contains(component.types, 'postal_code')) .get('long_name') .value(); - console.log(streetNumber, streetName, city, state, zipCode); } } render() { return ( this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -58,6 +60,15 @@ class AddressSearch extends React.Component { useOnPlatform: 'web', url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, }} + textInputProps={{ + InputComp: ExpensiTextInput, + label: this.props.translate('common.companyAddress'), + containerStyles: [styles.mt4], + onChange: console.log, + }} + styles={{ + textInputContainer: [styles.googleSearchTextInputContainer], + }} /> ); } diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 48aff5ba199..8d9fcb86603 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -193,7 +193,9 @@ class CompanyStep extends React.Component { disabled={shouldDisableCompanyName} errorText={this.getErrorText('companyName')} /> - + Date: Fri, 1 Oct 2021 13:39:18 -0600 Subject: [PATCH 08/38] Get the custom component working --- src/components/AddressSearch.js | 37 ++++++++++++++++--- src/pages/ReimbursementAccount/CompanyStep.js | 8 +++- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 23c0bed187e..8ffa5df082a 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,15 +1,32 @@ import _ from 'underscore'; import React from 'react'; +import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; +import {TextInput} from 'react-native'; const propTypes = { + /** The label to display for the field */ + label: PropTypes.string.isRequired, + + /** The value to set the field to initially */ + value: PropTypes.string, + + /** A callback function when the value of this field has changed */ + onChangeText: PropTypes.func.isRequired, + + /** Customize the ExpensiTextInput container */ + containerStyles: PropTypes.arrayOf(PropTypes.object), + ...withLocalizePropTypes, }; -const defaultProps = {}; +const defaultProps = { + value: '', + containerStyles: null, +}; class AddressSearch extends React.Component { constructor(props) { @@ -23,6 +40,7 @@ class AddressSearch extends React.Component { */ saveLocationDetails(details) { if (details.address_components) { + // Gather the values from the Google details const streetNumber = _.chain(details.address_components) .find(component => _.contains(component.types, 'street_number')) .get('long_name') @@ -37,12 +55,18 @@ class AddressSearch extends React.Component { .value(); const state = _.chain(details.address_components) .find(component => _.contains(component.types, 'administrative_area_level_1')) - .get('long_name') + .get('short_name') .value(); const zipCode = _.chain(details.address_components) .find(component => _.contains(component.types, 'postal_code')) .get('long_name') .value(); + + // 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); } } @@ -50,7 +74,7 @@ class AddressSearch extends React.Component { return ( this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -62,9 +86,10 @@ class AddressSearch extends React.Component { }} textInputProps={{ InputComp: ExpensiTextInput, - label: this.props.translate('common.companyAddress'), - containerStyles: [styles.mt4], - onChange: console.log, + label: this.props.label, + // value: this.props.value, + containerStyles: this.props.containerStyles, + onChangeText: value => console.log(value), }} styles={{ textInputContainer: [styles.googleSearchTextInputContainer], diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 8d9fcb86603..2fded6f13cf 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -194,7 +194,13 @@ class CompanyStep extends React.Component { errorText={this.getErrorText('companyName')} /> { + this.clearErrorAndSetValue(fieldName, value); + console.log(fieldName, value); + }} /> Date: Fri, 1 Oct 2021 14:07:40 -0600 Subject: [PATCH 09/38] Set the initial value of the address --- src/components/AddressSearch.js | 80 ++++++++++++++++----------------- 1 file changed, 38 insertions(+), 42 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 8ffa5df082a..076fa0dcb54 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,12 +1,11 @@ import _ from 'underscore'; -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; -import {TextInput} from 'react-native'; const propTypes = { /** The label to display for the field */ @@ -28,17 +27,17 @@ const defaultProps = { containerStyles: null, }; -class AddressSearch extends React.Component { - constructor(props) { - super(props); - - this.saveLocationDetails = this.saveLocationDetails.bind(this); - } +const AddressSearch = (props) => { + // Using a hook is the only way to see the value of this component + const ref = useRef(); + useEffect(() => { + ref?.current?.setAddressText(props.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 = _.chain(details.address_components) @@ -63,41 +62,38 @@ class AddressSearch extends React.Component { .value(); // 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, - // value: this.props.value, - containerStyles: this.props.containerStyles, - onChangeText: value => console.log(value), - }} - styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - /> - ); - } -} + 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, + }} + styles={{ + textInputContainer: [styles.googleSearchTextInputContainer], + }} + /> + ); +}; AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; From 7fa7ab75098525a80f069eceab6affd1bc5cad7e Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 08:50:09 -0400 Subject: [PATCH 10/38] Remove unused form fields --- src/components/AddressSearch.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 55 +------------------ 2 files changed, 3 insertions(+), 54 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 076fa0dcb54..9f90ad47b7b 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, { useRef, useEffect } from 'react'; +import React, {useRef, useEffect} from 'react'; import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2fded6f13cf..a15fae56d20 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -24,7 +24,7 @@ import TextLink from '../../components/TextLink'; import StatePicker from '../../components/StatePicker'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import { - isValidAddress, isValidDate, isValidZipCode, isRequiredFulfilled, isValidURL, + isValidDate, isRequiredFulfilled, isValidURL, } from '../../libs/ValidationUtils'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; @@ -71,10 +71,6 @@ 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', @@ -87,9 +83,6 @@ class CompanyStep extends React.Component { // Map a field to the key of the error's translation this.errorTranslationKeys = { - addressStreet: 'bankAccount.error.addressStreet', - addressCity: 'bankAccount.error.addressCity', - addressZipCode: 'bankAccount.error.zipCode', companyName: 'bankAccount.error.companyName', companyPhone: 'bankAccount.error.phoneNumber', website: 'bankAccount.error.website', @@ -129,13 +122,6 @@ class CompanyStep extends React.Component { */ validate() { const errors = {}; - if (!isValidAddress(this.state.addressStreet)) { - errors.addressStreet = true; - } - - if (!isValidZipCode(this.state.addressZipCode)) { - errors.addressZipCode = true; - } if (!isValidURL(this.state.website)) { errors.website = true; @@ -197,44 +183,7 @@ class CompanyStep extends React.Component { label={this.props.translate('common.companyAddress')} containerStyles={[styles.mt4]} value={`${this.state.addressStreet} ${this.state.addressCity} ${this.state.addressState} ${this.state.addressZipCode}`} - onChangeText={(fieldName, value) => { - this.clearErrorAndSetValue(fieldName, value); - console.log(fieldName, value); - }} - /> - this.clearErrorAndSetValue('addressStreet', value)} - value={this.state.addressStreet} - errorText={this.getErrorText('addressStreet')} - /> - {this.props.translate('common.noPO')} - - - this.clearErrorAndSetValue('addressCity', value)} - value={this.state.addressCity} - errorText={this.getErrorText('addressCity')} - translateX={-14} - /> - - - this.clearErrorAndSetValue('addressState', value)} - value={this.state.addressState} - hasError={this.getErrors().addressState} - /> - - - this.clearErrorAndSetValue('addressZipCode', value)} - value={this.state.addressZipCode} - errorText={this.getErrorText('addressZipCode')} + onChangeText={(fieldName, value) => this.clearErrorAndSetValue(fieldName, value)} /> Date: Mon, 4 Oct 2021 11:18:57 -0400 Subject: [PATCH 11/38] Style the results container --- src/components/AddressSearch.js | 23 +++++++++++++++++++++++ src/styles/styles.js | 24 ++++++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9f90ad47b7b..df8fd5c51a3 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {useRef, useEffect} from 'react'; import PropTypes from 'prop-types'; +import {View, Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -74,6 +75,8 @@ const AddressSearch = (props) => { ref={ref} fetchDetails keepResultsAfterBlur + suppressDefaultStyles + enablePoweredByContainer={false} onPress={(data, details) => saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -91,6 +94,26 @@ const AddressSearch = (props) => { styles={{ textInputContainer: [styles.googleSearchTextInputContainer], }} + renderRow={(data, index) => { + // This is using a custom render component in order for the styles to be properly applied to the top row. + // The styles for the top and bottom row could have instead by passed to `styles.listView` for + // , however the list is always visible, even when there are no results. + // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes + // up space in the UI and looks like a horizontal line with padding around it. + // Using this custom render, the rounded borders and padding can be applied to the first row + // so that they are only visible when there are results. + const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; + + if (index === 0) { + rowStyles.push(styles.borderTop); + rowStyles.push(styles.mt2); + } + return ( + + {data.description} + + ); + }} /> ); }; diff --git a/src/styles/styles.js b/src/styles/styles.js index 6df6fd550b8..c42850bbf2c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1380,6 +1380,25 @@ const styles = { flex: 1, }, + borderTop: { + borderTopWidth: 1, + borderColor: themeColors.border, + }, + + borderTopRounded: { + borderTopWidth: 1, + borderColor: themeColors.border, + borderTopLeftRadius: variables.componentBorderRadiusNormal, + borderTopRightRadius: variables.componentBorderRadiusNormal, + }, + + borderBottomRounded: { + borderBottomWidth: 1, + borderColor: themeColors.border, + borderBottomLeftRadius: variables.componentBorderRadiusNormal, + borderBottomRightRadius: variables.componentBorderRadiusNormal, + }, + borderBottom: { borderBottomWidth: 1, borderColor: themeColors.border, @@ -1390,6 +1409,11 @@ const styles = { borderColor: themeColors.border, }, + borderLeft: { + borderLeftWidth: 1, + borderColor: themeColors.border, + }, + headerBar: { overflow: 'hidden', justifyContent: 'center', From e851c6581310d3f048ee432b3fe0f27ffedfdda6 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Mon, 4 Oct 2021 16:17:18 -0600 Subject: [PATCH 12/38] added phone number validation --- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2c765ea0394..d1ba09725f9 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -24,7 +24,7 @@ import TextLink from '../../components/TextLink'; import StatePicker from '../../components/StatePicker'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import { - isValidDate, isRequiredFulfilled, isValidURL, + isValidDate, isRequiredFulfilled, isValidURL, isValidPhoneWithSpecialChars, } from '../../libs/ValidationUtils'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; From 89fadbb890bc7e4741104c31e1bc44d2675643b5 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Mon, 4 Oct 2021 16:17:59 -0600 Subject: [PATCH 13/38] flex direction none not allowed --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index c42850bbf2c..cd617cf7a52 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2056,7 +2056,7 @@ const styles = { }), googleSearchTextInputContainer: { - flexDirection: 'none', + flexDirection: 'column', }, }; From eb522b1bd2cbed3e81eb8c3819685f64196b26f9 Mon Sep 17 00:00:00 2001 From: Santhoshkumar Sellavel Date: Wed, 6 Oct 2021 00:23:06 +0530 Subject: [PATCH 14/38] undefined optional handling for addtionalData.bankname --- src/pages/settings/Payments/PaymentMethodList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index f4f7136c554..959109cf54d 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -87,7 +87,7 @@ class PaymentMethodList extends Component { bankAccount.accountNumber.slice(-4) }` : null; - const {icon, iconSize} = getBankIcon(bankAccount.additionalData.bankName); + const {icon, iconSize} = getBankIcon(_.get(bankAccount, 'additionalData.bankName', '')); combinedPaymentMethods.push({ type: MENU_ITEM, title: bankAccount.addressName, From 230f50d39885a6a379f453aab2da9de76d5538b1 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:01:49 -0600 Subject: [PATCH 15/38] swapped functional component to class --- src/components/AddressSearch.js | 124 +++++++++++++++++--------------- 1 file changed, 65 insertions(+), 59 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index df8fd5c51a3..57c2e790747 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useEffect} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {View, Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; @@ -8,6 +8,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; + const propTypes = { /** The label to display for the field */ label: PropTypes.string.isRequired, @@ -28,17 +29,20 @@ const defaultProps = { containerStyles: null, }; -const AddressSearch = (props) => { - // Using a hook is the only way to see the value of this component - const ref = useRef(); - useEffect(() => { - ref?.current?.setAddressText(props.value); - }, []); +class AddressSearch extends React.Component { + constructor(props) { + super(props); + this.googlePlacesRef = React.createRef(); + } + + componentDidMount() { + this.googlePlacesRef.current?.setAddressText(this.props.value); + } /** * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses */ - const saveLocationDetails = (details) => { + saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details const streetNumber = _.chain(details.address_components) @@ -63,60 +67,62 @@ const AddressSearch = (props) => { .value(); // Trigger text change events for each of the individual fields being saved on the server - props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); - props.onChangeText('addressCity', city); - props.onChangeText('addressState', state); - props.onChangeText('addressZipCode', zipCode); + this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); + this.props.onChangeText('addressCity', city); + this.props.onChangeText('addressState', state); + this.props.onChangeText('addressZipCode', zipCode); } - }; + } - 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, - }} - styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - renderRow={(data, index) => { - // This is using a custom render component in order for the styles to be properly applied to the top row. - // The styles for the top and bottom row could have instead by passed to `styles.listView` for - // , however the list is always visible, even when there are no results. - // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes - // up space in the UI and looks like a horizontal line with padding around it. - // Using this custom render, the rounded borders and padding can be applied to the first row - // so that they are only visible when there are results. - const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; + 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.googleSearchTextInputContainer], + }} + renderRow={(data, index) => { + // This is using a custom render component in order for the styles to be properly applied to the top row. + // The styles for the top and bottom row could have instead by passed to `styles.listView` for + // , however the list is always visible, even when there are no results. + // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes + // up space in the UI and looks like a horizontal line with padding around it. + // Using this custom render, the rounded borders and padding can be applied to the first row + // so that they are only visible when there are results. + const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; - if (index === 0) { - rowStyles.push(styles.borderTop); - rowStyles.push(styles.mt2); - } - return ( - - {data.description} - - ); - }} - /> - ); -}; + if (index === 0) { + rowStyles.push(styles.borderTop); + rowStyles.push(styles.mt2); + } + return ( + + {data.description} + + ); + }} + /> + ); + } +} AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; From efea62117222f4aa17eeb0dd630d20e5d0cab751 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:13:58 -0600 Subject: [PATCH 16/38] js style --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 57c2e790747..6af4618c047 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -75,7 +75,7 @@ class AddressSearch extends React.Component { } render() { - return( + return ( Date: Tue, 5 Oct 2021 13:21:05 -0600 Subject: [PATCH 17/38] ignore virtualized list error --- src/components/AddressSearch.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 6af4618c047..5d512e50c6c 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,13 +1,17 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import {View, Text} from 'react-native'; +import {View, Text, LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; +// The error that's being thrown below will be ignored until we fork the +// react-native-google-places-autocomplete repo and replace the +// VirtualizedList component with a VirtualizedList-backed instead +LogBox.ignoreLogs([ 'VirtualizedLists should never be nested']); const propTypes = { /** The label to display for the field */ From de295e81ac6fc191923faa0ab6e031eba7f88966 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:29:23 -0600 Subject: [PATCH 18/38] refactor address info to method --- src/components/AddressSearch.js | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 5d512e50c6c..7c59e2f3621 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -43,32 +43,24 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } + getAddressInfo(field, nameType) { + return _.chain(details.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) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = _.chain(details.address_components) - .find(component => _.contains(component.types, 'street_number')) - .get('long_name') - .value(); - const streetName = _.chain(details.address_components) - .find(component => _.contains(component.types, 'route')) - .get('long_name') - .value(); - const city = _.chain(details.address_components) - .find(component => _.contains(component.types, 'locality')) - .get('long_name') - .value(); - const state = _.chain(details.address_components) - .find(component => _.contains(component.types, 'administrative_area_level_1')) - .get('short_name') - .value(); - const zipCode = _.chain(details.address_components) - .find(component => _.contains(component.types, 'postal_code')) - .get('long_name') - .value(); + const streetNumber = this.getAddressInfo('street_number', 'long_name'); + const streetName = this.getAddressInfo('route', 'long_name'); + const city = this.getAddressInfo('locality', 'long_name'); + const state = this.getAddressInfo('administrative_area_level_1', 'short_name'); + const zipCode = this.getAddressInfo('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}`); From 23bada320017f9e0da8ee10c61a0f5e24a1e5253 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:29:52 -0600 Subject: [PATCH 19/38] slight name change --- src/components/AddressSearch.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 7c59e2f3621..32695b78f16 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -43,7 +43,7 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } - getAddressInfo(field, nameType) { + getAddressComponent(field, nameType) { return _.chain(details.address_components) .find(component => _.contains(component.types, field)) .get(nameType) @@ -56,11 +56,11 @@ class AddressSearch extends React.Component { saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = this.getAddressInfo('street_number', 'long_name'); - const streetName = this.getAddressInfo('route', 'long_name'); - const city = this.getAddressInfo('locality', 'long_name'); - const state = this.getAddressInfo('administrative_area_level_1', 'short_name'); - const zipCode = this.getAddressInfo('postal_code', 'long_name'); + const streetNumber = this.getAddressComponent('street_number', 'long_name'); + const streetName = this.getAddressComponent('route', 'long_name'); + const city = this.getAddressComponent('locality', 'long_name'); + const state = this.getAddressComponent('administrative_area_level_1', 'short_name'); + const zipCode = this.getAddressComponent('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}`); From d4aff2d19d17c95aef1b1fef385f466bdb399be2 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:36:16 -0600 Subject: [PATCH 20/38] style --- src/components/AddressSearch.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 32695b78f16..db4dd1722ec 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -8,10 +8,10 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; -// The error that's being thrown below will be ignored until we fork the -// react-native-google-places-autocomplete repo and replace the +// The error that's being thrown below will be ignored until we fork the +// react-native-google-places-autocomplete repo and replace the // VirtualizedList component with a VirtualizedList-backed instead -LogBox.ignoreLogs([ 'VirtualizedLists should never be nested']); +LogBox.ignoreLogs(['VirtualizedLists should never be nested']); const propTypes = { /** The label to display for the field */ @@ -43,11 +43,11 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } - getAddressComponent(field, nameType) { + getAddressComponent(object, field, nameType) { return _.chain(details.address_components) - .find(component => _.contains(component.types, field)) - .get(nameType) - .value(); + .find(component => _.contains(component.types, field)) + .get(nameType) + .value(); } /** From ef4d2dbc5013c7db4f435e8df93c390828399cb9 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:36:36 -0600 Subject: [PATCH 21/38] thread details into the helper method --- src/components/AddressSearch.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index db4dd1722ec..9311b9e0e44 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -56,11 +56,11 @@ class AddressSearch extends React.Component { saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = this.getAddressComponent('street_number', 'long_name'); - const streetName = this.getAddressComponent('route', 'long_name'); - const city = this.getAddressComponent('locality', 'long_name'); - const state = this.getAddressComponent('administrative_area_level_1', 'short_name'); - const zipCode = this.getAddressComponent('postal_code', 'long_name'); + 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'); // Trigger text change events for each of the individual fields being saved on the server this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); From 3d7f62495960c355e25cb3e761baedd7169c3573 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:41:46 -0600 Subject: [PATCH 22/38] facepalm --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9311b9e0e44..cfb2226c584 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -44,7 +44,7 @@ class AddressSearch extends React.Component { } getAddressComponent(object, field, nameType) { - return _.chain(details.address_components) + return _.chain(object.address_components) .find(component => _.contains(component.types, field)) .get(nameType) .value(); From 820b8cb7adf1463b961b868903e1ba51219c29da Mon Sep 17 00:00:00 2001 From: Amal Nazeem Date: Wed, 6 Oct 2021 11:06:40 -0400 Subject: [PATCH 23/38] Fix error condition for policy create --- src/libs/actions/Policy.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js index b2d7b12f153..fa42b6ca393 100644 --- a/src/libs/actions/Policy.js +++ b/src/libs/actions/Policy.js @@ -237,8 +237,10 @@ function create(name = '') { role: CONST.POLICY.ROLE.ADMIN, }); }).then(() => { - Navigation.dismissModal(); - Navigation.navigate(ROUTES.getWorkspaceCardRoute(res.policyID)); + if (res) { + Navigation.dismissModal(); + Navigation.navigate(ROUTES.getWorkspaceCardRoute(res.policyID)); + } }); } From a6731e6ca5d2d5a1f605d43476f5b313bc007cd1 Mon Sep 17 00:00:00 2001 From: Santhoshkumar Sellavel Date: Thu, 7 Oct 2021 00:18:26 +0530 Subject: [PATCH 24/38] Used lodashGet instead of underscore --- src/pages/settings/Payments/PaymentMethodList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 959109cf54d..9c7ff5a32d2 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -3,6 +3,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {FlatList, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import styles from '../../../styles/styles'; import MenuItem from '../../../components/MenuItem'; import compose from '../../../libs/compose'; @@ -87,7 +88,7 @@ class PaymentMethodList extends Component { bankAccount.accountNumber.slice(-4) }` : null; - const {icon, iconSize} = getBankIcon(_.get(bankAccount, 'additionalData.bankName', '')); + const {icon, iconSize} = getBankIcon(lodashGet(bankAccount, 'additionalData.bankName', '')); combinedPaymentMethods.push({ type: MENU_ITEM, title: bankAccount.addressName, From 5622b69e603d528517d277227583a12c845a79e7 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 6 Oct 2021 12:28:33 -0700 Subject: [PATCH 25/38] fixes detox binary path --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fe91450bc72..bb86f771c84 100644 --- a/package.json +++ b/package.json @@ -209,7 +209,7 @@ "runnerConfig": "tests/e2e/config.json", "configurations": { "ios.sim.debug": { - "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/expensify.cash.app", + "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/new expensify.app", "build": "xcodebuild -workspace ios/NewExpensify.xcworkspace -scheme NewExpensify -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build | xcpretty", "type": "ios.simulator", "name": "iPhone 11" From b7116c02bb7e871bdeb282843675c877730eb0ee Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:28:49 -0600 Subject: [PATCH 26/38] used built in style setter --- src/components/AddressSearch.js | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index cfb2226c584..53576994f33 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -93,27 +93,17 @@ class AddressSearch extends React.Component { containerStyles: this.props.containerStyles, }} styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - renderRow={(data, index) => { - // This is using a custom render component in order for the styles to be properly applied to the top row. - // The styles for the top and bottom row could have instead by passed to `styles.listView` for - // , however the list is always visible, even when there are no results. - // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes - // up space in the UI and looks like a horizontal line with padding around it. - // Using this custom render, the rounded borders and padding can be applied to the first row - // so that they are only visible when there are results. - const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; - - if (index === 0) { - rowStyles.push(styles.borderTop); - rowStyles.push(styles.mt2); - } - return ( - - {data.description} - - ); + textInputContainer: [styles.flexColumn], + listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto,], + row: [ + styles.pv4, + styles.ph3, + styles.borderLeft, + styles.borderRight, + styles.overflowAuto, + styles.googleSearchRowWidth, + ], + separator: [styles.googleSearchSeperator] }} /> ); From 6b243d5d77fb825b29c149686660f1baf404d7dd Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:28:56 -0600 Subject: [PATCH 27/38] added a few custom styles --- src/styles/styles.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index cd617cf7a52..7ee15c4a66f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2058,6 +2058,15 @@ const styles = { googleSearchTextInputContainer: { flexDirection: 'column', }, + + googleSearchSeperator: { + height: '1px', + backgroundColor: themeColors.border, + }, + + googleSearchRowWidth: { + maxWidth: '320px', + }, }; const baseCodeTagStyles = { From b5d9c2c26505883814161f84e72986b3a8a51a6b Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:35:00 -0600 Subject: [PATCH 28/38] remove unneeded imports --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 53576994f33..13354fc8925 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import {View, Text, LogBox} from 'react-native'; +import {LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; From ebe85227d37ef1650e01efe49386b6fe634a8034 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:37:43 -0600 Subject: [PATCH 29/38] js style --- src/components/AddressSearch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 13354fc8925..9ba3aa1888a 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -94,7 +94,7 @@ class AddressSearch extends React.Component { }} styles={{ textInputContainer: [styles.flexColumn], - listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto,], + listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto], row: [ styles.pv4, styles.ph3, @@ -103,7 +103,7 @@ class AddressSearch extends React.Component { styles.overflowAuto, styles.googleSearchRowWidth, ], - separator: [styles.googleSearchSeperator] + separator: [styles.googleSearchSeperator], }} /> ); From 65ce8ac1f14dc32a7b60f0c2a254f5c0fcc6fa6d Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 16:16:45 -0600 Subject: [PATCH 30/38] text style --- src/components/AddressSearch.js | 3 ++- src/styles/styles.js | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9ba3aa1888a..808fd3af66a 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -101,8 +101,9 @@ class AddressSearch extends React.Component { styles.borderLeft, styles.borderRight, styles.overflowAuto, - styles.googleSearchRowWidth, + styles.googleSearchRow, ], + description: [styles.googleSearchText], separator: [styles.googleSearchSeperator], }} /> diff --git a/src/styles/styles.js b/src/styles/styles.js index 7ee15c4a66f..49a65d72a57 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2064,9 +2064,17 @@ const styles = { backgroundColor: themeColors.border, }, - googleSearchRowWidth: { + googleSearchRow: { maxWidth: '320px', }, + + googleSearchText: { + color: themeColors.text, + fontSize: variables.fontSizeNormal, + lineHeight: variables.fontSizeNormalHeight, + fontFamily: fontFamily.GTA, + flex: 1, + } }; const baseCodeTagStyles = { From 911979c75ce3c3cab12085764e1b57dba3e7a6e7 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 16:18:03 -0600 Subject: [PATCH 31/38] style --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 49a65d72a57..6bd5db59419 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2074,7 +2074,7 @@ const styles = { lineHeight: variables.fontSizeNormalHeight, fontFamily: fontFamily.GTA, flex: 1, - } + }, }; const baseCodeTagStyles = { From b8f1e0592b16da9efbb9a2ba354e12f2b7c992bd Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 17:05:24 -0600 Subject: [PATCH 32/38] style adjustment --- src/components/AddressSearch.js | 12 ++++++++---- src/styles/styles.js | 6 +----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 808fd3af66a..fe863ddd152 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -94,14 +94,18 @@ class AddressSearch extends React.Component { }} styles={{ textInputContainer: [styles.flexColumn], - listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto], + listView: [ + styles.borderTopRounded, + styles.borderBottomRounded, + styles.mt4, + styles.overflowAuto, + styles.borderLeft, + styles.borderRight, + ], row: [ styles.pv4, styles.ph3, - styles.borderLeft, - styles.borderRight, styles.overflowAuto, - styles.googleSearchRow, ], description: [styles.googleSearchText], separator: [styles.googleSearchSeperator], diff --git a/src/styles/styles.js b/src/styles/styles.js index 6bd5db59419..f3b6a0a8d5a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2060,14 +2060,10 @@ const styles = { }, googleSearchSeperator: { - height: '1px', + height: 1, backgroundColor: themeColors.border, }, - googleSearchRow: { - maxWidth: '320px', - }, - googleSearchText: { color: themeColors.text, fontSize: variables.fontSizeNormal, From dd9f01fb69cbcec25281eeb691f809915e97e57f Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Thu, 7 Oct 2021 11:01:20 -0600 Subject: [PATCH 33/38] decrease top margin on dropdown --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index fe863ddd152..3769cd2c0cf 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -97,7 +97,7 @@ class AddressSearch extends React.Component { listView: [ styles.borderTopRounded, styles.borderBottomRounded, - styles.mt4, + styles.mt1, styles.overflowAuto, styles.borderLeft, styles.borderRight, From 815ebcca877de43ef6fa453f0d01460e1863c9d7 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Thu, 7 Oct 2021 11:04:48 -0700 Subject: [PATCH 34/38] Improve workspace welcome note --- src/languages/en.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index 91edec4ac26..7f7ecf8c521 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -656,7 +656,7 @@ export default { pleaseEnterUniqueLogin: 'That user is already a member of this workspace.', genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.', systemUserError: ({email}) => `Sorry, you cannot invite ${email} to a workspace.`, - welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} workspace! Download the Expensify mobile app to start tracking your expenses.`, + welcomeNote: ({workspaceName}) => `You have been invited to ${workspaceName}! Download the Expensify mobile app to start tracking your expenses.`, }, editor: { nameInputLabel: 'Name', From bb9d250ec212aaf411dadbd4c430b5b21fc6c31c Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Thu, 7 Oct 2021 11:21:47 -0700 Subject: [PATCH 35/38] Update spanish translation to match english --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index b36d18250e7..fa9b594af0e 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -658,7 +658,7 @@ export default { pleaseEnterUniqueLogin: 'Ese usuario ya es miembro de este espacio de trabajo.', genericFailureMessage: 'Se produjo un error al invitar al usuario al espacio de trabajo. Vuelva a intentarlo..', systemUserError: ({email}) => `Lo sentimos, no puedes invitar a ${email} a un espacio de trabajo.`, - welcomeNote: ({workspaceName}) => `¡Has sido invitado a la ${workspaceName} Espacio de trabajo! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`, + welcomeNote: ({workspaceName}) => `¡Has sido invitado a ${workspaceName}! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`, }, editor: { nameInputLabel: 'Nombre', From 98f392ff2a4f6b046a228b00e38cd670770ea219 Mon Sep 17 00:00:00 2001 From: OSBotify Date: Thu, 7 Oct 2021 19:13:32 +0000 Subject: [PATCH 36/38] Update version to 1.1.6-1 --- android/app/build.gradle | 4 ++-- ios/NewExpensify/Info.plist | 2 +- ios/NewExpensifyTests/Info.plist | 2 +- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 7f0490df7cc..964a0cb5fe2 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -150,8 +150,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001010600 - versionName "1.1.6-0" + versionCode 1001010601 + versionName "1.1.6-1" } splits { abi { diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 41cc1d1bbbb..a70172e36e9 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -31,7 +31,7 @@ CFBundleVersion - 1.1.6.0 + 1.1.6.1 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 78aabbd9ce9..1ed34462ca9 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 1.1.6.0 + 1.1.6.1 diff --git a/package-lock.json b/package-lock.json index b26a8a933cc..259b4af8892 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.6-0", + "version": "1.1.6-1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f5c989e21ef..718cfddb152 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.6-0", + "version": "1.1.6-1", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", From 040d7d7b95f3d994d492e43b4724fbfa7312a30c Mon Sep 17 00:00:00 2001 From: OSBotify Date: Thu, 7 Oct 2021 20:17:45 +0000 Subject: [PATCH 37/38] Update version to 1.1.7-0 --- android/app/build.gradle | 4 ++-- ios/NewExpensify/Info.plist | 4 ++-- ios/NewExpensifyTests/Info.plist | 4 ++-- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 964a0cb5fe2..c1fa15755ee 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -150,8 +150,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001010601 - versionName "1.1.6-1" + versionCode 1001010700 + versionName "1.1.7-0" } splits { abi { diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index a70172e36e9..7d48d901f2e 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -17,7 +17,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.1.6 + 1.1.7 CFBundleSignature ???? CFBundleURLTypes @@ -31,7 +31,7 @@ CFBundleVersion - 1.1.6.1 + 1.1.7.0 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 1ed34462ca9..672d9880718 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.1.6 + 1.1.7 CFBundleSignature ???? CFBundleVersion - 1.1.6.1 + 1.1.7.0 diff --git a/package-lock.json b/package-lock.json index 259b4af8892..413c3fdd5f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.6-1", + "version": "1.1.7-0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 718cfddb152..dafee33e402 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.6-1", + "version": "1.1.7-0", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", From 9d14897888787ba4fafe8a5e6c5c569251c30e28 Mon Sep 17 00:00:00 2001 From: timszot Date: Thu, 7 Oct 2021 14:30:23 -0700 Subject: [PATCH 38/38] Set the fastlane build_app param manageAppVersionAndBuildNumber --- fastlane/Fastfile | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/fastlane/Fastfile b/fastlane/Fastfile index 33e22a85afa..e3157fbd214 100644 --- a/fastlane/Fastfile +++ b/fastlane/Fastfile @@ -108,7 +108,10 @@ platform :ios do build_app( workspace: "./ios/NewExpensify.xcworkspace", - scheme: "NewExpensify" + scheme: "NewExpensify", + export_options: { + manageAppVersionAndBuildNumber: false + } ) begin @@ -150,7 +153,7 @@ platform :ios do api_key_path: "./ios/ios-fastlane-json-key.json", # Skip HTMl report verification - force: true, + force: true, # VERSION will be set to the full build_number e.g. '1.0.92.0' build_number: ENV["VERSION"],