Deactivate card modal shown briefly for a new card

src/components/ValidateCodeActionModal/index.tsx

@@ -21,6 +21,7 @@ function ValidateCodeActionModal({
     disableAnimation,
     threeDotsMenuItems = [],
     onThreeDotsButtonPress = () => {},
+    onModalHide = () => {},
 }: ValidateCodeActionModalProps) {
     return (
         <Modal
@@ -31,6 +32,8 @@ function ValidateCodeActionModal({
             onBackdropPress={onClose}
             shouldUseModalPaddingStyle={false}
             animationInTiming={disableAnimation ? 1 : undefined}
+            onModalHide={onModalHide}
+            animationOutTiming={disableAnimation ? 1 : undefined}
         >
             <ValidateCodeActionContent
                 title={title}

src/components/ValidateCodeActionModal/type.ts

@@ -51,6 +51,9 @@ type ValidateCodeActionModalProps = ValidateCodeActionContentProps & {
 
     /** Whether disable the animations */
     disableAnimation?: boolean;
+
+    /** Callback method fired when the modal is hidden */
+    onModalHide?: () => void;
 };
 
 export type {ValidateCodeActionContentProps, ValidateCodeActionModalProps};

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import Badge from '@components/Badge';
 import ConfirmModal from '@components/ConfirmModal';
@@ -74,6 +74,8 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
     const displayName = getDisplayNameOrDefault(cardholder);
     const translationForLimitType = getTranslationKeyForLimitType(card?.nameValuePairs?.limitType);
 
+    const shouldGoBack = useRef(false);
+
     const fetchCardDetails = useCallback(() => {
         openCardDetailsPage(Number(cardID));
     }, [cardID]);
@@ -84,7 +86,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
 
     const deactivateCard = () => {
         setIsDeactivateModalVisible(false);
-        Navigation.goBack();
+        shouldGoBack.current = true;
         InteractionManager.runAfterInteractions(() => {
             deactivateCardAction(defaultFundID, card);
         });
@@ -220,6 +222,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
                         confirmText={translate('workspace.card.deactivateCardModal.deactivate')}
                         cancelText={translate('common.cancel')}
                         danger
+                        onModalHide={() => shouldGoBack.current && Navigation.goBack()}
                     />
                     <DecisionModal
                         title={translate('common.youAppearToBeOffline')}

src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx

@@ -1,12 +1,11 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
-import useBeforeRemove from '@hooks/useBeforeRemove';
 import useDefaultFundID from '@hooks/useDefaultFundID';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -59,8 +58,6 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
 
     const submitButton = useRef<View>(null);
 
-    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
-
     useEffect(() => {
         submitButton.current?.focus();
         resetValidateActionCodeSent();
@@ -70,14 +67,8 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
         if (!isSuccessful) {
             return;
         }
-        if (backTo) {
-            Navigation.goBack(backTo);
-        } else {
-            Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
-        }
-
-        clearIssueNewCardFlow(policyID);
-    }, [backTo, policyID, isSuccessful]);
+        setIsValidateCodeActionModalVisible(false);
+    }, [isSuccessful]);
 
     const submit = (validateCode: string) => {
         // NOTE: For Expensify Card UK/EU, the backend will automatically detect the correct feedCountry to use
@@ -96,6 +87,19 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
 
     const translationForLimitType = getTranslationKeyForLimitType(data?.limitType);
 
+    const onRedirect = useCallback(() => {
+        if (!isSuccessful) {
+            return;
+        }
+        if (backTo) {
+            Navigation.goBack(backTo);
+        } else {
+            Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
+        }
+
+        clearIssueNewCardFlow(policyID);
+    }, [backTo, policyID, isSuccessful]);
+
     return (
         <InteractiveStepWrapper
             wrapperID={ConfirmationStep.displayName}
@@ -171,6 +175,8 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
                     isVisible={isValidateCodeActionModalVisible}
                     title={translate('cardPage.validateCardTitle')}
                     descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+                    onModalHide={onRedirect}
+                    disableAnimation
                 />
             )}
         </InteractiveStepWrapper>