chore: fix redirection to staging-hub when clicking on cfds button

packages/core/src/App/Components/Layout/Header/__tests__/platform-dropdown.spec.tsx

@@ -17,6 +17,13 @@ type TMockPlatformDropdown = {
     }[];
 };
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useIsHubRedirectionEnabled: () => ({
+        isHubRedirectionEnabled: false,
+    }),
+}));
+
 const history = createBrowserHistory();
 const store = mockStore({});
 
@@ -81,19 +88,19 @@ describe('PlatformDropdown component', () => {
         expect(screen.getByTestId('dt_platform_dropdown_link')).toBeInTheDocument();
         expect(screen.getByText(tradershub_redirect)).toBeInTheDocument();
     });
-    it('should update URL when clicking on another (non-selected) platform', () => {
+    it('should update URL when clicking on another (non-selected) platform', async () => {
         history.push(routes.bot);
         render(<MockPlatformDropdown platform_config={[dtrader_platform_config]} />);
 
-        userEvent.click(screen.getByText(dtrader_description));
+        await userEvent.click(screen.getByText(dtrader_description));
         expect(history.location.pathname).toBe(routes.trade);
         expect(history.location.search).toBe('');
     });
-    it('should not update URL when clicking on an already selected platform', () => {
+    it('should not update URL when clicking on an already selected platform', async () => {
         history.push(routes.trade + dtrader_url_params);
         render(<MockPlatformDropdown platform_config={[dtrader_platform_config]} />);
 
-        userEvent.click(screen.getByText(dtrader_description));
+        await userEvent.click(screen.getByText(dtrader_description));
         expect(history.location.pathname).toBe(routes.trade);
         expect(history.location.search).toBe(dtrader_url_params);
     });

packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Div100vhContainer, Icon, useOnClickOutside, Text } from '@deriv/components';
-import { routes, getActivePlatform } from '@deriv/shared';
+import { routes, getActivePlatform, platforms } from '@deriv/shared';
 import { BinaryLink } from 'App/Components/Routes';
 import 'Sass/app/_common/components/platform-dropdown.scss';
 import { Localize } from '@deriv/translations';
 import { useHistory } from 'react-router';
 import { useDevice } from '@deriv-com/ui';
+import { useIsHubRedirectionEnabled } from '@deriv/hooks';
+import { useStore } from '@deriv/stores';
 
 const PlatformBox = ({ platform: { icon, description } }) => (
     <React.Fragment>
@@ -50,12 +52,20 @@ const PlatformDropdownContent = ({ platform, app_routing_history }) => {
 const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config, setTogglePlatformType }) => {
     const history = useHistory();
     const { isDesktop } = useDevice();
+    const { isHubRedirectionEnabled } = useIsHubRedirectionEnabled();
+    const { client } = useStore();
+    const { account_settings } = client;
+    const { trading_hub } = account_settings;
 
     const TradersHubRedirect = () => {
         return (
             <div className='platform-dropdown__cta'>
                 <BinaryLink
                     onClick={() => {
+                        if (isHubRedirectionEnabled || !!trading_hub) {
+                            window.location.assign(platforms.tradershub_os.url);
+                            return;
+                        }
                         if (!isDesktop) {
                             history.push(routes.traders_hub);
                             setTogglePlatformType('cfd');

packages/core/src/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet-mobile.spec.tsx

@@ -9,6 +9,9 @@ jest.mock('@deriv/hooks', () => ({
     useWalletAccountsList: jest.fn(() => ({
         data: [{ loginid: 'CR007', dtrade_loginid: 'CR008' }],
     })),
+    useIsHubRedirectionEnabled: jest.fn(() => ({
+        isHubRedirectionEnabled: false,
+    })),
 }));
 
 jest.mock('react-router', () => ({
@@ -93,7 +96,7 @@ describe('AccountSwitcherWalletMobile', () => {
         expect(screen.getByText('AccountSwitcherWalletList')).toBeInTheDocument();
     });
 
-    it('should toggle the switcher on footer click', () => {
+    it('should toggle the switcher on footer click', async () => {
         const store = mockStore({
             client: {
                 accounts: {
@@ -107,7 +110,7 @@ describe('AccountSwitcherWalletMobile', () => {
         });
         render(<AccountSwitcherWalletMobile {...props} />, { wrapper: wrapper(store) });
         const footer = screen.getByText('Looking for CFDs? Go to Trader’s Hub');
-        userEvent.click(footer);
+        await userEvent.click(footer);
         expect(props.toggle).toHaveBeenCalledTimes(1);
     });
 });

packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-mobile.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Button, Icon, MobileDialog, Text } from '@deriv/components';
-import { routes } from '@deriv/shared';
+import { platforms, routes } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { AccountSwitcherWalletList } from './account-switcher-wallet-list';
-import { useIsRtl, useStoreWalletAccountsList } from '@deriv/hooks';
-import { observer } from '@deriv/stores';
+import { useIsHubRedirectionEnabled, useIsRtl, useStoreWalletAccountsList } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
 import './account-switcher-wallet-mobile.scss';
 
 type TAccountSwitcherWalletMobile = {
@@ -18,14 +18,22 @@ export const AccountSwitcherWalletMobile = observer(({ is_visible, toggle, login
     const history = useHistory();
     const isRtl = useIsRtl();
     const { data: wallet_list } = useStoreWalletAccountsList();
+    const { client } = useStore();
+    const { account_settings } = client;
+    const { trading_hub } = account_settings;
 
     const dtrade_account_wallets = wallet_list?.filter(wallet => wallet.dtrade_loginid);
+    const { isHubRedirectionEnabled } = useIsHubRedirectionEnabled();
 
     const closeAccountsDialog = React.useCallback(() => {
         toggle(false);
     }, [toggle]);
 
     const handleTradersHubRedirect = () => {
+        if (isHubRedirectionEnabled || !!trading_hub) {
+            window.location.assign(platforms.tradershub_os.url);
+            return;
+        }
         closeAccountsDialog();
         history.push(routes.traders_hub);
     };