feat(MED-100): show cart in mobile menu

app/home/(user)/(dashboard)/layout.tsx

@@ -7,6 +7,8 @@ import { z } from 'zod';
 import { UserWorkspaceContextProvider } from '@kit/accounts/components';
 import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+import { StoreCart } from '@medusajs/types';
+import { retrieveCart } from '@lib/data';
 
 import { AppLogo } from '~/components/app-logo';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
@@ -17,7 +19,6 @@ import { HomeMenuNavigation } from '../_components/home-menu-navigation';
 import { HomeMobileNavigation } from '../_components/home-mobile-navigation';
 import { HomeSidebar } from '../_components/home-sidebar';
 import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
-import { retrieveCart } from '@lib/data';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
   const state = use(getLayoutState());
@@ -44,7 +45,7 @@ function SidebarLayout({ children }: React.PropsWithChildren) {
           </PageNavigation>
 
           <PageMobileNavigation className={'flex items-center justify-between'}>
-            <MobileNavigation workspace={workspace} />
+            <MobileNavigation workspace={workspace} cart={null} />
           </PageMobileNavigation>
 
           {children}
@@ -66,7 +67,7 @@ function HeaderLayout({ children }: React.PropsWithChildren) {
         </PageNavigation>
 
         <PageMobileNavigation className={'flex items-center justify-between'}>
-          <MobileNavigation workspace={workspace} />
+          <MobileNavigation workspace={workspace} cart={cart} />
         </PageMobileNavigation>
 
         <SidebarProvider defaultOpen>
@@ -84,14 +85,16 @@ function HeaderLayout({ children }: React.PropsWithChildren) {
 
 function MobileNavigation({
   workspace,
+  cart,
 }: {
   workspace: Awaited<ReturnType<typeof loadUserWorkspace>>;
+  cart: StoreCart | null;
 }) {
   return (
     <>
       <AppLogo />
 
-      <HomeMobileNavigation workspace={workspace} />
+      <HomeMobileNavigation workspace={workspace} cart={cart} />
     </>
   );
 }

app/home/(user)/_components/home-menu-navigation.tsx

@@ -46,7 +46,7 @@ export async function HomeMenuNavigation(props: { workspace: UserWorkspace, cart
         <Link href='/home/cart'>
           <Button variant="ghost" className='relative px-4 py-2 h-10 border-1 mr-0 cursor-pointer' >
             <ShoppingCart className="stroke-[1.5px]" />
-            <Trans i18nKey="common:shoppingCart" /> ({hasCartItems ? cartItemsCount : 0})
+            <Trans i18nKey="common:shoppingCartCount" values={{ count: cartItemsCount }} />
           </Button>
         </Link>
         <UserNotifications userId={user.id} />

app/home/(user)/_components/home-mobile-navigation.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 
-import { LogOut, Menu } from 'lucide-react';
+import { LogOut, Menu, ShoppingCart } from 'lucide-react';
 
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import {
@@ -16,6 +16,7 @@ import {
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
+import { StoreCart } from '@medusajs/types';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
@@ -24,7 +25,7 @@ import { personalAccountNavigationConfig } from '~/config/personal-account-navig
 import { HomeAccountSelector } from '../_components/home-account-selector';
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 
-export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
+export function HomeMobileNavigation(props: { workspace: UserWorkspace, cart: StoreCart | null }) {
   const signOut = useSignOut();
 
   const Links = personalAccountNavigationConfig.routes.map((item, index) => {
@@ -46,6 +47,10 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
     }
   });
 
+
+  const cartItemsCount = props.cart?.items?.length ?? 0;
+  const hasCartItems = cartItemsCount > 0;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -69,6 +74,18 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
           <DropdownMenuSeparator />
         </If>
 
+        <If condition={props.cart && hasCartItems}>
+          <DropdownMenuGroup>
+            <DropdownLink
+              path="/home/cart"
+              label="common:shoppingCartCount"
+              Icon={<ShoppingCart className="stroke-[1.5px]" />}
+              labelOptions={{ count: cartItemsCount }}
+            />
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+        </If>
+
         <DropdownMenuGroup>{Links}</DropdownMenuGroup>
 
         <DropdownMenuSeparator />
@@ -83,6 +100,7 @@ function DropdownLink(
   props: React.PropsWithChildren<{
     path: string;
     label: string;
+    labelOptions?: Record<string, any>;
     Icon: React.ReactNode;
   }>,
 ) {
@@ -95,7 +113,7 @@ function DropdownLink(
         {props.Icon}
 
         <span>
-          <Trans i18nKey={props.label} defaults={props.label} />
+          <Trans i18nKey={props.label} defaults={props.label} values={props.labelOptions} />
         </span>
       </Link>
     </DropdownMenuItem>

public/locales/en/common.json

@@ -58,6 +58,7 @@
   "back": "Back",
   "welcome": "Welcome",
   "shoppingCart": "Shopping cart",
+  "shoppingCartCount": "Shopping cart ({{count}})",
   "search": "Search{{end}}",
   "myActions": "My actions",
   "healthPackageComparison": {

public/locales/et/common.json

@@ -58,6 +58,7 @@
   "back": "Back",
   "welcome": "Tere tulemast",
   "shoppingCart": "Ostukorv",
+  "shoppingCartCount": "Ostukorv ({{count}})",
   "search": "Otsi{{end}}",
   "myActions": "Minu toimingud",
   "healthPackageComparison": {