From 92a548beeb5e216aa1ae33a3f73ccd52f9a0eff5 Mon Sep 17 00:00:00 2001 From: Niloofar Date: Fri, 14 Jun 2024 13:34:41 +0800 Subject: [PATCH 1/5] fix: added sidemenu submenu --- .../AppHeader/MobileMenu/MenuContent.tsx | 96 +++++---- .../AppHeader/MobileMenu/MobileMenuConfig.tsx | 51 +++-- .../AppHeader/MobileMenu/SubmenuContent.tsx | 188 +++++------------- src/components/AppHeader/MobileMenu/index.tsx | 5 +- 4 files changed, 145 insertions(+), 195 deletions(-) diff --git a/src/components/AppHeader/MobileMenu/MenuContent.tsx b/src/components/AppHeader/MobileMenu/MenuContent.tsx index 00fc433a..967d3b77 100644 --- a/src/components/AppHeader/MobileMenu/MenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/MenuContent.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import clsx from 'clsx'; import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui'; import { PlatformSwitcher } from '../PlatformSwitcher'; import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig'; @@ -8,6 +9,7 @@ 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; @@ -20,48 +22,60 @@ export const MenuContent = () => { )}
- {data.map((item, index) => ( -
- {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, submenu }) => { - const textSize = isMobile ? 'md' : 'sm'; + {data.map((item, index) => { + const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom); - if (as === 'a') { - return ( - } - > - {label} - - ); - } - return ( - } - onClick={() => { - if (submenu) { - setRenderSubmenuFor(submenu); - setIsSubmenuOpen(true); - } else onClick?.(); - }} - rightComponent={RightComponent} - > - - {label} - - - ); - })} -
- ))} + return ( +
+ {item.map( + ({ LeftComponent, RightComponent, as, href, label, onClick, submenu, target }) => { + if (as === 'a') { + return ( + + } + target={target} + > + {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..90bfebe7 100644 --- a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx +++ b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import { ComponentProps, ReactNode } from 'react'; import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/constants'; import { BrandDerivLogoCoralIcon, @@ -9,7 +9,6 @@ import { LegacyChartsIcon, LegacyChevronRight1pxIcon, LegacyDepositIcon, - LegacyDerivP2pIcon, LegacyHelpCentreIcon, LegacyHomeOldIcon, LegacyLiveChatOutlineIcon, @@ -23,6 +22,7 @@ import { 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'; @@ -36,13 +36,15 @@ type TMenuConfig = { href?: string; label: string; onClick?: () => void; + removeBorderBottom?: boolean; submenu?: TSubmenuSection; + target?: ComponentProps<'a'>['target']; }[]; type TSubmenu = { items: { + Icon: IconTypes; href?: string; - icon: IconTypes; label: string; subItems?: { href: string; @@ -60,6 +62,7 @@ type TSubmenuConfig = { export const MobileMenuConfig = () => { const { localize } = useTranslations(); + const { logout } = useAuthData(); const menuConfig: TMenuConfig[] = [ [ @@ -121,13 +124,12 @@ export const MobileMenuConfig = () => { label: localize('Responsible trading'), LeftComponent: LegacyResponsibleTradingIcon, }, - ], - [ { as: 'a', href: URLConstants.whatsApp, label: localize('WhatsApp'), LeftComponent: LegacyWhatsappIcon, + target: '_blank', }, { as: 'button', @@ -140,6 +142,8 @@ export const MobileMenuConfig = () => { as: 'button', label: localize('Log out'), LeftComponent: LegacyLogout1pxIcon, + onClick: logout, + removeBorderBottom: true, }, ], ]; @@ -148,20 +152,26 @@ export const MobileMenuConfig = () => { accountSettings: { items: [ { - icon: LegacyProfileSmIcon, + Icon: LegacyProfileSmIcon, label: localize('Profile'), subItems: [ { href: `${URLConstants.derivAppProduction}/account/personal-details`, text: localize('Personal details'), }, + { + text: localize('Languages'), + }, ], }, { - icon: LegacyAssessmentIcon, + Icon: LegacyAssessmentIcon, label: localize('Assessments'), subItems: [ - // { text: localize('Trading assessment') }, + { + href: `${URLConstants.derivAppProduction}/account/trading-assessment`, + text: localize('Trading assessment'), + }, { href: `${URLConstants.derivAppProduction}/account/financial-assessment`, text: localize('Financial assessment'), @@ -169,7 +179,7 @@ export const MobileMenuConfig = () => { ], }, { - icon: LegacyVerificationIcon, + Icon: LegacyVerificationIcon, label: localize('Verification'), subItems: [ { @@ -180,12 +190,18 @@ export const MobileMenuConfig = () => { href: `${URLConstants.derivAppProduction}/account/proof-of-address`, text: localize('Proof of address'), }, - // { text: localize('Proof of ownership') }, - // { text: localize('Proof of income') }, + { + 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, + Icon: LegacySecurityIcon, label: localize('Security and safety'), subItems: [ { @@ -234,24 +250,19 @@ export const MobileMenuConfig = () => { items: [ { href: `${URLConstants.derivAppProduction}/cashier/deposit`, - icon: LegacyDepositIcon, + Icon: LegacyDepositIcon, label: localize('Deposit'), }, { href: `${URLConstants.derivAppProduction}/cashier/withdrawal`, - icon: LegacyWithdrawalIcon, + Icon: LegacyWithdrawalIcon, label: localize('Withdrawal'), }, { href: `${URLConstants.derivAppProduction}/cashier/account-transfer`, - icon: LegacyTransferIcon, + Icon: LegacyTransferIcon, label: localize('Transfer'), }, - { - href: `${URLConstants.derivAppProduction}/cashier/p2p/buy-sell`, - icon: LegacyDerivP2pIcon, - label: localize('Deriv P2P'), - }, ], section: 'cashier', title: localize('Cashier'), diff --git a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx index a90ea1f6..a71e756e 100644 --- a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx @@ -1,3 +1,6 @@ +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'; @@ -6,146 +9,65 @@ type TSubmenuContent = { 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) => { const data = MobileMenuConfig().submenuConfig[renderContentFor]; + const { isMobile } = useDevice(); return ( -
+
- {/*
- - - {localize('Cashier')} - -
- -
    -
  • - - {localize('Deposit')} -
    • - -
  • - - {localize('Withdrawal')} -
    • - -
  • - - {localize('Transfer')} -
    • - -
  • - - {localize('Deriv P2P')} -
    • +
      + {data.items.map(({ Icon, href, label, subItems }) => { + const hasSubItems = subItems?.length; + + if (hasSubItems) { + return ( +
    • +
      + +
      + + +
      • + ); + } + return ( +
    • + + + +
      • + ); + })}
    - -
    - - - {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..97e7c868 100644 --- a/src/components/AppHeader/MobileMenu/index.tsx +++ b/src/components/AppHeader/MobileMenu/index.tsx @@ -12,9 +12,12 @@ 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 Dark theme logic +// TODO livechat logic + // TODO adding language to the sidemenu>accountsettings // TODO add disable condition to the accountsettings menu +// TODO new badge for passkey export const MobileMenu = () => { const [isDrawerOpen, setIsDrawerOpen] = useState(false); From c040447454a41bc114d671d1da4980b19891a09c Mon Sep 17 00:00:00 2001 From: Niloofar Date: Fri, 14 Jun 2024 13:41:32 +0800 Subject: [PATCH 2/5] fix: build error --- src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx index 90bfebe7..9461c319 100644 --- a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx +++ b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx @@ -47,7 +47,8 @@ type TSubmenu = { href?: string; label: string; subItems?: { - href: string; + href?: string; + onClick?: ComponentProps<'button'>['onClick']; text: string; }[]; }[]; From dc7a4c7655f54004947a3ee3b342b5ca2b6bb848 Mon Sep 17 00:00:00 2001 From: Niloofar Date: Fri, 14 Jun 2024 14:22:44 +0800 Subject: [PATCH 3/5] chore: commented unnecessary parts --- .../AppHeader/MobileMenu/MobileMenuConfig.tsx | 342 +++++++++--------- src/components/AppHeader/MobileMenu/index.tsx | 9 - 2 files changed, 176 insertions(+), 175 deletions(-) diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx index 9461c319..3c155e26 100644 --- a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx +++ b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx @@ -4,27 +4,27 @@ import { BrandDerivLogoCoralIcon, IconTypes, LegacyAccountLimitsIcon, - LegacyAssessmentIcon, + // LegacyAssessmentIcon, LegacyCashierIcon, LegacyChartsIcon, - LegacyChevronRight1pxIcon, - LegacyDepositIcon, + // LegacyChevronRight1pxIcon, + // LegacyDepositIcon, LegacyHelpCentreIcon, LegacyHomeOldIcon, - LegacyLiveChatOutlineIcon, + // LegacyLiveChatOutlineIcon, LegacyLogout1pxIcon, LegacyProfileSmIcon, LegacyResponsibleTradingIcon, - LegacySecurityIcon, - LegacyTheme1pxIcon, - LegacyTransferIcon, - LegacyVerificationIcon, + // LegacySecurityIcon, + // LegacyTheme1pxIcon, + // LegacyTransferIcon, + // LegacyVerificationIcon, LegacyWhatsappIcon, - LegacyWithdrawalIcon, + // 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 { ToggleSwitch } from '@deriv-com/ui'; import { URLConstants } from '@deriv-com/utils'; export type TSubmenuSection = 'accountSettings' | 'cashier'; @@ -41,25 +41,25 @@ 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 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; -}; +// type TSubmenuConfig = { +// accountSettings: TSubmenu; +// cashier: TSubmenu; +// }; export const MobileMenuConfig = () => { const { localize } = useTranslations(); @@ -86,25 +86,30 @@ export const MobileMenuConfig = () => { LeftComponent: LegacyChartsIcon, }, { - as: 'button', + // as: 'button', + as: 'a', + href: `${URLConstants.derivAppProduction}/account/personal-details`, label: localize('Account Settings'), LeftComponent: LegacyProfileSmIcon, - RightComponent: , - submenu: 'accountSettings', + // RightComponent: , + // submenu: 'accountSettings', }, { - as: 'button', + // 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: , + // RightComponent: , + // submenu: 'cashier', }, + // TODO add theme logic + // { + // as: 'button', + // label: localize('Dark theme'), + // LeftComponent: LegacyTheme1pxIcon, + // RightComponent: , + // }, ], [ { @@ -132,11 +137,12 @@ export const MobileMenuConfig = () => { LeftComponent: LegacyWhatsappIcon, target: '_blank', }, - { - as: 'button', - label: localize('Live chat'), - LeftComponent: LegacyLiveChatOutlineIcon, - }, + // TODO add livechat logic + // { + // as: 'button', + // label: localize('Live chat'), + // LeftComponent: LegacyLiveChatOutlineIcon, + // }, ], [ { @@ -149,126 +155,130 @@ export const MobileMenuConfig = () => { ], ]; - const submenuConfig: TSubmenuConfig = { - accountSettings: { - items: [ - { - Icon: LegacyProfileSmIcon, - label: localize('Profile'), - subItems: [ - { - href: `${URLConstants.derivAppProduction}/account/personal-details`, - text: localize('Personal details'), - }, - { - 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'), - }, - { - 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'), - }, - }; + // 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, submenuConfig }; + return { menuConfig }; }; diff --git a/src/components/AppHeader/MobileMenu/index.tsx b/src/components/AppHeader/MobileMenu/index.tsx index 97e7c868..90133b06 100644 --- a/src/components/AppHeader/MobileMenu/index.tsx +++ b/src/components/AppHeader/MobileMenu/index.tsx @@ -10,15 +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 Dark theme logic -// TODO livechat logic - -// TODO adding language to the sidemenu>accountsettings -// TODO add disable condition to the accountsettings menu -// TODO new badge for passkey - export const MobileMenu = () => { const [isDrawerOpen, setIsDrawerOpen] = useState(false); const { currentLang = 'EN', localize, switchLanguage } = useTranslations(); From e0fb45149e0eef65da50b647fa66d151d7fd8159 Mon Sep 17 00:00:00 2001 From: Niloofar Date: Fri, 14 Jun 2024 14:26:12 +0800 Subject: [PATCH 4/5] chore: commented unnecessary parts --- .../AppHeader/MobileMenu/MenuContent.tsx | 88 +++++++++---------- .../AppHeader/MobileMenu/SubmenuContent.tsx | 63 ++++++------- 2 files changed, 74 insertions(+), 77 deletions(-) diff --git a/src/components/AppHeader/MobileMenu/MenuContent.tsx b/src/components/AppHeader/MobileMenu/MenuContent.tsx index 967d3b77..a4518710 100644 --- a/src/components/AppHeader/MobileMenu/MenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/MenuContent.tsx @@ -1,13 +1,11 @@ -import { useState } from 'react'; import clsx from 'clsx'; -import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui'; +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 [isSubmenuOpen, setIsSubmenuOpen] = useState(false); + // const [renderSubmenuFor, setRenderSubmenuFor] = useState('accountSettings'); const { isMobile } = useDevice(); const textSize = isMobile ? 'md' : 'sm'; @@ -15,11 +13,11 @@ export const MenuContent = () => { return (
- {!isSubmenuOpen && ( -
- -
- )} + {/* {!isSubmenuOpen && ( */} +
+ +
+ {/* )} */}
{data.map((item, index) => { @@ -32,54 +30,52 @@ export const MenuContent = () => { })} key={index} > - {item.map( - ({ LeftComponent, RightComponent, as, href, label, onClick, submenu, target }) => { - if (as === 'a') { - return ( - - } - target={target} - > - {label} - - ); - } + {item.map(({ LeftComponent, RightComponent, as, href, label, target }) => { + if (as === 'a') { return ( } - onClick={() => { - if (submenu) { - setRenderSubmenuFor(submenu); - setIsSubmenuOpen(true); - } else onClick?.(); - }} - rightComponent={RightComponent} + leftComponent={ + + } + target={target} > - - {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/SubmenuContent.tsx b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx index a71e756e..60df5783 100644 --- a/src/components/AppHeader/MobileMenu/SubmenuContent.tsx +++ b/src/components/AppHeader/MobileMenu/SubmenuContent.tsx @@ -1,42 +1,43 @@ -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'; +// 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 TSubmenuContent = { +// onBackClick: () => void; +// renderContentFor: TSubmenuSection; +// }; -type TMenuItem = { - Icon: IconTypes; - fontWeight: ComponentProps['weight']; - label: string; -}; +// type TMenuItem = { +// Icon: IconTypes; +// fontWeight: ComponentProps['weight']; +// label: string; +// }; -const MenuItem = ({ Icon, fontWeight, label }: TMenuItem) => { - const { isMobile } = useDevice(); +// const MenuItem = ({ Icon, fontWeight, label }: TMenuItem) => { +// const { isMobile } = useDevice(); - return ( - <> - - - {label} - - - ); -}; +// return ( +// <> +// +// +// {label} +// +// +// ); +// }; -export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuContent) => { - const data = MobileMenuConfig().submenuConfig[renderContentFor]; - const { isMobile } = useDevice(); +// 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; @@ -67,7 +68,7 @@ export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuConten ); })} -
    +
*/}
); }; From 28e86ea26102aed337a13144419d5a84f7d55865 Mon Sep 17 00:00:00 2001 From: Niloofar Date: Fri, 14 Jun 2024 17:05:47 +0800 Subject: [PATCH 5/5] chore: removed commented code --- package-lock.json | 8 +- package.json | 2 +- .../AppHeader/MobileMenu/MenuContent.tsx | 21 +-- .../AppHeader/MobileMenu/MobileMenuConfig.tsx | 163 +----------------- .../AppHeader/MobileMenu/SubmenuContent.tsx | 74 -------- src/components/AppHeader/MobileMenu/index.tsx | 1 + .../AppHeader/PlatformSwitcher/index.tsx | 3 + 7 files changed, 13 insertions(+), 259 deletions(-) delete mode 100644 src/components/AppHeader/MobileMenu/SubmenuContent.tsx 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 }) => (