-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactored menu iconic for a better DX (#2687)
- Loading branch information
Showing
5 changed files
with
133 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 0 additions & 96 deletions
96
storefront/components/Layout/Header/MenuIconic/MenuIconicItemLogin.tsx
This file was deleted.
Oops, something went wrong.
26 changes: 26 additions & 0 deletions
26
storefront/components/Layout/Header/MenuIconic/MenuIconicItemUser.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { useCurrentUserData } from 'hooks/user/useCurrentUserData'; | ||
| import dynamic from 'next/dynamic'; | ||
|
|
||
| const TEST_IDENTIFIER = 'layout-header-menuiconic-login'; | ||
|
|
||
| const MenuIconicItemUserAuthenticated = dynamic(() => | ||
| import('components/Layout/Header/MenuIconic/MenuIconicItemUserAuthenticated').then( | ||
| (component) => component.MenuIconicItemUserAuthenticated, | ||
| ), | ||
| ); | ||
|
|
||
| const MenuIconicItemUserUnauthenticated = dynamic(() => | ||
| import('components/Layout/Header/MenuIconic/MenuIconicItemUserUnauthenticated').then( | ||
| (component) => component.MenuIconicItemUserUnauthenticated, | ||
| ), | ||
| ); | ||
|
|
||
| export const MenuIconicItemUser: FC = () => { | ||
| const { isUserLoggedIn } = useCurrentUserData(); | ||
|
|
||
| return isUserLoggedIn ? ( | ||
| <MenuIconicItemUserAuthenticated dataTestId={TEST_IDENTIFIER} /> | ||
| ) : ( | ||
| <MenuIconicItemUserUnauthenticated dataTestId={TEST_IDENTIFIER} /> | ||
| ); | ||
| }; |
55 changes: 55 additions & 0 deletions
55
storefront/components/Layout/Header/MenuIconic/MenuIconicItemUserAuthenticated.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useTypedTranslationFunction } from 'hooks/typescript/useTypedTranslationFunction'; | ||
| import { MenuIconicItemLink, MenuIconicItemIcon, MenuIconicSubItemLink } from './MenuIconicElements'; | ||
| import { getInternationalizedStaticUrls } from 'helpers/localization/getInternationalizedStaticUrls'; | ||
| import { useDomainConfig } from 'hooks/useDomainConfig'; | ||
| import { useAuth } from 'hooks/auth/useAuth'; | ||
| import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink'; | ||
|
|
||
| export const MenuIconicItemUserAuthenticated: FC = ({ dataTestId }) => { | ||
| const t = useTypedTranslationFunction(); | ||
| const { logout } = useAuth(); | ||
| const { url } = useDomainConfig(); | ||
| const [customerUrl, customerOrdersUrl, customerEditProfileUrl] = getInternationalizedStaticUrls( | ||
| ['/customer', '/customer/orders', '/customer/edit-profile'], | ||
| url, | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="group"> | ||
| <MenuIconicItemLink | ||
| href={customerUrl} | ||
| className="rounded-t-xl p-3 group-hover:bg-white group-hover:text-dark max-lg:hidden" | ||
| dataTestId={dataTestId + '-my-account'} | ||
| > | ||
| <MenuIconicItemIcon icon="User" className="group-hover:text-dark" /> | ||
| {t('My account')} | ||
| </MenuIconicItemLink> | ||
|
|
||
| <ul className="pointer-events-none absolute top-full right-0 z-cart block min-w-[150px] origin-top-right scale-50 rounded-xl rounded-tr-none bg-white opacity-0 shadow-lg transition-all group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100"> | ||
| <li className="block" data-testid={dataTestId + '-sub-0'}> | ||
| <MenuIconicSubItemLink href={customerOrdersUrl}>{t('My orders')}</MenuIconicSubItemLink> | ||
| </li> | ||
| <li className="block border-t border-border"> | ||
| <MenuIconicSubItemLink href={customerEditProfileUrl} dataTestId={dataTestId + '-sub-1'}> | ||
| {t('Edit profile')} | ||
| </MenuIconicSubItemLink> | ||
| </li> | ||
| <li className="block border-t border-border"> | ||
| <MenuIconicSubItemLink onClick={logout} dataTestId={dataTestId + '-sub-2'}> | ||
| {t('Logout')} | ||
| </MenuIconicSubItemLink> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div className="order-2 ml-1 flex h-9 w-9 cursor-pointer items-center justify-center text-lg outline-none lg:hidden"> | ||
| <ExtendedNextLink href={customerUrl} type="static"> | ||
| <div className="relative flex h-full w-full items-center justify-center text-white transition-colors"> | ||
| <MenuIconicItemIcon icon="User" className="mr-0" /> | ||
| </div> | ||
| </ExtendedNextLink> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
43 changes: 43 additions & 0 deletions
43
storefront/components/Layout/Header/MenuIconic/MenuIconicItemUserUnauthenticated.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useTypedTranslationFunction } from 'hooks/typescript/useTypedTranslationFunction'; | ||
| import { MenuIconicItemLink, MenuIconicItemIcon } from './MenuIconicElements'; | ||
| import { Heading } from 'components/Basic/Heading/Heading'; | ||
| import { Login } from 'components/Blocks/Popup/Login/Login'; | ||
| import { useState } from 'react'; | ||
| import dynamic from 'next/dynamic'; | ||
|
|
||
| const Popup = dynamic(() => import('components/Layout/Popup/Popup').then((component) => component.Popup)); | ||
|
|
||
| export const MenuIconicItemUserUnauthenticated: FC = ({ dataTestId }) => { | ||
| const t = useTypedTranslationFunction(); | ||
| const [isLoginPopupOpened, setIsLoginPopupOpened] = useState(false); | ||
| const handleLogin = () => setIsLoginPopupOpened(true); | ||
|
|
||
| return ( | ||
| <> | ||
| <MenuIconicItemLink | ||
| onClick={handleLogin} | ||
| className="cursor-pointer max-lg:hidden" | ||
| dataTestId={dataTestId + '-link-popup'} | ||
| > | ||
| <MenuIconicItemIcon icon="User" /> | ||
| {t('Login')} | ||
| </MenuIconicItemLink> | ||
|
|
||
| <div className="order-2 ml-1 flex h-9 w-9 cursor-pointer items-center justify-center text-lg outline-none lg:hidden"> | ||
| <div | ||
| className="relative flex h-full w-full items-center justify-center text-white transition-colors" | ||
| onClick={handleLogin} | ||
| > | ||
| <MenuIconicItemIcon icon="User" className="mr-0" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {isLoginPopupOpened && ( | ||
| <Popup onCloseCallback={() => setIsLoginPopupOpened(false)}> | ||
| <Heading type="h2">{t('Login')}</Heading> | ||
| <Login /> | ||
| </Popup> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |