From c39ab35070a10918b4c4370947c51f93e6cde3e9 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 1 Oct 2025 10:55:37 +0700
Subject: [PATCH 1/3] Deactivate card modal shown briefly for a new card

---
 .../expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
index b97e97424852..11391d9df812 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
+++ b/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 ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import Badge from '@components/Badge';
@@ -72,6 +72,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]);
@@ -82,7 +84,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
 
     const deactivateCard = () => {
         setIsDeactivateModalVisible(false);
-        Navigation.goBack();
+        shouldGoBack.current = true;
         InteractionManager.runAfterInteractions(() => {
             deactivateCardAction(defaultFundID, card);
         });
@@ -218,6 +220,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')}

From a86ee6a1488f48dd4bfc8d05899f04c8f6357518 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 7 Oct 2025 11:42:03 +0700
Subject: [PATCH 2/3] update redirect logic

---
 .../ValidateCodeActionModal/index.tsx         |  2 ++
 .../ValidateCodeActionModal/type.ts           |  3 ++
 .../issueNew/ConfirmationStep.tsx             | 29 +++++++++++--------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx
index 155e1d3d2f37..c07cb0d86e7b 100644
--- a/src/components/ValidateCodeActionModal/index.tsx
+++ b/src/components/ValidateCodeActionModal/index.tsx
@@ -21,6 +21,7 @@ function ValidateCodeActionModal({
     disableAnimation,
     threeDotsMenuItems = [],
     onThreeDotsButtonPress = () => {},
+    onModalHide = () => {},
 }: ValidateCodeActionModalProps) {
     return (
         <Modal
@@ -31,6 +32,7 @@ function ValidateCodeActionModal({
             onBackdropPress={onClose}
             shouldUseModalPaddingStyle={false}
             animationInTiming={disableAnimation ? 1 : undefined}
+            onModalHide={onModalHide}
         >
             <ValidateCodeActionContent
                 title={title}
diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts
index 66568a41df6c..fadf12d96eb6 100644
--- a/src/components/ValidateCodeActionModal/type.ts
+++ b/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};
diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
index 9f165cf431ac..50ad59ec0d66 100644
--- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -1,4 +1,4 @@
-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';
@@ -6,7 +6,6 @@ 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}
@@ -170,6 +174,7 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
                     isVisible={isValidateCodeActionModalVisible}
                     title={translate('cardPage.validateCardTitle')}
                     descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+                    onModalHide={onRedirect}
                 />
             )}
         </InteractiveStepWrapper>

From 21d8cfa2c2ed3bf58b009f95c911eba76bd946a8 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 21 Oct 2025 15:21:02 +0700
Subject: [PATCH 3/3] disableAnimation

---
 src/components/ValidateCodeActionModal/index.tsx                | 1 +
 src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx
index c07cb0d86e7b..b99f9ce951d7 100644
--- a/src/components/ValidateCodeActionModal/index.tsx
+++ b/src/components/ValidateCodeActionModal/index.tsx
@@ -33,6 +33,7 @@ function ValidateCodeActionModal({
             shouldUseModalPaddingStyle={false}
             animationInTiming={disableAnimation ? 1 : undefined}
             onModalHide={onModalHide}
+            animationOutTiming={disableAnimation ? 1 : undefined}
         >
             <ValidateCodeActionContent
                 title={title}
diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
index 11e5d0dda086..9126b0469dde 100644
--- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -176,6 +176,7 @@ function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: Confirm
                     title={translate('cardPage.validateCardTitle')}
                     descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
                     onModalHide={onRedirect}
+                    disableAnimation
                 />
             )}
         </InteractiveStepWrapper>