🍒 Cherry pick PR #5770 to staging 🍒

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001010713
-        versionName "1.1.7-13"
+        versionCode 1001010714
+        versionName "1.1.7-14"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.7.13</string>
+	<string>1.1.7.14</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.7.13</string>
+	<string>1.1.7.14</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.7-13",
+  "version": "1.1.7-14",
   "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.",

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>
     );

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};