From 3f60e5b73db0a219a92c8d0faffdd02d713ddbd7 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Tue, 3 Dec 2024 17:35:38 +0700
Subject: [PATCH] fix: correct back button behavior on copilot confirmation
 page

---
 src/components/ValidateCodeActionModal/index.tsx              | 2 ++
 src/components/ValidateCodeActionModal/type.ts                | 3 +++
 .../settings/Security/AddDelegate/ConfirmDelegatePage.tsx     | 1 +
 .../settings/Security/AddDelegate/DelegateMagicCodeModal.tsx  | 4 +++-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx
index f2063f7926f4..42d8ef8501b8 100644
--- a/src/components/ValidateCodeActionModal/index.tsx
+++ b/src/components/ValidateCodeActionModal/index.tsx
@@ -29,6 +29,7 @@ function ValidateCodeActionModal({
     sendValidateCode,
     hasMagicCodeBeenSent,
     isLoading,
+    shouldHandleNavigationBack,
 }: ValidateCodeActionModalProps) {
     const themeStyles = useThemeStyles();
     const firstRenderRef = useRef(true);
@@ -53,6 +54,7 @@ function ValidateCodeActionModal({
 
     return (
         <Modal
+            shouldHandleNavigationBack={shouldHandleNavigationBack}
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             isVisible={isVisible}
             onClose={hide}
diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts
index 5537af67b89d..aed82f0fa525 100644
--- a/src/components/ValidateCodeActionModal/type.ts
+++ b/src/components/ValidateCodeActionModal/type.ts
@@ -43,6 +43,9 @@ type ValidateCodeActionModalProps = {
 
     /** Whether the form is loading or not */
     isLoading?: boolean;
+
+    /** Whether handle navigation back when modal show. */
+    shouldHandleNavigationBack?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
index 57d50400863e..f105f5a69243 100644
--- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
+++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
@@ -77,6 +77,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
                 shouldShowRightIcon
             />
             <DelegateMagicCodeModal
+                shouldHandleNavigationBack
                 login={login}
                 role={role}
                 onClose={() => {
diff --git a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
index 6c108403c36b..282c9bc9fc10 100644
--- a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
+++ b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
@@ -16,9 +16,10 @@ type DelegateMagicCodeModalProps = {
     role: ValueOf<typeof CONST.DELEGATE_ROLE>;
     isValidateCodeActionModalVisible: boolean;
     onClose?: () => void;
+    shouldHandleNavigationBack?: boolean;
 };
 
-function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible}: DelegateMagicCodeModalProps) {
+function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible, shouldHandleNavigationBack}: DelegateMagicCodeModalProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
 
@@ -48,6 +49,7 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal
 
     return (
         <ValidateCodeActionModal
+            shouldHandleNavigationBack={shouldHandleNavigationBack}
             clearError={clearError}
             onClose={onBackButtonPress}
             validateError={validateLoginError}