From 5e46381bca5587e2b4ce9db109c768f66572f7da Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Wed, 22 May 2024 16:43:01 +0400 Subject: [PATCH 1/3] chore: refactor routes.ts for better readability --- packages/shared/src/utils/routes/routes.ts | 43 +++++++++++++--------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index e1d4ee7d5da4..105e70633ad1 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -1,7 +1,23 @@ import { getUrlSmartTrader, getUrlBinaryBot } from '../url/helpers'; export const routes = { + reset_password: '/', error404: '/404', + index: '/index', + redirect: '/redirect', + endpoint: '/endpoint', + complaints_policy: '/complaints-policy', + contract: '/contract/:contract_id', + + // platforms + mt5: '/mt5', + dxtrade: '/derivx', + bot: '/bot', + trade: '/dtrader', + smarttrader: getUrlSmartTrader(), + binarybot: getUrlBinaryBot(), + + // account account: '/account', trading_assessment: '/account/trading-assessment', languages: '/account/languages', @@ -22,28 +38,26 @@ export const routes = { login_history: '/account/login-history', two_factor_authentication: '/account/two-factor-authentication', self_exclusion: '/account/self-exclusion', + + // settings + settings: '/settings', account_password: '/settings/account_password', apps: '/settings/apps', cashier_password: '/settings/cashier_password', - contract: '/contract/:contract_id', exclusion: '/settings/exclusion', financial: '/settings/financial', history: '/settings/history', - index: '/index', limits: '/settings/limits', - mt5: '/mt5', - dxtrade: '/derivx', + token: '/settings/token', personal: '/settings/personal', + + // reports + reports: '/reports', positions: '/reports/positions', profit: '/reports/profit', - reports: '/reports', - reset_password: '/', - redirect: '/redirect', - settings: '/settings', statement: '/reports/statement', - token: '/settings/token', - trade: '/dtrader', - bot: '/bot', + + // cashier cashier: '/cashier', cashier_deposit: '/cashier/deposit', cashier_withdrawal: '/cashier/withdrawal', @@ -54,6 +68,7 @@ export const routes = { cashier_onramp: '/cashier/on-ramp', cashier_p2p: '/cashier/p2p', cashier_p2p_v2: '/cashier/p2p-v2', + cashier_pa_transfer: '/cashier/payment-agent-transfer', // P2P p2p_verification: '/cashier/p2p/verification', @@ -64,12 +79,6 @@ export const routes = { p2p_advertiser_page: '/cashier/p2p/advertiser', p2p_v2_inner: '/cashier/p2p-v2/inner', - cashier_pa_transfer: '/cashier/payment-agent-transfer', - smarttrader: getUrlSmartTrader(), - binarybot: getUrlBinaryBot(), - endpoint: '/endpoint', - complaints_policy: '/complaints-policy', - // Appstore old_traders_hub: '/appstore/traders-hub', traders_hub: '/', From 66037f426126a1e3dfe027b7f85b58c82e739ae3 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Wed, 22 May 2024 16:46:40 +0400 Subject: [PATCH 2/3] fix: insufficient balance modal button routing --- .../__tests__/default-mobile-links.spec.tsx | 3 +- .../insufficient-balance-modal.spec.tsx | 43 +++++++++------- .../insufficient-balance-modal.tsx | 4 +- .../insufficient-balance-modal.spec.tsx | 49 ++++++++++++------- .../insufficient-balance-modal.tsx | 4 +- 5 files changed, 65 insertions(+), 38 deletions(-) diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx index 64088d668d13..bf9dfec47eb7 100644 --- a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx +++ b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx @@ -4,6 +4,7 @@ import { BrowserHistory, createBrowserHistory } from 'history'; import { Router } from 'react-router'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { routes } from '@deriv/shared'; import DefaultMobileLinks from '../default-mobile-links'; import { useIsRealAccountNeededForCashier } from '@deriv/hooks'; @@ -72,6 +73,6 @@ describe('DefaultMobileLinks', () => { render(, { wrapper }); const cashierButton = screen.getByRole('button', { name: 'Cashier' }); userEvent.click(cashierButton); - expect(history.location.pathname).toBe('/cashier/deposit'); + expect(history.location.pathname).toBe(routes.cashier_deposit); }); }); diff --git a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx index fe4cdde3c975..9db5a1c8c48b 100644 --- a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx +++ b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx @@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react'; import InsufficientBalanceModal from '../insufficient-balance-modal'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router-dom'; +import { StoreProvider, mockStore } from '@deriv/stores'; import { routes } from '@deriv/shared'; import userEvent from '@testing-library/user-event'; @@ -19,16 +20,6 @@ type TModal = React.FC<{ }>; }; -jest.mock('@deriv/stores', () => ({ - ...jest.requireActual('@deriv/stores'), - observer: jest.fn(x => x), - useStore: jest.fn(() => ({ - ui: { - is_mobile: false, - }, - })), -})); - jest.mock('@deriv/components', () => { const original_module = jest.requireActual('@deriv/components'); const Modal: TModal = jest.fn(({ children, is_open, title }) => { @@ -58,35 +49,51 @@ describe('', () => { message: 'test', toggleModal: jest.fn(), }; + let mock_store: ReturnType; + + beforeEach(() => { + mock_store = mockStore({ + client: { has_wallet: false }, + ui: { + is_mobile: false, + }, + }); + }); const history = createBrowserHistory(); - const renderWithRouter = (component: React.ReactElement) => { - return render({component}); + + const wrapper = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); }; it('modal title, and modal description should be rendered', () => { - renderWithRouter(); + render(, { wrapper }); expect(screen.getByText(/insufficient balance/i)).toBeInTheDocument(); expect(screen.getByText(/test/i)).toBeInTheDocument(); }); it('button text should be OK if is_virtual is true and toggleModal should be called if user clicks on the button', () => { - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/ok/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(mocked_props.toggleModal).toHaveBeenCalled(); }); - it('button text should be "Deposit now" if is_virtual is false and should navigate to bla bla if you click on the button', () => { + it('button text should be "Deposit now" if is_virtual is false and should navigate to wallets overlay deposit tab if client has CRW account and click on the button', () => { mocked_props.is_virtual = false; - renderWithRouter(); + mock_store.client.has_wallet = true; + render(, { wrapper }); const button = screen.getByText(/deposit now/i); expect(button).toBeInTheDocument(); userEvent.click(button); - expect(history.location.pathname).toBe(routes.cashier_deposit); + expect(history.location.pathname).toBe(routes.wallets_deposit); }); it('should return null when is_visible is false', () => { mocked_props.is_visible = false; - const { container } = renderWithRouter(); + const { container } = render(, { wrapper }); expect(container).toBeEmptyDOMElement(); }); }); diff --git a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx index 349ec805ad09..613a80d9c015 100644 --- a/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx +++ b/packages/reports/src/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx @@ -16,7 +16,9 @@ const InsufficientBalanceModal = observer( ({ history, is_virtual, is_visible, message, toggleModal }: TInsufficientBalanceModal) => { const { ui: { is_mobile }, + client, } = useStore(); + const { has_wallet } = client; return ( { if (!is_virtual) { - history?.push?.(routes.cashier_deposit); + history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit); } else { toggleModal(); } diff --git a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx index fe4cdde3c975..22091acaddd1 100644 --- a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx +++ b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/__tests__/insufficient-balance-modal.spec.tsx @@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react'; import InsufficientBalanceModal from '../insufficient-balance-modal'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router-dom'; +import { StoreProvider, mockStore } from '@deriv/stores'; import { routes } from '@deriv/shared'; import userEvent from '@testing-library/user-event'; @@ -19,16 +20,6 @@ type TModal = React.FC<{ }>; }; -jest.mock('@deriv/stores', () => ({ - ...jest.requireActual('@deriv/stores'), - observer: jest.fn(x => x), - useStore: jest.fn(() => ({ - ui: { - is_mobile: false, - }, - })), -})); - jest.mock('@deriv/components', () => { const original_module = jest.requireActual('@deriv/components'); const Modal: TModal = jest.fn(({ children, is_open, title }) => { @@ -58,35 +49,59 @@ describe('', () => { message: 'test', toggleModal: jest.fn(), }; + let mock_store: ReturnType; + + beforeEach(() => { + mock_store = mockStore({ + client: { has_wallet: false }, + ui: { + is_mobile: false, + }, + }); + }); const history = createBrowserHistory(); - const renderWithRouter = (component: React.ReactElement) => { - return render({component}); + + const wrapper = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); }; it('modal title, and modal description should be rendered', () => { - renderWithRouter(); + render(, { wrapper }); expect(screen.getByText(/insufficient balance/i)).toBeInTheDocument(); expect(screen.getByText(/test/i)).toBeInTheDocument(); }); it('button text should be OK if is_virtual is true and toggleModal should be called if user clicks on the button', () => { - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/ok/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(mocked_props.toggleModal).toHaveBeenCalled(); }); - it('button text should be "Deposit now" if is_virtual is false and should navigate to bla bla if you click on the button', () => { + it('button text should be "Deposit now" if is_virtual is false and should navigate to cashier deposit page if client has CR account and click on the button', () => { mocked_props.is_virtual = false; - renderWithRouter(); + render(, { wrapper }); const button = screen.getByText(/deposit now/i); expect(button).toBeInTheDocument(); userEvent.click(button); expect(history.location.pathname).toBe(routes.cashier_deposit); }); + it('button text should be "Deposit now" if is_virtual is false and should navigate to wallets overlay deposit tab if client has CRW account and click on the button', () => { + mocked_props.is_virtual = false; + mock_store.client.has_wallet = true; + render(, { wrapper }); + const button = screen.getByText(/deposit now/i); + expect(button).toBeInTheDocument(); + userEvent.click(button); + expect(history.location.pathname).toBe(routes.wallets_deposit); + }); it('should return null when is_visible is false', () => { mocked_props.is_visible = false; - const { container } = renderWithRouter(); + const { container } = render(, { wrapper }); expect(container).toBeEmptyDOMElement(); }); }); diff --git a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx index f4fe48a7c416..9d76b3bee56b 100644 --- a/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx +++ b/packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/insufficient-balance-modal.tsx @@ -16,7 +16,9 @@ const InsufficientBalanceModal = observer( ({ history, is_virtual, is_visible, message, toggleModal }: TInsufficientBalanceModal) => { const { ui: { is_mobile }, + client, } = useStore(); + const { has_wallet } = client; return ( { if (!is_virtual) { - history?.push?.(routes.cashier_deposit); + history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit); } else { toggleModal(); } From 7f632d7c9b70c39effbc45f08b26d755f0aaa945 Mon Sep 17 00:00:00 2001 From: nijil-deriv Date: Wed, 22 May 2024 16:48:34 +0400 Subject: [PATCH 3/3] fix: routing to contract page giving 404 --- packages/core/src/App/Constants/routes-config.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index 9666e6e43a51..1f800b8d8f59 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -394,15 +394,12 @@ const getModules = () => { path: routes.trade, component: Trader, getTitle: () => localize('Trader'), - routes: [ - { - path: routes.contract, - component: Trader, - getTitle: () => localize('Contract Details'), - is_authenticated: true, - }, - { path: routes.error404, component: Trader, getTitle: () => localize('Error 404') }, - ], + }, + { + path: routes.contract, + component: Trader, + getTitle: () => localize('Contract Details'), + is_authenticated: true, }, { path: routes.old_traders_hub,