Nijil/wall 3711/wallets route update

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,

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(<DefaultMobileLinks />, { 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);
     });
 });

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('<InsufficientBalanceModal />', () => {
         message: 'test',
         toggleModal: jest.fn(),
     };
+    let mock_store: ReturnType<typeof mockStore>;
+
+    beforeEach(() => {
+        mock_store = mockStore({
+            client: { has_wallet: false },
+            ui: {
+                is_mobile: false,
+            },
+        });
+    });
 
     const history = createBrowserHistory();
-    const renderWithRouter = (component: React.ReactElement) => {
-        return render(<Router history={history}>{component}</Router>);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => {
+        return (
+            <StoreProvider store={mock_store}>
+                <Router history={history}>{children}</Router>
+            </StoreProvider>
+        );
     };
 
     it('modal title, and modal description should be rendered', () => {
-        renderWithRouter(<InsufficientBalanceModal {...mocked_props} />);
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        mock_store.client.has_wallet = true;
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        const { container } = render(<InsufficientBalanceModal {...mocked_props} />, { wrapper });
         expect(container).toBeEmptyDOMElement();
     });
 });

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 (
             <Modal
                 id='dt_insufficient_balance_modal'
@@ -33,7 +35,7 @@ const InsufficientBalanceModal = observer(
                         text={is_virtual ? localize('OK') : localize('Deposit now')}
                         onClick={() => {
                             if (!is_virtual) {
-                                history?.push?.(routes.cashier_deposit);
+                                history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit);
                             } else {
                                 toggleModal();
                             }

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: '/',

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('<InsufficientBalanceModal />', () => {
         message: 'test',
         toggleModal: jest.fn(),
     };
+    let mock_store: ReturnType<typeof mockStore>;
+
+    beforeEach(() => {
+        mock_store = mockStore({
+            client: { has_wallet: false },
+            ui: {
+                is_mobile: false,
+            },
+        });
+    });
 
     const history = createBrowserHistory();
-    const renderWithRouter = (component: React.ReactElement) => {
-        return render(<Router history={history}>{component}</Router>);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => {
+        return (
+            <StoreProvider store={mock_store}>
+                <Router history={history}>{children}</Router>
+            </StoreProvider>
+        );
     };
 
     it('modal title, and modal description should be rendered', () => {
-        renderWithRouter(<InsufficientBalanceModal {...mocked_props} />);
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        render(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />, { 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(<InsufficientBalanceModal {...mocked_props} />);
+        const { container } = render(<InsufficientBalanceModal {...mocked_props} />, { wrapper });
         expect(container).toBeEmptyDOMElement();
     });
 });

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 (
             <Modal
                 id='dt_insufficient_balance_modal'
@@ -34,7 +36,7 @@ const InsufficientBalanceModal = observer(
                         text={is_virtual ? localize('OK') : localize('Deposit now')}
                         onClick={() => {
                             if (!is_virtual) {
-                                history?.push?.(routes.cashier_deposit);
+                                history?.push?.(has_wallet ? routes.wallets_deposit : routes.cashier_deposit);
                             } else {
                                 toggleModal();
                             }