chore: fix cfd modal display (#9163)

* chore: fix cfd modal display * fix: finishing touches ✨
binary-com · Jun 30, 2023 · 8aa6a12 · 8aa6a12 · vercel · Jun 30, 2023
1 parent b14273f
commit 8aa6a12
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 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
@@ -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
@@ -207,6 +207,7 @@
 }
 .dc-modal__container_account_transfer {
     &_switch_modal {
+        transition: none;
         .dc-modal {
             @include mobile() {
                 &-header__close {

diff --git a/...ges/account-transfer/account-transfer-receipt/__tests__/account-transfer-receipt.spec.tsx b/...ges/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/.../cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;