[storefront] Update UX for user menu (#3583)

shopsys · Nov 12, 2024 · d9c688c · d9c688c
2 parents 387b1dd + 38b3dec
commit d9c688c
Show file tree

Hide file tree

Showing 24 changed files with 43 additions and 222 deletions.
diff --git a/storefront/components/Blocks/Skeleton/SkeletonManager.tsx b/storefront/components/Blocks/Skeleton/SkeletonManager.tsx
@@ -8,7 +8,6 @@ import { SkeletonPageComparison } from './SkeletonPageComparison';
 import { SkeletonPageConfirmation } from './SkeletonPageConfirmation';
 import { SkeletonPageContact } from './SkeletonPageContact';
 import { SkeletonPageContactInformation } from './SkeletonPageContactInformation';
-import { SkeletonPageCustomerAccount } from './SkeletonPageCustomerAccount';
 import { SkeletonPageCustomerChangePassword } from './SkeletonPageCustomerChangePassword';
 import { SkeletonPageCustomerComplaintDetail } from './SkeletonPageCustomerComplaintDetail';
 import { SkeletonPageCustomerComplaintList } from './SkeletonPageCustomerComplaintList';
@@ -84,8 +83,6 @@ export const SkeletonManager: FC<SkeletonManagerProps> = ({
             return <SkeletonPageContact />;
         case 'contact-information':
             return <SkeletonPageContactInformation />;
-        case 'account':
-            return <SkeletonPageCustomerAccount />;
         case 'complaintNew':
             return <SkeletonPageCustomerComplaintNew />;
         case 'complaintDetail':

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerAccount.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerAccount.tsx
diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerChangePassword.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerChangePassword.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerChangePassword: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={3} />
+        <SkeletonModuleBreadcrumbs count={2} />
 
         <SkeletonModuleCustomerChangePassword />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintDetail.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintDetail.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerComplaintDetail: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={4} />
+        <SkeletonModuleBreadcrumbs count={3} />
 
         <SkeletonModuleCustomerComplaintDetail />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintList.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintList.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerComplaintList: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={3} />
+        <SkeletonModuleBreadcrumbs count={2} />
 
         <SkeletonModuleCustomerComplaintList />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintNew.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerComplaintNew.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerComplaintNew: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={4} />
+        <SkeletonModuleBreadcrumbs count={3} />
 
         <SkeletonModuleCustomerComplaintNew />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerEditProfile.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerEditProfile.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerEditProfile: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={3} />
+        <SkeletonModuleBreadcrumbs count={2} />
 
         <SkeletonModuleCustomerEditProfile />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerOrderDetail.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerOrderDetail.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerOrderDetail: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={4} />
+        <SkeletonModuleBreadcrumbs count={3} />
 
         <SkeletonModuleCustomerOrderDetail />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerOrderList.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerOrderList.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerOrderList: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={3} />
+        <SkeletonModuleBreadcrumbs count={2} />
 
         <SkeletonModuleCustomerOrderList />
     </Webline>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageCustomerUsers.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageCustomerUsers.tsx
@@ -4,7 +4,7 @@ import { Webline } from 'components/Layout/Webline/Webline';
 
 export const SkeletonPageCustomerUsers: FC = () => (
     <Webline>
-        <SkeletonModuleBreadcrumbs count={3} />
+        <SkeletonModuleBreadcrumbs count={2} />
 
         <SkeletonModuleCustomerUsers />
     </Webline>

diff --git a/storefront/components/Blocks/UserNavigation/UserNavigation.tsx b/storefront/components/Blocks/UserNavigation/UserNavigation.tsx
@@ -1,6 +1,8 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { ArrowIcon } from 'components/Basic/Icon/ArrowIcon';
+import { ExitIcon } from 'components/Basic/Icon/ExitIcon';
 import { Button } from 'components/Forms/Button/Button';
+import { TIDs } from 'cypress/tids';
 import { m } from 'framer-motion';
 import useTranslation from 'next-translate/useTranslation';
 import { useRouter } from 'next/router';
@@ -12,7 +14,7 @@ import { useUserMenuItems } from 'utils/user/useUserMenuItems';
 
 const getMenuItemTwClass = (menuItemLink?: string, asPath?: string) =>
     twJoin(
-        'border-b border-borderAccent last:border-none no-underline px-2 py-3 flex justify-between gap-4',
+        'border-b border-borderAccent last:border-none no-underline px-4 py-3 flex gap-4 text-sm',
         menuItemLink && asPath?.includes(menuItemLink)
             ? 'bg-backgroundAccentLess text-textAccent hover:text-textAccent'
             : 'bg-backgroundMore text-text hover:text-textAccent',
@@ -26,10 +28,10 @@ export const UserNavigation: FC = () => {
     const logoutHandler = useLogout();
 
     return (
-        <div className="flex h-fit min-w-[300px] flex-col overflow-hidden rounded-md">
+        <div className="flex h-fit min-w-[300px] flex-col overflow-hidden rounded-xl">
             <button
                 className={twJoin(
-                    'flex items-center justify-between gap-4 bg-backgroundMore px-6 py-3 no-underline last:border-none lg:hidden',
+                    'flex items-center gap-4 bg-backgroundMore px-6 py-3 no-underline last:border-none lg:hidden',
                     isExpanded && 'border-b border-borderAccent',
                 )}
                 onClick={() => setIsExpanded((prev) => !prev)}
@@ -41,7 +43,7 @@ export const UserNavigation: FC = () => {
             <m.div
                 key="user-navigation"
                 animate={isExpanded ? 'open' : 'closed'}
-                className="!flex flex-col bg-backgroundMore px-4 lg:!h-auto"
+                className="!flex flex-col bg-backgroundMore lg:!h-auto"
                 initial={false}
                 variants={collapseExpandAnimation}
             >
@@ -52,11 +54,12 @@ export const UserNavigation: FC = () => {
                         href={menuItem.link}
                         type={menuItem.type}
                     >
+                        {menuItem.iconComponent && <menuItem.iconComponent className="size-6" />}
                         {menuItem.text}
                         {menuItem.count !== undefined && (
                             <div
                                 className={twJoin(
-                                    'flex min-h-[24px] min-w-[24px] items-center justify-center rounded-full bg-backgroundDark px-1 text-sm text-textInverted',
+                                    'ml-auto flex min-h-[24px] min-w-[24px] items-center justify-center rounded-full bg-backgroundDark px-1 text-sm text-textInverted',
                                 )}
                             >
                                 {menuItem.count}
@@ -65,12 +68,14 @@ export const UserNavigation: FC = () => {
                     </ExtendedNextLink>
                 ))}
                 <Button
+                    tid={TIDs.customer_page_logout}
                     className={twJoin(
                         getMenuItemTwClass(),
-                        'font-primary bg-transparent !px-2 !text-base font-normal leading-5 text-text !outline-none hover:bg-transparent hover:text-textAccent hover:underline',
+                        'font-primary justify-start bg-transparent !px-4 text-sm font-normal leading-5 !text-text !outline-none hover:bg-transparent hover:text-textAccent hover:underline',
                     )}
                     onClick={logoutHandler}
                 >
+                    <ExitIcon className="size-6" />
                     {t('Logout')}
                 </Button>
             </m.div>

diff --git a/storefront/components/Layout/CustomerLayout.tsx b/storefront/components/Layout/CustomerLayout.tsx
@@ -2,32 +2,19 @@ import { UserNavigation } from 'components/Blocks/UserNavigation/UserNavigation'
 import { Breadcrumbs } from 'components/Layout/Breadcrumbs/Breadcrumbs';
 import { CommonLayout, CommonLayoutProps } from 'components/Layout/CommonLayout';
 import { Webline } from 'components/Layout/Webline/Webline';
-import { useDomainConfig } from 'components/providers/DomainConfigProvider';
-import useTranslation from 'next-translate/useTranslation';
 import { useIsUserLoggedIn } from 'utils/auth/useIsUserLoggedIn';
-import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
 
 type CustomerLayoutProps = {
     pageHeading?: string;
 } & CommonLayoutProps;
 
 export const CustomerLayout: FC<CustomerLayoutProps> = ({ pageHeading, children, breadcrumbs, ...props }) => {
     const isUserLoggedIn = useIsUserLoggedIn();
-    const { url } = useDomainConfig();
-    const { t } = useTranslation();
-    const [customerUrl] = getInternationalizedStaticUrls(['/customer'], url);
 
     return (
         <CommonLayout {...props}>
             <Webline>
-                <Breadcrumbs
-                    key="breadcrumb"
-                    type={props.breadcrumbsType}
-                    breadcrumbs={[
-                        { __typename: 'Link', name: t('Customer'), slug: customerUrl },
-                        ...(breadcrumbs ?? []),
-                    ]}
-                />
+                <Breadcrumbs key="breadcrumb" breadcrumbs={breadcrumbs ?? []} type={props.breadcrumbsType} />
             </Webline>
             <Webline className="mt-8 flex flex-col gap-6 lg:mt-4 lg:flex-row vl:mt-12">
                 <UserNavigation />

diff --git a/storefront/components/Layout/Header/MenuIconic/MenuIconicItemUserAuthenticated.tsx b/storefront/components/Layout/Header/MenuIconic/MenuIconicItemUserAuthenticated.tsx
@@ -3,20 +3,16 @@ import { MenuIconicItemUserAuthenticatedContent } from './MenuIconicItemUserAuth
 import { Drawer } from 'components/Basic/Drawer/Drawer';
 import { UserIcon } from 'components/Basic/Icon/UserIcon';
 import { Overlay } from 'components/Basic/Overlay/Overlay';
-import { useDomainConfig } from 'components/providers/DomainConfigProvider';
 import { TIDs } from 'cypress/tids';
 import useTranslation from 'next-translate/useTranslation';
 import { useState } from 'react';
 import { desktopFirstSizes } from 'utils/mediaQueries';
-import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
 import { twMergeCustom } from 'utils/twMerge';
 import { useGetWindowSize } from 'utils/ui/useGetWindowSize';
 import { useDebounce } from 'utils/useDebounce';
 
 export const MenuIconicItemUserAuthenticated: FC = () => {
     const { t } = useTranslation();
-    const { url } = useDomainConfig();
-    const [customerUrl] = getInternationalizedStaticUrls(['/customer'], url);
     const [isClicked, setIsClicked] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const isHoveredDelayed = useDebounce(isHovered, 200);
@@ -33,8 +29,7 @@ export const MenuIconicItemUserAuthenticated: FC = () => {
                 onMouseLeave={() => isDesktop && setIsHovered(false)}
             >
                 <MenuIconicItemLink
-                    className="text-nowrap rounded-t transition-all max-lg:hidden"
-                    href={customerUrl}
+                    className="cursor-pointer text-nowrap rounded-t transition-all max-lg:hidden"
                     type="account"
                 >
                     <div className="relative">

diff --git a/storefront/components/Pages/Customer/CustomerContent.tsx b/storefront/components/Pages/Customer/CustomerContent.tsx
diff --git a/storefront/cypress/e2e/authentication/login.cy.ts b/storefront/cypress/e2e/authentication/login.cy.ts
@@ -32,7 +32,7 @@ describe('Login Tests', () => {
             blackout: [{ tid: TIDs.banners_slider }, { tid: TIDs.simple_navigation_image }],
         });
 
-        cy.visitAndWaitForStableAndInteractiveDOM(url.customer.index);
+        cy.visitAndWaitForStableAndInteractiveDOM(url.customer.orders);
         logoutFromCustomerPage();
         checkAndHideSuccessToast('Successfully logged out');
         checkUrl(url.loginWithCustomerRedirect);

diff --git a/storefront/cypress/fixtures/demodata.ts b/storefront/cypress/fixtures/demodata.ts
@@ -159,7 +159,6 @@ export const url = {
     login: '/login',
     loginWithCustomerRedirect: '/login?r=customer',
     customer: {
-        index: '/customer',
         orders: '/customer/orders',
         editProfile: '/customer/edit-profile',
     },

diff --git a/...ration.cy.ts/[Register B2C] (customer edit page) register as a B2C customer.png b/...ration.cy.ts/[Register B2C] (customer edit page) register as a B2C customer.png
diff --git a/...der completion, and check that the just created order is in customer orders.png b/...der completion, and check that the just created order is in customer orders.png
diff --git a/...der completion, and check that the just created order is in customer orders.png b/...der completion, and check that the just created order is in customer orders.png