Fix blank screen when using invalid code and there is an exitTo param

src/components/BlockingViews/FullPageNotFoundView.tsx

@@ -11,6 +11,9 @@ import BlockingView from './BlockingView';
 import ForceFullScreenView from './ForceFullScreenView';
 
 type FullPageNotFoundViewProps = {
+    /** TestID for test */
+    testID?: string;
+
     /** Child elements */
     children?: React.ReactNode;
 
@@ -44,6 +47,7 @@ type FullPageNotFoundViewProps = {
 
 // eslint-disable-next-line rulesdir/no-negated-variables
 function FullPageNotFoundView({
+    testID,
     children = null,
     shouldShow = false,
     titleKey = 'notFound.notHere',
@@ -65,7 +69,10 @@ function FullPageNotFoundView({
                     onBackButtonPress={onBackButtonPress}
                     shouldShowBackButton={shouldShowBackButton}
                 />
-                <View style={[styles.flex1, styles.blockingViewContainer]}>
+                <View
+                    style={[styles.flex1, styles.blockingViewContainer]}
+                    testID={testID}
+                >
                     <BlockingView
                         icon={Illustrations.ToddBehindCloud}
                         iconWidth={variables.modalTopIconWidth}

src/components/ValidateCode/ValidateCodeModal.tsx

@@ -34,13 +34,17 @@ function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
 
     return (
         <FullPageNotFoundView
+            testID="validate-code-not-found"
             shouldShow={!ValidationUtils.isValidValidateCode(code)}
             shouldShowBackButton={shouldUseNarrowLayout}
             onLinkPress={() => {
                 Navigation.goBack();
             }}
         >
-            <View style={styles.deeplinkWrapperContainer}>
+            <View
+                style={styles.deeplinkWrapperContainer}
+                testID="validate-code"
+            >
                 <View style={styles.deeplinkWrapperMessage}>
                     <View style={styles.mb2}>
                         <Icon

src/pages/ValidateLoginPage/index.website.tsx

@@ -30,7 +30,8 @@ function ValidateLoginPage({
     const is2FARequired = !!account?.requiresTwoFactorAuth;
     const cachedAccountID = credentials?.accountID;
     const isUserClickedSignIn = !login && isSignedIn && (autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.SIGNING_IN || autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN);
-    const shouldStartSignInWithValidateCode = !isUserClickedSignIn && !isSignedIn && (!!login || !!exitTo);
+    const shouldStartSignInWithValidateCode = !isUserClickedSignIn && !isSignedIn && (!!login || !!exitTo) && ValidationUtils.isValidValidateCode(validateCode);
+    const isNavigatingToExitTo = isSignedIn && !!exitTo;
 
     useEffect(() => {
         if (isUserClickedSignIn) {
@@ -49,10 +50,6 @@ function ValidateLoginPage({
             return;
         }
 
-        if (!ValidationUtils.isValidValidateCode(validateCode)) {
-            return;
-        }
-
         // The user has initiated the sign in process on the same browser, in another tab.
         Session.signInWithValidateCode(Number(accountID), validateCode);
 
@@ -83,7 +80,7 @@ function ValidateLoginPage({
             {autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && !!login && <JustSignedInModal is2FARequired />}
             {autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && !!login && <JustSignedInModal is2FARequired={false} />}
             {/* If session.autoAuthState isn't available yet, we use shouldStartSignInWithValidateCode to conditionally render the component instead of local autoAuthState which contains a default value of NOT_STARTED */}
-            {(!autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.NOT_STARTED) && !exitTo && (
+            {(!autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isNavigatingToExitTo) && (
                 <ValidateCodeModal
                     accountID={Number(accountID)}
                     code={validateCode}

tests/ui/ValidateLoginPageTest.tsx

@@ -0,0 +1,54 @@
+import {NavigationContainer} from '@react-navigation/native';
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import createResponsiveStackNavigator from '@libs/Navigation/AppNavigator/createResponsiveStackNavigator';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
+import ValidateLoginPage from '@pages/ValidateLoginPage/index.website';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+
+const RootStack = createResponsiveStackNavigator<PublicScreensParamList>();
+
+const renderPage = (initialParams: PublicScreensParamList[typeof SCREENS.VALIDATE_LOGIN]) => {
+    return render(
+        <NavigationContainer>
+            <RootStack.Navigator>
+                <RootStack.Screen
+                    name={SCREENS.VALIDATE_LOGIN}
+                    component={ValidateLoginPage}
+                    initialParams={initialParams}
+                />
+            </RootStack.Navigator>
+        </NavigationContainer>,
+    );
+};
+
+describe('ValidateLoginPage', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        Onyx.clear();
+    });
+
+    it('Should show not found view when the magic code is invalid and there is an exitTo param', async () => {
+        await Onyx.set(ONYXKEYS.SESSION, {
+            autoAuthState: CONST.AUTO_AUTH_STATE.NOT_STARTED,
+        });
+
+        renderPage({accountID: '1', validateCode: 'ABCDEF', exitTo: 'concierge'});
+
+        expect(screen.getByTestId('validate-code-not-found')).not.toBeNull();
+    });
+
+    it('Should not show ValidateCodeModal when signed in and there is an exitTo param', async () => {
+        await Onyx.set(ONYXKEYS.SESSION, {
+            authToken: 'abcd',
+            autoAuthState: CONST.AUTO_AUTH_STATE.NOT_STARTED,
+        });
+
+        renderPage({accountID: '1', validateCode: '123456', exitTo: 'concierge'});
+
+        expect(screen.queryByTestId('validate-code')).toBeNull();
+    });
+});