diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 3cf06ae5d651..4b2c4e484483 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -60,24 +60,24 @@ const FormAlertWrapper = props => ( {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} - {!_.isEmpty(props.message) && !props.isMessageHtml - ? {props.message} - : ( - <> - - {`${props.translate('common.please')} `} - - - {props.translate('common.fixTheErrors')} - - - {` ${props.translate('common.inTheFormBeforeContinuing')}.`} - - - )} + {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} + + {_.isEmpty(props.message) && ( + <> + + {`${props.translate('common.please')} `} + + + {props.translate('common.fixTheErrors')} + + + {` ${props.translate('common.inTheFormBeforeContinuing')}.`} + + + )} )} diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 26966eb7f730..333d0e6b22d8 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -29,6 +29,7 @@ export { fetchOnfidoToken, activateWallet, fetchUserWallet, + verifyIdentity, } from './Wallet'; function clearPersonalBankAccount() { diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js index 616cd93be820..529f95fa90bf 100644 --- a/src/libs/actions/Wallet.js +++ b/src/libs/actions/Wallet.js @@ -189,7 +189,8 @@ function updatePersonalDetails(personalDetails) { key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS, value: { isLoading: true, - errors: [], + errors: null, + errorFields: null, }, }, ], @@ -377,6 +378,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 an additional + * API request to fetch the userWallet after we call VerifyIdentity + * + * @param {Object} parameters + * @param {String} [parameters.onfidoData] - JSON string + */ +function verifyIdentity(parameters) { + const onfidoData = parameters.onfidoData; + + API.write('VerifyIdentity', { + onfidoData, + }, { + optimisticData: [ + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.WALLET_ONFIDO, + value: { + loading: true, + errors: null, + fixableErrors: null, + }, + }, + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.USER_WALLET, + value: { + shouldShowFailedKYC: false, + }, + }, + ], + successData: [ + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.WALLET_ONFIDO, + value: { + loading: false, + errors: null, + }, + }, + ], + failureData: [ + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.WALLET_ONFIDO, + value: { + loading: false, + hasAcceptedPrivacyPolicy: false, + }, + }, + ], + }); +} + /** * Fetches information about a user's Expensify Wallet * @@ -423,4 +480,5 @@ export { buildIdologyError, updateCurrentStep, updatePersonalDetails, + verifyIdentity, }; diff --git a/src/pages/EnablePayments/OnfidoPrivacy.js b/src/pages/EnablePayments/OnfidoPrivacy.js index c65b82ae1fa1..31fc8604a08c 100644 --- a/src/pages/EnablePayments/OnfidoPrivacy.js +++ b/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) ? `\n${onfidoFixableErrors.join('\n')}` : ''; return ( - + {!this.props.walletOnfidoData.hasAcceptedPrivacyPolicy ? ( this.form = el}> - + {this.props.translate('onfidoStep.acceptTerms')} { - BankAccounts.activateWallet(CONST.WALLET.STEP.ONFIDO, { + BankAccounts.verifyIdentity({ onfidoData: JSON.stringify({ ...data, applicantID: this.props.walletOnfidoData.applicantID, diff --git a/src/pages/EnablePayments/walletOnfidoDataPropTypes.js b/src/pages/EnablePayments/walletOnfidoDataPropTypes.js index f2dcf3d4edf1..22781abfaac2 100644 --- a/src/pages/EnablePayments/walletOnfidoDataPropTypes.js +++ b/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, });