Merge pull request #14988 from Expensify/maria-fix-wallet-onfido-flow

[Wallet KYC] Fix Onfido and KBA flows
Expensify · Feb 16, 2023 · 7d7fc3d · 7d7fc3d
2 parents 9053571 + c18e8dd
commit 7d7fc3d
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 71 deletions.
diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js
@@ -8,12 +8,9 @@ import * as API from '../API';
  * - The sdkToken is used to initialize the Onfido SDK client
  * - The applicantID is combined with the data returned from the Onfido SDK as we need both to create an
  *   identity check. Note: This happens in Web-Secure when we call Activate_Wallet during the OnfidoStep.
- * @param {String} firstName
- * @param {String} lastName
- * @param {String} dob
  */
-function openOnfidoFlow(firstName, lastName, dob) {
-    API.read('OpenOnfidoFlow', {firstName, lastName, dob}, {
+function openOnfidoFlow() {
+    API.read('OpenOnfidoFlow', {}, {
         optimisticData: [
             {
                 // Use Onyx.set() since we are resetting the Onfido flow completely.

diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -75,12 +75,12 @@ class EnablePaymentsPage extends React.Component {
                     }
 
                     const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS;
+
                     return (
                         <>
                             {(currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS || currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS_KBA)
                                 && <AdditionalDetailsStep />}
-                            {currentStep === CONST.WALLET.STEP.ONFIDO && this.props.walletAdditionalDetailsDraft
-                            && <OnfidoStep walletAdditionalDetailsDraft={this.props.walletAdditionalDetailsDraft} />}
+                            {currentStep === CONST.WALLET.STEP.ONFIDO && <OnfidoStep />}
                             {currentStep === CONST.WALLET.STEP.TERMS && <TermsStep />}
                             {currentStep === CONST.WALLET.STEP.ACTIVATE && <ActivateStep userWallet={this.props.userWallet} />}
                         </>

diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js
@@ -17,6 +17,7 @@ import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import OfflineIndicator from '../../components/OfflineIndicator';
 import * as ErrorUtils from '../../libs/ErrorUtils';
+import FixedFooter from '../../components/FixedFooter';
 
 const MAX_SKIP = 1;
 const SKIP_QUESTION_TEXT = 'Skip Question';
@@ -164,7 +165,8 @@ class IdologyQuestions extends React.Component {
                             onPress={answer => this.chooseAnswer(questionIndex, answer)}
                         />
                     </View>
-
+                </FormScrollView>
+                <FixedFooter>
                     <FormAlertWithSubmitButton
                         isAlertVisible={Boolean(errorMessage)}
                         onSubmit={this.submitAnswers}
@@ -174,9 +176,10 @@ class IdologyQuestions extends React.Component {
                         message={errorMessage}
                         isLoading={this.props.walletAdditionalDetails.isLoading}
                         buttonText={this.props.translate('common.saveAndContinue')}
+                        containerStyles={[styles.mh0, styles.mv0, styles.mb0]}
                     />
                     <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
-                </FormScrollView>
+                </FixedFooter>
             </View>
         );
     }

diff --git a/src/pages/EnablePayments/OnfidoPrivacy.js b/src/pages/EnablePayments/OnfidoPrivacy.js
@@ -13,17 +13,14 @@ import compose from '../../libs/compose';
 import Text from '../../components/Text';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
 import FormScrollView from '../../components/FormScrollView';
-import walletAdditionalDetailsDraftPropTypes from './walletAdditionalDetailsDraftPropTypes';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
 import * as ErrorUtils from '../../libs/ErrorUtils';
+import FixedFooter from '../../components/FixedFooter';
 
 const propTypes = {
     /** Stores various information used to build the UI and call any APIs */
     walletOnfidoData: walletOnfidoDataPropTypes,
 
-    /** Stores the personal details typed by the user */
-    walletAdditionalDetailsDraft: walletAdditionalDetailsDraftPropTypes.isRequired,
-
     ...withLocalizePropTypes,
 };
 
@@ -46,11 +43,7 @@ class OnfidoPrivacy extends React.Component {
     }
 
     openOnfidoFlow() {
-        BankAccounts.openOnfidoFlow(
-            this.props.walletAdditionalDetailsDraft.legalFirstName,
-            this.props.walletAdditionalDetailsDraft.legalLastName,
-            this.props.walletAdditionalDetailsDraft.dob,
-        );
+        BankAccounts.openOnfidoFlow();
     }
 
     render() {
@@ -59,43 +52,48 @@ class OnfidoPrivacy extends React.Component {
         onfidoError += !_.isEmpty(onfidoFixableErrors) ? `\n${onfidoFixableErrors.join('\n')}` : '';
 
         return (
-            <View style={[styles.mb5, styles.flex1, styles.justifyContentBetween]}>
+            <View style={[styles.flex1, styles.justifyContentBetween]}>
                 {!this.props.walletOnfidoData.hasAcceptedPrivacyPolicy ? (
-                    <FormScrollView ref={el => this.form = el}>
-                        <View style={[styles.mh5, styles.justifyContentCenter]}>
-                            <Text style={[styles.mb5]}>
-                                {this.props.translate('onfidoStep.acceptTerms')}
-                                <TextLink
-                                    href="https://onfido.com/facial-scan-policy-and-release/"
-                                >
-                                    {this.props.translate('onfidoStep.facialScan')}
-                                </TextLink>
-                                {', '}
-                                <TextLink
-                                    href="https://onfido.com/privacy/"
-                                >
-                                    {this.props.translate('common.privacy')}
-                                </TextLink>
-                                {` ${this.props.translate('common.and')} `}
-                                <TextLink
-                                    href="https://onfido.com/terms-of-service/"
-                                >
-                                    {this.props.translate('common.termsOfService')}
-                                </TextLink>
-                                .
-                            </Text>
-                        </View>
-                        <FormAlertWithSubmitButton
-                            isAlertVisible={Boolean(onfidoError)}
-                            onSubmit={this.openOnfidoFlow}
-                            onFixTheErrorsLinkPressed={() => {
-                                this.form.scrollTo({y: 0, animated: true});
-                            }}
-                            message={onfidoError}
-                            isLoading={this.props.walletOnfidoData.isLoading}
-                            buttonText={onfidoError ? this.props.translate('onfidoStep.tryAgain') : this.props.translate('common.continue')}
-                        />
-                    </FormScrollView>
+                    <>
+                        <FormScrollView ref={el => this.form = el}>
+                            <View style={[styles.mh5, styles.justifyContentCenter]}>
+                                <Text style={[styles.mb5]}>
+                                    {this.props.translate('onfidoStep.acceptTerms')}
+                                    <TextLink
+                                        href="https://onfido.com/facial-scan-policy-and-release/"
+                                    >
+                                        {this.props.translate('onfidoStep.facialScan')}
+                                    </TextLink>
+                                    {', '}
+                                    <TextLink
+                                        href="https://onfido.com/privacy/"
+                                    >
+                                        {this.props.translate('common.privacy')}
+                                    </TextLink>
+                                    {` ${this.props.translate('common.and')} `}
+                                    <TextLink
+                                        href="https://onfido.com/terms-of-service/"
+                                    >
+                                        {this.props.translate('common.termsOfService')}
+                                    </TextLink>
+                                    .
+                                </Text>
+                            </View>
+                        </FormScrollView>
+                        <FixedFooter>
+                            <FormAlertWithSubmitButton
+                                isAlertVisible={Boolean(onfidoError)}
+                                onSubmit={this.openOnfidoFlow}
+                                onFixTheErrorsLinkPressed={() => {
+                                    this.form.scrollTo({y: 0, animated: true});
+                                }}
+                                message={onfidoError}
+                                isLoading={this.props.walletOnfidoData.isLoading}
+                                buttonText={onfidoError ? this.props.translate('onfidoStep.tryAgain') : this.props.translate('common.continue')}
+                                containerStyles={[styles.mh0, styles.mv0, styles.mb0]}
+                            />
+                        </FixedFooter>
+                    </>
                 ) : null}
                 {this.props.walletOnfidoData.hasAcceptedPrivacyPolicy && this.props.walletOnfidoData.isLoading ? <FullscreenLoadingIndicator /> : null}
             </View>

diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
 import Onfido from '../../components/Onfido';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -12,17 +11,13 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import Growl from '../../libs/Growl';
 import OnfidoPrivacy from './OnfidoPrivacy';
-import walletAdditionalDetailsDraftPropTypes from './walletAdditionalDetailsDraftPropTypes';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
 import FullPageOfflineBlockingView from '../../components/BlockingViews/FullPageOfflineBlockingView';
 
 const propTypes = {
     /** Stores various information used to build the UI and call any APIs */
     walletOnfidoData: walletOnfidoDataPropTypes,
 
-    /** Stores the personal details typed by the user */
-    walletAdditionalDetailsDraft: walletAdditionalDetailsDraftPropTypes.isRequired,
-
     ...withLocalizePropTypes,
 };
 
@@ -34,17 +29,6 @@ const defaultProps = {
 };
 
 class OnfidoStep extends React.Component {
-    componentDidMount() {
-        // Once in Onfido step, if we somehow don't have the personal info, go back to previous step, as we need them for Onfido{
-        const firstName = lodashGet(this.props, 'walletAdditionalDetailsDraft.legalFirstName');
-        const lastName = lodashGet(this.props, 'walletAdditionalDetailsDraft.legalLastName');
-        const dob = lodashGet(this.props, 'walletAdditionalDetailsDraft.dob');
-
-        if (!firstName || !lastName || !dob) {
-            Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS);
-        }
-    }
-
     /**
      * @returns {boolean|*}
      */
@@ -85,7 +69,7 @@ class OnfidoStep extends React.Component {
                                 }}
                             />
                         ) : (
-                            <OnfidoPrivacy walletOnfidoData={this.props.walletOnfidoData} walletAdditionalDetailsDraft={this.props.walletAdditionalDetailsDraft} />
+                            <OnfidoPrivacy walletOnfidoData={this.props.walletOnfidoData} />
                         )
                     }
                 </FullPageOfflineBlockingView>