@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/categories/mega-menu/banner.tsx

@@ -1,18 +1,24 @@
+"use client";
+
+import { ReactNode } from "react";
 import Link from "next/link";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 import {
   H3,
   Paragraph,
   Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 
-export default function OfferBanner() {
+interface RootProps {
+  href: string;
+  children?: ReactNode;
+}
+const OfferBanner = ({ href, children }: RootProps) => {
   return (
-    <Link href="/sale-page-2">
+    <Link href={href}>
       <Grid
         className="h-full"
         container
@@ -21,40 +27,65 @@ export default function OfferBanner() {
         alignItems="center"
         mb={-1}
       >
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <Box px={2.5}>
-            <H3 mb={1}>Big Sale Upto 60% Off</H3>
-
-            <Paragraph color="grey.600" mb={1}>
-              Handcrafted from genuine Italian Leather
-            </Paragraph>
-
-            <Small
-              fontWeight="700"
-              borderBottom="2px solid"
-              borderColor="primary.main"
-            >
-              SHOP NOW
-            </Small>
-          </Box>
-        </Grid>
-
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FlexBox
-            height="160px"
-            position="relative"
-            flexDirection="column"
-            justifyContent="flex-end"
-          >
-            <LazyImage
-              alt="model"
-              width={292}
-              height={195}
-              src="/assets/images/models/model-1.png"
-            />
-          </FlexBox>
-        </Grid>
+        {children}
       </Grid>
     </Link>
   );
+};
+
+interface TextProps {
+  title: string;
+  subtitle?: string;
+  ctaText?: string;
+}
+OfferBanner.Text = ({ title, subtitle, ctaText }: TextProps) => {
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <Box px={2.5}>
+        <H3 mb={1}>{title}</H3>
+        {subtitle && (
+          <Paragraph color="grey.600" mb={1}>
+            {subtitle}
+          </Paragraph>
+        )}
+        {ctaText && (
+          <Small
+            fontWeight="700"
+            borderBottom="2px solid"
+            borderColor="primary.main"
+          >
+            {ctaText}
+          </Small>
+        )}
+      </Box>
+    </Grid>
+  );
+};
+
+interface ImageProps {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
 }
+OfferBanner.Image = ({
+  src,
+  alt = "",
+  width = 292,
+  height = 195,
+}: ImageProps) => {
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FlexBox
+        height="160px"
+        position="relative"
+        flexDirection="column"
+        justifyContent="flex-end"
+      >
+        <LazyImage alt={alt} width={width} height={height} src={src} />
+      </FlexBox>
+    </Grid>
+  );
+};
+
+export default OfferBanner;

package/src/components-v2/categories/mega-menu/column-list.tsx

@@ -1,70 +1,77 @@
-import { PropsWithChildren } from "react";
+"use client";
+
+import { PropsWithChildren, ReactNode, createContext, useContext } from "react";
 import Link from "next/link";
-// MUI
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
-// STYLED COMPONENTS
 import { StyledRoot } from "./styles";
-// DATA TYPES
-import { CategoryItemOffer } from "../types";
-import { CategoryHierarchy } from "@/lib/category-helpers";
 
-// ==============================================================
-interface Props extends PropsWithChildren {
+interface RootProps extends PropsWithChildren {
   minWidth?: number;
-  list: CategoryHierarchy[];
-  banner?: CategoryItemOffer;
 }
-// ==============================================================
-
-export default function ColumnList({
-  list,
-  children,
-  banner,
-  minWidth = 760,
-}: Props) {
+const ColumnList = ({ minWidth = 760, children }: RootProps) => {
   return (
     <StyledRoot elevation={2} sx={{ minWidth }}>
-      <FlexBox px={2.5}>
-        <Box flex="1 1 0">
-          <Grid container spacing={4}>
-            {list.map((item, ind) => (
-              <Grid size={3} key={ind}>
-                <div className="title-link">{item.Name}</div>
+      <FlexBox px={2.5}>{children}</FlexBox>
+    </StyledRoot>
+  );
+};
 
-                {item.Children?.map((sub, ind) => (
-                  <NavLink
-                    className="child-link"
-                    href={`/products/${sub.Url}`}
-                    key={ind}
-                  >
-                    {sub.Name}
-                  </NavLink>
-                ))}
-              </Grid>
-            ))}
-          </Grid>
-        </Box>
+interface WrapperProps {
+  children: ReactNode;
+}
+ColumnList.Wrapper = ({ children }: WrapperProps) => {
+  return (
+    <Box flex="1 1 0">
+      <Grid container spacing={4}>
+        {children}
+      </Grid>
+    </Box>
+  );
+};
 
-        {banner?.position === "right" ? (
-          <Box mt={1.5}>
-            <Link href={banner.href}>
-              <LazyImage
-                src={banner.url}
-                width={137}
-                height={318}
-                alt="banner"
-              />
-            </Link>
-          </Box>
-        ) : null}
-      </FlexBox>
+interface ColumnProps {
+  title: string;
+  children?: ReactNode;
+}
+ColumnList.Column = ({ title, children }: ColumnProps) => {
+  return (
+    <Grid size={3}>
+      <div className="title-link">{title}</div>
+      {children}
+    </Grid>
+  );
+};
 
+interface LinkProps {
+  href: string;
+  children: ReactNode;
+}
+ColumnList.Link = ({ href, children }: LinkProps) => {
+  return (
+    <NavLink className="child-link" href={href}>
       {children}
-    </StyledRoot>
+    </NavLink>
   );
+};
+
+interface BannerProps {
+  href: string;
+  url: string;
+  width?: number;
+  height?: number;
 }
+ColumnList.Banner = ({ href, url, width = 137, height = 318 }: BannerProps) => {
+  return (
+    <Box mt={1.5}>
+      <Link href={href}>
+        <LazyImage src={url} width={width} height={height} alt="banner" />
+      </Link>
+    </Box>
+  );
+};
+
+export default ColumnList;

package/src/components-v2/categories/mega-menu/mega-menu-1.tsx

@@ -17,9 +17,27 @@ interface Props {
 }
 // =========================================================
 
+// MegaMenu1 is acting purely as a configuration/wiring component,
+// not as a reusable UI element that needs further extensibility.
 export default function MegaMenu1({ banner, data }: Props) {
   return (
-    <ColumnList list={data} banner={banner}>
+    <ColumnList>
+      <ColumnList.Wrapper>
+        {data.map((item) => (
+          <ColumnList.Column key={item.RecordId} title={item.Name}>
+            {item.Children?.map((sub) => (
+              <ColumnList.Link key={sub.RecordId} href={`/products/${sub.Url}`}>
+                {sub.Name}
+              </ColumnList.Link>
+            ))}
+          </ColumnList.Column>
+        ))}
+      </ColumnList.Wrapper>
+
+      {banner?.position === "right" && (
+        <ColumnList.Banner href={banner.href} url={banner.url} />
+      )}
+
       {banner?.position === "bottom" ? (
         <Link href={banner.href}>
           <Box position="relative" height={150} width="100%">

package/src/components-v2/categories/mega-menu/mega-menu-2.tsx

@@ -13,6 +13,8 @@ interface Props {
 }
 // =======================================================================
 
+// MegaMenu2 is acting purely as a configuration/wiring component,
+// not as a reusable UI element that needs further extensibility.
 export default function MegaMenu2({ data }: Props) {
   return (
     <StyledRoot elevation={2}>
@@ -25,8 +27,36 @@ export default function MegaMenu2({ data }: Props) {
           caret={!!(item.Children && item.Children.length)}
           render={
             item.Children?.length ? (
-              <ColumnList minWidth={550} list={item.Children}>
-                <OfferBanner />
+              <ColumnList minWidth={550}>
+                <ColumnList.Wrapper>
+                  {item.Children.map((childItem) => (
+                    <ColumnList.Column
+                      key={childItem.RecordId}
+                      title={childItem.Name}
+                    >
+                      {childItem.Children?.map((sub) => (
+                        <ColumnList.Link
+                          key={sub.RecordId}
+                          href={`/products/${sub.Url}`}
+                        >
+                          {sub.Name}
+                        </ColumnList.Link>
+                      ))}
+                    </ColumnList.Column>
+                  ))}
+                </ColumnList.Wrapper>
+                {/* Sample offer banner */}
+                <OfferBanner href="/sale-page-2">
+                  <OfferBanner.Text
+                    title="Big Sale Upto 60% Off"
+                    subtitle="Handcrafted from genuine Italian Leather"
+                    ctaText="SHOP NOW"
+                  />
+                  <OfferBanner.Image
+                    src="/assets/images/models/model-1.png"
+                    alt="model"
+                  />
+                </OfferBanner>
               </ColumnList>
             ) : null
           }

package/src/components-v2/header/components/mobile-header.tsx

@@ -1,75 +1,148 @@
-import { Fragment } from "react";
+import { useContext, ReactNode, createContext } from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { useTranslations } from "next-intl";
 // CUSTOM COMPONENTS
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { SearchInput } from "@evenicanpm/storefront-core/src/components-v2/search-box/index";
 import { MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/index";
 import {
   FlexBetween,
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
-import MiniCartClient from "../../MiniCartClient";
+import MiniCartTrigger from "../../mini-cart/mini-cart-trigger";
 import User from "./user";
 // ICONS
 import { MdClear as Clear } from "react-icons/md";
 import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+import MobileCartBag from "@evenicanpm/storefront-core/src/components-v2/icons/cart-bag";
 // API
-import { Cart } from "@/schemas/cart.schema";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
 
 import useHeader from "../hooks/use-header";
+import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
+import {
+  transformCategoryNav,
+  transformCmsNav,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 
-interface Props {
-  cart: Cart;
-}
+type MobileHeaderRootProps = {
+  children: ReactNode;
+};
 
-export default function MobileHeader({ cart }: Props) {
-  const { searchBarOpen, toggleSearchBar } = useHeader();
+const MobileHeaderContext = createContext<ReturnType<typeof useHeader> | null>(
+  null,
+);
 
-  const t = useTranslations("Search");
+const MobileHeaderProvider = ({ children }: { children: React.ReactNode }) => {
+  const headerState = useHeader();
+  return (
+    <MobileHeaderContext.Provider value={headerState}>
+      {children}
+    </MobileHeaderContext.Provider>
+  );
+};
 
+const useMobileHeader = () => {
+  const ctx = useContext(MobileHeaderContext);
+  if (!ctx)
+    throw new Error("useMobileHeader must be used within MobileHeaderProvider");
+  return ctx;
+};
+
+const MobileHeader = ({ children }: MobileHeaderRootProps) => {
   return (
-    <Fragment>
-      <FlexBetween width="100%">
-        {/* Left content - navigation icon */}
-        <Box flex={1}>
-          <MobileMenu />
-        </Box>
+    <MobileHeaderProvider>
+      <FlexBetween width="100%">{children}</FlexBetween>
+    </MobileHeaderProvider>
+  );
+};
 
-        {/* Middle content - logo */}
-        <SiteLogo height="2.125rem" />
+MobileHeader.Menu = () => {
+  const { categories, cmsNav } = useContext(NavContext);
+  const categoriesNavItems = transformCategoryNav(categories ?? []);
+  const cmsNavItems = transformCmsNav(cmsNav ?? []);
+  return (
+    <Box flex={1}>
+      <MobileMenu>
+        <MobileMenu.Trigger />
+        <MobileMenu.Drawer>
+          <MobileMenu.List data={categoriesNavItems} />
+          <MobileMenu.Divider />
+          <MobileMenu.List data={cmsNavItems} />
+        </MobileMenu.Drawer>
+      </MobileMenu>
+    </Box>
+  );
+};
 
-        {/* Right content - search, account, cart icons */}
-        <FlexBox justifyContent="end" flex={1}>
-          <IconButton onClick={toggleSearchBar}>
-            <Search style={{ fontSize: "1.25rem" }} />
-          </IconButton>
-          <User mobile={true} />
-          {cart && <MiniCartClient cart={cart} mobile={true} />}
-        </FlexBox>
-      </FlexBetween>
+MobileHeader.Logo = () => {
+  return <SiteLogo height="2.125rem" />;
+};
 
-      {/* Search form drawer */}
-      <Drawer
-        open={searchBarOpen}
-        anchor="top"
-        onClose={toggleSearchBar}
-        sx={{ zIndex: 9999 }}
-      >
-        <Box width="auto" padding={2} height="100vh">
-          <FlexBetween mb={1}>
-            <Paragraph>{t("searchHeading")}</Paragraph>
-            <IconButton onClick={toggleSearchBar}>
-              <Clear />
-            </IconButton>
-          </FlexBetween>
+MobileHeader.Icons = ({ children }: { children: ReactNode }) => {
+  return (
+    <FlexBox justifyContent="end" flex={1}>
+      {children}
+    </FlexBox>
+  );
+};
 
-          <SearchInput handleCloseDrawer={toggleSearchBar} />
-        </Box>
-      </Drawer>
-    </Fragment>
+MobileHeader.User = () => {
+  return (
+    <User>
+      <User.MobileTrigger />
+    </User>
   );
-}
+};
+
+MobileHeader.Search = () => {
+  const { toggleSearchBar } = useMobileHeader();
+  return (
+    <IconButton onClick={toggleSearchBar}>
+      <Search style={{ fontSize: "1.25rem" }} />
+    </IconButton>
+  );
+};
+
+MobileHeader.Cart = () => {
+  const { data: cart } = getCart.useData();
+  return cart ? (
+    <MiniCartTrigger cart={cart}>
+      <MiniCartTrigger.Badge>
+        <MiniCartTrigger.Button>
+          <MobileCartBag style={{ fontSize: "1.25rem" }} />
+        </MiniCartTrigger.Button>
+      </MiniCartTrigger.Badge>
+      <MiniCartTrigger.Drawer />
+    </MiniCartTrigger>
+  ) : null;
+};
+
+MobileHeader.SearchDrawer = () => {
+  const { searchBarOpen, toggleSearchBar } = useMobileHeader();
+  const t = useTranslations("Search");
+
+  return (
+    <Drawer
+      open={searchBarOpen}
+      anchor="top"
+      onClose={toggleSearchBar}
+      sx={{ zIndex: 9999 }}
+    >
+      <Box width="auto" padding={2} height="100vh">
+        <FlexBetween mb={1}>
+          <Paragraph>{t("searchHeading")}</Paragraph>
+          <IconButton onClick={toggleSearchBar}>
+            <Clear />
+          </IconButton>
+        </FlexBetween>
+        <SearchBar handleCloseDrawer={toggleSearchBar} />
+      </Box>
+    </Drawer>
+  );
+};
+
+export default MobileHeader;