From 5d61fca6920265d988b0f87521ef0531b07a1aa9 Mon Sep 17 00:00:00 2001
From: Sandeep <sandeep@regentmarkets.com>
Date: Tue, 24 Sep 2024 12:09:44 +0800
Subject: [PATCH 1/4] chore: fixed the login/signup buttons and refactored the
 header components

---
 .../layout/header/MobileMenu/index.ts         |  1 -
 .../layout/header/Notifications/index.ts      |  3 ++
 .../{index.tsx => notifications.tsx}          |  4 +-
 .../index.tsx => account-info-loader.tsx}     |  4 +-
 .../index.tsx => account-switcher.tsx}        |  4 +-
 .../{HeaderConfig.tsx => header-config.tsx}   | 13 ++---
 src/components/layout/header/header.scss      | 11 ++++
 .../layout/header/{index.tsx => header.tsx}   | 52 +++++++++++--------
 src/components/layout/header/index.ts         |  3 ++
 .../layout/header/menu-items/index.ts         |  3 ++
 .../menu-items.scss}                          |  0
 .../index.tsx => menu-items/menu-items.tsx}   | 19 ++++++-
 .../__tests__/back-button.spec.tsx}           |  2 +-
 .../__tests__/menu-content.spec.tsx}          | 46 ++++++++--------
 .../__tests__/menu-header.spec.tsx}           |  2 +-
 .../__tests__/mobile-menu.spec.tsx}           |  2 +-
 .../__tests__/toggle-button.spec.tsx}         |  2 +-
 .../back-button.tsx}                          |  4 +-
 .../layout/header/mobile-menu/index.ts        |  3 ++
 .../menu-content.tsx}                         | 11 ++--
 .../menu-header.tsx}                          |  4 +-
 .../mobile-menu.scss                          |  0
 .../mobile-menu.tsx}                          |  8 +--
 .../toggle-button.tsx}                        |  4 +-
 .../use-mobile-menu-config.tsx}               |  8 ++-
 .../layout/header/platform-switcher/index.ts  |  3 ++
 .../platform-switcher.scss                    |  0
 .../platform-switcher.tsx}                    |  6 ++-
 28 files changed, 148 insertions(+), 74 deletions(-)
 delete mode 100644 src/components/layout/header/MobileMenu/index.ts
 create mode 100644 src/components/layout/header/Notifications/index.ts
 rename src/components/layout/header/Notifications/{index.tsx => notifications.tsx} (96%)
 rename src/components/layout/header/{SkeletonLoader/index.tsx => account-info-loader.tsx} (91%)
 rename src/components/layout/header/{AccountSwitcher/index.tsx => account-switcher.tsx} (97%)
 rename src/components/layout/header/{HeaderConfig.tsx => header-config.tsx} (93%)
 rename src/components/layout/header/{index.tsx => header.tsx} (66%)
 create mode 100644 src/components/layout/header/index.ts
 create mode 100644 src/components/layout/header/menu-items/index.ts
 rename src/components/layout/header/{MenuItems/MenuItems.scss => menu-items/menu-items.scss} (100%)
 rename src/components/layout/header/{MenuItems/index.tsx => menu-items/menu-items.tsx} (65%)
 rename src/components/layout/header/{MobileMenu/__tests__/BackButton.spec.tsx => mobile-menu/__tests__/back-button.spec.tsx} (97%)
 rename src/components/layout/header/{MobileMenu/__tests__/MenuContent.spec.tsx => mobile-menu/__tests__/menu-content.spec.tsx} (77%)
 rename src/components/layout/header/{MobileMenu/__tests__/MenuHeader.spec.tsx => mobile-menu/__tests__/menu-header.spec.tsx} (97%)
 rename src/components/layout/header/{MobileMenu/__tests__/MobileMenu.spec.tsx => mobile-menu/__tests__/mobile-menu.spec.tsx} (98%)
 rename src/components/layout/header/{MobileMenu/__tests__/ToggleButton.spec.tsx => mobile-menu/__tests__/toggle-button.spec.tsx} (93%)
 rename src/components/layout/header/{MobileMenu/BackButton.tsx => mobile-menu/back-button.tsx} (85%)
 create mode 100644 src/components/layout/header/mobile-menu/index.ts
 rename src/components/layout/header/{MobileMenu/MenuContent.tsx => mobile-menu/menu-content.tsx} (93%)
 rename src/components/layout/header/{MobileMenu/MenuHeader.tsx => mobile-menu/menu-header.tsx} (91%)
 rename src/components/layout/header/{MobileMenu => mobile-menu}/mobile-menu.scss (100%)
 rename src/components/layout/header/{MobileMenu/MobileMenu.tsx => mobile-menu/mobile-menu.tsx} (93%)
 rename src/components/layout/header/{MobileMenu/ToggleButton.tsx => mobile-menu/toggle-button.tsx} (79%)
 rename src/components/layout/header/{MobileMenu/MobileMenuConfig.tsx => mobile-menu/use-mobile-menu-config.tsx} (97%)
 create mode 100644 src/components/layout/header/platform-switcher/index.ts
 rename src/components/layout/header/{PlatformSwitcher => platform-switcher}/platform-switcher.scss (100%)
 rename src/components/layout/header/{PlatformSwitcher/index.tsx => platform-switcher/platform-switcher.tsx} (88%)

diff --git a/src/components/layout/header/MobileMenu/index.ts b/src/components/layout/header/MobileMenu/index.ts
deleted file mode 100644
index f26a61cd..00000000
--- a/src/components/layout/header/MobileMenu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as MobileMenu } from './MobileMenu';
diff --git a/src/components/layout/header/Notifications/index.ts b/src/components/layout/header/Notifications/index.ts
new file mode 100644
index 00000000..fc7cecf0
--- /dev/null
+++ b/src/components/layout/header/Notifications/index.ts
@@ -0,0 +1,3 @@
+import Notifications from './notifications';
+
+export default Notifications;
diff --git a/src/components/layout/header/Notifications/index.tsx b/src/components/layout/header/Notifications/notifications.tsx
similarity index 96%
rename from src/components/layout/header/Notifications/index.tsx
rename to src/components/layout/header/Notifications/notifications.tsx
index 42df1512..9e843f96 100644
--- a/src/components/layout/header/Notifications/index.tsx
+++ b/src/components/layout/header/Notifications/notifications.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from '@deriv-com/translations';
 import { Notifications as UINotifications, Tooltip, useDevice } from '@deriv-com/ui';
 import './notifications.scss';
 
-export const Notifications = () => {
+const Notifications = () => {
     const [isOpen, setIsOpen] = useState(false);
     const { localize } = useTranslations();
     const { isMobile } = useDevice();
@@ -41,3 +41,5 @@ export const Notifications = () => {
         </div>
     );
 };
+
+export default Notifications;
diff --git a/src/components/layout/header/SkeletonLoader/index.tsx b/src/components/layout/header/account-info-loader.tsx
similarity index 91%
rename from src/components/layout/header/SkeletonLoader/index.tsx
rename to src/components/layout/header/account-info-loader.tsx
index eacb7b18..6638e7fc 100644
--- a/src/components/layout/header/SkeletonLoader/index.tsx
+++ b/src/components/layout/header/account-info-loader.tsx
@@ -27,7 +27,7 @@ const LoggedInPreloader = ({ isMobile }: Pick<TAccountsInfoLoaderProps, 'isMobil
     </>
 );
 
-export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
+const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
     <ContentLoader
         backgroundColor={'#f2f3f4'}
         data-testid='dt_accounts_info_loader'
@@ -39,3 +39,5 @@ export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps
         <LoggedInPreloader isMobile={isMobile} />
     </ContentLoader>
 );
+
+export default AccountsInfoLoader;
diff --git a/src/components/layout/header/AccountSwitcher/index.tsx b/src/components/layout/header/account-switcher.tsx
similarity index 97%
rename from src/components/layout/header/AccountSwitcher/index.tsx
rename to src/components/layout/header/account-switcher.tsx
index dc826c59..097f8b04 100644
--- a/src/components/layout/header/AccountSwitcher/index.tsx
+++ b/src/components/layout/header/account-switcher.tsx
@@ -85,7 +85,7 @@ const RenderAccountItems = ({ isVirtual }: Partial<TAccountSwitcherProps>) => {
     );
 };
 
-export const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
+const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
     return (
         activeAccount && (
             <UIAccountSwitcher activeAccount={activeAccount}>
@@ -99,3 +99,5 @@ export const AccountSwitcher = ({ activeAccount }: TAccountSwitcherProps) => {
         )
     );
 };
+
+export default AccountSwitcher;
diff --git a/src/components/layout/header/HeaderConfig.tsx b/src/components/layout/header/header-config.tsx
similarity index 93%
rename from src/components/layout/header/HeaderConfig.tsx
rename to src/components/layout/header/header-config.tsx
index 342d6428..ce5b45f6 100644
--- a/src/components/layout/header/HeaderConfig.tsx
+++ b/src/components/layout/header/header-config.tsx
@@ -73,13 +73,14 @@ export const platformsConfig: PlatformsConfig[] = [
     },
 ];
 
+export const TRADERS_HUB_LINK_CONFIG = {
+    as: 'a',
+    href: 'https://app.deriv.com/appstore/traders-hub',
+    icon: <TradershubLogo iconSize='xs' />,
+    label: "Trader's Hub",
+};
+
 export const MenuItems: MenuItemsConfig[] = [
-    {
-        as: 'a',
-        href: 'https://app.deriv.com/appstore/traders-hub',
-        icon: <TradershubLogo iconSize='xs' />,
-        label: "Trader's Hub",
-    },
     {
         as: 'a',
         href: 'https://app.deriv.com/appstore/reports',
diff --git a/src/components/layout/header/header.scss b/src/components/layout/header/header.scss
index 36ba037b..c819c0ca 100644
--- a/src/components/layout/header/header.scss
+++ b/src/components/layout/header/header.scss
@@ -102,3 +102,14 @@
         color: var(--text-prominent) !important;
     }
 }
+
+.auth-actions {
+    button {
+        font-weight: 400;
+        margin-right: 1.6rem;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/header.tsx
similarity index 66%
rename from src/components/layout/header/index.tsx
rename to src/components/layout/header/header.tsx
index cf40a379..b3bda69b 100644
--- a/src/components/layout/header/index.tsx
+++ b/src/components/layout/header/header.tsx
@@ -1,29 +1,28 @@
 import clsx from 'clsx';
-import Button from '@/components/shared_ui/button';
-import Text from '@/components/shared_ui/text';
 import useActiveAccount from '@/hooks/api/account/useActiveAccount';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
-import { useTranslations } from '@deriv-com/translations';
-import { Header, useDevice, Wrapper } from '@deriv-com/ui';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { Button, Header, Text, useDevice, Wrapper } from '@deriv-com/ui';
 import { Tooltip } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 import { AppLogo } from '../app-logo';
-import { AccountSwitcher } from './AccountSwitcher';
-import { MenuItems } from './MenuItems';
-import { MobileMenu } from './MobileMenu';
-import { Notifications } from './Notifications';
-import { PlatformSwitcher } from './PlatformSwitcher';
-import { AccountsInfoLoader } from './SkeletonLoader';
+import AccountsInfoLoader from './account-info-loader';
+import AccountSwitcher from './account-switcher';
+import MenuItems from './menu-items';
+import MobileMenu from './mobile-menu';
+import Notifications from './notifications';
+import PlatformSwitcher from './platform-switcher';
 import './header.scss';
 
+const { getOauthURL } = URLUtils;
+
 const AppHeader = () => {
     const { isDesktop } = useDevice();
     const { activeLoginid, isAuthorizing } = useAuthData();
     const { data: activeAccount } = useActiveAccount();
 
     const { localize } = useTranslations();
-    const { getOauthURL } = URLUtils;
 
     const renderAccountSection = () => {
         if (isAuthorizing) {
@@ -59,16 +58,26 @@ const AppHeader = () => {
             );
         } else {
             return (
-                <Button
-                    size='sm'
-                    variant='outlined'
-                    color='primary-light'
-                    onClick={() => {
-                        window.location.assign(getOauthURL());
-                    }}
-                >
-                    {localize('Login')}
-                </Button>
+                <div className='auth-actions'>
+                    <Button
+                        borderWidth='sm'
+                        color='primary-light'
+                        variant='ghost'
+                        onClick={() => {
+                            window.location.assign(getOauthURL());
+                        }}
+                    >
+                        <Localize i18n_default_text='Log in' />
+                    </Button>
+                    <Button
+                        size='md'
+                        onClick={() => {
+                            window.location.assign(getOauthURL());
+                        }}
+                    >
+                        <Localize i18n_default_text='Sign up' />
+                    </Button>
+                </div>
             );
         }
     };
@@ -83,6 +92,7 @@ const AppHeader = () => {
             <Wrapper variant='left'>
                 <AppLogo />
                 <MobileMenu />
+                {isDesktop && <MenuItems.TradershubLink />}
                 {isDesktop && <PlatformSwitcher />}
                 {isDesktop && <MenuItems />}
             </Wrapper>
diff --git a/src/components/layout/header/index.ts b/src/components/layout/header/index.ts
new file mode 100644
index 00000000..dd385c03
--- /dev/null
+++ b/src/components/layout/header/index.ts
@@ -0,0 +1,3 @@
+import Header from './header';
+
+export default Header;
diff --git a/src/components/layout/header/menu-items/index.ts b/src/components/layout/header/menu-items/index.ts
new file mode 100644
index 00000000..68171b36
--- /dev/null
+++ b/src/components/layout/header/menu-items/index.ts
@@ -0,0 +1,3 @@
+import MenuItems from './menu-items';
+
+export default MenuItems;
diff --git a/src/components/layout/header/MenuItems/MenuItems.scss b/src/components/layout/header/menu-items/menu-items.scss
similarity index 100%
rename from src/components/layout/header/MenuItems/MenuItems.scss
rename to src/components/layout/header/menu-items/menu-items.scss
diff --git a/src/components/layout/header/MenuItems/index.tsx b/src/components/layout/header/menu-items/menu-items.tsx
similarity index 65%
rename from src/components/layout/header/MenuItems/index.tsx
rename to src/components/layout/header/menu-items/menu-items.tsx
index 6194e027..b6a945fd 100644
--- a/src/components/layout/header/MenuItems/index.tsx
+++ b/src/components/layout/header/menu-items/menu-items.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from '@deriv-com/translations';
 import { MenuItem, Text, useDevice } from '@deriv-com/ui';
-import { MenuItems as items } from '../HeaderConfig';
-import './MenuItems.scss';
+import { MenuItems as items, TRADERS_HUB_LINK_CONFIG } from '../header-config';
+import './menu-items.scss';
 
 export const MenuItems = () => {
     const { localize } = useTranslations();
@@ -29,3 +29,18 @@ export const MenuItems = () => {
         </>
     );
 };
+
+export const TradershubLink = () => (
+    <MenuItem
+        as='a'
+        className='app-header__menu'
+        href={TRADERS_HUB_LINK_CONFIG.href}
+        key={TRADERS_HUB_LINK_CONFIG.label}
+        leftComponent={TRADERS_HUB_LINK_CONFIG.icon}
+    >
+        <Text>{TRADERS_HUB_LINK_CONFIG.label}</Text>
+    </MenuItem>
+);
+
+MenuItems.TradershubLink = TradershubLink;
+export default MenuItems;
diff --git a/src/components/layout/header/MobileMenu/__tests__/BackButton.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/back-button.spec.tsx
similarity index 97%
rename from src/components/layout/header/MobileMenu/__tests__/BackButton.spec.tsx
rename to src/components/layout/header/mobile-menu/__tests__/back-button.spec.tsx
index e6574e5f..d7b5a3cb 100644
--- a/src/components/layout/header/MobileMenu/__tests__/BackButton.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/back-button.spec.tsx
@@ -1,7 +1,7 @@
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { BackButton } from '../BackButton';
+import BackButton from '../back-button';
 
 const mockOnClick = jest.fn();
 
diff --git a/src/components/layout/header/MobileMenu/__tests__/MenuContent.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
similarity index 77%
rename from src/components/layout/header/MobileMenu/__tests__/MenuContent.spec.tsx
rename to src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
index 83752608..47c1971c 100644
--- a/src/components/layout/header/MobileMenu/__tests__/MenuContent.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
@@ -1,7 +1,7 @@
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MenuContent } from '../MenuContent';
+import MenuContent from '../menu-content';
 
 const mockSettingsButtonClick = jest.fn();
 
@@ -16,31 +16,33 @@ jest.mock('@deriv-com/api-hooks', () => ({
     }),
 }));
 
-jest.mock('../../PlatformSwitcher', () => ({
+jest.mock('../../platform-switcher', () => ({
     PlatformSwitcher: () => <div>PlatformSwitcher</div>,
 }));
 
-jest.mock('../MobileMenuConfig', () => ({
-    MobileMenuConfig: jest.fn(() => [
-        [
-            {
-                as: 'a',
-                href: '/home',
-                label: 'Home',
-                LeftComponent: () => <span>Home Icon</span>,
-                removeBorderBottom: false,
-            },
+jest.mock('../../use-mobile-menu-config', () => ({
+    MobileMenuConfig: jest.fn(() => ({
+        config: [
+            [
+                {
+                    as: 'a',
+                    href: '/home',
+                    label: 'Home',
+                    LeftComponent: () => <span>Home Icon</span>,
+                    removeBorderBottom: false,
+                },
+            ],
+            [
+                {
+                    as: 'button',
+                    label: 'Settings',
+                    LeftComponent: () => <span>Settings Icon</span>,
+                    onClick: mockSettingsButtonClick,
+                    removeBorderBottom: true,
+                },
+            ],
         ],
-        [
-            {
-                as: 'button',
-                label: 'Settings',
-                LeftComponent: () => <span>Settings Icon</span>,
-                onClick: mockSettingsButtonClick,
-                removeBorderBottom: true,
-            },
-        ],
-    ]),
+    })),
 }));
 
 describe('MenuContent Component', () => {
diff --git a/src/components/layout/header/MobileMenu/__tests__/MenuHeader.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/menu-header.spec.tsx
similarity index 97%
rename from src/components/layout/header/MobileMenu/__tests__/MenuHeader.spec.tsx
rename to src/components/layout/header/mobile-menu/__tests__/menu-header.spec.tsx
index 6bb74d85..e3d429be 100644
--- a/src/components/layout/header/MobileMenu/__tests__/MenuHeader.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/menu-header.spec.tsx
@@ -2,7 +2,7 @@ import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MenuHeader } from '../MenuHeader';
+import MenuHeader from '../menu-header';
 
 const mockOpenLanguageSetting = jest.fn();
 
diff --git a/src/components/layout/header/MobileMenu/__tests__/MobileMenu.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/mobile-menu.spec.tsx
similarity index 98%
rename from src/components/layout/header/MobileMenu/__tests__/MobileMenu.spec.tsx
rename to src/components/layout/header/mobile-menu/__tests__/mobile-menu.spec.tsx
index 423b7679..8d2b7723 100644
--- a/src/components/layout/header/MobileMenu/__tests__/MobileMenu.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/mobile-menu.spec.tsx
@@ -5,7 +5,7 @@ import { mock_ws } from '@/utils/mock';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import MobileMenu from '../MobileMenu';
+import MobileMenu from '../mobile-menu';
 
 jest.mock('@/hooks/useModalManager', () => ({
     __esModule: true,
diff --git a/src/components/layout/header/MobileMenu/__tests__/ToggleButton.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/toggle-button.spec.tsx
similarity index 93%
rename from src/components/layout/header/MobileMenu/__tests__/ToggleButton.spec.tsx
rename to src/components/layout/header/mobile-menu/__tests__/toggle-button.spec.tsx
index 1a663076..03268782 100644
--- a/src/components/layout/header/MobileMenu/__tests__/ToggleButton.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/toggle-button.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ToggleButton } from '../ToggleButton';
+import ToggleButton from '../toggle-button';
 
 const mockOnClick = jest.fn();
 
diff --git a/src/components/layout/header/MobileMenu/BackButton.tsx b/src/components/layout/header/mobile-menu/back-button.tsx
similarity index 85%
rename from src/components/layout/header/MobileMenu/BackButton.tsx
rename to src/components/layout/header/mobile-menu/back-button.tsx
index d96102c5..6a38f36b 100644
--- a/src/components/layout/header/MobileMenu/BackButton.tsx
+++ b/src/components/layout/header/mobile-menu/back-button.tsx
@@ -6,7 +6,7 @@ type TBackButton = {
     onClick: () => void;
 };
 
-export const BackButton = ({ buttonText, onClick }: TBackButton) => {
+const BackButton = ({ buttonText, onClick }: TBackButton) => {
     const { isDesktop } = useDevice();
 
     return (
@@ -19,3 +19,5 @@ export const BackButton = ({ buttonText, onClick }: TBackButton) => {
         </button>
     );
 };
+
+export default BackButton;
diff --git a/src/components/layout/header/mobile-menu/index.ts b/src/components/layout/header/mobile-menu/index.ts
new file mode 100644
index 00000000..36e2673a
--- /dev/null
+++ b/src/components/layout/header/mobile-menu/index.ts
@@ -0,0 +1,3 @@
+import MobileMenu from './mobile-menu';
+
+export default MobileMenu;
diff --git a/src/components/layout/header/MobileMenu/MenuContent.tsx b/src/components/layout/header/mobile-menu/menu-content.tsx
similarity index 93%
rename from src/components/layout/header/MobileMenu/MenuContent.tsx
rename to src/components/layout/header/mobile-menu/menu-content.tsx
index fd57161a..ea0dd41f 100644
--- a/src/components/layout/header/MobileMenu/MenuContent.tsx
+++ b/src/components/layout/header/mobile-menu/menu-content.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx';
 import { MenuItem, Text, useDevice } from '@deriv-com/ui';
-import { PlatformSwitcher } from '../PlatformSwitcher';
-import { MobileMenuConfig } from './MobileMenuConfig';
+import PlatformSwitcher from '../platform-switcher';
+import useMobileMenuConfig from './use-mobile-menu-config';
 
-export const MenuContent = () => {
+const MenuContent = () => {
     const { isDesktop } = useDevice();
     const textSize = isDesktop ? 'sm' : 'md';
+    const { config } = useMobileMenuConfig();
 
     return (
         <div className='mobile-menu__content'>
@@ -14,7 +15,7 @@ export const MenuContent = () => {
             </div>
 
             <div className='mobile-menu__content__items'>
-                {MobileMenuConfig().map((item, index) => {
+                {config.map((item, index) => {
                     const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom);
 
                     return (
@@ -78,3 +79,5 @@ export const MenuContent = () => {
         </div>
     );
 };
+
+export default MenuContent;
diff --git a/src/components/layout/header/MobileMenu/MenuHeader.tsx b/src/components/layout/header/mobile-menu/menu-header.tsx
similarity index 91%
rename from src/components/layout/header/MobileMenu/MenuHeader.tsx
rename to src/components/layout/header/mobile-menu/menu-header.tsx
index ec9332a1..98e509ea 100644
--- a/src/components/layout/header/MobileMenu/MenuHeader.tsx
+++ b/src/components/layout/header/mobile-menu/menu-header.tsx
@@ -8,7 +8,7 @@ type TMenuHeader = {
     openLanguageSetting: ComponentProps<'button'>['onClick'];
 };
 
-export const MenuHeader = ({ hideLanguageSetting, openLanguageSetting }: TMenuHeader) => {
+const MenuHeader = ({ hideLanguageSetting, openLanguageSetting }: TMenuHeader) => {
     const { currentLang, localize } = useTranslations();
     const { isDesktop } = useDevice();
 
@@ -34,3 +34,5 @@ export const MenuHeader = ({ hideLanguageSetting, openLanguageSetting }: TMenuHe
         </div>
     );
 };
+
+export default MenuHeader;
diff --git a/src/components/layout/header/MobileMenu/mobile-menu.scss b/src/components/layout/header/mobile-menu/mobile-menu.scss
similarity index 100%
rename from src/components/layout/header/MobileMenu/mobile-menu.scss
rename to src/components/layout/header/mobile-menu/mobile-menu.scss
diff --git a/src/components/layout/header/MobileMenu/MobileMenu.tsx b/src/components/layout/header/mobile-menu/mobile-menu.tsx
similarity index 93%
rename from src/components/layout/header/MobileMenu/MobileMenu.tsx
rename to src/components/layout/header/mobile-menu/mobile-menu.tsx
index b29f63a7..bc2be97c 100644
--- a/src/components/layout/header/MobileMenu/MobileMenu.tsx
+++ b/src/components/layout/header/mobile-menu/mobile-menu.tsx
@@ -5,10 +5,10 @@ import { useTranslations } from '@deriv-com/translations';
 import { Drawer, MobileLanguagesDrawer, useDevice } from '@deriv-com/ui';
 import NetworkStatus from './../../footer/NetworkStatus';
 import ServerTime from './../../footer/ServerTime';
-import { BackButton } from './BackButton';
-import { MenuContent } from './MenuContent';
-import { MenuHeader } from './MenuHeader';
-import { ToggleButton } from './ToggleButton';
+import BackButton from './back-button';
+import MenuContent from './menu-content';
+import MenuHeader from './menu-header';
+import ToggleButton from './toggle-button';
 import './mobile-menu.scss';
 
 const MobileMenu = () => {
diff --git a/src/components/layout/header/MobileMenu/ToggleButton.tsx b/src/components/layout/header/mobile-menu/toggle-button.tsx
similarity index 79%
rename from src/components/layout/header/MobileMenu/ToggleButton.tsx
rename to src/components/layout/header/mobile-menu/toggle-button.tsx
index b9fa0e61..7071ca3f 100644
--- a/src/components/layout/header/MobileMenu/ToggleButton.tsx
+++ b/src/components/layout/header/mobile-menu/toggle-button.tsx
@@ -5,8 +5,10 @@ type TToggleButton = {
     onClick: ComponentProps<'button'>['onClick'];
 };
 
-export const ToggleButton = ({ onClick }: TToggleButton) => (
+const ToggleButton = ({ onClick }: TToggleButton) => (
     <button className='h-full px-4 border-r border-[#f2f3f4]' onClick={onClick}>
         <LegacyMenuHamburger1pxIcon iconSize='xs' />
     </button>
 );
+
+export default ToggleButton;
diff --git a/src/components/layout/header/MobileMenu/MobileMenuConfig.tsx b/src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx
similarity index 97%
rename from src/components/layout/header/MobileMenu/MobileMenuConfig.tsx
rename to src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx
index 53c22cba..6de73388 100644
--- a/src/components/layout/header/MobileMenu/MobileMenuConfig.tsx
+++ b/src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx
@@ -35,7 +35,7 @@ type TMenuConfig = {
     target?: ComponentProps<'a'>['target'];
 }[];
 
-export const MobileMenuConfig = () => {
+const useMobileMenuConfig = () => {
     const { localize } = useTranslations();
     const { logout } = useAuthData();
     const { is_dark_mode_on, toggleTheme } = useThemeSwitcher();
@@ -122,5 +122,9 @@ export const MobileMenuConfig = () => {
         ],
     ];
 
-    return menuConfig;
+    return {
+        config: menuConfig,
+    };
 };
+
+export default useMobileMenuConfig;
diff --git a/src/components/layout/header/platform-switcher/index.ts b/src/components/layout/header/platform-switcher/index.ts
new file mode 100644
index 00000000..7ac88e79
--- /dev/null
+++ b/src/components/layout/header/platform-switcher/index.ts
@@ -0,0 +1,3 @@
+import PlatformSwitcher from './platform-switcher';
+
+export default PlatformSwitcher;
diff --git a/src/components/layout/header/PlatformSwitcher/platform-switcher.scss b/src/components/layout/header/platform-switcher/platform-switcher.scss
similarity index 100%
rename from src/components/layout/header/PlatformSwitcher/platform-switcher.scss
rename to src/components/layout/header/platform-switcher/platform-switcher.scss
diff --git a/src/components/layout/header/PlatformSwitcher/index.tsx b/src/components/layout/header/platform-switcher/platform-switcher.tsx
similarity index 88%
rename from src/components/layout/header/PlatformSwitcher/index.tsx
rename to src/components/layout/header/platform-switcher/platform-switcher.tsx
index f062d26c..3d449515 100644
--- a/src/components/layout/header/PlatformSwitcher/index.tsx
+++ b/src/components/layout/header/platform-switcher/platform-switcher.tsx
@@ -1,9 +1,9 @@
 import { useTranslations } from '@deriv-com/translations';
 import { PlatformSwitcher as UIPlatformSwitcher, PlatformSwitcherItem } from '@deriv-com/ui';
-import { platformsConfig } from '../HeaderConfig';
+import { platformsConfig } from '../header-config';
 import './platform-switcher.scss';
 
-export const PlatformSwitcher = () => {
+const PlatformSwitcher = () => {
     const { localize } = useTranslations();
 
     return (
@@ -26,3 +26,5 @@ export const PlatformSwitcher = () => {
         </UIPlatformSwitcher>
     );
 };
+
+export default PlatformSwitcher;

From aae08348a9b475ed4ac6aea418af59bf07eee610 Mon Sep 17 00:00:00 2001
From: Sandeep <sandeep@regentmarkets.com>
Date: Tue, 24 Sep 2024 13:20:37 +0800
Subject: [PATCH 2/4] chore: fixing build error by reverting the changes in
 notification module

---
 src/components/layout/header/Notifications/index.ts           | 3 ---
 .../header/Notifications/{notifications.tsx => index.tsx}     | 4 +---
 src/components/layout/header/header.tsx                       | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 src/components/layout/header/Notifications/index.ts
 rename src/components/layout/header/Notifications/{notifications.tsx => index.tsx} (96%)

diff --git a/src/components/layout/header/Notifications/index.ts b/src/components/layout/header/Notifications/index.ts
deleted file mode 100644
index fc7cecf0..00000000
--- a/src/components/layout/header/Notifications/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Notifications from './notifications';
-
-export default Notifications;
diff --git a/src/components/layout/header/Notifications/notifications.tsx b/src/components/layout/header/Notifications/index.tsx
similarity index 96%
rename from src/components/layout/header/Notifications/notifications.tsx
rename to src/components/layout/header/Notifications/index.tsx
index 9e843f96..42df1512 100644
--- a/src/components/layout/header/Notifications/notifications.tsx
+++ b/src/components/layout/header/Notifications/index.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from '@deriv-com/translations';
 import { Notifications as UINotifications, Tooltip, useDevice } from '@deriv-com/ui';
 import './notifications.scss';
 
-const Notifications = () => {
+export const Notifications = () => {
     const [isOpen, setIsOpen] = useState(false);
     const { localize } = useTranslations();
     const { isMobile } = useDevice();
@@ -41,5 +41,3 @@ const Notifications = () => {
         </div>
     );
 };
-
-export default Notifications;
diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index b3bda69b..f3dd2f6c 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -11,7 +11,7 @@ import AccountsInfoLoader from './account-info-loader';
 import AccountSwitcher from './account-switcher';
 import MenuItems from './menu-items';
 import MobileMenu from './mobile-menu';
-import Notifications from './notifications';
+import { Notifications } from './notifications';
 import PlatformSwitcher from './platform-switcher';
 import './header.scss';
 

From 069912722308e6cd849bd7c6586fad088a92c518 Mon Sep 17 00:00:00 2001
From: Sandeep <sandeep@regentmarkets.com>
Date: Tue, 24 Sep 2024 13:33:13 +0800
Subject: [PATCH 3/4] chore: :fire: updated file names - notification

---
 .../custom-notifications.scss}                         |  0
 .../custom-notifications.tsx}                          | 10 ++++++----
 .../layout/header/custom-notifications/index.ts        |  3 +++
 src/components/layout/header/header.tsx                |  4 ++--
 4 files changed, 11 insertions(+), 6 deletions(-)
 rename src/components/layout/header/{Notifications/notifications.scss => custom-notifications/custom-notifications.scss} (100%)
 rename src/components/layout/header/{Notifications/index.tsx => custom-notifications/custom-notifications.tsx} (87%)
 create mode 100644 src/components/layout/header/custom-notifications/index.ts

diff --git a/src/components/layout/header/Notifications/notifications.scss b/src/components/layout/header/custom-notifications/custom-notifications.scss
similarity index 100%
rename from src/components/layout/header/Notifications/notifications.scss
rename to src/components/layout/header/custom-notifications/custom-notifications.scss
diff --git a/src/components/layout/header/Notifications/index.tsx b/src/components/layout/header/custom-notifications/custom-notifications.tsx
similarity index 87%
rename from src/components/layout/header/Notifications/index.tsx
rename to src/components/layout/header/custom-notifications/custom-notifications.tsx
index 42df1512..a841e2c2 100644
--- a/src/components/layout/header/Notifications/index.tsx
+++ b/src/components/layout/header/custom-notifications/custom-notifications.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import { LegacyNotificationIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Notifications as UINotifications, Tooltip, useDevice } from '@deriv-com/ui';
-import './notifications.scss';
+import { Notifications, Tooltip, useDevice } from '@deriv-com/ui';
+import './custom-notifications.scss';
 
-export const Notifications = () => {
+const CustomNotifications = () => {
     const [isOpen, setIsOpen] = useState(false);
     const { localize } = useTranslations();
     const { isMobile } = useDevice();
@@ -20,7 +20,7 @@ export const Notifications = () => {
             >
                 <LegacyNotificationIcon iconSize='sm' />
             </Tooltip>
-            <UINotifications
+            <Notifications
                 className={clsx('', {
                     'notifications__wrapper--mobile': isMobile,
                     'notifications__wrapper--desktop': !isMobile,
@@ -41,3 +41,5 @@ export const Notifications = () => {
         </div>
     );
 };
+
+export default CustomNotifications;
diff --git a/src/components/layout/header/custom-notifications/index.ts b/src/components/layout/header/custom-notifications/index.ts
new file mode 100644
index 00000000..caab92fd
--- /dev/null
+++ b/src/components/layout/header/custom-notifications/index.ts
@@ -0,0 +1,3 @@
+import CustomNotifications from './custom-notifications';
+
+export default CustomNotifications;
diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index f3dd2f6c..e5ddac63 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -9,9 +9,9 @@ import { URLUtils } from '@deriv-com/utils';
 import { AppLogo } from '../app-logo';
 import AccountsInfoLoader from './account-info-loader';
 import AccountSwitcher from './account-switcher';
+import CustomNotifications from './custom-notifications';
 import MenuItems from './menu-items';
 import MobileMenu from './mobile-menu';
-import { Notifications } from './notifications';
 import PlatformSwitcher from './platform-switcher';
 import './header.scss';
 
@@ -30,7 +30,7 @@ const AppHeader = () => {
         } else if (activeLoginid) {
             return (
                 <>
-                    <Notifications />
+                    <CustomNotifications />
                     {isDesktop && (
                         <Tooltip
                             as='a'

From def747549ded39ffb4cdb2a8162d83c42de35411 Mon Sep 17 00:00:00 2001
From: Sandeep <sandeep@regentmarkets.com>
Date: Tue, 24 Sep 2024 15:09:10 +0800
Subject: [PATCH 4/4] test: :fire: fixed test suits for header components

---
 .../__tests__/menu-content.spec.tsx           | 85 +++++--------------
 1 file changed, 20 insertions(+), 65 deletions(-)

diff --git a/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx b/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
index 47c1971c..5ccf3dba 100644
--- a/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
+++ b/src/components/layout/header/mobile-menu/__tests__/menu-content.spec.tsx
@@ -1,10 +1,10 @@
+import { BrowserRouter } from 'react-router-dom';
+import { mockStore, StoreProvider } from '@/hooks/useStore';
+import { mock_ws } from '@/utils/mock';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import MenuContent from '../menu-content';
 
-const mockSettingsButtonClick = jest.fn();
-
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({ isDesktop: false })),
@@ -16,36 +16,17 @@ jest.mock('@deriv-com/api-hooks', () => ({
     }),
 }));
 
-jest.mock('../../platform-switcher', () => ({
-    PlatformSwitcher: () => <div>PlatformSwitcher</div>,
-}));
-
-jest.mock('../../use-mobile-menu-config', () => ({
-    MobileMenuConfig: jest.fn(() => ({
-        config: [
-            [
-                {
-                    as: 'a',
-                    href: '/home',
-                    label: 'Home',
-                    LeftComponent: () => <span>Home Icon</span>,
-                    removeBorderBottom: false,
-                },
-            ],
-            [
-                {
-                    as: 'button',
-                    label: 'Settings',
-                    LeftComponent: () => <span>Settings Icon</span>,
-                    onClick: mockSettingsButtonClick,
-                    removeBorderBottom: true,
-                },
-            ],
-        ],
-    })),
-}));
+jest.mock('../../platform-switcher', () => jest.fn(() => <div>Mock Platform Switcher</div>));
 
 describe('MenuContent Component', () => {
+    const mock_store = mockStore(mock_ws as any);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <BrowserRouter>
+            <StoreProvider mockStore={mock_store}>{children}</StoreProvider>
+        </BrowserRouter>
+    );
+
     beforeEach(() => {
         Object.defineProperty(window, 'matchMedia', {
             value: jest.fn(),
@@ -54,48 +35,22 @@ describe('MenuContent Component', () => {
     });
 
     it('renders PlatformSwitcher and MenuItem components correctly', () => {
-        render(<MenuContent />);
-        expect(screen.getByText('PlatformSwitcher')).toBeInTheDocument();
-        expect(screen.getByText('Home')).toBeInTheDocument();
-        expect(screen.getByText('Settings')).toBeInTheDocument();
-    });
-
-    it('renders MenuItem as an anchor when `as` prop is "a"', () => {
-        render(<MenuContent />);
-        expect(screen.getByRole('link', { name: 'Home Icon Home' })).toBeInTheDocument();
-    });
-
-    it('renders anchor props correctly', () => {
-        render(<MenuContent />);
-        const link = screen.getByRole('link', { name: 'Home Icon Home' });
-        expect(link).toBeInTheDocument();
-        expect(link).toHaveAttribute('href', '/home');
-        expect(screen.getByText('Home Icon')).toBeInTheDocument();
-    });
-
-    it('renders MenuItem as a button when `as` prop is "button"', () => {
-        render(<MenuContent />);
-        expect(screen.getByRole('button', { name: 'Settings Icon Settings' })).toBeInTheDocument();
-    });
-
-    it('renders button props correctly', async () => {
-        render(<MenuContent />);
-        const settingsButton = screen.getByRole('button', { name: 'Settings Icon Settings' });
-        expect(settingsButton).toBeInTheDocument();
-        await userEvent.click(settingsButton);
-        expect(mockSettingsButtonClick).toHaveBeenCalled();
+        render(<MenuContent />, { wrapper });
+        expect(screen.getByText(/Mock Platform Switcher/)).toBeInTheDocument();
+        expect(screen.getByText(/Trader's Hub/)).toBeInTheDocument();
+        expect(screen.getByText(/Deriv.com/)).toBeInTheDocument();
     });
 
     it('adjusts text size for mobile devices', () => {
-        render(<MenuContent />);
-        const text = screen.getByText('Home');
+        render(<MenuContent />, { wrapper });
+        const text = screen.getByText(/Trader's Hub/);
         expect(text).toHaveClass('derivs-text__size--md');
     });
 
     it('adjusts text size for desktop devices', () => {
         (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
-        render(<MenuContent />);
-        const text = screen.getByText('Home');
+        render(<MenuContent />, { wrapper });
+        const text = screen.getByText(/Trader's Hub/);
         expect(text).toHaveClass('derivs-text__size--sm');
     });
 });