Add Pattern B to creating Personal Bank Account

src/components/AddPlaidBankAccount.js

@@ -50,6 +50,9 @@ const propTypes = {
     /** Are we adding a withdrawal account? */
     allowDebit: PropTypes.bool,
 
+    /** Any error we want to show? */
+    errorText: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
@@ -69,6 +72,7 @@ const defaultProps = {
     plaidLinkOAuthToken: '',
     allowDebit: false,
     bankAccountID: 0,
+    errorText: '',
 };
 
 class AddPlaidBankAccount extends React.Component {
@@ -192,6 +196,7 @@ class AddPlaidBankAccount extends React.Component {
                             label: this.props.translate('bankAccount.chooseAnAccount'),
                         } : {}}
                         value={selectedPlaidBankAccount.plaidAccountID}
+                        errorText={this.props.errorText}
                     />
                 </View>
             </View>

src/components/KYCWall/BaseKYCWall.js

@@ -135,6 +135,10 @@ class KYCWall extends React.Component {
                     onItemSelected={(item) => {
                         this.setState({shouldShowAddPaymentMenu: false});
                         if (item === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+                            // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data
+                            PaymentMethods.clearPersonalBankAccount();
+                            PaymentMethods.clearPlaid();
+
                             Navigation.navigate(this.props.addBankAccountRoute);
                         } else if (item === CONST.PAYMENT_METHODS.DEBIT_CARD) {
                             Navigation.navigate(this.props.addDebitCardRoute);

src/components/MenuItem.js

@@ -37,6 +37,7 @@ const defaultProps = {
     iconFill: undefined,
     focused: false,
     disabled: false,
+    isPending: false,
     isSelected: false,
     subtitle: undefined,
     iconType: 'icon',
@@ -76,7 +77,7 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.flex1]}>
+                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.flex1, (props.isPending ? styles.offlineFeedback.pending : undefined)]}>
                         {(props.icon && props.iconType === CONST.ICON_TYPE_ICON) && (
                             <View
                                 style={[

src/components/bankAccountPropTypes.js

@@ -7,6 +7,9 @@ export default PropTypes.shape({
     /** The masked bank account number */
     accountNumber: PropTypes.string,
 
+    /** The routing number */
+    routingNumber: PropTypes.string,
+
     /** The bankAccountID in the bankAccounts db */
     bankAccountID: PropTypes.number,
 

src/components/menuItemPropTypes.js

@@ -58,6 +58,9 @@ const propTypes = {
     /** Should we disable this menu item? */
     disabled: PropTypes.bool,
 
+    /** Gives the menu item a pending style */
+    isPending: PropTypes.bool,
+
     /** A right-aligned subtitle for this menu option */
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 

src/components/personalBankAccountPropTypes.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** General errors */
+    errors: PropTypes.shape({
+        /** Key: timestamp - Value: Error message */
+    }),
+
+    /** Field specific errors */
+    errorFields: PropTypes.shape({
+        /** Key: fieldID - bool */
+    }),
+
+    /** Is this pending to be added? */
+    pendingAction: PropTypes.string,
+
+    /** Plaid account ID of the pending bank account */
+    selectedPlaidAccountID: PropTypes.string,
+
+    /** Personal Bank Account successfully added. Show user success modal */
+    shouldShowSuccess: PropTypes.bool,
+
+    /** Show loader if still awaiting response */
+    isLoading: PropTypes.bool,
+});

src/languages/en.js

@@ -412,7 +412,7 @@ export default {
             notOwnerOfFund: 'There was an error setting this card as your default payment method.',
             setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.',
         },
-        addBankAccountFailure: 'And unexpected error occurred while trying to add your bank account. Please try again.',
+        addBankAccountFailure: 'An unexpected error occurred while trying to add your bank account. Please try again.',
     },
     transferAmountPage: {
         transfer: ({amount}) => `Transfer${amount ? ` ${amount}` : ''}`,
@@ -588,6 +588,8 @@ export default {
         chooseAccountLabel: 'Account',
         successTitle: 'Personal bank account added!',
         successMessage: 'Congrats, your bank account is set up and ready to receive reimbursements.',
+        passwordRequired: 'Please enter a password',
+        plaidBankAccountRequired: 'Please select a bank account',
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',

src/languages/es.js

@@ -588,6 +588,8 @@ export default {
         chooseAccountLabel: 'Cuenta',
         successTitle: '¡Cuenta bancaria personal añadida!',
         successMessage: 'Enhorabuena, tu cuenta bancaria está lista para recibir reembolsos.',
+        passwordRequired: 'Por favor introduce tu contraseña',
+        plaidBankAccountRequired: 'Por favor seleccione una cuenta bancaria',
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',

src/libs/PaymentUtils.js

@@ -85,7 +85,7 @@ function calculateWalletTransferBalanceFee(currentBalance, methodType) {
 }
 
 export {
-    hasExpensifyPaymentMethod,
-    formatPaymentMethods,
     calculateWalletTransferBalanceFee,
+    formatPaymentMethods,
+    hasExpensifyPaymentMethod,
 };

src/libs/actions/BankAccounts.js

@@ -4,6 +4,9 @@ import * as API from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Localize from '../Localize';
 import DateUtils from '../DateUtils';
+import Navigation from '../Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import * as NetworkStore from '../Network/NetworkStore';
 
 export {
     setupWithdrawalAccount,
@@ -31,10 +34,6 @@ export {
     acceptWalletTerms,
 } from './Wallet';
 
-function clearPersonalBankAccount() {
-    Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {});
-}
-
 function clearPlaid() {
     Onyx.set(ONYXKEYS.PLAID_DATA, {});
     Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
@@ -116,7 +115,6 @@ function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) {
  *
  * @param {Object} account
  * @param {String} password
- * @TODO offline pattern for this command will have to be added later once the pattern B design doc is complete
  */
 function addPersonalBankAccount(account, password) {
     const commandName = 'AddPersonalBankAccount';
@@ -131,6 +129,7 @@ function addPersonalBankAccount(account, password) {
         plaidAccountID: account.plaidAccountID,
         plaidAccessToken: account.plaidAccessToken,
         password,
+        isPending: true,
     };
 
     const onyxData = {
@@ -139,8 +138,10 @@ function addPersonalBankAccount(account, password) {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
+                    errors: null,
+                    errorFields: null,
+                    selectedPlaidAccountID: parameters.plaidAccountID,
                     isLoading: true,
-                    error: '',
                 },
             },
         ],
@@ -150,23 +151,72 @@ function addPersonalBankAccount(account, password) {
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
                     isLoading: false,
-                    error: '',
                     shouldShowSuccess: true,
                 },
             },
+            {
+                onyxMethod: CONST.ONYX.METHOD.SET,
+                key: ONYXKEYS.PLAID_DATA,
+                value: {},
+            },
+            {
+                onyxMethod: CONST.ONYX.METHOD.SET,
+                key: ONYXKEYS.PLAID_LINK_TOKEN,
+                value: '',
+            },
         ],
         failureData: [
             {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
                     isLoading: false,
-                    error: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
                 },
             },
         ],
     };
 
+    if (NetworkStore.isOffline()) {
+        // If offline, Optimistically go to the list of bank accounts
+        Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
+
+        // And build Onyx Data for pattern B
+        onyxData.optimisticData = onyxData.optimisticData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: {
+                    title: account.addressName,
+                    description: `${Localize.translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber.slice(-4)}`,
+                    methodID: 0,
+                    key: 'bankAccount-0',
+                    accountType: CONST.PAYMENT_METHODS.BANK_ACCOUNT,
+                    accountData: {...account, bankAccountID: 0},
+                    errors: null,
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
+            },
+        });
+        onyxData.successData = onyxData.successData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: null,
+            },
+        });
+        onyxData.failureData = onyxData.failureData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: {
+                    errors: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
+                    },
+                },
+            },
+        });
+    }
+
     API.write(commandName, parameters, onyxData);
 }
 
@@ -178,7 +228,11 @@ function deletePaymentBankAccount(bankAccountID) {
             {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`,
-                value: {[bankAccountID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}},
+                value: {
+                    [bankAccountID]: {
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                    },
+                },
             },
         ],
     });
@@ -295,7 +349,6 @@ export {
     addPersonalBankAccount,
     connectBankAccountManually,
     deletePaymentBankAccount,
-    clearPersonalBankAccount,
     clearPlaid,
     clearOnfido,
     updatePersonalInformationForBankAccount,

src/libs/actions/PaymentMethods.js

@@ -370,6 +370,46 @@ function deletePaymentCard(fundID) {
     });
 }
 
+function navigateToAddPaymentMethodPage(paymentType, allowPaypalPaymentTypes = true) {
+    // We don't always show Paypal as an option
+    if (paymentType === CONST.PAYMENT_METHODS.PAYPAL && allowPaypalPaymentTypes) {
+        Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
+        return;
+    }
+
+    if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+        Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
+        return;
+    }
+
+    if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+        // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data
+        this.clearPersonalBankAccount();
+        this.clearPlaid();
+
+        Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
+        return;
+    }
+
+    throw new Error('Invalid payment method type selected');
+}
+
+function clearBankAccountPendingAdd() {
+    Onyx.merge(ONYXKEYS.BANK_ACCOUNT_LIST, {
+        0: null,
+    });
+}
+
+function clearPersonalBankAccount() {
+    Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {});
+    clearBankAccountPendingAdd();
+}
+
+function clearPlaid() {
+    Onyx.set(ONYXKEYS.PLAID_DATA, {});
+    Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
+}
+
 export {
     deletePayPalMe,
     deletePaymentCard,
@@ -390,5 +430,9 @@ export {
     clearDeletePaymentMethodError,
     clearAddPaymentMethodError,
     clearWalletError,
+    navigateToAddPaymentMethodPage,
+    clearPersonalBankAccount,
+    clearBankAccountPendingAdd,
+    clearPlaid,
     clearWalletTermsError,
 };

src/libs/actions/ReimbursementAccount/errors.js

@@ -12,6 +12,14 @@ function setPersonalBankAccountFormValidationErrorFields(errorFields) {
     Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errorFields});
 }
 
+/**
+ * Clear validation messages from personal bank account
+ */
+function resetPersonalBankAccountErrors() {
+    setPersonalBankAccountFormValidationErrorFields({});
+    Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errors: null});
+}
+
 /**
  * Set the current fields with errors.
  *
@@ -49,4 +57,5 @@ export {
     setPersonalBankAccountFormValidationErrorFields,
     showBankAccountFormValidationError,
     resetReimbursementAccount,
+    resetPersonalBankAccountErrors,
 };

src/libs/actions/ReimbursementAccount/index.js

@@ -9,6 +9,7 @@ export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navi
 export {
     setBankAccountFormValidationErrors,
     setPersonalBankAccountFormValidationErrorFields,
+    resetPersonalBankAccountErrors,
     resetReimbursementAccount,
     showBankAccountFormValidationError,
 } from './errors';