Merge pull request #52603 from Expensify/arosiclair-fix-wallet-naviga…

…tion- Fix validate page navigation
Expensify · Nov 18, 2024 · 0df56ac · 0df56ac
2 parents 8144fee + 13c92f3
commit 0df56ac
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 22 deletions.
diff --git 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
@@ -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/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<Record<CentralPaneName, string[]>> =
         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,

diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx
@@ -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<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD>;
@@ -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 [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);
 
     const navigateBackTo = route?.params?.backTo;
@@ -39,31 +37,26 @@ 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) {
-            return;
-        }
-
-        Navigation.navigate(navigateBackTo);
-    }, [isUserValidated, navigateBackTo]);
-
-    useEffect(() => {
-        if (isValidateCodeActionModalVisible) {
-            return;
-        }
-
-        if (!isUserValidated && navigateBackTo) {
-            Navigation.navigate(ROUTES.SETTINGS_WALLET);
-        } else if (!navigateBackTo) {
+        if (navigateBackTo) {
+            Navigation.navigate(navigateBackTo);
+        } else {
             Navigation.goBack();
         }
-    }, [isValidateCodeActionModalVisible, isUserValidated, navigateBackTo]);
+    }, [isUserValidated, navigateBackTo]);
 
     return (
         <ValidateCodeActionModal
@@ -75,8 +68,9 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) {
             title={translate('contacts.validateAccount')}
             descriptionPrimary={translate('contacts.featureRequiresValidate')}
             descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
-            onClose={() => setIsValidateCodeActionModalVisible(false)}
             clearError={clearError}
+            onClose={closeModal}
+            onModalHide={() => {}}
         />
     );
 }