Update Address search - show all inputs

src/components/AddressSearch.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useEffect, useState, useRef} from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {LogBox} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -23,7 +23,7 @@ const propTypes = {
     value: PropTypes.string,
 
     /** A callback function when the value of this field has changed */
-    onChangeText: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
 
     /** Customize the ExpensiTextInput container */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
@@ -39,55 +39,52 @@ const defaultProps = {
 // Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
 // Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
 const AddressSearch = (props) => {
-    const googlePlacesRef = useRef();
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
-    useEffect(() => {
-        if (!googlePlacesRef.current) {
-            return;
-        }
-
-        googlePlacesRef.current.setAddressText(props.value);
-    }, []);
+    const [skippedFirstOnChangeText, setSkippedFirstOnChangeText] = useState(false);
 
     const saveLocationDetails = (details) => {
         const addressComponents = details.address_components;
-        if (GooglePlacesUtils.isAddressValidForVBA(addressComponents)) {
-            // Gather the values from the Google details
-            const streetNumber = GooglePlacesUtils.getAddressComponent(addressComponents, 'street_number', 'long_name');
-            const streetName = GooglePlacesUtils.getAddressComponent(addressComponents, 'route', 'long_name');
-            let city = GooglePlacesUtils.getAddressComponent(addressComponents, 'locality', 'long_name');
-            if (!city) {
-                city = GooglePlacesUtils.getAddressComponent(addressComponents, 'sublocality', 'long_name');
-                Log.hmmm('[AddressSearch] Replacing missing locality with sublocality: ', {address: details.formatted_address, sublocality: city});
-            }
-            const state = GooglePlacesUtils.getAddressComponent(addressComponents, 'administrative_area_level_1', 'short_name');
-            const zipCode = GooglePlacesUtils.getAddressComponent(addressComponents, 'postal_code', 'long_name');
+        if (!addressComponents) {
+            return;
+        }
+
+        // Gather the values from the Google details
+        const streetNumber = GooglePlacesUtils.getAddressComponent(addressComponents, 'street_number', 'long_name') || '';
+        const streetName = GooglePlacesUtils.getAddressComponent(addressComponents, 'route', 'long_name') || '';
+        const addressStreet = `${streetNumber} ${streetName}`.trim();
+        let addressCity = GooglePlacesUtils.getAddressComponent(addressComponents, 'locality', 'long_name');
+        if (!addressCity) {
+            addressCity = GooglePlacesUtils.getAddressComponent(addressComponents, 'sublocality', 'long_name');
+            Log.hmmm('[AddressSearch] Replacing missing locality with sublocality: ', {address: details.formatted_address, sublocality: addressCity});
+        }
+        const addressZipCode = GooglePlacesUtils.getAddressComponent(addressComponents, 'postal_code', 'long_name');
+        const addressState = GooglePlacesUtils.getAddressComponent(addressComponents, 'administrative_area_level_1', 'short_name');
 
-            // 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);
-        } else {
-            // Clear the values associated to the address, so our validations catch the problem
-            Log.hmmm('[AddressSearch] Search result failed validation: ', {
-                address: details.formatted_address,
-                address_components: addressComponents,
-                place_id: details.place_id,
-            });
-            props.onChangeText('addressStreet', null);
-            props.onChangeText('addressCity', null);
-            props.onChangeText('addressState', null);
-            props.onChangeText('addressZipCode', null);
+        const values = {};
+        if (addressStreet) {
+            values.addressStreet = addressStreet;
         }
+        if (addressCity) {
+            values.addressCity = addressCity;
+        }
+        if (addressZipCode) {
+            values.addressZipCode = addressZipCode;
+        }
+        if (addressState) {
+            values.addressState = addressState;
+        }
+        if (_.size(values) === 0) {
+            return;
+        }
+        props.onChange(values);
     };
 
     return (
         <GooglePlacesAutocomplete
-            ref={googlePlacesRef}
             fetchDetails
             suppressDefaultStyles
             enablePoweredByContainer={false}
+            placeholder=""
             onPress={(data, details) => {
                 saveLocationDetails(details);
 
@@ -109,12 +106,15 @@ const AddressSearch = (props) => {
                 label: props.label,
                 containerStyles: props.containerStyles,
                 errorText: props.errorText,
+                value: props.value,
                 onChangeText: (text) => {
-                    const isTextValid = !_.isEmpty(text) && _.isEqual(text, props.value);
-
-                    // Ensure whether an address is selected already or has address value initialized.
-                    if (!_.isEmpty(googlePlacesRef.current.getAddressText()) && !isTextValid) {
-                        saveLocationDetails({});
+                    // We use `skippedFirstOnChangeText` to work around a feature of the library:
+                    // The library is calling onChangeText with '' at the start and we don't need this
+                    // https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/47d7223dd48f85da97e80a0729a985bbbcee353f/GooglePlacesAutocomplete.js#L148
+                    if (skippedFirstOnChangeText) {
+                        props.onChange({addressStreet: text});
+                    } else {
+                        setSkippedFirstOnChangeText(true);
                     }
 
                     // If the text is empty, we set displayListViewBorder to false to prevent UI flickering

src/libs/ReimbursementAccountUtils.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import lodashUnset from 'lodash/unset';
 import lodashCloneDeep from 'lodash/cloneDeep';
@@ -25,23 +26,33 @@ function getErrors(props) {
     return lodashGet(props, ['reimbursementAccount', 'errors'], {});
 }
 
+
 /**
  * @param {Object} props
- * @param {String} path
+ * @param {String[]} paths
  */
-function clearError(props, path) {
+function clearErrors(props, paths) {
     const errors = getErrors(props);
-    if (!lodashGet(errors, path, false)) {
+    const pathsWithErrors = _.filter(paths, path => lodashGet(errors, path, false));
+    if (_.size(pathsWithErrors) === 0) {
         // No error found for this path
         return;
     }
 
     // Clear the existing errors
     const newErrors = lodashCloneDeep(errors);
-    lodashUnset(newErrors, path);
+    _.forEach(pathsWithErrors, path => lodashUnset(newErrors, path));
     BankAccounts.setBankAccountFormValidationErrors(newErrors);
 }
 
+/**
+ * @param {Object} props
+ * @param {String} path
+ */
+function clearError(props, path) {
+    clearErrors(props, [path]);
+}
+
 /**
  * @param {Object} props
  * @param {Object} errorTranslationKeys
@@ -57,5 +68,6 @@ export {
     getDefaultStateForField,
     getErrors,
     clearError,
+    clearErrors,
     getErrorText,
 };

src/libs/ValidationUtils.js

@@ -206,7 +206,7 @@ function isValidURL(url) {
  * @returns {Object}
  */
 function validateIdentity(identity) {
-    const requiredFields = ['firstName', 'lastName', 'street', 'city', 'zipCode', 'state', 'ssnLast4', 'dob'];
+    const requiredFields = ['firstName', 'lastName', 'addressStreet', 'addressCity', 'addressZipCode', 'addressState', 'ssnLast4', 'dob'];
     const errors = {};
 
     // Check that all required fields are filled
@@ -217,12 +217,12 @@ function validateIdentity(identity) {
         errors[fieldName] = true;
     });
 
-    if (!isValidAddress(identity.street)) {
-        errors.street = true;
+    if (!isValidAddress(identity.addressStreet)) {
+        errors.addressStreet = true;
     }
 
-    if (!isValidZipCode(identity.zipCode)) {
-        errors.zipCode = true;
+    if (!isValidZipCode(identity.addressZipCode)) {
+        errors.addressZipCode = true;
     }
 
     // dob field has multiple validations/errors, we are handling it temporarily like this.

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -59,24 +59,28 @@ class ACHContractStep extends React.Component {
             certifyTrueInformation: 'beneficialOwnersStep.error.certify',
         };
 
+        this.getErrors = () => ReimbursementAccountUtils.getErrors(this.props);
         this.clearError = inputKey => ReimbursementAccountUtils.clearError(this.props, inputKey);
+        this.clearErrors = values => ReimbursementAccountUtils.clearErrors(this.props, values);
         this.getErrorText = inputKey => ReimbursementAccountUtils.getErrorText(this.props, this.errorTranslationKeys, inputKey);
     }
 
-    /**
-     * @returns {Object}
-     */
-    getErrors() {
-        return lodashGet(this.props, ['reimbursementAccount', 'errors'], {});
-    }
-
     /**
      * @returns {Boolean}
      */
     validate() {
         let beneficialOwnersErrors = [];
         if (this.state.hasOtherBeneficialOwners) {
-            beneficialOwnersErrors = _.map(this.state.beneficialOwners, ValidationUtils.validateIdentity);
+            beneficialOwnersErrors = _.map(this.state.beneficialOwners, beneficialOwner => ValidationUtils.validateIdentity({
+                firstName: beneficialOwner.firstName,
+                lastName: beneficialOwner.lastName,
+                addressStreet: beneficialOwner.street,
+                addressState: beneficialOwner.state,
+                addressCity: beneficialOwner.city,
+                addressZipCode: beneficialOwner.zipCode,
+                dob: beneficialOwner.dob,
+                ssnLast4: beneficialOwner.ssnLast4,
+            }));
         }
 
         const errors = {};
@@ -122,29 +126,44 @@ class ACHContractStep extends React.Component {
      * Clear the error associated to inputKey if found and store the inputKey new value in the state.
      *
      * @param {Integer} ownerIndex
-     * @param {String} inputKey
-     * @param {String} value
+     * @param {Object} values
      */
-    clearErrorAndSetBeneficialOwnerValue(ownerIndex, inputKey, value) {
+    clearErrorAndSetBeneficialOwnerValues(ownerIndex, values) {
         this.setState((prevState) => {
             const renamedFields = {
                 addressStreet: 'street',
                 addressCity: 'city',
                 addressState: 'state',
                 addressZipCode: 'zipCode',
             };
-            const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
             const beneficialOwners = [...prevState.beneficialOwners];
-            beneficialOwners[ownerIndex] = {...beneficialOwners[ownerIndex], [renamedInputKey]: value};
+            _.each(values, (value, inputKey) => {
+                const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
+                beneficialOwners[ownerIndex] = {...beneficialOwners[ownerIndex], [renamedInputKey]: value};
+            });
             BankAccounts.updateReimbursementAccountDraft({beneficialOwners});
             return {beneficialOwners};
         });
 
+        // Prepare inputKeys for clearing errors
+        const inputKeys = _.keys(values);
+
         // dob field has multiple validations/errors, we are handling it temporarily like this.
-        if (inputKey === 'dob') {
-            this.clearError(`beneficialOwnersErrors.${ownerIndex}.dobAge`);
+        if (_.contains(inputKeys, 'dob')) {
+            inputKeys.push('dobAge');
         }
-        this.clearError(`beneficialOwnersErrors.${ownerIndex}.${inputKey}`);
+        this.clearErrors(_.map(inputKeys, inputKey => `beneficialOwnersErrors.${ownerIndex}.${inputKey}`));
+    }
+
+    /**
+     * Clear the error associated to inputKey if found and store the inputKey new value in the state.
+     *
+     * @param {Integer} ownerIndex
+     * @param {String} inputKey
+     * @param {String} value
+     */
+    clearErrorAndSetBeneficialOwnerValue(ownerIndex, inputKey, value) {
+        this.clearErrorAndSetBeneficialOwnerValues(ownerIndex, {[inputKey]: value});
     }
 
     submit() {
@@ -233,14 +252,20 @@ class ACHContractStep extends React.Component {
                                     </Text>
                                     <IdentityForm
                                         style={[styles.mb2]}
-                                        onFieldChange={(inputKey, value) => this.clearErrorAndSetBeneficialOwnerValue(index, inputKey, value)}
+                                        onFieldChange={(inputKeyOrValues, value) => {
+                                            if (_.isString(inputKeyOrValues)) {
+                                                this.clearErrorAndSetBeneficialOwnerValue(index, inputKeyOrValues, value);
+                                            } else {
+                                                this.clearErrorAndSetBeneficialOwnerValues(index, inputKeyOrValues);
+                                            }
+                                        }}
                                         values={{
                                             firstName: owner.firstName || '',
                                             lastName: owner.lastName || '',
-                                            street: owner.street || '',
-                                            city: owner.city || '',
-                                            state: owner.state || '',
-                                            zipCode: owner.zipCode || '',
+                                            addressStreet: owner.street || '',
+                                            addressState: owner.state || '',
+                                            addressCity: owner.city || '',
+                                            addressZipCode: owner.zipCode || '',
                                             dob: owner.dob || '',
                                             ssnLast4: owner.ssnLast4 || '',
                                         }}