From ecb99908d45bbbdb28afb91a5431b640cebaf1ab Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 11:48:32 -1000
Subject: [PATCH 01/25] add business bank account new page

---
 src/ROUTES.js                                 |  1 +
 src/components/TextLink.js                    |  2 +-
 .../Navigation/AppNavigator/AuthScreens.js    |  7 ++
 .../AppNavigator/ModalStackNavigators.js      |  9 ++
 src/libs/Navigation/linkingConfig.js          |  5 ++
 src/pages/BusinessBankAccount/NewPage.js      | 84 +++++++++++++++++++
 6 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/BusinessBankAccount/NewPage.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 61c8542be45f..cd6a986f07a6 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -9,6 +9,7 @@ const REPORT = 'r';
 
 export default {
     ADD_BANK_ACCOUNT: 'add-bank-account',
+    BANK_ACCOUNT_NEW: 'bank-account/new',
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index df271d88b4fa..d10474601ba4 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -10,7 +10,7 @@ const propTypes = {
     href: PropTypes.string.isRequired,
 
     /** Text content child */
-    children: PropTypes.string.isRequired,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
 
     /** Additional style props */
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 1df7250464ef..868964834bab 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -50,6 +50,7 @@ import {
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddBankAccountModalStackNavigator,
+    BusinessBankAccountModalStackNavigator,
 } from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
@@ -271,6 +272,12 @@ class AuthScreens extends React.Component {
                     component={AddBankAccountModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="BusinessBankAccount"
+                    options={modalScreenOptions}
+                    component={BusinessBankAccountModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
             </RootStack.Navigator>
         );
     }
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index c9ab6088892d..de00f5716ef6 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -21,6 +21,7 @@ import IOUCurrencySelection from '../../../pages/iou/IOUCurrencySelection';
 import ReportParticipantsPage from '../../../pages/ReportParticipantsPage';
 import EnablePaymentsPage from '../../../pages/EnablePayments';
 import AddBankAccountPage from '../../../pages/AddBankAccountPage';
+import BusinessBankAccountNewPage from '../../../pages/BusinessBankAccount/NewPage';
 
 const defaultSubRouteOptions = {
     cardStyle: styles.navigationScreenCardStyle,
@@ -152,6 +153,13 @@ const AddBankAccountModalStackNavigator = createModalStackNavigator([{
     name: 'AddBankAccount_Root',
 }]);
 
+const BusinessBankAccountModalStackNavigator = createModalStackNavigator([
+    {
+        Component: BusinessBankAccountNewPage,
+        name: 'BusinessBankAccount_New',
+    },
+]);
+
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
@@ -164,4 +172,5 @@ export {
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddBankAccountModalStackNavigator,
+    BusinessBankAccountModalStackNavigator,
 };
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index c73f4705a73b..98c4210b9689 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -109,6 +109,11 @@ export default {
                     AddBankAccount_Root: ROUTES.ADD_BANK_ACCOUNT,
                 },
             },
+            BusinessBankAccount: {
+                screens: {
+                    BusinessBankAccount_New: ROUTES.BANK_ACCOUNT_NEW,
+                },
+            },
             EnablePayments: {
                 screens: {
                     EnablePayments_Root: ROUTES.ENABLE_PAYMENTS,
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
new file mode 100644
index 000000000000..33597e88ad20
--- /dev/null
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -0,0 +1,84 @@
+import _ from 'underscore';
+import React from 'react';
+import {View, Text} from 'react-native';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import MenuItem from '../../components/MenuItem';
+import {Bug, Lock} 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';
+import Permissions from '../../libs/Permissions';
+
+class BusinessBankAccountNewPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    render() {
+        if (!Permissions.canUseFreePlan()) {
+            // This delay is necessary since the "navigator" object is not yet ready - probably we can move to a
+            // 404 at some point, but not necessary right now.
+            _.delay(Navigation.dismissModal, 0);
+            return null;
+        }
+
+        return (
+            <ScreenWrapper>
+                <View style={[styles.flex1, styles.justifyContentBetween]}>
+                    <HeaderWithCloseButton
+                        title="Add Bank Account"
+                        onCloseButtonPress={Navigation.dismissModal}
+                    />
+                    <View style={[styles.flex1]}>
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            To get started with the Expensify Card, you first need to add a bank account.
+                        </Text>
+                        <MenuItem
+                            icon={Bug}
+                            title="Log Into Your Bank"
+                            onPress={() => {
+                                console.log('launching Plaid flow');
+                            }}
+                            shouldShowRightIcon
+                        />
+                        <MenuItem
+                            icon={Bug}
+                            title="Connect Manually"
+                            onPress={() => {
+                                console.log('connect manually');
+                            }}
+                            shouldShowRightIcon
+                        />
+                        <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
+                            <TextLink href="">
+                                Privacy
+                            </TextLink>
+                            <TextLink href="" style={[styles.dFlex, styles.justifyContentCenter]}>
+                                Your data is secure
+                                <View style={[styles.ml1]}>
+                                    <Icon src={Lock} fill={colors.blue} />
+                                </View>
+                            </TextLink>
+                        </View>
+                    </View>
+                    <View style={[styles.m5]}>
+                        <Button
+                            success
+                            text="Save & Continue"
+                            onPress={() => {
+                                console.log('lehgo');
+                            }}
+                        />
+                    </View>
+                </View>
+            </ScreenWrapper>
+        );
+    }
+}
+
+export default BusinessBankAccountNewPage;

From c128cfe3d5c7e5d38f5f501cf42059b2caa5a0c3 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 12:41:12 -1000
Subject: [PATCH 02/25] add create manual form

---
 src/CONST.js                             |   6 +
 src/pages/BusinessBankAccount/NewPage.js | 170 +++++++++++++++++------
 2 files changed, 135 insertions(+), 41 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 71a80cf4f0b7..241b70648dc2 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -6,6 +6,12 @@ const CONST = {
         IOS: 'https://apps.apple.com/us/app/expensify-cash/id1530278510',
         DESKTOP: 'https://expensify.cash/Expensify.cash.dmg',
     },
+    BANK_ACCOUNT: {
+        ADD_METHOD: {
+            MANUAL: 'manual',
+            PLAID: 'plaid',
+        },
+    },
     BETAS: {
         ALL: 'all',
         CHRONOS_IN_CASH: 'chronosInCash',
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 33597e88ad20..553041facd56 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, TouchableOpacity} from 'react-native';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
@@ -12,11 +12,35 @@ import Icon from '../../components/Icon';
 import colors from '../../styles/colors';
 import Navigation from '../../libs/Navigation/Navigation';
 import Permissions from '../../libs/Permissions';
+import CONST from '../../CONST';
+import TextInputWithLabel from '../../components/TextInputWithLabel';
+import Checkbox from '../../components/Checkbox';
 
 class BusinessBankAccountNewPage extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {};
+
+        this.toggleTerms = this.toggleTerms.bind(this);
+
+        this.state = {
+            addMethodSelection: undefined,
+            hasAcceptedTerms: false,
+            routingNumber: undefined,
+            accountNumber: undefined,
+        };
+    }
+
+    toggleTerms() {
+        this.setState(prevState => ({
+            hasAcceptedTerms: !prevState.hasAcceptedTerms,
+        }));
+    }
+
+    canSubmitManually() {
+        // @TODO add better validation
+        return this.state.hasAcceptedTerms
+            && this.state.accountNumber
+            && this.state.routingNumber;
     }
 
     render() {
@@ -27,54 +51,118 @@ class BusinessBankAccountNewPage extends React.Component {
             return null;
         }
 
+        // @TODO - these are duplicated from TermsStep for the KYC flow and the checkboxes there should be refactored
+        // into a new component as a follow up.
+        const toggleStyles = [
+            styles.ml2,
+            styles.pr2,
+            styles.w100,
+            styles.flexRow,
+            styles.flexWrap,
+            styles.alignItemsCenter,
+        ];
+
         return (
             <ScreenWrapper>
                 <View style={[styles.flex1, styles.justifyContentBetween]}>
                     <HeaderWithCloseButton
                         title="Add Bank Account"
                         onCloseButtonPress={Navigation.dismissModal}
+                        onBackButtonPress={() => this.setState({addMethodSelection: undefined})}
+                        shouldShowBackButton={!_.isUndefined(this.state.addMethodSelection)}
                     />
-                    <View style={[styles.flex1]}>
-                        <Text style={[styles.mh5, styles.mb5]}>
-                            To get started with the Expensify Card, you first need to add a bank account.
-                        </Text>
-                        <MenuItem
-                            icon={Bug}
-                            title="Log Into Your Bank"
-                            onPress={() => {
-                                console.log('launching Plaid flow');
-                            }}
-                            shouldShowRightIcon
-                        />
-                        <MenuItem
-                            icon={Bug}
-                            title="Connect Manually"
-                            onPress={() => {
-                                console.log('connect manually');
-                            }}
-                            shouldShowRightIcon
-                        />
-                        <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
-                            <TextLink href="">
-                                Privacy
-                            </TextLink>
-                            <TextLink href="" style={[styles.dFlex, styles.justifyContentCenter]}>
-                                Your data is secure
-                                <View style={[styles.ml1]}>
-                                    <Icon src={Lock} fill={colors.blue} />
+                    {!this.state.addMethodSelection && (
+                        <>
+                            <View style={[styles.flex1]}>
+                                <Text style={[styles.mh5, styles.mb5]}>
+                                    To get started with the Expensify Card, you first need to add a bank account.
+                                </Text>
+                                <MenuItem
+                                    icon={Bug}
+                                    title="Log Into Your Bank"
+                                    onPress={() => {
+                                        this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.PLAID});
+                                    }}
+                                    shouldShowRightIcon
+                                />
+                                <MenuItem
+                                    icon={Bug}
+                                    title="Connect Manually"
+                                    onPress={() => {
+                                        this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL});
+                                    }}
+                                    shouldShowRightIcon
+                                />
+                                <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
+                                    <TextLink href="https://use.expensify.com/privacy">
+                                        Privacy
+                                    </TextLink>
+                                    <TextLink
+                                        // eslint-disable-next-line max-len
+                                        href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
+                                        style={[styles.dFlex, styles.justifyContentCenter]}>
+                                        Your data is secure
+                                        <View style={[styles.ml1]}>
+                                            <Icon src={Lock} fill={colors.blue} />
+                                        </View>
+                                    </TextLink>
                                 </View>
-                            </TextLink>
+                            </View>
+                        </>
+                    )}
+                    {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
+                        <View>
+                            <Text>Launch Plaid Flow whoosh</Text>
                         </View>
-                    </View>
-                    <View style={[styles.m5]}>
-                        <Button
-                            success
-                            text="Save & Continue"
-                            onPress={() => {
-                                console.log('lehgo');
-                            }}
-                        />
-                    </View>
+                    )}
+                    {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL && (
+                        <>
+                            <View style={[styles.m5, styles.flex1]}>
+                                <Text style={[styles.mb5]}>
+                                    Your routing number and account number can be found on a check for the account.
+                                </Text>
+                                <TextInputWithLabel
+                                    label="Routing Number"
+                                    placeholder="9 digits"
+                                    keyboardType="numeric"
+                                    value={this.state.routingNumber}
+                                    onChangeText={routingNumber => this.setState({routingNumber})}
+                                />
+                                <TextInputWithLabel
+                                    label="Account Number"
+                                    keyboardType="numeric"
+                                    value={this.state.accountNumber}
+                                    onChangeText={accountNumber => this.setState({accountNumber})}
+                                />
+                                <View style={[styles.flexRow, styles.mb4, styles.mt5]}>
+                                    <Checkbox
+                                        isChecked={this.state.hasAcceptedTerms}
+                                        onClick={this.toggleTerms}
+                                    />
+                                    <TouchableOpacity
+                                        onPress={this.toggleTerms}
+                                        style={toggleStyles}
+                                    >
+                                        <Text>
+                                            {'I accept the '}
+                                            <TextLink href="https://use.expensify.com/terms">
+                                                Expensify Terms of Service
+                                            </TextLink>
+                                        </Text>
+                                    </TouchableOpacity>
+                                </View>
+                            </View>
+                            <Button
+                                success
+                                text="Save & Continue"
+                                style={[styles.m5]}
+                                isDisabled={!this.canSubmitManually()}
+                                onPress={() => {
+                                    console.log('lehgo');
+                                }}
+                            />
+                        </>
+                    )}
                 </View>
             </ScreenWrapper>
         );

From 5db61776f0d27b13576201bfa410382643d927a3 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 12:52:37 -1000
Subject: [PATCH 03/25] Move logic out of AddBankAccountPage into
 AddPlaidBankAccount

---
 src/components/AddPlaidBankAccount.js | 186 ++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 src/components/AddPlaidBankAccount.js

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
new file mode 100644
index 000000000000..a6a1e5a39864
--- /dev/null
+++ b/src/components/AddPlaidBankAccount.js
@@ -0,0 +1,186 @@
+import _ from 'underscore';
+import React from 'react';
+import {
+    ActivityIndicator,
+    View,
+    Text,
+    TextInput,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
+import Navigation from '../libs/Navigation/Navigation';
+import PlaidLink from './PlaidLink';
+import {
+    addPlaidBankAccount,
+    clearPlaidBankAccounts,
+    fetchPlaidLinkToken,
+    getPlaidBankAccounts,
+} from '../libs/actions/BankAccounts';
+import ONYXKEYS from '../ONYXKEYS';
+import OptionRow from '../pages/home/sidebar/OptionRow';
+import styles from '../styles/styles';
+import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Button from './Button';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    // Plaid SDK token to use to initialize the widget
+    plaidLinkToken: PropTypes.string,
+
+    // Contains list of accounts and loading state while fetching them
+    plaidBankAccounts: PropTypes.shape({
+        // Whether we are fetching the bank accounts from the API
+        loading: PropTypes.bool,
+
+        // List of accounts
+        accounts: PropTypes.arrayOf(PropTypes.object),
+    }),
+};
+
+const defaultProps = {
+    plaidLinkToken: '',
+    plaidBankAccounts: {
+        loading: false,
+    },
+};
+
+class AddPlaidBankAccount extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selectAccount = this.selectAccount.bind(this);
+
+        this.state = {
+            selectedIndex: undefined,
+            password: '',
+            isCreatingAccount: false,
+        };
+    }
+
+    componentDidMount() {
+        clearPlaidBankAccounts();
+        fetchPlaidLinkToken();
+    }
+
+    /**
+     * Get list of bank accounts
+     *
+     * @returns {Object[]}
+     */
+    getAccounts() {
+        return lodashGet(this.props.plaidBankAccounts, 'accounts', []);
+    }
+
+    selectAccount() {
+        const account = this.getAccounts()[this.state.selectedIndex];
+        this.props.onSelectAccount({
+            account, password: this.state.password, plaidLinkToken: this.props.plaidLinkToken,
+        });
+        this.setState({isCreatingAccount: true});
+    }
+
+    render() {
+        const accounts = this.getAccounts();
+        return (
+            <>
+                {(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading)
+                    && <ActivityIndicator size="large" />}
+                {!_.isEmpty(this.props.plaidLinkToken) && (
+                    <PlaidLink
+                        token={this.props.plaidLinkToken}
+                        onSuccess={({publicToken, metadata}) => {
+                            getPlaidBankAccounts(publicToken, metadata.institution.name);
+                        }}
+                        onError={(error) => {
+                            console.debug(`Plaid Error: ${error.message}`);
+                        }}
+                        onExit={() => {
+                            // If the user prematurely exits the Plaid flow then let's kick them back to the main app
+                            Navigation.dismissModal();
+                        }}
+                    />
+                )}
+                {accounts.length > 0 && (
+                    <View>
+                        <View style={[styles.m5]}>
+                            <Text>{this.props.translate('addBankAccountPage.selectAccount')}</Text>
+                        </View>
+                        {_.map(accounts, (account, index) => (
+                            <React.Fragment
+                                key={`${account.accountNumber}${account.plaidAccountID}`}
+                            >
+                                <OptionRow
+                                    showSelectedState
+                                    optionIsFocused={false}
+                                    isSelected={index === this.state.selectedIndex}
+                                    option={{
+                                        text: account.addressName,
+                                        alternateText: account.accountNumber,
+                                    }}
+                                    isDisabled={account.alreadyExists}
+                                    onSelectRow={() => {
+                                        if (account.alreadyExists) {
+                                            return;
+                                        }
+
+                                        this.setState({selectedIndex: index});
+                                    }}
+                                />
+                                {account.alreadyExists && (
+                                    <Text style={[styles.ml5]}>
+                                        {this.props.translate('addBankAccountPage.alreadyAdded')}
+                                    </Text>
+                                )}
+                            </React.Fragment>
+                        ))}
+                        <View style={[styles.m5]}>
+                            {!_.isUndefined(this.state.selectedIndex) && (
+                                <>
+                                    <Text style={[styles.formLabel]}>
+                                        {this.props.translate('addBankAccountPage.enterPassword')}
+                                    </Text>
+                                    <TextInput
+                                        secureTextEntry
+                                        style={[styles.textInput, styles.mb2]}
+                                        value={this.state.password}
+                                        autoCompleteType="password"
+                                        textContentType="password"
+                                        autoCapitalize="none"
+                                        autoFocus={canFocusInputOnScreenFocus()}
+                                        onChangeText={text => this.setState({password: text})}
+                                    />
+                                </>
+                            )}
+                            <Button
+                                success
+                                text={this.props.translate('common.continue')}
+                                isLoading={this.state.isCreatingAccount}
+                                onPress={this.selectAccount}
+                                isDisabled={_.isUndefined(this.state.selectedIndex) || !this.state.password}
+                            />
+                        </View>
+                    </View>
+                )}
+            </>
+        );
+    }
+}
+
+AddPlaidBankAccount.propTypes = propTypes;
+AddPlaidBankAccount.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        plaidLinkToken: {
+            key: ONYXKEYS.PLAID_LINK_TOKEN,
+        },
+        plaidBankAccounts: {
+            key: ONYXKEYS.PLAID_BANK_ACCOUNTS,
+        },
+    }),
+)(AddPlaidBankAccount);

From 176b3802631c9641ea0a24fe46e435d290d5634b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 13:46:01 -1000
Subject: [PATCH 04/25] refactor plaid link stuff

---
 src/components/AddPlaidBankAccount.js    | 18 ++++++++++--------
 src/pages/BusinessBankAccount/NewPage.js |  9 ++++++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index a6a1e5a39864..d546f3c85b73 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -9,10 +9,8 @@ import {
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import Navigation from '../libs/Navigation/Navigation';
 import PlaidLink from './PlaidLink';
 import {
-    addPlaidBankAccount,
     clearPlaidBankAccounts,
     fetchPlaidLinkToken,
     getPlaidBankAccounts,
@@ -28,17 +26,20 @@ import Button from './Button';
 const propTypes = {
     ...withLocalizePropTypes,
 
-    // Plaid SDK token to use to initialize the widget
+    /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: PropTypes.string,
 
-    // Contains list of accounts and loading state while fetching them
+    /** Contains list of accounts and loading state while fetching them */
     plaidBankAccounts: PropTypes.shape({
-        // Whether we are fetching the bank accounts from the API
+        /** Whether we are fetching the bank accounts from the API */
         loading: PropTypes.bool,
 
-        // List of accounts
+        /** List of accounts */
         accounts: PropTypes.arrayOf(PropTypes.object),
     }),
+
+    /** Fired when the user exits the Plaid flow */
+    onExitPlaid: PropTypes.func,
 };
 
 const defaultProps = {
@@ -46,6 +47,7 @@ const defaultProps = {
     plaidBankAccounts: {
         loading: false,
     },
+    onExitPlaid: () => {},
 };
 
 class AddPlaidBankAccount extends React.Component {
@@ -99,8 +101,8 @@ class AddPlaidBankAccount extends React.Component {
                             console.debug(`Plaid Error: ${error.message}`);
                         }}
                         onExit={() => {
-                            // If the user prematurely exits the Plaid flow then let's kick them back to the main app
-                            Navigation.dismissModal();
+                            // User prematurely exited the Plaid flow
+                            this.props.onExitPlaid();
                         }}
                     />
                 )}
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 553041facd56..bacc48ce142e 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -15,6 +15,7 @@ import Permissions from '../../libs/Permissions';
 import CONST from '../../CONST';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Checkbox from '../../components/Checkbox';
+import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 
 class BusinessBankAccountNewPage extends React.Component {
     constructor(props) {
@@ -111,9 +112,11 @@ class BusinessBankAccountNewPage extends React.Component {
                         </>
                     )}
                     {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
-                        <View>
-                            <Text>Launch Plaid Flow whoosh</Text>
-                        </View>
+                        <AddPlaidBankAccount
+                            onExitPlaid={() => {
+                                this.setState({addMethodSelection: undefined});
+                            }}
+                        />
                     )}
                     {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL && (
                         <>

From 35e91bf09500dd3c888528f04adcd0b7690bdebc Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 14:37:58 -1000
Subject: [PATCH 05/25] fix style

---
 src/pages/BusinessBankAccount/NewPage.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index bacc48ce142e..f5b8f44b6414 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -22,6 +22,7 @@ class BusinessBankAccountNewPage extends React.Component {
         super(props);
 
         this.toggleTerms = this.toggleTerms.bind(this);
+        this.addManualAccount = this.addManualAccount.bind(this);
 
         this.state = {
             addMethodSelection: undefined,
@@ -44,6 +45,10 @@ class BusinessBankAccountNewPage extends React.Component {
             && this.state.routingNumber;
     }
 
+    addManualAccount() {
+
+    }
+
     render() {
         if (!Permissions.canUseFreePlan()) {
             // This delay is necessary since the "navigator" object is not yet ready - probably we can move to a
@@ -101,7 +106,8 @@ class BusinessBankAccountNewPage extends React.Component {
                                     <TextLink
                                         // eslint-disable-next-line max-len
                                         href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
-                                        style={[styles.dFlex, styles.justifyContentCenter]}>
+                                        style={[styles.dFlex, styles.justifyContentCenter]}
+                                    >
                                         Your data is secure
                                         <View style={[styles.ml1]}>
                                             <Icon src={Lock} fill={colors.blue} />
@@ -160,9 +166,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                 text="Save & Continue"
                                 style={[styles.m5]}
                                 isDisabled={!this.canSubmitManually()}
-                                onPress={() => {
-                                    console.log('lehgo');
-                                }}
+                                onPress={this.addManualAccount}
                             />
                         </>
                     )}

From a84e2fd35df9c9ff734f1dfd01182473306785d4 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 8 Jun 2021 16:11:24 -1000
Subject: [PATCH 06/25] Refactor Plaid module so it can be easily used in the
 the two flows

---
 src/components/AddPlaidBankAccount.js    |  88 ++++++-----
 src/components/Picker/PickerPropTypes.js |   2 +-
 src/languages/en.js                      |   3 +-
 src/pages/AddPersonalBankAccountPage.js  | 191 ++---------------------
 src/pages/BusinessBankAccount/NewPage.js |   4 +
 5 files changed, 72 insertions(+), 216 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index d546f3c85b73..966c5f51d663 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -16,12 +16,14 @@ import {
     getPlaidBankAccounts,
 } from '../libs/actions/BankAccounts';
 import ONYXKEYS from '../ONYXKEYS';
-import OptionRow from '../pages/home/sidebar/OptionRow';
 import styles from '../styles/styles';
 import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Button from './Button';
+import Picker from './Picker';
+import Icon from './Icon';
+import {DownArrow} from './Icon/Expensicons';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -40,6 +42,9 @@ const propTypes = {
 
     /** Fired when the user exits the Plaid flow */
     onExitPlaid: PropTypes.func,
+
+    /** Fired when the user selects an account and submits the form */
+    onSubmit: PropTypes.func,
 };
 
 const defaultProps = {
@@ -48,6 +53,7 @@ const defaultProps = {
         loading: false,
     },
     onExitPlaid: () => {},
+    onSubmit: () => {},
 };
 
 class AddPlaidBankAccount extends React.Component {
@@ -60,6 +66,7 @@ class AddPlaidBankAccount extends React.Component {
             selectedIndex: undefined,
             password: '',
             isCreatingAccount: false,
+            institution: {},
         };
     }
 
@@ -79,7 +86,7 @@ class AddPlaidBankAccount extends React.Component {
 
     selectAccount() {
         const account = this.getAccounts()[this.state.selectedIndex];
-        this.props.onSelectAccount({
+        this.props.onSubmit({
             account, password: this.state.password, plaidLinkToken: this.props.plaidLinkToken,
         });
         this.setState({isCreatingAccount: true});
@@ -87,15 +94,27 @@ class AddPlaidBankAccount extends React.Component {
 
     render() {
         const accounts = this.getAccounts();
+        const options = _.chain(accounts)
+            .filter(account => !account.alreadyExists)
+            .map((account, index) => ({
+                value: index, label: `${account.addressName} ${account.accountNumber}`,
+            }))
+            .value();
+
         return (
             <>
                 {(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading)
-                    && <ActivityIndicator size="large" />}
+                    && (
+                        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <ActivityIndicator size="large" />
+                        </View>
+                    )}
                 {!_.isEmpty(this.props.plaidLinkToken) && (
                     <PlaidLink
                         token={this.props.plaidLinkToken}
                         onSuccess={({publicToken, metadata}) => {
                             getPlaidBankAccounts(publicToken, metadata.institution.name);
+                            this.setState({institution: metadata.institution});
                         }}
                         onError={(error) => {
                             console.debug(`Plaid Error: ${error.message}`);
@@ -107,43 +126,32 @@ class AddPlaidBankAccount extends React.Component {
                     />
                 )}
                 {accounts.length > 0 && (
-                    <View>
-                        <View style={[styles.m5]}>
-                            <Text>{this.props.translate('addBankAccountPage.selectAccount')}</Text>
-                        </View>
-                        {_.map(accounts, (account, index) => (
-                            <React.Fragment
-                                key={`${account.accountNumber}${account.plaidAccountID}`}
-                            >
-                                <OptionRow
-                                    showSelectedState
-                                    optionIsFocused={false}
-                                    isSelected={index === this.state.selectedIndex}
-                                    option={{
-                                        text: account.addressName,
-                                        alternateText: account.accountNumber,
-                                    }}
-                                    isDisabled={account.alreadyExists}
-                                    onSelectRow={() => {
-                                        if (account.alreadyExists) {
-                                            return;
-                                        }
-
-                                        this.setState({selectedIndex: index});
+                    <>
+                        <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]}>
+                                <Picker
+                                    onChange={(index) => {
+                                        this.setState({selectedIndex: Number(index)});
                                     }}
+                                    items={options}
+                                    placeholder={_.isUndefined(this.state.selectedIndex) ? {
+                                        value: '',
+                                        label: this.props.translate('addPersonalBankAccountPage.selectAccount'),
+                                    } : {}}
+                                    value={this.state.selectedIndex}
+                                    icon={() => <Icon src={DownArrow} />}
                                 />
-                                {account.alreadyExists && (
-                                    <Text style={[styles.ml5]}>
-                                        {this.props.translate('addBankAccountPage.alreadyAdded')}
-                                    </Text>
-                                )}
-                            </React.Fragment>
-                        ))}
-                        <View style={[styles.m5]}>
+                            </View>
                             {!_.isUndefined(this.state.selectedIndex) && (
-                                <>
+                                <View style={[styles.mb5]}>
                                     <Text style={[styles.formLabel]}>
-                                        {this.props.translate('addBankAccountPage.enterPassword')}
+                                        {this.props.translate('addPersonalBankAccountPage.enterPassword')}
                                     </Text>
                                     <TextInput
                                         secureTextEntry
@@ -155,17 +163,19 @@ class AddPlaidBankAccount extends React.Component {
                                         autoFocus={canFocusInputOnScreenFocus()}
                                         onChangeText={text => this.setState({password: text})}
                                     />
-                                </>
+                                </View>
                             )}
+                        </View>
+                        <View style={[styles.m5]}>
                             <Button
                                 success
-                                text={this.props.translate('common.continue')}
+                                text={this.props.translate('common.saveAndContinue')}
                                 isLoading={this.state.isCreatingAccount}
                                 onPress={this.selectAccount}
                                 isDisabled={_.isUndefined(this.state.selectedIndex) || !this.state.password}
                             />
                         </View>
-                    </View>
+                    </>
                 )}
             </>
         );
diff --git a/src/components/Picker/PickerPropTypes.js b/src/components/Picker/PickerPropTypes.js
index 88a814392af6..ec3a603a54ef 100644
--- a/src/components/Picker/PickerPropTypes.js
+++ b/src/components/Picker/PickerPropTypes.js
@@ -13,7 +13,7 @@ const propTypes = {
     /** The items to display in the list of selections */
     items: PropTypes.arrayOf(PropTypes.shape({
         /** The value of the item that is being selected */
-        value: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 
         /** The text to display for the item */
         label: PropTypes.string.isRequired,
diff --git a/src/languages/en.js b/src/languages/en.js
index e4aa2ef234fd..3b3c53937a78 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -31,6 +31,7 @@ export default {
         contacts: 'Contacts',
         recents: 'Recents',
         close: 'Close',
+        saveAndContinue: 'Save & Continue',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -259,7 +260,7 @@ export default {
         enterPassword: 'Enter password',
         addPersonalBankAccount: 'Add Bank Account',
         alreadyAdded: 'This account has already been added.',
-        selectAccount: 'Select an account:',
+        selectAccount: 'Choose an Account',
     },
     attachmentView: {
         unknownFilename: 'Unknown Filename',
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 9fb582421717..25710a7adc16 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -1,190 +1,31 @@
-import _ from 'underscore';
 import React from 'react';
-import {
-    ActivityIndicator,
-    View,
-    Text,
-    TextInput,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Navigation from '../libs/Navigation/Navigation';
-import PlaidLink from '../components/PlaidLink';
 import {
     addPlaidBankAccount,
-    clearPlaidBankAccounts,
-    fetchPlaidLinkToken,
-    getPlaidBankAccounts,
 } from '../libs/actions/BankAccounts';
-import ONYXKEYS from '../ONYXKEYS';
-import OptionRow from './home/sidebar/OptionRow';
-import styles from '../styles/styles';
-import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus';
-import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
-import Button from '../components/Button';
+import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
 
 const propTypes = {
     ...withLocalizePropTypes,
-
-    // Plaid SDK token to use to initialize the widget
-    plaidLinkToken: PropTypes.string,
-
-    // Contains list of accounts and loading state while fetching them
-    plaidBankAccounts: PropTypes.shape({
-        // Whether we are fetching the bank accounts from the API
-        loading: PropTypes.bool,
-
-        // List of accounts
-        accounts: PropTypes.arrayOf(PropTypes.object),
-    }),
 };
 
-const defaultProps = {
-    plaidLinkToken: '',
-    plaidBankAccounts: {
-        loading: false,
-    },
-};
-
-class AddPersonalBankAccountPage extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.addSelectedAccount = this.addSelectedAccount.bind(this);
-
-        this.state = {
-            selectedIndex: undefined,
-            password: '',
-            isCreatingAccount: false,
-        };
-    }
-
-    componentDidMount() {
-        clearPlaidBankAccounts();
-        fetchPlaidLinkToken();
-    }
-
-    /**
-     * Get list of bank accounts
-     *
-     * @returns {Object[]}
-     */
-    getAccounts() {
-        return lodashGet(this.props.plaidBankAccounts, 'accounts', []);
-    }
-
-    addSelectedAccount() {
-        const account = this.getAccounts()[this.state.selectedIndex];
-        addPlaidBankAccount(account, this.state.password, this.props.plaidLinkToken);
-        this.setState({isCreatingAccount: true});
-    }
-
-    render() {
-        const accounts = this.getAccounts();
-        return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('addPersonalBankAccountPage.addPersonalBankAccount')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                {(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading)
-                    && <ActivityIndicator size="large" />}
-                {!_.isEmpty(this.props.plaidLinkToken) && (
-                    <PlaidLink
-                        token={this.props.plaidLinkToken}
-                        onSuccess={({publicToken, metadata}) => {
-                            getPlaidBankAccounts(publicToken, metadata.institution.name);
-                        }}
-                        onError={(error) => {
-                            console.debug(`Plaid Error: ${error.message}`);
-                        }}
-                        onExit={() => {
-                            // If the user prematurely exits the Plaid flow then let's kick them back to the main app
-                            Navigation.dismissModal();
-                        }}
-                    />
-                )}
-                {accounts.length > 0 && (
-                    <View>
-                        <View style={[styles.m5]}>
-                            <Text>{this.props.translate('addPersonalBankAccountPage.selectAccount')}</Text>
-                        </View>
-                        {_.map(accounts, (account, index) => (
-                            <React.Fragment
-                                key={`${account.accountNumber}${account.plaidAccountID}`}
-                            >
-                                <OptionRow
-                                    showSelectedState
-                                    optionIsFocused={false}
-                                    isSelected={index === this.state.selectedIndex}
-                                    option={{
-                                        text: account.addressName,
-                                        alternateText: account.accountNumber,
-                                    }}
-                                    isDisabled={account.alreadyExists}
-                                    onSelectRow={() => {
-                                        if (account.alreadyExists) {
-                                            return;
-                                        }
-
-                                        this.setState({selectedIndex: index});
-                                    }}
-                                />
-                                {account.alreadyExists && (
-                                    <Text style={[styles.ml5]}>
-                                        {this.props.translate('addPersonalBankAccountPage.alreadyAdded')}
-                                    </Text>
-                                )}
-                            </React.Fragment>
-                        ))}
-                        <View style={[styles.m5]}>
-                            {!_.isUndefined(this.state.selectedIndex) && (
-                                <>
-                                    <Text style={[styles.formLabel]}>
-                                        {this.props.translate('addPersonalBankAccountPage.enterPassword')}
-                                    </Text>
-                                    <TextInput
-                                        secureTextEntry
-                                        style={[styles.textInput, styles.mb2]}
-                                        value={this.state.password}
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        autoCapitalize="none"
-                                        autoFocus={canFocusInputOnScreenFocus()}
-                                        onChangeText={text => this.setState({password: text})}
-                                    />
-                                </>
-                            )}
-                            <Button
-                                success
-                                text={this.props.translate('common.continue')}
-                                isLoading={this.state.isCreatingAccount}
-                                onPress={this.addSelectedAccount}
-                                isDisabled={_.isUndefined(this.state.selectedIndex) || !this.state.password}
-                            />
-                        </View>
-                    </View>
-                )}
-            </ScreenWrapper>
-        );
-    }
-}
+const AddPersonalBankAccountPage = props => (
+    <ScreenWrapper>
+        <HeaderWithCloseButton
+            title={props.translate('addPersonalBankAccountPage.addPersonalBankAccount')}
+            onCloseButtonPress={Navigation.dismissModal}
+        />
+        <AddPlaidBankAccount
+            onSubmit={({account, password, plaidLinkToken}) => {
+                addPlaidBankAccount(account, password, plaidLinkToken);
+            }}
+            onExitPlaid={Navigation.dismissModal}
+        />
+    </ScreenWrapper>
+);
 
 AddPersonalBankAccountPage.propTypes = propTypes;
-AddPersonalBankAccountPage.defaultProps = defaultProps;
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        plaidLinkToken: {
-            key: ONYXKEYS.PLAID_LINK_TOKEN,
-        },
-        plaidBankAccounts: {
-            key: ONYXKEYS.PLAID_BANK_ACCOUNTS,
-        },
-    }),
-)(AddPersonalBankAccountPage);
+export default withLocalize(AddPersonalBankAccountPage);
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index f5b8f44b6414..fc443bfb2dac 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -119,6 +119,10 @@ class BusinessBankAccountNewPage extends React.Component {
                     )}
                     {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
                         <AddPlaidBankAccount
+                            text="Give your employees an easier way to pay - and get paid back - for company expenses."
+                            onSubmit={(args) => {
+                                console.debug(args);
+                            }}
                             onExitPlaid={() => {
                                 this.setState({addMethodSelection: undefined});
                             }}

From 8ae125e4d683f52cbe9ac46cdc01ea4b4d13123a Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 10:22:02 -1000
Subject: [PATCH 07/25] update import and clear plaid token on init

---
 src/components/AddPlaidBankAccount.js | 4 ++--
 src/libs/actions/BankAccounts.js      | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 966c5f51d663..1bb968ccc131 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -11,7 +11,7 @@ import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import PlaidLink from './PlaidLink';
 import {
-    clearPlaidBankAccounts,
+    clearPlaidBankAccountsAndToken,
     fetchPlaidLinkToken,
     getPlaidBankAccounts,
 } from '../libs/actions/BankAccounts';
@@ -71,7 +71,7 @@ class AddPlaidBankAccount extends React.Component {
     }
 
     componentDidMount() {
-        clearPlaidBankAccounts();
+        clearPlaidBankAccountsAndToken();
         fetchPlaidLinkToken();
     }
 
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 0b9e2f9e6ee9..3312d0c0723c 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -62,10 +62,11 @@ function getPlaidBankAccounts(publicToken, bank) {
 /**
  * We clear these out of storage once we are done with them so the user must re-enter Plaid credentials upon returning.
  */
-function clearPlaidBankAccounts() {
+function clearPlaidBankAccountsAndToken() {
     plaidBankAccounts = [];
     bankName = '';
     Onyx.set(ONYXKEYS.PLAID_BANK_ACCOUNTS, {});
+    Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, null);
 }
 
 /**
@@ -273,7 +274,7 @@ export {
     fetchPlaidLinkToken,
     addPlaidBankAccount,
     getPlaidBankAccounts,
-    clearPlaidBankAccounts,
+    clearPlaidBankAccountsAndToken,
     fetchOnfidoToken,
     activateWallet,
     fetchUserWallet,

From ff9160596553efdbe13e330956cd72e9e48d2dcc Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 10:35:58 -1000
Subject: [PATCH 08/25] clean up beta logic

---
 src/pages/BusinessBankAccount/NewPage.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index fc443bfb2dac..163b8f1f75c1 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -1,6 +1,8 @@
 import _ from 'underscore';
 import React from 'react';
+import PropTypes from 'prop-types';
 import {View, Text, TouchableOpacity} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
@@ -16,6 +18,12 @@ import CONST from '../../CONST';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Checkbox from '../../components/Checkbox';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
+import ONYXKEYS from '../../ONYXKEYS';
+
+const propTypes = {
+    /** List of betas */
+    betas: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
 
 class BusinessBankAccountNewPage extends React.Component {
     constructor(props) {
@@ -46,14 +54,12 @@ class BusinessBankAccountNewPage extends React.Component {
     }
 
     addManualAccount() {
-
+        // @TODO call API to add account manually
     }
 
     render() {
-        if (!Permissions.canUseFreePlan()) {
-            // This delay is necessary since the "navigator" object is not yet ready - probably we can move to a
-            // 404 at some point, but not necessary right now.
-            _.delay(Navigation.dismissModal, 0);
+        if (!Permissions.canUseFreePlan(this.props.betas)) {
+            Navigation.dismissModal();
             return null;
         }
 
@@ -180,4 +186,10 @@ class BusinessBankAccountNewPage extends React.Component {
     }
 }
 
-export default BusinessBankAccountNewPage;
+BusinessBankAccountNewPage.propTypes = propTypes;
+
+export default withOnyx({
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+})(BusinessBankAccountNewPage);

From 84cfe10fa384e2e1d4ef21d256ef470760da789b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 10:53:03 -1000
Subject: [PATCH 09/25] use CheckboxWithLabel

---
 src/components/CheckboxWithLabel.js      | 57 ++++++++++++++++++++++++
 src/pages/BusinessBankAccount/NewPage.js | 33 ++++----------
 2 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 src/components/CheckboxWithLabel.js

diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
new file mode 100644
index 000000000000..1e5bc248ea49
--- /dev/null
+++ b/src/components/CheckboxWithLabel.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View, TouchableOpacity} from 'react-native';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import Checkbox from './Checkbox';
+
+const propTypes = {
+    /** Component to display for label */
+    LabelComponent: PropTypes.node.isRequired,
+
+    /** Whether the checkbox is checked */
+    isChecked: PropTypes.bool.isRequired,
+
+    /** Called when the checkbox or label is pressed */
+    onPress: PropTypes.func.isRequired,
+
+    /** Container styles */
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    style: [],
+};
+
+const CheckboxWithLabel = ({
+    LabelComponent, isChecked, onPress, style,
+}) => {
+    const defaultStyles = [styles.flexRow];
+    const wrapperStyles = _.isArray(style) ? [...defaultStyles, ...style] : [...defaultStyles, style];
+    return (
+        <View style={wrapperStyles}>
+            <Checkbox
+                isChecked={isChecked}
+                onClick={onPress}
+            />
+            <TouchableOpacity
+                onPress={onPress}
+                style={[
+                    styles.ml2,
+                    styles.pr2,
+                    styles.w100,
+                    styles.flexRow,
+                    styles.flexWrap,
+                    styles.alignItemsCenter,
+                ]}
+            >
+                <LabelComponent />
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+CheckboxWithLabel.propTypes = propTypes;
+CheckboxWithLabel.defaultProps = defaultProps;
+
+export default CheckboxWithLabel;
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 163b8f1f75c1..31028b258923 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Text, TouchableOpacity} from 'react-native';
+import {View, Text} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -16,9 +16,9 @@ import Navigation from '../../libs/Navigation/Navigation';
 import Permissions from '../../libs/Permissions';
 import CONST from '../../CONST';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
-import Checkbox from '../../components/Checkbox';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 import ONYXKEYS from '../../ONYXKEYS';
+import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 
 const propTypes = {
     /** List of betas */
@@ -63,17 +63,6 @@ class BusinessBankAccountNewPage extends React.Component {
             return null;
         }
 
-        // @TODO - these are duplicated from TermsStep for the KYC flow and the checkboxes there should be refactored
-        // into a new component as a follow up.
-        const toggleStyles = [
-            styles.ml2,
-            styles.pr2,
-            styles.w100,
-            styles.flexRow,
-            styles.flexWrap,
-            styles.alignItemsCenter,
-        ];
-
         return (
             <ScreenWrapper>
                 <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -153,23 +142,19 @@ class BusinessBankAccountNewPage extends React.Component {
                                     value={this.state.accountNumber}
                                     onChangeText={accountNumber => this.setState({accountNumber})}
                                 />
-                                <View style={[styles.flexRow, styles.mb4, styles.mt5]}>
-                                    <Checkbox
-                                        isChecked={this.state.hasAcceptedTerms}
-                                        onClick={this.toggleTerms}
-                                    />
-                                    <TouchableOpacity
-                                        onPress={this.toggleTerms}
-                                        style={toggleStyles}
-                                    >
+                                <CheckboxWithLabel
+                                    style={[styles.mb4, styles.mt5]}
+                                    isChecked={this.state.hasAcceptedTerms}
+                                    onPress={this.toggleTerms}
+                                    LabelComponent={() => (
                                         <Text>
                                             {'I accept the '}
                                             <TextLink href="https://use.expensify.com/terms">
                                                 Expensify Terms of Service
                                             </TextLink>
                                         </Text>
-                                    </TouchableOpacity>
-                                </View>
+                                    )}
+                                />
                             </View>
                             <Button
                                 success

From d9ed59a3fc2919c669a4592ba7e1b4267846f5de Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 10:57:30 -1000
Subject: [PATCH 10/25] Fix up checkbox usages

---
 src/components/Checkbox.js                | 10 ++--
 src/components/CheckboxWithLabel.js       |  2 +-
 src/pages/EnablePayments/TermsStep.js     | 67 +++++++++--------------
 src/pages/settings/Profile/ProfilePage.js |  2 +-
 4 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index 5d42345e0b42..6cdbac6db739 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -9,8 +9,8 @@ const propTypes = {
     /** Whether checkbox is checked */
     isChecked: PropTypes.bool.isRequired,
 
-    /** A function that is called when the box/label is clicked on */
-    onClick: PropTypes.func.isRequired,
+    /** A function that is called when the box/label is pressed */
+    onPress: PropTypes.func.isRequired,
 
     /** Text that appears next to check box */
     label: PropTypes.string,
@@ -22,17 +22,17 @@ const defaultProps = {
 
 const Checkbox = ({
     isChecked,
-    onClick,
+    onPress,
     label,
 }) => (
     <View style={styles.flexRow}>
-        <Pressable onPress={() => onClick(!isChecked)}>
+        <Pressable onPress={() => onPress(!isChecked)}>
             <View style={[styles.checkboxContainer, isChecked && styles.checkedContainer]}>
                 <Icon src={Checkmark} fill="white" height={14} width={14} />
             </View>
         </Pressable>
         {label && (
-            <Pressable onPress={() => onClick(!isChecked)}>
+            <Pressable onPress={() => onPress(!isChecked)}>
                 <Text style={[styles.ml2, styles.textP]}>
                     {label}
                 </Text>
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 1e5bc248ea49..cee720d12b5f 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -32,7 +32,7 @@ const CheckboxWithLabel = ({
         <View style={wrapperStyles}>
             <Checkbox
                 isChecked={isChecked}
-                onClick={onPress}
+                onPress={onPress}
             />
             <TouchableOpacity
                 onPress={onPress}
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 0286aba8ab3b..e64aca469d63 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -16,6 +16,7 @@ import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
+import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 
 const propTypes = {
     /** Comes from Onyx. Information about the terms for the wallet */
@@ -56,14 +57,6 @@ class TermsStep extends React.Component {
     }
 
     render() {
-        const toggleStyles = [
-            styles.ml2,
-            styles.pr2,
-            styles.w100,
-            styles.flexRow,
-            styles.flexWrap,
-            styles.alignItemsCenter,
-        ];
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -78,15 +71,11 @@ class TermsStep extends React.Component {
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                         </Text>
                     </ScrollView>
-                    <View style={[styles.flexRow, styles.mb4]}>
-                        <Checkbox
-                            isChecked={this.state.hasAcceptedDisclosure}
-                            onClick={this.toggleDisclosure}
-                        />
-                        <TouchableOpacity
-                            onPress={this.toggleDisclosure}
-                            style={toggleStyles}
-                        >
+                    <CheckboxWithLabel
+                        style={styles.mb4}
+                        isChecked={this.state.hasAcceptedDisclosure}
+                        onPress={this.toggleDisclosure}
+                        LabelComponent={() => (
                             <Text>
                                 {`${this.props.translate('termsStep.haveReadAndAgree')} `}
 
@@ -94,32 +83,30 @@ class TermsStep extends React.Component {
                                     {`${this.props.translate('termsStep.electronicDisclosures')}.`}
                                 </TextLink>
                             </Text>
-                        </TouchableOpacity>
-                    </View>
-                    <View style={[styles.flexRow, styles.mb4]}>
-                        <Checkbox
-                            isChecked={this.state.hasAcceptedPrivacyPolicyAndWalletAgreement}
-                            onClick={this.togglePrivacyPolicy}
-                        />
-                        <TouchableOpacity
-                            onPress={this.togglePrivacyPolicy}
-                            style={toggleStyles}
-                        >
-                            <Text>
-                                {`${this.props.translate('termsStep.agreeToThe')} `}
-                            </Text>
+                        )}
+                    />
+                    <CheckboxWithLabel
+                        style={styles.mb4}
+                        isChecked={this.state.hasAcceptedPrivacyPolicyAndWalletAgreement}
+                        onPress={this.togglePrivacyPolicy}
+                        LabelComponent={() => (
+                            <>
+                                <Text>
+                                    {`${this.props.translate('termsStep.agreeToThe')} `}
+                                </Text>
 
-                            <TextLink href="https://use.expensify.com/privacy">
-                                {`${this.props.translate('common.privacyPolicy')} `}
-                            </TextLink>
+                                <TextLink href="https://use.expensify.com/privacy">
+                                    {`${this.props.translate('common.privacyPolicy')} `}
+                                </TextLink>
 
-                            <Text>{`${this.props.translate('common.and')} `}</Text>
+                                <Text>{`${this.props.translate('common.and')} `}</Text>
 
-                            <TextLink href="https://use.expensify.com/personalpaymentsterms">
-                                {`${this.props.translate('termsStep.walletAgreement')}.`}
-                            </TextLink>
-                        </TouchableOpacity>
-                    </View>
+                                <TextLink href="https://use.expensify.com/personalpaymentsterms">
+                                    {`${this.props.translate('termsStep.walletAgreement')}.`}
+                                </TextLink>
+                            </>
+                        )}
+                    />
                     {this.state.error && (
                         <Text style={[styles.formError, styles.mb2]}>
                             {this.props.translate('termsStep.termsMustBeAccepted')}
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 3d95dd475d61..7fade8151c0c 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -381,7 +381,7 @@ class ProfilePage extends Component {
                     <Checkbox
                         label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
                         isChecked={this.state.isAutomaticTimezone}
-                        onClick={this.setAutomaticTimezone}
+                        onPress={this.setAutomaticTimezone}
                     />
                 </ScrollView>
                 <View style={[styles.ph5, styles.pb5]}>

From 6fbbf5fa83da8cec5c73d4d61c48b4a6fdec46b9 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:00:57 -1000
Subject: [PATCH 11/25] update spanish

---
 src/languages/es.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index a199c313d8da..b0d78aa8e97b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -29,6 +29,7 @@ export default {
         delete: 'Eliminar',
         contacts: 'Contactos',
         recents: 'Recientes',
+        saveAndContinue: 'Guardar y Continuar',
         settings: 'Configuración',
     },
     attachmentPicker: {
@@ -254,7 +255,7 @@ export default {
         enterPassword: 'Escribe una contraseña',
         addPersonalBankAccount: 'Agregar cuenta bancaria',
         alreadyAdded: 'Esta cuenta ya ha sido agregada.',
-        selectAccount: 'Selecciona una cuenta:',
+        selectAccount: 'Elige una cuenta',
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',

From 5cdaec2de6ebfe2818e5861c7126bdad070e2231 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:02:17 -1000
Subject: [PATCH 12/25] fix style

---
 src/pages/EnablePayments/TermsStep.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index e64aca469d63..d1a7396fd32e 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-    View, ScrollView, Text, TouchableOpacity,
+    View, ScrollView, Text,
 } from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -8,7 +8,6 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import Checkbox from '../../components/Checkbox';
 import styles from '../../styles/styles';
 import Button from '../../components/Button';
 import {activateWallet} from '../../libs/actions/BankAccounts';

From d5d1d992c66b15a8f68feb3768f004342197e7b6 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:08:04 -1000
Subject: [PATCH 13/25] add checks for number

---
 src/pages/BusinessBankAccount/NewPage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 31028b258923..ae24289ebd75 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -50,7 +50,9 @@ class BusinessBankAccountNewPage extends React.Component {
         // @TODO add better validation
         return this.state.hasAcceptedTerms
             && this.state.accountNumber
-            && this.state.routingNumber;
+            && /^[0-9]+$/.test(this.state.accountNumber)
+            && this.state.routingNumber
+            && /^[0-9]{9}$/.test(this.state.routingNumber);
     }
 
     addManualAccount() {

From f985e1a919fbdf393105fa986ee211941d70d113 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:16:59 -1000
Subject: [PATCH 14/25] Use same validation that Web-Secure is using for now

---
 src/pages/BusinessBankAccount/NewPage.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index ae24289ebd75..c29aeedb1d6e 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -35,8 +35,8 @@ class BusinessBankAccountNewPage extends React.Component {
         this.state = {
             addMethodSelection: undefined,
             hasAcceptedTerms: false,
-            routingNumber: undefined,
-            accountNumber: undefined,
+            routingNumber: '',
+            accountNumber: '',
         };
     }
 
@@ -47,12 +47,13 @@ class BusinessBankAccountNewPage extends React.Component {
     }
 
     canSubmitManually() {
-        // @TODO add better validation
         return this.state.hasAcceptedTerms
             && this.state.accountNumber
-            && /^[0-9]+$/.test(this.state.accountNumber)
+
+            // These are taken from BankCountry.js in Web-Secure
+            && /^[A-Za-z0-9]{2,30}$/.test(this.state.accountNumber.trim())
             && this.state.routingNumber
-            && /^[0-9]{9}$/.test(this.state.routingNumber);
+            && /^[A-Za-z0-9]{8,11}$/.test(this.state.routingNumber.trim());
     }
 
     addManualAccount() {

From 5cfa72dff1cb974038e438316fc77ef092564039 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:17:38 -1000
Subject: [PATCH 15/25] remove null checks

---
 src/pages/BusinessBankAccount/NewPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index c29aeedb1d6e..e8180a533a18 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -48,11 +48,9 @@ class BusinessBankAccountNewPage extends React.Component {
 
     canSubmitManually() {
         return this.state.hasAcceptedTerms
-            && this.state.accountNumber
 
             // These are taken from BankCountry.js in Web-Secure
             && /^[A-Za-z0-9]{2,30}$/.test(this.state.accountNumber.trim())
-            && this.state.routingNumber
             && /^[A-Za-z0-9]{8,11}$/.test(this.state.routingNumber.trim());
     }
 

From 857ac9a5ea52373833c05f154a51f3474f29ff04 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 11:38:04 -1000
Subject: [PATCH 16/25] translate

---
 src/components/AddPlaidBankAccount.js    |  2 +-
 src/languages/en.js                      | 17 ++++++++--
 src/languages/es.js                      | 15 +++++++--
 src/pages/AddPersonalBankAccountPage.js  |  2 +-
 src/pages/BusinessBankAccount/NewPage.js | 43 ++++++++++++++----------
 src/pages/EnablePayments/OnfidoStep.js   |  2 +-
 6 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 1bb968ccc131..0f65433d15cf 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -142,7 +142,7 @@ class AddPlaidBankAccount extends React.Component {
                                     items={options}
                                     placeholder={_.isUndefined(this.state.selectedIndex) ? {
                                         value: '',
-                                        label: this.props.translate('addPersonalBankAccountPage.selectAccount'),
+                                        label: this.props.translate('bankAccount.chooseAnAccount'),
                                     } : {}}
                                     value={this.state.selectedIndex}
                                     icon={() => <Icon src={DownArrow} />}
diff --git a/src/languages/en.js b/src/languages/en.js
index 407cb1a793e9..4ffa8276d065 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -26,6 +26,7 @@ export default {
         email: 'Email',
         and: 'and',
         details: 'Details',
+        privacy: 'Privacy',
         privacyPolicy: 'Privacy Policy',
         delete: 'Delete',
         contacts: 'Contacts',
@@ -33,6 +34,7 @@ export default {
         close: 'Close',
         saveAndContinue: 'Save & Continue',
         settings: 'Settings',
+        termsOfService: 'Terms of Service',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -255,11 +257,21 @@ export default {
         enterPassword: 'Enter a password',
         setPassword: 'Set Password',
     },
+    bankAccount: {
+        accountNumber: 'Account Number',
+        routingNumber: 'Routing Number',
+        addBankAccount: 'Add Bank Account',
+        chooseAnAccount: 'Choose an Account',
+        logIntoYourBank: 'Log Into Your Bank',
+        connectManually: 'Connect Manually',
+        yourDataIsSecure: 'Your data is secure',
+        toGetStarted: 'To get started with the Expensify Card, you first need to add a bank account.',
+        plaidBodyCopy: 'Give your employees an easier way to pay - and get paid back - for company expenses.',
+        checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
+    },
     addPersonalBankAccountPage: {
         enterPassword: 'Enter password',
-        addPersonalBankAccount: 'Add Bank Account',
         alreadyAdded: 'This account has already been added.',
-        selectAccount: 'Choose an Account',
     },
     attachmentView: {
         unknownFilename: 'Unknown Filename',
@@ -280,7 +292,6 @@ export default {
     onfidoStep: {
         acceptTerms: 'By continuing with the request to activate your Expensify wallet, you confirm that you have read, understand and accept ',
         facialScan: 'Onfido’s Facial Scan Policy and Release',
-        termsOfService: 'Terms of Service',
         tryAgain: 'Try Again',
         verifyIdentity: 'Verify Identity',
         genericError: 'There was an error while processing this step. Please try again.',
diff --git a/src/languages/es.js b/src/languages/es.js
index b0d78aa8e97b..4c74ff201da2 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -31,6 +31,7 @@ export default {
         recents: 'Recientes',
         saveAndContinue: 'Guardar y Continuar',
         settings: 'Configuración',
+        termsOfService: 'Términos de servicio',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -251,11 +252,21 @@ export default {
         enterPassword: 'Escribe una contraseña',
         setPassword: 'Configura tu Contraseña',
     },
+    bankAccount: {
+        accountNumber: 'Número de cuenta',
+        routingNumber: 'Número de ruta',
+        addBankAccount: 'Agregar cuenta bancaria',
+        chooseAnAccount: 'Elige una cuenta',
+        logIntoYourBank: 'Inicie sesión en su banco',
+        connectManually: 'Conectar manualmente',
+        yourDataIsSecure: 'Tus datos estan seguros',
+        toGetStarted: 'Para comenzar con la tarjeta Expensify, primero debe agregar una cuenta bancaria.',
+        plaidBodyCopy: 'Ofrezca a sus empleados una forma más sencilla de pagar - y recuperar - los gastos de la empresa.',
+        checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque para la cuenta.',
+    },
     addPersonalBankAccountPage: {
         enterPassword: 'Escribe una contraseña',
-        addPersonalBankAccount: 'Agregar cuenta bancaria',
         alreadyAdded: 'Esta cuenta ya ha sido agregada.',
-        selectAccount: 'Elige una cuenta',
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 25710a7adc16..f82546dc1f73 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -15,7 +15,7 @@ const propTypes = {
 const AddPersonalBankAccountPage = props => (
     <ScreenWrapper>
         <HeaderWithCloseButton
-            title={props.translate('addPersonalBankAccountPage.addPersonalBankAccount')}
+            title={props.translate('bankAccount.addBankAccount')}
             onCloseButtonPress={Navigation.dismissModal}
         />
         <AddPlaidBankAccount
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index e8180a533a18..d08dd48e59f8 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -19,10 +19,14 @@ import TextInputWithLabel from '../../components/TextInputWithLabel';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import compose from '../../libs/compose';
 
 const propTypes = {
     /** List of betas */
     betas: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    ...withLocalizePropTypes,
 };
 
 class BusinessBankAccountNewPage extends React.Component {
@@ -68,7 +72,7 @@ class BusinessBankAccountNewPage extends React.Component {
             <ScreenWrapper>
                 <View style={[styles.flex1, styles.justifyContentBetween]}>
                     <HeaderWithCloseButton
-                        title="Add Bank Account"
+                        title={this.props.translate('bankAccount.addBankAccount')}
                         onCloseButtonPress={Navigation.dismissModal}
                         onBackButtonPress={() => this.setState({addMethodSelection: undefined})}
                         shouldShowBackButton={!_.isUndefined(this.state.addMethodSelection)}
@@ -77,11 +81,11 @@ class BusinessBankAccountNewPage extends React.Component {
                         <>
                             <View style={[styles.flex1]}>
                                 <Text style={[styles.mh5, styles.mb5]}>
-                                    To get started with the Expensify Card, you first need to add a bank account.
+                                    {this.props.translate('bankAccount.toGetStarted')}
                                 </Text>
                                 <MenuItem
                                     icon={Bug}
-                                    title="Log Into Your Bank"
+                                    title={this.props.translate('bankAccount.logIntoYourBank')}
                                     onPress={() => {
                                         this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.PLAID});
                                     }}
@@ -89,7 +93,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                 />
                                 <MenuItem
                                     icon={Bug}
-                                    title="Connect Manually"
+                                    title={this.props.translate('bankAccount.connectManually')}
                                     onPress={() => {
                                         this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL});
                                     }}
@@ -97,14 +101,14 @@ class BusinessBankAccountNewPage extends React.Component {
                                 />
                                 <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
                                     <TextLink href="https://use.expensify.com/privacy">
-                                        Privacy
+                                        {this.props.translate('common.privacy')}
                                     </TextLink>
                                     <TextLink
                                         // eslint-disable-next-line max-len
                                         href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
                                         style={[styles.dFlex, styles.justifyContentCenter]}
                                     >
-                                        Your data is secure
+                                        {this.props.translate('bankAccount.yourDataIsSecure')}
                                         <View style={[styles.ml1]}>
                                             <Icon src={Lock} fill={colors.blue} />
                                         </View>
@@ -115,7 +119,7 @@ class BusinessBankAccountNewPage extends React.Component {
                     )}
                     {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
                         <AddPlaidBankAccount
-                            text="Give your employees an easier way to pay - and get paid back - for company expenses."
+                            text={this.props.translate('bankAccount.plaidBodyCopy')}
                             onSubmit={(args) => {
                                 console.debug(args);
                             }}
@@ -128,17 +132,16 @@ class BusinessBankAccountNewPage extends React.Component {
                         <>
                             <View style={[styles.m5, styles.flex1]}>
                                 <Text style={[styles.mb5]}>
-                                    Your routing number and account number can be found on a check for the account.
+                                    {this.props.translate('bankAccount.checkHelpLine')}
                                 </Text>
                                 <TextInputWithLabel
-                                    label="Routing Number"
-                                    placeholder="9 digits"
+                                    label={this.props.translate('bankAccount.routingNumber')}
                                     keyboardType="numeric"
                                     value={this.state.routingNumber}
                                     onChangeText={routingNumber => this.setState({routingNumber})}
                                 />
                                 <TextInputWithLabel
-                                    label="Account Number"
+                                    label={this.props.translate('bankAccount.accountNumber')}
                                     keyboardType="numeric"
                                     value={this.state.accountNumber}
                                     onChangeText={accountNumber => this.setState({accountNumber})}
@@ -151,7 +154,8 @@ class BusinessBankAccountNewPage extends React.Component {
                                         <Text>
                                             {'I accept the '}
                                             <TextLink href="https://use.expensify.com/terms">
-                                                Expensify Terms of Service
+                                                Expensify
+                                                {` ${this.props.translate('common.termsOfService')}`}
                                             </TextLink>
                                         </Text>
                                     )}
@@ -159,7 +163,7 @@ class BusinessBankAccountNewPage extends React.Component {
                             </View>
                             <Button
                                 success
-                                text="Save & Continue"
+                                text={this.props.translate('common.saveAndContinue')}
                                 style={[styles.m5]}
                                 isDisabled={!this.canSubmitManually()}
                                 onPress={this.addManualAccount}
@@ -174,8 +178,11 @@ class BusinessBankAccountNewPage extends React.Component {
 
 BusinessBankAccountNewPage.propTypes = propTypes;
 
-export default withOnyx({
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-})(BusinessBankAccountNewPage);
+export default compose(
+    withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+    }),
+    withLocalize,
+)(BusinessBankAccountNewPage);
diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
index d6c231d41470..49c9000a807d 100644
--- a/src/pages/EnablePayments/OnfidoStep.js
+++ b/src/pages/EnablePayments/OnfidoStep.js
@@ -101,7 +101,7 @@ class OnfidoStep extends React.Component {
                                             <TextLink
                                                 href="https://onfido.com/terms-of-service/"
                                             >
-                                                {this.props.translate('onfidoStep.termsOfService')}
+                                                {this.props.translate('common.termsOfService')}
                                             </TextLink>
                                             .
                                         </Text>

From 7d4a9c8282681fe70bf90673d45d7b03a9a13385 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 12:53:19 -1000
Subject: [PATCH 17/25] use func for propTypes

---
 src/components/CheckboxWithLabel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index cee720d12b5f..17d8e85a0d72 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -7,7 +7,7 @@ import Checkbox from './Checkbox';
 
 const propTypes = {
     /** Component to display for label */
-    LabelComponent: PropTypes.node.isRequired,
+    LabelComponent: PropTypes.func.isRequired,
 
     /** Whether the checkbox is checked */
     isChecked: PropTypes.bool.isRequired,

From a098b6644f89af5cf89970e2da53802c89c17d0e Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 13:16:19 -1000
Subject: [PATCH 18/25] add assets

---
 assets/images/bank-details.png           | Bin 0 -> 5571 bytes
 assets/images/bank.svg                   |   3 +++
 assets/images/paycheck.svg               |   5 +++++
 src/components/Icon/Expensicons.js       |   4 ++++
 src/pages/BusinessBankAccount/NewPage.js |  18 ++++++++++++------
 src/styles/styles.js                     |   8 ++++++++
 6 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 assets/images/bank-details.png
 create mode 100644 assets/images/bank.svg
 create mode 100644 assets/images/paycheck.svg

diff --git a/assets/images/bank-details.png b/assets/images/bank-details.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1297301212c471403345cc0c2736ea8990ba61c
GIT binary patch
literal 5571
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
W5AkTnlE<DahLW7BY?ZWW@c#jj!JKjc

literal 0
HcmV?d00001

diff --git a/assets/images/bank.svg b/assets/images/bank.svg
new file mode 100644
index 000000000000..4e17ec42c591
--- /dev/null
+++ b/assets/images/bank.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.125 5H16.5L10.25 1.5C10 1.375 9.875 1.375 9.625 1.5L3.5 5H1.875C1.5 5 1.25 5.25 1.25 5.625V6.875C1.25 7.25 1.5 7.5 1.875 7.5H2.5V16.25H1.875C1.5 16.25 1.25 16.5 1.25 16.875V18.125C1.25 18.5 1.5 18.75 1.875 18.75H18.125C18.5 18.75 18.75 18.5 18.75 18.125V16.875C18.75 16.5 18.5 16.25 18.125 16.25H17.5V7.5H18.125C18.5 7.5 18.75 7.25 18.75 6.875V5.625C18.75 5.25 18.5 5 18.125 5ZM8.75 16.25H5V7.5H8.75V16.25ZM15 16.25H11.25V7.5H15V16.25Z" fill="black"/>
+</svg>
diff --git a/assets/images/paycheck.svg b/assets/images/paycheck.svg
new file mode 100644
index 000000000000..231545aec85d
--- /dev/null
+++ b/assets/images/paycheck.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56407 11.5479C4.75922 11.5251 4.90125 11.484 4.99018 11.4247C5.14581 11.3196 5.22362 11.1381 5.22362 10.8801C5.22362 10.6838 5.15075 10.5285 5.005 10.4144C4.91855 10.3482 4.77157 10.2797 4.56407 10.2089V11.5479Z" fill="black"/>
+<path d="M4.21206 7.96918C3.99715 7.97374 3.83782 8.0274 3.73407 8.13014C3.63032 8.23059 3.57845 8.36872 3.57845 8.54452C3.57845 8.7363 3.65626 8.88813 3.81188 9C3.89834 9.06164 4.03173 9.11872 4.21206 9.17123V7.96918Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3C0.447715 3 0 3.44772 0 4V15.75C0 16.3023 0.447716 16.75 1 16.75H19C19.5523 16.75 20 16.3023 20 15.75V4C20 3.44772 19.5523 3 19 3H1ZM4.57148 13H4.21206V12.3185C3.72543 12.2683 3.3623 12.1701 3.12269 12.024C2.70028 11.7614 2.49278 11.3139 2.50019 10.6815H3.50063C3.53522 10.9692 3.58339 11.1621 3.64514 11.2603C3.74148 11.4132 3.93045 11.5126 4.21206 11.5582V10.0959L3.91193 10.0137C3.44011 9.88584 3.10663 9.70776 2.91148 9.47945C2.71881 9.25114 2.62247 8.97603 2.62247 8.65411C2.62247 8.44178 2.65952 8.24886 2.73363 8.07534C2.81021 7.90183 2.91643 7.75228 3.05229 7.62671C3.22767 7.46461 3.42282 7.35274 3.63773 7.2911C3.76865 7.25228 3.9601 7.22374 4.21206 7.20548V6.75H4.56407V7.21233C4.96672 7.24201 5.28291 7.33333 5.51264 7.4863C5.93011 7.73059 6.14625 8.12671 6.16107 8.67466H5.18657C5.1668 8.47146 5.12975 8.32306 5.07541 8.22945C4.98154 8.06735 4.81109 7.97831 4.56407 7.96233V9.26712C5.15198 9.45434 5.54722 9.61986 5.74978 9.7637C6.08326 10.0034 6.25 10.3413 6.25 10.7774C6.25 11.3527 6.0215 11.7705 5.56451 12.0308C5.28538 12.1906 4.95436 12.2842 4.57148 12.3116V13ZM8.75 8C8.75 7.65482 9.02982 7.375 9.375 7.375H16.875C17.2202 7.375 17.5 7.65482 17.5 8C17.5 8.34518 17.2202 8.625 16.875 8.625H9.375C9.02982 8.625 8.75 8.34518 8.75 8ZM9.375 11.125C9.02982 11.125 8.75 11.4048 8.75 11.75C8.75 12.0952 9.02982 12.375 9.375 12.375H14.375C14.7202 12.375 15 12.0952 15 11.75C15 11.4048 14.7202 11.125 14.375 11.125H9.375Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index a5fcafc3185c..6a8f9dccfb46 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -2,6 +2,7 @@ import Android from '../../../assets/images/android.svg';
 import Apple from '../../../assets/images/apple.svg';
 import ArrowRight from '../../../assets/images/arrow-right.svg';
 import BackArrow from '../../../assets/images/back-left.svg';
+import Bank from '../../../assets/images/bank.svg';
 import Bug from '../../../assets/images/bug.svg';
 import Camera from '../../../assets/images/camera.svg';
 import ChatBubble from '../../../assets/images/chatbubble.svg';
@@ -27,6 +28,7 @@ import Monitor from '../../../assets/images/monitor.svg';
 import NewWindow from '../../../assets/images/new-window.svg';
 import Offline from '../../../assets/images/offline.svg';
 import Paperclip from '../../../assets/images/paperclip.svg';
+import Paycheck from '../../../assets/images/paycheck.svg';
 import Pencil from '../../../assets/images/pencil.svg';
 import Phone from '../../../assets/images/phone.svg';
 import Pin from '../../../assets/images/pin.svg';
@@ -47,6 +49,7 @@ export {
     Apple,
     ArrowRight,
     BackArrow,
+    Bank,
     Bug,
     Camera,
     ChatBubble,
@@ -72,6 +75,7 @@ export {
     NewWindow,
     Offline,
     Paperclip,
+    Paycheck,
     Pencil,
     Phone,
     Pin,
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index d08dd48e59f8..0644f5171535 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -1,12 +1,12 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Text} from 'react-native';
+import {View, Text, Image} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
-import {Bug, Lock} from '../../components/Icon/Expensicons';
+import {Paycheck, Bank, Lock} from '../../components/Icon/Expensicons';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
 import Button from '../../components/Button';
@@ -21,6 +21,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
+import bankDetailsImage from '../../../assets/images/bank-details.png';
 
 const propTypes = {
     /** List of betas */
@@ -84,7 +85,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                     {this.props.translate('bankAccount.toGetStarted')}
                                 </Text>
                                 <MenuItem
-                                    icon={Bug}
+                                    icon={Bank}
                                     title={this.props.translate('bankAccount.logIntoYourBank')}
                                     onPress={() => {
                                         this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.PLAID});
@@ -92,7 +93,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                     shouldShowRightIcon
                                 />
                                 <MenuItem
-                                    icon={Bug}
+                                    icon={Paycheck}
                                     title={this.props.translate('bankAccount.connectManually')}
                                     onPress={() => {
                                         this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL});
@@ -134,14 +135,19 @@ class BusinessBankAccountNewPage extends React.Component {
                                 <Text style={[styles.mb5]}>
                                     {this.props.translate('bankAccount.checkHelpLine')}
                                 </Text>
+                                <Image
+                                    resizeMode="contain"
+                                    style={[styles.bankDetailsImage, styles.mb5]}
+                                    source={bankDetailsImage}
+                                />
                                 <TextInputWithLabel
-                                    label={this.props.translate('bankAccount.routingNumber')}
+                                    placeholder={this.props.translate('bankAccount.routingNumber')}
                                     keyboardType="numeric"
                                     value={this.state.routingNumber}
                                     onChangeText={routingNumber => this.setState({routingNumber})}
                                 />
                                 <TextInputWithLabel
-                                    label={this.props.translate('bankAccount.accountNumber')}
+                                    placeholder={this.props.translate('bankAccount.accountNumber')}
                                     keyboardType="numeric"
                                     value={this.state.accountNumber}
                                     onChangeText={accountNumber => this.setState({accountNumber})}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 170b7fea55c0..250fabb32c0b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -985,6 +985,14 @@ const styles = {
         borderRightWidth: 0,
     },
 
+    bankDetailsImage: {
+        width: '100%',
+        height: 80,
+        borderColor: themeColors.border,
+        borderWidth: 1,
+        borderRadius: variables.componentBorderRadiusNormal,
+    },
+
     singleAvatar: {
         height: 24,
         width: 24,

From 7e96346d938a8af53c013f8ea068dbd9242a9357 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 13:38:19 -1000
Subject: [PATCH 19/25] fix checkbox text flow on iOS

---
 src/pages/BusinessBankAccount/NewPage.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 0644f5171535..4a40e10a8fd3 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -142,28 +142,32 @@ class BusinessBankAccountNewPage extends React.Component {
                                 />
                                 <TextInputWithLabel
                                     placeholder={this.props.translate('bankAccount.routingNumber')}
-                                    keyboardType="numeric"
+                                    keyboardType="number-pad"
                                     value={this.state.routingNumber}
                                     onChangeText={routingNumber => this.setState({routingNumber})}
+                                    returnKeyType="go"
                                 />
                                 <TextInputWithLabel
                                     placeholder={this.props.translate('bankAccount.accountNumber')}
-                                    keyboardType="numeric"
+                                    keyboardType="number-pad"
                                     value={this.state.accountNumber}
                                     onChangeText={accountNumber => this.setState({accountNumber})}
+                                    returnKeyType="go"
                                 />
                                 <CheckboxWithLabel
                                     style={[styles.mb4, styles.mt5]}
                                     isChecked={this.state.hasAcceptedTerms}
                                     onPress={this.toggleTerms}
                                     LabelComponent={() => (
-                                        <Text>
-                                            {'I accept the '}
+                                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                            <Text>
+                                                {'I accept the '}
+                                            </Text>
                                             <TextLink href="https://use.expensify.com/terms">
                                                 Expensify
                                                 {` ${this.props.translate('common.termsOfService')}`}
                                             </TextLink>
-                                        </Text>
+                                        </View>
                                     )}
                                 />
                             </View>

From ac3993851379276c6ec88ea094e559003c00107c Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 13:38:46 -1000
Subject: [PATCH 20/25] remove returnKeyType

---
 src/pages/BusinessBankAccount/NewPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 4a40e10a8fd3..8f548c08a0c8 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -145,14 +145,12 @@ class BusinessBankAccountNewPage extends React.Component {
                                     keyboardType="number-pad"
                                     value={this.state.routingNumber}
                                     onChangeText={routingNumber => this.setState({routingNumber})}
-                                    returnKeyType="go"
                                 />
                                 <TextInputWithLabel
                                     placeholder={this.props.translate('bankAccount.accountNumber')}
                                     keyboardType="number-pad"
                                     value={this.state.accountNumber}
                                     onChangeText={accountNumber => this.setState({accountNumber})}
-                                    returnKeyType="go"
                                 />
                                 <CheckboxWithLabel
                                     style={[styles.mb4, styles.mt5]}

From 45b86d02173d5dd68f59cccd937c8f4183e6f1e6 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 14:00:02 -1000
Subject: [PATCH 21/25] fix up misaligned lock icon

---
 src/components/TextInputWithLabel.js     |  5 +++--
 src/components/TextLink.js               |  2 +-
 src/pages/BusinessBankAccount/NewPage.js | 15 ++++++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/TextInputWithLabel.js b/src/components/TextInputWithLabel.js
index e129dd6fb462..6de98bc9f28b 100644
--- a/src/components/TextInputWithLabel.js
+++ b/src/components/TextInputWithLabel.js
@@ -6,19 +6,20 @@ import styles from '../styles/styles';
 
 const propTypes = {
     /** Label text */
-    label: PropTypes.string.isRequired,
+    label: PropTypes.string,
 
     /** Text to show if there is an error */
     errorText: PropTypes.string,
 };
 
 const defaultProps = {
+    label: '',
     errorText: '',
 };
 
 const TextInputWithLabel = props => (
     <>
-        <Text style={[styles.formLabel]}>{props.label}</Text>
+        {!_.isEmpty(props.label) && <Text style={[styles.formLabel]}>{props.label}</Text>}
         <TextInput
             style={[styles.textInput, styles.mb1]}
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 91672e9cb487..2eec845ddd2c 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -31,7 +31,7 @@ const TextLink = (props) => {
             href={props.href}
         >
             {({hovered, pressed}) => (
-                <Text style={[additionalStyles, styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
+                <Text style={[...additionalStyles, styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
                     {props.children}
                 </Text>
             )}
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 8f548c08a0c8..61cc6e4e2b4d 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -104,16 +104,17 @@ class BusinessBankAccountNewPage extends React.Component {
                                     <TextLink href="https://use.expensify.com/privacy">
                                         {this.props.translate('common.privacy')}
                                     </TextLink>
-                                    <TextLink
-                                        // eslint-disable-next-line max-len
-                                        href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
-                                        style={[styles.dFlex, styles.justifyContentCenter]}
-                                    >
-                                        {this.props.translate('bankAccount.yourDataIsSecure')}
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        <TextLink
+                                            // eslint-disable-next-line max-len
+                                            href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
+                                        >
+                                            {this.props.translate('bankAccount.yourDataIsSecure')}
+                                        </TextLink>
                                         <View style={[styles.ml1]}>
                                             <Icon src={Lock} fill={colors.blue} />
                                         </View>
-                                    </TextLink>
+                                    </View>
                                 </View>
                             </View>
                         </>

From 8a19a67c3b179fb7aad612bb512bfcc07320e41b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 14:23:20 -1000
Subject: [PATCH 22/25] rename check image. fix up text link and consts

---
 ...nk-details.png => example-check-image.png} | Bin
 src/CONST.js                                  |   4 +++
 src/components/TextLink.js                    |   2 +-
 src/pages/BusinessBankAccount/NewPage.js      |  32 ++++++++++--------
 src/styles/styles.js                          |   2 +-
 5 files changed, 24 insertions(+), 16 deletions(-)
 rename assets/images/{bank-details.png => example-check-image.png} (100%)

diff --git a/assets/images/bank-details.png b/assets/images/example-check-image.png
similarity index 100%
rename from assets/images/bank-details.png
rename to assets/images/example-check-image.png
diff --git a/src/CONST.js b/src/CONST.js
index 241b70648dc2..52c6ec618333 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -11,6 +11,10 @@ const CONST = {
             MANUAL: 'manual',
             PLAID: 'plaid',
         },
+        REGEX: {
+            IBAN: /^[A-Za-z0-9]{2,30}$/,
+            SWIFT_BIC: /^[A-Za-z0-9]{8,11}$/,
+        },
     },
     BETAS: {
         ALL: 'all',
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 2eec845ddd2c..d3ac720f06b9 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -9,7 +9,7 @@ const propTypes = {
     href: PropTypes.string.isRequired,
 
     /** Text content child */
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
+    children: PropTypes.string.isRequired,
 
     /** Additional style props */
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 61cc6e4e2b4d..8ecbd041a76c 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -21,7 +21,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import bankDetailsImage from '../../../assets/images/bank-details.png';
+import exampleCheckImage from '../../../assets/images/example-check-image.png';
 
 const propTypes = {
     /** List of betas */
@@ -38,7 +38,8 @@ class BusinessBankAccountNewPage extends React.Component {
         this.addManualAccount = this.addManualAccount.bind(this);
 
         this.state = {
-            addMethodSelection: undefined,
+            // One of CONST.BANK_ACCOUNT.ADD_METHOD
+            bankAccountAddMethod: undefined,
             hasAcceptedTerms: false,
             routingNumber: '',
             accountNumber: '',
@@ -51,12 +52,15 @@ class BusinessBankAccountNewPage extends React.Component {
         }));
     }
 
+    /**
+     * @returns {Boolean}
+     */
     canSubmitManually() {
         return this.state.hasAcceptedTerms
 
             // These are taken from BankCountry.js in Web-Secure
-            && /^[A-Za-z0-9]{2,30}$/.test(this.state.accountNumber.trim())
-            && /^[A-Za-z0-9]{8,11}$/.test(this.state.routingNumber.trim());
+            && CONST.BANK_ACCOUNT.REGEX.IBAN.test(this.state.accountNumber.trim())
+            && CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(this.state.routingNumber.trim());
     }
 
     addManualAccount() {
@@ -75,10 +79,10 @@ class BusinessBankAccountNewPage extends React.Component {
                     <HeaderWithCloseButton
                         title={this.props.translate('bankAccount.addBankAccount')}
                         onCloseButtonPress={Navigation.dismissModal}
-                        onBackButtonPress={() => this.setState({addMethodSelection: undefined})}
-                        shouldShowBackButton={!_.isUndefined(this.state.addMethodSelection)}
+                        onBackButtonPress={() => this.setState({bankAccountAddMethod: undefined})}
+                        shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)}
                     />
-                    {!this.state.addMethodSelection && (
+                    {!this.state.bankAccountAddMethod && (
                         <>
                             <View style={[styles.flex1]}>
                                 <Text style={[styles.mh5, styles.mb5]}>
@@ -88,7 +92,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                     icon={Bank}
                                     title={this.props.translate('bankAccount.logIntoYourBank')}
                                     onPress={() => {
-                                        this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.PLAID});
+                                        this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.ADD_METHOD.PLAID});
                                     }}
                                     shouldShowRightIcon
                                 />
@@ -96,7 +100,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                     icon={Paycheck}
                                     title={this.props.translate('bankAccount.connectManually')}
                                     onPress={() => {
-                                        this.setState({addMethodSelection: CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL});
+                                        this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL});
                                     }}
                                     shouldShowRightIcon
                                 />
@@ -119,18 +123,18 @@ class BusinessBankAccountNewPage extends React.Component {
                             </View>
                         </>
                     )}
-                    {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
+                    {this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.ADD_METHOD.PLAID && (
                         <AddPlaidBankAccount
                             text={this.props.translate('bankAccount.plaidBodyCopy')}
                             onSubmit={(args) => {
                                 console.debug(args);
                             }}
                             onExitPlaid={() => {
-                                this.setState({addMethodSelection: undefined});
+                                this.setState({bankAccountAddMethod: undefined});
                             }}
                         />
                     )}
-                    {this.state.addMethodSelection === CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL && (
+                    {this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.ADD_METHOD.MANUAL && (
                         <>
                             <View style={[styles.m5, styles.flex1]}>
                                 <Text style={[styles.mb5]}>
@@ -138,8 +142,8 @@ class BusinessBankAccountNewPage extends React.Component {
                                 </Text>
                                 <Image
                                     resizeMode="contain"
-                                    style={[styles.bankDetailsImage, styles.mb5]}
-                                    source={bankDetailsImage}
+                                    style={[styles.exampleCheckImage, styles.mb5]}
+                                    source={exampleCheckImage}
                                 />
                                 <TextInputWithLabel
                                     placeholder={this.props.translate('bankAccount.routingNumber')}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 250fabb32c0b..3a2fac4347a2 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -985,7 +985,7 @@ const styles = {
         borderRightWidth: 0,
     },
 
-    bankDetailsImage: {
+    exampleCheckImage: {
         width: '100%',
         height: 80,
         borderColor: themeColors.border,

From d04ed4663cf0e56e4283c904b6bb42aae2f87612 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 9 Jun 2021 14:37:41 -1000
Subject: [PATCH 23/25] do not pass array to TextLink

---
 src/pages/BusinessBankAccount/NewPage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index 8ecbd041a76c..f67e398e3390 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -167,8 +167,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                                 {'I accept the '}
                                             </Text>
                                             <TextLink href="https://use.expensify.com/terms">
-                                                Expensify
-                                                {` ${this.props.translate('common.termsOfService')}`}
+                                                {`Expensify ${this.props.translate('common.termsOfService')}`}
                                             </TextLink>
                                         </View>
                                     )}

From 108674f5e7526550ae7687700ba2304e30b97ad7 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 10 Jun 2021 08:47:06 -1000
Subject: [PATCH 24/25] use higher quality image

---
 assets/images/example-check-image.png | Bin 5571 -> 11570 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/assets/images/example-check-image.png b/assets/images/example-check-image.png
index f1297301212c471403345cc0c2736ea8990ba61c..c6ef809ed983ab85824b3dc32999b07171d6df86 100644
GIT binary patch
literal 11570
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
W$rZvm9v1zdsr5|%X@#0?*#7`I3P;!g

literal 5571
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
W5AkTnlE<DahLW7BY?ZWW@c#jj!JKjc


From 6b3d5f55619f3673cca718248f7ed7ffe8187c3c Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 10 Jun 2021 13:13:01 -1000
Subject: [PATCH 25/25] make requested changes

---
 src/components/AddPlaidBankAccount.js    | 14 +++++++++-----
 src/components/CheckboxWithLabel.js      |  1 +
 src/languages/en.js                      |  1 +
 src/languages/es.js                      |  1 +
 src/pages/BusinessBankAccount/NewPage.js |  6 ++++--
 src/pages/EnablePayments/TermsStep.js    |  3 ++-
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 0f65433d15cf..1743eaeb3d82 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -3,7 +3,6 @@ import React from 'react';
 import {
     ActivityIndicator,
     View,
-    Text,
     TextInput,
 } from 'react-native';
 import PropTypes from 'prop-types';
@@ -24,6 +23,7 @@ import Button from './Button';
 import Picker from './Picker';
 import Icon from './Icon';
 import {DownArrow} from './Icon/Expensicons';
+import Text from './Text';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -45,6 +45,9 @@ const propTypes = {
 
     /** Fired when the user selects an account and submits the form */
     onSubmit: PropTypes.func,
+
+    /** Additional text to display */
+    text: PropTypes.string,
 };
 
 const defaultProps = {
@@ -54,6 +57,7 @@ const defaultProps = {
     },
     onExitPlaid: () => {},
     onSubmit: () => {},
+    text: '',
 };
 
 class AddPlaidBankAccount extends React.Component {
@@ -119,10 +123,10 @@ class AddPlaidBankAccount extends React.Component {
                         onError={(error) => {
                             console.debug(`Plaid Error: ${error.message}`);
                         }}
-                        onExit={() => {
-                            // User prematurely exited the Plaid flow
-                            this.props.onExitPlaid();
-                        }}
+
+                        // User prematurely exited the Plaid flow
+                        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                        onExit={this.props.onExitPlaid}
                     />
                 )}
                 {accounts.length > 0 && (
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 17d8e85a0d72..327beed2a74f 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -53,5 +53,6 @@ const CheckboxWithLabel = ({
 
 CheckboxWithLabel.propTypes = propTypes;
 CheckboxWithLabel.defaultProps = defaultProps;
+CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
 export default CheckboxWithLabel;
diff --git a/src/languages/en.js b/src/languages/en.js
index 4ffa8276d065..c4404fc8bcec 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -268,6 +268,7 @@ export default {
         toGetStarted: 'To get started with the Expensify Card, you first need to add a bank account.',
         plaidBodyCopy: 'Give your employees an easier way to pay - and get paid back - for company expenses.',
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
+        iAcceptThe: 'I accept the ',
     },
     addPersonalBankAccountPage: {
         enterPassword: 'Enter password',
diff --git a/src/languages/es.js b/src/languages/es.js
index 4c74ff201da2..252d96d898cd 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -263,6 +263,7 @@ export default {
         toGetStarted: 'Para comenzar con la tarjeta Expensify, primero debe agregar una cuenta bancaria.',
         plaidBodyCopy: 'Ofrezca a sus empleados una forma más sencilla de pagar - y recuperar - los gastos de la empresa.',
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque para la cuenta.',
+        iAcceptThe: 'Acepto los ',
     },
     addPersonalBankAccountPage: {
         enterPassword: 'Escribe una contraseña',
diff --git a/src/pages/BusinessBankAccount/NewPage.js b/src/pages/BusinessBankAccount/NewPage.js
index f67e398e3390..7e0bf0fd27c0 100644
--- a/src/pages/BusinessBankAccount/NewPage.js
+++ b/src/pages/BusinessBankAccount/NewPage.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Text, Image} from 'react-native';
+import {View, Image} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -22,6 +22,7 @@ import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import exampleCheckImage from '../../../assets/images/example-check-image.png';
+import Text from '../../components/Text';
 
 const propTypes = {
     /** List of betas */
@@ -69,6 +70,7 @@ class BusinessBankAccountNewPage extends React.Component {
 
     render() {
         if (!Permissions.canUseFreePlan(this.props.betas)) {
+            console.debug('Not showing new bank account page because user is not on free plan beta');
             Navigation.dismissModal();
             return null;
         }
@@ -164,7 +166,7 @@ class BusinessBankAccountNewPage extends React.Component {
                                     LabelComponent={() => (
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             <Text>
-                                                {'I accept the '}
+                                                {this.props.translate('bankAccount.iAcceptThe')}
                                             </Text>
                                             <TextLink href="https://use.expensify.com/terms">
                                                 {`Expensify ${this.props.translate('common.termsOfService')}`}
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index d1a7396fd32e..38bbadb31ac6 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-    View, ScrollView, Text,
+    View, ScrollView,
 } from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -16,6 +16,7 @@ import TextLink from '../../components/TextLink';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
+import Text from '../../components/Text';
 
 const propTypes = {
     /** Comes from Onyx. Information about the terms for the wallet */