Shayan/feq 2226/implement header component

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.26.0",
+        "@deriv-com/ui": "^1.27.3",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-design": "^1.2.24",

src/components/AppHeader/AccountSwitcher/index.tsx

@@ -0,0 +1,18 @@
+import { api } from '@/hooks';
+import { CurrencyUsdIcon } from '@deriv/quill-icons';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import { FormatUtils } from '@deriv-com/utils';
+
+export const AccountSwitcher = () => {
+    const { data } = api.account.useActiveAccount();
+    const activeAccount = {
+        balance: FormatUtils.formatMoney(data?.balance ?? 0),
+        currency: data?.currency || 'USD',
+        currencyLabel: data?.currency || 'US Dollar',
+        icon: <CurrencyUsdIcon iconSize='sm' />,
+        isActive: true,
+        isVirtual: Boolean(data?.is_virtual),
+        loginid: data?.loginid || '',
+    };
+    return data && <UIAccountSwitcher activeAccount={activeAccount} isDisabled />;
+};

src/components/AppHeader/AppHeader.tsx

@@ -1,104 +1,155 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
-    LabelPairedHouseBlankMdRegularIcon,
-    LegacyChevronRight2pxIcon,
-    LegacyMenuHamburger1pxIcon,
+    LegacyMenuHamburger2pxIcon,
+    LegacyNotificationIcon,
+    StandaloneCircleUserRegularIcon,
 } from '@deriv/quill-icons';
-import { useAuthData } from '@deriv-com/api-hooks';
-import { Localize } from '@deriv-com/translations';
-import { Button, DerivLogo, Drawer, Header, MenuItem, Text, useDevice, Wrapper } from '@deriv-com/ui';
+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 { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
+import { AccountSwitcher } from './AccountSwitcher';
+import { MenuItems, platformsConfig } from './HeaderConfig';
 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();
+    const { localize } = useTranslations();
     const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
     const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
     const oauthUrl =
         appId && serverUrl
             ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
             : URLUtils.getOauthURL();
 
+    useEffect(() => {
+        const shouldRedirectToLogin = () => {
+            if (typeof accounts !== 'undefined') {
+                const userHasNoP2PAccount = !accounts.find(
+                    account => account.broker === 'CR' && account.currency === 'USD'
+                );
+                const activeAccount = accounts.find(account => account.loginid === activeLoginid);
+                const activeAccountCurrency = activeAccount?.currency || null;
+
+                if (userHasNoP2PAccount || activeAccountCurrency !== 'USD') {
+                    window.open(oauthUrl, '_self');
+                }
+            }
+        };
+
+        shouldRedirectToLogin();
+    }, [accounts, activeLoginid, oauthUrl]);
+
     return (
-        <Header className='app-header'>
+        <Header className={!isDesktop ? 'h-[40px]' : ''}>
             {isDesktop ? (
                 <Wrapper variant='left'>
-                    <DerivLogo
-                        href='https://deriv.com'
-                        logoHeight={30}
-                        logoWidth={30}
-                        target='_blank'
-                        variant='wallets'
-                    />
-                    <MenuItem
-                        as='button'
-                        className='flex gap-2 p-5'
-                        leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
+                    <PlatformSwitcher
+                        bottomLinkLabel='Looking for CFDs? Go to Trader’s Hub'
+                        buttonProps={{
+                            className: 'py-0 px-4',
+                            icon: platformsConfig[0].buttonIcon,
+                        }}
                     >
-                        <Text>
-                            <Localize i18n_default_text="Trader's Hub" />
-                        </Text>
-                    </MenuItem>
+                        {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'
                     >
-                        <Drawer.Header
-                            onCloseDrawer={() => {
-                                setIsDrawerOpen(false);
-                            }}
-                        >
-                            <Text>
-                                <Localize i18n_default_text='Menu' />
-                            </Text>
-                        </Drawer.Header>
-                        <Drawer.Content>
-                            <div className='flex'>
-                                <MenuItem
-                                    as='button'
-                                    className='flex gap-5 p-5'
-                                    leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
-                                    rightComponent={<LegacyChevronRight2pxIcon iconSize='xs' />}
-                                >
-                                    <Text>
-                                        <Localize i18n_default_text="Trader's Hub" />
-                                    </Text>
-                                </MenuItem>
-                            </div>
-                        </Drawer.Content>
+                        aaa
                     </Drawer>
-                    <Button
-                        icon={<LegacyMenuHamburger1pxIcon iconSize='sm' />}
-                        onClick={() => setIsDrawerOpen(true)}
-                        variant='ghost'
-                    />
+                    <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>
             )}
-            {activeLoginid ? (
-                <Button onClick={logout}>
-                    <Localize i18n_default_text='Logout' />
-                </Button>
-            ) : (
-                <Button
-                    className='w-36'
-                    color='primary-light'
-                    onClick={() => window.open(oauthUrl, '_self')}
-                    variant='ghost'
-                >
-                    <Text weight='bold'>
-                        <Localize i18n_default_text='Log in' />
-                    </Text>
-                </Button>
-            )}
+            <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>
+                        {isDesktop && (
+                            <TooltipMenuIcon
+                                as='a'
+                                className='pr-3 border-r-[1px] h-[32px]'
+                                disableHover
+                                href='https://app.deriv.com/account/personal-details'
+                                tooltipContent={localize('Manage account settings')}
+                                tooltipPosition='bottom'
+                            >
+                                <StandaloneCircleUserRegularIcon fill='#626262' />
+                            </TooltipMenuIcon>
+                        )}
+                        <AccountSwitcher />
+                        <Button className='mr-6' onClick={logout} size='md'>
+                            <Text weight='bold'>{localize('Logout')}</Text>
+                        </Button>
+                    </>
+                ) : (
+                    <Button
+                        className='w-36'
+                        color='primary-light'
+                        onClick={() => window.open(oauthUrl, '_self')}
+                        variant='ghost'
+                    >
+                        <Text weight='bold'>{localize('Log in')}</Text>
+                    </Button>
+                )}
+            </Wrapper>
         </Header>
     );
 };

src/components/AppHeader/HeaderConfig.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import {
+    DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon as DerivBotLogo,
+    DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon as DerivTraderLogo,
+    LabelPairedHouseBlankMdRegularIcon as TradershubLogo,
+    LegacyCashierIcon as CashierLogo,
+    LegacyReportsIcon as ReportsLogo,
+    PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon as BinaryBotLogo,
+    PartnersProductSmarttraderBrandLightLogoWordmarkIcon as SmarttraderLogo,
+} from '@deriv/quill-icons';
+
+export type PlatformsConfig = {
+    active: boolean;
+    buttonIcon: ReactNode;
+    description: string;
+    href: string;
+    icon: ReactNode;
+    showInEU: boolean;
+};
+
+export type MenuItemsConfig = {
+    as: 'a' | 'button';
+    href: string;
+    icon: ReactNode;
+    label: string;
+};
+
+export type TAccount = {
+    balance: string;
+    currency: string;
+    icon: React.ReactNode;
+    isActive: boolean;
+    isEu: boolean;
+    isVirtual: boolean;
+    loginid: string;
+    token: string;
+    type: string;
+};
+
+export const platformsConfig: PlatformsConfig[] = [
+    {
+        active: true,
+        buttonIcon: <DerivTraderLogo height={25} width={114.97} />,
+        description: 'A whole new trading experience on a powerful yet easy to use platform.',
+        href: 'https://app.deriv.com',
+        icon: <DerivTraderLogo height={32} width={148} />,
+        showInEU: true,
+    },
+    {
+        active: false,
+        buttonIcon: <DerivBotLogo height={24} width={91} />,
+        description: 'Automated trading at your fingertips. No coding needed.',
+        href: 'https://app.deriv.com/bot',
+        icon: <DerivBotLogo height={32} width={121} />,
+        showInEU: false,
+    },
+    {
+        active: false,
+        buttonIcon: <SmarttraderLogo height={24} width={115} />,
+        description: 'Trade the world’s markets with our popular user-friendly platform.',
+        href: 'https://smarttrader.deriv.com/en/trading',
+        icon: <SmarttraderLogo height={32} width={153} />,
+        showInEU: false,
+    },
+    {
+        active: false,
+        buttonIcon: <BinaryBotLogo height={24} width={100} />,
+        description:
+            'Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.',
+        href: 'https://bot.deriv.com',
+        icon: <BinaryBotLogo height={32} width={133} />,
+        showInEU: false,
+    },
+];
+
+export const MenuItems: MenuItemsConfig[] = [
+    {
+        as: 'a',
+        href: 'https://app.deriv.com/appstore/traders-hub',
+        icon: <TradershubLogo />,
+        label: "Trader's Hub",
+    },
+    {
+        as: 'button',
+        href: 'https://app.deriv.com/appstore/traders-hub',
+        icon: <ReportsLogo iconSize='xs' />,
+        label: `Reports`,
+    },
+    {
+        as: 'button',
+        href: 'https://app.deriv.com/appstore/traders-hub',
+        icon: <CashierLogo iconSize='xs' />,
+        label: `Cashier`,
+    },
+];