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); - }} - /> - + ) : (