diff --git a/package-lock.json b/package-lock.json index 39e6f424..a03bc455 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.2", "@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", @@ -2675,9 +2675,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 7b2bd84d..067336a0 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@babel/preset-env": "^7.24.5", "@deriv-com/api-hooks": "^1.1.2", "@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 a4518710..787871d7 100644 --- a/src/components/AppHeader/MobileMenu/MenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/MenuContent.tsx @@ -4,23 +4,17 @@ import { PlatformSwitcher } from '../PlatformSwitcher'; import { MobileMenuConfig } from './MobileMenuConfig'; export const MenuContent = () => { - // const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); - // const [renderSubmenuFor, setRenderSubmenuFor] = useState('accountSettings'); const { isMobile } = useDevice(); const textSize = isMobile ? 'md' : 'sm'; - const data = MobileMenuConfig().menuConfig; - return (
- {/* {!isSubmenuOpen && ( */}
- {/* )} */}
- {data.map((item, index) => { + {MobileMenuConfig().map((item, index) => { const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom); return ( @@ -30,7 +24,7 @@ export const MenuContent = () => { })} key={index} > - {item.map(({ LeftComponent, RightComponent, as, href, label, target }) => { + {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, target }) => { if (as === 'a') { return ( { disableHover key={label} leftComponent={} - // onClick={() => { - // if (submenu) { - // setRenderSubmenuFor(submenu); - // setIsSubmenuOpen(true); - // } else onClick?.(); - // }} + onClick={onClick} rightComponent={RightComponent} > @@ -72,10 +61,6 @@ export const MenuContent = () => {
); })} - - {/* - setIsSubmenuOpen(false)} renderContentFor={renderSubmenuFor} /> - */}
); diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx index 3c155e26..908ceedd 100644 --- a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx +++ b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx @@ -4,27 +4,17 @@ import { BrandDerivLogoCoralIcon, IconTypes, LegacyAccountLimitsIcon, - // LegacyAssessmentIcon, LegacyCashierIcon, LegacyChartsIcon, - // LegacyChevronRight1pxIcon, - // LegacyDepositIcon, 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'; @@ -41,26 +31,6 @@ type TMenuConfig = { target?: ComponentProps<'a'>['target']; }[]; -// type TSubmenu = { -// items: { -// Icon: IconTypes; -// href?: string; -// label: string; -// subItems?: { -// href?: string; -// onClick?: ComponentProps<'button'>['onClick']; -// text: string; -// }[]; -// }[]; -// section: string; -// title: string; -// }; - -// type TSubmenuConfig = { -// accountSettings: TSubmenu; -// cashier: TSubmenu; -// }; - export const MobileMenuConfig = () => { const { localize } = useTranslations(); const { logout } = useAuthData(); @@ -86,22 +56,16 @@ 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', }, // TODO add theme logic // { @@ -155,130 +119,5 @@ export const MobileMenuConfig = () => { ], ]; - // const submenuConfig: TSubmenuConfig = { - // TODO add disable/enable conditions to the accountsettings menu - // accountSettings: { - // items: [ - // { - // Icon: LegacyProfileSmIcon, - // label: localize('Profile'), - // subItems: [ - // { - // href: `${URLConstants.derivAppProduction}/account/personal-details`, - // text: localize('Personal details'), - // }, - // { - // TODO add OpenLanguageSetting onClick - // text: localize('Languages'), - // }, - // ], - // }, - // { - // Icon: LegacyAssessmentIcon, - // label: localize('Assessments'), - // subItems: [ - // { - // href: `${URLConstants.derivAppProduction}/account/trading-assessment`, - // 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'), - // }, - // { - // href: `${URLConstants.derivAppProduction}/account/proof-of-ownership`, - // text: localize('Proof of ownership'), - // }, - // { - // href: `${URLConstants.derivAppProduction}/account/proof-of-income`, - // text: localize('Proof of income'), - // }, - // ], - // }, - // { - // Icon: LegacySecurityIcon, - // label: localize('Security and safety'), - // subItems: [ - // { - // href: `${URLConstants.derivAppProduction}/account/passwords`, - // text: localize('Email and passwords'), - // }, - // { - // TODO add new badge for passkey - // 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'), - // }, - // ], - // section: 'cashier', - // title: localize('Cashier'), - // }, - // }; - - // return { menuConfig, submenuConfig }; - return { menuConfig }; + return menuConfig; }; diff --git a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx deleted file mode 100644 index 60df5783..00000000 --- a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// import { ComponentProps } from 'react'; -// import { IconTypes } from '@deriv/quill-icons'; -// import { Text, useDevice } from '@deriv-com/ui'; -// import { BackButton } from './BackButton'; -// import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig'; - -// type TSubmenuContent = { -// onBackClick: () => void; -// renderContentFor: TSubmenuSection; -// }; - -// type TMenuItem = { -// Icon: IconTypes; -// fontWeight: ComponentProps['weight']; -// label: string; -// }; - -// const MenuItem = ({ Icon, fontWeight, label }: TMenuItem) => { -// const { isMobile } = useDevice(); - -// return ( -// <> -// -// -// {label} -// -// -// ); -// }; - -// export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuContent) => { -export const SubmenuContent = () => { - // const data = MobileMenuConfig().submenuConfig[renderContentFor]; - // const { isMobile } = useDevice(); - - return ( -
- {/* */} - - {/*
    - {data.items.map(({ Icon, href, label, subItems }) => { - const hasSubItems = subItems?.length; - - if (hasSubItems) { - return ( -
  • -
    - -
    - - -
    • - ); - } - return ( -
  • - - - -
    • - ); - })} -
*/} -
- ); -}; diff --git a/src/components/AppHeader/MobileMenu/index.tsx b/src/components/AppHeader/MobileMenu/index.tsx index 90133b06..25698dbf 100644 --- a/src/components/AppHeader/MobileMenu/index.tsx +++ b/src/components/AppHeader/MobileMenu/index.tsx @@ -46,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 }) => (