Merge pull request #11750 from Expensify/nat-isPlaidDisabled

Refactor PLAID_DATA and fix plaid bankAccounts selector (cherry picked from commit 6f0d806)
Expensify · Oct 13, 2022 · 4800bfa · 4800bfa
1 parent 6d5a8a7
commit 4800bfa
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 65 deletions.
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -26,6 +26,9 @@ const propTypes = {
     /** Contains plaid data */
     plaidData: plaidDataPropTypes,
 
+    /** Selected account ID from the Picker associated with the end of the Plaid flow */
+    selectedPlaidAccountID: PropTypes.string,
+
     /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: PropTypes.string,
 
@@ -61,6 +64,7 @@ const defaultProps = {
         isLoading: false,
         error: '',
     },
+    selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
     onSelect: () => {},
@@ -75,7 +79,6 @@ class AddPlaidBankAccount extends React.Component {
     constructor(props) {
         super(props);
 
-        this.selectAccount = this.selectAccount.bind(this);
         this.getPlaidLinkToken = this.getPlaidLinkToken.bind(this);
     }
 
@@ -88,15 +91,6 @@ class AddPlaidBankAccount extends React.Component {
         BankAccounts.openPlaidBankLogin(this.props.allowDebit, this.props.bankAccountID);
     }
 
-    /**
-     * Get list of bank accounts
-     *
-     * @returns {Object[]}
-     */
-    getPlaidBankAccounts() {
-        return lodashGet(this.props.plaidData, 'bankAccounts', []);
-    }
-
     /**
      * @returns {String}
      */
@@ -110,25 +104,13 @@ class AddPlaidBankAccount extends React.Component {
         }
     }
 
-    /**
-     * Triggered when user selects a Plaid bank account.
-     * @param {String} plaidAccountID
-     */
-    selectAccount(plaidAccountID) {
-        const selectedPlaidBankAccount = _.findWhere(this.getPlaidBankAccounts(), {plaidAccountID});
-        selectedPlaidBankAccount.bankName = this.props.plaidData.bankName;
-        selectedPlaidBankAccount.plaidAccessToken = this.props.plaidData.plaidAccessToken;
-        this.props.onSelect({selectedPlaidBankAccount});
-    }
-
     render() {
-        const plaidBankAccounts = this.getPlaidBankAccounts();
+        const plaidBankAccounts = lodashGet(this.props.plaidData, 'bankAccounts', []);
         const token = this.getPlaidLinkToken();
         const options = _.map(plaidBankAccounts, account => ({
-            value: account.plaidAccountID, label: `${account.addressName} ${account.mask}`,
+            value: account.plaidAccountID,
+            label: `${account.addressName} ${account.mask}`,
         }));
-        const institutionName = lodashGet(this.props, 'plaidData.institution.name', '');
-        const selectedPlaidBankAccount = lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {});
         const {icon, iconSize} = getBankIcon();
 
         // Plaid Link view
@@ -180,18 +162,18 @@ class AddPlaidBankAccount extends React.Component {
                         height={iconSize}
                         width={iconSize}
                     />
-                    <Text style={[styles.ml3, styles.textStrong]}>{institutionName}</Text>
+                    <Text style={[styles.ml3, styles.textStrong]}>{this.props.plaidData.bankName}</Text>
                 </View>
                 <View style={[styles.mb5]}>
                     <Picker
                         label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
-                        onInputChange={this.selectAccount}
+                        onInputChange={this.props.onSelect}
                         items={options}
-                        placeholder={_.isUndefined(this.props.plaidData.selectedPlaidBankAccount) ? {
+                        placeholder={{
                             value: '',
                             label: this.props.translate('bankAccount.chooseAnAccount'),
-                        } : {}}
-                        value={selectedPlaidBankAccount.plaidAccountID}
+                        }}
+                        value={this.props.selectedPlaidAccountID}
                     />
                 </View>
             </View>

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
@@ -141,6 +141,7 @@ function addPersonalBankAccount(account, password) {
                 value: {
                     isLoading: true,
                     errors: null,
+                    plaidAccountID: account.plaidAccountID,
                 },
             },
         ],

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
@@ -230,7 +230,7 @@ function addPaymentCard(params) {
 function clearDebitCardFormErrorAndSubmit() {
     Onyx.set(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, {
         isLoading: false,
-        error: null,
+        errors: null,
     });
 }
 

diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
@@ -27,10 +27,20 @@ import ROUTES from '../ROUTES';
 
 const propTypes = {
     ...withLocalizePropTypes,
+
+    /** The details about the Personal bank account we are adding saved in Onyx */
     personalBankAccount: PropTypes.shape({
+        /** An error message to display to the user */
         error: PropTypes.string,
+
+        /** Whether we should show the view that the bank account was successfully added */
         shouldShowSuccess: PropTypes.bool,
+
+        /** Whether the form is loading */
         isLoading: PropTypes.bool,
+
+        /** The account ID of the selected bank account from Plaid */
+        plaidAccountID: PropTypes.string,
     }),
 };
 
@@ -39,6 +49,7 @@ const defaultProps = {
         error: '',
         shouldShowSuccess: false,
         isLoading: false,
+        plaidAccountID: '',
     },
 };
 
@@ -50,7 +61,7 @@ class AddPersonalBankAccountPage extends React.Component {
         this.submit = this.submit.bind(this);
 
         this.state = {
-            selectedPlaidBankAccount: undefined,
+            selectedPlaidAccountID: this.props.personalBankAccount.plaidAccountID,
         };
     }
 
@@ -60,7 +71,8 @@ class AddPersonalBankAccountPage extends React.Component {
 
     /**
      * @param {Object} values - form input values passed by the Form component
-     * @returns {Ojbect}
+     * @param {Object} values.password The password of the user adding the bank account, for security.
+     * @returns {Object}
      */
     validate(values) {
         const errors = {};
@@ -74,9 +86,14 @@ class AddPersonalBankAccountPage extends React.Component {
 
     /**
      * @param {Object} values - form input values passed by the Form component
+     * @param {Object} values.password The password of the user adding the bank account, for security.
      */
     submit(values) {
-        BankAccounts.addPersonalBankAccount(this.state.selectedPlaidBankAccount, values.password);
+        const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
+            plaidAccountID: this.state.selectedPlaidAccountID,
+        });
+
+        BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount, values.password);
     }
 
     render() {
@@ -121,23 +138,22 @@ class AddPersonalBankAccountPage extends React.Component {
                 ) : (
                     <Form
                         formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
-                        isSubmitButtonVisible={!_.isUndefined(this.state.selectedPlaidBankAccount)}
+                        isSubmitButtonVisible={Boolean(this.state.selectedPlaidAccountID)}
                         submitButtonText={this.props.translate('common.saveAndContinue')}
                         onSubmit={this.submit}
                         validate={this.validate}
                         style={[styles.mh5, styles.flex1]}
                     >
                         <>
                             <AddPlaidBankAccount
-                                onSelect={(params) => {
-                                    this.setState({
-                                        selectedPlaidBankAccount: params.selectedPlaidBankAccount,
-                                    });
+                                onSelect={(selectedPlaidAccountID) => {
+                                    this.setState({selectedPlaidAccountID});
                                 }}
                                 onExitPlaid={Navigation.goBack}
                                 receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                                selectedPlaidAccountID={this.state.selectedPlaidAccountID}
                             />
-                            {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
+                            {Boolean(this.state.selectedPlaidAccountID) && (
                             <TextInput
                                 inputID="password"
                                 label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
@@ -165,5 +181,8 @@ export default compose(
         personalBankAccount: {
             key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
         },
+        plaidData: {
+            key: ONYXKEYS.PLAID_DATA,
+        },
     }),
 )(AddPersonalBankAccountPage);
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -37,27 +38,28 @@ class BankAccountPlaidStep extends React.Component {
     }
 
     submit() {
-        const selectedPlaidBankAccount = this.props.plaidData.selectedPlaidBankAccount;
-        if (!selectedPlaidBankAccount) {
-            return;
-        }
+        const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
+            plaidAccountID: ReimbursementAccountUtils.getDefaultStateForField(this.props, 'plaidAccountID'),
+        });
 
-        ReimbursementAccount.updateReimbursementAccountDraft({
+        const bankAccountData = {
             routingNumber: selectedPlaidBankAccount.routingNumber,
             accountNumber: selectedPlaidBankAccount.accountNumber,
             plaidMask: selectedPlaidBankAccount.mask,
             isSavings: selectedPlaidBankAccount.isSavings,
-            bankName: selectedPlaidBankAccount.bankName,
+            bankName: this.props.plaidData.bankName,
             plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
-            plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
-        });
+            plaidAccessToken: this.props.plaidData.plaidAccessToken,
+        };
+        ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);
 
         const bankAccountID = ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID', 0);
-        BankAccounts.connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount);
+        BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData);
     }
 
     render() {
         const bankAccountID = ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID', 0);
+        const selectedPlaidAccountID = ReimbursementAccountUtils.getDefaultStateForField(this.props, 'plaidAccountID', '');
 
         return (
             <>
@@ -76,18 +78,19 @@ class BankAccountPlaidStep extends React.Component {
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
-                    isSubmitButtonVisible={!_.isUndefined(this.props.plaidData.selectedPlaidBankAccount)}
+                    isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}
                 >
                     <AddPlaidBankAccount
                         text={this.props.translate('bankAccount.plaidBodyCopy')}
-                        onSelect={(params) => {
-                            BankAccounts.updatePlaidData({selectedPlaidBankAccount: params.selectedPlaidBankAccount});
+                        onSelect={(plaidAccountID) => {
+                            ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID});
                         }}
                         onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
                         receivedRedirectURI={this.props.receivedRedirectURI}
                         plaidLinkOAuthToken={this.props.plaidLinkOAuthToken}
                         allowDebit
                         bankAccountID={bankAccountID}
+                        selectedPlaidAccountID={selectedPlaidAccountID}
                     />
                 </Form>
             </>

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -25,8 +25,12 @@ import getPlaidDesktopMessage from '../../libs/getPlaidDesktopMessage';
 import CONFIG from '../../CONFIG';
 import ROUTES from '../../ROUTES';
 import Button from '../../components/Button';
+import plaidDataPropTypes from './plaidDataPropTypes';
 
 const propTypes = {
+    /** Contains plaid data */
+    plaidData: plaidDataPropTypes,
+
     /** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */
     receivedRedirectURI: PropTypes.string,
 
@@ -45,6 +49,9 @@ const propTypes = {
 const defaultProps = {
     receivedRedirectURI: null,
     plaidLinkOAuthToken: '',
+    plaidData: {
+        isPlaidDisabled: false,
+    },
     user: {},
 };
 
@@ -105,7 +112,7 @@ const BankAccountStep = (props) => {
                         BankAccounts.clearPlaid();
                         BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
                     }}
-                    disabled={props.isPlaidDisabled || !props.user.validated}
+                    disabled={props.plaidData.isPlaidDisabled || !props.user.validated}
                     style={[styles.mt5, styles.buttonCTA]}
                     iconStyles={[styles.buttonCTAIcon]}
                     shouldShowRightIcon
@@ -168,5 +175,8 @@ export default compose(
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
+        plaidData: {
+            key: ONYXKEYS.PLAID_DATA,
+        },
     }),
 )(BankAccountStep);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -26,16 +26,12 @@ import RequestorStep from './RequestorStep';
 import ValidationStep from './ValidationStep';
 import ACHContractStep from './ACHContractStep';
 import EnableStep from './EnableStep';
-import plaidDataPropTypes from './plaidDataPropTypes';
 import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
 
 const propTypes = {
-    /** Contains plaid data */
-    plaidData: plaidDataPropTypes,
-
     /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: PropTypes.string,
 
@@ -68,9 +64,6 @@ const defaultProps = {
         isLoading: true,
     },
     plaidLinkToken: '',
-    plaidData: {
-        isPlaidDisabled: false,
-    },
     route: {
         params: {
             stepToOpen: '',
@@ -220,7 +213,6 @@ class ReimbursementAccountPage extends React.Component {
             <ScreenWrapper>
                 {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
                     <BankAccountStep
-                        isPlaidDisabled={this.props.plaidData.isPlaidDisabled}
                         receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                         plaidLinkOAuthToken={this.props.plaidLinkToken}
                     />
@@ -258,9 +250,6 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
-        plaidData: {
-            key: ONYXKEYS.PLAID_DATA,
-        },
         plaidLinkToken: {
             key: ONYXKEYS.PLAID_LINK_TOKEN,
         },

diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -33,7 +33,7 @@ const WorkspaceResetBankAccountModal = (props) => {
     const isInOpenState = lodashGet(props.reimbursementAccount, 'achData.state') === BankAccount.STATE.OPEN;
     const bankAccountID = lodashGet(props.reimbursementAccount, 'achData.bankAccountID');
     const account = _.find(props.bankAccountList, bankAccount => bankAccount.bankAccountID === bankAccountID);
-    const bankShortName = account ? `${account.addressName} ${account.accountNumber.slice(-4)}` : '';
+    const bankShortName = account ? `${lodashGet(account, 'addressName', '')} ${lodashGet(account, 'accountNumber', '').slice(-4)}` : '';
     return (
         <ConfirmModal
             title={props.translate('workspace.bankAccount.areYouSure')}