From 9926a6ac620709057f40e3b8a0d9a1ef441f15d2 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 28 Jun 2023 11:43:06 +0800 Subject: [PATCH 1/2] chore: fix cfd modal display --- .../account-transfer-modal/account-transfer-modal.tsx | 3 ++- .../account-transfer-form/account-transfer-form.scss | 1 + .../__tests__/account-transfer-receipt.spec.tsx | 3 +++ .../account-transfer-receipt/account-transfer-receipt.tsx | 6 ++++-- .../cashier/src/pages/account-transfer/account-transfer.tsx | 1 - packages/cashier/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, 19 insertions(+), 6 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('', () => { 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..a6bfefb9a599 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 @@ -19,10 +19,11 @@ type TAccountTransferReceipt = RouteComponentProps & { }; 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,7 +64,7 @@ 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(); } 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 ce2e1965a666..fe24c1baf133 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -374,6 +374,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 b95da3267e84..1018e3117f56 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -410,6 +410,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; From d303730734e2ce3bf6125c2d1d53b36352cd2423 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 28 Jun 2023 15:56:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20finishing=20touches=20=E2=9C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account-transfer-receipt.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 a6bfefb9a599..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,7 +15,7 @@ type TSwitch = { }; type TAccountTransferReceipt = RouteComponentProps & { - onClose?: () => void; + onClose: () => void; }; const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferReceipt) => { @@ -68,9 +68,6 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR 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 ( @@ -158,7 +155,16 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR /> -