From d98441f9b6ab6674a879a95a6fb7b840506adfea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 18:28:07 -0500
Subject: [PATCH 01/15] feature(signinmodal): Version 0.1 signin modal in right
 modal navigator

---
 src/ROUTES.js                                 |  1 +
 .../AppNavigator/ModalStackNavigators.js      | 11 ++++++
 .../Navigators/RightModalNavigator.js         |  5 +++
 src/libs/Navigation/linkingConfig.js          |  5 +++
 src/libs/actions/Session/index.js             |  9 +++--
 src/libs/actions/SignInRedirect.js            |  2 ++
 src/pages/signin/SignInModal.js               | 36 +++++++++++++++++++
 src/pages/signin/SignInPage.js                | 15 +++++---
 src/pages/signin/SignInPageLayout/index.js    |  6 ++--
 9 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/signin/SignInModal.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 92d11f440584..4d9b618674b3 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -187,4 +187,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
+    SIGNINMODAL: 'signinmodal'
 };
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index fcc4b3aaaa3e..e709cf620b22 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -711,6 +711,16 @@ const EditRequestStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const SignInModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const SignInModal = require('../../../pages/signin/SignInModal').default;
+            return SignInModal;
+        },
+        name: 'SignIn_Root', 
+    }
+]);
+
 export {
     MoneyRequestModalStackNavigator,
     SplitDetailsModalStackNavigator,
@@ -732,4 +742,5 @@ export {
     WalletStatementStackNavigator,
     FlagCommentStackNavigator,
     EditRequestStackNavigator,
+    SignInModalStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 7d6d4cb2709c..b34ab0ac66f8 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -93,6 +93,11 @@ function RigthModalNavigator() {
                 name="EditRequest"
                 component={ModalStackNavigators.EditRequestStackNavigator}
             />
+            <Stack.Screen
+                name="SignIn"
+                options={defaultModalScreenOptions}
+                component={ModalStackNavigators.SignInModalStackNavigator}
+            />
         </Stack.Navigator>
     );
 }
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 44e040ccb102..ce3ca5378e1b 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -338,6 +338,11 @@ export default {
                             EditRequest_Root: ROUTES.EDIT_REQUEST,
                         },
                     },
+                    SignIn: {
+                        screens: {
+                            SignIn_Root: ROUTES.SIGNINMODAL,
+                        },
+                    },
                 },
             },
         },
diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index 2cb76342f43a..3dc25ec59dc9 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -89,11 +89,14 @@ function isAnonymousUser() {
 }
 
 function signOutAndRedirectToSignIn() {
+    Log.info('Redirecting to Sign In because signOut() was called');
     hideContextMenu(false);
     signOut();
-    redirectToSignIn();
-    Log.info('Redirecting to Sign In because signOut() was called');
-    if (isAnonymousUser()) {
+    if (!isAnonymousUser()) {
+        redirectToSignIn();
+    }
+    else (isAnonymousUser()) {
+        Navigation.navigate(ROUTES.SIGNINMODAL);
         Linking.getInitialURL().then((url) => {
             const reportID = ReportUtils.getReportIDFromLink(url);
             if (reportID) {
diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js
index a010621c4eea..434b8be54a84 100644
--- a/src/libs/actions/SignInRedirect.js
+++ b/src/libs/actions/SignInRedirect.js
@@ -8,6 +8,7 @@ import NetworkConnection from '../NetworkConnection';
 import HttpUtils from '../HttpUtils';
 import navigationRef from '../Navigation/navigationRef';
 import SCREENS from '../../SCREENS';
+import ROUTES from '../../ROUTES';
 import Navigation from '../Navigation/Navigation';
 import * as ErrorUtils from '../ErrorUtils';
 import * as SessionUtils from '../SessionUtils';
@@ -89,6 +90,7 @@ function redirectToSignIn(errorMessage) {
     clearStorageAndRedirect(errorMessage);
     resetHomeRouteParams();
     SessionUtils.resetDidUserLogInDuringSession();
+    Navigation.navigate(ROUTES.SIGNINMODAL);
 }
 
 export default redirectToSignIn;
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
new file mode 100644
index 000000000000..694fc870cf9a
--- /dev/null
+++ b/src/pages/signin/SignInModal.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import SignInPage from './SignInPage';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import Navigation from '../../libs/Navigation/Navigation';
+
+const propTypes = {
+};
+
+const defaultProps = {
+};
+
+function SignInModal(props) {
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            onEntryTransitionEnd={() =>{}}
+        >
+            <HeaderWithBackButton
+                title=''//{props.translate('common.description')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <SignInPage 
+                isInModal={true}
+            />
+        </ScreenWrapper>
+
+    );
+}
+
+SignInModal.propTypes = propTypes;
+SignInModal.defaultProps = defaultProps;
+SignInModal.displayName = 'SignInModal';
+
+export default (SignInModal);
\ No newline at end of file
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index f6eb4f9306f3..9dd04ebd31ff 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -45,11 +45,14 @@ const propTypes = {
         twoFactorAuthCode: PropTypes.string,
         validateCode: PropTypes.string,
     }),
+
+    isInModal: PropTypes.bool,
 };
 
 const defaultProps = {
     account: {},
     credentials: {},
+    isInModal: false,
 };
 
 /**
@@ -77,9 +80,10 @@ function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin
     };
 }
 
-function SignInPage({credentials, account}) {
+function SignInPage({credentials, account, isInModal}) {
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const showSmallScreen = isSmallScreenWidth || isInModal;
     const safeAreaInsets = useSafeAreaInsets();
 
     useEffect(() => Performance.measureTTI(), []);
@@ -114,13 +118,13 @@ function SignInPage({credentials, account}) {
             // replacing spaces with "hard spaces" to prevent breaking the number
             const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
             if (account.validated) {
-                welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
-                welcomeText = isSmallScreenWidth
+                welcomeHeader = showSmallScreen ? '' : translate('welcomeText.welcomeBack');
+                welcomeText = showSmallScreen
                     ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
             } else {
-                welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcome');
-                welcomeText = isSmallScreenWidth
+                welcomeHeader = showSmallScreen ? '' : translate('welcomeText.welcome');
+                welcomeText = showSmallScreen
                     ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
             }
@@ -143,6 +147,7 @@ function SignInPage({credentials, account}) {
                 welcomeText={welcomeText}
                 shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth}
                 shouldShowWelcomeText={shouldShowWelcomeText}
+                isInModal={isInModal}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
                     so that password managers can access the values. Conditionally rendering this component will break this feature. */}
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 7acd08a6c693..71e6b37181b1 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -35,6 +35,8 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
+    isInModal: PropTypes.bool,
+    
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
@@ -48,7 +50,7 @@ function SignInPageLayout(props) {
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
 
-    if (props.isSmallScreenWidth) {
+    if (props.isSmallScreenWidth || props.isInModal) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -70,7 +72,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!props.isSmallScreenWidth ? (
+            {!(props.isSmallScreenWidth || props.isInModal) ? (
                 <View style={contentContainerStyles}>
                     <SignInPageContent
                         welcomeHeader={props.welcomeHeader}

From f24e7ceaa77376d5bbc672a0cb653c086c450866 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 18:29:31 -0500
Subject: [PATCH 02/15] feature(signinmodal): Small nav fixes

---
 src/libs/actions/Session/index.js  | 2 +-
 src/libs/actions/SignInRedirect.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index 3dc25ec59dc9..b383562823de 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -95,7 +95,7 @@ function signOutAndRedirectToSignIn() {
     if (!isAnonymousUser()) {
         redirectToSignIn();
     }
-    else (isAnonymousUser()) {
+    else {
         Navigation.navigate(ROUTES.SIGNINMODAL);
         Linking.getInitialURL().then((url) => {
             const reportID = ReportUtils.getReportIDFromLink(url);
diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js
index 434b8be54a84..674518b07480 100644
--- a/src/libs/actions/SignInRedirect.js
+++ b/src/libs/actions/SignInRedirect.js
@@ -90,7 +90,6 @@ function redirectToSignIn(errorMessage) {
     clearStorageAndRedirect(errorMessage);
     resetHomeRouteParams();
     SessionUtils.resetDidUserLogInDuringSession();
-    Navigation.navigate(ROUTES.SIGNINMODAL);
 }
 
 export default redirectToSignIn;

From b4f495fbf3d4d5ce083c783fd3ae49859210ebd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 18:34:51 -0500
Subject: [PATCH 03/15] feat(signinmodal): Sign in working with custom action
 anonuser

---
 src/libs/actions/Session/index.js             | 84 ++++++++++++++++++-
 src/pages/signin/SignInPage.js                |  6 +-
 .../ValidateCodeForm/BaseValidateCodeForm.js  |  9 ++
 .../signin/ValidateCodeForm/index.android.js  | 17 +++-
 src/pages/signin/ValidateCodeForm/index.js    | 17 +++-
 5 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index b383562823de..f47fdce61e09 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -91,8 +91,8 @@ function isAnonymousUser() {
 function signOutAndRedirectToSignIn() {
     Log.info('Redirecting to Sign In because signOut() was called');
     hideContextMenu(false);
-    signOut();
     if (!isAnonymousUser()) {
+        signOut();
         redirectToSignIn();
     }
     else {
@@ -742,6 +742,87 @@ function validateTwoFactorAuth(twoFactorAuthCode) {
     API.write('TwoFactorAuth_Validate', {twoFactorAuthCode}, {optimisticData, successData, failureData});
 }
 
+function signInAnonymousAccount(validateCode, preferredLocale = CONST.LOCALES.DEFAULT) {
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                ...CONST.DEFAULT_ACCOUNT_DATA,
+                isLoading: true,
+                loadingForm: CONST.FORMS.VALIDATE_CODE_FORM,
+            },
+        },
+        {
+            // We need to clean the authToken so the app is refreshed
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.SESSION,
+            value: {
+                authToken: '',
+            },
+        },
+    ];
+
+    const successData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                isLoading: false,
+                loadingForm: null,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CREDENTIALS,
+            value: {
+                validateCode,
+            },
+        },
+        {
+            // We need to manually set the authTokenType to NOT be anonymous
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.SESSION,
+            value: {
+                authTokenType: '',
+            },
+        }
+    ];
+
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                isLoading: false,
+                loadingForm: null,
+            },
+        },
+    ];
+
+    const params = {
+        email: credentials.login,
+        preferredLocale,
+        validateCode: validateCode || credentials.validateCode,
+    };
+
+    // TODO: Switch to ClaimAnonymousAccount command, when backend is ready
+    Device.getDeviceInfoWithID().then((deviceInfo) => {
+        API.write(
+            'SigninUser',
+            {
+                ...params,
+                deviceInfo,
+            },
+            {
+                optimisticData,
+                successData,
+                failureData,
+            },
+        );
+    });
+}
+
 export {
     beginSignIn,
     setSupportAuthToken,
@@ -767,4 +848,5 @@ export {
     isAnonymousUser,
     toggleTwoFactorAuth,
     validateTwoFactorAuth,
+    signInAnonymousAccount,
 };
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 9dd04ebd31ff..33c018b2e776 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -130,7 +130,7 @@ function SignInPage({credentials, account, isInModal}) {
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage) {
-        welcomeHeader = isSmallScreenWidth ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
+        welcomeHeader = showSmallScreen ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage) {
@@ -145,7 +145,7 @@ function SignInPage({credentials, account, isInModal}) {
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth}
+                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 isInModal={isInModal}
             >
@@ -155,7 +155,7 @@ function SignInPage({credentials, account, isInModal}) {
                     isVisible={shouldShowLoginForm}
                     blurOnSubmit={account.validated === false}
                 />
-                {shouldShowValidateCodeForm && <ValidateCodeForm />}
+                {shouldShowValidateCodeForm && <ValidateCodeForm isInModal={isInModal} />}
                 {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
                 {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
             </SignInPageLayout>
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index a68f99df6d24..84b5f2f95ed8 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -28,6 +28,9 @@ import usePrevious from '../../../hooks/usePrevious';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
+    /** Whether the user is anonymous. True when opening the Sign-In Page from the modal */
+    isInModal: PropTypes.bool,
+
     /* Onyx Props */
 
     /** The details about the account that the user is signing in with */
@@ -64,6 +67,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    isInModal: false,
     account: {},
     credentials: {},
     session: {
@@ -222,6 +226,11 @@ function BaseValidateCodeForm(props) {
         }
         setFormError({});
 
+        if (props.isInModal) {
+            Session.signInAnonymousAccount(validateCode, props.preferredLocale);
+            return;
+        }
+
         const accountID = lodashGet(props.credentials, 'accountID');
         if (accountID) {
             Session.signInWithValidateCode(accountID, validateCode, props.preferredLocale, twoFactorAuthCode);
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 7ff81357725d..01724f91e6a5 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -1,11 +1,20 @@
 import React from 'react';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const defaultProps = {};
+const defaultProps = {
+    isInModal: false,
+};
 
-const propTypes = {};
-function ValidateCodeForm() {
-    return <BaseValidateCodeForm autoComplete="sms-otp" />;
+const propTypes = {
+    isInModal: PropTypes.bool,
+};
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="sms-otp"
+            isInModal={props.isInModal}
+        />
+    );
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 6b01c7d4dec2..09c67df2f8f1 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -1,11 +1,20 @@
 import React from 'react';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const defaultProps = {};
+const defaultProps = {
+    isInModal: false,
+};
 
-const propTypes = {};
-function ValidateCodeForm() {
-    return <BaseValidateCodeForm autoComplete="one-time-code" />;
+const propTypes = {
+    isInModal: PropTypes.bool,
+};
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="one-time-code"
+            isInModal={props.isInModal}
+        />
+    );
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';

From cd30cf901fd71778880b40da2da0d1e47831704e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 19:02:16 -0500
Subject: [PATCH 04/15] task: Changes after cherrypick, make new branch work

---
 .../Navigation/AppNavigator/Navigators/RightModalNavigator.js    | 1 -
 src/pages/signin/ValidateCodeForm/index.js                       | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index b34ab0ac66f8..cb1bf90aa48c 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -95,7 +95,6 @@ function RigthModalNavigator() {
             />
             <Stack.Screen
                 name="SignIn"
-                options={defaultModalScreenOptions}
                 component={ModalStackNavigators.SignInModalStackNavigator}
             />
         </Stack.Navigator>
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 09c67df2f8f1..f35f7e256f4d 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
+import PropTypes from 'prop-types';
 
 const defaultProps = {
     isInModal: false,

From 53b6fa9867e00061cd620c569d03fba7c7aab091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 19:21:24 -0500
Subject: [PATCH 05/15] task: Fix current lint issues

---
 src/libs/actions/SignInRedirect.js                    |  1 -
 src/pages/signin/SignInModal.js                       | 11 ++++-------
 src/pages/signin/SignInPageLayout/index.js            |  2 +-
 .../signin/ValidateCodeForm/BaseValidateCodeForm.js   |  2 +-
 src/pages/signin/ValidateCodeForm/index.android.js    |  2 ++
 src/pages/signin/ValidateCodeForm/index.js            |  3 ++-
 6 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js
index 674518b07480..a010621c4eea 100644
--- a/src/libs/actions/SignInRedirect.js
+++ b/src/libs/actions/SignInRedirect.js
@@ -8,7 +8,6 @@ import NetworkConnection from '../NetworkConnection';
 import HttpUtils from '../HttpUtils';
 import navigationRef from '../Navigation/navigationRef';
 import SCREENS from '../../SCREENS';
-import ROUTES from '../../ROUTES';
 import Navigation from '../Navigation/Navigation';
 import * as ErrorUtils from '../ErrorUtils';
 import * as SessionUtils from '../SessionUtils';
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 694fc870cf9a..181f7da1d1ed 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -4,13 +4,11 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 
-const propTypes = {
-};
+const propTypes = {};
 
-const defaultProps = {
-};
+const defaultProps = {};
 
-function SignInModal(props) {
+function SignInModal() {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -18,11 +16,10 @@ function SignInModal(props) {
             onEntryTransitionEnd={() =>{}}
         >
             <HeaderWithBackButton
-                title=''//{props.translate('common.description')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <SignInPage 
-                isInModal={true}
+                isInModal
             />
         </ScreenWrapper>
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 71e6b37181b1..67aaf259940b 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -35,7 +35,7 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
-    isInModal: PropTypes.bool,
+    isInModal: PropTypes.bool.isRequired,
     
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 84b5f2f95ed8..64765a70dc53 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -237,7 +237,7 @@ function BaseValidateCodeForm(props) {
         } else {
             Session.signIn(validateCode, twoFactorAuthCode, props.preferredLocale);
         }
-    }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
+    }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode, props.isInModal]);
 
     return (
         <>
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 01724f91e6a5..41429167da5e 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -1,6 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
+
 const defaultProps = {
     isInModal: false,
 };
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index f35f7e256f4d..82404c02b77d 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import BaseValidateCodeForm from './BaseValidateCodeForm';
 import PropTypes from 'prop-types';
+import BaseValidateCodeForm from './BaseValidateCodeForm';
+
 
 const defaultProps = {
     isInModal: false,

From 10b82c276b4acd026794dea7f35c3ea1e961e0a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 2 Aug 2023 19:22:30 -0500
Subject: [PATCH 06/15] task: Run prettier on current status of code

---
 src/ROUTES.js                                       |  2 +-
 .../Navigation/AppNavigator/ModalStackNavigators.js |  4 ++--
 src/libs/actions/Session/index.js                   |  5 ++---
 src/pages/signin/SignInModal.js                     | 13 ++++---------
 src/pages/signin/SignInPageLayout/index.js          |  2 +-
 src/pages/signin/ValidateCodeForm/index.android.js  |  1 -
 src/pages/signin/ValidateCodeForm/index.js          |  1 -
 7 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 4d9b618674b3..2759da1a1c44 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -187,5 +187,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
-    SIGNINMODAL: 'signinmodal'
+    SIGNINMODAL: 'signinmodal',
 };
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index e709cf620b22..87f0da631505 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -717,8 +717,8 @@ const SignInModalStackNavigator = createModalStackNavigator([
             const SignInModal = require('../../../pages/signin/SignInModal').default;
             return SignInModal;
         },
-        name: 'SignIn_Root', 
-    }
+        name: 'SignIn_Root',
+    },
 ]);
 
 export {
diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index f47fdce61e09..87d4a8d6a687 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -94,8 +94,7 @@ function signOutAndRedirectToSignIn() {
     if (!isAnonymousUser()) {
         signOut();
         redirectToSignIn();
-    }
-    else {
+    } else {
         Navigation.navigate(ROUTES.SIGNINMODAL);
         Linking.getInitialURL().then((url) => {
             const reportID = ReportUtils.getReportIDFromLink(url);
@@ -786,7 +785,7 @@ function signInAnonymousAccount(validateCode, preferredLocale = CONST.LOCALES.DE
             value: {
                 authTokenType: '',
             },
-        }
+        },
     ];
 
     const failureData = [
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 181f7da1d1ed..a1a294f1879b 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -13,16 +13,11 @@ function SignInModal() {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() =>{}}
+            onEntryTransitionEnd={() => {}}
         >
-            <HeaderWithBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-            />
-            <SignInPage 
-                isInModal
-            />
+            <HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
+            <SignInPage isInModal />
         </ScreenWrapper>
-
     );
 }
 
@@ -30,4 +25,4 @@ SignInModal.propTypes = propTypes;
 SignInModal.defaultProps = defaultProps;
 SignInModal.displayName = 'SignInModal';
 
-export default (SignInModal);
\ No newline at end of file
+export default SignInModal;
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 67aaf259940b..b333f561fdb2 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -36,7 +36,7 @@ const propTypes = {
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
     isInModal: PropTypes.bool.isRequired,
-    
+
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 41429167da5e..46b9d25521ec 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-
 const defaultProps = {
     isInModal: false,
 };
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 82404c02b77d..5ac66e8f6ac7 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-
 const defaultProps = {
     isInModal: false,
 };

From 2c5842c2a71b8256bdf4ba001b79c2155b81eb6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Thu, 3 Aug 2023 00:08:06 -0500
Subject: [PATCH 07/15] task: Make login work with new sign in command, and
 color!

---
 .../Navigation/AppNavigator/AuthScreens.js    |  3 +
 src/libs/actions/Session/index.js             | 82 -------------------
 src/pages/signin/SignInModal.js               |  2 +
 .../ValidateCodeForm/BaseValidateCodeForm.js  |  5 --
 src/styles/styles.js                          |  4 +
 5 files changed, 9 insertions(+), 87 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 8fca9aea495c..742c1a410379 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -47,6 +47,9 @@ Onyx.connect({
         }
 
         currentAccountID = val.accountID;
+        if(Navigation.isActiveRoute(ROUTES.SIGNINMODAL)) {
+            Navigation.dismissModal();
+        }
     },
 });
 
diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index 87d4a8d6a687..43d5910dcb01 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -741,87 +741,6 @@ function validateTwoFactorAuth(twoFactorAuthCode) {
     API.write('TwoFactorAuth_Validate', {twoFactorAuthCode}, {optimisticData, successData, failureData});
 }
 
-function signInAnonymousAccount(validateCode, preferredLocale = CONST.LOCALES.DEFAULT) {
-    const optimisticData = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.ACCOUNT,
-            value: {
-                ...CONST.DEFAULT_ACCOUNT_DATA,
-                isLoading: true,
-                loadingForm: CONST.FORMS.VALIDATE_CODE_FORM,
-            },
-        },
-        {
-            // We need to clean the authToken so the app is refreshed
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.SESSION,
-            value: {
-                authToken: '',
-            },
-        },
-    ];
-
-    const successData = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.ACCOUNT,
-            value: {
-                isLoading: false,
-                loadingForm: null,
-            },
-        },
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.CREDENTIALS,
-            value: {
-                validateCode,
-            },
-        },
-        {
-            // We need to manually set the authTokenType to NOT be anonymous
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.SESSION,
-            value: {
-                authTokenType: '',
-            },
-        },
-    ];
-
-    const failureData = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.ACCOUNT,
-            value: {
-                isLoading: false,
-                loadingForm: null,
-            },
-        },
-    ];
-
-    const params = {
-        email: credentials.login,
-        preferredLocale,
-        validateCode: validateCode || credentials.validateCode,
-    };
-
-    // TODO: Switch to ClaimAnonymousAccount command, when backend is ready
-    Device.getDeviceInfoWithID().then((deviceInfo) => {
-        API.write(
-            'SigninUser',
-            {
-                ...params,
-                deviceInfo,
-            },
-            {
-                optimisticData,
-                successData,
-                failureData,
-            },
-        );
-    });
-}
-
 export {
     beginSignIn,
     setSupportAuthToken,
@@ -847,5 +766,4 @@ export {
     isAnonymousUser,
     toggleTwoFactorAuth,
     validateTwoFactorAuth,
-    signInAnonymousAccount,
 };
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index a1a294f1879b..48a81c96e68e 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -3,6 +3,7 @@ import SignInPage from './SignInPage';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
 
 const propTypes = {};
 
@@ -11,6 +12,7 @@ const defaultProps = {};
 function SignInModal() {
     return (
         <ScreenWrapper
+            style={[styles.signInModal]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => {}}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 64765a70dc53..df84aac31af5 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -226,11 +226,6 @@ function BaseValidateCodeForm(props) {
         }
         setFormError({});
 
-        if (props.isInModal) {
-            Session.signInAnonymousAccount(validateCode, props.preferredLocale);
-            return;
-        }
-
         const accountID = lodashGet(props.credentials, 'accountID');
         if (accountID) {
             Session.signInWithValidateCode(accountID, validateCode, props.preferredLocale, twoFactorAuthCode);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b490baef72f2..26fc7d0d220b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1189,6 +1189,10 @@ const styles = {
         width: 300,
     },
 
+    signInModal: {
+        backgroundColor: themeColors.highlightBG
+    },
+
     changeExpensifyLoginLinkContainer: {
         flexDirection: 'row',
         flexWrap: 'wrap',

From 68bdb8f5afdad9c393d9f7009bc0ea4215429f83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Thu, 3 Aug 2023 00:19:14 -0500
Subject: [PATCH 08/15] task: Remove unnecessary dependency

---
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index df84aac31af5..acd932da0ed5 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -232,7 +232,7 @@ function BaseValidateCodeForm(props) {
         } else {
             Session.signIn(validateCode, twoFactorAuthCode, props.preferredLocale);
         }
-    }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode, props.isInModal]);
+    }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
 
     return (
         <>

From 8320e5df7248b2330a1fcdd3d6d687432d4a9572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Thu, 3 Aug 2023 00:27:37 -0500
Subject: [PATCH 09/15] task: Remove unnecessary isInModal

---
 src/pages/signin/SignInPage.js                 |  2 +-
 src/pages/signin/SignInPageLayout/index.js     |  5 +++--
 .../ValidateCodeForm/BaseValidateCodeForm.js   |  3 ---
 .../signin/ValidateCodeForm/index.android.js   | 18 ++++--------------
 src/pages/signin/ValidateCodeForm/index.js     | 18 ++++--------------
 5 files changed, 12 insertions(+), 34 deletions(-)

diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 33c018b2e776..dd6de810801c 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -155,7 +155,7 @@ function SignInPage({credentials, account, isInModal}) {
                     isVisible={shouldShowLoginForm}
                     blurOnSubmit={account.validated === false}
                 />
-                {shouldShowValidateCodeForm && <ValidateCodeForm isInModal={isInModal} />}
+                {shouldShowValidateCodeForm && <ValidateCodeForm />}
                 {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
                 {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
             </SignInPageLayout>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index b333f561fdb2..63cf389411ec 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -46,11 +46,12 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
+    const showSmallScreen = props.isSmallScreenWidth || props.isInModal;
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
 
-    if (props.isSmallScreenWidth || props.isInModal) {
+    if (showSmallScreen) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -72,7 +73,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!(props.isSmallScreenWidth || props.isInModal) ? (
+            {!(showSmallScreen) ? (
                 <View style={contentContainerStyles}>
                     <SignInPageContent
                         welcomeHeader={props.welcomeHeader}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index acd932da0ed5..3a6263e76178 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -28,8 +28,6 @@ import usePrevious from '../../../hooks/usePrevious';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
-    /** Whether the user is anonymous. True when opening the Sign-In Page from the modal */
-    isInModal: PropTypes.bool,
 
     /* Onyx Props */
 
@@ -67,7 +65,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isInModal: false,
     account: {},
     credentials: {},
     session: {
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 46b9d25521ec..7ff81357725d 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -1,21 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const defaultProps = {
-    isInModal: false,
-};
+const defaultProps = {};
 
-const propTypes = {
-    isInModal: PropTypes.bool,
-};
-function ValidateCodeForm(props) {
-    return (
-        <BaseValidateCodeForm
-            autoComplete="sms-otp"
-            isInModal={props.isInModal}
-        />
-    );
+const propTypes = {};
+function ValidateCodeForm() {
+    return <BaseValidateCodeForm autoComplete="sms-otp" />;
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 5ac66e8f6ac7..6b01c7d4dec2 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -1,21 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const defaultProps = {
-    isInModal: false,
-};
+const defaultProps = {};
 
-const propTypes = {
-    isInModal: PropTypes.bool,
-};
-function ValidateCodeForm(props) {
-    return (
-        <BaseValidateCodeForm
-            autoComplete="one-time-code"
-            isInModal={props.isInModal}
-        />
-    );
+const propTypes = {};
+function ValidateCodeForm() {
+    return <BaseValidateCodeForm autoComplete="one-time-code" />;
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';

From 78a564173674fc4d6a9c4062530fa5dd600792a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Thu, 3 Aug 2023 00:32:05 -0500
Subject: [PATCH 10/15] task: Run prettier on last state

---
 src/libs/Navigation/AppNavigator/AuthScreens.js           | 2 +-
 src/pages/signin/SignInPageLayout/index.js                | 2 +-
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 1 -
 src/styles/styles.js                                      | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 742c1a410379..116b22a0d991 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -47,7 +47,7 @@ Onyx.connect({
         }
 
         currentAccountID = val.accountID;
-        if(Navigation.isActiveRoute(ROUTES.SIGNINMODAL)) {
+        if (Navigation.isActiveRoute(ROUTES.SIGNINMODAL)) {
             Navigation.dismissModal();
         }
     },
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 63cf389411ec..9dee09dbaa25 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -73,7 +73,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!(showSmallScreen) ? (
+            {!showSmallScreen ? (
                 <View style={contentContainerStyles}>
                     <SignInPageContent
                         welcomeHeader={props.welcomeHeader}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 3a6263e76178..a68f99df6d24 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -28,7 +28,6 @@ import usePrevious from '../../../hooks/usePrevious';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
-
     /* Onyx Props */
 
     /** The details about the account that the user is signing in with */
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 26fc7d0d220b..c14a61174243 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1190,7 +1190,7 @@ const styles = {
     },
 
     signInModal: {
-        backgroundColor: themeColors.highlightBG
+        backgroundColor: themeColors.highlightBG,
     },
 
     changeExpensifyLoginLinkContainer: {

From 961366d083f23b36f46e036040d2564b9b1bd33c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Tue, 8 Aug 2023 13:46:21 -0500
Subject: [PATCH 11/15] task: Renames and improvements requested by C+

---
 src/ROUTES.js                                   |  2 +-
 src/libs/Navigation/AppNavigator/AuthScreens.js |  2 +-
 src/libs/Navigation/linkingConfig.js            |  2 +-
 src/libs/actions/Session/index.js               |  2 +-
 src/pages/signin/SignInModal.js                 |  2 +-
 src/pages/signin/SignInPage.js                  | 12 ++++++------
 src/pages/signin/SignInPageLayout/index.js      |  6 +++---
 src/styles/styles.js                            |  4 ----
 8 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 2759da1a1c44..dc8eafce0b23 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -187,5 +187,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
-    SIGNINMODAL: 'signinmodal',
+    SIGN_IN_MODAL: 'sign-in-modal',
 };
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 116b22a0d991..f71b1144c319 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -47,7 +47,7 @@ Onyx.connect({
         }
 
         currentAccountID = val.accountID;
-        if (Navigation.isActiveRoute(ROUTES.SIGNINMODAL)) {
+        if (Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
             Navigation.dismissModal();
         }
     },
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index ce3ca5378e1b..8eb26b51a9ba 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -340,7 +340,7 @@ export default {
                     },
                     SignIn: {
                         screens: {
-                            SignIn_Root: ROUTES.SIGNINMODAL,
+                            SignIn_Root: ROUTES.SIGN_IN_MODAL,
                         },
                     },
                 },
diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index 43d5910dcb01..be9436874a6a 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -95,7 +95,7 @@ function signOutAndRedirectToSignIn() {
         signOut();
         redirectToSignIn();
     } else {
-        Navigation.navigate(ROUTES.SIGNINMODAL);
+        Navigation.navigate(ROUTES.SIGN_IN_MODAL);
         Linking.getInitialURL().then((url) => {
             const reportID = ReportUtils.getReportIDFromLink(url);
             if (reportID) {
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 48a81c96e68e..948a90f4ce51 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -12,7 +12,7 @@ const defaultProps = {};
 function SignInModal() {
     return (
         <ScreenWrapper
-            style={[styles.signInModal]}
+            style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => {}}
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index dd6de810801c..f85b08af916f 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -83,7 +83,7 @@ function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin
 function SignInPage({credentials, account, isInModal}) {
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const showSmallScreen = isSmallScreenWidth || isInModal;
+    const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
     const safeAreaInsets = useSafeAreaInsets();
 
     useEffect(() => Performance.measureTTI(), []);
@@ -118,19 +118,19 @@ function SignInPage({credentials, account, isInModal}) {
             // replacing spaces with "hard spaces" to prevent breaking the number
             const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
             if (account.validated) {
-                welcomeHeader = showSmallScreen ? '' : translate('welcomeText.welcomeBack');
-                welcomeText = showSmallScreen
+                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack');
+                welcomeText = shouldShowSmallScreen
                     ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
             } else {
-                welcomeHeader = showSmallScreen ? '' : translate('welcomeText.welcome');
-                welcomeText = showSmallScreen
+                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome');
+                welcomeText = shouldShowSmallScreen
                     ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage) {
-        welcomeHeader = showSmallScreen ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
+        welcomeHeader = shouldShowSmallScreen ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage) {
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 9dee09dbaa25..d87d1096dd60 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -46,12 +46,12 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
-    const showSmallScreen = props.isSmallScreenWidth || props.isInModal;
+    const shouldShowSmallScreen = props.isSmallScreenWidth || props.isInModal;
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
 
-    if (showSmallScreen) {
+    if (shouldShowSmallScreen) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -73,7 +73,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!showSmallScreen ? (
+            {!shouldShowSmallScreen ? (
                 <View style={contentContainerStyles}>
                     <SignInPageContent
                         welcomeHeader={props.welcomeHeader}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c14a61174243..b490baef72f2 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1189,10 +1189,6 @@ const styles = {
         width: 300,
     },
 
-    signInModal: {
-        backgroundColor: themeColors.highlightBG,
-    },
-
     changeExpensifyLoginLinkContainer: {
         flexDirection: 'row',
         flexWrap: 'wrap',

From fd26e252267bc08126695b49b215da9a0b6e3938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 9 Aug 2023 15:30:44 -0500
Subject: [PATCH 12/15] task: Dismiss modal if user is already logged in and
 access via url

---
 src/pages/signin/SignInModal.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 948a90f4ce51..122e5cf57778 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -4,12 +4,17 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
+import * as Session from '../../libs/actions/Session';
 
 const propTypes = {};
 
 const defaultProps = {};
 
 function SignInModal() {
+    if (!Session.isAnonymousUser()) {
+        // Sign in in RHP is only for anonymous users
+        Navigation.dismissModal();
+    }
     return (
         <ScreenWrapper
             style={[styles.highlightBG]}

From 83652fd3d460de2f47302adaef3fc96cab1f1f56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Wed, 9 Aug 2023 20:23:33 -0500
Subject: [PATCH 13/15] task: Make sure refresh and notifications work

---
 src/libs/Navigation/AppNavigator/AuthScreens.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index f71b1144c319..4197dae00329 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -48,7 +48,9 @@ Onyx.connect({
 
         currentAccountID = val.accountID;
         if (Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
+            // This means sign in in RHP was successful, so we can dismiss the modal and subscribe to user events
             Navigation.dismissModal();
+            User.subscribeToUserEvents();
         }
     },
 });

From a77cdb30450efb1d98cb7f425128da253aa83aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Tue, 15 Aug 2023 14:10:45 -0500
Subject: [PATCH 14/15] tasks: NAB improvements and fix avoid opening modal if
 nav is not ready

---
 src/pages/signin/SignInModal.js            | 5 +++--
 src/pages/signin/SignInPage.js             | 1 +
 src/pages/signin/SignInPageLayout/index.js | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 122e5cf57778..0cd566a47327 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -13,14 +13,15 @@ const defaultProps = {};
 function SignInModal() {
     if (!Session.isAnonymousUser()) {
         // Sign in in RHP is only for anonymous users
-        Navigation.dismissModal();
+        Navigation.isNavigationReady().then(() => {
+            Navigation.dismissModal();
+        });
     }
     return (
         <ScreenWrapper
             style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() => {}}
         >
             <HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
             <SignInPage isInModal />
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index f85b08af916f..f30fde05bb45 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -46,6 +46,7 @@ const propTypes = {
         validateCode: PropTypes.string,
     }),
 
+    /** Whether or not the sign in page is being rendered in the RHP modal */
     isInModal: PropTypes.bool,
 };
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index d87d1096dd60..88037fcaede7 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -35,6 +35,7 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
+    /** Whether or not the sign in page is being rendered in the RHP modal */
     isInModal: PropTypes.bool.isRequired,
 
     ...windowDimensionsPropTypes,

From f346c401684f7554cceef090ecb71450a810d690 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ord=C3=B3=C3=B1ez?= <dloz1996@gmail.com>
Date: Thu, 17 Aug 2023 17:41:16 -0500
Subject: [PATCH 15/15] Task: Missing space after solving conflicts

---
 src/pages/signin/SignInPageLayout/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 503dc587637c..72008d64c3c6 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -37,7 +37,7 @@ const propTypes = {
 
     /** Whether or not the sign in page is being rendered in the RHP modal */
     isInModal: PropTypes.bool.isRequired,
-  
+
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 
