Merge pull request Expensify#10967 from Expensify/maria-refactor-veri…

…fy-identity-for-bank-account [Refactor] Use new API Command: VerifyIdentityForBankAccount
autosave-app · Oct 4, 2022 · ae3e10b · ae3e10b
2 parents ab0a61a + 42d50b3
commit ae3e10b
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 38 deletions.
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
@@ -291,6 +291,19 @@ function connectBankAccountManually(bankAccountID, accountNumber, routingNumber,
     }, getVBBADataForOnyx());
 }
 
+/**
+ * Verify the user's identity via Onfido
+ *
+ * @param {Number} bankAccountID
+ * @param {Object} onfidoData
+ */
+function verifyIdentityForBankAccount(bankAccountID, onfidoData) {
+    API.write('VerifyIdentityForBankAccount', {
+        bankAccountID,
+        onfidoData: JSON.stringify(onfidoData),
+    }, getVBBADataForOnyx());
+}
+
 export {
     addPersonalBankAccount,
     connectBankAccountManually,
@@ -300,6 +313,7 @@ export {
     clearOnfidoToken,
     updatePersonalInformationForBankAccount,
     validateBankAccount,
+    verifyIdentityForBankAccount,
     updateCompanyInformationForBankAccount,
     connectBankAccountWithPlaid,
     updatePlaidData,

diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import {ScrollView} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import * as BankAccounts from '../../libs/actions/BankAccounts';
+import Onfido from '../../components/Onfido';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
+import Growl from '../../libs/Growl';
+import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** Bank account currently in setup */
+    /* eslint-disable-next-line react/no-unused-prop-types */
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
+    onfidoToken: PropTypes.string,
+    onComplete: PropTypes.func.isRequired,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    onfidoToken: '',
+};
+
+class RequestorOnfidoStep extends React.Component {
+    constructor(props) {
+        super(props);
+        this.submit = this.submit.bind(this);
+    }
+
+    submit(onfidoData) {
+        BankAccounts.verifyIdentityForBankAccount(
+            ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID', 0),
+            onfidoData,
+        );
+        this.props.onComplete();
+    }
+
+    render() {
+        return (
+            <ScrollView contentContainerStyle={styles.flex1}>
+                <Onfido
+                    sdkToken={this.props.onfidoToken}
+                    onUserExit={() => {
+                        // We're taking the user back to the company step. They will need to come back to the requestor step to make the Onfido flow appear again.
+                        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
+                    }}
+                    onError={() => {
+                        // In case of any unexpected error we log it to the server, show a growl, and return the user back to the company step so they can try again.
+                        Growl.error(this.props.translate('onfidoStep.genericError'), 10000);
+                        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
+                    }}
+                    onSuccess={(onfidoData) => {
+                        this.submit(onfidoData);
+                    }}
+                />
+            </ScrollView>
+        );
+    }
+}
+
+RequestorOnfidoStep.propTypes = propTypes;
+RequestorOnfidoStep.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+        onfidoToken: {
+            key: ONYXKEYS.ONFIDO_TOKEN,
+        },
+        reimbursementAccountDraft: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
+        },
+    }),
+)(RequestorOnfidoStep);
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import lodashGet from 'lodash/get';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import moment from 'moment';
@@ -16,14 +16,13 @@ import Text from '../../components/Text';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import IdentityForm from './IdentityForm';
 import * as ValidationUtils from '../../libs/ValidationUtils';
-import Onfido from '../../components/Onfido';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
-import Growl from '../../libs/Growl';
 import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 import ReimbursementAccountForm from './ReimbursementAccountForm';
 import * as Link from '../../libs/actions/Link';
+import RequestorOnfidoStep from './RequestorOnfidoStep';
 
 const propTypes = {
     /** Bank account currently in setup */
@@ -42,6 +41,7 @@ class RequestorStep extends React.Component {
 
         this.submit = this.submit.bind(this);
         this.clearErrorsAndSetValues = this.clearErrorsAndSetValues.bind(this);
+        this.setOnfidoAsComplete = this.setOnfidoAsComplete.bind(this);
 
         this.state = {
             firstName: ReimbursementAccountUtils.getDefaultStateForField(props, 'firstName'),
@@ -53,7 +53,6 @@ class RequestorStep extends React.Component {
             dob: ReimbursementAccountUtils.getDefaultStateForField(props, 'dob'),
             ssnLast4: ReimbursementAccountUtils.getDefaultStateForField(props, 'ssnLast4'),
             isControllingOfficer: ReimbursementAccountUtils.getDefaultStateForField(props, 'isControllingOfficer', false),
-            onfidoData: lodashGet(props, ['reimbursementAccount', 'achData', 'onfidoData'], ''),
             isOnfidoSetupComplete: lodashGet(props, ['achData', 'isOnfidoSetupComplete'], false),
         };
 
@@ -74,6 +73,13 @@ class RequestorStep extends React.Component {
         this.getErrors = () => ReimbursementAccountUtils.getErrors(this.props);
     }
 
+    /**
+     * Update state to indicate that the user has completed the Onfido verification process
+     */
+    setOnfidoAsComplete() {
+        this.setState({isOnfidoSetupComplete: true});
+    }
+
     /**
      * Clear the errors associated to keys in values if found and store the new values in the state.
      *
@@ -147,20 +153,6 @@ class RequestorStep extends React.Component {
         BankAccounts.updatePersonalInformationForBankAccount(payload);
     }
 
-    submitOnfidoVerification() {
-        if (!this.validate()) {
-            return;
-        }
-
-        const payload = {
-            bankAccountID: ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID', 0),
-            ...this.state,
-            dob: moment(this.state.dob).format(CONST.DATE.MOMENT_FORMAT_STRING),
-        };
-
-        BankAccounts.setupWithdrawalAccount(payload);
-    }
-
     render() {
         const achData = this.props.reimbursementAccount.achData;
         const shouldShowOnfido = achData.useOnfido && this.props.onfidoToken && !this.state.isOnfidoSetupComplete;
@@ -183,26 +175,9 @@ class RequestorStep extends React.Component {
                     onCloseButtonPress={Navigation.dismissModal}
                 />
                 {shouldShowOnfido ? (
-                    <ScrollView contentContainerStyle={styles.flex1}>
-                        <Onfido
-                            sdkToken={this.props.onfidoToken}
-                            onUserExit={() => {
-                            // We're taking the user back to the company step. They will need to come back to the requestor step to make the Onfido flow appear again.
-                                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
-                            }}
-                            onError={() => {
-                            // In case of any unexpected error we log it to the server, show a growl, and return the user back to the company step so they can try again.
-                                Growl.error(this.props.translate('onfidoStep.genericError'), 10000);
-                                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
-                            }}
-                            onSuccess={(onfidoData) => {
-                                this.setState({
-                                    onfidoData,
-                                    isOnfidoSetupComplete: true,
-                                }, this.submitOnfidoVerification);
-                            }}
-                        />
-                    </ScrollView>
+                    <RequestorOnfidoStep
+                        onComplete={this.setOnfidoAsComplete}
+                    />
                 ) : (
                     <ReimbursementAccountForm
                         onSubmit={this.submit}