show blocking screen for work email which has 2FA enabled

src/components/OnboardingMergingAccountBlockedView.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
+import {setOnboardingErrorMessage} from '@userActions/Welcome';
+import ROUTES from '@src/ROUTES';
+import BlockingView from './BlockingViews/BlockingView';
+import Button from './Button';
+import {ToddBehindCloud} from './Icon/Illustrations';
+
+type OnboardingMergingAccountBlockedViewProps = {
+    // Work email to display in the subtitle
+    workEmail: string | undefined;
+
+    // Whether the user is a VSB
+    isVsb: boolean | undefined;
+};
+
+function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergingAccountBlockedViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    return (
+        <>
+            <BlockingView
+                icon={ToddBehindCloud}
+                iconWidth={variables.modalTopIconWidth}
+                iconHeight={variables.modalTopIconHeight}
+                title={translate('onboarding.mergeBlockScreen.title')}
+                subtitle={translate('onboarding.mergeBlockScreen.subtitle', {workEmail})}
+                subtitleStyle={[styles.colorMuted]}
+            />
+            <Button
+                success
+                large
+                style={[styles.mb5]}
+                text={translate('common.buttonConfirm')}
+                onPress={() => {
+                    setOnboardingErrorMessage('');
+                    if (isVsb) {
+                        Navigation.navigate(ROUTES.ONBOARDING_ACCOUNTING.getRoute());
+                        return;
+                    }
+                    Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute());
+                }}
+            />
+        </>
+    );
+}
+
+OnboardingMergingAccountBlockedView.displayName = 'OnboardingMergingAccountBlockedView';
+
+export default OnboardingMergingAccountBlockedView;

src/libs/actions/Session/index.ts

@@ -72,7 +72,7 @@
 
 let hasSwitchedAccountInHybridMode = false;
 
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         session = value ?? {};
@@ -89,37 +89,37 @@
     },
 });
 
 Onyx.connect({
     key: ONYXKEYS.USER_METADATA,
     callback: Fullstory.consentAndIdentify,
 });
 
 let stashedSession: Session = {};
 Onyx.connect({
     key: ONYXKEYS.STASHED_SESSION,
     callback: (value) => (stashedSession = value ?? {}),
 });
 
 let credentials: Credentials = {};
 Onyx.connect({
     key: ONYXKEYS.CREDENTIALS,
     callback: (value) => (credentials = value ?? {}),
 });
 
 let stashedCredentials: Credentials = {};
 Onyx.connect({
     key: ONYXKEYS.STASHED_CREDENTIALS,
     callback: (value) => (stashedCredentials = value ?? {}),
 });
 
 let preferredLocale: Locale | null = null;
 Onyx.connect({
     key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     callback: (val) => (preferredLocale = val ?? null),
 });
 
 let activePolicyID: OnyxEntry<string>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
     callback: (newActivePolicyID) => {
         activePolicyID = newActivePolicyID;
@@ -519,7 +519,7 @@
 
 function getLastUpdateIDAppliedToClient(): Promise<number> {
     return new Promise((resolve) => {
         Onyx.connect({
             key: ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT,
             callback: (value) => resolve(value ?? 0),
         });
@@ -1279,7 +1279,6 @@
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM,
             value: {
-                onboardingWorkEmail: workEmail,
                 isLoading: false,
             },
         },
@@ -1290,10 +1289,16 @@
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM,
             value: {
-                onboardingWorkEmail: null,
                 isLoading: false,
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_ONBOARDING,
+            value: {
+                isMergingAccountBlocked: true,
+            },
+        },
     ];
 
     API.write(

src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

@@ -11,6 +11,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import OnboardingMergingAccountBlockedView from '@components/OnboardingMergingAccountBlockedView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -138,103 +139,112 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
         <ScreenWrapper
             shouldEnableMaxHeight={!isMobileSafari()}
             shouldAvoidScrollOnVirtualViewport={!isMobileSafari()}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom
             testID="BaseOnboardingWorkEmail"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >
             <HeaderWithBackButton
                 progressBarPercentage={10}
                 shouldShowBackButton={false}
             />
-            <FormProvider
-                style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
-                formID={ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM}
-                validate={validate}
-                onSubmit={submitWorkEmail}
-                submitButtonText={translate('onboarding.workEmail.addWorkEmail')}
-                enabledWhenOffline
-                submitFlexEnabled
-                shouldValidateOnBlur={false}
-                shouldValidateOnChange={shouldValidateOnChange}
-                shouldTrimValues={false}
-                footerContent={
-                    <OfflineWithFeedback
-                        shouldDisplayErrorAbove
-                        style={styles.mb3}
-                        errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
-                        errorRowStyles={[styles.mt2, styles.textWrap]}
-                        onClose={() => setOnboardingErrorMessage('')}
-                    >
-                        <Button
-                            large
-                            text={translate('common.skip')}
-                            testID="onboardingPrivateEmailSkipButton"
-                            onPress={() => {
-                                setOnboardingErrorMessage('');
-
-                                setOnboardingMergeAccountStepValue(true, true);
-                            }}
-                        />
-                    </OfflineWithFeedback>
-                }
-                shouldRenderFooterAboveSubmit
-                shouldHideFixErrorsAlert
-            >
-                <View>
-                    <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
-                        <Text style={styles.textHeadlineH1}>{translate('onboarding.workEmail.title')}</Text>
-                    </View>
-                    <View style={styles.mb2}>
-                        <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workEmail.subtitle')}</Text>
-                    </View>
+            {onboardingValues?.isMergingAccountBlocked ? (
+                <View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
+                    <OnboardingMergingAccountBlockedView
+                        workEmail={workEmail}
+                        isVsb={isVsb}
+                    />
+                </View>
+            ) : (
+                <FormProvider
+                    style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
+                    formID={ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM}
+                    validate={validate}
+                    onSubmit={submitWorkEmail}
+                    submitButtonText={translate('onboarding.workEmail.addWorkEmail')}
+                    enabledWhenOffline
+                    submitFlexEnabled
+                    shouldValidateOnBlur={false}
+                    shouldValidateOnChange={shouldValidateOnChange}
+                    shouldTrimValues={false}
+                    footerContent={
+                        <OfflineWithFeedback
+                            shouldDisplayErrorAbove
+                            style={styles.mb3}
+                            errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
+                            errorRowStyles={[styles.mt2, styles.textWrap]}
+                            onClose={() => setOnboardingErrorMessage('')}
+                        >
+                            <Button
+                                large
+                                text={translate('common.skip')}
+                                testID="onboardingPrivateEmailSkipButton"
+                                onPress={() => {
+                                    setOnboardingErrorMessage('');
+
+                                    setOnboardingMergeAccountStepValue(true, true);
+                                }}
+                            />
+                        </OfflineWithFeedback>
+                    }
+                    shouldRenderFooterAboveSubmit
+                    shouldHideFixErrorsAlert
+                >
                     <View>
-                        {section.map((item) => {
-                            return (
-                                <View
-                                    key={item.titleTranslationKey}
-                                    style={[styles.mt2, styles.mb3]}
-                                >
-                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
-                                        <Icon
-                                            src={item.icon}
-                                            height={ICON_SIZE}
-                                            width={ICON_SIZE}
-                                            additionalStyles={[styles.mr3]}
-                                        />
-                                        <View style={[styles.flexColumn, styles.flex1]}>
-                                            {item.shouldRenderEmail ? (
-                                                <AutoEmailLink
-                                                    style={[styles.textStrong, styles.lh20]}
-                                                    text={translate(item.titleTranslationKey)}
-                                                />
-                                            ) : (
-                                                <Text style={[styles.textStrong, styles.lh20]}>{translate(item.titleTranslationKey)}</Text>
-                                            )}
+                        <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
+                            <Text style={styles.textHeadlineH1}>{translate('onboarding.workEmail.title')}</Text>
+                        </View>
+                        <View style={styles.mb2}>
+                            <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workEmail.subtitle')}</Text>
+                        </View>
+                        <View>
+                            {section.map((item) => {
+                                return (
+                                    <View
+                                        key={item.titleTranslationKey}
+                                        style={[styles.mt2, styles.mb3]}
+                                    >
+                                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
+                                            <Icon
+                                                src={item.icon}
+                                                height={ICON_SIZE}
+                                                width={ICON_SIZE}
+                                                additionalStyles={[styles.mr3]}
+                                            />
+                                            <View style={[styles.flexColumn, styles.flex1]}>
+                                                {item.shouldRenderEmail ? (
+                                                    <AutoEmailLink
+                                                        style={[styles.textStrong, styles.lh20]}
+                                                        text={translate(item.titleTranslationKey)}
+                                                    />
+                                                ) : (
+                                                    <Text style={[styles.textStrong, styles.lh20]}>{translate(item.titleTranslationKey)}</Text>
+                                                )}
+                                            </View>
                                         </View>
                                     </View>
-                                </View>
-                            );
-                        })}
+                                );
+                            })}
+                        </View>
                     </View>
-                </View>
 
-                <View style={[styles.mb4, styles.pt3]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        // We do not want to auto-focus for mobile platforms
-                        ref={operatingSystem !== CONST.OS.ANDROID && operatingSystem !== CONST.OS.IOS ? inputCallbackRef : undefined}
-                        name="fname"
-                        inputID={INPUT_IDS.ONBOARDING_WORK_EMAIL}
-                        label={translate('common.workEmail')}
-                        aria-label={translate('common.workEmail')}
-                        role={CONST.ROLE.PRESENTATION}
-                        defaultValue={workEmail ?? ''}
-                        shouldSaveDraft
-                        maxLength={CONST.LOGIN_CHARACTER_LIMIT}
-                        spellCheck={false}
-                    />
-                </View>
-            </FormProvider>
+                    <View style={[styles.mb4, styles.pt3]}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            // We do not want to auto-focus for mobile platforms
+                            ref={operatingSystem !== CONST.OS.ANDROID && operatingSystem !== CONST.OS.IOS ? inputCallbackRef : undefined}
+                            name="fname"
+                            inputID={INPUT_IDS.ONBOARDING_WORK_EMAIL}
+                            label={translate('common.workEmail')}
+                            aria-label={translate('common.workEmail')}
+                            role={CONST.ROLE.PRESENTATION}
+                            defaultValue={workEmail ?? ''}
+                            shouldSaveDraft
+                            maxLength={CONST.LOGIN_CHARACTER_LIMIT}
+                            spellCheck={false}
+                        />
+                    </View>
+                </FormProvider>
+            )}
         </ScreenWrapper>
     );
 }

src/pages/OnboardingWorkEmailValidation/BaseOnboardingWorkEmailValidation.tsx

@@ -1,10 +1,8 @@
 import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect} from 'react';
 import {View} from 'react-native';
-import BlockingView from '@components/BlockingViews/BlockingView';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
+import OnboardingMergingAccountBlockedView from '@components/OnboardingMergingAccountBlockedView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm';
@@ -16,7 +14,6 @@ import AccountUtils from '@libs/AccountUtils';
 import {openOldDotLink} from '@libs/actions/Link';
 import {setOnboardingErrorMessage, setOnboardingMergeAccountStepValue, updateOnboardingValuesAndNavigation} from '@libs/actions/Welcome';
 import Navigation from '@libs/Navigation/Navigation';
-import variables from '@styles/variables';
 import {MergeIntoAccountAndLogin} from '@userActions/Session';
 import {resendValidateCode} from '@userActions/User';
 import CONST from '@src/CONST';
@@ -87,7 +84,7 @@ function BaseOnboardingWorkEmailValidation({shouldUseNativeStyles}: BaseOnboardi
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
+            includeSafeAreaPaddingBottom
             testID="BaseOnboardingWorkEmailValidation"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >
@@ -100,27 +97,9 @@ function BaseOnboardingWorkEmailValidation({shouldUseNativeStyles}: BaseOnboardi
             />
             {onboardingValues?.isMergingAccountBlocked ? (
                 <View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
-                    <BlockingView
-                        icon={Illustrations.ToddBehindCloud}
-                        iconWidth={variables.modalTopIconWidth}
-                        iconHeight={variables.modalTopIconHeight}
-                        title={translate('onboarding.mergeBlockScreen.title')}
-                        subtitle={translate('onboarding.mergeBlockScreen.subtitle', {workEmail})}
-                        subtitleStyle={[styles.colorMuted]}
-                    />
-                    <Button
-                        success={onboardingValues?.isMergingAccountBlocked}
-                        large
-                        style={[styles.mb5]}
-                        text={translate('common.buttonConfirm')}
-                        onPress={() => {
-                            setOnboardingErrorMessage('');
-                            if (isVsb) {
-                                Navigation.navigate(ROUTES.ONBOARDING_ACCOUNTING.getRoute());
-                                return;
-                            }
-                            Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute());
-                        }}
+                    <OnboardingMergingAccountBlockedView
+                        workEmail={workEmail}
+                        isVsb={isVsb}
                     />
                 </View>
             ) : (