From 498d5c74b3c15a4d473496a7433972e196c0b5c4 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 14 Jul 2023 18:01:01 +0200
Subject: [PATCH 01/23] refactor: wip - 2fa steps

---
 .../AppNavigator/ModalStackNavigators.js      |  59 +++---
 .../settings/Security/SecuritySettingsPage.js |   9 +-
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  |  27 +++
 .../Security/TwoFactorAuth/Steps/CodesStep.js | 143 ++++++++++++++
 .../TwoFactorAuth/Steps/DisableStep.js        |  49 +++++
 .../TwoFactorAuth/Steps/IsEnabledStep.js      |  69 +++++++
 .../TwoFactorAuth/Steps/SuccessStep.js        |  35 ++++
 .../TwoFactorAuth/Steps/VerifyStep.js         | 176 ++++++++++++++++++
 .../TwoFactorAuth/TwoFactorAuthPage.js        |  49 +++++
 9 files changed, 579 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index e12995db48ce..f0ba70f03ee7 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -620,41 +620,42 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'GetAssistance',
     },
+    // TODO: remove unnecessary pages
+    // {
+    //     getComponent: () => {
+    //         const SettingsTwoFactorAuthIsEnabled = require('../../../pages/settings/Security/TwoFactorAuth/IsEnabledPage').default;
+    //         return SettingsTwoFactorAuthIsEnabled;
+    //     },
+    //     name: 'Settings_TwoFactorAuthIsEnabled',
+    // },
+    // {
+    //     getComponent: () => {
+    //         const SettingsTwoFactorAuthDisable = require('../../../pages/settings/Security/TwoFactorAuth/DisablePage').default;
+    //         return SettingsTwoFactorAuthDisable;
+    //     },
+    //     name: 'Settings_TwoFactorAuthDisable',
+    // },
     {
         getComponent: () => {
-            const SettingsTwoFactorAuthIsEnabled = require('../../../pages/settings/Security/TwoFactorAuth/IsEnabledPage').default;
-            return SettingsTwoFactorAuthIsEnabled;
-        },
-        name: 'Settings_TwoFactorAuthIsEnabled',
-    },
-    {
-        getComponent: () => {
-            const SettingsTwoFactorAuthDisable = require('../../../pages/settings/Security/TwoFactorAuth/DisablePage').default;
-            return SettingsTwoFactorAuthDisable;
-        },
-        name: 'Settings_TwoFactorAuthDisable',
-    },
-    {
-        getComponent: () => {
-            const SettingsTwoFactorAuthCodes = require('../../../pages/settings/Security/TwoFactorAuth/CodesPage').default;
+            const SettingsTwoFactorAuthCodes = require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default;
             return SettingsTwoFactorAuthCodes;
         },
         name: 'Settings_TwoFactorAuthCodes',
     },
-    {
-        getComponent: () => {
-            const SettingsTwoFactorAuthVerify = require('../../../pages/settings/Security/TwoFactorAuth/VerifyPage').default;
-            return SettingsTwoFactorAuthVerify;
-        },
-        name: 'Settings_TwoFactorAuthVerify',
-    },
-    {
-        getComponent: () => {
-            const SettingsTwoFactorAuthSuccess = require('../../../pages/settings/Security/TwoFactorAuth/SuccessPage').default;
-            return SettingsTwoFactorAuthSuccess;
-        },
-        name: 'Settings_TwoFactorAuthSuccess',
-    },
+    // {
+    //     getComponent: () => {
+    //         const SettingsTwoFactorAuthVerify = require('../../../pages/settings/Security/TwoFactorAuth/VerifyPage').default;
+    //         return SettingsTwoFactorAuthVerify;
+    //     },
+    //     name: 'Settings_TwoFactorAuthVerify',
+    // },
+    // {
+    //     getComponent: () => {
+    //         const SettingsTwoFactorAuthSuccess = require('../../../pages/settings/Security/TwoFactorAuth/SuccessPage').default;
+    //         return SettingsTwoFactorAuthSuccess;
+    //     },
+    //     name: 'Settings_TwoFactorAuthSuccess',
+    // },
 ]);
 
 const EnablePaymentsStackNavigator = createModalStackNavigator([
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index f86dee56d2c5..c4c229b6cdd3 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -36,14 +36,7 @@ function SecuritySettingsPage(props) {
         {
             translationKey: 'twoFactorAuth.headerTitle',
             icon: Expensicons.Shield,
-            action: () => {
-                if (props.account.requiresTwoFactorAuth) {
-                    Navigation.navigate(ROUTES.SETTINGS_2FA_IS_ENABLED);
-                } else {
-                    Session.toggleTwoFactorAuth(true);
-                    Navigation.navigate(ROUTES.SETTINGS_2FA_CODES);
-                }
-            },
+            action: () => Navigation.navigate(ROUTES.SETTINGS_2FA_CODES)
         },
         {
             translationKey: 'passwordPage.changePassword',
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
new file mode 100644
index 000000000000..ba23a6f5f2cd
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton';
+import ScreenWrapper from '../../../../../components/ScreenWrapper';
+import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
+import Navigation from "../../../../../libs/Navigation/Navigation";
+import ROUTES from "../../../../../ROUTES";
+
+const defaultProps = {};
+
+function StepWrapper({title, stepCounter, onBackButtonPress, children}) {
+    const navigateBackToSettings = () => Navigation.goBack(ROUTES.SETTINGS_SECURITY)
+    return (
+        <ScreenWrapper shouldShowOfflineIndicator={false}>
+            <HeaderWithBackButton
+                title={title}
+                shouldShowStepCounter={!!stepCounter}
+                stepCounter={stepCounter}
+                onBackButtonPress={onBackButtonPress || navigateBackToSettings}
+            />
+            <FullPageOfflineBlockingView>
+                {children}
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
+
+export default StepWrapper;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
new file mode 100644
index 000000000000..219f9826f9dc
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -0,0 +1,143 @@
+import React, {useEffect, useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {ActivityIndicator, View} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import Navigation from '../../../../../libs/Navigation/Navigation';
+import * as Expensicons from '../../../../../components/Icon/Expensicons';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import compose from '../../../../../libs/compose';
+import ROUTES from '../../../../../ROUTES';
+import * as Illustrations from '../../../../../components/Icon/Illustrations';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../../components/withWindowDimensions';
+import styles from '../../../../../styles/styles';
+import FixedFooter from '../../../../../components/FixedFooter';
+import Button from '../../../../../components/Button';
+import PressableWithDelayToggle from '../../../../../components/Pressable/PressableWithDelayToggle';
+import Text from '../../../../../components/Text';
+import Section from '../../../../../components/Section';
+import ONYXKEYS from '../../../../../ONYXKEYS';
+import Clipboard from '../../../../../libs/Clipboard';
+import themeColors from '../../../../../styles/themes/default';
+import localFileDownload from '../../../../../libs/localFileDownload';
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
+import * as Session from "../../../../../libs/actions/Session";
+import StepWrapper from "../StepWrapper/StepWrapper";
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    account: PropTypes.shape({
+        /** User recovery codes for setting up 2-FA */
+        recoveryCodes: PropTypes.string,
+
+        /** If recovery codes are loading */
+        isLoading: PropTypes.bool,
+    }),
+};
+
+const defaultProps = {
+    account: {
+        recoveryCodes: '',
+    },
+};
+
+function CodesStep({translate, setStep, account, ...props}) {
+    const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
+
+    // Here, this eslint rule will make the unmount effect unreadable, possibly confusing with mount
+    // eslint-disable-next-line arrow-body-style
+    useEffect(() => {
+        Session.toggleTwoFactorAuth(true);
+        // return () => {
+        //     TwoFactorAuthActions.clearTwoFactorAuthData();
+        // };
+    }, []);
+
+    return (
+        <StepWrapper
+            title={translate('twoFactorAuth.headerTitle')}
+            stepCounter={{
+                step: 1,
+                text: translate('twoFactorAuth.stepCodes'),
+            }}>
+            <ScrollView>
+                <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(props)}>
+                        {account.isLoading ? (
+                            <View style={styles.twoFactorLoadingContainer}>
+                                <ActivityIndicator color={themeColors.spinner}/>
+                            </View>
+                        ) : (
+                            <>
+                                <View style={styles.twoFactorAuthCodesContainer}>
+                                    {Boolean(account.recoveryCodes) &&
+                                        _.map(account.recoveryCodes.split(', '), (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);
+                                            setIsNextButtonDisabled(false);
+                                        }}
+                                        styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
+                                        textStyles={[styles.buttonMediumText]}
+                                    />
+                                    <PressableWithDelayToggle
+                                        text={translate('common.download')}
+                                        icon={Expensicons.Download}
+                                        onPress={() => {
+                                            localFileDownload('two-factor-auth-codes', account.recoveryCodes);
+                                            setIsNextButtonDisabled(false);
+                                        }}
+                                        inline={false}
+                                        styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
+                                        textStyles={[styles.buttonMediumText]}
+                                    />
+                                </View>
+                            </>
+                        )}
+                    </View>
+                </Section>
+            </ScrollView>
+            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                <Button
+                    success
+                    text={translate('common.next')}
+                    onPress={() => setStep(1)}
+                    isDisabled={isNextButtonDisabled}
+                />
+            </FixedFooter>
+        </StepWrapper>
+    );
+}
+
+CodesStep.propTypes = propTypes;
+CodesStep.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+    withOnyx({
+        account: {key: ONYXKEYS.ACCOUNT},
+    }),
+)(CodesStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
new file mode 100644
index 000000000000..40fb1b3fd27f
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
@@ -0,0 +1,49 @@
+import React, {useEffect} from 'react';
+import Navigation from '../../../../../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import ROUTES from '../../../../../ROUTES';
+import * as Illustrations from '../../../../../components/Icon/Illustrations';
+import styles from '../../../../../styles/styles';
+import BlockingView from '../../../../../components/BlockingViews/BlockingView';
+import FixedFooter from '../../../../../components/FixedFooter';
+import Button from '../../../../../components/Button';
+import variables from '../../../../../styles/variables';
+import StepWrapper from "../StepWrapper/StepWrapper";
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {};
+
+function DisableStep(props) {
+    useEffect(() => {
+        // Session.toggleTwoFactorAuth(false);
+    }, []);
+
+    return (
+        <StepWrapper
+            title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
+        >
+            <BlockingView
+                icon={Illustrations.LockOpen}
+                iconWidth={variables.modalTopIconWidth}
+                iconHeight={variables.modalTopIconHeight}
+                title={props.translate('twoFactorAuth.disabled')}
+                subtitle={props.translate('twoFactorAuth.noAuthenticatorApp')}
+            />
+            <FixedFooter style={[styles.flexGrow0]}>
+                <Button
+                    success
+                    text={props.translate('common.buttonConfirm')}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+                />
+            </FixedFooter>
+        </StepWrapper>
+    );
+}
+
+DisableStep.propTypes = propTypes;
+DisableStep.defaultProps = defaultProps;
+
+export default withLocalize(DisableStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
new file mode 100644
index 000000000000..26bc9575b4d8
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -0,0 +1,69 @@
+import React, {useState} from 'react';
+import {Text, View, ScrollView} from 'react-native';
+import Navigation from '../../../../../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import ROUTES from '../../../../../ROUTES';
+import Section from '../../../../../components/Section';
+import * as Illustrations from '../../../../../components/Icon/Illustrations';
+import * as Expensicons from '../../../../../components/Icon/Expensicons';
+import themeColors from '../../../../../styles/themes/default';
+import styles from '../../../../../styles/styles';
+import ConfirmModal from '../../../../../components/ConfirmModal';
+import * as Session from "../../../../../libs/actions/Session";
+import StepWrapper from "../StepWrapper/StepWrapper";
+
+const defaultProps = {};
+
+function IsEnabledStep(props) {
+    const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
+
+    return (
+        <StepWrapper
+            title={props.translate('twoFactorAuth.headerTitle')}
+        >
+            <ScrollView>
+                <Section
+                    title={props.translate('twoFactorAuth.twoFactorAuthEnabled')}
+                    icon={Illustrations.ShieldYellow}
+                    menuItems={[
+                        {
+                            title: props.translate('twoFactorAuth.disableTwoFactorAuth'),
+                            onPress: () => {
+                                setIsConfirmModalVisible(true);
+                            },
+                            icon: Expensicons.Close,
+                            iconFill: themeColors.danger,
+                            wrapperStyle: [styles.cardMenuItem],
+                        },
+                    ]}
+                    containerStyles={[styles.twoFactorAuthSection]}
+                >
+                    <View style={styles.mv3}>
+                        <Text style={styles.textLabel}>{props.translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
+                    </View>
+                </Section>
+                <ConfirmModal
+                    title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
+                    onConfirm={() => {
+                        setIsConfirmModalVisible(false);
+                        props.setStep(4);
+                        Session.toggleTwoFactorAuth(false);
+                    }}
+                    onCancel={() => setIsConfirmModalVisible(false)}
+                    onModalHide={() => setIsConfirmModalVisible(false)}
+                    isVisible={isConfirmModalVisible}
+                    prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
+                    confirmText={props.translate('twoFactorAuth.disable')}
+                    cancelText={props.translate('common.cancel')}
+                    shouldShowCancelButton
+                    danger
+                />
+            </ScrollView>
+        </StepWrapper>
+    );
+}
+
+IsEnabledStep.propTypes = withLocalizePropTypes;
+IsEnabledStep.defaultProps = defaultProps;
+
+export default withLocalize(IsEnabledStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
new file mode 100644
index 000000000000..85ac09151b61
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import Navigation from '../../../../../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import ROUTES from '../../../../../ROUTES';
+import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
+import ConfirmationPage from '../../../../../components/ConfirmationPage';
+import StepWrapper from "../StepWrapper/StepWrapper";
+
+const defaultProps = {};
+
+function SuccessStep({translate}) {
+    return (
+        <StepWrapper
+            title={translate('twoFactorAuth.headerTitle')}
+            stepCounter={{
+                step: 3,
+                text: translate('twoFactorAuth.stepSuccess'),
+            }}
+        >
+            <ConfirmationPage
+                animation={FireworksAnimation}
+                heading={translate('twoFactorAuth.enabled')}
+                description={translate('twoFactorAuth.congrats')}
+                shouldShowButton
+                buttonText={translate('common.buttonConfirm')}
+                onButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
+            />
+        </StepWrapper>
+    );
+}
+
+SuccessStep.propTypes = withLocalizePropTypes;
+SuccessStep.defaultProps = defaultProps;
+
+export default withLocalize(SuccessStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
new file mode 100644
index 000000000000..488eb20bce24
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -0,0 +1,176 @@
+import React, {useEffect} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {ScrollView, View} from 'react-native';
+import PropTypes from 'prop-types';
+import Navigation from '../../../../../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import compose from '../../../../../libs/compose';
+import * as Session from '../../../../../libs/actions/Session';
+import ROUTES from '../../../../../ROUTES';
+import styles from '../../../../../styles/styles';
+import Button from '../../../../../components/Button';
+import Text from '../../../../../components/Text';
+import ONYXKEYS from '../../../../../ONYXKEYS';
+import TextLink from '../../../../../components/TextLink';
+import Clipboard from '../../../../../libs/Clipboard';
+import FixedFooter from '../../../../../components/FixedFooter';
+import * as Expensicons from '../../../../../components/Icon/Expensicons';
+import PressableWithDelayToggle from '../../../../../components/Pressable/PressableWithDelayToggle';
+import TwoFactorAuthForm from '../TwoFactorAuthForm';
+import QRCode from '../../../../../components/QRCode';
+import expensifyLogo from '../../../../../../assets/images/expensify-logo-round-transparent.png';
+import CONST from '../../../../../CONST';
+import StepWrapper from "../StepWrapper/StepWrapper";
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    account: PropTypes.shape({
+        /** Whether this account has 2FA enabled or not */
+        requiresTwoFactorAuth: PropTypes.bool,
+
+        /** Secret key to enable 2FA within the authenticator app */
+        twoFactorAuthSecretKey: PropTypes.string,
+
+        /** User primary login to attach to the authenticator QRCode */
+        primaryLogin: PropTypes.string,
+
+        /** User is submitting the authentication code */
+        isLoading: PropTypes.bool,
+
+        /** Server-side errors in the submitted authentication code */
+        errors: PropTypes.objectOf(PropTypes.string),
+    }),
+};
+
+const defaultProps = {
+    account: {
+        requiresTwoFactorAuth: false,
+        twoFactorAuthSecretKey: '',
+        primaryLogin: '',
+        isLoading: false,
+        errors: {},
+    },
+};
+
+
+const LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
+
+function VerifyStep({translate, setStep, account}) {
+    const formRef = React.useRef(null);
+
+    useEffect(() => {
+        Session.clearAccountMessages();
+    }, []);
+
+    console.log(account);
+
+    useEffect(() => {
+        if (!account.requiresTwoFactorAuth) {
+            return;
+        }
+        Navigation.navigate(ROUTES.SETTINGS_2FA_SUCCESS);
+    }, [account.requiresTwoFactorAuth]);
+
+    /**
+     * Splits the two-factor auth secret key in 4 chunks
+     *
+     * @param {String} secret
+     * @returns {string}
+     */
+    function splitSecretInChunks(secret) {
+        if (secret.length !== 16) {
+            return secret;
+        }
+
+        return `${secret.slice(0, 4)} ${secret.slice(4, 8)} ${secret.slice(8, 12)} ${secret.slice(12, secret.length)}`;
+    }
+
+    /**
+     * Builds the URL string to generate the QRCode, using the otpauth:// protocol,
+     * so it can be detected by authenticator apps
+     *
+     * @returns {string}
+     */
+    function buildAuthenticatorUrl() {
+        return `otpauth://totp/Expensify:${account.primaryLogin}?secret=${account.twoFactorAuthSecretKey}&issuer=Expensify`;
+    }
+
+
+    return (
+        <StepWrapper
+            title={translate('twoFactorAuth.headerTitle')}
+            stepCounter={{
+                step: 2,
+                text: translate('twoFactorAuth.stepVerify'),
+            }}
+            onBackButtonPress={() => setStep(0)}
+        >
+            <ScrollView
+                style={styles.mb5}
+                keyboardShouldPersistTaps="handled"
+            >
+                <View style={[styles.ph5, styles.mt3]}>
+                    <Text>
+                        {translate('twoFactorAuth.scanCode')}
+                        <TextLink href={LINK}>
+                            {' '}
+                            {translate('twoFactorAuth.authenticatorApp')}
+                        </TextLink>
+                        .
+                    </Text>
+                    <View style={[styles.alignItemsCenter, styles.mt5]}>
+                        <QRCode
+                            url={buildAuthenticatorUrl()}
+                            logo={expensifyLogo}
+                            logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
+                            logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
+                        />
+                    </View>
+                    <Text style={styles.mt5}>{translate('twoFactorAuth.addKey')}</Text>
+                    <View
+                        style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        {Boolean(account.twoFactorAuthSecretKey) &&
+                            <Text>{splitSecretInChunks(account.twoFactorAuthSecretKey)}</Text>}
+                        <PressableWithDelayToggle
+                            text={translate('twoFactorAuth.copy')}
+                            textChecked={translate('common.copied')}
+                            icon={Expensicons.Copy}
+                            inline={false}
+                            onPress={() => Clipboard.setString(account.twoFactorAuthSecretKey)}
+                            styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]}
+                            textStyles={[styles.buttonMediumText]}
+                        />
+                    </View>
+                    <Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
+                </View>
+                <View style={[styles.mt3, styles.mh5]}>
+                    <TwoFactorAuthForm innerRef={formRef}/>
+                </View>
+            </ScrollView>
+            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                <Button
+                    success
+                    text={translate('common.next')}
+                    isLoading={account.isLoading}
+                    onPress={() => {
+                        // if (!formRef.current) {
+                        //     return;
+                        // }
+                        // formRef.current.validateAndSubmitForm();
+                        setStep(2);
+                    }}
+                />
+            </FixedFooter>
+        </StepWrapper>
+    );
+}
+
+VerifyStep.propTypes = propTypes;
+VerifyStep.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        account: {key: ONYXKEYS.ACCOUNT},
+    }),
+)(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
new file mode 100644
index 000000000000..09c2f855e8ca
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -0,0 +1,49 @@
+import React, {useEffect, useState} from 'react';
+import {Text, View} from "react-native";
+import CodesStep from "./Steps/CodesStep";
+import DisableStep from "./Steps/DisableStep";
+import IsEnabledStep from "./Steps/IsEnabledStep";
+import VerifyStep from "./Steps/VerifyStep";
+import SuccessStep from "./Steps/SuccessStep";
+import compose from "../../../../libs/compose";
+import withLocalize from "../../../../components/withLocalize";
+import {withOnyx} from "react-native-onyx";
+import ONYXKEYS from "../../../../ONYXKEYS";
+
+// requiresTwoFactorAuth
+function TwoFactorAuthPage(props) {
+    const [step, setStep] = useState(props.account.requiresTwoFactorAuth ? 3 : 0);
+
+    // useEffect(() => {
+    //
+    //     return () => console.log('unmount')
+    // }, []);
+
+    const renderStep = () => {
+        switch (step) {
+            case 0:
+                return <CodesStep setStep={setStep}/>;
+            case 1:
+                return <VerifyStep setStep={setStep}/>;
+            case 2:
+                return <SuccessStep/>;
+            case 3:
+                return <IsEnabledStep setStep={setStep}/>;
+            case 4:
+                return <DisableStep setStep={setStep}/>;
+        }
+    }
+
+    return (
+        <>
+            {renderStep()}
+        </>
+    );
+};
+
+
+export default compose(
+    withOnyx({
+        account: {key: ONYXKEYS.ACCOUNT},
+    }),
+)(TwoFactorAuthPage);

From 24e914adfc8f01abd168470dea9815777791ba4c Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Sat, 15 Jul 2023 11:27:25 +0200
Subject: [PATCH 02/23] refactor: wip - remove 2fa pages

---
 src/ROUTES.js                                 |   6 +-
 .../AppNavigator/ModalStackNavigators.js      |  31 +---
 src/libs/Navigation/linkingConfig.js          |  20 +-
 .../settings/Security/SecuritySettingsPage.js |   2 +-
 .../Security/TwoFactorAuth/CodesPage.js       | 150 ---------------
 .../Security/TwoFactorAuth/DisablePage.js     |  57 ------
 .../Security/TwoFactorAuth/IsEnabledPage.js   |  73 --------
 .../Security/TwoFactorAuth/Steps/CodesStep.js |   9 +-
 .../TwoFactorAuth/Steps/IsEnabledStep.js      |   2 +-
 .../TwoFactorAuth/Steps/VerifyStep.js         |   8 +-
 .../Security/TwoFactorAuth/SuccessPage.js     |  42 -----
 .../TwoFactorAuth/TwoFactorAuthPage.js        |  47 +++--
 .../Security/TwoFactorAuth/VerifyPage.js      | 173 ------------------
 13 files changed, 46 insertions(+), 574 deletions(-)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/CodesPage.js
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/DisablePage.js
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/SuccessPage.js
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/VerifyPage.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index b853c42248c6..524dc140a986 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -54,11 +54,7 @@ export default {
     SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
     getEditContactMethodRoute: (contactMethod) => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`,
-    SETTINGS_2FA_IS_ENABLED: 'settings/security/two-factor-auth/enabled',
-    SETTINGS_2FA_DISABLE: 'settings/security/two-factor-auth/disable',
-    SETTINGS_2FA_CODES: 'settings/security/two-factor-auth/codes',
-    SETTINGS_2FA_VERIFY: 'settings/security/two-factor-auth/verify',
-    SETTINGS_2FA_SUCCESS: 'settings/security/two-factor-auth/success',
+    SETTINGS_2FA: 'settings/security/two-factor-auth',
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     NEW_TASK,
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index f0ba70f03ee7..56046752f04b 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -620,42 +620,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'GetAssistance',
     },
-    // TODO: remove unnecessary pages
-    // {
-    //     getComponent: () => {
-    //         const SettingsTwoFactorAuthIsEnabled = require('../../../pages/settings/Security/TwoFactorAuth/IsEnabledPage').default;
-    //         return SettingsTwoFactorAuthIsEnabled;
-    //     },
-    //     name: 'Settings_TwoFactorAuthIsEnabled',
-    // },
-    // {
-    //     getComponent: () => {
-    //         const SettingsTwoFactorAuthDisable = require('../../../pages/settings/Security/TwoFactorAuth/DisablePage').default;
-    //         return SettingsTwoFactorAuthDisable;
-    //     },
-    //     name: 'Settings_TwoFactorAuthDisable',
-    // },
     {
         getComponent: () => {
             const SettingsTwoFactorAuthCodes = require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default;
             return SettingsTwoFactorAuthCodes;
         },
-        name: 'Settings_TwoFactorAuthCodes',
+        name: 'Settings_TwoFactorAuth',
     },
-    // {
-    //     getComponent: () => {
-    //         const SettingsTwoFactorAuthVerify = require('../../../pages/settings/Security/TwoFactorAuth/VerifyPage').default;
-    //         return SettingsTwoFactorAuthVerify;
-    //     },
-    //     name: 'Settings_TwoFactorAuthVerify',
-    // },
-    // {
-    //     getComponent: () => {
-    //         const SettingsTwoFactorAuthSuccess = require('../../../pages/settings/Security/TwoFactorAuth/SuccessPage').default;
-    //         return SettingsTwoFactorAuthSuccess;
-    //     },
-    //     name: 'Settings_TwoFactorAuthSuccess',
-    // },
 ]);
 
 const EnablePaymentsStackNavigator = createModalStackNavigator([
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 539b00869270..de02a090733e 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -156,24 +156,8 @@ export default {
                                 path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS,
                                 exact: true,
                             },
-                            Settings_TwoFactorAuthIsEnabled: {
-                                path: ROUTES.SETTINGS_2FA_IS_ENABLED,
-                                exact: true,
-                            },
-                            Settings_TwoFactorAuthDisable: {
-                                path: ROUTES.SETTINGS_2FA_DISABLE,
-                                exact: true,
-                            },
-                            Settings_TwoFactorAuthCodes: {
-                                path: ROUTES.SETTINGS_2FA_CODES,
-                                exact: true,
-                            },
-                            Settings_TwoFactorAuthVerify: {
-                                path: ROUTES.SETTINGS_2FA_VERIFY,
-                                exact: true,
-                            },
-                            Settings_TwoFactorAuthSuccess: {
-                                path: ROUTES.SETTINGS_2FA_SUCCESS,
+                            Settings_TwoFactorAuth: {
+                                path: ROUTES.SETTINGS_2FA,
                                 exact: true,
                             },
                             Settings_Share_Code: {
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index c4c229b6cdd3..c7dc9c1b4a89 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -36,7 +36,7 @@ function SecuritySettingsPage(props) {
         {
             translationKey: 'twoFactorAuth.headerTitle',
             icon: Expensicons.Shield,
-            action: () => Navigation.navigate(ROUTES.SETTINGS_2FA_CODES)
+            action: () => Navigation.navigate(ROUTES.SETTINGS_2FA)
         },
         {
             translationKey: 'passwordPage.changePassword',
diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
deleted file mode 100644
index 39d4141a2872..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import {ActivityIndicator, View} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
-import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ScreenWrapper from '../../../../components/ScreenWrapper';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import compose from '../../../../libs/compose';
-import ROUTES from '../../../../ROUTES';
-import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
-import * as Illustrations from '../../../../components/Icon/Illustrations';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
-import styles from '../../../../styles/styles';
-import FixedFooter from '../../../../components/FixedFooter';
-import Button from '../../../../components/Button';
-import PressableWithDelayToggle from '../../../../components/Pressable/PressableWithDelayToggle';
-import Text from '../../../../components/Text';
-import Section from '../../../../components/Section';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import Clipboard from '../../../../libs/Clipboard';
-import themeColors from '../../../../styles/themes/default';
-import localFileDownload from '../../../../libs/localFileDownload';
-import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
-    account: PropTypes.shape({
-        /** User recovery codes for setting up 2-FA */
-        recoveryCodes: PropTypes.string,
-
-        /** If recovery codes are loading */
-        isLoading: PropTypes.bool,
-    }),
-};
-
-const defaultProps = {
-    account: {
-        recoveryCodes: '',
-    },
-};
-
-function CodesPage(props) {
-    const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
-
-    // Here, this eslint rule will make the unmount effect unreadable, possibly confusing with mount
-    // eslint-disable-next-line arrow-body-style
-    useEffect(() => {
-        return () => {
-            TwoFactorAuthActions.clearTwoFactorAuthData();
-        };
-    }, []);
-
-    return (
-        <ScreenWrapper shouldShowOfflineIndicator={false}>
-            <HeaderWithBackButton
-                title={props.translate('twoFactorAuth.headerTitle')}
-                shouldShowStepCounter
-                stepCounter={{
-                    step: 1,
-                    text: props.translate('twoFactorAuth.stepCodes'),
-                }}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
-            />
-            <FullPageOfflineBlockingView>
-                <ScrollView>
-                    <Section
-                        title={props.translate('twoFactorAuth.keepCodesSafe')}
-                        icon={Illustrations.ShieldYellow}
-                        containerStyles={[styles.twoFactorAuthSection]}
-                        iconContainerStyles={[styles.ml6]}
-                    >
-                        <View style={styles.mv3}>
-                            <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
-                        </View>
-                        <View style={[styles.twoFactorAuthCodesBox(props)]}>
-                            {props.account.isLoading ? (
-                                <View style={styles.twoFactorLoadingContainer}>
-                                    <ActivityIndicator color={themeColors.spinner} />
-                                </View>
-                            ) : (
-                                <>
-                                    <View style={styles.twoFactorAuthCodesContainer}>
-                                        {Boolean(props.account.recoveryCodes) &&
-                                            _.map(props.account.recoveryCodes.split(', '), (code) => (
-                                                <Text
-                                                    style={styles.twoFactorAuthCode}
-                                                    key={code}
-                                                >
-                                                    {code}
-                                                </Text>
-                                            ))}
-                                    </View>
-                                    <View style={[styles.twoFactorAuthCodesButtonsContainer]}>
-                                        <PressableWithDelayToggle
-                                            text={props.translate('twoFactorAuth.copy')}
-                                            textChecked={props.translate('common.copied')}
-                                            icon={Expensicons.Copy}
-                                            inline={false}
-                                            onPress={() => {
-                                                Clipboard.setString(props.account.recoveryCodes);
-                                                setIsNextButtonDisabled(false);
-                                            }}
-                                            styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
-                                            textStyles={[styles.buttonMediumText]}
-                                        />
-                                        <PressableWithDelayToggle
-                                            text={props.translate('common.download')}
-                                            icon={Expensicons.Download}
-                                            onPress={() => {
-                                                localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
-                                                setIsNextButtonDisabled(false);
-                                            }}
-                                            inline={false}
-                                            styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
-                                            textStyles={[styles.buttonMediumText]}
-                                        />
-                                    </View>
-                                </>
-                            )}
-                        </View>
-                    </Section>
-                </ScrollView>
-                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                    <Button
-                        success
-                        text={props.translate('common.next')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                        isDisabled={isNextButtonDisabled}
-                    />
-                </FixedFooter>
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-CodesPage.propTypes = propTypes;
-CodesPage.defaultProps = defaultProps;
-
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(CodesPage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/DisablePage.js b/src/pages/settings/Security/TwoFactorAuth/DisablePage.js
deleted file mode 100644
index 1369c4d13e65..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/DisablePage.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, {useEffect} from 'react';
-import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ScreenWrapper from '../../../../components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
-import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
-import * as Illustrations from '../../../../components/Icon/Illustrations';
-import styles from '../../../../styles/styles';
-import BlockingView from '../../../../components/BlockingViews/BlockingView';
-import FixedFooter from '../../../../components/FixedFooter';
-import Button from '../../../../components/Button';
-import * as Session from '../../../../libs/actions/Session';
-import variables from '../../../../styles/variables';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {};
-
-function DisablePage(props) {
-    useEffect(() => {
-        Session.toggleTwoFactorAuth(false);
-    }, []);
-
-    return (
-        <ScreenWrapper shouldShowOfflineIndicator={false}>
-            <HeaderWithBackButton
-                title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
-            />
-
-            <FullPageOfflineBlockingView>
-                <BlockingView
-                    icon={Illustrations.LockOpen}
-                    iconWidth={variables.modalTopIconWidth}
-                    iconHeight={variables.modalTopIconHeight}
-                    title={props.translate('twoFactorAuth.disabled')}
-                    subtitle={props.translate('twoFactorAuth.noAuthenticatorApp')}
-                />
-                <FixedFooter style={[styles.flexGrow0]}>
-                    <Button
-                        success
-                        text={props.translate('common.buttonConfirm')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
-                    />
-                </FixedFooter>
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-DisablePage.propTypes = propTypes;
-DisablePage.defaultProps = defaultProps;
-
-export default withLocalize(DisablePage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js
deleted file mode 100644
index 01d986e2f4e5..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, {useState} from 'react';
-import {Text, View, ScrollView} from 'react-native';
-import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ScreenWrapper from '../../../../components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
-import Section from '../../../../components/Section';
-import * as Illustrations from '../../../../components/Icon/Illustrations';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import themeColors from '../../../../styles/themes/default';
-import styles from '../../../../styles/styles';
-import ConfirmModal from '../../../../components/ConfirmModal';
-import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
-
-const defaultProps = {};
-
-function IsEnabledPage(props) {
-    const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
-
-    return (
-        <ScreenWrapper>
-            <HeaderWithBackButton
-                title={props.translate('twoFactorAuth.headerTitle')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
-            />
-            <FullPageOfflineBlockingView>
-                <ScrollView>
-                    <Section
-                        title={props.translate('twoFactorAuth.twoFactorAuthEnabled')}
-                        icon={Illustrations.ShieldYellow}
-                        menuItems={[
-                            {
-                                title: props.translate('twoFactorAuth.disableTwoFactorAuth'),
-                                onPress: () => {
-                                    setIsConfirmModalVisible(true);
-                                },
-                                icon: Expensicons.Close,
-                                iconFill: themeColors.danger,
-                                wrapperStyle: [styles.cardMenuItem],
-                            },
-                        ]}
-                        containerStyles={[styles.twoFactorAuthSection]}
-                    >
-                        <View style={styles.mv3}>
-                            <Text style={styles.textLabel}>{props.translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
-                        </View>
-                    </Section>
-                    <ConfirmModal
-                        title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
-                        onConfirm={() => {
-                            setIsConfirmModalVisible(false);
-                            Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLE);
-                        }}
-                        onCancel={() => setIsConfirmModalVisible(false)}
-                        onModalHide={() => setIsConfirmModalVisible(false)}
-                        isVisible={isConfirmModalVisible}
-                        prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
-                        confirmText={props.translate('twoFactorAuth.disable')}
-                        cancelText={props.translate('common.cancel')}
-                        shouldShowCancelButton
-                        danger
-                    />
-                </ScrollView>
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-IsEnabledPage.propTypes = withLocalizePropTypes;
-IsEnabledPage.defaultProps = defaultProps;
-
-export default withLocalize(IsEnabledPage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 219f9826f9dc..9df405e7c103 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -4,11 +4,9 @@ import {ActivityIndicator, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
-import Navigation from '../../../../../libs/Navigation/Navigation';
 import * as Expensicons from '../../../../../components/Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import compose from '../../../../../libs/compose';
-import ROUTES from '../../../../../ROUTES';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../../components/withWindowDimensions';
 import styles from '../../../../../styles/styles';
@@ -21,11 +19,11 @@ import ONYXKEYS from '../../../../../ONYXKEYS';
 import Clipboard from '../../../../../libs/Clipboard';
 import themeColors from '../../../../../styles/themes/default';
 import localFileDownload from '../../../../../libs/localFileDownload';
-import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
 
 const propTypes = {
+    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
     account: PropTypes.shape({
         /** User recovery codes for setting up 2-FA */
@@ -49,9 +47,6 @@ function CodesStep({translate, setStep, account, ...props}) {
     // eslint-disable-next-line arrow-body-style
     useEffect(() => {
         Session.toggleTwoFactorAuth(true);
-        // return () => {
-        //     TwoFactorAuthActions.clearTwoFactorAuthData();
-        // };
     }, []);
 
     return (
@@ -123,7 +118,7 @@ function CodesStep({translate, setStep, account, ...props}) {
                 <Button
                     success
                     text={translate('common.next')}
-                    onPress={() => setStep(1)}
+                    onPress={setStep}
                     isDisabled={isNextButtonDisabled}
                 />
             </FixedFooter>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index 26bc9575b4d8..5e4d4eeb4eaf 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -46,7 +46,7 @@ function IsEnabledStep(props) {
                     title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
                     onConfirm={() => {
                         setIsConfirmModalVisible(false);
-                        props.setStep(4);
+                        props.setStep();
                         Session.toggleTwoFactorAuth(false);
                     }}
                     onCancel={() => setIsConfirmModalVisible(false)}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 488eb20bce24..d4fa4469fdb1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -20,6 +20,7 @@ import TwoFactorAuthForm from '../TwoFactorAuthForm';
 import QRCode from '../../../../../components/QRCode';
 import expensifyLogo from '../../../../../../assets/images/expensify-logo-round-transparent.png';
 import CONST from '../../../../../CONST';
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 import StepWrapper from "../StepWrapper/StepWrapper";
 
 const propTypes = {
@@ -60,10 +61,11 @@ function VerifyStep({translate, setStep, account}) {
 
     useEffect(() => {
         Session.clearAccountMessages();
+        return () => {
+            TwoFactorAuthActions.clearTwoFactorAuthData();
+        };
     }, []);
 
-    console.log(account);
-
     useEffect(() => {
         if (!account.requiresTwoFactorAuth) {
             return;
@@ -157,7 +159,7 @@ function VerifyStep({translate, setStep, account}) {
                         //     return;
                         // }
                         // formRef.current.validateAndSubmitForm();
-                        setStep(2);
+                        setStep();
                     }}
                 />
             </FixedFooter>
diff --git a/src/pages/settings/Security/TwoFactorAuth/SuccessPage.js b/src/pages/settings/Security/TwoFactorAuth/SuccessPage.js
deleted file mode 100644
index e3608b43685e..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/SuccessPage.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ScreenWrapper from '../../../../components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
-import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
-import FireworksAnimation from '../../../../../assets/animations/Fireworks.json';
-import ConfirmationPage from '../../../../components/ConfirmationPage';
-
-const defaultProps = {};
-
-function SuccessPage(props) {
-    return (
-        <ScreenWrapper shouldShowOfflineIndicator={false}>
-            <HeaderWithBackButton
-                title={props.translate('twoFactorAuth.headerTitle')}
-                shouldShowStepCounter
-                stepCounter={{
-                    step: 3,
-                    text: props.translate('twoFactorAuth.stepSuccess'),
-                }}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
-            />
-            <FullPageOfflineBlockingView>
-                <ConfirmationPage
-                    animation={FireworksAnimation}
-                    heading={props.translate('twoFactorAuth.enabled')}
-                    description={props.translate('twoFactorAuth.congrats')}
-                    shouldShowButton
-                    buttonText={props.translate('common.buttonConfirm')}
-                    onButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_IS_ENABLED)}
-                />
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-SuccessPage.propTypes = withLocalizePropTypes;
-SuccessPage.defaultProps = defaultProps;
-
-export default withLocalize(SuccessPage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 09c2f855e8ca..130cd81edf3d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -7,30 +7,49 @@ import VerifyStep from "./Steps/VerifyStep";
 import SuccessStep from "./Steps/SuccessStep";
 import compose from "../../../../libs/compose";
 import withLocalize from "../../../../components/withLocalize";
+
 import {withOnyx} from "react-native-onyx";
 import ONYXKEYS from "../../../../ONYXKEYS";
 
+const STEPS = {
+    CODES: 'CODES',
+    VERIFY: 'VERIFY',
+    SUCCESS: 'SUCCESS',
+    IS_ENABLED: 'IS_ENABLED',
+    DISABLE: 'DISABLE'
+}
+
 // requiresTwoFactorAuth
 function TwoFactorAuthPage(props) {
-    const [step, setStep] = useState(props.account.requiresTwoFactorAuth ? 3 : 0);
+    const [step, setStep] = useState(STEPS.CODES);
+
+    useEffect(() => {
+        if (props.account.requiresTwoFactorAuth) {
+            setStep(STEPS.IS_ENABLED);
+        } else {
+            setStep(STEPS.CODES);
+        }
+        return () => console.log('unmount')
+    }, []);
 
-    // useEffect(() => {
-    //
-    //     return () => console.log('unmount')
-    // }, []);
+
+
+    function handleSetStep(stepToSet) {
+        return () => setStep(stepToSet);
+    }
 
     const renderStep = () => {
         switch (step) {
-            case 0:
-                return <CodesStep setStep={setStep}/>;
-            case 1:
-                return <VerifyStep setStep={setStep}/>;
-            case 2:
+            case STEPS.CODES:
+                return <CodesStep setStep={handleSetStep(STEPS.VERIFY)}/>;
+            case STEPS.VERIFY:
+                return <VerifyStep setStep={handleSetStep(STEPS.SUCCESS)}/>;
+            case STEPS.SUCCESS:
                 return <SuccessStep/>;
-            case 3:
-                return <IsEnabledStep setStep={setStep}/>;
-            case 4:
-                return <DisableStep setStep={setStep}/>;
+            case STEPS.IS_ENABLED:
+                return <IsEnabledStep setStep={handleSetStep(STEPS.DISABLE)}/>;
+            case STEPS.DISABLE:
+                return <DisableStep />;
         }
     }
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
deleted file mode 100644
index 8b91fdbe8693..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import {ScrollView, View} from 'react-native';
-import PropTypes from 'prop-types';
-import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ScreenWrapper from '../../../../components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import compose from '../../../../libs/compose';
-import * as Session from '../../../../libs/actions/Session';
-import ROUTES from '../../../../ROUTES';
-import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
-import styles from '../../../../styles/styles';
-import Button from '../../../../components/Button';
-import Text from '../../../../components/Text';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import TextLink from '../../../../components/TextLink';
-import Clipboard from '../../../../libs/Clipboard';
-import FixedFooter from '../../../../components/FixedFooter';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import PressableWithDelayToggle from '../../../../components/Pressable/PressableWithDelayToggle';
-import TwoFactorAuthForm from './TwoFactorAuthForm';
-import QRCode from '../../../../components/QRCode';
-import expensifyLogo from '../../../../../assets/images/expensify-logo-round-transparent.png';
-import CONST from '../../../../CONST';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-    account: PropTypes.shape({
-        /** Whether this account has 2FA enabled or not */
-        requiresTwoFactorAuth: PropTypes.bool,
-
-        /** Secret key to enable 2FA within the authenticator app */
-        twoFactorAuthSecretKey: PropTypes.string,
-
-        /** User primary login to attach to the authenticator QRCode */
-        primaryLogin: PropTypes.string,
-
-        /** User is submitting the authentication code */
-        isLoading: PropTypes.bool,
-
-        /** Server-side errors in the submitted authentication code */
-        errors: PropTypes.objectOf(PropTypes.string),
-    }),
-};
-
-const defaultProps = {
-    account: {
-        requiresTwoFactorAuth: false,
-        twoFactorAuthSecretKey: '',
-        primaryLogin: '',
-        isLoading: false,
-        errors: {},
-    },
-};
-
-function VerifyPage(props) {
-    const formRef = React.useRef(null);
-
-    useEffect(() => {
-        Session.clearAccountMessages();
-    }, []);
-
-    useEffect(() => {
-        if (!props.account.requiresTwoFactorAuth) {
-            return;
-        }
-        Navigation.navigate(ROUTES.SETTINGS_2FA_SUCCESS);
-    }, [props.account.requiresTwoFactorAuth]);
-
-    /**
-     * Splits the two-factor auth secret key in 4 chunks
-     *
-     * @param {String} secret
-     * @returns {string}
-     */
-    function splitSecretInChunks(secret) {
-        if (secret.length !== 16) {
-            return secret;
-        }
-
-        return `${secret.slice(0, 4)} ${secret.slice(4, 8)} ${secret.slice(8, 12)} ${secret.slice(12, secret.length)}`;
-    }
-
-    /**
-     * Builds the URL string to generate the QRCode, using the otpauth:// protocol,
-     * so it can be detected by authenticator apps
-     *
-     * @returns {string}
-     */
-    function buildAuthenticatorUrl() {
-        return `otpauth://totp/Expensify:${props.account.primaryLogin}?secret=${props.account.twoFactorAuthSecretKey}&issuer=Expensify`;
-    }
-
-    return (
-        <ScreenWrapper shouldShowOfflineIndicator={false}>
-            <HeaderWithBackButton
-                title={props.translate('twoFactorAuth.headerTitle')}
-                shouldShowStepCounter
-                stepCounter={{
-                    step: 2,
-                    text: props.translate('twoFactorAuth.stepVerify'),
-                }}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_2FA_CODES)}
-            />
-            <FullPageOfflineBlockingView>
-                <ScrollView
-                    style={styles.mb5}
-                    keyboardShouldPersistTaps="handled"
-                >
-                    <View style={[styles.ph5, styles.mt3]}>
-                        <Text>
-                            {props.translate('twoFactorAuth.scanCode')}
-                            <TextLink href="https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1">
-                                {' '}
-                                {props.translate('twoFactorAuth.authenticatorApp')}
-                            </TextLink>
-                            .
-                        </Text>
-                        <View style={[styles.alignItemsCenter, styles.mt5]}>
-                            <QRCode
-                                url={buildAuthenticatorUrl()}
-                                logo={expensifyLogo}
-                                logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
-                                logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
-                            />
-                        </View>
-                        <Text style={styles.mt5}>{props.translate('twoFactorAuth.addKey')}</Text>
-                        <View style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                            {Boolean(props.account.twoFactorAuthSecretKey) && <Text>{splitSecretInChunks(props.account.twoFactorAuthSecretKey)}</Text>}
-                            <PressableWithDelayToggle
-                                text={props.translate('twoFactorAuth.copy')}
-                                textChecked={props.translate('common.copied')}
-                                icon={Expensicons.Copy}
-                                inline={false}
-                                onPress={() => Clipboard.setString(props.account.twoFactorAuthSecretKey)}
-                                styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]}
-                                textStyles={[styles.buttonMediumText]}
-                            />
-                        </View>
-                        <Text style={styles.mt11}>{props.translate('twoFactorAuth.enterCode')}</Text>
-                    </View>
-                    <View style={[styles.mt3, styles.mh5]}>
-                        <TwoFactorAuthForm innerRef={formRef} />
-                    </View>
-                </ScrollView>
-                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                    <Button
-                        success
-                        text={props.translate('common.next')}
-                        isLoading={props.account.isLoading}
-                        onPress={() => {
-                            if (!formRef.current) {
-                                return;
-                            }
-                            formRef.current.validateAndSubmitForm();
-                        }}
-                    />
-                </FixedFooter>
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-VerifyPage.propTypes = propTypes;
-VerifyPage.defaultProps = defaultProps;
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(VerifyPage);

From 5baaf084978d6ee367ddc9975e4af755f8f6f5f6 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 17 Jul 2023 19:48:06 +0200
Subject: [PATCH 03/23] refactor: final changes

---
 src/CONST.js                                  |  7 ++
 src/libs/actions/TwoFactorAuthActions.js      | 16 +++-
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  | 35 ++++++-
 .../Security/TwoFactorAuth/Steps/CodesStep.js | 20 ++--
 .../TwoFactorAuth/Steps/DisableStep.js        | 31 ++-----
 .../TwoFactorAuth/Steps/IsEnabledStep.js      | 35 ++++---
 .../TwoFactorAuth/Steps/SuccessStep.js        |  9 +-
 .../TwoFactorAuth/Steps/VerifyStep.js         | 26 +++---
 .../TwoFactorAuth/TwoFactorAuthPage.js        | 92 +++++++++++--------
 9 files changed, 162 insertions(+), 109 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 92029bab0078..23cf5d36b187 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2533,6 +2533,13 @@ const CONST = {
     TRANSLATION_KEYS: {
         ATTACHMENT: 'common.attachment',
     },
+    TWO_FACTOR_AUTH_STEPS: {
+        CODES: 'CODES',
+        VERIFY: 'VERIFY',
+        SUCCESS: 'SUCCESS',
+        IS_ENABLED: 'IS_ENABLED',
+        DISABLE: 'DISABLE',
+    }
 };
 
 export default CONST;
diff --git a/src/libs/actions/TwoFactorAuthActions.js b/src/libs/actions/TwoFactorAuthActions.js
index f778b1f2ceae..5f8aca224305 100644
--- a/src/libs/actions/TwoFactorAuthActions.js
+++ b/src/libs/actions/TwoFactorAuthActions.js
@@ -1,14 +1,26 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
+import Navigation from "../Navigation/Navigation";
+import ROUTES from "../../ROUTES";
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: ''});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: ''});
+}
+
+function setTwoFactorAuthStep(twoFactorAuthStep) {
+    Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
+}
+
+function quitAndNavigateBackToSettings() {
+    clearTwoFactorAuthData();
+    Navigation.goBack(ROUTES.SETTINGS_SECURITY);
 }
 
 export {
-    // eslint-disable-next-line import/prefer-default-export
     clearTwoFactorAuthData,
+    setTwoFactorAuthStep,
+    quitAndNavigateBackToSettings,
 };
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index ba23a6f5f2cd..90a7eb0f0d98 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -1,21 +1,43 @@
 import React from 'react';
+import PropTypes from "prop-types";
 import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
-import Navigation from "../../../../../libs/Navigation/Navigation";
-import ROUTES from "../../../../../ROUTES";
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 
-const defaultProps = {};
+const propTypes = {
+    /** Title of the Header */
+    title: PropTypes.string,
+
+    /** Data to display a step counter in the header */
+    stepCounter: PropTypes.shape({
+        step: PropTypes.number,
+        total: PropTypes.number,
+        text: PropTypes.string,
+    }),
+
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress: PropTypes.func,
+
+    /** Children components */
+    children: PropTypes.node,
+}
+
+const defaultProps = {
+    title: '',
+    stepCounter: null,
+    onBackButtonPress: TwoFactorAuthActions.quitAndNavigateBackToSettings,
+    children: null,
+};
 
 function StepWrapper({title, stepCounter, onBackButtonPress, children}) {
-    const navigateBackToSettings = () => Navigation.goBack(ROUTES.SETTINGS_SECURITY)
     return (
         <ScreenWrapper shouldShowOfflineIndicator={false}>
             <HeaderWithBackButton
                 title={title}
                 shouldShowStepCounter={!!stepCounter}
                 stepCounter={stepCounter}
-                onBackButtonPress={onBackButtonPress || navigateBackToSettings}
+                onBackButtonPress={onBackButtonPress}
             />
             <FullPageOfflineBlockingView>
                 {children}
@@ -24,4 +46,7 @@ function StepWrapper({title, stepCounter, onBackButtonPress, children}) {
     );
 }
 
+StepWrapper.propTypes = propTypes;
+StepWrapper.defaultProps = defaultProps;
+
 export default StepWrapper;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 9df405e7c103..ee4f93b0720d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -21,6 +21,7 @@ import themeColors from '../../../../../styles/themes/default';
 import localFileDownload from '../../../../../libs/localFileDownload';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
+import CONST from "../../../../../CONST";
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -32,6 +33,9 @@ const propTypes = {
         /** If recovery codes are loading */
         isLoading: PropTypes.bool,
     }),
+
+    /** Method to set the next step */
+    setStep: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -40,22 +44,26 @@ const defaultProps = {
     },
 };
 
-function CodesStep({translate, setStep, account, ...props}) {
+function CodesStep({translate, setStep, account, ...dimensionsProps}) {
     const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
 
-    // Here, this eslint rule will make the unmount effect unreadable, possibly confusing with mount
-    // eslint-disable-next-line arrow-body-style
     useEffect(() => {
+        if (account.recoveryCodes) {
+            return;
+        }
         Session.toggleTwoFactorAuth(true);
     }, []);
 
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
             stepCounter={{
                 step: 1,
                 text: translate('twoFactorAuth.stepCodes'),
-            }}>
+                total: 3,
+            }}
+        >
             <ScrollView>
                 <Section
                     title={translate('twoFactorAuth.keepCodesSafe')}
@@ -66,7 +74,7 @@ function CodesStep({translate, setStep, account, ...props}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox(props)}>
+                    <View style={styles.twoFactorAuthCodesBox(dimensionsProps)}>
                         {account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={themeColors.spinner}/>
@@ -118,7 +126,7 @@ function CodesStep({translate, setStep, account, ...props}) {
                 <Button
                     success
                     text={translate('common.next')}
-                    onPress={setStep}
+                    onPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY)}
                     isDisabled={isNextButtonDisabled}
                 />
             </FixedFooter>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
index 40fb1b3fd27f..cf888fa8b6df 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
@@ -1,7 +1,5 @@
-import React, {useEffect} from 'react';
-import Navigation from '../../../../../libs/Navigation/Navigation';
+import React from 'react';
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
-import ROUTES from '../../../../../ROUTES';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
 import styles from '../../../../../styles/styles';
 import BlockingView from '../../../../../components/BlockingViews/BlockingView';
@@ -9,41 +7,32 @@ import FixedFooter from '../../../../../components/FixedFooter';
 import Button from '../../../../../components/Button';
 import variables from '../../../../../styles/variables';
 import StepWrapper from "../StepWrapper/StepWrapper";
+import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
 
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {};
-
-function DisableStep(props) {
-    useEffect(() => {
-        // Session.toggleTwoFactorAuth(false);
-    }, []);
-
+function DisableStep({translate}) {
     return (
         <StepWrapper
-            title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
+            title={translate('twoFactorAuth.disableTwoFactorAuth')}
         >
             <BlockingView
                 icon={Illustrations.LockOpen}
                 iconWidth={variables.modalTopIconWidth}
                 iconHeight={variables.modalTopIconHeight}
-                title={props.translate('twoFactorAuth.disabled')}
-                subtitle={props.translate('twoFactorAuth.noAuthenticatorApp')}
+                title={translate('twoFactorAuth.disabled')}
+                subtitle={translate('twoFactorAuth.noAuthenticatorApp')}
             />
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
                     success
-                    text={props.translate('common.buttonConfirm')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+                    text={translate('common.buttonConfirm')}
+                    onPress={TwoFactorAuthActions.quitAndNavigateBackToSettings}
                 />
             </FixedFooter>
         </StepWrapper>
     );
 }
 
-DisableStep.propTypes = propTypes;
-DisableStep.defaultProps = defaultProps;
+DisableStep.propTypes = withLocalizePropTypes;
+DisableStep.defaultProps = {};
 
 export default withLocalize(DisableStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index 5e4d4eeb4eaf..0c80bb6698dc 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -1,8 +1,7 @@
 import React, {useState} from 'react';
 import {Text, View, ScrollView} from 'react-native';
-import Navigation from '../../../../../libs/Navigation/Navigation';
+import PropTypes from "prop-types";
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
-import ROUTES from '../../../../../ROUTES';
 import Section from '../../../../../components/Section';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
 import * as Expensicons from '../../../../../components/Icon/Expensicons';
@@ -11,23 +10,29 @@ import styles from '../../../../../styles/styles';
 import ConfirmModal from '../../../../../components/ConfirmModal';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
+import CONST from "../../../../../CONST";
 
-const defaultProps = {};
+const propTypes = {
+    ...withLocalizePropTypes,
 
-function IsEnabledStep(props) {
+    /** Method to set the next step */
+    setStep: PropTypes.func.isRequired,
+}
+
+function IsEnabledStep({translate, setStep}) {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
     return (
         <StepWrapper
-            title={props.translate('twoFactorAuth.headerTitle')}
+            title={translate('twoFactorAuth.headerTitle')}
         >
             <ScrollView>
                 <Section
-                    title={props.translate('twoFactorAuth.twoFactorAuthEnabled')}
+                    title={translate('twoFactorAuth.twoFactorAuthEnabled')}
                     icon={Illustrations.ShieldYellow}
                     menuItems={[
                         {
-                            title: props.translate('twoFactorAuth.disableTwoFactorAuth'),
+                            title: translate('twoFactorAuth.disableTwoFactorAuth'),
                             onPress: () => {
                                 setIsConfirmModalVisible(true);
                             },
@@ -39,22 +44,22 @@ function IsEnabledStep(props) {
                     containerStyles={[styles.twoFactorAuthSection]}
                 >
                     <View style={styles.mv3}>
-                        <Text style={styles.textLabel}>{props.translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
+                        <Text style={styles.textLabel}>{translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
                     </View>
                 </Section>
                 <ConfirmModal
-                    title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
+                    title={translate('twoFactorAuth.disableTwoFactorAuth')}
                     onConfirm={() => {
                         setIsConfirmModalVisible(false);
-                        props.setStep();
+                        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLE);
                         Session.toggleTwoFactorAuth(false);
                     }}
                     onCancel={() => setIsConfirmModalVisible(false)}
                     onModalHide={() => setIsConfirmModalVisible(false)}
                     isVisible={isConfirmModalVisible}
-                    prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
-                    confirmText={props.translate('twoFactorAuth.disable')}
-                    cancelText={props.translate('common.cancel')}
+                    prompt={translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
+                    confirmText={translate('twoFactorAuth.disable')}
+                    cancelText={translate('common.cancel')}
                     shouldShowCancelButton
                     danger
                 />
@@ -63,7 +68,7 @@ function IsEnabledStep(props) {
     );
 }
 
-IsEnabledStep.propTypes = withLocalizePropTypes;
-IsEnabledStep.defaultProps = defaultProps;
+IsEnabledStep.propTypes = propTypes;
+IsEnabledStep.defaultProps = {};
 
 export default withLocalize(IsEnabledStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index 85ac09151b61..f285a021a1d3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,13 +1,10 @@
 import React from 'react';
-import Navigation from '../../../../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
-import ROUTES from '../../../../../ROUTES';
 import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
+import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
 import StepWrapper from "../StepWrapper/StepWrapper";
 
-const defaultProps = {};
-
 function SuccessStep({translate}) {
     return (
         <StepWrapper
@@ -23,13 +20,13 @@ function SuccessStep({translate}) {
                 description={translate('twoFactorAuth.congrats')}
                 shouldShowButton
                 buttonText={translate('common.buttonConfirm')}
-                onButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
+                onButtonPress={TwoFactorAuthActions.quitAndNavigateBackToSettings}
             />
         </StepWrapper>
     );
 }
 
 SuccessStep.propTypes = withLocalizePropTypes;
-SuccessStep.defaultProps = defaultProps;
+SuccessStep.defaultProps = {};
 
 export default withLocalize(SuccessStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index d4fa4469fdb1..9f260a4e7517 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -2,11 +2,9 @@ import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
-import Navigation from '../../../../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import compose from '../../../../../libs/compose';
 import * as Session from '../../../../../libs/actions/Session';
-import ROUTES from '../../../../../ROUTES';
 import styles from '../../../../../styles/styles';
 import Button from '../../../../../components/Button';
 import Text from '../../../../../components/Text';
@@ -41,6 +39,9 @@ const propTypes = {
         /** Server-side errors in the submitted authentication code */
         errors: PropTypes.objectOf(PropTypes.string),
     }),
+
+    /** Method to set the next step */
+    setStep: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -54,23 +55,20 @@ const defaultProps = {
 };
 
 
-const LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
+const TROUBLESHOOTING_LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
 
 function VerifyStep({translate, setStep, account}) {
     const formRef = React.useRef(null);
 
     useEffect(() => {
         Session.clearAccountMessages();
-        return () => {
-            TwoFactorAuthActions.clearTwoFactorAuthData();
-        };
     }, []);
 
     useEffect(() => {
         if (!account.requiresTwoFactorAuth) {
             return;
         }
-        Navigation.navigate(ROUTES.SETTINGS_2FA_SUCCESS);
+        setStep(CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS);
     }, [account.requiresTwoFactorAuth]);
 
     /**
@@ -104,8 +102,9 @@ function VerifyStep({translate, setStep, account}) {
             stepCounter={{
                 step: 2,
                 text: translate('twoFactorAuth.stepVerify'),
+                total: 3,
             }}
-            onBackButtonPress={() => setStep(0)}
+            onBackButtonPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES)}
         >
             <ScrollView
                 style={styles.mb5}
@@ -114,7 +113,7 @@ function VerifyStep({translate, setStep, account}) {
                 <View style={[styles.ph5, styles.mt3]}>
                     <Text>
                         {translate('twoFactorAuth.scanCode')}
-                        <TextLink href={LINK}>
+                        <TextLink href={TROUBLESHOOTING_LINK}>
                             {' '}
                             {translate('twoFactorAuth.authenticatorApp')}
                         </TextLink>
@@ -155,11 +154,10 @@ function VerifyStep({translate, setStep, account}) {
                     text={translate('common.next')}
                     isLoading={account.isLoading}
                     onPress={() => {
-                        // if (!formRef.current) {
-                        //     return;
-                        // }
-                        // formRef.current.validateAndSubmitForm();
-                        setStep();
+                        if (!formRef.current) {
+                            return;
+                        }
+                        formRef.current.validateAndSubmitForm();
                     }}
                 />
             </FixedFooter>
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 130cd81edf3d..c8a078ab9036 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -1,55 +1,66 @@
-import React, {useEffect, useState} from 'react';
-import {Text, View} from "react-native";
+import React, {useCallback, useEffect, useState} from 'react';
+import {withOnyx} from "react-native-onyx";
+import PropTypes from "prop-types";
 import CodesStep from "./Steps/CodesStep";
 import DisableStep from "./Steps/DisableStep";
 import IsEnabledStep from "./Steps/IsEnabledStep";
 import VerifyStep from "./Steps/VerifyStep";
 import SuccessStep from "./Steps/SuccessStep";
-import compose from "../../../../libs/compose";
-import withLocalize from "../../../../components/withLocalize";
-
-import {withOnyx} from "react-native-onyx";
 import ONYXKEYS from "../../../../ONYXKEYS";
+import CONST from "../../../../CONST";
+import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+
+const propTypes = {
+    account: PropTypes.shape({
+        /** Whether or not the user has two factor authentication enabled */
+        requiresTwoFactorAuth: PropTypes.bool,
 
-const STEPS = {
-    CODES: 'CODES',
-    VERIFY: 'VERIFY',
-    SUCCESS: 'SUCCESS',
-    IS_ENABLED: 'IS_ENABLED',
-    DISABLE: 'DISABLE'
+        /** The current step in the two factor authentication process */
+        twoFactorAuthStep: PropTypes.string,
+    }),
+}
+
+const defaultProps = {
+    account: {
+        requiresTwoFactorAuth: false,
+        twoFactorAuthStep: '',
+    }
 }
 
-// requiresTwoFactorAuth
-function TwoFactorAuthPage(props) {
-    const [step, setStep] = useState(STEPS.CODES);
+function TwoFactorAuthPage({account,}) {
+    const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     useEffect(() => {
-        if (props.account.requiresTwoFactorAuth) {
-            setStep(STEPS.IS_ENABLED);
+        if (account.twoFactorAuthStep) {
+            setCurrentStep(account.twoFactorAuthStep);
+            return
+        }
+        if (account.requiresTwoFactorAuth) {
+            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED);
         } else {
-            setStep(STEPS.CODES);
+            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
         }
-        return () => console.log('unmount')
-    }, []);
-
-
+    }, [account.requiresTwoFactorAuth]);
 
-    function handleSetStep(stepToSet) {
-        return () => setStep(stepToSet);
-    }
+    const handleSetStep = useCallback((step) => {
+        TwoFactorAuthActions.setTwoFactorAuthStep(step)
+        setCurrentStep(step)
+    }, []);
 
     const renderStep = () => {
-        switch (step) {
-            case STEPS.CODES:
-                return <CodesStep setStep={handleSetStep(STEPS.VERIFY)}/>;
-            case STEPS.VERIFY:
-                return <VerifyStep setStep={handleSetStep(STEPS.SUCCESS)}/>;
-            case STEPS.SUCCESS:
+        switch (currentStep) {
+            case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
+                return <CodesStep setStep={handleSetStep}/>;
+            case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
+                return <VerifyStep setStep={handleSetStep}/>;
+            case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
                 return <SuccessStep/>;
-            case STEPS.IS_ENABLED:
-                return <IsEnabledStep setStep={handleSetStep(STEPS.DISABLE)}/>;
-            case STEPS.DISABLE:
-                return <DisableStep />;
+            case CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED:
+                return <IsEnabledStep setStep={handleSetStep}/>;
+            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLE:
+                return <DisableStep/>;
+            default:
+                return <CodesStep setStep={handleSetStep}/>;
         }
     }
 
@@ -60,9 +71,10 @@ function TwoFactorAuthPage(props) {
     );
 };
 
+TwoFactorAuthPage.propTypes = propTypes;
+TwoFactorAuthPage.defaultProps = defaultProps;
 
-export default compose(
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(TwoFactorAuthPage);
+
+export default withOnyx({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(TwoFactorAuthPage);

From 2478625ea0099b7a7d8dfb4a66ec87393ea46ea7 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 08:48:53 +0200
Subject: [PATCH 04/23] fix: redirect to isenabled step instead back to
 settings

---
 .../TwoFactorAuth/Steps/SuccessStep.js         | 18 +++++++++++++++---
 .../TwoFactorAuth/TwoFactorAuthPage.js         |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index f285a021a1d3..00b6809c7b05 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,11 +1,20 @@
 import React from 'react';
+import PropTypes from "prop-types";
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
 import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
+import CONST from "../../../../../CONST";
 import StepWrapper from "../StepWrapper/StepWrapper";
 
-function SuccessStep({translate}) {
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Method to set the next step */
+    setStep: PropTypes.func.isRequired,
+}
+
+function SuccessStep({translate, setStep}) {
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -20,13 +29,16 @@ function SuccessStep({translate}) {
                 description={translate('twoFactorAuth.congrats')}
                 shouldShowButton
                 buttonText={translate('common.buttonConfirm')}
-                onButtonPress={TwoFactorAuthActions.quitAndNavigateBackToSettings}
+                onButtonPress={() => {
+                    TwoFactorAuthActions.clearTwoFactorAuthData();
+                    setStep(CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED);
+                }}
             />
         </StepWrapper>
     );
 }
 
-SuccessStep.propTypes = withLocalizePropTypes;
+SuccessStep.propTypes = propTypes;
 SuccessStep.defaultProps = {};
 
 export default withLocalize(SuccessStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index c8a078ab9036..54265835bc81 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -54,7 +54,7 @@ function TwoFactorAuthPage({account,}) {
             case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
                 return <VerifyStep setStep={handleSetStep}/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep/>;
+                return <SuccessStep setStep={handleSetStep}/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED:
                 return <IsEnabledStep setStep={handleSetStep}/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLE:

From 9b6f5ddef9b6d2cbf57f0e8e8d0c3e3cede43dfc Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 10:10:02 +0200
Subject: [PATCH 05/23] fix: remove unnecessary object

---
 src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
index cf888fa8b6df..fb117abd1d4e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
@@ -33,6 +33,5 @@ function DisableStep({translate}) {
 }
 
 DisableStep.propTypes = withLocalizePropTypes;
-DisableStep.defaultProps = {};
 
 export default withLocalize(DisableStep);

From e5b0cc03bd7f037b9ed52b4d06a57e0fb5c931ba Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 10:30:55 +0200
Subject: [PATCH 06/23] refactor: use context

---
 .../Security/TwoFactorAuth/Steps/CodesStep.js    |  8 ++++----
 .../TwoFactorAuth/Steps/IsEnabledStep.js         | 16 +++++-----------
 .../Security/TwoFactorAuth/Steps/SuccessStep.js  | 14 ++++----------
 .../Security/TwoFactorAuth/Steps/VerifyStep.js   |  9 ++++-----
 .../TwoFactorAuth/TwoFactorAuthContext/index.js  |  4 ++++
 .../TwoFactorAuthContext/useTwoFactorAuth.js     |  6 ++++++
 .../Security/TwoFactorAuth/TwoFactorAuthPage.js  | 15 ++++++++-------
 7 files changed, 35 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index ee4f93b0720d..247f79c7b846 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -22,6 +22,7 @@ import localFileDownload from '../../../../../libs/localFileDownload';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
 import CONST from "../../../../../CONST";
+import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -33,9 +34,6 @@ const propTypes = {
         /** If recovery codes are loading */
         isLoading: PropTypes.bool,
     }),
-
-    /** Method to set the next step */
-    setStep: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -44,9 +42,11 @@ const defaultProps = {
     },
 };
 
-function CodesStep({translate, setStep, account, ...dimensionsProps}) {
+function CodesStep({translate, account, ...dimensionsProps}) {
     const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
 
+    const {setStep} = useTwoFactorAuthContext();
+
     useEffect(() => {
         if (account.recoveryCodes) {
             return;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index 0c80bb6698dc..b7002f5c2752 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
 import {Text, View, ScrollView} from 'react-native';
-import PropTypes from "prop-types";
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import Section from '../../../../../components/Section';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
@@ -11,17 +10,13 @@ import ConfirmModal from '../../../../../components/ConfirmModal';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
 import CONST from "../../../../../CONST";
+import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
 
-const propTypes = {
-    ...withLocalizePropTypes,
-
-    /** Method to set the next step */
-    setStep: PropTypes.func.isRequired,
-}
-
-function IsEnabledStep({translate, setStep}) {
+function IsEnabledStep({translate}) {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
+    const {setStep} = useTwoFactorAuthContext();
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -68,7 +63,6 @@ function IsEnabledStep({translate, setStep}) {
     );
 }
 
-IsEnabledStep.propTypes = propTypes;
-IsEnabledStep.defaultProps = {};
+IsEnabledStep.propTypes = withLocalizePropTypes;
 
 export default withLocalize(IsEnabledStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index 00b6809c7b05..77ee68a706a2 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,20 +1,15 @@
 import React from 'react';
-import PropTypes from "prop-types";
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
 import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
 import CONST from "../../../../../CONST";
 import StepWrapper from "../StepWrapper/StepWrapper";
+import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
 
-const propTypes = {
-    ...withLocalizePropTypes,
+function SuccessStep({translate}) {
+    const {setStep} = useTwoFactorAuthContext();
 
-    /** Method to set the next step */
-    setStep: PropTypes.func.isRequired,
-}
-
-function SuccessStep({translate, setStep}) {
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -38,7 +33,6 @@ function SuccessStep({translate, setStep}) {
     );
 }
 
-SuccessStep.propTypes = propTypes;
-SuccessStep.defaultProps = {};
+SuccessStep.propTypes = withLocalizePropTypes;
 
 export default withLocalize(SuccessStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 9f260a4e7517..21daaf042889 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -18,8 +18,8 @@ import TwoFactorAuthForm from '../TwoFactorAuthForm';
 import QRCode from '../../../../../components/QRCode';
 import expensifyLogo from '../../../../../../assets/images/expensify-logo-round-transparent.png';
 import CONST from '../../../../../CONST';
-import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 import StepWrapper from "../StepWrapper/StepWrapper";
+import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -39,9 +39,6 @@ const propTypes = {
         /** Server-side errors in the submitted authentication code */
         errors: PropTypes.objectOf(PropTypes.string),
     }),
-
-    /** Method to set the next step */
-    setStep: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -57,9 +54,11 @@ const defaultProps = {
 
 const TROUBLESHOOTING_LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
 
-function VerifyStep({translate, setStep, account}) {
+function VerifyStep({translate, account}) {
     const formRef = React.useRef(null);
 
+    const {setStep} = useTwoFactorAuthContext();
+
     useEffect(() => {
         Session.clearAccountMessages();
     }, []);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
new file mode 100644
index 000000000000..9a2287c775f3
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
@@ -0,0 +1,4 @@
+import {createContext} from 'react';
+
+const TwoFactorAuthContext = createContext();
+export default TwoFactorAuthContext;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
new file mode 100644
index 000000000000..b11de3a4447e
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
@@ -0,0 +1,6 @@
+import {useContext} from "react";
+import TwoFactorAuthContext from "./index";
+
+export default function useTwoFactorAuthContext() {
+    return useContext(TwoFactorAuthContext);
+}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 54265835bc81..50c4cebec012 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -9,6 +9,7 @@ import SuccessStep from "./Steps/SuccessStep";
 import ONYXKEYS from "../../../../ONYXKEYS";
 import CONST from "../../../../CONST";
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+import TwoFactorAuthContext from "./TwoFactorAuthContext";
 
 const propTypes = {
     account: PropTypes.shape({
@@ -50,24 +51,24 @@ function TwoFactorAuthPage({account,}) {
     const renderStep = () => {
         switch (currentStep) {
             case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep setStep={handleSetStep}/>;
+                return <CodesStep/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
-                return <VerifyStep setStep={handleSetStep}/>;
+                return <VerifyStep/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep setStep={handleSetStep}/>;
+                return <SuccessStep/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED:
-                return <IsEnabledStep setStep={handleSetStep}/>;
+                return <IsEnabledStep/>;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLE:
                 return <DisableStep/>;
             default:
-                return <CodesStep setStep={handleSetStep}/>;
+                return <CodesStep/>;
         }
     }
 
     return (
-        <>
+        <TwoFactorAuthContext.Provider value={{setStep: handleSetStep}}>
             {renderStep()}
-        </>
+        </TwoFactorAuthContext.Provider>
     );
 };
 

From caab005a015ee318381b80cec0906824aa31d130 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 11:51:59 +0200
Subject: [PATCH 07/23] fix: wip -apply requested changes

---
 src/libs/Navigation/AppNavigator/ModalStackNavigators.js      | 4 ++--
 src/pages/settings/Security/SecuritySettingsPage.js           | 1 -
 .../settings/Security/TwoFactorAuth/TwoFactorAuthPage.js      | 4 +++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 8c0db404f3f7..68e1f583652e 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -623,8 +623,8 @@ const SettingsModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const SettingsTwoFactorAuthCodes = require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default;
-            return SettingsTwoFactorAuthCodes;
+            const SettingsTwoFactorAuth = require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default;
+            return SettingsTwoFactorAuth;
         },
         name: 'Settings_TwoFactorAuth',
     },
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index c7dc9c1b4a89..f5fbc22b9c45 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -13,7 +13,6 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import MenuItem from '../../../components/MenuItem';
 import compose from '../../../libs/compose';
 import ONYXKEYS from '../../../ONYXKEYS';
-import * as Session from '../../../libs/actions/Session';
 
 const propTypes = {
     ...withLocalizePropTypes,
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 50c4cebec012..44984ba7f95f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -28,7 +28,7 @@ const defaultProps = {
     }
 }
 
-function TwoFactorAuthPage({account,}) {
+function TwoFactorAuthPage({account}) {
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     useEffect(() => {
@@ -41,6 +41,8 @@ function TwoFactorAuthPage({account,}) {
         } else {
             setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
         }
+        // we don't want to trigger the hook every time the step changes, only when the requiresTwoFactorAuth changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [account.requiresTwoFactorAuth]);
 
     const handleSetStep = useCallback((step) => {

From 8c637630437548c4acc35a24be135f0ff9e95dea Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 16:41:55 +0200
Subject: [PATCH 08/23] fix: apply requested changes

---
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  | 39 ++++---------
 .../StepWrapper/StepWrapperPropTypes.js       | 19 +++++++
 .../Security/TwoFactorAuth/Steps/CodesStep.js | 47 +++++-----------
 .../TwoFactorAuth/Steps/DisableStep.js        | 10 ++--
 .../TwoFactorAuth/Steps/IsEnabledStep.js      | 10 ++--
 .../TwoFactorAuth/Steps/SuccessStep.js        | 10 ++--
 .../TwoFactorAuth/Steps/VerifyStep.js         | 55 ++++---------------
 .../TwoFactorAuth/TwoFactorAuthPage.js        | 26 ++-------
 .../TwoFactorAuth/TwoFactorAuthPropTypes.js   | 30 ++++++++++
 9 files changed, 103 insertions(+), 143 deletions(-)
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 90a7eb0f0d98..3a808a3086c0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -1,41 +1,23 @@
 import React from 'react';
-import PropTypes from "prop-types";
 import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
 import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
+import StepWrapperPropTypes from "./StepWrapperPropTypes";
 
-const propTypes = {
-    /** Title of the Header */
-    title: PropTypes.string,
+function StepWrapper({
+    title = '',
+    stepCounter = null,
+    onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
+    children = null
+}) {
+    const shouldShowStepCounter = !!stepCounter;
 
-    /** Data to display a step counter in the header */
-    stepCounter: PropTypes.shape({
-        step: PropTypes.number,
-        total: PropTypes.number,
-        text: PropTypes.string,
-    }),
-
-    /** Method to trigger when pressing back button of the header */
-    onBackButtonPress: PropTypes.func,
-
-    /** Children components */
-    children: PropTypes.node,
-}
-
-const defaultProps = {
-    title: '',
-    stepCounter: null,
-    onBackButtonPress: TwoFactorAuthActions.quitAndNavigateBackToSettings,
-    children: null,
-};
-
-function StepWrapper({title, stepCounter, onBackButtonPress, children}) {
     return (
         <ScreenWrapper shouldShowOfflineIndicator={false}>
             <HeaderWithBackButton
                 title={title}
-                shouldShowStepCounter={!!stepCounter}
+                shouldShowStepCounter={shouldShowStepCounter}
                 stepCounter={stepCounter}
                 onBackButtonPress={onBackButtonPress}
             />
@@ -46,7 +28,6 @@ function StepWrapper({title, stepCounter, onBackButtonPress, children}) {
     );
 }
 
-StepWrapper.propTypes = propTypes;
-StepWrapper.defaultProps = defaultProps;
+StepWrapper.propTypes = StepWrapperPropTypes;
 
 export default StepWrapper;
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
new file mode 100644
index 000000000000..69caa550d5f9
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+
+export default {
+    /** Title of the Header */
+    title: PropTypes.string,
+
+    /** Data to display a step counter in the header */
+    stepCounter: PropTypes.shape({
+        step: PropTypes.number,
+        total: PropTypes.number,
+        text: PropTypes.string,
+    }),
+
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress: PropTypes.func,
+
+    /** Children components */
+    children: PropTypes.node,
+}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 247f79c7b846..c655137021ed 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -3,12 +3,8 @@ import {withOnyx} from 'react-native-onyx';
 import {ActivityIndicator, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
-import PropTypes from 'prop-types';
 import * as Expensicons from '../../../../../components/Icon/Expensicons';
-import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
-import compose from '../../../../../libs/compose';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../../components/withWindowDimensions';
 import styles from '../../../../../styles/styles';
 import FixedFooter from '../../../../../components/FixedFooter';
 import Button from '../../../../../components/Button';
@@ -20,29 +16,18 @@ import Clipboard from '../../../../../libs/Clipboard';
 import themeColors from '../../../../../styles/themes/default';
 import localFileDownload from '../../../../../libs/localFileDownload';
 import * as Session from "../../../../../libs/actions/Session";
-import StepWrapper from "../StepWrapper/StepWrapper";
 import CONST from "../../../../../CONST";
 import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
+import useLocalize from "../../../../../hooks/useLocalize";
+import useWindowDimensions from "../../../../../hooks/useWindowDimensions";
+import StepWrapper from "../StepWrapper/StepWrapper";
+import {defaultAccount, TwoFactorAuthPropTypes} from "../TwoFactorAuthPropTypes";
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
-    account: PropTypes.shape({
-        /** User recovery codes for setting up 2-FA */
-        recoveryCodes: PropTypes.string,
-
-        /** If recovery codes are loading */
-        isLoading: PropTypes.bool,
-    }),
-};
 
-const defaultProps = {
-    account: {
-        recoveryCodes: '',
-    },
-};
+function CodesStep({account = defaultAccount}) {
+    const {translate} = useLocalize();
+    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
 
-function CodesStep({translate, account, ...dimensionsProps}) {
     const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
 
     const {setStep} = useTwoFactorAuthContext();
@@ -52,7 +37,7 @@ function CodesStep({translate, account, ...dimensionsProps}) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
-    }, []);
+    }, [account.recoveryCodes]);
 
 
     return (
@@ -74,7 +59,7 @@ function CodesStep({translate, account, ...dimensionsProps}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox(dimensionsProps)}>
+                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
                         {account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={themeColors.spinner}/>
@@ -134,13 +119,9 @@ function CodesStep({translate, account, ...dimensionsProps}) {
     );
 }
 
-CodesStep.propTypes = propTypes;
-CodesStep.defaultProps = defaultProps;
+CodesStep.propTypes = TwoFactorAuthPropTypes;
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(CodesStep);
+// eslint-disable-next-line rulesdir/onyx-props-must-have-default
+export default withOnyx({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(CodesStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
index fb117abd1d4e..f592f7c4ba77 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
 import styles from '../../../../../styles/styles';
 import BlockingView from '../../../../../components/BlockingViews/BlockingView';
@@ -7,9 +6,12 @@ import FixedFooter from '../../../../../components/FixedFooter';
 import Button from '../../../../../components/Button';
 import variables from '../../../../../styles/variables';
 import StepWrapper from "../StepWrapper/StepWrapper";
+import useLocalize from "../../../../../hooks/useLocalize";
 import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
 
-function DisableStep({translate}) {
+function DisableStep() {
+    const {translate} = useLocalize();
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.disableTwoFactorAuth')}
@@ -32,6 +34,4 @@ function DisableStep({translate}) {
     );
 }
 
-DisableStep.propTypes = withLocalizePropTypes;
-
-export default withLocalize(DisableStep);
+export default DisableStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index b7002f5c2752..dbb3f8fe494a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
 import {Text, View, ScrollView} from 'react-native';
-import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import Section from '../../../../../components/Section';
 import * as Illustrations from '../../../../../components/Icon/Illustrations';
 import * as Expensicons from '../../../../../components/Icon/Expensicons';
@@ -10,13 +9,16 @@ import ConfirmModal from '../../../../../components/ConfirmModal';
 import * as Session from "../../../../../libs/actions/Session";
 import StepWrapper from "../StepWrapper/StepWrapper";
 import CONST from "../../../../../CONST";
+import useLocalize from "../../../../../hooks/useLocalize";
 import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
 
-function IsEnabledStep({translate}) {
+function IsEnabledStep() {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
     const {setStep} = useTwoFactorAuthContext();
 
+    const {translate} = useLocalize();
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -63,6 +65,4 @@ function IsEnabledStep({translate}) {
     );
 }
 
-IsEnabledStep.propTypes = withLocalizePropTypes;
-
-export default withLocalize(IsEnabledStep);
+export default IsEnabledStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index 77ee68a706a2..36c215d21b32 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,15 +1,17 @@
 import React from 'react';
-import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
 import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
 import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
 import CONST from "../../../../../CONST";
 import StepWrapper from "../StepWrapper/StepWrapper";
 import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
+import useLocalize from "../../../../../hooks/useLocalize";
 
-function SuccessStep({translate}) {
+function SuccessStep() {
     const {setStep} = useTwoFactorAuthContext();
 
+    const {translate} = useLocalize();
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -33,6 +35,4 @@ function SuccessStep({translate}) {
     );
 }
 
-SuccessStep.propTypes = withLocalizePropTypes;
-
-export default withLocalize(SuccessStep);
+export default SuccessStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 21daaf042889..a85bee67bd11 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -1,9 +1,6 @@
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {ScrollView, View} from 'react-native';
-import PropTypes from 'prop-types';
-import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
-import compose from '../../../../../libs/compose';
 import * as Session from '../../../../../libs/actions/Session';
 import styles from '../../../../../styles/styles';
 import Button from '../../../../../components/Button';
@@ -20,41 +17,14 @@ import expensifyLogo from '../../../../../../assets/images/expensify-logo-round-
 import CONST from '../../../../../CONST';
 import StepWrapper from "../StepWrapper/StepWrapper";
 import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
-
-const propTypes = {
-    ...withLocalizePropTypes,
-    account: PropTypes.shape({
-        /** Whether this account has 2FA enabled or not */
-        requiresTwoFactorAuth: PropTypes.bool,
-
-        /** Secret key to enable 2FA within the authenticator app */
-        twoFactorAuthSecretKey: PropTypes.string,
-
-        /** User primary login to attach to the authenticator QRCode */
-        primaryLogin: PropTypes.string,
-
-        /** User is submitting the authentication code */
-        isLoading: PropTypes.bool,
-
-        /** Server-side errors in the submitted authentication code */
-        errors: PropTypes.objectOf(PropTypes.string),
-    }),
-};
-
-const defaultProps = {
-    account: {
-        requiresTwoFactorAuth: false,
-        twoFactorAuthSecretKey: '',
-        primaryLogin: '',
-        isLoading: false,
-        errors: {},
-    },
-};
-
+import useLocalize from "../../../../../hooks/useLocalize";
+import {defaultAccount, TwoFactorAuthPropTypes} from "../TwoFactorAuthPropTypes";
 
 const TROUBLESHOOTING_LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
 
-function VerifyStep({translate, account}) {
+function VerifyStep({account = defaultAccount}) {
+    const {translate} = useLocalize();
+
     const formRef = React.useRef(null);
 
     const {setStep} = useTwoFactorAuthContext();
@@ -68,7 +38,7 @@ function VerifyStep({translate, account}) {
             return;
         }
         setStep(CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS);
-    }, [account.requiresTwoFactorAuth]);
+    }, [account.requiresTwoFactorAuth, setStep]);
 
     /**
      * Splits the two-factor auth secret key in 4 chunks
@@ -164,12 +134,9 @@ function VerifyStep({translate, account}) {
     );
 }
 
-VerifyStep.propTypes = propTypes;
-VerifyStep.defaultProps = defaultProps;
+VerifyStep.propTypes = TwoFactorAuthPropTypes;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(VerifyStep);
+// eslint-disable-next-line rulesdir/onyx-props-must-have-default
+export default withOnyx({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 44984ba7f95f..0397f0d9449e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {withOnyx} from "react-native-onyx";
-import PropTypes from "prop-types";
 import CodesStep from "./Steps/CodesStep";
 import DisableStep from "./Steps/DisableStep";
 import IsEnabledStep from "./Steps/IsEnabledStep";
@@ -10,25 +9,9 @@ import ONYXKEYS from "../../../../ONYXKEYS";
 import CONST from "../../../../CONST";
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
 import TwoFactorAuthContext from "./TwoFactorAuthContext";
+import {defaultAccount, TwoFactorAuthPropTypes} from "./TwoFactorAuthPropTypes";
 
-const propTypes = {
-    account: PropTypes.shape({
-        /** Whether or not the user has two factor authentication enabled */
-        requiresTwoFactorAuth: PropTypes.bool,
-
-        /** The current step in the two factor authentication process */
-        twoFactorAuthStep: PropTypes.string,
-    }),
-}
-
-const defaultProps = {
-    account: {
-        requiresTwoFactorAuth: false,
-        twoFactorAuthStep: '',
-    }
-}
-
-function TwoFactorAuthPage({account}) {
+function TwoFactorAuthPage({account = defaultAccount}) {
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     useEffect(() => {
@@ -74,10 +57,9 @@ function TwoFactorAuthPage({account}) {
     );
 };
 
-TwoFactorAuthPage.propTypes = propTypes;
-TwoFactorAuthPage.defaultProps = defaultProps;
-
+TwoFactorAuthPage.propTypes = TwoFactorAuthPropTypes;
 
+// eslint-disable-next-line rulesdir/onyx-props-must-have-default
 export default withOnyx({
     account: {key: ONYXKEYS.ACCOUNT},
 })(TwoFactorAuthPage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
new file mode 100644
index 000000000000..defb974cb05d
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
@@ -0,0 +1,30 @@
+import PropTypes from "prop-types";
+
+const TwoFactorAuthPropTypes = {
+    account: PropTypes.shape({
+        /** Whether this account has 2FA enabled or not */
+        requiresTwoFactorAuth: PropTypes.bool,
+
+        /** Secret key to enable 2FA within the authenticator app */
+        twoFactorAuthSecretKey: PropTypes.string,
+
+        /** User primary login to attach to the authenticator QRCode */
+        primaryLogin: PropTypes.string,
+
+        /** User is submitting the authentication code */
+        isLoading: PropTypes.bool,
+
+        /** Server-side errors in the submitted authentication code */
+        errors: PropTypes.objectOf(PropTypes.string),
+    }),
+};
+
+const defaultAccount = {
+    requiresTwoFactorAuth: false,
+    twoFactorAuthStep: '',
+}
+
+export {
+    TwoFactorAuthPropTypes,
+    defaultAccount
+}

From 357b6b5c639df4dc6713bc07d65fe2a47f499728 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 18 Jul 2023 17:11:32 +0200
Subject: [PATCH 09/23] fix: change double bangs for boolean

---
 .../settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 3a808a3086c0..abbabc00794e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -11,7 +11,7 @@ function StepWrapper({
     onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
     children = null
 }) {
-    const shouldShowStepCounter = !!stepCounter;
+    const shouldShowStepCounter = Boolean(stepCounter);
 
     return (
         <ScreenWrapper shouldShowOfflineIndicator={false}>

From 431c979917318178a1e29a87fe142eeccab3bde3 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 19 Jul 2023 11:08:35 +0200
Subject: [PATCH 10/23] fix: run prettier

---
 src/CONST.js                                  |  2 +-
 src/libs/actions/TwoFactorAuthActions.js      | 10 ++--
 .../settings/Security/SecuritySettingsPage.js |  2 +-
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  | 13 ++---
 .../StepWrapper/StepWrapperPropTypes.js       |  4 +-
 .../Security/TwoFactorAuth/Steps/CodesStep.js | 18 ++++---
 .../TwoFactorAuth/Steps/DisableStep.js        | 10 ++--
 .../TwoFactorAuth/Steps/IsEnabledStep.js      | 14 +++---
 .../TwoFactorAuth/Steps/SuccessStep.js        | 10 ++--
 .../TwoFactorAuth/Steps/VerifyStep.js         | 25 ++++------
 .../TwoFactorAuthContext/useTwoFactorAuth.js  |  4 +-
 .../TwoFactorAuth/TwoFactorAuthPage.js        | 48 +++++++++----------
 .../TwoFactorAuth/TwoFactorAuthPropTypes.js   |  9 ++--
 13 files changed, 69 insertions(+), 100 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 846305455d36..6501bab444ab 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2542,7 +2542,7 @@ const CONST = {
         SUCCESS: 'SUCCESS',
         IS_ENABLED: 'IS_ENABLED',
         DISABLE: 'DISABLE',
-    }
+    },
 };
 
 export default CONST;
diff --git a/src/libs/actions/TwoFactorAuthActions.js b/src/libs/actions/TwoFactorAuthActions.js
index 5f8aca224305..80ec357c5d79 100644
--- a/src/libs/actions/TwoFactorAuthActions.js
+++ b/src/libs/actions/TwoFactorAuthActions.js
@@ -1,7 +1,7 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
-import Navigation from "../Navigation/Navigation";
-import ROUTES from "../../ROUTES";
+import Navigation from '../Navigation/Navigation';
+import ROUTES from '../../ROUTES';
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
@@ -19,8 +19,4 @@ function quitAndNavigateBackToSettings() {
     Navigation.goBack(ROUTES.SETTINGS_SECURITY);
 }
 
-export {
-    clearTwoFactorAuthData,
-    setTwoFactorAuthStep,
-    quitAndNavigateBackToSettings,
-};
+export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings};
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index f5fbc22b9c45..ed44b24664d5 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -35,7 +35,7 @@ function SecuritySettingsPage(props) {
         {
             translationKey: 'twoFactorAuth.headerTitle',
             icon: Expensicons.Shield,
-            action: () => Navigation.navigate(ROUTES.SETTINGS_2FA)
+            action: () => Navigation.navigate(ROUTES.SETTINGS_2FA),
         },
         {
             translationKey: 'passwordPage.changePassword',
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index abbabc00794e..219fc354b85a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -3,14 +3,9 @@ import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton
 import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
 import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
-import StepWrapperPropTypes from "./StepWrapperPropTypes";
+import StepWrapperPropTypes from './StepWrapperPropTypes';
 
-function StepWrapper({
-    title = '',
-    stepCounter = null,
-    onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
-    children = null
-}) {
+function StepWrapper({title = '', stepCounter = null, onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings, children = null}) {
     const shouldShowStepCounter = Boolean(stepCounter);
 
     return (
@@ -21,9 +16,7 @@ function StepWrapper({
                 stepCounter={stepCounter}
                 onBackButtonPress={onBackButtonPress}
             />
-            <FullPageOfflineBlockingView>
-                {children}
-            </FullPageOfflineBlockingView>
+            <FullPageOfflineBlockingView>{children}</FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
index 69caa550d5f9..44635035f364 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
@@ -1,4 +1,4 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 export default {
     /** Title of the Header */
@@ -16,4 +16,4 @@ export default {
 
     /** Children components */
     children: PropTypes.node,
-}
+};
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index c655137021ed..62d7569e7a2c 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -15,14 +15,13 @@ import ONYXKEYS from '../../../../../ONYXKEYS';
 import Clipboard from '../../../../../libs/Clipboard';
 import themeColors from '../../../../../styles/themes/default';
 import localFileDownload from '../../../../../libs/localFileDownload';
-import * as Session from "../../../../../libs/actions/Session";
-import CONST from "../../../../../CONST";
-import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
-import useLocalize from "../../../../../hooks/useLocalize";
-import useWindowDimensions from "../../../../../hooks/useWindowDimensions";
-import StepWrapper from "../StepWrapper/StepWrapper";
-import {defaultAccount, TwoFactorAuthPropTypes} from "../TwoFactorAuthPropTypes";
-
+import * as Session from '../../../../../libs/actions/Session';
+import CONST from '../../../../../CONST';
+import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
+import useLocalize from '../../../../../hooks/useLocalize';
+import useWindowDimensions from '../../../../../hooks/useWindowDimensions';
+import StepWrapper from '../StepWrapper/StepWrapper';
+import {defaultAccount, TwoFactorAuthPropTypes} from '../TwoFactorAuthPropTypes';
 
 function CodesStep({account = defaultAccount}) {
     const {translate} = useLocalize();
@@ -39,7 +38,6 @@ function CodesStep({account = defaultAccount}) {
         Session.toggleTwoFactorAuth(true);
     }, [account.recoveryCodes]);
 
-
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -62,7 +60,7 @@ function CodesStep({account = defaultAccount}) {
                     <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
                         {account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
-                                <ActivityIndicator color={themeColors.spinner}/>
+                                <ActivityIndicator color={themeColors.spinner} />
                             </View>
                         ) : (
                             <>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
index f592f7c4ba77..0a4c0846848f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
@@ -5,17 +5,15 @@ import BlockingView from '../../../../../components/BlockingViews/BlockingView';
 import FixedFooter from '../../../../../components/FixedFooter';
 import Button from '../../../../../components/Button';
 import variables from '../../../../../styles/variables';
-import StepWrapper from "../StepWrapper/StepWrapper";
-import useLocalize from "../../../../../hooks/useLocalize";
-import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
+import StepWrapper from '../StepWrapper/StepWrapper';
+import useLocalize from '../../../../../hooks/useLocalize';
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 
 function DisableStep() {
     const {translate} = useLocalize();
 
     return (
-        <StepWrapper
-            title={translate('twoFactorAuth.disableTwoFactorAuth')}
-        >
+        <StepWrapper title={translate('twoFactorAuth.disableTwoFactorAuth')}>
             <BlockingView
                 icon={Illustrations.LockOpen}
                 iconWidth={variables.modalTopIconWidth}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index dbb3f8fe494a..668038a06601 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -6,11 +6,11 @@ import * as Expensicons from '../../../../../components/Icon/Expensicons';
 import themeColors from '../../../../../styles/themes/default';
 import styles from '../../../../../styles/styles';
 import ConfirmModal from '../../../../../components/ConfirmModal';
-import * as Session from "../../../../../libs/actions/Session";
-import StepWrapper from "../StepWrapper/StepWrapper";
-import CONST from "../../../../../CONST";
-import useLocalize from "../../../../../hooks/useLocalize";
-import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
+import * as Session from '../../../../../libs/actions/Session';
+import StepWrapper from '../StepWrapper/StepWrapper';
+import CONST from '../../../../../CONST';
+import useLocalize from '../../../../../hooks/useLocalize';
+import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
 
 function IsEnabledStep() {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
@@ -20,9 +20,7 @@ function IsEnabledStep() {
     const {translate} = useLocalize();
 
     return (
-        <StepWrapper
-            title={translate('twoFactorAuth.headerTitle')}
-        >
+        <StepWrapper title={translate('twoFactorAuth.headerTitle')}>
             <ScrollView>
                 <Section
                     title={translate('twoFactorAuth.twoFactorAuthEnabled')}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index 36c215d21b32..b132fbb50130 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
-import * as TwoFactorAuthActions from "../../../../../libs/actions/TwoFactorAuthActions";
-import CONST from "../../../../../CONST";
-import StepWrapper from "../StepWrapper/StepWrapper";
-import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
-import useLocalize from "../../../../../hooks/useLocalize";
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
+import CONST from '../../../../../CONST';
+import StepWrapper from '../StepWrapper/StepWrapper';
+import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
+import useLocalize from '../../../../../hooks/useLocalize';
 
 function SuccessStep() {
     const {setStep} = useTwoFactorAuthContext();
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index a85bee67bd11..e2f46604c68f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -15,12 +15,12 @@ import TwoFactorAuthForm from '../TwoFactorAuthForm';
 import QRCode from '../../../../../components/QRCode';
 import expensifyLogo from '../../../../../../assets/images/expensify-logo-round-transparent.png';
 import CONST from '../../../../../CONST';
-import StepWrapper from "../StepWrapper/StepWrapper";
-import useTwoFactorAuthContext from "../TwoFactorAuthContext/useTwoFactorAuth";
-import useLocalize from "../../../../../hooks/useLocalize";
-import {defaultAccount, TwoFactorAuthPropTypes} from "../TwoFactorAuthPropTypes";
+import StepWrapper from '../StepWrapper/StepWrapper';
+import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
+import useLocalize from '../../../../../hooks/useLocalize';
+import {defaultAccount, TwoFactorAuthPropTypes} from '../TwoFactorAuthPropTypes';
 
-const TROUBLESHOOTING_LINK = "https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1"
+const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
 function VerifyStep({account = defaultAccount}) {
     const {translate} = useLocalize();
@@ -64,7 +64,6 @@ function VerifyStep({account = defaultAccount}) {
         return `otpauth://totp/Expensify:${account.primaryLogin}?secret=${account.twoFactorAuthSecretKey}&issuer=Expensify`;
     }
 
-
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -82,11 +81,7 @@ function VerifyStep({account = defaultAccount}) {
                 <View style={[styles.ph5, styles.mt3]}>
                     <Text>
                         {translate('twoFactorAuth.scanCode')}
-                        <TextLink href={TROUBLESHOOTING_LINK}>
-                            {' '}
-                            {translate('twoFactorAuth.authenticatorApp')}
-                        </TextLink>
-                        .
+                        <TextLink href={TROUBLESHOOTING_LINK}> {translate('twoFactorAuth.authenticatorApp')}</TextLink>.
                     </Text>
                     <View style={[styles.alignItemsCenter, styles.mt5]}>
                         <QRCode
@@ -97,10 +92,8 @@ function VerifyStep({account = defaultAccount}) {
                         />
                     </View>
                     <Text style={styles.mt5}>{translate('twoFactorAuth.addKey')}</Text>
-                    <View
-                        style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                        {Boolean(account.twoFactorAuthSecretKey) &&
-                            <Text>{splitSecretInChunks(account.twoFactorAuthSecretKey)}</Text>}
+                    <View style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        {Boolean(account.twoFactorAuthSecretKey) && <Text>{splitSecretInChunks(account.twoFactorAuthSecretKey)}</Text>}
                         <PressableWithDelayToggle
                             text={translate('twoFactorAuth.copy')}
                             textChecked={translate('common.copied')}
@@ -114,7 +107,7 @@ function VerifyStep({account = defaultAccount}) {
                     <Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
                 </View>
                 <View style={[styles.mt3, styles.mh5]}>
-                    <TwoFactorAuthForm innerRef={formRef}/>
+                    <TwoFactorAuthForm innerRef={formRef} />
                 </View>
             </ScrollView>
             <FixedFooter style={[styles.mtAuto, styles.pt2]}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
index b11de3a4447e..c0e45a21b050 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
@@ -1,5 +1,5 @@
-import {useContext} from "react";
-import TwoFactorAuthContext from "./index";
+import {useContext} from 'react';
+import TwoFactorAuthContext from './index';
 
 export default function useTwoFactorAuthContext() {
     return useContext(TwoFactorAuthContext);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 0397f0d9449e..225a68d8f50c 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -1,15 +1,15 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {withOnyx} from "react-native-onyx";
-import CodesStep from "./Steps/CodesStep";
-import DisableStep from "./Steps/DisableStep";
-import IsEnabledStep from "./Steps/IsEnabledStep";
-import VerifyStep from "./Steps/VerifyStep";
-import SuccessStep from "./Steps/SuccessStep";
-import ONYXKEYS from "../../../../ONYXKEYS";
-import CONST from "../../../../CONST";
+import {withOnyx} from 'react-native-onyx';
+import CodesStep from './Steps/CodesStep';
+import DisableStep from './Steps/DisableStep';
+import IsEnabledStep from './Steps/IsEnabledStep';
+import VerifyStep from './Steps/VerifyStep';
+import SuccessStep from './Steps/SuccessStep';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import CONST from '../../../../CONST';
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
-import TwoFactorAuthContext from "./TwoFactorAuthContext";
-import {defaultAccount, TwoFactorAuthPropTypes} from "./TwoFactorAuthPropTypes";
+import TwoFactorAuthContext from './TwoFactorAuthContext';
+import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
 
 function TwoFactorAuthPage({account = defaultAccount}) {
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
@@ -17,7 +17,7 @@ function TwoFactorAuthPage({account = defaultAccount}) {
     useEffect(() => {
         if (account.twoFactorAuthStep) {
             setCurrentStep(account.twoFactorAuthStep);
-            return
+            return;
         }
         if (account.requiresTwoFactorAuth) {
             setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED);
@@ -29,33 +29,29 @@ function TwoFactorAuthPage({account = defaultAccount}) {
     }, [account.requiresTwoFactorAuth]);
 
     const handleSetStep = useCallback((step) => {
-        TwoFactorAuthActions.setTwoFactorAuthStep(step)
-        setCurrentStep(step)
+        TwoFactorAuthActions.setTwoFactorAuthStep(step);
+        setCurrentStep(step);
     }, []);
 
     const renderStep = () => {
         switch (currentStep) {
             case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep/>;
+                return <CodesStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
-                return <VerifyStep/>;
+                return <VerifyStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep/>;
+                return <SuccessStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED:
-                return <IsEnabledStep/>;
+                return <IsEnabledStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLE:
-                return <DisableStep/>;
+                return <DisableStep />;
             default:
-                return <CodesStep/>;
+                return <CodesStep />;
         }
-    }
+    };
 
-    return (
-        <TwoFactorAuthContext.Provider value={{setStep: handleSetStep}}>
-            {renderStep()}
-        </TwoFactorAuthContext.Provider>
-    );
-};
+    return <TwoFactorAuthContext.Provider value={{setStep: handleSetStep}}>{renderStep()}</TwoFactorAuthContext.Provider>;
+}
 
 TwoFactorAuthPage.propTypes = TwoFactorAuthPropTypes;
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
index defb974cb05d..a505ca51f1e3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
@@ -1,4 +1,4 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 const TwoFactorAuthPropTypes = {
     account: PropTypes.shape({
@@ -22,9 +22,6 @@ const TwoFactorAuthPropTypes = {
 const defaultAccount = {
     requiresTwoFactorAuth: false,
     twoFactorAuthStep: '',
-}
+};
 
-export {
-    TwoFactorAuthPropTypes,
-    defaultAccount
-}
+export {TwoFactorAuthPropTypes, defaultAccount};

From e3655dfcf98b33b1dff175cfa887da43d59bc411 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 26 Jul 2023 14:57:01 +0200
Subject: [PATCH 11/23] fix: rename 2fa steps

---
 src/CONST.js                                                | 4 ++--
 .../settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js  | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/SuccessStep.js    | 2 +-
 .../settings/Security/TwoFactorAuth/TwoFactorAuthPage.js    | 6 +++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 160859968599..eb7504113b77 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2549,8 +2549,8 @@ const CONST = {
         CODES: 'CODES',
         VERIFY: 'VERIFY',
         SUCCESS: 'SUCCESS',
-        IS_ENABLED: 'IS_ENABLED',
-        DISABLE: 'DISABLE',
+        ENABLED: 'ENABLED',
+        DISABLED: 'DISABLED',
     },
 };
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
index 668038a06601..d351bcbf4c05 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
@@ -46,7 +46,7 @@ function IsEnabledStep() {
                     title={translate('twoFactorAuth.disableTwoFactorAuth')}
                     onConfirm={() => {
                         setIsConfirmModalVisible(false);
-                        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLE);
+                        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLED);
                         Session.toggleTwoFactorAuth(false);
                     }}
                     onCancel={() => setIsConfirmModalVisible(false)}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index b132fbb50130..2f12f0f63f55 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -28,7 +28,7 @@ function SuccessStep() {
                 buttonText={translate('common.buttonConfirm')}
                 onButtonPress={() => {
                     TwoFactorAuthActions.clearTwoFactorAuthData();
-                    setStep(CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED);
+                    setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
                 }}
             />
         </StepWrapper>
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 225a68d8f50c..2cd05cc2b20a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -20,7 +20,7 @@ function TwoFactorAuthPage({account = defaultAccount}) {
             return;
         }
         if (account.requiresTwoFactorAuth) {
-            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED);
+            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
         } else {
             setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
         }
@@ -41,9 +41,9 @@ function TwoFactorAuthPage({account = defaultAccount}) {
                 return <VerifyStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
                 return <SuccessStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.IS_ENABLED:
+            case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
                 return <IsEnabledStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLE:
+            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
                 return <DisableStep />;
             default:
                 return <CodesStep />;

From becc4437e716af73de8b1aa8fdc3e4af9c45f475 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 26 Jul 2023 16:20:44 +0200
Subject: [PATCH 12/23] fix: apply requested changes

---
 src/libs/actions/TwoFactorAuthActions.js       |  8 ++++++--
 .../TwoFactorAuth/StepWrapper/StepWrapper.js   | 18 +++++++++++-------
 .../Security/TwoFactorAuth/Steps/CodesStep.js  |  9 ++++-----
 .../TwoFactorAuth/TwoFactorAuthPage.js         |  2 ++
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/libs/actions/TwoFactorAuthActions.js b/src/libs/actions/TwoFactorAuthActions.js
index 80ec357c5d79..3bc64b8ada4c 100644
--- a/src/libs/actions/TwoFactorAuthActions.js
+++ b/src/libs/actions/TwoFactorAuthActions.js
@@ -7,16 +7,20 @@ import ROUTES from '../../ROUTES';
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: ''});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: '', codesAreCopied: false});
 }
 
 function setTwoFactorAuthStep(twoFactorAuthStep) {
     Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
 }
 
+function setCodesAreCopied() {
+    Onyx.merge(ONYXKEYS.ACCOUNT, {codesAreCopied: true});
+}
+
 function quitAndNavigateBackToSettings() {
     clearTwoFactorAuthData();
     Navigation.goBack(ROUTES.SETTINGS_SECURITY);
 }
 
-export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings};
+export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings, setCodesAreCopied};
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 219fc354b85a..d8e012c464f1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -4,19 +4,23 @@ import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
 import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 import StepWrapperPropTypes from './StepWrapperPropTypes';
+import AnimatedStep from '../../../../../components/AnimatedStep';
+import styles from '../../../../../styles/styles';
 
 function StepWrapper({title = '', stepCounter = null, onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings, children = null}) {
     const shouldShowStepCounter = Boolean(stepCounter);
 
     return (
         <ScreenWrapper shouldShowOfflineIndicator={false}>
-            <HeaderWithBackButton
-                title={title}
-                shouldShowStepCounter={shouldShowStepCounter}
-                stepCounter={stepCounter}
-                onBackButtonPress={onBackButtonPress}
-            />
-            <FullPageOfflineBlockingView>{children}</FullPageOfflineBlockingView>
+            <AnimatedStep style={styles.flex1}>
+                <HeaderWithBackButton
+                    title={title}
+                    shouldShowStepCounter={shouldShowStepCounter}
+                    stepCounter={stepCounter}
+                    onBackButtonPress={onBackButtonPress}
+                />
+                <FullPageOfflineBlockingView>{children}</FullPageOfflineBlockingView>
+            </AnimatedStep>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 62d7569e7a2c..955f93e7c1f7 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -22,13 +22,12 @@ import useLocalize from '../../../../../hooks/useLocalize';
 import useWindowDimensions from '../../../../../hooks/useWindowDimensions';
 import StepWrapper from '../StepWrapper/StepWrapper';
 import {defaultAccount, TwoFactorAuthPropTypes} from '../TwoFactorAuthPropTypes';
+import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 
 function CodesStep({account = defaultAccount}) {
     const {translate} = useLocalize();
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
 
-    const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
-
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
@@ -83,7 +82,7 @@ function CodesStep({account = defaultAccount}) {
                                         inline={false}
                                         onPress={() => {
                                             Clipboard.setString(account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
+                                            TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
@@ -93,7 +92,7 @@ function CodesStep({account = defaultAccount}) {
                                         icon={Expensicons.Download}
                                         onPress={() => {
                                             localFileDownload('two-factor-auth-codes', account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
+                                            TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         inline={false}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
@@ -110,7 +109,7 @@ function CodesStep({account = defaultAccount}) {
                     success
                     text={translate('common.next')}
                     onPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY)}
-                    isDisabled={isNextButtonDisabled}
+                    isDisabled={!account.codesAreCopied}
                 />
             </FixedFooter>
         </StepWrapper>
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 2cd05cc2b20a..3f83ea2b3f1a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -14,6 +14,8 @@ import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
 function TwoFactorAuthPage({account = defaultAccount}) {
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
+    useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
+
     useEffect(() => {
         if (account.twoFactorAuthStep) {
             setCurrentStep(account.twoFactorAuthStep);

From 48da39dcf1c37206a3b9facbc3769b4dd2af5d35 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 26 Jul 2023 16:24:58 +0200
Subject: [PATCH 13/23] fix: fix linting error

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

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 955f93e7c1f7..fd12f247d1e9 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {ActivityIndicator, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';

From 27ac42560a5f1344ee4ab4f44c5fb75f51440322 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 26 Jul 2023 20:02:29 +0200
Subject: [PATCH 14/23] refactor: rename components for consistency

---
 .../Steps/{DisableStep.js => DisabledStep.js}             | 4 ++--
 .../Steps/{IsEnabledStep.js => EnabledStep.js}            | 4 ++--
 .../settings/Security/TwoFactorAuth/TwoFactorAuthPage.js  | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{DisableStep.js => DisabledStep.js} (96%)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{IsEnabledStep.js => EnabledStep.js} (98%)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
similarity index 96%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
index 0a4c0846848f..2f3b87e69a6e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisableStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
@@ -9,7 +9,7 @@ import StepWrapper from '../StepWrapper/StepWrapper';
 import useLocalize from '../../../../../hooks/useLocalize';
 import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
 
-function DisableStep() {
+function DisabledStep() {
     const {translate} = useLocalize();
 
     return (
@@ -32,4 +32,4 @@ function DisableStep() {
     );
 }
 
-export default DisableStep;
+export default DisabledStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
similarity index 98%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
index d351bcbf4c05..584d6195bbe6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/IsEnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
@@ -12,7 +12,7 @@ import CONST from '../../../../../CONST';
 import useLocalize from '../../../../../hooks/useLocalize';
 import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
 
-function IsEnabledStep() {
+function EnabledStep() {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
     const {setStep} = useTwoFactorAuthContext();
@@ -63,4 +63,4 @@ function IsEnabledStep() {
     );
 }
 
-export default IsEnabledStep;
+export default EnabledStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index 3f83ea2b3f1a..d4cf96f161a9 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -1,8 +1,8 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import CodesStep from './Steps/CodesStep';
-import DisableStep from './Steps/DisableStep';
-import IsEnabledStep from './Steps/IsEnabledStep';
+import DisabledStep from './Steps/DisabledStep';
+import EnabledStep from './Steps/EnabledStep';
 import VerifyStep from './Steps/VerifyStep';
 import SuccessStep from './Steps/SuccessStep';
 import ONYXKEYS from '../../../../ONYXKEYS';
@@ -44,9 +44,9 @@ function TwoFactorAuthPage({account = defaultAccount}) {
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
                 return <SuccessStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
-                return <IsEnabledStep />;
+                return <EnabledStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
-                return <DisableStep />;
+                return <DisabledStep />;
             default:
                 return <CodesStep />;
         }

From cfd4f62fabf743d59fc58e9ea1c233d8c1cf9c92 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 2 Aug 2023 14:39:05 +0200
Subject: [PATCH 15/23] fix: fix linter issue

---
 .../settings/Security/TwoFactorAuth/Steps/SuccessStep.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index 2f12f0f63f55..308efecf3415 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import FireworksAnimation from '../../../../../../assets/animations/Fireworks.json';
 import ConfirmationPage from '../../../../../components/ConfirmationPage';
 import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuthActions';
+import * as LottieAnimations from '../../../../../components/LottieAnimations';
 import CONST from '../../../../../CONST';
 import StepWrapper from '../StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '../TwoFactorAuthContext/useTwoFactorAuth';
@@ -21,7 +21,7 @@ function SuccessStep() {
             }}
         >
             <ConfirmationPage
-                animation={FireworksAnimation}
+                animation={LottieAnimations.Fireworks}
                 heading={translate('twoFactorAuth.enabled')}
                 description={translate('twoFactorAuth.congrats')}
                 shouldShowButton

From 49ab1836a5e5eead0bf3a915963e9d321b10e8ce Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Sun, 6 Aug 2023 10:49:32 +0200
Subject: [PATCH 16/23] fix: fix typo and add proptypes comments

---
 .../TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
index 510f7fba00d0..d5267b13f4db 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
@@ -6,15 +6,18 @@ export default {
 
     /** Data to display a step counter in the header */
     stepCounter: PropTypes.shape({
+        /** Current step */
         step: PropTypes.number,
+        /** Total number of steps */
         total: PropTypes.number,
+        /** Text to display next to the step counter */
         text: PropTypes.string,
     }),
 
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: PropTypes.func,
 
-    /** Called when navigated Screen's transition is finished. It does not fire when user exit the page. */
+    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
     onEntryTransitionEnd: PropTypes.func,
 
     /** Children components */

From e522841bedce81edb840bc9785773cfe1edeea72 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 16 Aug 2023 08:06:56 +0200
Subject: [PATCH 17/23] fix: restore changes for code page

---
 .../Security/TwoFactorAuth/StepWrapper/StepWrapper.js  | 10 +++++++++-
 .../TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js  |  3 +++
 .../settings/Security/TwoFactorAuth/Steps/CodesStep.js |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 132ce2639881..285d84fe79f1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -7,13 +7,21 @@ import StepWrapperPropTypes from './StepWrapperPropTypes';
 import AnimatedStep from '../../../../../components/AnimatedStep';
 import styles from '../../../../../styles/styles';
 
-function StepWrapper({title = '', stepCounter = null, onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings, children = null, onEntryTransitionEnd}) {
+function StepWrapper({
+    title = '',
+    stepCounter = null,
+    onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
+    children = null,
+    shouldEnableKeyboardAvoidingView = true,
+    onEntryTransitionEnd,
+}) {
     const shouldShowStepCounter = Boolean(stepCounter);
 
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             onEntryTransitionEnd={onEntryTransitionEnd}
+            shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
         >
             <AnimatedStep style={styles.flex1}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
index d5267b13f4db..3c06cc7bca52 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
@@ -22,4 +22,7 @@ export default {
 
     /** Children components */
     children: PropTypes.node,
+
+    /** Flag to indicate if the keyboard avoiding view should be enabled */
+    shouldEnableKeyboardAvoidingView: PropTypes.bool,
 };
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index fd12f247d1e9..52d7a9806f69 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -40,6 +40,7 @@ function CodesStep({account = defaultAccount}) {
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
+            shouldEnableKeyboardAvoidingView={false}
             stepCounter={{
                 step: 1,
                 text: translate('twoFactorAuth.stepCodes'),

From 1162131a02a280c8901734d6c6fc042ad63600aa Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 16 Aug 2023 15:27:09 +0200
Subject: [PATCH 18/23] fix: fix styles prop error

---
 .../settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 285d84fe79f1..ea234b27cfee 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -23,7 +23,7 @@ function StepWrapper({
             onEntryTransitionEnd={onEntryTransitionEnd}
             shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
         >
-            <AnimatedStep style={styles.flex1}>
+            <AnimatedStep style={[styles.flex1]}>
                 <HeaderWithBackButton
                     title={title}
                     shouldShowStepCounter={shouldShowStepCounter}

From b674139f0cbe0c24e9678a91fb4726604c94b768 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 16 Aug 2023 16:27:03 +0200
Subject: [PATCH 19/23] fix: focus input on animation end

---
 src/components/AnimatedStep.js                | 30 ++++++++++++-------
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  |  8 +++--
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/AnimatedStep.js b/src/components/AnimatedStep.js
index dce06cb33760..1b9155928ed4 100644
--- a/src/components/AnimatedStep.js
+++ b/src/components/AnimatedStep.js
@@ -14,27 +14,37 @@ const propTypes = {
 
     /** Whether we're animating the step in or out */
     direction: PropTypes.oneOf(['in', 'out']),
+
+    /** Callback to fire when the animation ends */
+    onAnimationEnd: PropTypes.func,
 };
 
 const defaultProps = {
     direction: 'in',
     style: [],
+    onAnimationEnd: () => {},
 };
 
-function AnimatedStep(props) {
-    function getAnimationStyle(direction) {
-        let animationStyle;
-
-        if (direction === 'in') {
-            animationStyle = styles.makeSlideInTranslation('translateX', CONST.ANIMATED_TRANSITION_FROM_VALUE);
-        } else if (direction === 'out') {
-            animationStyle = styles.makeSlideInTranslation('translateX', -CONST.ANIMATED_TRANSITION_FROM_VALUE);
-        }
-        return animationStyle;
+function getAnimationStyle(direction) {
+    let transitionValue;
+
+    if (direction === 'in') {
+        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
+    } else if (direction === 'out') {
+        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
     }
+    return styles.makeSlideInTranslation('translateX', transitionValue);
+}
 
+function AnimatedStep(props) {
     return (
         <Animatable.View
+            onAnimationEnd={() => {
+                if (!props.onAnimationEnd) {
+                    return;
+                }
+                props.onAnimationEnd();
+            }}
             duration={CONST.ANIMATED_TRANSITION}
             animation={getAnimationStyle(props.direction)}
             useNativeDriver
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index ea234b27cfee..d74cef7ae528 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef, useState} from 'react';
 import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
@@ -20,10 +20,12 @@ function StepWrapper({
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
-            onEntryTransitionEnd={onEntryTransitionEnd}
             shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
         >
-            <AnimatedStep style={[styles.flex1]}>
+            <AnimatedStep
+                style={[styles.flex1]}
+                onAnimationEnd={onEntryTransitionEnd}
+            >
                 <HeaderWithBackButton
                     title={title}
                     shouldShowStepCounter={shouldShowStepCounter}

From 591c6669c92e36ec27958d64307529ddb7d6545b Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 16 Aug 2023 17:36:55 +0200
Subject: [PATCH 20/23] fix: fix animation direction

---
 src/CONST.js                                  |  4 +
 .../AnimatedStep/AnimatedStepContext.js       |  5 ++
 .../AnimatedStep/AnimatedStepProvider.js      | 17 +++++
 src/components/AnimatedStep/index.js          | 61 +++++++++++++++
 .../AnimatedStep/useAnimatedStepContext.js    | 12 +++
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  |  6 +-
 .../TwoFactorAuth/Steps/VerifyStep.js         |  2 +-
 .../TwoFactorAuth/TwoFactorAuthPage.js        | 72 +++---------------
 .../TwoFactorAuth/TwoFactorAuthSteps.js       | 75 +++++++++++++++++++
 9 files changed, 191 insertions(+), 63 deletions(-)
 create mode 100644 src/components/AnimatedStep/AnimatedStepContext.js
 create mode 100644 src/components/AnimatedStep/AnimatedStepProvider.js
 create mode 100644 src/components/AnimatedStep/index.js
 create mode 100644 src/components/AnimatedStep/useAnimatedStepContext.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js

diff --git a/src/CONST.js b/src/CONST.js
index 2532b9c00b08..5e853050520c 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -32,6 +32,10 @@ const CONST = {
     ANIMATED_TRANSITION: 300,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
     ANIMATION_IN_TIMING: 100,
+    ANIMATION_DIRECTION: {
+        IN: 'in',
+        OUT: 'out',
+    },
     ARROW_HIDE_DELAY: 3000,
 
     API_ATTACHMENT_VALIDATIONS: {
diff --git a/src/components/AnimatedStep/AnimatedStepContext.js b/src/components/AnimatedStep/AnimatedStepContext.js
new file mode 100644
index 000000000000..30377147fdb8
--- /dev/null
+++ b/src/components/AnimatedStep/AnimatedStepContext.js
@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+const AnimatedStepContext = createContext();
+
+export default AnimatedStepContext;
diff --git a/src/components/AnimatedStep/AnimatedStepProvider.js b/src/components/AnimatedStep/AnimatedStepProvider.js
new file mode 100644
index 000000000000..280fbd1a2776
--- /dev/null
+++ b/src/components/AnimatedStep/AnimatedStepProvider.js
@@ -0,0 +1,17 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import AnimatedStepContext from './AnimatedStepContext';
+import CONST from '../../CONST';
+
+const propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+function AnimatedStepProvider({children}) {
+    const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN);
+
+    return <AnimatedStepContext.Provider value={{animationDirection, setAnimationDirection}}>{children}</AnimatedStepContext.Provider>;
+}
+
+AnimatedStepProvider.propTypes = propTypes;
+export default AnimatedStepProvider;
diff --git a/src/components/AnimatedStep/index.js b/src/components/AnimatedStep/index.js
new file mode 100644
index 000000000000..a8b9b80fcc0e
--- /dev/null
+++ b/src/components/AnimatedStep/index.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Animatable from 'react-native-animatable';
+import CONST from '../../CONST';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    /** Children to wrap in AnimatedStep. */
+    children: PropTypes.node.isRequired,
+
+    /** Styles to be assigned to Container */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether we're animating the step in or out */
+    direction: PropTypes.oneOf(['in', 'out']),
+
+    /** Callback to fire when the animation ends */
+    onAnimationEnd: PropTypes.func,
+};
+
+const defaultProps = {
+    direction: 'in',
+    style: [],
+    onAnimationEnd: () => {},
+};
+
+function getAnimationStyle(direction) {
+    let transitionValue;
+
+    if (direction === 'in') {
+        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
+    } else if (direction === 'out') {
+        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+    }
+    return styles.makeSlideInTranslation('translateX', transitionValue);
+}
+
+function AnimatedStep(props) {
+    return (
+        <Animatable.View
+            onAnimationEnd={() => {
+                if (!props.onAnimationEnd) {
+                    return;
+                }
+                props.onAnimationEnd();
+            }}
+            duration={CONST.ANIMATED_TRANSITION}
+            animation={getAnimationStyle(props.direction)}
+            useNativeDriver
+            style={props.style}
+        >
+            {props.children}
+        </Animatable.View>
+    );
+}
+
+AnimatedStep.propTypes = propTypes;
+AnimatedStep.defaultProps = defaultProps;
+AnimatedStep.displayName = 'AnimatedStep';
+export default AnimatedStep;
diff --git a/src/components/AnimatedStep/useAnimatedStepContext.js b/src/components/AnimatedStep/useAnimatedStepContext.js
new file mode 100644
index 000000000000..e2af9514e20e
--- /dev/null
+++ b/src/components/AnimatedStep/useAnimatedStepContext.js
@@ -0,0 +1,12 @@
+import {useContext} from 'react';
+import AnimatedStepContext from './AnimatedStepContext';
+
+function useAnimatedStepContext() {
+    const context = useContext(AnimatedStepContext);
+    if (!context) {
+        throw new Error('useAnimatedStepContext must be used within an AnimatedStepContextProvider');
+    }
+    return context;
+}
+
+export default useAnimatedStepContext;
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index d74cef7ae528..16f9489d87b0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../../components/ScreenWrapper';
 import FullPageOfflineBlockingView from '../../../../../components/BlockingViews/FullPageOfflineBlockingView';
@@ -6,6 +6,7 @@ import * as TwoFactorAuthActions from '../../../../../libs/actions/TwoFactorAuth
 import StepWrapperPropTypes from './StepWrapperPropTypes';
 import AnimatedStep from '../../../../../components/AnimatedStep';
 import styles from '../../../../../styles/styles';
+import useAnimatedStepContext from '../../../../../components/AnimatedStep/useAnimatedStepContext';
 
 function StepWrapper({
     title = '',
@@ -17,6 +18,8 @@ function StepWrapper({
 }) {
     const shouldShowStepCounter = Boolean(stepCounter);
 
+    const {animationDirection} = useAnimatedStepContext();
+
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
@@ -25,6 +28,7 @@ function StepWrapper({
             <AnimatedStep
                 style={[styles.flex1]}
                 onAnimationEnd={onEntryTransitionEnd}
+                direction={animationDirection}
             >
                 <HeaderWithBackButton
                     title={title}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index fe12d63d063b..8c3d9689cfcd 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -72,7 +72,7 @@ function VerifyStep({account = defaultAccount}) {
                 text: translate('twoFactorAuth.stepVerify'),
                 total: 3,
             }}
-            onBackButtonPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES)}
+            onBackButtonPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES, CONST.ANIMATION_DIRECTION.OUT)}
             onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
         >
             <ScrollView
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
index d4cf96f161a9..99aeb4b11f89 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
@@ -1,63 +1,13 @@
-import React, {useCallback, useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import CodesStep from './Steps/CodesStep';
-import DisabledStep from './Steps/DisabledStep';
-import EnabledStep from './Steps/EnabledStep';
-import VerifyStep from './Steps/VerifyStep';
-import SuccessStep from './Steps/SuccessStep';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import CONST from '../../../../CONST';
-import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
-import TwoFactorAuthContext from './TwoFactorAuthContext';
-import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
-
-function TwoFactorAuthPage({account = defaultAccount}) {
-    const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
-
-    useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
-
-    useEffect(() => {
-        if (account.twoFactorAuthStep) {
-            setCurrentStep(account.twoFactorAuthStep);
-            return;
-        }
-        if (account.requiresTwoFactorAuth) {
-            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
-        } else {
-            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
-        }
-        // we don't want to trigger the hook every time the step changes, only when the requiresTwoFactorAuth changes
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account.requiresTwoFactorAuth]);
-
-    const handleSetStep = useCallback((step) => {
-        TwoFactorAuthActions.setTwoFactorAuthStep(step);
-        setCurrentStep(step);
-    }, []);
-
-    const renderStep = () => {
-        switch (currentStep) {
-            case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
-                return <VerifyStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
-                return <EnabledStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
-                return <DisabledStep />;
-            default:
-                return <CodesStep />;
-        }
-    };
-
-    return <TwoFactorAuthContext.Provider value={{setStep: handleSetStep}}>{renderStep()}</TwoFactorAuthContext.Provider>;
+import React from 'react';
+import AnimatedStepProvider from '../../../../components/AnimatedStep/AnimatedStepProvider';
+import TwoFactorAuthSteps from './TwoFactorAuthSteps';
+
+function TwoFactorAuthPage() {
+    return (
+        <AnimatedStepProvider>
+            <TwoFactorAuthSteps />
+        </AnimatedStepProvider>
+    );
 }
 
-TwoFactorAuthPage.propTypes = TwoFactorAuthPropTypes;
-
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
-    account: {key: ONYXKEYS.ACCOUNT},
-})(TwoFactorAuthPage);
+export default TwoFactorAuthPage;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
new file mode 100644
index 000000000000..dec26575fb39
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
@@ -0,0 +1,75 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import CodesStep from './Steps/CodesStep';
+import DisabledStep from './Steps/DisabledStep';
+import EnabledStep from './Steps/EnabledStep';
+import VerifyStep from './Steps/VerifyStep';
+import SuccessStep from './Steps/SuccessStep';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import CONST from '../../../../CONST';
+import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+import TwoFactorAuthContext from './TwoFactorAuthContext';
+import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
+import useAnimatedStepContext from "../../../../components/AnimatedStep/useAnimatedStepContext";
+
+function TwoFactorAuthSteps({account = defaultAccount}) {
+    const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
+
+    const {setAnimationDirection} = useAnimatedStepContext();
+
+    useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
+
+    useEffect(() => {
+        if (account.twoFactorAuthStep) {
+            setCurrentStep(account.twoFactorAuthStep);
+            return;
+        }
+        if (account.requiresTwoFactorAuth) {
+            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
+        } else {
+            setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
+        }
+        // we don't want to trigger the hook every time the step changes, only when the requiresTwoFactorAuth changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [account.requiresTwoFactorAuth]);
+
+    const handleSetStep = useCallback((step, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
+        setAnimationDirection(animationDirection);
+        TwoFactorAuthActions.setTwoFactorAuthStep(step);
+        setCurrentStep(step);
+    }, []);
+
+    const renderStep = () => {
+        switch (currentStep) {
+            case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
+                return <CodesStep />;
+            case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
+                return <VerifyStep />;
+            case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
+                return <SuccessStep />;
+            case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
+                return <EnabledStep />;
+            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
+                return <DisabledStep />;
+            default:
+                return <CodesStep />;
+        }
+    };
+
+    return (
+        <TwoFactorAuthContext.Provider
+            value={{
+                setStep: handleSetStep,
+            }}
+        >
+            {renderStep()}
+        </TwoFactorAuthContext.Provider>
+    );
+}
+
+TwoFactorAuthSteps.propTypes = TwoFactorAuthPropTypes;
+
+// eslint-disable-next-line rulesdir/onyx-props-must-have-default
+export default withOnyx({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(TwoFactorAuthSteps);

From 065503a95d9cd548cd4d80866ecd40ec290bdb60 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 16 Aug 2023 17:52:24 +0200
Subject: [PATCH 21/23] fix: remove duplicated file

---
 src/components/AnimatedStep.js | 61 ----------------------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 src/components/AnimatedStep.js

diff --git a/src/components/AnimatedStep.js b/src/components/AnimatedStep.js
deleted file mode 100644
index 1b9155928ed4..000000000000
--- a/src/components/AnimatedStep.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as Animatable from 'react-native-animatable';
-import CONST from '../CONST';
-import styles from '../styles/styles';
-
-const propTypes = {
-    /** Children to wrap in AnimatedStep. */
-    children: PropTypes.node.isRequired,
-
-    /** Styles to be assigned to Container */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.arrayOf(PropTypes.object),
-
-    /** Whether we're animating the step in or out */
-    direction: PropTypes.oneOf(['in', 'out']),
-
-    /** Callback to fire when the animation ends */
-    onAnimationEnd: PropTypes.func,
-};
-
-const defaultProps = {
-    direction: 'in',
-    style: [],
-    onAnimationEnd: () => {},
-};
-
-function getAnimationStyle(direction) {
-    let transitionValue;
-
-    if (direction === 'in') {
-        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    } else if (direction === 'out') {
-        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    }
-    return styles.makeSlideInTranslation('translateX', transitionValue);
-}
-
-function AnimatedStep(props) {
-    return (
-        <Animatable.View
-            onAnimationEnd={() => {
-                if (!props.onAnimationEnd) {
-                    return;
-                }
-                props.onAnimationEnd();
-            }}
-            duration={CONST.ANIMATED_TRANSITION}
-            animation={getAnimationStyle(props.direction)}
-            useNativeDriver
-            style={props.style}
-        >
-            {props.children}
-        </Animatable.View>
-    );
-}
-
-AnimatedStep.propTypes = propTypes;
-AnimatedStep.defaultProps = defaultProps;
-AnimatedStep.displayName = 'AnimatedStep';
-export default AnimatedStep;

From 660aa2aacde39035e858e66ed71a7f9619cf0b5d Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 17 Aug 2023 18:33:20 +0200
Subject: [PATCH 22/23] fix: fix lint

---
 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
index dec26575fb39..61c5c9b249c5 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
@@ -37,7 +37,7 @@ function TwoFactorAuthSteps({account = defaultAccount}) {
         setAnimationDirection(animationDirection);
         TwoFactorAuthActions.setTwoFactorAuthStep(step);
         setCurrentStep(step);
-    }, []);
+    }, [setAnimationDirection]);
 
     const renderStep = () => {
         switch (currentStep) {

From 30ca6de16c620655b569bd2ff554f47a6c40697b Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 17 Aug 2023 18:38:41 +0200
Subject: [PATCH 23/23] fix: prettier

---
 .../Security/TwoFactorAuth/TwoFactorAuthSteps.js  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
index 61c5c9b249c5..e0094267742b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
@@ -10,7 +10,7 @@ import CONST from '../../../../CONST';
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
 import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
-import useAnimatedStepContext from "../../../../components/AnimatedStep/useAnimatedStepContext";
+import useAnimatedStepContext from '../../../../components/AnimatedStep/useAnimatedStepContext';
 
 function TwoFactorAuthSteps({account = defaultAccount}) {
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
@@ -33,11 +33,14 @@ function TwoFactorAuthSteps({account = defaultAccount}) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [account.requiresTwoFactorAuth]);
 
-    const handleSetStep = useCallback((step, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
-        setAnimationDirection(animationDirection);
-        TwoFactorAuthActions.setTwoFactorAuthStep(step);
-        setCurrentStep(step);
-    }, [setAnimationDirection]);
+    const handleSetStep = useCallback(
+        (step, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
+            setAnimationDirection(animationDirection);
+            TwoFactorAuthActions.setTwoFactorAuthStep(step);
+            setCurrentStep(step);
+        },
+        [setAnimationDirection],
+    );
 
     const renderStep = () => {
         switch (currentStep) {