diff --git a/package-lock.json b/package-lock.json index 54d8c6d0..960116ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@babel/preset-env": "^7.24.5", "@deriv-com/api-hooks": "^1.1.3", "@deriv-com/translations": "^1.2.4", - "@deriv-com/ui": "^1.28.2", + "@deriv-com/ui": "^1.28.3", "@deriv-com/utils": "^0.0.25", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-design": "^1.2.24", @@ -2670,9 +2670,9 @@ } }, "node_modules/@deriv-com/ui": { - "version": "1.28.2", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.28.2.tgz", - "integrity": "sha512-RaYhsLDKEORaOn7c1kngu1snTTlojTAijCnfqrVSWLfuiF+cjlH0/L0Ci0auaxhnVLNqqe+jKQ3SSXpzntb/7Q==", + "version": "1.28.3", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.28.3.tgz", + "integrity": "sha512-URQFWYTvTFSNs5eFJ1Gb3q7tMVxq8XLSta3QvhESSiCn1y8LHxp4A0cyFGtG9w1lGse6wp9GZZnEBMB2NWj93g==", "dependencies": { "@types/react-modal": "^3.16.3", "react-tiny-popover": "^8.0.4" diff --git a/package.json b/package.json index cbadf6f8..db43162c 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@babel/preset-env": "^7.24.5", "@deriv-com/api-hooks": "^1.1.3", "@deriv-com/translations": "^1.2.4", - "@deriv-com/ui": "^1.28.2", + "@deriv-com/ui": "^1.28.3", "@deriv-com/utils": "^0.0.25", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-design": "^1.2.24", diff --git a/src/components/AppHeader/MobileMenu/MenuContent.tsx b/src/components/AppHeader/MobileMenu/MenuContent.tsx index 00fc433a..787871d7 100644 --- a/src/components/AppHeader/MobileMenu/MenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/MenuContent.tsx @@ -1,71 +1,66 @@ -import { useState } from 'react'; -import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui'; +import clsx from 'clsx'; +import { MenuItem, Text, useDevice } from '@deriv-com/ui'; import { PlatformSwitcher } from '../PlatformSwitcher'; -import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig'; -import { SubmenuContent } from './SubmenuContent'; +import { MobileMenuConfig } from './MobileMenuConfig'; export const MenuContent = () => { - const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); - const [renderSubmenuFor, setRenderSubmenuFor] = useState('accountSettings'); const { isMobile } = useDevice(); - - const data = MobileMenuConfig().menuConfig; + const textSize = isMobile ? 'md' : 'sm'; return (
- {!isSubmenuOpen && ( -
- -
- )} +
+ +
- {data.map((item, index) => ( -
- {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, submenu }) => { - const textSize = isMobile ? 'md' : 'sm'; + {MobileMenuConfig().map((item, index) => { + const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom); - if (as === 'a') { + return ( +
+ {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, target }) => { + if (as === 'a') { + return ( + + } + target={target} + > + {label} + + ); + } return ( } + leftComponent={} + onClick={onClick} + rightComponent={RightComponent} > - {label} + + {label} + ); - } - return ( - } - onClick={() => { - if (submenu) { - setRenderSubmenuFor(submenu); - setIsSubmenuOpen(true); - } else onClick?.(); - }} - rightComponent={RightComponent} - > - - {label} - - - ); - })} -
- ))} - - - setIsSubmenuOpen(false)} renderContentFor={renderSubmenuFor} /> - + })} +
+ ); + })}
); diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx index e6de7728..908ceedd 100644 --- a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx +++ b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx @@ -1,30 +1,20 @@ -import { ReactNode } from 'react'; +import { ComponentProps, ReactNode } from 'react'; import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/constants'; import { BrandDerivLogoCoralIcon, IconTypes, LegacyAccountLimitsIcon, - LegacyAssessmentIcon, LegacyCashierIcon, LegacyChartsIcon, - LegacyChevronRight1pxIcon, - LegacyDepositIcon, - LegacyDerivP2pIcon, LegacyHelpCentreIcon, LegacyHomeOldIcon, - LegacyLiveChatOutlineIcon, LegacyLogout1pxIcon, LegacyProfileSmIcon, LegacyResponsibleTradingIcon, - LegacySecurityIcon, - LegacyTheme1pxIcon, - LegacyTransferIcon, - LegacyVerificationIcon, LegacyWhatsappIcon, - LegacyWithdrawalIcon, } from '@deriv/quill-icons'; +import { useAuthData } from '@deriv-com/api-hooks'; import { useTranslations } from '@deriv-com/translations'; -import { ToggleSwitch } from '@deriv-com/ui'; import { URLConstants } from '@deriv-com/utils'; export type TSubmenuSection = 'accountSettings' | 'cashier'; @@ -36,30 +26,14 @@ type TMenuConfig = { href?: string; label: string; onClick?: () => void; + removeBorderBottom?: boolean; submenu?: TSubmenuSection; + target?: ComponentProps<'a'>['target']; }[]; -type TSubmenu = { - items: { - href?: string; - icon: IconTypes; - label: string; - subItems?: { - href: string; - text: string; - }[]; - }[]; - section: string; - title: string; -}; - -type TSubmenuConfig = { - accountSettings: TSubmenu; - cashier: TSubmenu; -}; - export const MobileMenuConfig = () => { const { localize } = useTranslations(); + const { logout } = useAuthData(); const menuConfig: TMenuConfig[] = [ [ @@ -82,25 +56,24 @@ export const MobileMenuConfig = () => { LeftComponent: LegacyChartsIcon, }, { - as: 'button', + as: 'a', + href: `${URLConstants.derivAppProduction}/account/personal-details`, label: localize('Account Settings'), LeftComponent: LegacyProfileSmIcon, - RightComponent: , - submenu: 'accountSettings', }, { - as: 'button', + as: 'a', + href: `${URLConstants.derivAppProduction}/cashier/deposit`, label: localize('Cashier'), LeftComponent: LegacyCashierIcon, - RightComponent: , - submenu: 'cashier', - }, - { - as: 'button', - label: localize('Dark theme'), - LeftComponent: LegacyTheme1pxIcon, - RightComponent: , }, + // TODO add theme logic + // { + // as: 'button', + // label: localize('Dark theme'), + // LeftComponent: LegacyTheme1pxIcon, + // RightComponent: , + // }, ], [ { @@ -121,142 +94,30 @@ export const MobileMenuConfig = () => { label: localize('Responsible trading'), LeftComponent: LegacyResponsibleTradingIcon, }, - ], - [ { as: 'a', href: URLConstants.whatsApp, label: localize('WhatsApp'), LeftComponent: LegacyWhatsappIcon, + target: '_blank', }, - { - as: 'button', - label: localize('Live chat'), - LeftComponent: LegacyLiveChatOutlineIcon, - }, + // TODO add livechat logic + // { + // as: 'button', + // label: localize('Live chat'), + // LeftComponent: LegacyLiveChatOutlineIcon, + // }, ], [ { as: 'button', label: localize('Log out'), LeftComponent: LegacyLogout1pxIcon, + onClick: logout, + removeBorderBottom: true, }, ], ]; - const submenuConfig: TSubmenuConfig = { - accountSettings: { - items: [ - { - icon: LegacyProfileSmIcon, - label: localize('Profile'), - subItems: [ - { - href: `${URLConstants.derivAppProduction}/account/personal-details`, - text: localize('Personal details'), - }, - ], - }, - { - icon: LegacyAssessmentIcon, - label: localize('Assessments'), - subItems: [ - // { text: localize('Trading assessment') }, - { - href: `${URLConstants.derivAppProduction}/account/financial-assessment`, - text: localize('Financial assessment'), - }, - ], - }, - { - icon: LegacyVerificationIcon, - label: localize('Verification'), - subItems: [ - { - href: `${URLConstants.derivAppProduction}/account/proof-of-identity`, - text: localize('Proof of identity'), - }, - { - href: `${URLConstants.derivAppProduction}/account/proof-of-address`, - text: localize('Proof of address'), - }, - // { text: localize('Proof of ownership') }, - // { text: localize('Proof of income') }, - ], - }, - { - icon: LegacySecurityIcon, - label: localize('Security and safety'), - subItems: [ - { - href: `${URLConstants.derivAppProduction}/account/passwords`, - text: localize('Email and passwords'), - }, - { - href: `${URLConstants.derivAppProduction}/account/passkeys`, - text: localize('Passkeys'), - }, - { - href: `${URLConstants.derivAppProduction}/account/self-exclusion`, - text: localize('Self exclusion'), - }, - { - href: `${URLConstants.derivAppProduction}/account/account-limits`, - text: localize('Account limits'), - }, - { - href: `${URLConstants.derivAppProduction}/account/login-history`, - text: localize('Login history'), - }, - { - href: `${URLConstants.derivAppProduction}/account/api-token`, - text: localize('API token'), - }, - { - href: `${URLConstants.derivAppProduction}/account/connected-apps`, - text: localize('Connected apps'), - }, - { - href: `${URLConstants.derivAppProduction}/account/two-factor-authentication`, - text: localize('Two-factor authentication'), - }, - { - href: `${URLConstants.derivAppProduction}/account/closing-account`, - text: localize('Close your account'), - }, - ], - }, - ], - section: 'account', - title: localize('Account Settings'), - }, - cashier: { - items: [ - { - href: `${URLConstants.derivAppProduction}/cashier/deposit`, - icon: LegacyDepositIcon, - label: localize('Deposit'), - }, - { - href: `${URLConstants.derivAppProduction}/cashier/withdrawal`, - icon: LegacyWithdrawalIcon, - label: localize('Withdrawal'), - }, - { - href: `${URLConstants.derivAppProduction}/cashier/account-transfer`, - icon: LegacyTransferIcon, - label: localize('Transfer'), - }, - { - href: `${URLConstants.derivAppProduction}/cashier/p2p/buy-sell`, - icon: LegacyDerivP2pIcon, - label: localize('Deriv P2P'), - }, - ], - section: 'cashier', - title: localize('Cashier'), - }, - }; - - return { menuConfig, submenuConfig }; + return menuConfig; }; diff --git a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx deleted file mode 100644 index a90ea1f6..00000000 --- a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { BackButton } from './BackButton'; -import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig'; - -type TSubmenuContent = { - onBackClick: () => void; - renderContentFor: TSubmenuSection; -}; - -export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuContent) => { - const data = MobileMenuConfig().submenuConfig[renderContentFor]; - - return ( -
- - - {/*
- - - {localize('Cashier')} - -
- -
    -
  • - - {localize('Deposit')} -
    • - -
  • - - {localize('Withdrawal')} -
    • - -
  • - - {localize('Transfer')} -
    • - -
  • - - {localize('Deriv P2P')} -
    • -
- -
- - - {localize('Account Settings')} - -
- -
    -
  • -
    - - - {localize('Profile')} - -
    - -
      -
    • - {localize('Personal details')} -
      • -
    • - {localize('Languages')} -
      • -
    -
    • - -
  • -
    - - - {localize('Assessments')} - -
    - -
      -
    • - {localize('Trading assessment')} -
      • -
    • - {localize('Financial assessment')} -
      • -
    -
    • - -
  • -
    - - - {localize('Verification')} - -
    - -
      -
    • - {localize('Proof of identity')} -
      • -
    • - {localize('Proof of address')} -
      • -
    • - {localize('Proof of ownership')} -
      • -
    • - {localize('Proof of income')} -
      • -
    -
    • - -
  • -
    - - - {localize('Security and safety')} - -
    - -
      -
    • - {localize('Email and passwords')} -
      • -
    • - {localize('Self exclusion')} -
      • -
    • - {localize('Account limits')} -
      • -
    • - {localize('Login history')} -
      • -
    • - {localize('API token')} -
      • -
    • - {localize('Connected apps')} -
      • -
    • - {localize('Two-factor authentication')} -
      • -
    • - {localize('Close your account')} -
      • -
    -
    • -
*/} -
- ); -}; diff --git a/src/components/AppHeader/MobileMenu/index.tsx b/src/components/AppHeader/MobileMenu/index.tsx index 01b18e39..25698dbf 100644 --- a/src/components/AppHeader/MobileMenu/index.tsx +++ b/src/components/AppHeader/MobileMenu/index.tsx @@ -10,12 +10,6 @@ import { MenuContent } from './MenuContent'; import { MenuHeader } from './MenuHeader'; import { ToggleButton } from './ToggleButton'; -// TODO the design inside LanguageSwitcher does not match the production => change from ui side -// TODO fix platformswitcher issue in the tablet -// TODO logout onclick -// TODO adding language to the sidemenu>accountsettings -// TODO add disable condition to the accountsettings menu - export const MobileMenu = () => { const [isDrawerOpen, setIsDrawerOpen] = useState(false); const { currentLang = 'EN', localize, switchLanguage } = useTranslations(); @@ -52,6 +46,7 @@ export const MobileMenu = () => { onClose={hideModal} onLanguageSwitch={switchLanguage} selectedLanguage={currentLang} + wrapperClassName='px-[0.8rem]' /> ) : ( diff --git a/src/components/AppHeader/PlatformSwitcher/index.tsx b/src/components/AppHeader/PlatformSwitcher/index.tsx index 96bd4807..f5ab0f26 100644 --- a/src/components/AppHeader/PlatformSwitcher/index.tsx +++ b/src/components/AppHeader/PlatformSwitcher/index.tsx @@ -12,10 +12,13 @@ export const PlatformSwitcher = () => { className: 'hover:bg-transparent xl:hover:bg-[#e6e9e9] px-[1.6rem]', icon: platformsConfig[0].buttonIcon, }} + itemsWrapperClassName='top-48 h-full xl:top-[4.7rem] xl:h-auto' + overlayClassName='top-48 xl:top-[4.7rem]' > {platformsConfig.map(({ active, description, href, icon }) => (