chore: moved OnfidoInitialize into VerifyIdentity (#1)

src/hooks/useSubStep/index.ts

@@ -15,26 +15,23 @@ export default function useSubStep<TProps extends SubStepProps>({bodyContent, on
  setScreenIndex(prevScreenIndex);
  }, [screenIndex]);
 
- const nextScreen = useCallback(
- (data?: Record<string, unknown>) => {
- 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;

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<TProps extends SubStepProps> = {
  bodyContent: Array<ComponentType<SubStepProps & TProps>>;
 
  /** called on last sub step */
- onFinished: (data?: OnfidoData) => void;
+ onFinished: () => void;
 
  /** index of initial sub step to display */
  startFrom?: number;

src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx

@@ -1,27 +1,31 @@
 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 */
  reimbursementAccount: OnyxEntry<ReimbursementAccount>;
 
  /** Onfido applicant ID from ONYX */
  onfidoApplicantID: OnyxEntry<string>;
+
+ /** The token required to initialize the Onfido SDK */
+ onfidoToken: OnyxEntry<string>;
 };
 
 type VerifyIdentityProps = VerifyIdentityOnyxProps & {
@@ -32,24 +36,31 @@ type VerifyIdentityProps = VerifyIdentityOnyxProps & {
  onCloseButtonPress: () => void;
 };
 
-const bodyContent: Array<React.ComponentType<SubStepProps>> = [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 (
  <ScreenWrapper testID={VerifyIdentity.displayName}>
@@ -66,11 +77,16 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonP
  stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
  />
  </View>
- <SubStep
- isEditing={isEditing}
- onNext={nextScreen}
- onMove={moveTo}
- />
+ <FullPageOfflineBlockingView>
+ <ScrollView contentContainerStyle={styles.flex1}>
+ <Onfido
+ sdkToken={onfidoToken}
+ onUserExit={handleOnfidoUserExit}
+ onError={handleOnfidoError}
+ onSuccess={handleOnfidoSuccess}
+ />
+ </ScrollView>
+ </FullPageOfflineBlockingView>
  </ScreenWrapper>
  );
 }
@@ -84,4 +100,7 @@ export default withOnyx<VerifyIdentityProps, VerifyIdentityOnyxProps>({
  onfidoApplicantID: {
  key: ONYXKEYS.ONFIDO_APPLICANT_ID,
  },
+ onfidoToken: {
+ key: ONYXKEYS.ONFIDO_TOKEN,
+ },
 })(VerifyIdentity);