From 6f4b6dcdb62db7dbd2736d480cd14b17ab000bfe Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 14 Nov 2024 12:20:50 -0500 Subject: [PATCH 1/5] simplify names --- src/pages/settings/Wallet/VerifyAccountPage.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index f8e362609d61..ebd732eefe9c 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -21,8 +21,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const loginData = loginList?.[contactMethod]; const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); - - const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true); + const [isValidateModalVisible, setIsValidateModalVisible] = useState(true); const navigateBackTo = route?.params?.backTo; @@ -44,7 +43,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { return; } - setIsValidateCodeActionModalVisible(false); + setIsValidateModalVisible(false); if (!navigateBackTo) { return; @@ -54,7 +53,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { }, [isUserValidated, navigateBackTo]); useEffect(() => { - if (isValidateCodeActionModalVisible) { + if (isValidateModalVisible) { return; } @@ -63,7 +62,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { } else if (!navigateBackTo) { Navigation.goBack(); } - }, [isValidateCodeActionModalVisible, isUserValidated, navigateBackTo]); + }, [isValidateModalVisible, isUserValidated, navigateBackTo]); return ( setIsValidateCodeActionModalVisible(false)} + onClose={() => setIsValidateModalVisible(false)} clearError={clearError} /> ); From 67be3a122e9f23d4bef1a5b325203c8b6213224d Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 14 Nov 2024 16:11:22 -0500 Subject: [PATCH 2/5] simplify navigation logic --- .../settings/Wallet/VerifyAccountPage.tsx | 31 +++++-------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index ebd732eefe9c..c473f8fb5a5e 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; @@ -8,7 +8,6 @@ import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; type VerifyAccountPageProps = StackScreenProps; @@ -21,7 +20,6 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const loginData = loginList?.[contactMethod]; const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); - const [isValidateModalVisible, setIsValidateModalVisible] = useState(true); const navigateBackTo = route?.params?.backTo; @@ -38,31 +36,18 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { User.clearContactMethodErrors(contactMethod, 'validateLogin'); }, [contactMethod]); + // Handle navigation once the user is validated useEffect(() => { if (!isUserValidated) { return; } - setIsValidateModalVisible(false); - - if (!navigateBackTo) { - return; - } - - Navigation.navigate(navigateBackTo); - }, [isUserValidated, navigateBackTo]); - - useEffect(() => { - if (isValidateModalVisible) { - return; - } - - if (!isUserValidated && navigateBackTo) { - Navigation.navigate(ROUTES.SETTINGS_WALLET); - } else if (!navigateBackTo) { + if (navigateBackTo) { + Navigation.navigate(navigateBackTo); + } else { Navigation.goBack(); } - }, [isValidateModalVisible, isUserValidated, navigateBackTo]); + }, [isUserValidated, navigateBackTo]); return ( setIsValidateModalVisible(false)} clearError={clearError} + onClose={() => {}} /> ); } From 0dca2ad798c816c5cd3053cffd3b154a530a94a5 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 14 Nov 2024 16:34:57 -0500 Subject: [PATCH 3/5] Make onClose optional --- src/components/ValidateCodeActionModal/index.tsx | 2 +- src/components/ValidateCodeActionModal/type.ts | 2 +- src/pages/settings/Wallet/VerifyAccountPage.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx index b848cb501b0f..f715fd8ef136 100644 --- a/src/components/ValidateCodeActionModal/index.tsx +++ b/src/components/ValidateCodeActionModal/index.tsx @@ -38,7 +38,7 @@ function ValidateCodeActionModal({ const hide = useCallback(() => { clearError(); - onClose(); + onClose?.(); }, [onClose, clearError]); useEffect(() => { diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts index 2682ac3a6ea3..2fbf88768e62 100644 --- a/src/components/ValidateCodeActionModal/type.ts +++ b/src/components/ValidateCodeActionModal/type.ts @@ -15,7 +15,7 @@ type ValidateCodeActionModalProps = { descriptionSecondary?: string | null; /** Function to call when the user closes the modal */ - onClose: () => void; + onClose?: () => void; /** Function to be called when the modal is closed */ onModalHide?: () => void; diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index c473f8fb5a5e..2a50087a7a0d 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -60,7 +60,6 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { descriptionPrimary={translate('contacts.featureRequiresValidate')} descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})} clearError={clearError} - onClose={() => {}} /> ); } From 78247d61658648ea5ba26ed735e3d270fae24621 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Fri, 15 Nov 2024 10:57:53 -0500 Subject: [PATCH 4/5] remove central pane mapping for VerifyAccountPage --- src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 7c9f9775cd09..16a4b2613d8f 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -37,7 +37,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = SCREENS.SETTINGS.WALLET.CARD_ACTIVATE, SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD, SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS, - SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT, ], [SCREENS.SETTINGS.SECURITY]: [ SCREENS.SETTINGS.TWO_FACTOR_AUTH, From 13c92f3a9888182f8bf73a93b2e0d9d8c5a08f25 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Fri, 15 Nov 2024 14:17:07 -0500 Subject: [PATCH 5/5] use state to animate modal close and fix onClose callback --- src/pages/settings/Wallet/VerifyAccountPage.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index 2a50087a7a0d..5699c0a31cc6 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; @@ -20,6 +20,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const loginData = loginList?.[contactMethod]; const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true); const navigateBackTo = route?.params?.backTo; @@ -36,12 +37,20 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { User.clearContactMethodErrors(contactMethod, 'validateLogin'); }, [contactMethod]); + const closeModal = useCallback(() => { + // Disable modal visibility so the navigation is animated + setIsValidateCodeActionModalVisible(false); + Navigation.goBack(); + }, []); + // Handle navigation once the user is validated useEffect(() => { if (!isUserValidated) { return; } + setIsValidateCodeActionModalVisible(false); + if (navigateBackTo) { Navigation.navigate(navigateBackTo); } else { @@ -55,11 +64,13 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { handleSubmitForm={handleSubmitForm} validateError={validateLoginError} hasMagicCodeBeenSent={!!loginData?.validateCodeSent} - isVisible={!isUserValidated} + isVisible={isValidateCodeActionModalVisible} title={translate('contacts.validateAccount')} descriptionPrimary={translate('contacts.featureRequiresValidate')} descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})} clearError={clearError} + onClose={closeModal} + onModalHide={() => {}} /> ); }