From 4e7ca90fad3d9f190f947dd294a4965abeeae398 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 16 Sep 2021 11:44:24 -1000
Subject: [PATCH 1/7] Remove confirm modals

---
 src/components/AddPlaidBankAccount.js         |  60 ++--
 src/languages/en.js                           |   4 +-
 src/languages/es.js                           |   4 +-
 src/libs/actions/BankAccounts.js              |   2 +-
 .../ReimbursementAccount/BankAccountStep.js   | 109 +++----
 .../BeneficialOwnersStep.js                   |  24 +-
 src/pages/ReimbursementAccount/CompanyStep.js | 304 +++++++++---------
 .../ReimbursementAccount/ExistingOwners.js    |  40 +--
 .../ReimbursementAccountForm.js               | 119 +++++++
 .../ReimbursementAccountPage.js               |  38 +--
 .../ReimbursementAccount/RequestorStep.js     | 193 ++++++-----
 .../ReimbursementAccount/ValidationStep.js    |  43 +--
 .../reimbursementAccountPropTypes.js          |  38 +++
 src/pages/workspace/WorkspaceCardPage.js      |  12 +-
 src/styles/styles.js                          |   5 +
 15 files changed, 512 insertions(+), 483 deletions(-)
 create mode 100644 src/pages/ReimbursementAccount/ReimbursementAccountForm.js
 create mode 100644 src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 9e760f0bd860..fa10e5c0f19e 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -20,10 +20,10 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import Button from './Button';
 import ExpensiPicker from './ExpensiPicker';
 import Text from './Text';
 import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
+import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -95,7 +95,6 @@ class AddPlaidBankAccount extends React.Component {
 
         this.state = {
             selectedIndex: undefined,
-            isCreatingAccount: false,
             institution: {},
         };
 
@@ -139,7 +138,6 @@ class AddPlaidBankAccount extends React.Component {
         this.props.onSubmit({
             account, plaidLinkToken: this.props.plaidLinkToken,
         });
-        this.setState({isCreatingAccount: true});
     }
 
     render() {
@@ -173,40 +171,32 @@ class AddPlaidBankAccount extends React.Component {
                     />
                 )}
                 {accounts.length > 0 && (
-                    <>
-                        <View style={[styles.m5, styles.flex1]}>
-                            {!_.isEmpty(this.props.text) && (
-                                <Text style={[styles.mb5]}>{this.props.text}</Text>
-                            )}
-                            {/* @TODO there are a bunch of logos to incorporate here to replace this name
-                            https://d2k5nsl2zxldvw.cloudfront.net/images/plaid/bg_plaidLogos_12@2x.png */}
-                            <Text style={[styles.mb5, styles.h1]}>{this.state.institution.name}</Text>
-                            <View style={[styles.mb5]}>
-                                <ExpensiPicker
-                                    label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
-                                    onChange={(index) => {
-                                        this.setState({selectedIndex: Number(index)});
-                                        this.clearError('selectedBank');
-                                    }}
-                                    items={options}
-                                    placeholder={_.isUndefined(this.state.selectedIndex) ? {
-                                        value: '',
-                                        label: this.props.translate('bankAccount.chooseAnAccount'),
-                                    } : {}}
-                                    value={this.state.selectedIndex}
-                                    hasError={this.getErrors().selectedBank}
-                                />
-                            </View>
-                        </View>
-                        <View style={[styles.m5]}>
-                            <Button
-                                success
-                                text={this.props.translate('common.saveAndContinue')}
-                                isLoading={this.state.isCreatingAccount}
-                                onPress={this.selectAccount}
+                    <ReimbursementAccountForm
+                        onSubmit={this.selectAccount}
+                    >
+                        {!_.isEmpty(this.props.text) && (
+                            <Text style={[styles.mb5]}>{this.props.text}</Text>
+                        )}
+                        {/* @TODO there are a bunch of logos to incorporate here to replace this name
+                        https://d2k5nsl2zxldvw.cloudfront.net/images/plaid/bg_plaidLogos_12@2x.png */}
+                        <Text style={[styles.mb5, styles.h1]}>{this.state.institution.name}</Text>
+                        <View style={[styles.mb5]}>
+                            <ExpensiPicker
+                                label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
+                                onChange={(index) => {
+                                    this.setState({selectedIndex: Number(index)});
+                                    this.clearError('selectedBank');
+                                }}
+                                items={options}
+                                placeholder={_.isUndefined(this.state.selectedIndex) ? {
+                                    value: '',
+                                    label: this.props.translate('bankAccount.chooseAnAccount'),
+                                } : {}}
+                                value={this.state.selectedIndex}
+                                hasError={this.getErrors().selectedBank}
                             />
                         </View>
-                    </>
+                    </ReimbursementAccountForm>
                 )}
             </>
         );
diff --git a/src/languages/en.js b/src/languages/en.js
index 7d0f457fd05c..2f67c10a91e6 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -381,9 +381,7 @@ export default {
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: ({fromNow}) => `For security reasons, we're taking a break from bank account setup so you can double-check your company information. Please try again ${fromNow}. Sorry!`,
-        confirmModalTitle: 'Oops',
-        confirmModalPrompt: 'Please double check any highlighted fields and try again.',
-        confirmModalConfirmText: 'Got it',
+        defaultFormAlertPrompt: 'Please double check any highlighted fields and try again.',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             taxID: 'Please enter a valid Tax ID Number',
diff --git a/src/languages/es.js b/src/languages/es.js
index 442a69bb320c..bb41d825ce77 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -381,9 +381,7 @@ export default {
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque de la cuenta bancaria.',
         hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes agregar tu número de teléfono como nombre de usuario secundario.',
         hasBeenThrottledError: ({fromNow}) => `Por razones de seguridad, nos tomamos un descanso en la configuración de la cuenta bancaria para que pueda verificar la información de su empresa. Inténtalo de nuevo ${fromNow}. ¡Lo siento!`,
-        confirmModalTitle: 'Ups',
-        confirmModalPrompt: 'Por favor, comprueba los campos resaltados e inténtalo de nuevo.',
-        confirmModalConfirmText: 'OK',
+        defaultFormAlertPrompt: 'Por favor, comprueba los campos resaltados e inténtalo de nuevo.',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             taxID: 'Ingresa un número de identificación fiscal válido',
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 3a0b67293906..47d9b70703de 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -620,7 +620,7 @@ function showBankAccountFormValidationError(error) {
  */
 function setupWithdrawalAccount(data) {
     let nextStep;
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true, errorModalMessage: '', errors: null});
 
     const newACHData = {
         ...reimbursementAccountInSetup,
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 941fc76f94b6..9db7b5b27ffc 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -1,7 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, Image, ScrollView} from 'react-native';
-import PropTypes from 'prop-types';
+import {View, Image} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
@@ -10,7 +9,6 @@ import {
 } from '../../components/Icon/Expensicons';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
-import Button from '../../components/Button';
 import Icon from '../../components/Icon';
 import colors from '../../styles/colors';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -30,13 +28,13 @@ import {
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
+import ReimbursementAccountForm from './ReimbursementAccountForm';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 
 const propTypes = {
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Error set when handling the API response */
-        error: PropTypes.string,
-    }).isRequired,
+    // eslint-disable-next-line react/no-unused-prop-types
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
 
     ...withLocalizePropTypes,
 };
@@ -230,58 +228,51 @@ class BankAccountStep extends React.Component {
                     />
                 )}
                 {this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (
-                    <>
-                        <ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={[styles.p5, styles.flexGrow1]}>
-                            <Text style={[styles.mb5]}>
-                                {this.props.translate('bankAccount.checkHelpLine')}
-                            </Text>
-                            <Image
-                                resizeMode="contain"
-                                style={[styles.exampleCheckImage, styles.mb5]}
-                                source={exampleCheckImage}
-                            />
-                            <ExpensiTextInput
-                                label={this.props.translate('bankAccount.routingNumber')}
-                                keyboardType="number-pad"
-                                value={this.state.routingNumber}
-                                onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
-                                disabled={shouldDisableInputs}
-                                errorText={this.getErrorText('routingNumber')}
-                            />
-                            <ExpensiTextInput
-                                containerStyles={[styles.mt4]}
-                                label={this.props.translate('bankAccount.accountNumber')}
-                                keyboardType="number-pad"
-                                value={this.state.accountNumber}
-                                onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
-                                disabled={shouldDisableInputs}
-                                errorText={this.getErrorText('accountNumber')}
-                            />
-                            <CheckboxWithLabel
-                                style={[styles.mb4, styles.mt5]}
-                                isChecked={this.state.hasAcceptedTerms}
-                                onPress={this.toggleTerms}
-                                LabelComponent={() => (
-                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text>
-                                            {this.props.translate('common.iAcceptThe')}
-                                        </Text>
-                                        <TextLink href="https://use.expensify.com/terms">
-                                            {`Expensify ${this.props.translate('common.termsOfService')}`}
-                                        </TextLink>
-                                    </View>
-                                )}
-                                hasError={this.getErrors().hasAcceptedTerms}
-                            />
-                            <View style={[styles.flex1, styles.justifyContentEnd]}>
-                                <Button
-                                    success
-                                    text={this.props.translate('common.saveAndContinue')}
-                                    onPress={this.addManualAccount}
-                                />
-                            </View>
-                        </ScrollView>
-                    </>
+                    <ReimbursementAccountForm
+                        onSubmit={this.addManualAccount}
+                    >
+                        <Text style={[styles.mb5]}>
+                            {this.props.translate('bankAccount.checkHelpLine')}
+                        </Text>
+                        <Image
+                            resizeMode="contain"
+                            style={[styles.exampleCheckImage, styles.mb5]}
+                            source={exampleCheckImage}
+                        />
+                        <ExpensiTextInput
+                            label={this.props.translate('bankAccount.routingNumber')}
+                            keyboardType="number-pad"
+                            value={this.state.routingNumber}
+                            onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
+                            disabled={shouldDisableInputs}
+                            errorText={this.getErrorText('routingNumber')}
+                        />
+                        <ExpensiTextInput
+                            containerStyles={[styles.mt4]}
+                            label={this.props.translate('bankAccount.accountNumber')}
+                            keyboardType="number-pad"
+                            value={this.state.accountNumber}
+                            onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
+                            disabled={shouldDisableInputs}
+                            errorText={this.getErrorText('accountNumber')}
+                        />
+                        <CheckboxWithLabel
+                            style={[styles.mb4, styles.mt5]}
+                            isChecked={this.state.hasAcceptedTerms}
+                            onPress={this.toggleTerms}
+                            LabelComponent={() => (
+                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text>
+                                        {this.props.translate('common.iAcceptThe')}
+                                    </Text>
+                                    <TextLink href="https://use.expensify.com/terms">
+                                        {`Expensify ${this.props.translate('common.termsOfService')}`}
+                                    </TextLink>
+                                </View>
+                            )}
+                            hasError={this.getErrors().hasAcceptedTerms}
+                        />
+                    </ReimbursementAccountForm>
                 )}
             </View>
         );
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
index f97ca93500b6..49c954f9eccd 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
+++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
@@ -1,14 +1,13 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Text from '../../components/Text';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import styles from '../../styles/styles';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
-import Button from '../../components/Button';
 import IdentityForm from './IdentityForm';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import {
@@ -25,6 +24,8 @@ import {isValidIdentity} from '../../libs/ValidationUtils';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
 import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import ReimbursementAccountForm from './ReimbursementAccountForm';
 
 const propTypes = {
     /** Name of the company */
@@ -33,10 +34,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Error set when handling the API response */
-        error: PropTypes.string,
-    }).isRequired,
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
 };
 
 class BeneficialOwnersStep extends React.Component {
@@ -144,7 +142,9 @@ class BeneficialOwnersStep extends React.Component {
                     onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR)}
                     shouldShowBackButton
                 />
-                <ScrollView style={[styles.flex1, styles.w100, styles.ph5]} contentContainerStyle={styles.flexGrow1}>
+                <ReimbursementAccountForm
+                    onSubmit={this.submit}
+                >
                     <Text style={[styles.mb5]}>
                         <Text>{this.props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
                     </Text>
@@ -254,15 +254,7 @@ class BeneficialOwnersStep extends React.Component {
                         errorText={this.props.reimbursementAccount.error === this.props.translate('beneficialOwnersStep.error.certify')
                             ? this.props.translate('beneficialOwnersStep.error.certify') : ''}
                     />
-                    <View style={[styles.flex1, styles.justifyContentEnd, styles.pb4]}>
-                        <Button
-                            success
-                            style={[styles.w100, styles.mt4, styles.mb1]}
-                            text={this.props.translate('common.saveAndContinue')}
-                            onPress={this.submit}
-                        />
-                    </View>
-                </ScrollView>
+                </ReimbursementAccountForm>
             </>
         );
     }
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 88b2483fde5b..b8744ef88376 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -1,9 +1,8 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, ScrollView} from 'react-native';
+import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import moment from 'moment';
-import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import CONST from '../../CONST';
@@ -18,7 +17,6 @@ import Navigation from '../../libs/Navigation/Navigation';
 import Text from '../../components/Text';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
 import StatePicker from '../../components/StatePicker';
@@ -30,13 +28,13 @@ import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import ExpensiPicker from '../../components/ExpensiPicker';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import ReimbursementAccountForm from './ReimbursementAccountForm';
 
 const propTypes = {
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Error set when handling the API response */
-        error: PropTypes.string,
-    }).isRequired,
+    // eslint-disable-next-line react/no-unused-prop-types
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
 
     ...withLocalizePropTypes,
 };
@@ -182,162 +180,154 @@ class CompanyStep extends React.Component {
                     onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
-                <ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={styles.flexGrow1}>
-                    <View style={[styles.p4]}>
-                        <Text>{this.props.translate('companyStep.subtitle')}</Text>
-                        <ExpensiTextInput
-                            label={this.props.translate('companyStep.legalBusinessName')}
-                            containerStyles={[styles.mt4]}
-                            onChangeText={value => this.clearErrorAndSetValue('companyName', value)}
-                            value={this.state.companyName}
-                            disabled={shouldDisableCompanyName}
-                            errorText={this.getErrorText('companyName')}
-                        />
-                        <ExpensiTextInput
-                            label={this.props.translate('common.companyAddress')}
-                            containerStyles={[styles.mt4]}
-                            onChangeText={value => this.clearErrorAndSetValue('addressStreet', value)}
-                            value={this.state.addressStreet}
-                            errorText={this.getErrorText('addressStreet')}
-                        />
-                        <Text style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</Text>
-                        <View style={[styles.flexRow, styles.mt4]}>
-                            <View style={[styles.flex2, styles.mr2]}>
-                                <ExpensiTextInput
-                                    label={this.props.translate('common.city')}
-                                    onChangeText={value => this.clearErrorAndSetValue('addressCity', value)}
-                                    value={this.state.addressCity}
-                                    errorText={this.getErrorText('addressCity')}
-                                />
-                            </View>
-                            <View style={[styles.flex1]}>
-                                <StatePicker
-                                    onChange={value => this.clearErrorAndSetValue('addressState', value)}
-                                    value={this.state.addressState}
-                                    hasError={this.getErrors().addressState}
-                                />
-                            </View>
-                        </View>
-                        <ExpensiTextInput
-                            label={this.props.translate('common.zip')}
-                            containerStyles={[styles.mt4]}
-                            onChangeText={value => this.clearErrorAndSetValue('addressZipCode', value)}
-                            value={this.state.addressZipCode}
-                            errorText={this.getErrorText('addressZipCode')}
-                        />
-                        <ExpensiTextInput
-                            label={this.props.translate('common.phoneNumber')}
-                            containerStyles={[styles.mt4]}
-                            keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                            onChangeText={value => this.clearErrorAndSetValue('companyPhone', value)}
-                            value={this.state.companyPhone}
-                            placeholder={this.props.translate('companyStep.companyPhonePlaceholder')}
-                            errorText={this.getErrorText('companyPhone')}
-                        />
-                        <ExpensiTextInput
-                            label={this.props.translate('companyStep.companyWebsite')}
-                            containerStyles={[styles.mt4]}
-                            onChangeText={value => this.clearErrorAndSetValue('website', value)}
-                            value={this.state.website}
-                            errorText={this.getErrorText('website')}
-                        />
-                        <ExpensiTextInput
-                            label={this.props.translate('companyStep.taxIDNumber')}
-                            containerStyles={[styles.mt4]}
-                            keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                            onChangeText={value => this.clearErrorAndSetValue('companyTaxID', value)}
-                            value={this.state.companyTaxID}
-                            disabled={shouldDisableCompanyTaxID}
-                            errorText={this.getErrorText('companyTaxID')}
-                        />
-                        <View style={styles.mt4}>
-                            <ExpensiPicker
-                                label={this.props.translate('companyStep.companyType')}
-                                items={_.map(CONST.INCORPORATION_TYPES, (label, value) => ({value, label}))}
-                                onChange={value => this.clearErrorAndSetValue('incorporationType', value)}
-                                value={this.state.incorporationType}
-                                placeholder={{value: '', label: '-'}}
-                                hasError={this.getErrors().incorporationType}
+                <ReimbursementAccountForm
+                    onSubmit={this.submit}
+                >
+                    <Text>{this.props.translate('companyStep.subtitle')}</Text>
+                    <ExpensiTextInput
+                        label={this.props.translate('companyStep.legalBusinessName')}
+                        containerStyles={[styles.mt4]}
+                        onChangeText={value => this.clearErrorAndSetValue('companyName', value)}
+                        value={this.state.companyName}
+                        disabled={shouldDisableCompanyName}
+                        errorText={this.getErrorText('companyName')}
+                    />
+                    <ExpensiTextInput
+                        label={this.props.translate('common.companyAddress')}
+                        containerStyles={[styles.mt4]}
+                        onChangeText={value => this.clearErrorAndSetValue('addressStreet', value)}
+                        value={this.state.addressStreet}
+                        errorText={this.getErrorText('addressStreet')}
+                    />
+                    <Text style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</Text>
+                    <View style={[styles.flexRow, styles.mt4]}>
+                        <View style={[styles.flex2, styles.mr2]}>
+                            <ExpensiTextInput
+                                label={this.props.translate('common.city')}
+                                onChangeText={value => this.clearErrorAndSetValue('addressCity', value)}
+                                value={this.state.addressCity}
+                                errorText={this.getErrorText('addressCity')}
                             />
                         </View>
-                        <View style={[styles.flexRow, styles.mt4]}>
-                            <View style={[styles.flex2, styles.mr2]}>
-                                {/* TODO: Replace with date picker */}
-                                <ExpensiTextInput
-                                    label={this.props.translate('companyStep.incorporationDate')}
-                                    onChangeText={value => this.clearErrorAndSetValue('incorporationDate', value)}
-                                    value={this.state.incorporationDate}
-                                    placeholder={this.props.translate('companyStep.incorporationDatePlaceholder')}
-                                    errorText={this.getErrorText('incorporationDate')}
-                                />
-                            </View>
-                            <View style={[styles.flex1]}>
-                                <StatePicker
-                                    onChange={value => this.clearErrorAndSetValue('incorporationState', value)}
-                                    value={this.state.incorporationState}
-                                    hasError={this.getErrors().incorporationState}
-                                />
-                            </View>
+                        <View style={[styles.flex1]}>
+                            <StatePicker
+                                onChange={value => this.clearErrorAndSetValue('addressState', value)}
+                                value={this.state.addressState}
+                                hasError={this.getErrors().addressState}
+                            />
                         </View>
-                        {/* TODO: Replace with NAICS picker */}
-                        <ExpensiTextInput
-                            label={this.props.translate('companyStep.industryClassificationCode')}
-                            helpLinkText={this.props.translate('common.whatThis')}
-                            helpLinkURL="https://www.naics.com/search/"
-                            containerStyles={[styles.mt4]}
-                            onChangeText={value => this.clearErrorAndSetValue('industryCode', value)}
-                            value={this.state.industryCode}
-                            errorText={this.getErrorText('industryCode')}
-                        />
-                        <ExpensiTextInput
-                            label={`Expensify ${this.props.translate('common.password')}`}
-                            containerStyles={[styles.mt4]}
-                            secureTextEntry
-                            textContentType="password"
-                            onChangeText={value => this.clearErrorAndSetValue('password', value)}
-                            value={this.state.password}
-                            onSubmitEditing={this.submit}
-                            errorText={this.getErrorText('password')}
-
-                            // Use new-password to prevent an autoComplete bug https://github.com/Expensify/Expensify/issues/173177
-                            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                            autoCompleteType="new-password"
-                        />
-                        <CheckboxWithLabel
-                            isChecked={this.state.hasNoConnectionToCannabis}
-                            onPress={() => {
-                                this.setState((prevState) => {
-                                    const newState = {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis};
-                                    updateReimbursementAccountDraft(newState);
-                                    return newState;
-                                });
-                                this.clearError('hasNoConnectionToCannabis');
-                            }}
-                            LabelComponent={() => (
-                                <>
-                                    <Text>{`${this.props.translate('companyStep.confirmCompanyIsNot')} `}</Text>
-                                    <TextLink
-                                        // eslint-disable-next-line max-len
-                                        href="https://community.expensify.com/discussion/6191/list-of-restricted-businesses"
-                                    >
-                                        {`${this.props.translate('companyStep.listOfRestrictedBusinesses')}.`}
-                                    </TextLink>
-                                </>
-                            )}
-                            style={[styles.mt4]}
-                            errorText={this.getErrorText('hasNoConnectionToCannabis')}
-                            hasError={this.getErrors().hasNoConnectionToCannabis}
-                        />
                     </View>
-                    <View style={[styles.flex1, styles.justifyContentEnd, styles.p4]}>
-                        <Button
-                            success
-                            onPress={this.submit}
-                            style={[styles.w100, styles.mt4, styles.mb1]}
-                            text={this.props.translate('common.saveAndContinue')}
+                    <ExpensiTextInput
+                        label={this.props.translate('common.zip')}
+                        containerStyles={[styles.mt4]}
+                        onChangeText={value => this.clearErrorAndSetValue('addressZipCode', value)}
+                        value={this.state.addressZipCode}
+                        errorText={this.getErrorText('addressZipCode')}
+                    />
+                    <ExpensiTextInput
+                        label={this.props.translate('common.phoneNumber')}
+                        containerStyles={[styles.mt4]}
+                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                        onChangeText={value => this.clearErrorAndSetValue('companyPhone', value)}
+                        value={this.state.companyPhone}
+                        placeholder={this.props.translate('companyStep.companyPhonePlaceholder')}
+                        errorText={this.getErrorText('companyPhone')}
+                    />
+                    <ExpensiTextInput
+                        label={this.props.translate('companyStep.companyWebsite')}
+                        containerStyles={[styles.mt4]}
+                        onChangeText={value => this.clearErrorAndSetValue('website', value)}
+                        value={this.state.website}
+                        errorText={this.getErrorText('website')}
+                    />
+                    <ExpensiTextInput
+                        label={this.props.translate('companyStep.taxIDNumber')}
+                        containerStyles={[styles.mt4]}
+                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                        onChangeText={value => this.clearErrorAndSetValue('companyTaxID', value)}
+                        value={this.state.companyTaxID}
+                        disabled={shouldDisableCompanyTaxID}
+                        errorText={this.getErrorText('companyTaxID')}
+                    />
+                    <View style={styles.mt4}>
+                        <ExpensiPicker
+                            label={this.props.translate('companyStep.companyType')}
+                            items={_.map(CONST.INCORPORATION_TYPES, (label, value) => ({value, label}))}
+                            onChange={value => this.clearErrorAndSetValue('incorporationType', value)}
+                            value={this.state.incorporationType}
+                            placeholder={{value: '', label: '-'}}
+                            hasError={this.getErrors().incorporationType}
                         />
                     </View>
-                </ScrollView>
+                    <View style={[styles.flexRow, styles.mt4]}>
+                        <View style={[styles.flex2, styles.mr2]}>
+                            {/* TODO: Replace with date picker */}
+                            <ExpensiTextInput
+                                label={this.props.translate('companyStep.incorporationDate')}
+                                onChangeText={value => this.clearErrorAndSetValue('incorporationDate', value)}
+                                value={this.state.incorporationDate}
+                                placeholder={this.props.translate('companyStep.incorporationDatePlaceholder')}
+                                errorText={this.getErrorText('incorporationDate')}
+                            />
+                        </View>
+                        <View style={[styles.flex1]}>
+                            <StatePicker
+                                onChange={value => this.clearErrorAndSetValue('incorporationState', value)}
+                                value={this.state.incorporationState}
+                                hasError={this.getErrors().incorporationState}
+                            />
+                        </View>
+                    </View>
+                    {/* TODO: Replace with NAICS picker */}
+                    <ExpensiTextInput
+                        label={this.props.translate('companyStep.industryClassificationCode')}
+                        helpLinkText={this.props.translate('common.whatThis')}
+                        helpLinkURL="https://www.naics.com/search/"
+                        containerStyles={[styles.mt4]}
+                        onChangeText={value => this.clearErrorAndSetValue('industryCode', value)}
+                        value={this.state.industryCode}
+                        errorText={this.getErrorText('industryCode')}
+                    />
+                    <ExpensiTextInput
+                        label={`Expensify ${this.props.translate('common.password')}`}
+                        containerStyles={[styles.mt4]}
+                        secureTextEntry
+                        textContentType="password"
+                        onChangeText={value => this.clearErrorAndSetValue('password', value)}
+                        value={this.state.password}
+                        onSubmitEditing={this.submit}
+                        errorText={this.getErrorText('password')}
+
+                        // Use new-password to prevent an autoComplete bug https://github.com/Expensify/Expensify/issues/173177
+                        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                        autoCompleteType="new-password"
+                    />
+                    <CheckboxWithLabel
+                        isChecked={this.state.hasNoConnectionToCannabis}
+                        onPress={() => {
+                            this.setState((prevState) => {
+                                const newState = {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis};
+                                updateReimbursementAccountDraft(newState);
+                                return newState;
+                            });
+                            this.clearError('hasNoConnectionToCannabis');
+                        }}
+                        LabelComponent={() => (
+                            <>
+                                <Text>{`${this.props.translate('companyStep.confirmCompanyIsNot')} `}</Text>
+                                <TextLink
+                                    // eslint-disable-next-line max-len
+                                    href="https://community.expensify.com/discussion/6191/list-of-restricted-businesses"
+                                >
+                                    {`${this.props.translate('companyStep.listOfRestrictedBusinesses')}.`}
+                                </TextLink>
+                            </>
+                        )}
+                        style={[styles.mt4]}
+                        errorText={this.getErrorText('hasNoConnectionToCannabis')}
+                        hasError={this.getErrors().hasNoConnectionToCannabis}
+                    />
+                </ReimbursementAccountForm>
             </>
         );
     }
diff --git a/src/pages/ReimbursementAccount/ExistingOwners.js b/src/pages/ReimbursementAccount/ExistingOwners.js
index c3fea5a860a7..2559a41c9970 100644
--- a/src/pages/ReimbursementAccount/ExistingOwners.js
+++ b/src/pages/ReimbursementAccount/ExistingOwners.js
@@ -1,29 +1,23 @@
 import _ from 'underscore';
 import React from 'react';
-import PropTypes from 'prop-types';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Text from '../../components/Text';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import CONST from '../../CONST';
-import {goToWithdrawalAccountSetupStep, hideBankAccountErrorModal} from '../../libs/actions/BankAccounts';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 
 const propTypes = {
     /** Reimbursement account state with list of existing owners */
-    reimbursementAccount: PropTypes.shape({
-        /** The existing owners for if the bank account is already owned */
-        existingOwners: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
     ...withLocalizePropTypes,
 };
 
 const ExistingOwners = ({reimbursementAccount, translate}) => (
-    <View>
-        <Text style={[styles.mb4]}>
-            <Text>
+    <>
+        <Text>
+            <Text style={styles.mutedTextLabel}>
                 {translate('bankAccount.error.existingOwners.alreadyInUse')}
             </Text>
             {reimbursementAccount.existingOwners && _.map(reimbursementAccount.existingOwners, (existingOwner, i) => {
@@ -35,42 +29,32 @@ const ExistingOwners = ({reimbursementAccount, translate}) => (
                 }
                 return (
                     <React.Fragment key={existingOwner}>
-                        <Text>{separator}</Text>
-                        <Text style={styles.textStrong}>{existingOwner}</Text>
+                        <Text style={styles.mutedTextLabel}>{separator}</Text>
+                        <Text style={[styles.mutedTextLabel, styles.textStrong]}>{existingOwner}</Text>
                         {i === reimbursementAccount.existingOwners.length - 1 && <Text>.</Text>}
                     </React.Fragment>
                 );
             })}
         </Text>
-        <Text style={[styles.mb4]}>
+        <Text style={styles.mutedTextLabel}>
             {translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
         </Text>
         <Text>
-            <Text>
+            <Text style={styles.mutedTextLabel}>
                 {translate('bankAccount.error.existingOwners.alternatively')}
             </Text>
-            <Text
-                style={styles.link}
-                onPress={() => {
-                    goToWithdrawalAccountSetupStep(
-                        CONST.BANK_ACCOUNT.STEP.COMPANY,
-                        reimbursementAccount.achData || {},
-                    );
-                    hideBankAccountErrorModal();
-                }}
-            >
+            <Text style={styles.mutedTextLabel}>
                 {translate(
                     'bankAccount.error.existingOwners.setUpThisAccountByYourself',
                 )}
             </Text>
-            <Text>
+            <Text style={styles.mutedTextLabel}>
                 {translate('bankAccount.error.existingOwners.validationProcessAgain')}
             </Text>
         </Text>
-    </View>
+    </>
 );
 
-
 ExistingOwners.propTypes = propTypes;
 export default compose(
     withLocalize,
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
new file mode 100644
index 000000000000..6fa7036e7388
--- /dev/null
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
@@ -0,0 +1,119 @@
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+
+import TextLink from '../../components/TextLink';
+import Text from '../../components/Text';
+import Button from '../../components/Button';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import ExistingOwners from './ExistingOwners';
+import Icon from '../../components/Icon';
+import {Exclamation} from '../../components/Icon/Expensicons';
+import colors from '../../styles/colors';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+
+const propTypes = {
+    /** ACH data for the withdrawal account actively being set up */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
+    /** Called when the form is submitted */
+    onSubmit: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    reimbursementAccount: {},
+};
+
+class ReimbursementAccountForm extends React.Component {
+    /**
+     * @returns {React.Component|string}
+     */
+    getAlertPrompt() {
+        let error = '';
+
+        if (lodashGet(this.props.reimbursementAccount, 'existingOwners', []).length > 0) {
+            error = (
+                <ExistingOwners />
+            );
+        } else if (!_.isEmpty(this.props.reimbursementAccount.errorModalMessage)) {
+            error = (
+                <Text style={styles.mutedTextLabel}>{this.props.reimbursementAccount.errorModalMessage}</Text>
+            );
+        } else {
+            error = (
+                <>
+                    {/* @TODO translate {this.props.translate('bankAccount.defaultFormAlertPrompt')} */}
+                    <Text style={styles.mutedTextLabel}>Please </Text>
+                    <TextLink
+                        style={styles.label}
+                        onPress={() => {
+                            this.form.scrollTo({y: 0, animated: true});
+                        }}
+                    >
+                        {'fix the errors '}
+                    </TextLink>
+                    <Text style={styles.mutedTextLabel}>in the form before continuing.</Text>
+                </>
+            );
+        }
+
+        return (
+            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                {error}
+            </View>
+        );
+    }
+
+    render() {
+        const isErrorVisible = _.size(lodashGet(this.props, 'reimbursementAccount.errors', {})) > 0
+            || lodashGet(this.props, 'reimbursementAccount.errorModalMessage', '').length > 0
+
+            // @TODO once all validation errors show in multiples we can remove this check
+            || lodashGet(this.props, 'reimbursementAccount.error', '').length > 0;
+
+        return (
+            <ScrollView
+                style={[styles.w100, styles.flex1]}
+                ref={el => this.form = el}
+                contentContainerStyle={styles.flexGrow1}
+            >
+                {/* Form elements */}
+                <View style={[styles.mh5, styles.mb5]}>
+                    {this.props.children}
+                </View>
+                <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
+                    {isErrorVisible && (
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                            <Icon src={Exclamation} fill={colors.red} />
+                            {this.getAlertPrompt()}
+                        </View>
+                    )}
+                    <Button
+                        success
+                        text={this.props.translate('common.saveAndContinue')}
+                        onPress={this.props.onSubmit}
+                    />
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+ReimbursementAccountForm.propTypes = propTypes;
+ReimbursementAccountForm.defaultProps = defaultProps;
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+)(ReimbursementAccountForm);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 51d4687ce3c7..3adffd340a27 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import {
     fetchFreePlanVerifiedBankAccount,
-    hideBankAccountErrorModal,
     hideBankAccountErrors,
 } from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -31,28 +30,14 @@ import BeneficialOwnersStep from './BeneficialOwnersStep';
 import EnableStep from './EnableStep';
 import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import ConfirmModal from '../../components/ConfirmModal';
-import ExistingOwners from './ExistingOwners';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 
 const propTypes = {
     /** List of betas */
     betas: PropTypes.arrayOf(PropTypes.string).isRequired,
 
     /** ACH data for the withdrawal account actively being set up */
-    reimbursementAccount: PropTypes.shape({
-        /** Whether we are loading the data via the API */
-        loading: PropTypes.bool,
-
-        /** A date that indicates the user has been throttled */
-        throttledDate: PropTypes.string,
-
-        /** Additional data for the account in setup */
-        achData: PropTypes.shape({
-
-            /** Step of the setup flow that we are on. Determines which view is presented. */
-            currentStep: PropTypes.string,
-        }),
-    }),
+    reimbursementAccount: reimbursementAccountPropTypes,
 
     /** Current session for the user */
     session: PropTypes.shape({
@@ -152,17 +137,6 @@ class ReimbursementAccountPage extends React.Component {
         }
     }
 
-    /**
-     * @returns {React.Component|string}
-     */
-    getErrorModalPrompt() {
-        if (lodashGet(this.props.reimbursementAccount, 'existingOwners', []).length > 0) {
-            return <ExistingOwners />;
-        }
-
-        return this.props.reimbursementAccount.errorModalMessage || this.props.translate('bankAccount.confirmModalPrompt');
-    }
-
     render() {
         if (!Permissions.canUseFreePlan(this.props.betas)) {
             console.debug('Not showing new bank account page because user is not on free plan beta');
@@ -246,14 +220,6 @@ class ReimbursementAccountPage extends React.Component {
                             achData={this.props.reimbursementAccount.achData}
                         />
                     )}
-                    <ConfirmModal
-                        title={this.props.translate('bankAccount.confirmModalTitle')}
-                        onConfirm={hideBankAccountErrorModal}
-                        prompt={this.getErrorModalPrompt()}
-                        isVisible={lodashGet(this.props, 'reimbursementAccount.isErrorModalVisible', false)}
-                        confirmText={this.props.translate('bankAccount.confirmModalConfirmText')}
-                        shouldShowCancelButton={false}
-                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 5d6a3cb7b823..57f48ac46185 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import lodashGet from 'lodash/get';
-import {View, ScrollView} from 'react-native';
-import PropTypes from 'prop-types';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -19,20 +18,18 @@ import {
     showBankAccountFormValidationError,
     updateReimbursementAccountDraft,
 } from '../../libs/actions/BankAccounts';
-import Button from '../../components/Button';
 import IdentityForm from './IdentityForm';
 import {isRequiredFulfilled, isValidIdentity} from '../../libs/ValidationUtils';
 import Onfido from '../../components/Onfido';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import ReimbursementAccountForm from './ReimbursementAccountForm';
 
 const propTypes = {
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Error set when handling the API response */
-        error: PropTypes.string,
-    }).isRequired,
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
 
     ...withLocalizePropTypes,
 };
@@ -148,103 +145,93 @@ class RequestorStep extends React.Component {
                         }}
                     />
                 ) : (
-                    <>
-                        <ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={styles.flexGrow1}>
-                            <View style={[styles.p4]}>
-                                <Text>{this.props.translate('requestorStep.subtitle')}</Text>
-                                <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
-                                    <TextLink
-                                        style={[styles.textMicro]}
-                                        // eslint-disable-next-line max-len
-                                        href="https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account"
-                                    >
-                                        {`${this.props.translate('requestorStep.learnMore')}`}
-                                    </TextLink>
-                                    <Text style={[styles.textMicroSupporting]}>{' | '}</Text>
-                                    <TextLink
-                                        style={[styles.textMicro, styles.textLink]}
-                                        // eslint-disable-next-line max-len
-                                        href="https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information"
-                                    >
-                                        {`${this.props.translate('requestorStep.isMyDataSafe')}`}
-                                    </TextLink>
+                    <ReimbursementAccountForm
+                        onSubmit={this.submit}
+                    >
+                        <Text>{this.props.translate('requestorStep.subtitle')}</Text>
+                        <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
+                            <TextLink
+                                style={[styles.textMicro]}
+                                // eslint-disable-next-line max-len
+                                href="https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account"
+                            >
+                                {`${this.props.translate('requestorStep.learnMore')}`}
+                            </TextLink>
+                            <Text style={[styles.textMicroSupporting]}>{' | '}</Text>
+                            <TextLink
+                                style={[styles.textMicro, styles.textLink]}
+                                // eslint-disable-next-line max-len
+                                href="https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information"
+                            >
+                                {`${this.props.translate('requestorStep.isMyDataSafe')}`}
+                            </TextLink>
+                        </View>
+                        <IdentityForm
+                            onFieldChange={(field, value) => this.onFieldChange(field, value)}
+                            values={{
+                                firstName: this.state.firstName,
+                                lastName: this.state.lastName,
+                                street: this.state.requestorAddressStreet,
+                                city: this.state.requestorAddressCity,
+                                state: this.state.requestorAddressState,
+                                zipCode: this.state.requestorAddressZipCode,
+                                dob: this.state.dob,
+                                ssnLast4: this.state.ssnLast4,
+                            }}
+                            error={this.props.reimbursementAccount.error}
+                        />
+                        <CheckboxWithLabel
+                            isChecked={this.state.isControllingOfficer}
+                            onPress={() => {
+                                if (this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')) {
+                                    hideBankAccountErrors();
+                                }
+
+                                this.setState((prevState) => {
+                                    const newState = {isControllingOfficer: !prevState.isControllingOfficer};
+                                    updateReimbursementAccountDraft(newState);
+                                    return newState;
+                                });
+                            }}
+                            LabelComponent={() => (
+                                <View style={[styles.flex1, styles.pr1]}>
+                                    <Text>
+                                        {this.props.translate('requestorStep.isControllingOfficer')}
+                                    </Text>
                                 </View>
-                                <IdentityForm
-                                    onFieldChange={(field, value) => this.onFieldChange(field, value)}
-                                    values={{
-                                        firstName: this.state.firstName,
-                                        lastName: this.state.lastName,
-                                        street: this.state.requestorAddressStreet,
-                                        city: this.state.requestorAddressCity,
-                                        state: this.state.requestorAddressState,
-                                        zipCode: this.state.requestorAddressZipCode,
-                                        dob: this.state.dob,
-                                        ssnLast4: this.state.ssnLast4,
-                                    }}
-                                    error={this.props.reimbursementAccount.error}
-                                />
-                                <CheckboxWithLabel
-                                    isChecked={this.state.isControllingOfficer}
-                                    onPress={() => {
-                                        if (this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')) {
-                                            hideBankAccountErrors();
-                                        }
-
-                                        this.setState((prevState) => {
-                                            const newState = {isControllingOfficer: !prevState.isControllingOfficer};
-                                            updateReimbursementAccountDraft(newState);
-                                            return newState;
-                                        });
-                                    }}
-                                    LabelComponent={() => (
-                                        <View style={[styles.flex1, styles.pr1]}>
-                                            <Text>
-                                                {this.props.translate('requestorStep.isControllingOfficer')}
-                                            </Text>
-                                        </View>
-                                    )}
-                                    style={[styles.mt4]}
-                                    hasError={this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')}
-                                    errorText={this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')
-                                        ? this.props.translate('requestorStep.isControllingOfficerError') : ''}
-                                />
-                                <Text style={[styles.textMicroSupporting, styles.mt5]}>
-                                    {this.props.translate('requestorStep.financialRegulations')}
-                                </Text>
-                                <Text style={[styles.mt3, styles.textMicroSupporting]}>
-                                    {this.props.translate('requestorStep.onFidoConditions')}
-                                    <TextLink
-                                        style={styles.textMicro}
-                                        href="https://onfido.com/facial-scan-policy-and-release/"
-                                    >
-                                        {`${this.props.translate('requestorStep.onFidoFacialScan')}`}
-                                    </TextLink>
-                                    {', '}
-                                    <TextLink
-                                        style={styles.textMicro}
-                                        href="https://onfido.com/privacy/"
-                                    >
-                                        {`${this.props.translate('common.privacyPolicy')}`}
-                                    </TextLink>
-                                    {` ${this.props.translate('common.and')} `}
-                                    <TextLink
-                                        style={styles.textMicro}
-                                        href="https://onfido.com/terms-of-service/"
-                                    >
-                                        {`${this.props.translate('common.termsOfService')}`}
-                                    </TextLink>
-                                </Text>
-                            </View>
-                            <View style={[styles.flex1, styles.justifyContentEnd, styles.ph4, styles.pb4]}>
-                                <Button
-                                    success
-                                    onPress={this.submit}
-                                    style={[styles.w100, styles.mt4]}
-                                    text={this.props.translate('common.saveAndContinue')}
-                                />
-                            </View>
-                        </ScrollView>
-                    </>
+                            )}
+                            style={[styles.mt4]}
+                            hasError={this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')}
+                            errorText={this.props.reimbursementAccount.error === this.props.translate('requestorStep.isControllingOfficerError')
+                                ? this.props.translate('requestorStep.isControllingOfficerError') : ''}
+                        />
+                        <Text style={[styles.textMicroSupporting, styles.mt5]}>
+                            {this.props.translate('requestorStep.financialRegulations')}
+                        </Text>
+                        <Text style={[styles.mt3, styles.textMicroSupporting]}>
+                            {this.props.translate('requestorStep.onFidoConditions')}
+                            <TextLink
+                                style={styles.textMicro}
+                                href="https://onfido.com/facial-scan-policy-and-release/"
+                            >
+                                {`${this.props.translate('requestorStep.onFidoFacialScan')}`}
+                            </TextLink>
+                            {', '}
+                            <TextLink
+                                style={styles.textMicro}
+                                href="https://onfido.com/privacy/"
+                            >
+                                {`${this.props.translate('common.privacyPolicy')}`}
+                            </TextLink>
+                            {` ${this.props.translate('common.and')} `}
+                            <TextLink
+                                style={styles.textMicro}
+                                href="https://onfido.com/terms-of-service/"
+                            >
+                                {`${this.props.translate('common.termsOfService')}`}
+                            </TextLink>
+                        </Text>
+                    </ReimbursementAccountForm>
                 )}
             </>
         );
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 2122b44cc6cc..cc901b76da88 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,8 +1,7 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View, ScrollView} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
 import styles from '../../styles/styles';
@@ -23,28 +22,14 @@ import compose from '../../libs/compose';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
 import {isRequiredFulfilled} from '../../libs/ValidationUtils';
 import EnableStep from './EnableStep';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import ReimbursementAccountForm from './ReimbursementAccountForm';
 
 const propTypes = {
     ...withLocalizePropTypes,
 
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Object containing various errors */
-        errors: PropTypes.objectOf(PropTypes.bool),
-
-        /** Whether we have reached the maximum attempts */
-        maxAttemptsReached: PropTypes.bool,
-
-        /** Additional data for the account in setup */
-        achData: PropTypes.shape({
-
-            /** Bank account ID of the VBA that we are validating is required */
-            bankAccountID: PropTypes.number.isRequired,
-
-            /** State of bank account */
-            state: PropTypes.string,
-        }).isRequired,
-    }),
+    reimbursementAccount: reimbursementAccountPropTypes,
 };
 
 const defaultProps = {
@@ -201,16 +186,18 @@ class ValidationStep extends React.Component {
                     </View>
                 )}
                 {!maxAttemptsReached && state === BankAccount.STATE.PENDING && (
-                    <ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={[styles.mt2, styles.flexGrow1]}>
+                    <ReimbursementAccountForm
+                        onSubmit={this.submit}
+                    >
                         <View style={[styles.mb2]}>
-                            <Text style={[styles.mh5, styles.mb5]}>
+                            <Text style={[styles.mb5]}>
                                 {this.props.translate('validationStep.description')}
                             </Text>
-                            <Text style={[styles.mh5, styles.mb2]}>
+                            <Text style={[styles.mb2]}>
                                 {this.props.translate('validationStep.descriptionCTA')}
                             </Text>
                         </View>
-                        <View style={[styles.m5]}>
+                        <View style={[styles.mv5, styles.flex1]}>
                             <ExpensiTextInput
                                 containerStyles={[styles.mb1]}
                                 placeholder="1.52"
@@ -236,15 +223,7 @@ class ValidationStep extends React.Component {
                                 errorText={this.getErrorText('amount3')}
                             />
                         </View>
-                        <View style={[styles.flex1, styles.justifyContentEnd]}>
-                            <Button
-                                success
-                                text={this.props.translate('validationStep.buttonText')}
-                                style={[styles.mh5, styles.mb5]}
-                                onPress={this.submit}
-                            />
-                        </View>
-                    </ScrollView>
+                    </ReimbursementAccountForm>
                 )}
                 {!maxAttemptsReached && state === BankAccount.STATE.VERIFYING && (
                     <View style={[styles.flex1]}>
diff --git a/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js b/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js
new file mode 100644
index 000000000000..636e1eabb561
--- /dev/null
+++ b/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** Whether we are loading the data via the API */
+    loading: PropTypes.bool,
+
+    /** A date that indicates the user has been throttled */
+    throttledDate: PropTypes.string,
+
+    /** Additional data for the account in setup */
+    achData: PropTypes.shape({
+
+        /** Step of the setup flow that we are on. Determines which view is presented. */
+        currentStep: PropTypes.string,
+
+        /** Bank account state */
+        state: PropTypes.string,
+
+        /** Bank account ID of the VBA that we are validating is required */
+        bankAccountID: PropTypes.number,
+
+    }),
+
+    /** Disable validation button if max attempts exceeded */
+    maxAttemptsReached: PropTypes.bool,
+
+    /** The existing owners for if the bank account is already owned */
+    existingOwners: PropTypes.arrayOf(PropTypes.string),
+
+    /** Alert message to display above submit button */
+    errorModalMessage: PropTypes.string,
+
+    /** Error set when handling the API response */
+    error: PropTypes.string,
+
+    /** Object containing various errors */
+    errors: PropTypes.objectOf(PropTypes.bool),
+});
diff --git a/src/pages/workspace/WorkspaceCardPage.js b/src/pages/workspace/WorkspaceCardPage.js
index 5f3511cb63bc..4eee5d7f9535 100644
--- a/src/pages/workspace/WorkspaceCardPage.js
+++ b/src/pages/workspace/WorkspaceCardPage.js
@@ -25,6 +25,7 @@ import HeroCardMobileImage from '../../../assets/images/cascading-cards-mobile.s
 import BankAccount from '../../libs/models/BankAccount';
 import {openSignedInLink} from '../../libs/actions/App';
 import {setWorkspaceIDForReimbursementAccount} from '../../libs/actions/BankAccounts';
+import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 
 const propTypes = {
     /* Onyx Props */
@@ -51,16 +52,7 @@ const propTypes = {
     }).isRequired,
 
     /** Bank account currently in setup */
-    reimbursementAccount: PropTypes.shape({
-        /** Additional data */
-        achData: PropTypes.shape({
-            /** Bank account state */
-            state: PropTypes.string,
-        }),
-
-        /** Whether we are loading this bank account */
-        loading: PropTypes.bool,
-    }),
+    reimbursementAccount: reimbursementAccountPropTypes,
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a84ae33bf43e..6c263bdbd6cd 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -81,6 +81,11 @@ const styles = {
         textDecorationLine: 'underline',
     },
 
+    label: {
+        fontSize: variables.fontSizeLabel,
+        lineHeight: 18,
+    },
+
     textLabel: {
         color: themeColors.text,
         fontSize: variables.fontSizeLabel,

From 25360870a0a6ba4c0ba3ac56c4e500d6ce70ce8a Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 16 Sep 2021 12:04:52 -1000
Subject: [PATCH 2/7] Remove extra words in bank account error

---
 src/languages/en.js                              |  3 ---
 src/languages/es.js                              |  3 ---
 src/pages/ReimbursementAccount/ExistingOwners.js | 13 -------------
 3 files changed, 19 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 2f67c10a91e6..645e62a2ca0e 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -410,9 +410,6 @@ export default {
             existingOwners: {
                 alreadyInUse: 'This bank account is already in use by ',
                 pleaseAskThemToShare: 'Please ask them to share it with you.',
-                alternatively: 'Alternatively, you can ',
-                setUpThisAccountByYourself: 'set up this account by yourself',
-                validationProcessAgain: ' and go through the entire validation process again (may take up to a week).',
             },
         },
     },
diff --git a/src/languages/es.js b/src/languages/es.js
index bb41d825ce77..9dc8ddb5a542 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -410,9 +410,6 @@ export default {
             existingOwners: {
                 alreadyInUse: 'La cuenta bancaria ya se encuentra en uso por ',
                 pleaseAskThemToShare: 'Por favor, solicita que la compartan contigo.',
-                alternatively: 'En su defecto, puedes ',
-                setUpThisAccountByYourself: 'añadir la cuenta tú mismo',
-                validationProcessAgain: ' y completar el proceso de validación de nuevo (lo cual puede tardar hasta una semana).',
             },
         },
     },
diff --git a/src/pages/ReimbursementAccount/ExistingOwners.js b/src/pages/ReimbursementAccount/ExistingOwners.js
index 2559a41c9970..5089b344b43f 100644
--- a/src/pages/ReimbursementAccount/ExistingOwners.js
+++ b/src/pages/ReimbursementAccount/ExistingOwners.js
@@ -39,19 +39,6 @@ const ExistingOwners = ({reimbursementAccount, translate}) => (
         <Text style={styles.mutedTextLabel}>
             {translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
         </Text>
-        <Text>
-            <Text style={styles.mutedTextLabel}>
-                {translate('bankAccount.error.existingOwners.alternatively')}
-            </Text>
-            <Text style={styles.mutedTextLabel}>
-                {translate(
-                    'bankAccount.error.existingOwners.setUpThisAccountByYourself',
-                )}
-            </Text>
-            <Text style={styles.mutedTextLabel}>
-                {translate('bankAccount.error.existingOwners.validationProcessAgain')}
-            </Text>
-        </Text>
     </>
 );
 

From ec345a37f0cdfcf543edeceb6f67e4e5dd4ebd12 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 16 Sep 2021 12:50:29 -1000
Subject: [PATCH 3/7] remove existing owners

---
 src/languages/en.js                           |  4 --
 src/languages/es.js                           |  4 --
 src/libs/actions/BankAccounts.js              | 14 +----
 .../ReimbursementAccount/ExistingOwners.js    | 53 -------------------
 .../ReimbursementAccountForm.js               |  7 +--
 .../reimbursementAccountPropTypes.js          |  3 --
 6 files changed, 2 insertions(+), 83 deletions(-)
 delete mode 100644 src/pages/ReimbursementAccount/ExistingOwners.js

diff --git a/src/languages/en.js b/src/languages/en.js
index 645e62a2ca0e..fe6b758c156b 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -407,10 +407,6 @@ export default {
             firstName: 'Please enter valid first name',
             lastName: 'Please enter valid last name',
             noDefaultDepositAccountOrDebitCardAvailable: 'Please add a default deposit bank account or debit card',
-            existingOwners: {
-                alreadyInUse: 'This bank account is already in use by ',
-                pleaseAskThemToShare: 'Please ask them to share it with you.',
-            },
         },
     },
     addPersonalBankAccountPage: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 9dc8ddb5a542..f4096422102a 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -407,10 +407,6 @@ export default {
             firstName: 'Ingresa un nombre válido',
             lastName: 'Ingresa un apellido válido',
             noDefaultDepositAccountOrDebitCardAvailable: 'Por favor agrega una cuenta bancaria para depósitos o una tarjeta de débito',
-            existingOwners: {
-                alreadyInUse: 'La cuenta bancaria ya se encuentra en uso por ',
-                pleaseAskThemToShare: 'Por favor, solicita que la compartan contigo.',
-            },
         },
     },
     addPersonalBankAccountPage: {
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 47d9b70703de..37e32c27ba23 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -677,18 +677,6 @@ function setupWithdrawalAccount(data) {
                     setFreePlanVerifiedBankAccountID(achData.bankAccountID);
                 }
 
-                // Show warning if another account already set up this bank account and promote share
-                if (response.existingOwners) {
-                    Onyx.merge(
-                        ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-                        {
-                            existingOwners: response.existingOwners,
-                            isErrorModalVisible: true,
-                        },
-                    );
-                    return;
-                }
-
                 if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
                     const requestorResponse = lodashGet(
                         achData,
@@ -796,7 +784,7 @@ function setupWithdrawalAccount(data) {
 }
 
 function hideBankAccountErrors() {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwners: null, errors: null});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', errors: null});
 }
 
 function setWorkspaceIDForReimbursementAccount(workspaceID) {
diff --git a/src/pages/ReimbursementAccount/ExistingOwners.js b/src/pages/ReimbursementAccount/ExistingOwners.js
deleted file mode 100644
index 5089b344b43f..000000000000
--- a/src/pages/ReimbursementAccount/ExistingOwners.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import _ from 'underscore';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import Text from '../../components/Text';
-import styles from '../../styles/styles';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
-
-const propTypes = {
-    /** Reimbursement account state with list of existing owners */
-    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
-    ...withLocalizePropTypes,
-};
-
-const ExistingOwners = ({reimbursementAccount, translate}) => (
-    <>
-        <Text>
-            <Text style={styles.mutedTextLabel}>
-                {translate('bankAccount.error.existingOwners.alreadyInUse')}
-            </Text>
-            {reimbursementAccount.existingOwners && _.map(reimbursementAccount.existingOwners, (existingOwner, i) => {
-                let separator = ', ';
-                if (i === 0) {
-                    separator = '';
-                } else if (i === reimbursementAccount.existingOwners.length - 1) {
-                    separator = ` ${translate('common.and')} `;
-                }
-                return (
-                    <React.Fragment key={existingOwner}>
-                        <Text style={styles.mutedTextLabel}>{separator}</Text>
-                        <Text style={[styles.mutedTextLabel, styles.textStrong]}>{existingOwner}</Text>
-                        {i === reimbursementAccount.existingOwners.length - 1 && <Text>.</Text>}
-                    </React.Fragment>
-                );
-            })}
-        </Text>
-        <Text style={styles.mutedTextLabel}>
-            {translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
-        </Text>
-    </>
-);
-
-ExistingOwners.propTypes = propTypes;
-export default compose(
-    withLocalize,
-    withOnyx({
-        reimbursementAccount: {
-            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-        },
-    }),
-)(ExistingOwners);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
index 6fa7036e7388..48f6d45e45d0 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
@@ -10,7 +10,6 @@ import Text from '../../components/Text';
 import Button from '../../components/Button';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import ExistingOwners from './ExistingOwners';
 import Icon from '../../components/Icon';
 import {Exclamation} from '../../components/Icon/Expensicons';
 import colors from '../../styles/colors';
@@ -39,11 +38,7 @@ class ReimbursementAccountForm extends React.Component {
     getAlertPrompt() {
         let error = '';
 
-        if (lodashGet(this.props.reimbursementAccount, 'existingOwners', []).length > 0) {
-            error = (
-                <ExistingOwners />
-            );
-        } else if (!_.isEmpty(this.props.reimbursementAccount.errorModalMessage)) {
+        if (!_.isEmpty(this.props.reimbursementAccount.errorModalMessage)) {
             error = (
                 <Text style={styles.mutedTextLabel}>{this.props.reimbursementAccount.errorModalMessage}</Text>
             );
diff --git a/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js b/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js
index 636e1eabb561..e8551bcb062a 100644
--- a/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js
+++ b/src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js
@@ -24,9 +24,6 @@ export default PropTypes.shape({
     /** Disable validation button if max attempts exceeded */
     maxAttemptsReached: PropTypes.bool,
 
-    /** The existing owners for if the bank account is already owned */
-    existingOwners: PropTypes.arrayOf(PropTypes.string),
-
     /** Alert message to display above submit button */
     errorModalMessage: PropTypes.string,
 

From 131007864bbb760e3abbdcaa4282b7ce48618217 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 16 Sep 2021 13:18:53 -1000
Subject: [PATCH 4/7] add translations

---
 src/languages/en.js                             |  3 ++-
 src/languages/es.js                             |  3 ++-
 .../ReimbursementAccountForm.js                 | 17 ++++++++++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index fe6b758c156b..393dd8f94098 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -381,7 +381,6 @@ export default {
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: ({fromNow}) => `For security reasons, we're taking a break from bank account setup so you can double-check your company information. Please try again ${fromNow}. Sorry!`,
-        defaultFormAlertPrompt: 'Please double check any highlighted fields and try again.',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             taxID: 'Please enter a valid Tax ID Number',
@@ -407,6 +406,8 @@ export default {
             firstName: 'Please enter valid first name',
             lastName: 'Please enter valid last name',
             noDefaultDepositAccountOrDebitCardAvailable: 'Please add a default deposit bank account or debit card',
+            fixTheErrors: 'fix the errors',
+            inTheFormBeforeContinuing: 'in the form before continuing',
         },
     },
     addPersonalBankAccountPage: {
diff --git a/src/languages/es.js b/src/languages/es.js
index f4096422102a..623ec02c7784 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -381,7 +381,6 @@ export default {
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque de la cuenta bancaria.',
         hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes agregar tu número de teléfono como nombre de usuario secundario.',
         hasBeenThrottledError: ({fromNow}) => `Por razones de seguridad, nos tomamos un descanso en la configuración de la cuenta bancaria para que pueda verificar la información de su empresa. Inténtalo de nuevo ${fromNow}. ¡Lo siento!`,
-        defaultFormAlertPrompt: 'Por favor, comprueba los campos resaltados e inténtalo de nuevo.',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             taxID: 'Ingresa un número de identificación fiscal válido',
@@ -407,6 +406,8 @@ export default {
             firstName: 'Ingresa un nombre válido',
             lastName: 'Ingresa un apellido válido',
             noDefaultDepositAccountOrDebitCardAvailable: 'Por favor agrega una cuenta bancaria para depósitos o una tarjeta de débito',
+            fixTheErrors: 'corrige los errores',
+            inTheFormBeforeContinuing: 'en el formulario antes de continuar',
         },
     },
     addPersonalBankAccountPage: {
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
index 48f6d45e45d0..1886b962d6fc 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
@@ -33,7 +33,7 @@ const defaultProps = {
 
 class ReimbursementAccountForm extends React.Component {
     /**
-     * @returns {React.Component|string}
+     * @returns {React.Component|String}
      */
     getAlertPrompt() {
         let error = '';
@@ -45,17 +45,24 @@ class ReimbursementAccountForm extends React.Component {
         } else {
             error = (
                 <>
-                    {/* @TODO translate {this.props.translate('bankAccount.defaultFormAlertPrompt')} */}
-                    <Text style={styles.mutedTextLabel}>Please </Text>
+                    <Text style={styles.mutedTextLabel}>
+                        {this.props.translate('common.please')}
+                        {' '}
+                    </Text>
+                    Por favor corrige los errores [en el formulario] antes de continuar
                     <TextLink
                         style={styles.label}
                         onPress={() => {
                             this.form.scrollTo({y: 0, animated: true});
                         }}
                     >
-                        {'fix the errors '}
+                        {this.props.translate('bankAccount.error.fixTheErrors')}
                     </TextLink>
-                    <Text style={styles.mutedTextLabel}>in the form before continuing.</Text>
+                    <Text style={styles.mutedTextLabel}>
+                        {' '}
+                        {this.props.translate('bankAccount.error.inTheFormBeforeContinuing')}
+                        {'.'}
+                    </Text>
                 </>
             );
         }

From a0653a443ab6084ae78b23f700f70609e55cdeaa Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 16 Sep 2021 13:44:15 -1000
Subject: [PATCH 5/7] remove text

---
 .../ReimbursementAccount/ReimbursementAccountForm.js      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
index 1886b962d6fc..d477710abcee 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountForm.js
@@ -46,10 +46,8 @@ class ReimbursementAccountForm extends React.Component {
             error = (
                 <>
                     <Text style={styles.mutedTextLabel}>
-                        {this.props.translate('common.please')}
-                        {' '}
+                        {`${this.props.translate('common.please')} `}
                     </Text>
-                    Por favor corrige los errores [en el formulario] antes de continuar
                     <TextLink
                         style={styles.label}
                         onPress={() => {
@@ -59,9 +57,7 @@ class ReimbursementAccountForm extends React.Component {
                         {this.props.translate('bankAccount.error.fixTheErrors')}
                     </TextLink>
                     <Text style={styles.mutedTextLabel}>
-                        {' '}
-                        {this.props.translate('bankAccount.error.inTheFormBeforeContinuing')}
-                        {'.'}
+                        {` ${this.props.translate('bankAccount.error.inTheFormBeforeContinuing')}.`}
                     </Text>
                 </>
             );

From 8366ee0b8202a43d9396c53bae8a431b5d14d647 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 17 Sep 2021 06:23:55 -1000
Subject: [PATCH 6/7] fix confirm button translation. give better name

---
 src/languages/en.js                              | 1 +
 src/languages/es.js                              | 1 +
 src/pages/ReimbursementAccount/ValidationStep.js | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 393dd8f94098..7c4678693336 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -381,6 +381,7 @@ export default {
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: ({fromNow}) => `For security reasons, we're taking a break from bank account setup so you can double-check your company information. Please try again ${fromNow}. Sorry!`,
+        buttonConfirm: 'Got it',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             taxID: 'Please enter a valid Tax ID Number',
diff --git a/src/languages/es.js b/src/languages/es.js
index 623ec02c7784..bf367d5b6d8c 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -381,6 +381,7 @@ export default {
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque de la cuenta bancaria.',
         hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes agregar tu número de teléfono como nombre de usuario secundario.',
         hasBeenThrottledError: ({fromNow}) => `Por razones de seguridad, nos tomamos un descanso en la configuración de la cuenta bancaria para que pueda verificar la información de su empresa. Inténtalo de nuevo ${fromNow}. ¡Lo siento!`,
+        buttonConfirm: 'OK',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             taxID: 'Ingresa un número de identificación fiscal válido',
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index cc901b76da88..159d2dce353b 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -236,7 +236,7 @@ class ValidationStep extends React.Component {
                         </Text>
                         <Button
                             success
-                            text={this.props.translate('bankAccount.confirmModalConfirmText')}
+                            text={this.props.translate('bankAccount.buttonConfirm')}
                             style={[styles.mh5, styles.mb5]}
                             onPress={() => Navigation.dismissModal()}
                         />

From 532b4be669e4e94755682d8d48d970bf4f000cac Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 17 Sep 2021 07:16:28 -1000
Subject: [PATCH 7/7] remove industry code

---
 src/pages/ReimbursementAccount/CompanyStep.js | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index b8744ef88376..525e139c8bf9 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -22,7 +22,7 @@ import TextLink from '../../components/TextLink';
 import StatePicker from '../../components/StatePicker';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import {
-    isValidAddress, isValidDate, isValidIndustryCode, isValidZipCode, isRequiredFulfilled,
+    isValidAddress, isValidDate, isValidZipCode, isRequiredFulfilled,
 } from '../../libs/ValidationUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -57,7 +57,6 @@ class CompanyStep extends React.Component {
             incorporationType: ReimbursementAccountUtils.getDefaultStateForField(props, 'incorporationType'),
             incorporationDate: ReimbursementAccountUtils.getDefaultStateForField(props, 'incorporationDate'),
             incorporationState: ReimbursementAccountUtils.getDefaultStateForField(props, 'incorporationState'),
-            industryCode: ReimbursementAccountUtils.getDefaultStateForField(props, 'industryCode'),
             hasNoConnectionToCannabis: ReimbursementAccountUtils.getDefaultStateForField(props, 'hasNoConnectionToCannabis', false),
             password: '',
         };
@@ -74,7 +73,6 @@ class CompanyStep extends React.Component {
             'incorporationDate',
             'incorporationState',
             'incorporationType',
-            'industryCode',
             'password',
             'companyPhone',
             'hasNoConnectionToCannabis',
@@ -91,7 +89,6 @@ class CompanyStep extends React.Component {
             companyTaxID: 'bankAccount.error.taxID',
             incorporationDate: 'bankAccount.error.incorporationDate',
             incorporationType: 'bankAccount.error.companyType',
-            industryCode: 'bankAccount.error.industryCode',
             password: 'common.passwordCannotBeBlank',
             hasNoConnectionToCannabis: 'bankAccount.error.restrictedBusiness',
         };
@@ -145,10 +142,6 @@ class CompanyStep extends React.Component {
             errors.incorporationDate = true;
         }
 
-        if (!isValidIndustryCode(this.state.industryCode)) {
-            errors.industryCode = true;
-        }
-
         _.each(this.requiredFields, (inputKey) => {
             if (!isRequiredFulfilled(this.state[inputKey])) {
                 errors[inputKey] = true;
@@ -278,16 +271,6 @@ class CompanyStep extends React.Component {
                             />
                         </View>
                     </View>
-                    {/* TODO: Replace with NAICS picker */}
-                    <ExpensiTextInput
-                        label={this.props.translate('companyStep.industryClassificationCode')}
-                        helpLinkText={this.props.translate('common.whatThis')}
-                        helpLinkURL="https://www.naics.com/search/"
-                        containerStyles={[styles.mt4]}
-                        onChangeText={value => this.clearErrorAndSetValue('industryCode', value)}
-                        value={this.state.industryCode}
-                        errorText={this.getErrorText('industryCode')}
-                    />
                     <ExpensiTextInput
                         label={`Expensify ${this.props.translate('common.password')}`}
                         containerStyles={[styles.mt4]}