From d4f3345d2578bb44d95c5e6f18dd5b7a0fcce315 Mon Sep 17 00:00:00 2001 From: Maria D'Costa Date: Sun, 22 Oct 2023 22:43:54 +0400 Subject: [PATCH] Merge pull request #30103 from allroundexperts/fix-30088 feat: Improve KYC error handling (cherry picked from commit e780e70c7b0f0bdedf84a6360eb67235d0b78b25) --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/libs/actions/Wallet.js | 14 +++-- .../EnablePayments/EnablePaymentsPage.js | 14 ++--- src/pages/EnablePayments/TermsStep.js | 1 + .../EnablePayments/userWalletPropTypes.js | 4 +- .../EnablePayments/walletTermsPropTypes.js | 3 ++ .../settings/Wallet/WalletPage/WalletPage.js | 54 ++++++++++++++----- src/types/onyx/UserWallet.ts | 4 +- 9 files changed, 69 insertions(+), 27 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index bc6bba610475..b681b8f7467a 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -869,6 +869,7 @@ export default { assignedCards: 'Assigned cards', assignedCardsDescription: 'These are cards assigned by a Workspace admin to manage company spend.', expensifyCard: 'Expensify Card', + walletActivationPending: "We're reviewing your information and we'll be in touch shortly.", }, cardPage: { expensifyCard: 'Expensify Card', diff --git a/src/languages/es.ts b/src/languages/es.ts index df34eb0b1759..3fd1cd7ad3ed 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -865,6 +865,7 @@ export default { assignedCards: 'Tarjetas asignadas', assignedCardsDescription: 'Son tarjetas asignadas por un administrador del Espacio de Trabajo para gestionar los gastos de la empresa.', expensifyCard: 'Tarjeta Expensify', + walletActivationPending: 'Estamos revisando la información y nos pondremos en contacto contigo en breve.', }, cardPage: { expensifyCard: 'Tarjeta Expensify', diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js index 183920eccf21..9ef4b547d4b4 100644 --- a/src/libs/actions/Wallet.js +++ b/src/libs/actions/Wallet.js @@ -214,9 +214,9 @@ function acceptWalletTerms(parameters) { const optimisticData = [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.USER_WALLET, + key: ONYXKEYS.WALLET_TERMS, value: { - shouldShowWalletActivationSuccess: true, + isLoading: true, }, }, ]; @@ -227,6 +227,7 @@ function acceptWalletTerms(parameters) { key: ONYXKEYS.WALLET_TERMS, value: { errors: null, + isLoading: false, }, }, ]; @@ -236,10 +237,17 @@ function acceptWalletTerms(parameters) { onyxMethod: Onyx.METHOD.MERGE, key: ONYXKEYS.USER_WALLET, value: { - shouldShowWalletActivationSuccess: null, + isPendingOnfidoResult: null, shouldShowFailedKYC: true, }, }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.WALLET_TERMS, + value: { + isLoading: false, + }, + }, ]; API.write('AcceptWalletTerms', {hasAcceptedTerms: parameters.hasAcceptedTerms, reportID: parameters.chatReportID}, {optimisticData, successData, failureData}); diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js index 3f179e309a98..ab690752c0be 100644 --- a/src/pages/EnablePayments/EnablePaymentsPage.js +++ b/src/pages/EnablePayments/EnablePaymentsPage.js @@ -33,13 +33,19 @@ function EnablePaymentsPage({userWallet}) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const {isPendingOnfidoResult} = userWallet; + useEffect(() => { if (isOffline) { return; } - Wallet.openEnablePaymentsPage(); - }, [isOffline]); + if (!isPendingOnfidoResult) { + Wallet.openEnablePaymentsPage(); + } else { + Navigation.navigate(ROUTES.SETTINGS_WALLET, CONST.NAVIGATION.TYPE.UP); + } + }, [isOffline, isPendingOnfidoResult]); if (_.isEmpty(userWallet)) { return ; @@ -64,10 +70,6 @@ function EnablePaymentsPage({userWallet}) { ); } - if (userWallet.shouldShowWalletActivationSuccess) { - return ; - } - const currentStep = userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS; switch (currentStep) { diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 39f4826ec0b2..c11d8c39bda6 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -108,6 +108,7 @@ function TermsStep(props) { }} message={errorMessage} isAlertVisible={error || Boolean(errorMessage)} + isLoading={!!props.walletTerms.isLoading} containerStyles={[styles.mh0, styles.mv4]} /> diff --git a/src/pages/EnablePayments/userWalletPropTypes.js b/src/pages/EnablePayments/userWalletPropTypes.js index e6b4206be751..ef40c5a13b81 100644 --- a/src/pages/EnablePayments/userWalletPropTypes.js +++ b/src/pages/EnablePayments/userWalletPropTypes.js @@ -20,8 +20,8 @@ export default PropTypes.shape({ /** Status of wallet - e.g. SILVER or GOLD */ tierName: PropTypes.string, - /** Whether we should show the ActivateStep success view after the user finished the KYC flow */ - shouldShowWalletActivationSuccess: PropTypes.bool, + /** Whether the kyc is pending and is yet to be confirmed */ + isPendingOnfidoResult: PropTypes.bool, /** The wallet's programID, used to show the correct terms. */ walletProgramID: PropTypes.string, diff --git a/src/pages/EnablePayments/walletTermsPropTypes.js b/src/pages/EnablePayments/walletTermsPropTypes.js index 4dadd9946149..44d153f3b6ff 100644 --- a/src/pages/EnablePayments/walletTermsPropTypes.js +++ b/src/pages/EnablePayments/walletTermsPropTypes.js @@ -12,4 +12,7 @@ export default PropTypes.shape({ /** When the user accepts the Wallet's terms in order to pay an IOU, this is the ID of the chatReport the IOU is linked to */ chatReportID: PropTypes.string, + + /** Boolean to indicate whether the submission of wallet terms is being processed */ + isLoading: PropTypes.bool, }); diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 37bb49952984..dac8319965b8 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useState, useRef} from 'react'; import {ActivityIndicator, View, InteractionManager, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import PaymentMethodList from '../PaymentMethodList'; import ROUTES from '../../../../ROUTES'; import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; @@ -12,6 +13,8 @@ import compose from '../../../../libs/compose'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; import Popover from '../../../../components/Popover'; import MenuItem from '../../../../components/MenuItem'; +import Text from '../../../../components/Text'; +import Icon from '../../../../components/Icon'; import * as PaymentMethods from '../../../../libs/actions/PaymentMethods'; import getClickedTargetLocation from '../../../../libs/getClickedTargetLocation'; import CurrentWalletBalance from '../../../../components/CurrentWalletBalance'; @@ -66,6 +69,8 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen const hasAssignedCard = !_.isEmpty(cardList); const shouldShowEmptyState = !hasBankAccount && !hasWallet && !hasAssignedCard; + const isPendingOnfidoResult = lodashGet(userWallet, 'isPendingOnfidoResult', false); + const updateShouldShowLoadingSpinner = useCallback(() => { // In order to prevent a loop, only update state of the spinner if there is a change const showLoadingSpinner = isLoadingPaymentMethods || false; @@ -357,6 +362,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen )} + navigateToWalletOrTransferBalancePage(source)} onSelectPaymentMethod={(selectedPaymentMethod) => { @@ -373,18 +379,38 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen source={hasActivatedWallet ? CONST.KYC_WALL_SOURCE.TRANSFER_BALANCE : CONST.KYC_WALL_SOURCE.ENABLE_WALLET} shouldIncludeDebitCard={hasActivatedWallet} > - {(triggerKYCFlow, buttonRef) => - hasActivatedWallet ? ( - - ) : ( + {(triggerKYCFlow, buttonRef) => { + if (shouldShowLoadingSpinner) { + return null; + } + + if (hasActivatedWallet) { + return ( + + ); + } + + if (isPendingOnfidoResult) { + return ( + + + {translate('walletPage.walletActivationPending')} + + ); + } + + return (