From e4e302038d0f494e1cf052026adfc56d39dc324e Mon Sep 17 00:00:00 2001 From: Marcin Swornowski <32240132+Swor71@users.noreply.github.com> Date: Wed, 17 Jan 2024 10:35:57 +0100 Subject: [PATCH] chore: moved OnfidoInitialize into VerifyIdentity (#1) --- src/hooks/useSubStep/index.ts | 37 ++++++----- src/hooks/useSubStep/types.ts | 3 +- .../VerifyIdentity/VerifyIdentity.tsx | 53 ++++++++++------ .../substeps/OnfidoInitialize.tsx | 61 ------------------- 4 files changed, 54 insertions(+), 100 deletions(-) delete mode 100644 src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index ee96b56eabb9..d0dd1a84ba32 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -15,26 +15,23 @@ export default function useSubStep({bodyContent, on setScreenIndex(prevScreenIndex); }, [screenIndex]); - const nextScreen = useCallback( - (data?: Record) => { - if (isEditing.current) { - isEditing.current = false; - - setScreenIndex(bodyContent.length - 1); - - return; - } - - const nextScreenIndex = screenIndex + 1; - - if (nextScreenIndex === bodyContent.length) { - onFinished(data); - } else { - setScreenIndex(nextScreenIndex); - } - }, - [screenIndex, bodyContent.length, onFinished], - ); + const nextScreen = useCallback(() => { + if (isEditing.current) { + isEditing.current = false; + + setScreenIndex(bodyContent.length - 1); + + return; + } + + const nextScreenIndex = screenIndex + 1; + + if (nextScreenIndex === bodyContent.length) { + onFinished(); + } else { + setScreenIndex(nextScreenIndex); + } + }, [screenIndex, bodyContent.length, onFinished]); const moveTo = useCallback((step: number) => { isEditing.current = true; diff --git a/src/hooks/useSubStep/types.ts b/src/hooks/useSubStep/types.ts index 9bf2c753de33..edcf70482089 100644 --- a/src/hooks/useSubStep/types.ts +++ b/src/hooks/useSubStep/types.ts @@ -1,5 +1,4 @@ import type {ComponentType} from 'react'; -import type {OnfidoData} from '@src/types/onyx/ReimbursementAccountDraft'; type SubStepProps = { /** value indicating whether user is editing one of the sub steps */ @@ -23,7 +22,7 @@ type UseSubStep = { bodyContent: Array>; /** called on last sub step */ - onFinished: (data?: OnfidoData) => void; + onFinished: () => void; /** index of initial sub step to display */ startFrom?: number; diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx index 40e49ceb281e..85887c7cc06c 100644 --- a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx +++ b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx @@ -1,20 +1,21 @@ import React, {useCallback} from 'react'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; +// @ts-expect-error TODO: Remove this once Onfido (https://github.com/Expensify/App/issues/25136) is migrated to TypeScript. +import Onfido from '@components/Onfido'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; -import useSubStep from '@hooks/useSubStep'; -import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; +import Growl from '@libs/Growl'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccount} from '@src/types/onyx'; import type {OnfidoData} from '@src/types/onyx/ReimbursementAccountDraft'; -import OnfidoInitialize from './substeps/OnfidoInitialize'; type VerifyIdentityOnyxProps = { /** Reimbursement account from ONYX */ @@ -22,6 +23,9 @@ type VerifyIdentityOnyxProps = { /** Onfido applicant ID from ONYX */ onfidoApplicantID: OnyxEntry; + + /** The token required to initialize the Onfido SDK */ + onfidoToken: OnyxEntry; }; type VerifyIdentityProps = VerifyIdentityOnyxProps & { @@ -32,24 +36,31 @@ type VerifyIdentityProps = VerifyIdentityOnyxProps & { onCloseButtonPress: () => void; }; -const bodyContent: Array> = [OnfidoInitialize]; +const ONFIDO_ERROR_DISPLAY_DURATION = 10000; -function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress, onfidoApplicantID}: VerifyIdentityProps) { +function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress, onfidoApplicantID, onfidoToken}: VerifyIdentityProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const submit = useCallback( - (onfidoData?: OnfidoData) => { - if (!onfidoData) { - return; - } + const handleOnfidoSuccess = useCallback( + (onfidoData: OnfidoData) => { BankAccounts.verifyIdentityForBankAccount(Number(reimbursementAccount?.achData?.bankAccountID ?? '0'), {...onfidoData, applicantID: onfidoApplicantID}); BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true}); }, [reimbursementAccount, onfidoApplicantID], ); - const {componentToRender: SubStep, isEditing, moveTo, nextScreen} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + const handleOnfidoError = () => { + // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again. + Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION); + BankAccounts.clearOnfidoToken(); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); + }; + + const handleOnfidoUserExit = () => { + BankAccounts.clearOnfidoToken(); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); + }; return ( @@ -66,11 +77,16 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonP stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} /> - + + + + + ); } @@ -84,4 +100,7 @@ export default withOnyx({ onfidoApplicantID: { key: ONYXKEYS.ONFIDO_APPLICANT_ID, }, + onfidoToken: { + key: ONYXKEYS.ONFIDO_TOKEN, + }, })(VerifyIdentity); diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx b/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx deleted file mode 100644 index 75e38086e3ad..000000000000 --- a/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import {ScrollView} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; -import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; -// @ts-expect-error TODO: Remove this once Onfido (https://github.com/Expensify/App/issues/25136) is migrated to TypeScript. -import Onfido from '@components/Onfido'; -import useLocalize from '@hooks/useLocalize'; -import type {SubStepProps} from '@hooks/useSubStep/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import Growl from '@libs/Growl'; -import * as BankAccounts from '@userActions/BankAccounts'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; - -type OnfidoInitializeOnyxProps = { - /** The token required to initialize the Onfido SDK */ - onfidoToken: OnyxEntry; -}; - -type OnfidoInitializeProps = SubStepProps & OnfidoInitializeOnyxProps; - -const ONFIDO_ERROR_DISPLAY_DURATION = 10000; - -function OnfidoInitialize({onfidoToken, onNext}: OnfidoInitializeProps) { - const styles = useThemeStyles(); - const {translate} = useLocalize(); - - const handleOnfidoError = () => { - // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again. - Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION); - BankAccounts.clearOnfidoToken(); - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); - }; - - const handleOnfidoUserExit = () => { - BankAccounts.clearOnfidoToken(); - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); - }; - - return ( - - - - - - ); -} - -OnfidoInitialize.displayName = 'OnfidoInitialize'; - -export default withOnyx({ - onfidoToken: { - key: ONYXKEYS.ONFIDO_TOKEN, - }, -})(OnfidoInitialize);