From 495f8e3b730de862f5ae659588ffa5c2a7ae1780 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Mon, 24 Jun 2024 12:18:06 +0300
Subject: [PATCH 01/19] Create ValidateAccountMessage file and declare a
 function

---
 src/components/ValidateAccountMessage.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/ValidateAccountMessage.tsx

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
new file mode 100644
index 000000000000..e69de29bb2d1

From 8071028df1538ffba30681c628dac748639aaf69 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Mon, 24 Jun 2024 12:32:42 +0300
Subject: [PATCH 02/19] Import utils and components required for the component

---
 src/components/ValidateAccountMessage.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index e69de29bb2d1..4f70cadbc040 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import * as Session from '@userActions/Session';
+function ValidateAccountMessage () {
+
+}
+
+export default ValidateAccountMessage;
\ No newline at end of file

From f3c883b48b2f4375b4b410dd7645e9b9da135f20 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Mon, 24 Jun 2024 12:34:32 +0300
Subject: [PATCH 03/19] Intialize theme, styles, and transalte hooks

---
 src/components/ValidateAccountMessage.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index 4f70cadbc040..d2037a256659 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -11,6 +11,10 @@ import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 function ValidateAccountMessage () {
 
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
 }
 
 export default ValidateAccountMessage;
\ No newline at end of file

From 99fc4ec17881bc798f656c4111fcb1ba63a3d004 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Mon, 24 Jun 2024 12:57:26 +0300
Subject: [PATCH 04/19] Add BankAccountStep Error message style with SignOut
 functionality

---
 src/components/ValidateAccountMessage.tsx | 33 +++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index d2037a256659..d95d6d2c4596 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -9,12 +9,41 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
-function ValidateAccountMessage () {
 
+function ValidateAccountMessage() {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
+            <Icon
+                src={Expensicons.Exclamation}
+                fill={theme.danger}
+            />
+
+            <Text style={[styles.mutedTextLabel, styles.ml4, styles.flex1]}>
+                {translate('bankAccount.validateAccountError.phrase1')}
+                <TextLink
+                    fontSize={variables.fontSizeLabel}
+                    onPress={() => Session.signOutAndRedirectToSignIn()}
+                >
+                    {translate('bankAccount.validateAccountError.phrase2')}
+                </TextLink>
+                {translate('bankAccount.validateAccountError.phrase3')}
+                <TextLink
+                    fontSize={variables.fontSizeLabel}
+                    onPress={() => {
+                        // const login = loginList?.[loginNames?.[0]] ?? {};
+                        // Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
+                    }}
+                >
+                    {translate('bankAccount.validateAccountError.phrase4')}
+                </TextLink>
+                .
+            </Text>
+        </View>
+    );
 }
 
-export default ValidateAccountMessage;
\ No newline at end of file
+export default ValidateAccountMessage;

From ffb7bdae4a7f6860bd8bded1553c1c23f8458789 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 18:41:49 +0300
Subject: [PATCH 05/19] Add user type BaseTwoFactorAuthFormOnyxProps

---
 .../settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
index baac250a3d66..977dbc2c8ae6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -1,9 +1,10 @@
 import type {ForwardedRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import type {Account} from '@src/types/onyx';
+import type {Account, User} from '@src/types/onyx';
 
 type BaseTwoFactorAuthFormOnyxProps = {
     account: OnyxEntry<Account>;
+    user: OnyxEntry<User>;
 };
 
 type BaseTwoFactorAuthFormRef = {

From 32853b595e155181974f3c6c2af431fa94767758 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 18:44:09 +0300
Subject: [PATCH 06/19] Fetch user from Onyx

---
 .../settings/Security/TwoFactorAuth/Steps/CodesStep.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 4d46f18c15ea..d551006528cc 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -27,7 +27,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 type CodesStepProps = BaseTwoFactorAuthFormOnyxProps & BackToParams;
 
-function CodesStep({account, backTo}: CodesStepProps) {
+function CodesStep({account, user, backTo}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -151,4 +151,7 @@ CodesStep.displayName = 'CodesStep';
 
 export default withOnyx<CodesStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
+    user: {
+        key: ONYXKEYS.USER,
+    },
 })(CodesStep);

From bc5eb7dec68950985f3000b440f33486395ae55a Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 19:09:15 +0300
Subject: [PATCH 07/19] When user is not validated, hide 2FA section except
 header and next button

---
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 129 +++++++++---------
 1 file changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index d551006528cc..c6fc4d7701ea 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -33,6 +33,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
     const {translate} = useLocalize();
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const [error, setError] = useState('');
+    const isUserValidated = user?.validated;
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -57,70 +58,72 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
             onBackButtonPress={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Section
-                    title={translate('twoFactorAuth.keepCodesSafe')}
-                    icon={Illustrations.ShieldYellow}
-                    containerStyles={[styles.twoFactorAuthSection]}
-                    iconContainerStyles={[styles.ml6]}
-                >
-                    <View style={styles.mv3}>
-                        <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
-                    </View>
-                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
-                        {account?.isLoading ? (
-                            <View style={styles.twoFactorLoadingContainer}>
-                                <ActivityIndicator color={theme.spinner} />
-                            </View>
-                        ) : (
-                            <>
-                                <View style={styles.twoFactorAuthCodesContainer}>
-                                    {!!account?.recoveryCodes &&
-                                        account?.recoveryCodes?.split(', ').map((code) => (
-                                            <Text
-                                                style={styles.twoFactorAuthCode}
-                                                key={code}
-                                            >
-                                                {code}
-                                            </Text>
-                                        ))}
+                {isUserValidated && (
+                    <Section
+                        title={translate('twoFactorAuth.keepCodesSafe')}
+                        icon={Illustrations.ShieldYellow}
+                        containerStyles={[styles.twoFactorAuthSection]}
+                        iconContainerStyles={[styles.ml6]}
+                    >
+                        <View style={styles.mv3}>
+                            <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
+                        </View>
+                        <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
+                            {account?.isLoading ? (
+                                <View style={styles.twoFactorLoadingContainer}>
+                                    <ActivityIndicator color={theme.spinner} />
                                 </View>
-                                <View style={styles.twoFactorAuthCodesButtonsContainer}>
-                                    <PressableWithDelayToggle
-                                        text={translate('twoFactorAuth.copy')}
-                                        textChecked={translate('common.copied')}
-                                        icon={Expensicons.Copy}
-                                        inline={false}
-                                        onPress={() => {
-                                            Clipboard.setString(account?.recoveryCodes ?? '');
-                                            setError('');
-                                            TwoFactorAuthActions.setCodesAreCopied();
-                                        }}
-                                        styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
-                                        textStyles={[styles.buttonMediumText]}
-                                        accessible={false}
-                                        tooltipText=""
-                                        tooltipTextChecked=""
-                                    />
-                                    <PressableWithDelayToggle
-                                        text={translate('common.download')}
-                                        icon={Expensicons.Download}
-                                        onPress={() => {
-                                            localFileDownload('two-factor-auth-codes', account?.recoveryCodes ?? '');
-                                            setError('');
-                                            TwoFactorAuthActions.setCodesAreCopied();
-                                        }}
-                                        inline={false}
-                                        styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
-                                        textStyles={[styles.buttonMediumText]}
-                                        accessible={false}
-                                        tooltipText=""
-                                        tooltipTextChecked=""
-                                    />
-                                </View>
-                            </>
-                        )}
-                    </View>
-                </Section>
+                            ) : (
+                                <>
+                                    <View style={styles.twoFactorAuthCodesContainer}>
+                                        {!!account?.recoveryCodes &&
+                                            account?.recoveryCodes?.split(', ').map((code) => (
+                                                <Text
+                                                    style={styles.twoFactorAuthCode}
+                                                    key={code}
+                                                >
+                                                    {code}
+                                                </Text>
+                                            ))}
+                                    </View>
+                                    <View style={styles.twoFactorAuthCodesButtonsContainer}>
+                                        <PressableWithDelayToggle
+                                            text={translate('twoFactorAuth.copy')}
+                                            textChecked={translate('common.copied')}
+                                            icon={Expensicons.Copy}
+                                            inline={false}
+                                            onPress={() => {
+                                                Clipboard.setString(account?.recoveryCodes ?? '');
+                                                setError('');
+                                                TwoFactorAuthActions.setCodesAreCopied();
+                                            }}
+                                            styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
+                                            textStyles={[styles.buttonMediumText]}
+                                            accessible={false}
+                                            tooltipText=""
+                                            tooltipTextChecked=""
+                                        />
+                                        <PressableWithDelayToggle
+                                            text={translate('common.download')}
+                                            icon={Expensicons.Download}
+                                            onPress={() => {
+                                                localFileDownload('two-factor-auth-codes', account?.recoveryCodes ?? '');
+                                                setError('');
+                                                TwoFactorAuthActions.setCodesAreCopied();
+                                            }}
+                                            inline={false}
+                                            styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
+                                            textStyles={[styles.buttonMediumText]}
+                                            accessible={false}
+                                            tooltipText=""
+                                            tooltipTextChecked=""
+                                        />
+                                    </View>
+                                </>
+                            )}
+                        </View>
+                    </Section>
+                )}
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     {!!error && (
                         <FormHelpMessage

From 2d16e0422292d69a4caa3165dee3ebbae32e8d4f Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 19:13:20 +0300
Subject: [PATCH 08/19] Disable Next button when user is not validated

---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index c6fc4d7701ea..f9e7ddde84b3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -135,6 +135,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
                     <Button
                         success
                         large
+                        isDisabled={!isUserValidated}
                         text={translate('common.next')}
                         onPress={() => {
                             if (!account?.codesAreCopied) {

From 4bb103d316abdec54d7eeb181a59d2b18bc39eaa Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 19:23:38 +0300
Subject: [PATCH 09/19] Display validate your account first message when user
 is not validated

---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index f9e7ddde84b3..564be8350d42 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -10,6 +10,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import ValidateAccountMessage from '@components/ValidateAccountMessage';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
@@ -124,6 +125,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
                         </View>
                     </Section>
                 )}
+                {!isUserValidated && <ValidateAccountMessage />}
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     {!!error && (
                         <FormHelpMessage

From 871f63293cc3b98c860cb4fd81d102a6f0632fb6 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 20:00:10 +0300
Subject: [PATCH 10/19] Navigate to contact methods section when user clicks
 verify your account here

---
 src/components/ValidateAccountMessage.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index d95d6d2c4596..54c05fe6255f 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
@@ -7,13 +8,18 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
 function ValidateAccountMessage() {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+    const loginNames = Object.keys(loginList ?? {});
 
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
@@ -34,8 +40,8 @@ function ValidateAccountMessage() {
                 <TextLink
                     fontSize={variables.fontSizeLabel}
                     onPress={() => {
-                        // const login = loginList?.[loginNames?.[0]] ?? {};
-                        // Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
+                        const login = loginList?.[loginNames?.[0]] ?? {};
+                        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
                     }}
                 >
                     {translate('bankAccount.validateAccountError.phrase4')}

From 24883fbc208070604133a8266963520d0bce55c3 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 20:20:14 +0300
Subject: [PATCH 11/19] Make EnableTwoFactorAuth request to prevent stale empty
 auth page on back navigation after validating account

---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 564be8350d42..c9e21c8cb384 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -45,7 +45,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
         }
         Session.toggleTwoFactorAuth(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps -- We want to run this when component mounts
-    }, []);
+    }, [isUserValidated]);
 
     return (
         <StepWrapper

From 3ae577e169fe8c1c1cadfcf93917d9c103657fc0 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Sat, 29 Jun 2024 20:36:29 +0300
Subject: [PATCH 12/19] Prevent making EnableTwoFactorAuth request when user is
 not validated

---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index c9e21c8cb384..58d962e4cdde 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -40,7 +40,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
 
     useEffect(() => {
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        if (account?.requiresTwoFactorAuth || account?.recoveryCodes) {
+        if (account?.requiresTwoFactorAuth || account?.recoveryCodes || !isUserValidated) {
             return;
         }
         Session.toggleTwoFactorAuth(true);

From dfee1db8276c9b8f9118313d774a72cd4f312cf7 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Tue, 2 Jul 2024 10:38:30 +0300
Subject: [PATCH 13/19] Make user type optional to fix typesctipt error

---
 .../settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
index 977dbc2c8ae6..97510a2a3a29 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -4,7 +4,7 @@ import type {Account, User} from '@src/types/onyx';
 
 type BaseTwoFactorAuthFormOnyxProps = {
     account: OnyxEntry<Account>;
-    user: OnyxEntry<User>;
+    user?: OnyxEntry<User>;
 };
 
 type BaseTwoFactorAuthFormRef = {

From eaeceee4802b70fa39a9ee6a2e1ec0ac48b9be0a Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Wed, 24 Jul 2024 21:02:13 +0300
Subject: [PATCH 14/19] fix navigation error when navigating back from contact
 methods page to security page

---
 .../createCustomStackNavigator/CustomRouter.ts   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
index 5b3cefb63a2d..f01b0c461d26 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
@@ -15,7 +15,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type {ResponsiveStackNavigatorRouterOptions} from './types';
 
-function insertRootRoute(state: State<RootStackParamList>, routeToInsert: NavigationPartialRoute) {
+function insertRootRoute(state: State<RootStackParamList>, routeToInsert: NavigationPartialRoute, isNarrowLayout: boolean) {
     const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
     const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);
 
@@ -29,9 +29,11 @@ function insertRootRoute(state: State<RootStackParamList>, routeToInsert: Naviga
     // noinspection JSConstantReassignment
     state.index = state.routes.length - 1; // eslint-disable-line
 
-    // @ts-expect-error Updating read only property
-    // noinspection JSConstantReassignment
-    state.stale = true; // eslint-disable-line
+    // If there is no central pane route in the state, we need to mark the state as stale.
+    if (nonModalRoutes.find((route) => isCentralPaneName(route.name)) && isNarrowLayout) {
+        // @ts-expect-error Updating read only property
+        state.stale = true; // eslint-disable-line
+    }
 }
 
 function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
@@ -66,7 +68,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
 
         // If templateFullScreenRoute is defined, and full screen route is not in the state, we need to add it.
         if (templateFullScreenRoute) {
-            insertRootRoute(state, templateFullScreenRoute);
+            insertRootRoute(state, templateFullScreenRoute, isNarrowLayout);
             return;
         }
 
@@ -83,7 +85,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
 
         // If there is no topmostCentralPaneRoute in the state and template state has one, we need to add it.
         if (!topmostCentralPaneRoute) {
-            insertRootRoute(state, templateCentralPaneRoute);
+            insertRootRoute(state, templateCentralPaneRoute, isNarrowLayout);
             return;
         }
 
@@ -95,7 +97,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
             if (templateCentralPaneRouteExtracted.name === SCREENS.REPORT) {
                 return;
             }
-            insertRootRoute(state, templateCentralPaneRoute);
+            insertRootRoute(state, templateCentralPaneRoute, isNarrowLayout);
         }
     }
 }

From 71b0380e2271306f82b497a027fdce7736c360d0 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Fri, 26 Jul 2024 19:02:51 +0300
Subject: [PATCH 15/19] Revert "fix navigation error when navigating back from
 contact methods page to security page"

This reverts commit eaeceee4802b70fa39a9ee6a2e1ec0ac48b9be0a.
---
 .../createCustomStackNavigator/CustomRouter.ts   | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
index f01b0c461d26..5b3cefb63a2d 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
@@ -15,7 +15,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type {ResponsiveStackNavigatorRouterOptions} from './types';
 
-function insertRootRoute(state: State<RootStackParamList>, routeToInsert: NavigationPartialRoute, isNarrowLayout: boolean) {
+function insertRootRoute(state: State<RootStackParamList>, routeToInsert: NavigationPartialRoute) {
     const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
     const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);
 
@@ -29,11 +29,9 @@ function insertRootRoute(state: State<RootStackParamList>, routeToInsert: Naviga
     // noinspection JSConstantReassignment
     state.index = state.routes.length - 1; // eslint-disable-line
 
-    // If there is no central pane route in the state, we need to mark the state as stale.
-    if (nonModalRoutes.find((route) => isCentralPaneName(route.name)) && isNarrowLayout) {
-        // @ts-expect-error Updating read only property
-        state.stale = true; // eslint-disable-line
-    }
+    // @ts-expect-error Updating read only property
+    // noinspection JSConstantReassignment
+    state.stale = true; // eslint-disable-line
 }
 
 function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
@@ -68,7 +66,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
 
         // If templateFullScreenRoute is defined, and full screen route is not in the state, we need to add it.
         if (templateFullScreenRoute) {
-            insertRootRoute(state, templateFullScreenRoute, isNarrowLayout);
+            insertRootRoute(state, templateFullScreenRoute);
             return;
         }
 
@@ -85,7 +83,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
 
         // If there is no topmostCentralPaneRoute in the state and template state has one, we need to add it.
         if (!topmostCentralPaneRoute) {
-            insertRootRoute(state, templateCentralPaneRoute, isNarrowLayout);
+            insertRootRoute(state, templateCentralPaneRoute);
             return;
         }
 
@@ -97,7 +95,7 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
             if (templateCentralPaneRouteExtracted.name === SCREENS.REPORT) {
                 return;
             }
-            insertRootRoute(state, templateCentralPaneRoute, isNarrowLayout);
+            insertRootRoute(state, templateCentralPaneRoute);
         }
     }
 }

From defc959d4d3dfe94b7c283d3565ee7ecb1346a44 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Thu, 8 Aug 2024 17:57:47 +0300
Subject: [PATCH 16/19] Add optional backTo param to contact methods

---
 src/ROUTES.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 9650d323d676..a57e161797b6 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -199,7 +199,7 @@ const ROUTES = {
     },
     SETTINGS_CONTACT_METHOD_DETAILS: {
         route: 'settings/profile/contact-methods/:contactMethod/details',
-        getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details` as const,
+        getRoute: (contactMethod: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`, backTo),
     },
     SETTINGS_NEW_CONTACT_METHOD: {
         route: 'settings/profile/contact-methods/new',

From f787b1c5e1f1965719f427740bfc26e28cee1300 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Thu, 8 Aug 2024 18:00:36 +0300
Subject: [PATCH 17/19] fix rhp navigation

---
 .../Navigation/linkingConfig/getAdaptedStateFromPath.ts     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
index 594f76eee2fe..fe3f7b5d8013 100644
--- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
+++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
@@ -121,11 +121,7 @@ function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): Navigat
 
             // If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen.
             if (rhpNavigator && rhpNavigator.state) {
-                const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
-
-                if (isRHPinState) {
-                    return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
-                }
+                return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
             }
 
             // If we know that backTo targets the root route (central pane or full screen) we want to use it.

From 8bfd7dc318b2ad48e3c3ba35b7ccba0058f3ef37 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Thu, 8 Aug 2024 19:20:06 +0300
Subject: [PATCH 18/19] fix navigation issue from security page

---
 src/components/ValidateAccountMessage.tsx           | 13 +++++++------
 .../Security/TwoFactorAuth/Steps/CodesStep.tsx      |  9 +++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index 54c05fe6255f..399b18515486 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import Text from '@components/Text';
-import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -13,8 +9,13 @@ import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import TextLink from './TextLink';
 
-function ValidateAccountMessage() {
+type ValidateAccountMessageProps = {backTo: string | undefined};
+function ValidateAccountMessage({backTo}: ValidateAccountMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -41,7 +42,7 @@ function ValidateAccountMessage() {
                     fontSize={variables.fontSizeLabel}
                     onPress={() => {
                         const login = loginList?.[loginNames?.[0]] ?? {};
-                        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
+                        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0], backTo));
                     }}
                 >
                     {translate('bankAccount.validateAccountError.phrase4')}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index ae2df8d4630f..dd3d3b87a12f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -1,3 +1,5 @@
+import type {RouteProp} from '@react-navigation/native';
+import {useRoute} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -17,7 +19,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
-import type {BackToParams} from '@libs/Navigation/types';
+import type {BackToParams, SettingsNavigatorParamList} from '@libs/Navigation/types';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import type {BaseTwoFactorAuthFormOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types';
@@ -25,6 +27,8 @@ import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
 
 type CodesStepProps = BaseTwoFactorAuthFormOnyxProps & BackToParams;
 
@@ -35,6 +39,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const [error, setError] = useState('');
     const isUserValidated = user?.validated;
+    const route = useRoute<RouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.TWO_FACTOR_AUTH>>();
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -125,7 +130,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) {
                         </View>
                     </Section>
                 )}
-                {!isUserValidated && <ValidateAccountMessage />}
+                {!isUserValidated && <ValidateAccountMessage backTo={ROUTES.SETTINGS_2FA.getRoute(route?.params?.backTo)} />}
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     {!!error && (
                         <FormHelpMessage

From 3612ea6bde93af0e8059b50976775cd77d078046 Mon Sep 17 00:00:00 2001
From: Dysto coder <dystovskycoder@gmail.com>
Date: Thu, 8 Aug 2024 19:38:37 +0300
Subject: [PATCH 19/19] Use ValidateAccountMessage on BankAccountStep

---
 src/components/ValidateAccountMessage.tsx     |  2 +-
 .../ReimbursementAccount/BankAccountStep.tsx  | 42 +------------------
 2 files changed, 3 insertions(+), 41 deletions(-)

diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx
index 399b18515486..be43c2985961 100644
--- a/src/components/ValidateAccountMessage.tsx
+++ b/src/components/ValidateAccountMessage.tsx
@@ -14,7 +14,7 @@ import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
 import TextLink from './TextLink';
 
-type ValidateAccountMessageProps = {backTo: string | undefined};
+type ValidateAccountMessageProps = {backTo?: string | undefined};
 function ValidateAccountMessage({backTo}: ValidateAccountMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index 689b646f465a..69e605878725 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -14,16 +14,14 @@ import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import ValidateAccountMessage from '@components/ValidateAccountMessage';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
-import Navigation from '@libs/Navigation/Navigation';
-import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
-import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -38,9 +36,6 @@ type BankAccountStepOnyxProps = {
 
     /** If the plaid button has been disabled */
     isPlaidDisabled: OnyxEntry<boolean>;
-
-    /** Login list for the user that is signed in */
-    loginList: OnyxEntry<OnyxTypes.LoginList>;
 };
 
 type BankAccountStepProps = BankAccountStepOnyxProps & {
@@ -73,7 +68,6 @@ function BankAccountStep({
     receivedRedirectURI,
     reimbursementAccount,
     onBackButtonPress,
-    loginList,
     isPlaidDisabled = false,
 }: BankAccountStepProps) {
     const theme = useTheme();
@@ -86,7 +80,6 @@ function BankAccountStep({
     }
     const plaidDesktopMessage = getPlaidDesktopMessage();
     const bankAccountRoute = `${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
-    const loginNames = Object.keys(loginList ?? {});
 
     const removeExistingBankAccountDetails = () => {
         const bankAccountData: Partial<ReimbursementAccountForm> = {
@@ -168,35 +161,7 @@ function BankAccountStep({
                             />
                         </View>
                     </Section>
-                    {!user?.validated && (
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
-                            <Icon
-                                src={Expensicons.Exclamation}
-                                fill={theme.danger}
-                            />
-
-                            <Text style={[styles.mutedTextLabel, styles.ml4, styles.flex1]}>
-                                {translate('bankAccount.validateAccountError.phrase1')}
-                                <TextLink
-                                    fontSize={variables.fontSizeLabel}
-                                    onPress={() => Session.signOutAndRedirectToSignIn()}
-                                >
-                                    {translate('bankAccount.validateAccountError.phrase2')}
-                                </TextLink>
-                                {translate('bankAccount.validateAccountError.phrase3')}
-                                <TextLink
-                                    fontSize={variables.fontSizeLabel}
-                                    onPress={() => {
-                                        const login = loginList?.[loginNames?.[0]] ?? {};
-                                        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
-                                    }}
-                                >
-                                    {translate('bankAccount.validateAccountError.phrase4')}
-                                </TextLink>
-                                .
-                            </Text>
-                        </View>
-                    )}
+                    {!user?.validated && <ValidateAccountMessage />}
                     <View style={[styles.mv0, styles.mh5, styles.flexRow, styles.justifyContentBetween]}>
                         <TextLink href={CONST.PRIVACY_URL}>{translate('common.privacy')}</TextLink>
                         <PressableWithoutFeedback
@@ -230,7 +195,4 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
     isPlaidDisabled: {
         key: ONYXKEYS.IS_PLAID_DISABLED,
     },
-    loginList: {
-        key: ONYXKEYS.LOGIN_LIST,
-    },
 })(BankAccountStep);