diff --git a/src/ROUTES.ts b/src/ROUTES.ts index a96b229ef4c1..24b698c24619 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -131,7 +131,10 @@ const ROUTES = { getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details` as const, }, SETTINGS_NEW_CONTACT_METHOD: 'settings/profile/contact-methods/new', - SETTINGS_2FA: 'settings/security/two-factor-auth', + SETTINGS_2FA: { + route: 'settings/security/two-factor-auth', + getRoute: (backTo?: string) => getUrlWithBackToParam('settings/security/two-factor-auth', backTo), + }, SETTINGS_STATUS: 'settings/profile/status', SETTINGS_STATUS_SET: 'settings/profile/status/set', diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts index ae48d8e49201..bb06bf7e4528 100644 --- a/src/libs/Navigation/linkingConfig.ts +++ b/src/libs/Navigation/linkingConfig.ts @@ -195,7 +195,7 @@ const linkingConfig: LinkingOptions = { exact: true, }, Settings_TwoFactorAuth: { - path: ROUTES.SETTINGS_2FA, + path: ROUTES.SETTINGS_2FA.route, exact: true, }, Settings_Share_Code: { diff --git a/src/libs/actions/TwoFactorAuthActions.ts b/src/libs/actions/TwoFactorAuthActions.ts index ccd4e2baf662..26e402096aa6 100644 --- a/src/libs/actions/TwoFactorAuthActions.ts +++ b/src/libs/actions/TwoFactorAuthActions.ts @@ -1,14 +1,14 @@ import Onyx from 'react-native-onyx'; import Navigation from '@libs/Navigation/Navigation'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; +import ROUTES, {Route} from '@src/ROUTES'; import {TwoFactorAuthStep} from '@src/types/onyx/Account'; /** * Clear 2FA data if the flow is interrupted without finishing */ function clearTwoFactorAuthData() { - Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: '', codesAreCopied: false}); + Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, twoFactorAuthStep: null, codesAreCopied: false}); } function setTwoFactorAuthStep(twoFactorAuthStep: TwoFactorAuthStep) { Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep}); @@ -18,9 +18,10 @@ function setCodesAreCopied() { Onyx.merge(ONYXKEYS.ACCOUNT, {codesAreCopied: true}); } -function quitAndNavigateBackToSettings() { +function quitAndNavigateBack(backTo?: Route) { clearTwoFactorAuthData(); - Navigation.goBack(ROUTES.SETTINGS_SECURITY); + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + Navigation.goBack(backTo || ROUTES.SETTINGS_SECURITY); } -export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings, setCodesAreCopied}; +export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBack, setCodesAreCopied}; diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js index 3cbb3111e089..d91c8df7bed0 100644 --- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js +++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -5,39 +6,39 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Section from '@components/Section'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import Navigation from '@navigation/Navigation'; import useThemeStyles from '@styles/useThemeStyles'; -import * as Link from '@userActions/Link'; import ROUTES from '@src/ROUTES'; const propTypes = { ...withLocalizePropTypes, + + /** policyID of the workspace where user is setting up bank account */ + policyID: PropTypes.string.isRequired, }; -function Enable2FAPrompt(props) { + +function Enable2FAPrompt({translate, policyID}) { const styles = useThemeStyles(); - const secureYourAccountUrl = encodeURI( - `settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute()}","isFromNewDot":"true"}`, - ); return (
{ - Link.openOldDotLink(secureYourAccountUrl); + Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID))); }, icon: Expensicons.Shield, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, wrapperStyle: [styles.cardMenuItem], - link: () => Link.buildOldDotURL(secureYourAccountUrl), }, ]} > - {props.translate('validationStep.enable2FAText')} + {translate('validationStep.enable2FAText')}
); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 284c48c1609a..4620ab1ddcae 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -520,6 +520,7 @@ class ReimbursementAccountPage extends React.Component { ); } diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 17a66e84e055..b64f8e098a8a 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -43,6 +43,9 @@ const propTypes = { /** If user has two-factor authentication enabled */ requiresTwoFactorAuth: PropTypes.bool, }), + + /** policyID of the workspace where user is setting up bank account */ + policyID: PropTypes.string.isRequired, }; const defaultProps = { @@ -73,7 +76,7 @@ const filterInput = (amount) => { return value; }; -function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) { +function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account, policyID}) { const styles = useThemeStyles(); /** * @param {Object} values - form input values passed by the Form component @@ -180,7 +183,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc {!requiresTwoFactorAuth && ( - + )} @@ -211,7 +214,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc /> {reimbursementAccount.shouldShowResetModal && } - {!requiresTwoFactorAuth && } + {!requiresTwoFactorAuth && } )} diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js index db2be7f5b681..bf1edd7b806d 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.js +++ b/src/pages/settings/Security/SecuritySettingsPage.js @@ -44,7 +44,7 @@ function SecuritySettingsPage(props) { { translationKey: 'twoFactorAuth.headerTitle', icon: Expensicons.Shield, - action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA)), + action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute())), }, { translationKey: 'closeAccountPage.closeAccount', diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js index bd1068693785..69d662ba6e81 100644 --- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js +++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js @@ -11,7 +11,7 @@ import StepWrapperPropTypes from './StepWrapperPropTypes'; function StepWrapper({ title = '', stepCounter = null, - onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings, + onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(), children = null, shouldEnableKeyboardAvoidingView = true, onEntryTransitionEnd, diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js index bc85b01cd3da..86d218ec63ae 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js @@ -24,7 +24,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -function CodesStep({account = defaultAccount}) { +function CodesStep({account = defaultAccount, backTo}) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -50,6 +50,7 @@ function CodesStep({account = defaultAccount}) { text: translate('twoFactorAuth.stepCodes'), total: 3, }} + onBackButtonPress={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)} >
TwoFactorAuthActions.quitAndNavigateBack()} /> diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js index c1cb9dc460ea..de36888f30b8 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js @@ -1,13 +1,24 @@ +import PropTypes from 'prop-types'; import React from 'react'; import ConfirmationPage from '@components/ConfirmationPage'; import LottieAnimations from '@components/LottieAnimations'; import useLocalize from '@hooks/useLocalize'; +import Navigation from '@navigation/Navigation'; import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper'; import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth'; import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions'; import CONST from '@src/CONST'; -function SuccessStep() { +const propTypes = { + /** The route where user needs to be redirected after setting up 2FA */ + backTo: PropTypes.string, +}; + +const defaultProps = { + backTo: '', +}; + +function SuccessStep({backTo}) { const {setStep} = useTwoFactorAuthContext(); const {translate} = useLocalize(); @@ -29,10 +40,16 @@ function SuccessStep() { onButtonPress={() => { TwoFactorAuthActions.clearTwoFactorAuthData(); setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED); + if (backTo) { + Navigation.navigate(backTo); + } }} /> ); } +SuccessStep.propTypes = propTypes; +SuccessStep.defaultProps = defaultProps; + export default SuccessStep; diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js index 31a33efa3996..720c2e02b3c0 100644 --- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js +++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js @@ -1,3 +1,5 @@ +import {useRoute} from '@react-navigation/native'; +import lodashGet from 'lodash/get'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext'; @@ -13,6 +15,8 @@ import TwoFactorAuthContext from './TwoFactorAuthContext'; import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes'; function TwoFactorAuthSteps({account = defaultAccount}) { + const route = useRoute(); + const backTo = lodashGet(route.params, 'backTo', ''); const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES); const {setAnimationDirection} = useAnimatedStepContext(); @@ -45,17 +49,17 @@ function TwoFactorAuthSteps({account = defaultAccount}) { const renderStep = () => { switch (currentStep) { case CONST.TWO_FACTOR_AUTH_STEPS.CODES: - return ; + return ; case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY: return ; case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS: - return ; + return ; case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED: return ; case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED: return ; default: - return ; + return ; } };