[ECUK In-App 3DS] MFA: isolate 3DS flow into self-contained modal navigator

config/eslint/eslint.seatbelt.tsv

@@ -452,7 +452,6 @@
 "../../src/pages/EnablePayments/FeesAndTerms/substeps/TermsStep.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx"	"@typescript-eslint/no-deprecated/useSubStep"	1
 "../../src/pages/MissingPersonalDetails/subPages/Address.tsx"	"react-hooks/refs"	4
-"../../src/pages/MultifactorAuthentication/BiometricsTestPage.tsx"	"@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions"	1
 "../../src/pages/MultifactorAuthentication/RevokePage.tsx"	"@typescript-eslint/no-deprecated/ConfirmModal"	1
 "../../src/pages/MultifactorAuthentication/ValidateCodePage.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx"	"react-hooks/preserve-manual-memoization"	2

src/CONST/index.ts

@@ -6575,6 +6575,7 @@ const CONST = {
 
     NAVIGATION: {
         CUSTOM_HISTORY_ENTRY_SIDE_PANEL: 'CUSTOM_HISTORY-SIDE_PANEL',
+        CUSTOM_HISTORY_ENTRY_MFA_MODAL_NAVIGATOR: 'CUSTOM_HISTORY-MFA_MODAL_NAVIGATOR',
         // Fake history entry used to keep browser Back behavior correct after revealing a route under an RHP.
         // addRootHistoryRouterExtension owns when this is added, carried forward, and removed.
         CUSTOM_HISTORY_ENTRY_REVEAL_PADDING: 'CUSTOM_HISTORY-REVEAL_PADDING',
@@ -6598,6 +6599,7 @@ const CONST = {
             PUSH_PARAMS: 'PUSH_PARAMS',
             REPLACE_PARAMS: 'REPLACE_PARAMS',
             TOGGLE_SIDE_PANEL_WITH_HISTORY: 'TOGGLE_SIDE_PANEL_WITH_HISTORY',
+            TOGGLE_MFA_MODAL_NAVIGATOR_WITH_HISTORY: 'TOGGLE_MFA_MODAL_NAVIGATOR_WITH_HISTORY',
         },
     },
     TIME_PERIOD: {
@@ -9973,6 +9975,9 @@ const CONST = {
         SAFE_AREA: {
             DISMISS_KEYBOARD_LANDSCAPE_MODE: 'SafeArea-DismissKeyboardLandscapeMode',
         },
+        MFA_OVERLAY: {
+            BACKDROP: 'MfaOverlay-Backdrop',
+        },
         DOMAIN: {
             GROUPS: {
                 CREATE_GROUP_BUTTON: 'DomainGroups-CreateGroupButton',

src/ROUTES.ts

@@ -6,7 +6,6 @@
  */
 import type {TupleToUnion, ValueOf} from 'type-fest';
 import type {UpperCaseCharacters} from 'type-fest/source/internal';
-import type {MultifactorAuthenticationPromptType} from './components/MultifactorAuthentication/config/types';
 import type {SearchFilterKey, SearchQueryString, UserFriendlyKey} from './components/Search/types';
 import type CONST from './CONST';
 import type {IOUAction, IOURequestType, IOUType, OdometerImageType} from './CONST';
@@ -4078,17 +4077,6 @@ const ROUTES = {
         getRoute: (domainAccountID: number, accountID: number) => `domain/${domainAccountID}/members/${accountID}/move` as const,
     },
 
-    MULTIFACTOR_AUTHENTICATION_MAGIC_CODE: `multifactor-authentication/magic-code`,
-    MULTIFACTOR_AUTHENTICATION_BIOMETRICS_TEST: 'multifactor-authentication/scenario/biometrics-test',
-
-    MULTIFACTOR_AUTHENTICATION_OUTCOME_SUCCESS: 'multifactor-authentication/outcome/success',
-    MULTIFACTOR_AUTHENTICATION_OUTCOME_FAILURE: 'multifactor-authentication/outcome/failure',
-
-    MULTIFACTOR_AUTHENTICATION_PROMPT: {
-        route: `multifactor-authentication/prompt/:promptType`,
-        getRoute: (promptType: MultifactorAuthenticationPromptType) => `multifactor-authentication/prompt/${promptType}` as const,
-    },
-    MULTIFACTOR_AUTHENTICATION_NOT_FOUND: 'multifactor-authentication/not-found',
     MULTIFACTOR_AUTHENTICATION_REVOKE: 'multifactor-authentication/revoke',
 
     DOMAIN_GROUPS: {

src/SCREENS.ts

@@ -1076,11 +1076,9 @@ const SCREENS = {
     },
     MULTIFACTOR_AUTHENTICATION: {
         MAGIC_CODE: 'Multifactor_Authentication_Magic_Code',
-        BIOMETRICS_TEST: 'Multifactor_Authentication_Biometrics_Test',
         OUTCOME_SUCCESS: 'Multifactor_Authentication_Outcome_Success',
         OUTCOME_FAILURE: 'Multifactor_Authentication_Outcome_Failure',
         PROMPT: 'Multifactor_Authentication_Prompt',
-        NOT_FOUND: 'Multifactor_Authentication_Not_Found',
         REVOKE: 'Multifactor_Authentication_Revoke',
         AUTHORIZE_TRANSACTION: 'Multifactor_Authentication_Authorize_Transaction',
     },

src/components/BiometricsTestToolRow.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import useBiometricRegistrationStatus, {REGISTRATION_STATUS} from '@hooks/useBiometricRegistrationStatus';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {revokeMultifactorAuthenticationCredentials} from '@libs/actions/MultifactorAuthentication';
+import CONST from '@src/CONST';
+import Button from './Button';
+import {useMultifactorAuthentication} from './MultifactorAuthentication/Context';
+import TestToolRow from './TestToolRow';
+
+function BiometricsTestToolRow() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {executeScenario} = useMultifactorAuthentication();
+    const {localCredentialID, isCurrentDeviceRegistered, otherDeviceCount, registrationStatus} = useBiometricRegistrationStatus();
+    const {isOffline} = useNetwork();
+    const [isMFARevokeLoading, setIsMFARevokeLoading] = useState(false);
+
+    const statusTextMap = {
+        [REGISTRATION_STATUS.NEVER_REGISTERED]: translate('multifactorAuthentication.biometricsTest.statusNeverRegistered'),
+        [REGISTRATION_STATUS.NOT_REGISTERED]: translate('multifactorAuthentication.biometricsTest.statusNotRegistered'),
+        [REGISTRATION_STATUS.REGISTERED_OTHER_DEVICE]: translate('multifactorAuthentication.biometricsTest.statusRegisteredOtherDevice', {count: otherDeviceCount}),
+        [REGISTRATION_STATUS.REGISTERED_THIS_DEVICE]: translate('multifactorAuthentication.biometricsTest.statusRegisteredThisDevice'),
+    };
+    const biometricsTitle = translate('multifactorAuthentication.biometricsTest.troubleshootBiometricsStatus', {status: statusTextMap[registrationStatus]});
+
+    return (
+        <TestToolRow title={biometricsTitle}>
+            <View style={[styles.flexRow, styles.gap2]}>
+                <Button
+                    small
+                    isDisabled={isOffline}
+                    text={translate('multifactorAuthentication.biometricsTest.test')}
+                    onPress={() => executeScenario(CONST.MULTIFACTOR_AUTHENTICATION.SCENARIO.BIOMETRICS_TEST)}
+                />
+                {isCurrentDeviceRegistered && !!localCredentialID && (
+                    <Button
+                        danger
+                        isDisabled={isOffline}
+                        isLoading={isMFARevokeLoading}
+                        small
+                        text={translate('multifactorAuthentication.revoke.revoke')}
+                        onPress={async () => {
+                            setIsMFARevokeLoading(true);
+                            await revokeMultifactorAuthenticationCredentials({onlyKeyID: localCredentialID});
+                            setIsMFARevokeLoading(false);
+                        }}
+                    />
+                )}
+            </View>
+        </TestToolRow>
+    );
+}
+
+BiometricsTestToolRow.displayName = 'BiometricsTestToolRow';
+
+export default BiometricsTestToolRow;

src/components/MultifactorAuthentication/Context/MultifactorAuthenticationActionsContext.ts

@@ -0,0 +1,17 @@
+import {createContext, useContext} from 'react';
+import type {MultifactorAuthenticationActionsContextType} from './types';
+
+const MultifactorAuthenticationActionsContext = createContext<MultifactorAuthenticationActionsContextType | undefined>(undefined);
+
+function useMultifactorAuthenticationActions(): MultifactorAuthenticationActionsContextType {
+    const context = useContext(MultifactorAuthenticationActionsContext);
+
+    if (!context) {
+        throw new Error('useMultifactorAuthenticationActions must be used within a MultifactorAuthenticationStateProvider');
+    }
+
+    return context;
+}
+
+export default MultifactorAuthenticationActionsContext;
+export {useMultifactorAuthenticationActions};

src/components/MultifactorAuthentication/Context/MultifactorAuthenticationComposedContextProviders.tsx

@@ -0,0 +1,36 @@
+import React, {useMemo, useReducer} from 'react';
+import type {ReactNode} from 'react';
+import MultifactorAuthenticationActionsContext from './MultifactorAuthenticationActionsContext';
+import {MultifactorAuthenticationContextProvider} from './MultifactorAuthenticationMainContext';
+import MultifactorAuthenticationStateContext from './MultifactorAuthenticationStateContext';
+import {DEFAULT_STATE, stateReducer} from './stateReducer';
+
+type MultifactorAuthenticationProviderProps = {
+    children: ReactNode;
+};
+
+function MultifactorAuthenticationStateProvider({children}: MultifactorAuthenticationProviderProps) {
+    const [state, dispatch] = useReducer(stateReducer, DEFAULT_STATE);
+    const actions = useMemo(() => ({dispatch}), [dispatch]);
+
+    return (
+        <MultifactorAuthenticationStateContext.Provider value={state}>
+            <MultifactorAuthenticationActionsContext.Provider value={actions}>{children}</MultifactorAuthenticationActionsContext.Provider>
+        </MultifactorAuthenticationStateContext.Provider>
+    );
+}
+
+MultifactorAuthenticationStateProvider.displayName = 'MultifactorAuthenticationStateProvider';
+
+function MultifactorAuthenticationContextProviders({children}: MultifactorAuthenticationProviderProps) {
+    return (
+        <MultifactorAuthenticationStateProvider>
+            <MultifactorAuthenticationContextProvider>{children}</MultifactorAuthenticationContextProvider>
+        </MultifactorAuthenticationStateProvider>
+    );
+}
+
+MultifactorAuthenticationContextProviders.displayName = 'MultifactorAuthenticationContextProviders';
+
+export default MultifactorAuthenticationContextProviders;
+export {DEFAULT_STATE, MultifactorAuthenticationStateProvider};