Refactor part of Wallet_Activate into VerifyIdentity

src/components/FormAlertWrapper.js

@@ -59,24 +59,24 @@ const FormAlertWrapper = props => (
                 <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
                     {!_.isEmpty(props.message) && props.isMessageHtml && <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />}
 
-                    {!_.isEmpty(props.message) && !props.isMessageHtml
-                        ? <Text style={styles.mutedTextLabel}>{props.message}</Text>
-                        : (
-                            <>
-                                <Text style={styles.mutedTextLabel}>
-                                    {`${props.translate('common.please')} `}
-                                </Text>
-                                <TextLink
-                                    style={styles.label}
-                                    onPress={props.onFixTheErrorsPressed}
-                                >
-                                    {props.translate('common.fixTheErrors')}
-                                </TextLink>
-                                <Text style={styles.mutedTextLabel}>
-                                    {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                                </Text>
-                            </>
-                        )}
+                    {!_.isEmpty(props.message) && !props.isMessageHtml && <Text style={styles.mutedTextLabel}>{props.message}</Text>}
+
+                    {_.isEmpty(props.message) && (
+                        <>
+                            <Text style={styles.mutedTextLabel}>
+                                {`${props.translate('common.please')} `}
+                            </Text>
+                            <TextLink
+                                style={styles.label}
+                                onPress={props.onFixTheErrorsPressed}
+                            >
+                                {props.translate('common.fixTheErrors')}
+                            </TextLink>
+                            <Text style={styles.mutedTextLabel}>
+                                {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
+                            </Text>
+                        </>
+                    )}
                 </View>
             </View>
         )}

src/libs/actions/BankAccounts.js

@@ -34,6 +34,7 @@ export {
     fetchOnfidoToken,
     activateWallet,
     fetchUserWallet,
+    verifyIdentity,
 } from './Wallet';
 
 function clearPersonalBankAccount() {

src/libs/actions/Wallet.js

@@ -7,6 +7,7 @@ import * as DeprecatedAPI from '../deprecatedAPI';
 import CONST from '../../CONST';
 import * as PaymentMethods from './PaymentMethods';
 import * as Localize from '../Localize';
+import * as API from '../API';
 
 /**
  * Fetch and save locally the Onfido SDK token and applicantID
@@ -316,6 +317,62 @@ function activateWallet(currentStep, parameters) {
         });
 }
 
+/**
+ * Creates an identity check by calling Onfido's API with data returned from the SDK
+ *
+ * The API will always return the updated userWallet in the response as a convenience so we can avoid calling
+ * Get&returnValueList=userWallet after we call Wallet_Activate.
+ *
+ * @param {Object} parameters
+ * @param {String} [parameters.onfidoData] - JSON string
+ */
+function verifyIdentity(parameters) {
+    const onfidoData = parameters.onfidoData;
+
+    API.write('VerifyIdentity', {
+        onfidoData,
+    }, {
+        optimisticData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_ONFIDO,
+                value: {
+                    loading: true,
+                    errors: {},
+                    fixableErrors: [],
+                },
+            },
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.USER_WALLET,
+                value: {
+                    shouldShowFailedKYC: false,
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_ONFIDO,
+                value: {
+                    loading: false,
+                    errors: {},
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_ONFIDO,
+                value: {
+                    loading: false,
+                    hasAcceptedPrivacyPolicy: false,
+                },
+            },
+        ],
+    });
+}
+
 /**
  * Fetches information about a user's Expensify Wallet
  *
@@ -361,4 +418,5 @@ export {
     setAdditionalDetailsQuestions,
     buildIdologyError,
     updateCurrentStep,
+    verifyIdentity,
 };

src/pages/EnablePayments/OnfidoPrivacy.js

@@ -15,7 +15,6 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto
 import FormScrollView from '../../components/FormScrollView';
 import walletAdditionalDetailsDraftPropTypes from './walletAdditionalDetailsDraftPropTypes';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
-import * as Localize from '../../libs/Localize';
 
 const propTypes = {
     /** Stores various information used to build the UI and call any APIs */
@@ -32,7 +31,8 @@ const defaultProps = {
         applicantID: '',
         sdkToken: '',
         loading: false,
-        error: '',
+        errors: {},
+        fixableErrors: [],
         hasAcceptedPrivacyPolicy: false,
     },
 };
@@ -53,28 +53,16 @@ class OnfidoPrivacy extends React.Component {
     }
 
     render() {
-        let onfidoError = lodashGet(this.props, 'walletOnfidoData.error') || '';
-        if (!onfidoError) {
-            const onfidoFixableErrors = lodashGet(this.props, 'userWallet.onfidoFixableErrors', []);
-            if (!_.isEmpty(onfidoFixableErrors)) {
-                const supportedErrorKeys = ['originalDocumentNeeded', 'documentNeedsBetterQuality', 'imageNeedsBetterQuality', 'selfieIssue', 'selfieNotMatching', 'selfieNotLive'];
-                const translatedFixableErrors = _.filter(_.map(onfidoFixableErrors, (errorKey) => {
-                    if (_.contains(supportedErrorKeys, errorKey)) {
-                        return Localize.translateLocal(`onfidoStep.${errorKey}`);
-                    }
-                    return null;
-                }));
-                if (!_.isEmpty(translatedFixableErrors)) {
-                    onfidoError = translatedFixableErrors.join(' ');
-                }
-            }
-        }
+        const errors = lodashGet(this.props, 'walletOnfidoData.errors', {});
+        let onfidoError = _.isEmpty(errors) ? '' : _.last(_.values(errors));
+        const onfidoFixableErrors = lodashGet(this.props, 'walletOnfidoData.fixableErrors', []);
+        onfidoError += !_.isEmpty(onfidoFixableErrors) ? `<br/> ${onfidoFixableErrors.join('<br>')}` : '';
 
         return (
-            <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentBetween]}>
+            <View style={[styles.mb5, styles.flex1, styles.justifyContentBetween]}>
                 {!this.props.walletOnfidoData.hasAcceptedPrivacyPolicy ? (
                     <FormScrollView ref={el => this.form = el}>
-                        <View style={styles.justifyContentCenter}>
+                        <View style={[styles.mh5, styles.justifyContentCenter]}>
                             <Text style={[styles.mb5]}>
                                 {this.props.translate('onfidoStep.acceptTerms')}
                                 <TextLink
@@ -104,6 +92,7 @@ class OnfidoPrivacy extends React.Component {
                                 this.form.scrollTo({y: 0, animated: true});
                             }}
                             message={onfidoError}
+                            isMessageHtml
                             isLoading={this.props.walletOnfidoData.loading}
                             buttonText={onfidoError ? this.props.translate('onfidoStep.tryAgain') : this.props.translate('common.continue')}
                         />

src/pages/EnablePayments/OnfidoStep.js

@@ -74,7 +74,7 @@ class OnfidoStep extends React.Component {
                                 Navigation.goBack();
                             }}
                             onSuccess={(data) => {
-                                BankAccounts.activateWallet(CONST.WALLET.STEP.ONFIDO, {
+                                BankAccounts.verifyIdentity({
                                     onfidoData: JSON.stringify({
                                         ...data,
                                         applicantID: this.props.walletOnfidoData.applicantID,

src/pages/EnablePayments/walletOnfidoDataPropTypes.js

@@ -13,6 +13,9 @@ export default PropTypes.shape({
     /** Error message to inform the user of any problem that might occur */
     error: PropTypes.string,
 
+    /** A list of Onfido errors that the user can fix in order to attempt the Onfido flow again */
+    fixableErrors: PropTypes.arrayOf(PropTypes.string),
+
     /** Whether the user has accepted the privacy policy of Onfido or not */
     hasAcceptedPrivacyPolicy: PropTypes.bool,
 });