@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/mini-cart/components/top-header.tsx

@@ -1,37 +1,76 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
 import IconButton from "@mui/material/IconButton";
-import Clear from "@mui/icons-material/Clear";
-// LOCAL CUSTOM COMPONENTS
+import ClearIcon from "@mui/icons-material/Clear";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
   FlexBetween,
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-// CUSTOM ICON COMPONENT
-import { MdOutlineShoppingBag as CartBag } from "react-icons/md";
+import { MdOutlineShoppingBag as CartBagIcon } from "react-icons/md";
 import { useTranslations } from "next-intl";
 
-// ==============================================================
-interface Props {
+interface TopHeaderContextValue {
   total: number;
   toggle: () => void;
 }
-// ==============================================================
 
-export default function TopHeader({ toggle, total }: Props) {
+const TopHeaderContext = createContext<TopHeaderContextValue | null>(null);
+
+export interface TopHeaderProps {
+  total: number;
+  toggle: () => void;
+  children: React.ReactNode;
+}
+
+const TopHeader = ({ total, toggle, children }: TopHeaderProps) => {
+  return (
+    <TopHeaderContext.Provider value={{ total, toggle }}>
+      <FlexBetween mx={3} height={74}>
+        {children}
+      </FlexBetween>
+    </TopHeaderContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
+
+TopHeader.Heading = ({
+  icon = <CartBagIcon color="inherit" />,
+}: {
+  icon?: React.ReactNode;
+}) => {
+  const ctx = useContext(TopHeaderContext);
+  if (!ctx) return null;
+  const { total } = ctx;
   const t = useTranslations("Cart");
+
   return (
-    <FlexBetween mx={3} height={74}>
-      <FlexBox gap={1} alignItems="center" color="secondary.main">
-        <CartBag color="inherit" />
-
-        <Paragraph lineHeight={0} fontWeight={600}>
-          {t("count", { count: total })}
-        </Paragraph>
-      </FlexBox>
-
-      <IconButton onClick={toggle} title={t("closeMiniCart")}>
-        <Clear />
-      </IconButton>
-    </FlexBetween>
+    <FlexBox gap={1} alignItems="center" color="secondary.main">
+      {icon}
+      <Paragraph lineHeight={0} fontWeight={600}>
+        {t("count", { count: total })}
+      </Paragraph>
+    </FlexBox>
   );
-}
+};
+
+TopHeader.CloseButton = ({
+  icon = <ClearIcon />,
+}: {
+  icon?: React.ReactNode;
+}) => {
+  const ctx = useContext(TopHeaderContext);
+  if (!ctx) return null;
+  const { toggle } = ctx;
+  const t = useTranslations("Cart");
+
+  return (
+    <IconButton onClick={toggle} title={t("closeMiniCart")}>
+      {icon}
+    </IconButton>
+  );
+};
+
+export default TopHeader;

package/src/components-v2/mini-cart/index.ts

@@ -1 +1 @@
-export { default as MiniCart } from "./mini-cart";
+export { default as MiniCart } from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart";

package/src/components-v2/mini-cart/mini-cart-trigger.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState, useContext, createContext } from "react";
+import { Badge, Drawer, IconButton } from "@mui/material";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { MiniCart } from "@evenicanpm/storefront-core/src/components-v2/mini-cart/index";
+
+const BADGE_STYLES = {
+  "& .MuiBadge-badge": {
+    fontSize: { xs: "0.625rem", md: "0.75rem" }, // ~10px, 12px
+    minWidth: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+    height: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+  },
+};
+
+const ICON_BUTTON_STYLES = {
+  minWidth: { xs: "2.25rem", md: "2.5rem" }, // 36px, 40px
+  minHeight: { xs: "2.25rem", md: "2.5rem" },
+};
+
+interface MiniCartTriggerContextValue {
+  cart: Cart;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const MiniCartTriggerContext =
+  createContext<MiniCartTriggerContextValue | null>(null);
+
+interface MiniCartTriggerProps {
+  cart: Cart;
+  children: React.ReactNode;
+}
+
+const MiniCartTrigger = ({ cart, children }: MiniCartTriggerProps) => {
+  const [open, setOpen] = useState(false);
+  const { alert } = useNotification();
+
+  const SHOULD_OPEN_MINICART_ON_ADD = true; // Move to config
+
+  React.useEffect(() => {
+    if (alert?.type === "cart" && SHOULD_OPEN_MINICART_ON_ADD) {
+      setOpen(true);
+    }
+  }, [alert, SHOULD_OPEN_MINICART_ON_ADD]);
+
+  return (
+    <MiniCartTriggerContext.Provider value={{ cart, open, setOpen }}>
+      {children}
+    </MiniCartTriggerContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
+
+MiniCartTrigger.Badge = ({ children }: { children: React.ReactNode }) => {
+  const ctx = useContext(MiniCartTriggerContext);
+  if (!ctx) return null;
+  const { cart } = ctx;
+  return (
+    <Badge
+      badgeContent={cart?.TotalItems || 0}
+      color="primary"
+      sx={BADGE_STYLES}
+    >
+      {children}
+    </Badge>
+  );
+};
+
+MiniCartTrigger.Button = ({ children }: { children: React.ReactNode }) => {
+  const ctx = useContext(MiniCartTriggerContext);
+  if (!ctx) return null;
+  const { setOpen } = ctx;
+  return (
+    <IconButton sx={ICON_BUTTON_STYLES} onClick={() => setOpen(true)}>
+      {children}
+    </IconButton>
+  );
+};
+
+MiniCartTrigger.Drawer = () => {
+  const ctx = useContext(MiniCartTriggerContext);
+  if (!ctx) return null;
+  const { cart, open, setOpen } = ctx;
+  return (
+    <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
+      <MiniCart cart={cart} closeDrawer={() => setOpen(false)}>
+        <MiniCart.Header />
+        <MiniCart.Divider />
+        <MiniCart.Items />
+        <MiniCart.Actions />
+      </MiniCart>
+    </Drawer>
+  );
+};
+
+export default MiniCartTrigger;

package/src/components-v2/mini-cart/mini-cart.tsx

@@ -1,40 +1,60 @@
 "use client";
 
+import React, { createContext, useContext } from "react";
 import { useRouter } from "next/navigation";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 
-// LOCAL CUSTOM COMPONENTS
-import TopHeader from "./components/top-header";
-import MiniCartItem from "./components/cart-item";
-import EmptyCartView from "./components/empty-view";
-import BottomActions from "./components/bottom-actions";
-// GLOBAL CUSTOM COMPONENT
 import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
-// CUSTOM UTILS LIBRARY FUNCTION
-// CUSTOM DATA MODEL
+import TopHeader from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/top-header";
+import MiniCartItem from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/cart-item";
+import EmptyCart from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/empty-view";
+import BottomActions from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/bottom-actions";
+
 import { Cart, CartLine } from "@/schemas/cart.schema";
 import { useFormatter } from "next-intl";
-import useUpdateCartLines from "@/services/cart/mutations/update-cart-lines";
-import useDeleteCartLine from "@/services/cart/mutations/delete-cart-line";
+import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
+import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
+
+interface MiniCartContextValue {
+  cart: Cart;
+  closeDrawer: () => void;
+  currency: (value: number) => string;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  shouldShowLoadingSpinner: (lineId: string) => boolean;
+  handleNavigate: (path: string) => () => void;
+}
+
+const MiniCartContext = createContext<MiniCartContextValue | null>(null);
+
+const useMiniCartContext = () => {
+  const ctx = useContext(MiniCartContext);
+  if (!ctx) {
+    throw new Error(
+      "MiniCart compound components must be used inside <MiniCart>",
+    );
+  }
+  return ctx;
+};
 
-// =========================================================
 export interface MiniCartProps {
   cart: Cart;
   closeDrawer: () => void;
+  children: React.ReactNode;
 }
-// =========================================================
 
-export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
+const MiniCart = ({ cart, closeDrawer, children }: MiniCartProps) => {
   const { push } = useRouter();
   const { number } = useFormatter();
   const currency = (value: number) =>
     number(value, { style: "currency", currency: "USD" });
+
   const {
     mutate: updateLine,
     isPending: isUpdatePending,
     variables: updateVariables,
   } = useUpdateCartLines();
+
   const {
     mutate: deleteLine,
     isPending: isDeletePending,
@@ -63,45 +83,93 @@ export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
   };
 
   const handleNavigate = (path: string) => () => {
-    // toggleSidenav();
     push(path);
   };
 
   return (
-    <Box width="100%" minWidth={380}>
-      {/* HEADING SECTION */}
-      <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0} />
-
-      <Divider />
-
-      <Box
-        height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}
-      >
-        {/* CART ITEM LIST */}
-        {cart.CartLines.length > 0 ? (
-          <Scrollbar>
-            {cart?.CartLines?.map((item) => (
-              <MiniCartItem
-                item={item}
-                key={item.LineId}
-                handleCartAmountChange={handleCartAmountChange}
-                isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
-                closeDrawer={closeDrawer}
-              />
-            ))}
-          </Scrollbar>
-        ) : (
-          <EmptyCartView />
-        )}
+    <MiniCartContext.Provider
+      value={{
+        cart,
+        closeDrawer,
+        currency,
+        handleCartAmountChange,
+        shouldShowLoadingSpinner,
+        handleNavigate,
+      }}
+    >
+      <Box width="100%" minWidth={380}>
+        {children}
       </Box>
+    </MiniCartContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
 
-      {/* CART BOTTOM ACTION BUTTONS */}
-      {cart?.CartLines.length > 0 ? (
-        <BottomActions
-          total={currency(cart?.TotalAmount || 0)}
-          handleNavigate={handleNavigate}
-        />
-      ) : null}
+MiniCart.Header = () => {
+  const { cart, closeDrawer } = useMiniCartContext();
+  return (
+    <TopHeader toggle={closeDrawer} total={cart?.CartLines?.length || 0}>
+      <TopHeader.Heading />
+      <TopHeader.CloseButton />
+    </TopHeader>
+  );
+};
+
+MiniCart.Divider = () => {
+  return <Divider />;
+};
+
+MiniCart.Items = () => {
+  const {
+    cart,
+    handleCartAmountChange,
+    shouldShowLoadingSpinner,
+    closeDrawer,
+  } = useMiniCartContext();
+
+  return (
+    <Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
+      {cart.CartLines.length > 0 ? (
+        <Scrollbar>
+          {cart?.CartLines?.map((item) => (
+            <MiniCartItem
+              item={item}
+              key={item.LineId}
+              handleCartAmountChange={handleCartAmountChange}
+              isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
+              closeDrawer={closeDrawer}
+            >
+              <MiniCartItem.QuantityControls />
+              <MiniCartItem.ProductImage />
+              <MiniCartItem.ProductDetails />
+              <MiniCartItem.RemoveButton />
+            </MiniCartItem>
+          ))}
+        </Scrollbar>
+      ) : (
+        <EmptyCart>
+          <EmptyCart.Icon />
+          <EmptyCart.Message />
+        </EmptyCart>
+      )}
     </Box>
   );
-}
+};
+
+MiniCart.Actions = () => {
+  const { cart, currency, handleNavigate } = useMiniCartContext();
+  return cart?.CartLines.length > 0 ? (
+    <BottomActions
+      total={currency(cart?.TotalAmount || 0)}
+      handleNavigate={handleNavigate}
+    >
+      <BottomActions.ViewCartButton />
+      {/* <BottomActions.CustomButton path="/custom" variant="text">
+        custom button name
+      </BottomActions.CustomButton> */}
+    </BottomActions>
+  ) : null;
+};
+
+export default MiniCart;

package/src/components-v2/mobile-navigation/index.ts

@@ -1,3 +1,3 @@
-import MobileNavigationBar from "./mobile-navigation-bar";
+import MobileNavigationBar from "@evenicanpm/storefront-core/src/components-v2/mobile-navigation/mobile-navigation-bar";
 
 export { MobileNavigationBar };

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -1,73 +1,123 @@
 "use client";
 
-import { Fragment, useContext } from "react";
+import { Fragment, createContext, useContext } from "react";
 import Box from "@mui/material/Box";
 import Badge from "@mui/material/Badge";
 import { Theme } from "@mui/material/styles";
+import { SvgIconComponent } from "@mui/icons-material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
-// CUSTOM ICON COMPONENTS
+// STYLED COMPONENTS
+import {
+  iconStyle,
+  StyledBox,
+  StyledNavLink,
+  Wrapper,
+} from "@evenicanpm/storefront-core/src/components-v2/mobile-navigation/styles/index";
+// ICON COMPONENTS
 import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
 import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
 import CategoryOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/category-outline";
 import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/shopping-bag-outlined";
-// STYLED COMPONENTS
-import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
+// API and Context
 import getCart from "@/services/cart/queries/get-cart";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 
-const MENU_LIST = [
-  { title: "home", Icon: Home, href: "/" },
-  { title: "category", Icon: CategoryOutlined },
-  { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
-  { title: "account", Icon: User2, href: "/account/profile" },
-];
+/**
+Usage Examples:
+
+*** Default Menu:
+<MobileNavigationBar />
+
+*** Override Menu List:
+<MobileNavigationBar
+  menuList={[
+    { title: "home", Icon: Home, href: "/" },
+    { title: "custom", Icon: SomeOtherIcon, href: "/custom" },
+  ]}
+/>
+
+*** Custom Menu Content (Full Control):
+<MobileNavigationBar>
+  <MobileNavigationBar.MenuItem title="home" Icon={Home} href="/" />
+  <MobileNavigationBar.MenuItem title="custom" Icon={SomeOtherIcon} href="/custom" />
+</MobileNavigationBar>
+ */
 
-export default function MobileNavigationBar2() {
+type MenuItemProps = {
+  title: string;
+  Icon: SvgIconComponent;
+  href?: string;
+};
+
+type MobileNavigationBarProps = {
+  children?: React.ReactNode;
+  menuList?: MenuItemProps[];
+};
+
+const MobileNavContext = createContext<{ menuList: MenuItemProps[] }>({
+  menuList: [],
+});
+
+export default function MobileNavigationBar({
+  children,
+  menuList,
+}: MobileNavigationBarProps) {
   const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
 
-  const t = useTranslations("Navigation.Mobile");
+  const defaultMenuList: MenuItemProps[] = [
+    { title: "home", Icon: Home, href: "/" },
+    { title: "category", Icon: CategoryOutlined },
+    { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
+    { title: "account", Icon: User2, href: "/account/profile" },
+  ];
 
-  const { toggleMobileSideNav } = useContext(NavContext);
+  const listToRender = menuList || defaultMenuList;
 
-  const { data: cart } = getCart.useData();
+  if (!DOWN_900) return null;
 
-  if (DOWN_900) {
-    return (
+  return (
+    <MobileNavContext.Provider value={{ menuList: listToRender }}>
       <Box position="relative" display="flex" flexDirection="column">
         <Wrapper>
-          {MENU_LIST.map(({ Icon, title, href }) => {
-            // Link inner content
-            const ICON = <Icon sx={iconStyle} fontSize="small" />;
-
-            const CONTENT = (
-              <Fragment>
-                {title === "cart" ? (
-                  <Badge badgeContent={cart?.TotalItems || 0} color="primary">
-                    {ICON}
-                  </Badge>
-                ) : (
-                  ICON
-                )}
-
-                {t(title)}
-              </Fragment>
-            );
-
-            return href ? (
-              <StyledNavLink key={title} href={href}>
-                {CONTENT}
-              </StyledNavLink>
-            ) : (
-              <StyledBox key={title} onClick={toggleMobileSideNav}>
-                {CONTENT}
-              </StyledBox>
-            );
-          })}
+          {children ??
+            listToRender.map((item) => (
+              <MobileNavigationBar.MenuItem key={item.title} {...item} />
+            ))}
         </Wrapper>
       </Box>
-    );
-  }
-
-  return null;
+    </MobileNavContext.Provider>
+  );
 }
+
+MobileNavigationBar.MenuItem = function MenuItem({
+  title,
+  Icon,
+  href,
+}: MenuItemProps) {
+  const { toggleMobileSideNav } = useContext(NavContext);
+  const t = useTranslations("Navigation.Mobile");
+  const { data: cart } = getCart.useData();
+
+  const iconEl = <Icon sx={iconStyle} fontSize="small" />;
+  const isCart = title === "cart";
+
+  const content = (
+    <Fragment>
+      {isCart ? (
+        <Badge badgeContent={cart?.TotalItems || 0} color="primary">
+          {iconEl}
+        </Badge>
+      ) : (
+        iconEl
+      )}
+      {t(title)}
+    </Fragment>
+  );
+
+  return href ? (
+    <StyledNavLink href={href}>{content}</StyledNavLink>
+  ) : (
+    <StyledBox onClick={toggleMobileSideNav}>{content}</StyledBox>
+  );
+};

package/src/components-v2/nav-link/index.ts

@@ -1,5 +1,5 @@
-import NavLink from "./nav-link";
-import NavLink2 from "./nav-link-2";
-import NavLink3 from "./nav-link-3";
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+import NavLink2 from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link-2";
+import NavLink3 from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link-3";
 
 export { NavLink, NavLink2, NavLink3 };