🍒 Cherry pick PR #4633 to staging 🍒

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001008505
-        versionName "1.0.85-5"
+        versionCode 1001008506
+        versionName "1.0.85-6"
     }
     splits {
         abi {

ios/ExpensifyCash/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.85.5</string>
+	<string>1.0.85.6</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.0.85-5",
+  "version": "1.0.85-6",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/StatePicker.js

@@ -2,36 +2,40 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {CONST} from 'expensify-common/lib/CONST';
-import Picker from './Picker';
+import ExpensiPicker from './ExpensiPicker';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const STATES = _.map(CONST.STATES, ({stateISO}) => ({
     value: stateISO,
     label: stateISO,
 }));
 
-
-// Add a blank state so users are sure to actively choose a state instead accidentally going with the default choice
-STATES.unshift({
-    value: '',
-    label: '-',
-});
-
 const propTypes = {
     /** A callback method that is called when the value changes and it received the selected value as an argument */
     onChange: PropTypes.func.isRequired,
 
     /** The value that needs to be selected */
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     value: '',
 };
 
-const StatePicker = props => <Picker items={STATES} onChange={props.onChange} value={props.value} />;
+const StatePicker = props => (
+    <ExpensiPicker
+        placeholder={{value: '', label: '-'}}
+        items={STATES}
+        onChange={props.onChange}
+        value={props.value}
+        label={props.translate('common.state')}
+    />
+);
 
 StatePicker.propTypes = propTypes;
 StatePicker.defaultProps = defaultProps;
 StatePicker.displayName = 'StatePicker';
 
-export default StatePicker;
+export default withLocalize(StatePicker);

src/pages/ReimbursementAccount/CompanyStep.js

@@ -58,6 +58,7 @@ class CompanyStep extends React.Component {
             'companyTaxID',
             'incorporationDate',
             'incorporationState',
+            'incorporationType',
             'industryCode',
             'password',
         ];
@@ -155,7 +156,6 @@ class CompanyStep extends React.Component {
                                 />
                             </View>
                             <View style={[styles.flex1]}>
-                                <Text style={[styles.formLabel]}>{this.props.translate('common.state')}</Text>
                                 <StatePicker
                                     onChange={addressState => this.setState({addressState})}
                                     value={this.state.addressState}
@@ -196,7 +196,7 @@ class CompanyStep extends React.Component {
                                 items={_.map(CONST.INCORPORATION_TYPES, (label, value) => ({value, label}))}
                                 onChange={incorporationType => this.setState({incorporationType})}
                                 value={this.state.incorporationType}
-                                placeholder={{value: '', label: 'Type'}}
+                                placeholder={{value: '', label: '-'}}
                             />
                         </View>
                         <View style={[styles.flexRow, styles.mt4]}>
@@ -210,7 +210,6 @@ class CompanyStep extends React.Component {
                                 />
                             </View>
                             <View style={[styles.flex1]}>
-                                <Text style={[styles.formLabel]}>{this.props.translate('common.state')}</Text>
                                 <StatePicker
                                     onChange={incorporationState => this.setState({incorporationState})}
                                     value={this.state.incorporationState}

src/pages/ReimbursementAccount/IdentityForm.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../components/Text';
 import StatePicker from '../../components/StatePicker';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
 import styles from '../../styles/styles';
@@ -110,7 +109,6 @@ const IdentityForm = ({
                     />
                 </View>
                 <View style={[styles.flex1]}>
-                    <Text style={[styles.formLabel]}>{translate('common.state')}</Text>
                     <StatePicker
                         value={state}
                         onChange={val => onFieldChange('state', val)}