From 29ee48fcbf7dfa6ee6cd42480f80632f544eceef Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Mon, 16 Oct 2023 11:37:16 +0800 Subject: [PATCH] thisyahlen/chore: show traders hub header and hide cashier in wallets (#10689) * chore: show traders hub header and hide cashier in wallets * chore: fix test * chore: fix test v2 --- .../Components/Layout/Header/menu-links.jsx | 5 +- .../Layout/Header/toggle-menu-drawer.jsx | 7 ++- .../__tests__/default-mobile-links.spec.tsx | 7 +++ .../__tests__/traders-hub-header.spec.tsx | 8 +++ .../Layout/header/default-mobile-links.tsx | 58 ++++++++++--------- .../App/Containers/Layout/header/header.tsx | 12 +--- 6 files changed, 57 insertions(+), 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 index 2466a078c292..b32b1b605998 100644 --- 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 (
{!is_traders_hub_routes && } - {!is_mobile && } + {!is_mobile && !is_next_wallet_enabled && }
); }); 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 index d05063359b7b..eee009853b8d 100644 --- 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 index 18f638defb0a..917aed16d39e 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 @@ -10,6 +10,7 @@ jest.mock('@deriv/components', () => { Popover: () =>
mockedPopover
, }; }); + // eslint-disable-next-line react/display-name jest.mock('App/Components/Routes', () => () =>
MockedBinaryLink
); // eslint-disable-next-line react/display-name @@ -19,6 +20,12 @@ jest.mock('../traders-hub-onboarding', () => () => (
MockedTradersHubOnboarding
)); +jest.mock('@deriv/hooks', () => ({ + useFeatureFlags: () => ({ + is_next_wallet_enabled: false, + }), +})); + describe('DefaultMobileLinks', () => { const mock_props: React.ComponentProps = { 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 index 8d2e49375882..a75fb1f9bab6 100644 --- 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(() =>
MockedCurrencySelectionModal
)); jest.mock('../show-notifications', () => jest.fn(() =>
MockedShowNotifications
)); +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 index 6dcd2a36e4ed..b65c646b378e 100644 --- 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) => ( - -
- -
-
- -
- } - should_disable_pointer_events - zIndex='9999' - > - - - - -
- -
- -)); +const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLinks) => { + const { is_next_wallet_enabled } = useFeatureFlags(); + return ( + +
+ +
+
+ +
+ } + should_disable_pointer_events + zIndex='9999' + > + + + + + {!is_next_wallet_enabled && ( +
+ +
+ )} + + ); +}); 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 index 415d0c93be8e..30e6697fde61 100644 --- 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 ; - } else if (is_logged_in) { + if (is_logged_in) { let result; if (traders_hub_routes) { result = ;