Merge pull request #85 from shayan-deriv/shayan/feq-2277/add-notifica…

…tion-dropdown-to-header

fix: resolved style mismatch in header component + added notification

package.json

@@ -17,7 +17,7 @@
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.24",
         "@deriv-com/translations": "^1.2.4",
-        "@deriv-com/ui": "^1.27.6",
+        "@deriv-com/ui": "^1.27.9",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-design": "^1.2.24",

src/components/AppHeader/AccountSwitcher/index.tsx

@@ -14,5 +14,5 @@ export const AccountSwitcher = () => {
         isVirtual: Boolean(data?.is_virtual),
         loginid: data?.loginid || '',
     };
-    return data && <UIAccountSwitcher activeAccount={activeAccount} isDisabled />;
+    return data && <UIAccountSwitcher activeAccount={activeAccount} buttonClassName='mr-4' isDisabled />;
 };

src/components/AppHeader/AppHeader.scss

@@ -3,5 +3,6 @@
 
     @include mobile {
         padding-left: 0;
+        height: 4rem;
     }
 }

src/components/AppHeader/AppHeader.tsx

@@ -1,31 +1,19 @@
-import { useEffect, useState } from 'react';
-import {
-    LegacyMenuHamburger2pxIcon,
-    LegacyNotificationIcon,
-    StandaloneCircleUserRegularIcon,
-} from '@deriv/quill-icons';
+import { useEffect } from 'react';
+import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAccountList, useAuthData } from '@deriv-com/api-hooks';
 import { useTranslations } from '@deriv-com/translations';
-import {
-    Button,
-    Drawer,
-    Header,
-    MenuItem,
-    PlatformSwitcher,
-    PlatformSwitcherItem,
-    Text,
-    TooltipMenuIcon,
-    useDevice,
-    Wrapper,
-} from '@deriv-com/ui';
+import { Button, Header, Text, TooltipMenuIcon, useDevice, Wrapper } from '@deriv-com/ui';
 import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
 import { AccountSwitcher } from './AccountSwitcher';
-import { MenuItems, platformsConfig } from './HeaderConfig';
+import { AppLogo } from './AppLogo';
+import { MenuItems } from './MenuItems';
+import { MobileMenu } from './MobileMenu';
+import { Notifications } from './Notifications';
+import { PlatformSwitcher } from './PlatformSwitcher';
 import './AppHeader.scss';
 
 // TODO: handle local storage values not updating after changing local storage values
 const AppHeader = () => {
-    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const { data: accounts } = useAccountList();
     const { isDesktop } = useDevice();
     const { activeLoginid, logout } = useAuthData();
@@ -57,77 +45,23 @@ const AppHeader = () => {
 
     return (
         <Header className={!isDesktop ? 'h-[40px]' : ''}>
-            {isDesktop ? (
-                <Wrapper variant='left'>
-                    <PlatformSwitcher
-                        bottomLinkLabel={localize('Looking for CFDs? Go to Trader’s Hub')}
-                        buttonProps={{
-                            className: 'py-0 px-4',
-                            icon: platformsConfig[0].buttonIcon,
-                        }}
-                    >
-                        {platformsConfig.map(({ active, description, href, icon }) => (
-                            <PlatformSwitcherItem
-                                active={active}
-                                description={description}
-                                href={href}
-                                icon={icon}
-                                key={description}
-                            />
-                        ))}
-                    </PlatformSwitcher>
-                    {MenuItems.map(({ as, href, icon, label }) => (
-                        <MenuItem as={as} className='flex gap-2 p-5' href={href} key={label} leftComponent={icon}>
-                            <Text>{localize(label)}</Text>
-                        </MenuItem>
-                    ))}
-                </Wrapper>
-            ) : (
-                <Wrapper variant='left'>
-                    <div
-                        className='flex items-center justify-center py-2 px-4 h-full'
-                        onClick={() => setIsDrawerOpen(true)}
-                    >
-                        <LegacyMenuHamburger2pxIcon iconSize='xs' />
-                    </div>
-                    <Drawer
-                        isOpen={isDrawerOpen}
-                        onCloseDrawer={() => {
-                            setIsDrawerOpen(false);
-                        }}
-                        width='300px'
-                    >
-                        aaa
-                    </Drawer>
-                    <MenuItem
-                        as={MenuItems[1].as}
-                        className='flex gap-2 p-5'
-                        href={MenuItems[1].href}
-                        key={MenuItems[1].label}
-                        leftComponent={MenuItems[1].icon}
-                    >
-                        <Text>{localize(MenuItems[1].label)}</Text>
-                    </MenuItem>
-                </Wrapper>
-            )}
+            <Wrapper variant='left'>
+                <AppLogo />
+                <MobileMenu />
+                <PlatformSwitcher />
+                <MenuItems />
+            </Wrapper>
             <Wrapper variant='right'>
                 {activeLoginid ? (
                     <>
-                        <TooltipMenuIcon
-                            as='button'
-                            className={isDesktop ? 'mr-4 pl-2 border-l-[1px] h-[32px]' : ''}
-                            disableHover
-                            tooltipContent={localize('View notifications')}
-                            tooltipPosition='bottom'
-                        >
-                            <LegacyNotificationIcon fill='red' iconSize='sm' />
-                        </TooltipMenuIcon>
+                        <Notifications />
                         {isDesktop && (
                             <TooltipMenuIcon
                                 as='a'
                                 className='pr-3 border-r-[1px] h-[32px]'
                                 disableHover
                                 href='https://app.deriv.com/account/personal-details'
+                                tooltipContainerClassName='z-20'
                                 tooltipContent={localize('Manage account settings')}
                                 tooltipPosition='bottom'
                             >
@@ -136,7 +70,9 @@ const AppHeader = () => {
                         )}
                         <AccountSwitcher />
                         <Button className='mr-6' onClick={logout} size='md'>
-                            <Text weight='bold'>{localize('Logout')}</Text>
+                            <Text size='sm' weight='bold'>
+                                {localize('Logout')}
+                            </Text>
                         </Button>
                     </>
                 ) : (

src/components/AppHeader/AppLogo/AppLogo.scss

@@ -0,0 +1,8 @@
+.app-header__logo {
+    padding-left: 1.2rem;
+    padding-right: 2rem;
+    border-right: 1px solid #f2f3f4;
+    height: 32px;
+    display: flex;
+    align-items: center;
+}

src/components/AppHeader/AppLogo/index.tsx

@@ -0,0 +1,17 @@
+import { DerivLogo, useDevice } from '@deriv-com/ui';
+import { URLConstants } from '@deriv-com/utils';
+import './AppLogo.scss';
+
+export const AppLogo = () => {
+    const { isDesktop } = useDevice();
+
+    if (!isDesktop) return null;
+    return (
+        <DerivLogo
+            className='app-header__logo'
+            href={URLConstants.derivComProduction}
+            target='_blank'
+            variant='wallets'
+        />
+    );
+};

src/components/AppHeader/HeaderConfig.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import {
     DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon as DerivBotLogo,
     DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon as DerivTraderLogo,
-    LabelPairedHouseBlankMdRegularIcon as TradershubLogo,
     LegacyCashierIcon as CashierLogo,
+    LegacyHomeOldIcon as TradershubLogo,
     LegacyReportsIcon as ReportsLogo,
     PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon as BinaryBotLogo,
     PartnersProductSmarttraderBrandLightLogoWordmarkIcon as SmarttraderLogo,
@@ -77,7 +77,7 @@ export const MenuItems: MenuItemsConfig[] = [
     {
         as: 'a',
         href: 'https://app.deriv.com/appstore/traders-hub',
-        icon: <TradershubLogo />,
+        icon: <TradershubLogo iconSize='xs' />,
         label: "Trader's Hub",
     },
     {

src/components/AppHeader/MenuItems/MenuItems.scss

@@ -0,0 +1,4 @@
+.app-header__menu {
+    gap: 0.8rem;
+    padding: 1.25rem 1.25rem 1.25rem 1.65rem;
+}

src/components/AppHeader/MenuItems/index.tsx

@@ -0,0 +1,31 @@
+import { useTranslations } from '@deriv-com/translations';
+import { MenuItem, Text, useDevice } from '@deriv-com/ui';
+import { MenuItems as items } from '../HeaderConfig';
+import './MenuItems.scss';
+
+export const MenuItems = () => {
+    const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
+
+    return (
+        <>
+            {isDesktop ? (
+                items.map(({ as, href, icon, label }) => (
+                    <MenuItem as={as} className='app-header__menu' href={href} key={label} leftComponent={icon}>
+                        <Text>{localize(label)}</Text>
+                    </MenuItem>
+                ))
+            ) : (
+                <MenuItem
+                    as={items[1].as}
+                    className='flex gap-2 p-5'
+                    href={items[1].href}
+                    key={items[1].label}
+                    leftComponent={items[1].icon}
+                >
+                    <Text>{localize(items[1].label)}</Text>
+                </MenuItem>
+            )}
+        </>
+    );
+};

src/components/AppHeader/MobileMenu/index.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { LegacyMenuHamburger2pxIcon } from '@deriv/quill-icons';
+import { Drawer, useDevice } from '@deriv-com/ui';
+
+export const MobileMenu = () => {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const { isDesktop } = useDevice();
+
+    if (isDesktop) return null;
+    return (
+        <>
+            <div className='flex items-center justify-center py-2 px-4 h-full' onClick={() => setIsDrawerOpen(true)}>
+                <LegacyMenuHamburger2pxIcon iconSize='xs' />
+            </div>
+            <Drawer
+                isOpen={isDrawerOpen}
+                onCloseDrawer={() => {
+                    setIsDrawerOpen(false);
+                }}
+                width='300px'
+            >
+                aaa
+            </Drawer>
+        </>
+    );
+};

src/components/AppHeader/Notifications/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { LegacyNotificationIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Notifications as UINotifications, TooltipMenuIcon, useDevice } from '@deriv-com/ui';
+
+export const Notifications = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
+    return (
+        <>
+            <TooltipMenuIcon
+                as='button'
+                className={isDesktop ? 'mr-4 pl-2 border-l-[1px] h-[32px]' : ''}
+                disableHover
+                onClick={() => setIsOpen(!isOpen)}
+                tooltipContainerClassName='z-20'
+                tooltipContent={localize('View notifications')}
+                tooltipPosition='bottom'
+            >
+                <LegacyNotificationIcon fill='red' iconSize='sm' />
+            </TooltipMenuIcon>
+            <UINotifications
+                className={isDesktop ? 'notifications__wrapper absolute top-20 right-80 z-10' : ''}
+                clearNotificationsCallback={() => {}}
+                componentConfig={{
+                    clearButtonText: localize('Clear all'),
+                    modalTitle: localize('Notifications'),
+                    noNotificationsMessage: localize('No notifications MESSAGE'),
+                    noNotificationsTitle: localize('No notifications'),
+                }}
+                isOpen={isOpen}
+                notifications={[]}
+                setIsOpen={setIsOpen}
+            />
+        </>
+    );
+};

src/components/AppHeader/PlatformSwitcher/PlatformSwitcher.scss

@@ -0,0 +1,3 @@
+.app-header__platform-switcher {
+    padding: 0 1.6rem;
+}

src/components/AppHeader/PlatformSwitcher/index.tsx

@@ -0,0 +1,30 @@
+import { useTranslations } from '@deriv-com/translations';
+import { PlatformSwitcher as UIPlatformSwitcher, PlatformSwitcherItem, useDevice } from '@deriv-com/ui';
+import { platformsConfig } from '../HeaderConfig';
+import './PlatformSwitcher.scss';
+
+export const PlatformSwitcher = () => {
+    const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
+
+    if (!isDesktop) return null;
+    return (
+        <UIPlatformSwitcher
+            bottomLinkLabel={localize('Looking for CFDs? Go to Trader’s Hub')}
+            buttonProps={{
+                className: 'app-header__platform-switcher',
+                icon: platformsConfig[0].buttonIcon,
+            }}
+        >
+            {platformsConfig.map(({ active, description, href, icon }) => (
+                <PlatformSwitcherItem
+                    active={active}
+                    description={localize(description)}
+                    href={href}
+                    icon={icon}
+                    key={description}
+                />
+            ))}
+        </UIPlatformSwitcher>
+    );
+};