Fix Onfido flow while moving back from offline

package.json

@@ -119,7 +119,7 @@
     "lodash-es": "4.17.21",
     "lottie-react-native": "6.5.1",
     "mapbox-gl": "^2.15.0",
-    "onfido-sdk-ui": "14.15.0",
+    "onfido-sdk-ui": "14.37.1",
     "process": "^0.11.10",
     "pusher-js": "8.3.0",
     "react": "18.3.1",

src/CONST.ts

@@ -1902,6 +1902,7 @@ const CONST = {
             WRONG_ANSWERS: 'Wrong answers',
             ONFIDO_FIXABLE_ERROR: 'Onfido returned a fixable error',
             ONFIDO_USER_CONSENT_DENIED: 'user_consent_denied',
+            ONFIDO_EXCEPTION: 'exception',
 
             // KBA stands for Knowledge Based Answers (requiring us to show Idology questions)
             KBA_NEEDED: 'KBA needed',

src/components/Onfido/BaseOnfidoWeb.tsx

@@ -11,7 +11,7 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import './index.css';
-import type {OnfidoElement, OnfidoError, OnfidoProps} from './types';
+import type {OnfidoElement, OnfidoProps} from './types';
 
 type InitializeOnfidoProps = OnfidoProps &
     Pick<LocaleContextProps, 'translate' | 'preferredLocale'> & {
@@ -23,7 +23,7 @@ type OnfidoEvent = Event & {
 };
 
 function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate, theme}: InitializeOnfidoProps) {
-    OnfidoSDK.init({
+    return OnfidoSDK.init({
         token: sdkToken,
         containerId: CONST.ONFIDO.CONTAINER_ID,
         customUI: {
@@ -94,10 +94,13 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
             }
             onSuccess(data);
         },
-        onError: (error: OnfidoError) => {
+        onError: (error) => {
             const errorType = error.type;
             const errorMessage: string = error.message ?? CONST.ERROR.UNKNOWN_ERROR;
             Log.hmmm('Onfido error', {errorType, errorMessage});
+            if (errorType === CONST.WALLET.ERROR.ONFIDO_EXCEPTION) {
+                return;
+            }
             if (errorType === CONST.WALLET.ERROR.ONFIDO_USER_CONSENT_DENIED) {
                 onUserExit();
                 return;
@@ -129,7 +132,7 @@ function Onfido({sdkToken, onSuccess, onError, onUserExit}: OnfidoProps, ref: Fo
     const theme = useTheme();
 
     useEffect(() => {
-        initializeOnfido({
+        const onfido = initializeOnfido({
             sdkToken,
             onSuccess,
             onError,
@@ -138,9 +141,11 @@ function Onfido({sdkToken, onSuccess, onError, onUserExit}: OnfidoProps, ref: Fo
             translate,
             theme,
         });
-
         window.addEventListener('userAnalyticsEvent', logOnFidoEvent);
-        return () => window.removeEventListener('userAnalyticsEvent', logOnFidoEvent);
+        return () => {
+            onfido.tearDown();
+            window.removeEventListener('userAnalyticsEvent', logOnFidoEvent);
+        };
         // Onfido should be initialized only once on mount
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);

src/components/Onfido/types.ts

@@ -1,6 +1,6 @@
 import type {OnfidoResult} from '@onfido/react-native-sdk';
 import type {Handle} from 'onfido-sdk-ui/types/Onfido';
-import type {CompleteData} from 'onfido-sdk-ui/types/Types';
+import type {CompleteData} from 'onfido-sdk-ui/types/shared/SdkParameters';
 import type {OnyxEntry} from 'react-native-onyx';
 
 type OnfidoData = CompleteData | OnfidoResult;

src/libs/actions/BankAccounts.ts

@@ -117,6 +117,11 @@ function clearOnfidoToken() {
     Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, '');
 }
 
+function setLocalOnfidoTokens(token: string, applicationID: string) {
+    Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, token);
+    Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, applicationID);
+}
+
 function updateAddPersonalBankAccountDraft(bankData: Partial<PersonalBankAccountForm>) {
     Onyx.merge(ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM_DRAFT, bankData);
 }
@@ -546,6 +551,7 @@ export {
     addBusinessWebsiteForDraft,
     addPersonalBankAccount,
     clearOnfidoToken,
+    setLocalOnfidoTokens,
     clearPersonalBankAccount,
     clearPlaid,
     setPlaidEvent,

src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

@@ -4,7 +4,7 @@ import {Str} from 'expensify-common';
 import lodashPick from 'lodash/pick';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
+import Onyx, {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -63,6 +63,9 @@ type ReimbursementAccountOnyxProps = {
 
     /** The token required to initialize the Onfido SDK */
     onfidoToken: OnyxEntry<string>;
+
+    /** The application id which connected to onfido session */
+    onfidoApplicantID: OnyxEntry<string>;
 };
 
 type ReimbursementAccountPageProps = WithPolicyOnyxProps &
@@ -128,6 +131,7 @@ function ReimbursementAccountPage({
     reimbursementAccount,
     route,
     onfidoToken = '',
+    onfidoApplicantID = '',
     policy,
     account,
     isLoadingApp = false,
@@ -225,6 +229,7 @@ function ReimbursementAccountPage({
     const prevIsReimbursementAccountLoading = usePrevious(reimbursementAccount?.isLoading);
     const prevReimbursementAccount = usePrevious(reimbursementAccount);
     const prevIsOffline = usePrevious(isOffline);
+    const onfidoLocalTokensRef = useRef({onfidoToken: '', onfidoApplicantID: ''});
 
     /**
      * Retrieve verified business bank account currently being set up.
@@ -243,6 +248,20 @@ function ReimbursementAccountPage({
         BankAccounts.openReimbursementAccountPage(stepToOpen, ignoreLocalSubStep ? '' : subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyIDParam);
     }
 
+    useEffect(() => {
+        if (!onfidoToken) {
+            return;
+        }
+        onfidoLocalTokensRef.current = {onfidoToken, onfidoApplicantID};
+    }, [onfidoToken, onfidoApplicantID]);
+
+    useEffect(() => {
+        if (!prevIsReimbursementAccountLoading && !onfidoLocalTokensRef.current.onfidoToken) {
+            return;
+        }
+        BankAccounts.setLocalOnfidoTokens(onfidoLocalTokensRef.current.onfidoToken, onfidoLocalTokensRef.current.onfidoApplicantID);
+    }, [prevIsReimbursementAccountLoading]);
+
     useEffect(() => {
         if (!isReimbursementAccountLoading) {
             return;
@@ -527,6 +546,9 @@ export default withPolicy(
         onfidoToken: {
             key: ONYXKEYS.ONFIDO_TOKEN,
         },
+        onfidoApplicantID: {
+            key: ONYXKEYS.ONFIDO_APPLICANT_ID,
+        },
         isLoadingApp: {
             key: ONYXKEYS.IS_LOADING_APP,
         },