Merge pull request #5770 from Expensify/robert-addressForm

[N6] Use AddressSearch for identity form
Expensify · Oct 13, 2021 · c135cd6 · c135cd6
2 parents 20d82f3 + 08a9660
commit c135cd6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 35 deletions.
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import StatePicker from '../../components/StatePicker';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
+import AddressSearch from '../../components/AddressSearch';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import Text from '../../components/Text';
 import CONST from '../../CONST';
 import DatePicker from '../../components/DatePicker';
 
@@ -77,6 +76,23 @@ const IdentityForm = ({
     const dobErrorText = (errors.dob ? translate('bankAccount.error.dob') : '')
         || (errors.dobAge ? translate('bankAccount.error.age') : '');
 
+    const getFormattedAddressValue = () => {
+        let addressString = '';
+        if (street) {
+            addressString += `${street}, `;
+        }
+        if (city) {
+            addressString += `${city}, `;
+        }
+        if (state) {
+            addressString += `${state}, `;
+        }
+        if (zipCode) {
+            addressString += `${zipCode}`;
+        }
+        return addressString;
+    };
+
     return (
         <View style={style}>
             <View style={[styles.flexRow]}>
@@ -116,41 +132,12 @@ const IdentityForm = ({
                 errorText={errors.ssnLast4 ? translate('bankAccount.error.ssnLast4') : ''}
                 maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
             />
-            <ExpensiTextInput
+            <AddressSearch
                 label={translate('common.personalAddress')}
                 containerStyles={[styles.mt4]}
-                value={street}
-                onChangeText={value => onFieldChange('street', value)}
-                errorText={errors.street ? translate('bankAccount.error.address') : ''}
-            />
-            <Text style={[styles.mutedTextLabel, styles.mt1]}>{translate('common.noPO')}</Text>
-            <View style={[styles.flexRow, styles.mt4]}>
-                <View style={[styles.flex2, styles.mr2]}>
-                    <ExpensiTextInput
-                        label={translate('common.city')}
-                        value={city}
-                        onChangeText={value => onFieldChange('city', value)}
-                        errorText={errors.city ? translate('bankAccount.error.addressCity') : ''}
-                        translateX={-14}
-                    />
-                </View>
-                <View style={[styles.flex1]}>
-                    <StatePicker
-                        value={state}
-                        onChange={value => onFieldChange('state', value)}
-                        errorText={errors.state ? translate('bankAccount.error.addressState') : ''}
-                        hasError={Boolean(errors.state)}
-                    />
-                </View>
-            </View>
-            <ExpensiTextInput
-                label={translate('common.zip')}
-                containerStyles={[styles.mt4]}
-                keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
-                value={zipCode}
-                onChangeText={value => onFieldChange('zipCode', value)}
-                errorText={errors.zipCode ? translate('bankAccount.error.zipCode') : ''}
-                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                value={getFormattedAddressValue()}
+                onChangeText={(fieldName, value) => onFieldChange(fieldName, value)}
+                errorText={errors.street ? translate('bankAccount.error.addressStreet') : ''}
             />
         </View>
     );

diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -93,6 +93,10 @@ class RequestorStep extends React.Component {
             city: 'requestorAddressCity',
             state: 'requestorAddressState',
             zipCode: 'requestorAddressZipCode',
+            addressStreet: 'requestorAddressStreet',
+            addressCity: 'requestorAddressCity',
+            addressState: 'requestorAddressState',
+            addressZipCode: 'requestorAddressZipCode',
         };
         const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
         const newState = {[renamedInputKey]: value};