From 8aa6a1210ccfe0dff8521f69b144b13488ededf7 Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:31:22 +0800
Subject: [PATCH] chore: fix cfd modal display (#9163)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: fix cfd modal display

* fix: finishing touches ✨
---
 .../account-transfer-modal.tsx                |  3 ++-
 .../account-transfer-form.scss                |  1 +
 .../account-transfer-receipt.spec.tsx         |  3 +++
 .../account-transfer-receipt.tsx              | 22 +++++++++++++------
 .../account-transfer/account-transfer.tsx     |  1 -
 .../src/stores/account-transfer-store.ts      |  4 ++--
 packages/core/src/Stores/traders-hub-store.js |  5 +++++
 packages/stores/src/mockStore.ts              |  1 +
 packages/stores/types.ts                      |  1 +
 9 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
index 5dd8a7c24f4a..bc5b0d1955c7 100644
--- a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
+++ b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
@@ -15,7 +15,7 @@ const AccountTransferModal = observer(({ is_modal_open, toggleModal }: TAccountT
     const {
         modules: {
             cashier: {
-                account_transfer: { is_transfer_confirm, should_switch_account },
+                account_transfer: { is_transfer_confirm, should_switch_account, setShouldSwitchAccount },
             },
         },
         traders_hub: { closeModal, setSelectedAccount },
@@ -25,6 +25,7 @@ const AccountTransferModal = observer(({ is_modal_open, toggleModal }: TAccountT
 
     React.useEffect(() => {
         return () => {
+            setShouldSwitchAccount(false);
             setSelectedAccount({});
             closeModal();
         };
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss
index d80ff88994c9..f157aa3755c4 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss
@@ -207,6 +207,7 @@
 }
 .dc-modal__container_account_transfer {
     &_switch_modal {
+        transition: none;
         .dc-modal {
             @include mobile() {
                 &-header__close {
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/__tests__/account-transfer-receipt.spec.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-receipt/__tests__/account-transfer-receipt.spec.tsx
index 840558c2321c..db44c936df2f 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/__tests__/account-transfer-receipt.spec.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-receipt/__tests__/account-transfer-receipt.spec.tsx
@@ -23,6 +23,9 @@ describe('<AccountTransferReceipt />', () => {
             common: {
                 is_from_derivgo: false,
             },
+            traders_hub: {
+                closeAccountTransferModal: jest.fn(),
+            },
             modules: {
                 cashier: {
                     account_transfer: {
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx
index 745cffe93011..255346fa58ae 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx
@@ -15,14 +15,15 @@ type TSwitch = {
 };
 
 type TAccountTransferReceipt = RouteComponentProps & {
-    onClose?: () => void;
+    onClose: () => void;
 };
 
 const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferReceipt) => {
-    const { common, client } = useStore();
+    const { common, client, traders_hub } = useStore();
     const { account_transfer } = useCashierStore();
     const { is_from_derivgo } = common;
     const { loginid, switchAccount } = client;
+    const { closeAccountTransferModal } = traders_hub;
     const { receipt, resetAccountTransfer, selected_from, selected_to, setShouldSwitchAccount } = account_transfer;
 
     const is_from_outside_cashier = !location.pathname.startsWith(routes.cashier);
@@ -33,6 +34,7 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
     React.useEffect(() => {
         return () => {
             resetAccountTransfer();
+            closeAccountTransferModal();
         };
     }, [resetAccountTransfer]);
 
@@ -62,13 +64,10 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
         } else {
             // if the account transferred to is a Deriv MT5 account that can't be switched to, switch to from account instead
             // otherwise switch to the account transferred to
-            setShouldSwitchAccount();
+            setShouldSwitchAccount(true);
             setSwitchTo(selected_to.is_mt ? selected_from : selected_to);
             toggleSwitchAlert();
         }
-        // close modal only when the user try to transfer money from traders-hub, not from cashier
-        // because in cashier this component is not a modal
-        if (is_from_outside_cashier) onClose?.();
     };
 
     return (
@@ -156,7 +155,16 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
                     />
                 </Modal.Body>
                 <Modal.Footer>
-                    <Button has_effect text={localize('Cancel')} onClick={toggleSwitchAlert} secondary large />
+                    <Button
+                        has_effect
+                        text={localize('Cancel')}
+                        onClick={() => {
+                            setShouldSwitchAccount(false);
+                            toggleSwitchAlert();
+                        }}
+                        secondary
+                        large
+                    />
                     <Button
                         has_effect
                         text={localize(`Switch to ${switch_to.currency} account`)}
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer.tsx b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
index 7714380a7e56..f5c7f3fcb527 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
@@ -114,7 +114,6 @@ const AccountTransfer = observer(({ onClickDeposit, onClickNotes, onClose, setSi
             setSideNotes={setSideNotes}
             onClickDeposit={onClickDeposit}
             onClickNotes={onClickNotes}
-            onClose={onClose}
         />
     );
 });
diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts
index 1a916334619b..eecd5f43f5ec 100644
--- a/packages/cashier/src/stores/account-transfer-store.ts
+++ b/packages/cashier/src/stores/account-transfer-store.ts
@@ -105,8 +105,8 @@ export default class AccountTransferStore {
         return need_financial_assessment && this.error.is_ask_financial_risk_approval;
     }
 
-    setShouldSwitchAccount() {
-        this.should_switch_account = true;
+    setShouldSwitchAccount(value: boolean) {
+        this.should_switch_account = value;
     }
 
     setBalanceByLoginId(loginid: string, balance: string | number) {
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 906d1a1c390f..32c5889894f7 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -86,6 +86,7 @@ export default class TradersHubStore extends BaseStore {
             show_eu_related_content: computed,
             startTrade: action.bound,
             toggleAccountTransferModal: action.bound,
+            closeAccountTransferModal: action.bound,
             toggleAccountTypeModalVisibility: action.bound,
             setIsOnboardingVisited: action.bound,
             toggleFailedVerificationModalVisibility: action.bound,
@@ -727,6 +728,10 @@ export default class TradersHubStore extends BaseStore {
         });
     }
 
+    closeAccountTransferModal() {
+        this.is_account_transfer_modal_open = false;
+    }
+
     toggleAccountTransferModal() {
         this.is_account_transfer_modal_open = !this.is_account_transfer_modal_open;
     }
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index b6298c3557cb..080694a3d746 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -284,6 +284,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             selectRegion: jest.fn(),
             setSelectedAccount: jest.fn(),
             is_low_risk_cr_eu_real: false,
+            closeAccountTransferModal: jest.fn(),
             toggleRegulatorsCompareModal: jest.fn(),
             selected_region: '',
             is_demo: false,
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index d4b881635b3e..ad3723e9bb41 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -364,6 +364,7 @@ type TTradersHubStore = {
     setTogglePlatformType: (platform_type: string) => void;
     is_real: boolean;
     selectRegion: (region: string) => void;
+    closeAccountTransferModal: () => void;
     toggleRegulatorsCompareModal: () => void;
     selected_region: string;
     openFailedVerificationModal: (selected_account_type: string) => void;