@evenicanpm/storefront-core 1.0.3 → 1.0.5

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";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
 
-// ==============================================================
-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

@@ -4,9 +4,9 @@ import Box from "@mui/material/Box";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 // LOCAL CUSTOM COMPONENTS
-import ColumnList from "./column-list";
+import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
 // DATA TYPE
-import { CategoryItemOffer } from "../types";
+import { CategoryItemOffer } from "@evenicanpm/storefront-core/src/components-v2/categories/types";
 import { CategoryHierarchy } from "@/lib/category-helpers";
 
 // =========================================================
@@ -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

@@ -1,9 +1,9 @@
 // LOCAL CUSTOM COMPONENTS
-import OfferBanner from "./banner";
-import ColumnList from "./column-list";
-import CategoryMenuItem from "../category-list-item/index";
+import OfferBanner from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/banner";
+import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
+import CategoryMenuItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
 // STYLED COMPONENT
-import { StyledRoot } from "./styles";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
 // DATA TYPE
 import { CategoryHierarchy } from "@/lib/category-helpers";
 
@@ -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/flex-box/index.ts

@@ -1,5 +1,5 @@
-import FlexBox from "./flex-box";
-import FlexBetween from "./flex-between";
-import FlexRowCenter from "./flex-row-center";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
 
 export { FlexBox, FlexBetween, FlexRowCenter };

package/src/components-v2/header/{components → __tests__}/user.test.tsx

@@ -1,24 +1,32 @@
-/*
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { useSession } from "next-auth/react";
 import { NextIntlClientProvider } from "next-intl";
 import { vi } from "vitest";
-import User from "./user";
-import { msalInstance } from "@/lib/auth/msal";
-import signOut from "@/lib/auth/signout";
+import Header from "@evenicanpm/storefront-core/src/components-v2/header/header";
+import signOut from "@evenicanpm/storefront-core/src/auth/signout";
 
-vi.mock("@/services | update | bd/session/mutations/session-init", () => ({
-  default: () => ({ mutateAsync: vi.fn() }),
-}));
+vi.mock(
+  "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init",
+  () => ({
+    default: () => ({ mutateAsync: vi.fn() }),
+  }),
+);
 
 const mockMutate = vi.fn().mockResolvedValue({});
-vi.mock("@/services | update | bd/user/mutations/update-user", () => ({
-  default: () => ({ mutateAsync: mockMutate }),
-}));
+const mockHandleRedirectPromise = vi.fn().mockResolvedValue(null);
+vi.mock(
+  "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user",
+  () => ({
+    default: () => ({ mutateAsync: mockMutate }),
+  }),
+);
 
-vi.mock("@/services | update | bd/session/mutations/session-logout", () => ({
-  default: () => ({ mutateAsync: vi.fn() }),
-}));
+vi.mock(
+  "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout",
+  () => ({
+    default: () => ({ mutateAsync: vi.fn() }),
+  }),
+);
 
 vi.mock("next/navigation", () => ({
   useRouter: () => ({
@@ -32,19 +40,19 @@ vi.mock("next-auth/react", () => ({
   signIn: vi.fn(),
 }));
 
-vi.mock("@/lib/auth/msal", () => ({
-  msalInstance: {
-    handleRedirectPromise: vi.fn().mockResolvedValue(null),
-  },
+vi.mock("@evenicanpm/storefront-core/src/auth/msal", () => ({
+  getMsalInstance: () => ({
+    handleRedirectPromise: mockHandleRedirectPromise,
+  }),
   initializeMsal: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock("@/lib/auth/signout", () => ({
+vi.mock("@evenicanpm/storefront-core/src/auth/signout", () => ({
   default: vi.fn(),
 }));
 
 describe("User Component", async () => {
-  const messages = (await import("@/../messages/en-USon")).default;
+  const messages = (await import("@messages/en-US.json")).default;
 
   it("renders login button when user is not authenticated", () => {
     (useSession as jest.Mock).mockReturnValue({
@@ -54,7 +62,9 @@ describe("User Component", async () => {
 
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
-        <User />
+        <Header className="">
+          <Header.User />
+        </Header>
       </NextIntlClientProvider>,
     );
 
@@ -72,7 +82,9 @@ describe("User Component", async () => {
 
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
-        <User />
+        <Header>
+          <Header.User />
+        </Header>
       </NextIntlClientProvider>,
     );
 
@@ -88,7 +100,11 @@ describe("User Component", async () => {
       status: "authenticated",
     });
 
-    render(<User />);
+    render(
+      <Header>
+        <Header.User />
+      </Header>,
+    );
 
     expect(signOut).toHaveBeenCalled();
   });
@@ -103,7 +119,9 @@ describe("User Component", async () => {
 
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
-        <User />
+        <Header>
+          <Header.User />
+        </Header>
       </NextIntlClientProvider>,
     );
 
@@ -126,7 +144,7 @@ describe("User Component", async () => {
       status: "authenticated",
     });
 
-    vi.mocked(msalInstance.handleRedirectPromise).mockResolvedValue({
+    vi.mocked(mockHandleRedirectPromise).mockResolvedValue({
       authority: "https://login.microsoftonline.com/some_authority",
       uniqueId: "some_unique_id",
       tenantId: "some_tenant_id",
@@ -152,7 +170,9 @@ describe("User Component", async () => {
 
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
-        <User />
+        <Header>
+          <Header.User />
+        </Header>
       </NextIntlClientProvider>,
     );
 
@@ -178,23 +198,25 @@ describe("User Component", async () => {
       status: "authenticated",
     });
 
-    vi.mocked(msalInstance.handleRedirectPromise).mockRejectedValue(
+    vi.mocked(mockHandleRedirectPromise).mockRejectedValue(
       new Error("MSAL Error"),
     );
 
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
-        <User />
+        <Header>
+          <Header.User />
+        </Header>
       </NextIntlClientProvider>,
     );
 
     await waitFor(() =>
       expect(consoleErrorSpy).toHaveBeenCalledWith(
-        "MSAL Redirect Handling Error:",
+        "MSAL redirect error:",
         expect.any(Error),
       ),
     );
 
     consoleErrorSpy.mockRestore();
   });
-});*/
+});

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 User from "./user";
+import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
+import User from "@evenicanpm/storefront-core/src/components-v2/header/components/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 useHeader from "@evenicanpm/storefront-core/src/components-v2/header/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;