🍒 Cherry pick PR #11702 to staging 🍒

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001021202
-        versionName "1.2.12-2"
+        versionCode 1001021203
+        versionName "1.2.12-3"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.12.2</string>
+	<string>1.2.12.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.12.2</string>
+	<string>1.2.12.3</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.12-2",
+  "version": "1.2.12-3",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/libs/actions/BankAccounts.js

@@ -291,19 +291,6 @@ 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,
@@ -313,7 +300,6 @@ export {
     clearOnfidoToken,
     updatePersonalInformationForBankAccount,
     validateBankAccount,
-    verifyIdentityForBankAccount,
     updateCompanyInformationForBankAccount,
     connectBankAccountWithPlaid,
     updatePlaidData,

src/pages/ReimbursementAccount/RequestorStep.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import lodashGet from 'lodash/get';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import moment from 'moment';
@@ -16,13 +16,14 @@ 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 */
@@ -41,7 +42,6 @@ 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,6 +53,7 @@ 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),
         };
 
@@ -73,13 +74,6 @@ 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.
      *
@@ -153,6 +147,20 @@ 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;
@@ -175,9 +183,26 @@ class RequestorStep extends React.Component {
                     onCloseButtonPress={Navigation.dismissModal}
                 />
                 {shouldShowOnfido ? (
-                    <RequestorOnfidoStep
-                        onComplete={this.setOnfidoAsComplete}
-                    />
+                    <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>
                 ) : (
                     <ReimbursementAccountForm
                         onSubmit={this.submit}