Merge pull request #10234 from thesahindia/thesahindia/use-AddressForm

Use AddressForm at additional details page
Expensify · Sep 19, 2022 · 3335b18 · 3335b18
2 parents 56dcf61 + 334b210
commit 3335b18
Showing 1 changed file with 21 additions and 43 deletions.
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -21,7 +21,7 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto
 import * as Wallet from '../../libs/actions/Wallet';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as LoginUtils from '../../libs/LoginUtils';
-import AddressSearch from '../../components/AddressSearch';
+import AddressForm from '../ReimbursementAccount/AddressForm';
 import DatePicker from '../../components/DatePicker';
 import FormHelper from '../../libs/FormHelper';
 import walletAdditionalDetailsDraftPropTypes from './walletAdditionalDetailsDraftPropTypes';
@@ -106,10 +106,6 @@ class AdditionalDetailsStep extends React.Component {
         this.errorTranslationKeys = {
             legalFirstName: 'bankAccount.error.firstName',
             legalLastName: 'bankAccount.error.lastName',
-            addressStreet: 'bankAccount.error.addressStreet',
-            addressCity: 'bankAccount.error.addressCity',
-            addressState: 'bankAccount.error.addressState',
-            addressZip: 'bankAccount.error.zipCode',
             phoneNumber: 'bankAccount.error.phoneNumber',
             dob: 'bankAccount.error.dob',
             age: 'bankAccount.error.age',
@@ -121,9 +117,6 @@ class AdditionalDetailsStep extends React.Component {
             legalFirstName: 'additionalDetailsStep.legalFirstNameLabel',
             legalLastName: 'additionalDetailsStep.legalLastNameLabel',
             addressStreet: 'common.personalAddress',
-            addressCity: 'common.city',
-            addressState: 'common.state',
-            addressZip: 'common.zip',
             phoneNumber: 'common.phoneNumber',
             dob: 'common.dob',
             ssn: 'common.ssnLast4',
@@ -183,6 +176,10 @@ class AdditionalDetailsStep extends React.Component {
             errors.addressStreet = true;
         }
 
+        if (!ValidationUtils.isValidZipCode(this.props.walletAdditionalDetailsDraft.addressZip)) {
+            errors.addressZip = true;
+        }
+
         if (!ValidationUtils.isValidUSPhone(this.props.walletAdditionalDetailsDraft.phoneNumber, true)) {
             errors.phoneNumber = true;
         }
@@ -305,52 +302,33 @@ class AdditionalDetailsStep extends React.Component {
                                     value={this.props.walletAdditionalDetailsDraft.legalLastName || lastName}
                                     errorText={this.getErrorText('legalLastName')}
                                 />
-                                <AddressSearch
-                                    label={this.props.translate(this.fieldNameTranslationKeys.addressStreet)}
-                                    value={this.props.walletAdditionalDetailsDraft.addressStreet || ''}
-                                    containerStyles={[styles.mt4]}
-                                    onInputChange={(values) => {
+                                <AddressForm
+                                    streetTranslationKey={this.fieldNameTranslationKeys.addressStreet}
+                                    values={{
+                                        street: this.props.walletAdditionalDetailsDraft.addressStreet,
+                                        state: this.props.walletAdditionalDetailsDraft.addressState,
+                                        city: this.props.walletAdditionalDetailsDraft.addressCity,
+                                        zipCode: this.props.walletAdditionalDetailsDraft.addressZip,
+                                    }}
+                                    errors={{
+                                        street: this.getErrors().addressStreet,
+                                        state: this.getErrors().addressState,
+                                        city: this.getErrors().addressCity,
+                                        zipCode: this.getErrors().addressZip,
+                                    }}
+                                    onFieldChange={(values) => {
                                         const renamedFields = {
                                             street: 'addressStreet',
                                             state: 'addressState',
-                                            zipCode: 'addressZip',
                                             city: 'addressCity',
+                                            zipCode: 'addressZip',
                                         };
                                         _.each(values, (value, inputKey) => {
                                             const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
                                             this.clearErrorAndSetValue(renamedInputKey, value);
                                         });
                                     }}
-                                    errorText={this.getErrorText('addressStreet')}
-                                    hint={this.props.translate('common.noPO')}
                                 />
-                                {this.props.walletAdditionalDetailsDraft.addressStreet ? (
-                                    <>
-                                        {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}
-                                        {/** We'll autofill them when the user selects a full address from the google autocomplete */}
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressCity)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressCity', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
-                                            errorText={this.getErrorText('addressCity')}
-                                        />
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressState)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressState', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressState || ''}
-                                            errorText={this.getErrorText('addressState')}
-                                        />
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressZip)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressZip', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
-                                            errorText={this.getErrorText('addressZip')}
-                                        />
-                                    </>
-                                ) : null}
                             </View>
                             <TextInput
                                 containerStyles={[styles.mt4]}