thisyahlen/chore: show traders hub header and hide cashier in wallets (…

…deriv-com#10689) * chore: show traders hub header and hide cashier in wallets * chore: fix test * chore: fix test v2
heorhi-deriv · Oct 16, 2023 · 29ee48f · 29ee48f
1 parent b1d9406
commit 29ee48f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 40 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/menu-links.jsx b/packages/core/src/App/Components/Layout/Header/menu-links.jsx
@@ -5,7 +5,7 @@ import { BinaryLink } from '../../Routes';
 import { observer, useStore } from '@deriv/stores';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { useP2PNotificationCount, useIsRealAccountNeededForCashier } from '@deriv/hooks';
+import { useP2PNotificationCount, useIsRealAccountNeededForCashier, useFeatureFlags } from '@deriv/hooks';
 import './menu-links.scss';
 import { useHistory } from 'react-router';
 
@@ -92,13 +92,14 @@ const MenuLinks = observer(({ is_traders_hub_routes = false }) => {
     const { client, ui } = useStore();
     const { is_logged_in } = client;
     const { is_mobile } = ui;
+    const { is_next_wallet_enabled } = useFeatureFlags();
 
     if (!is_logged_in) return <></>;
 
     return (
         <div key={`menu-links__${i18n.language}`} className='header__menu-links'>
             {!is_traders_hub_routes && <ReportTab />}
-            {!is_mobile && <CashierTab />}
+            {!is_mobile && !is_next_wallet_enabled && <CashierTab />}
         </div>
     );
 });

diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -83,10 +83,11 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                 ];
             } else if (location === routes.traders_hub || is_trading_hub_category) {
                 primary_routes = [routes.account, routes.cashier];
+            } else if (location === routes.wallets) {
+                primary_routes = [routes.reports, routes.account];
             } else {
                 primary_routes = [routes.reports, routes.account, routes.cashier];
             }
-
             setPrimaryRoutesConfig(getFilteredRoutesConfig(routes_config, primary_routes));
         };
 
@@ -95,7 +96,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
         }
 
         return () => clearTimeout(timeout);
-    }, [is_appstore, account_status, should_allow_authentication]);
+    }, [is_appstore, account_status, should_allow_authentication, is_trading_hub_category]);
 
     const toggleDrawer = React.useCallback(() => {
         if (is_mobile_language_menu_open) setMobileLanguageMenuOpen(false);
@@ -108,7 +109,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
             }, 400);
         }
         expandSubMenu(false);
-    }, [expandSubMenu, is_open]);
+    }, [expandSubMenu, is_open, is_mobile_language_menu_open, setMobileLanguageMenuOpen]);
 
     const getFilteredRoutesConfig = (all_routes_config, routes_to_filter) => {
         const subroutes_config = all_routes_config.flatMap(i => i.routes || []);

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
@@ -10,6 +10,7 @@ jest.mock('@deriv/components', () => {
         Popover: () => <div>mockedPopover</div>,
     };
 });
+
 // eslint-disable-next-line react/display-name
 jest.mock('App/Components/Routes', () => () => <div data-testid='dt_binary_link'>MockedBinaryLink</div>);
 // eslint-disable-next-line react/display-name
@@ -19,6 +20,12 @@ jest.mock('../traders-hub-onboarding', () => () => (
     <div data-testid='dt_traders_hub_onboarding'>MockedTradersHubOnboarding</div>
 ));
 
+jest.mock('@deriv/hooks', () => ({
+    useFeatureFlags: () => ({
+        is_next_wallet_enabled: false,
+    }),
+}));
+
 describe('DefaultMobileLinks', () => {
     const mock_props: React.ComponentProps<typeof DefaultMobileLinks> = {
         handleClickCashier: jest.fn(),

diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx
@@ -32,6 +32,14 @@ jest.mock('Assets/SvgComponents/header/deriv-rebranding-logo.svg', () => jest.fn
 jest.mock('../../../CurrencySelectionModal', () => jest.fn(() => <div>MockedCurrencySelectionModal</div>));
 jest.mock('../show-notifications', () => jest.fn(() => <div>MockedShowNotifications</div>));
 
+jest.mock('@deriv/hooks', () => ({
+    useFeatureFlags: () => ({
+        is_next_wallet_enabled: false,
+    }),
+    useIsRealAccountNeededForCashier: () => false,
+    useHasSetCurrency: () => true,
+}));
+
 describe('TradersHubHeader', () => {
     const renderComponent = () =>
         render(

diff --git a/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx b/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx
@@ -8,37 +8,43 @@ import { BinaryLink } from 'App/Components/Routes';
 
 import ShowNotifications from './show-notifications';
 import TradersHubOnboarding from './traders-hub-onboarding';
+import { useFeatureFlags } from '@deriv/hooks';
 
 type TDefaultMobileLinks = {
     handleClickCashier: () => void;
 };
 
-const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLinks) => (
-    <React.Fragment>
-        <div className='traders-hub-header__menu-right--items--onboarding'>
-            <TradersHubOnboarding />
-        </div>
-        <div className='traders-hub-header__menu-right--items--notifications'>
-            <ShowNotifications />
-        </div>
-        <Popover
-            alignment='bottom'
-            classNameBubble='account-settings-toggle__tooltip'
-            message={<Localize i18n_default_text='Manage account settings' />}
-            should_disable_pointer_events
-            zIndex='9999'
-        >
-            <BinaryLink className='traders-hub-header__setting' to={routes.personal_details}>
-                <Icon icon='IcUserOutline' size={20} />
-            </BinaryLink>
-        </Popover>
-        <div className='traders-hub-header__cashier-button'>
-            <Button primary small onClick={handleClickCashier}>
-                <Localize i18n_default_text='Cashier' />
-            </Button>
-        </div>
-    </React.Fragment>
-));
+const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLinks) => {
+    const { is_next_wallet_enabled } = useFeatureFlags();
+    return (
+        <React.Fragment>
+            <div className='traders-hub-header__menu-right--items--onboarding'>
+                <TradersHubOnboarding />
+            </div>
+            <div className='traders-hub-header__menu-right--items--notifications'>
+                <ShowNotifications />
+            </div>
+            <Popover
+                alignment='bottom'
+                classNameBubble='account-settings-toggle__tooltip'
+                message={<Localize i18n_default_text='Manage account settings' />}
+                should_disable_pointer_events
+                zIndex='9999'
+            >
+                <BinaryLink className='traders-hub-header__setting' to={routes.personal_details}>
+                    <Icon icon='IcUserOutline' size={20} />
+                </BinaryLink>
+            </Popover>
+            {!is_next_wallet_enabled && (
+                <div className='traders-hub-header__cashier-button'>
+                    <Button primary small onClick={handleClickCashier}>
+                        <Localize i18n_default_text='Cashier' />
+                    </Button>
+                </div>
+            )}
+        </React.Fragment>
+    );
+});
 
 DefaultMobileLinks.displayName = 'DefaultMobileLinks';
 

diff --git a/packages/core/src/App/Containers/Layout/header/header.tsx b/packages/core/src/App/Containers/Layout/header/header.tsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { PlatformContext, routes } from '@deriv/shared';
+import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import DefaultHeader from './default-header.jsx';
-import DashboardHeader from './dashboard-header.jsx';
 import DTraderHeader from './dtrader-header.jsx';
 import TradersHubHeader from './traders-hub-header';
 
 const Header = observer(() => {
     const { client } = useStore();
     const { is_logged_in } = client;
-    const { is_appstore } = React.useContext(PlatformContext);
     const { pathname } = useLocation();
     const traders_hub_routes =
-        pathname === routes.traders_hub ||
-        pathname.startsWith(routes.account) ||
-        pathname.startsWith(routes.cashier) ||
+        [routes.traders_hub, routes.account, routes.cashier, routes.wallets, routes.compare_cfds].includes(pathname) ||
         pathname.startsWith(routes.compare_cfds);
 
-    if (is_appstore) {
-        return <DashboardHeader />;
-    } else if (is_logged_in) {
+    if (is_logged_in) {
         let result;
         if (traders_hub_routes) {
             result = <TradersHubHeader />;