diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 97193ee5ad5a..a9b6083c0adb 100644
--- 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
new file mode 100644
index 000000000000..82b17d641d35
--- /dev/null
+++ 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 (
+
+ {
+ // 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);
+ }}
+ />
+
+ );
+ }
+}
+
+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
index 6be190673464..bba0dba6b06d 100644
--- 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 ? (
-
- {
- // 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);
- }}
- />
-
+
) : (