@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,14 +1,16 @@
+// @refresh reset
 "use client";
+
+import React, { createContext, useContext } from "react";
 import Link from "next/link";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Avatar from "@mui/material/Avatar";
 import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
+import { CircularProgress } from "@mui/material";
 import Add from "@mui/icons-material/Add";
 import Close from "@mui/icons-material/Close";
 import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
   H6,
@@ -16,132 +18,188 @@ import {
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { CartLine } from "@/schemas/cart.schema";
 import { useFormatter, useTranslations } from "next-intl";
-import { CircularProgress } from "@mui/material";
 import { getProductDetailUrl } from "@/lib/build-product-detail-url";
 
-// ==============================================================
-interface Props {
+interface MiniCartItemContextValue {
   item: CartLine;
   handleCartAmountChange: (cartLine: CartLine) => void;
   isLineUpdating: boolean;
   closeDrawer: () => void;
 }
-// ==============================================================
 
-const MiniCartItem: React.FC<Props> = ({
-  closeDrawer,
+const MiniCartItemContext = createContext<MiniCartItemContextValue | null>(
+  null,
+);
+
+export interface MiniCartItemProps {
+  item: CartLine;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  isLineUpdating: boolean;
+  closeDrawer: () => void;
+  children: React.ReactNode;
+}
+
+const MiniCartItem = ({
+  item,
   handleCartAmountChange,
   isLineUpdating,
-  item,
-}) => {
-  const { number } = useFormatter();
-  const t = useTranslations("Cart.CartLine");
-  const currency = (value: number) =>
-    number(value, { style: "currency", currency: "USD" });
-  const quantity = item.Quantity || 0;
-  const onIncreaseClick = () => {
-    const qty = item.Quantity || 0;
-    handleCartAmountChange({ ...item, Quantity: qty + 1 });
-  };
+  closeDrawer,
+  children,
+}: MiniCartItemProps) => {
   return (
-    <FlexBox
-      py={2}
-      px={2.5}
-      key={item.LineId}
-      alignItems="center"
-      borderBottom="1px solid"
-      borderColor="divider"
+    <MiniCartItemContext.Provider
+      value={{
+        item,
+        handleCartAmountChange,
+        isLineUpdating,
+        closeDrawer,
+      }}
     >
+      <FlexBox
+        py={2}
+        px={2.5}
+        key={item.LineId}
+        alignItems="center"
+        borderBottom="1px solid"
+        borderColor="divider"
+      >
+        {children}
+      </FlexBox>
+    </MiniCartItemContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
+
+MiniCartItem.QuantityControls = () => {
+  const ctx = useContext(MiniCartItemContext);
+  if (!ctx) return null;
+  const { item, handleCartAmountChange, isLineUpdating } = ctx;
+  const t = useTranslations("Cart.CartLine");
+  const quantity = item?.Quantity || 0;
+
+  if (isLineUpdating) {
+    return (
       <FlexBox
         minWidth={30}
         minHeight={85}
         alignItems="center"
         justifyContent="center"
       >
-        {!isLineUpdating ? (
-          <FlexBox alignItems="center" flexDirection="column">
-            <Button
-              size="small"
-              color="primary"
-              variant="outlined"
-              onClick={onIncreaseClick}
-              title={t("increaseQuantity")}
-              sx={{ height: 28, width: 28, borderRadius: 50 }}
-            >
-              <Add fontSize="small" />
-            </Button>
-
-            <H6 my="3px">{item.Quantity}</H6>
-
-            <Button
-              data-testid={"decreaseQuantity"}
-              size="small"
-              color="primary"
-              variant="outlined"
-              title={t("decreaseQuantity")}
-              disabled={item.Quantity === 1}
-              onClick={() =>
-                handleCartAmountChange({ ...item, Quantity: quantity - 1 })
-              }
-              sx={{ height: 28, width: 28, borderRadius: 50 }}
-            >
-              <Remove fontSize="small" />
-            </Button>
-          </FlexBox>
-        ) : (
-          <CircularProgress size={"10px"} color={"primary"} />
-        )}
+        <CircularProgress size={"10px"} color={"primary"} />
       </FlexBox>
+    );
+  }
 
-      <Link
-        href={item.Product ? getProductDetailUrl(item.Product) : ""}
-        onClick={() => closeDrawer()}
-      >
-        <Avatar
-          alt={item.Product?.Name}
-          src={item.Product?.PrimaryImageUrl}
-          sx={{ mx: 1, width: 75, height: 75 }}
-        />
-      </Link>
-
-      <Box
-        flex="1"
-        textOverflow="ellipsis"
-        whiteSpace="nowrap"
-        overflow="hidden"
+  return (
+    <FlexBox
+      minWidth={30}
+      minHeight={85}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+    >
+      <Button
+        size="small"
+        color="primary"
+        variant="outlined"
+        onClick={() =>
+          handleCartAmountChange({ ...item, Quantity: quantity + 1 })
+        }
+        title={t("increaseQuantity")}
+        sx={{ height: 28, width: 28, borderRadius: 50 }}
       >
-        <Link
-          href={item.Product ? getProductDetailUrl(item.Product) : ""}
-          onClick={() => closeDrawer()}
-        >
-          <H6 ellipsis className="title">
-            {item.Product?.Name}
-          </H6>
-        </Link>
-        <H6 color="grey.600" mt={0.5}>
-          {item?.Product?.Dimensions?.map((d, i) => (
-            <span key={i}>{d?.DimensionValue?.Value + " "}</span>
-          ))}
-        </H6>
-        <Tiny color="grey.600">
-          {currency(item.Price || 0)} x {quantity}
-        </Tiny>
+        <Add fontSize="small" />
+      </Button>
 
-        <H6 color="primary.main" mt={0.5}>
-          {currency(item.TotalAmount || 0)}
-        </H6>
-      </Box>
+      <H6 my="3px">{quantity}</H6>
 
-      <IconButton
+      <Button
+        data-testid={"decreaseQuantity"}
         size="small"
-        onClick={() => handleCartAmountChange({ ...item, Quantity: 0 })}
-        sx={{ marginLeft: 2.5 }}
-        title={t("removeItem")}
+        color="primary"
+        variant="outlined"
+        title={t("decreaseQuantity")}
+        disabled={quantity === 1}
+        onClick={() =>
+          handleCartAmountChange({ ...item, Quantity: quantity - 1 })
+        }
+        sx={{ height: 28, width: 28, borderRadius: 50 }}
       >
-        <Close fontSize="small" />
-      </IconButton>
+        <Remove fontSize="small" />
+      </Button>
     </FlexBox>
   );
 };
 
+MiniCartItem.ProductImage = () => {
+  const ctx = useContext(MiniCartItemContext);
+  if (!ctx) return null;
+  const { item, closeDrawer } = ctx;
+  return (
+    <Link
+      href={item?.Product ? getProductDetailUrl(item?.Product) : ""}
+      onClick={closeDrawer}
+    >
+      <Avatar
+        alt={item?.Product?.Name}
+        src={item?.Product?.PrimaryImageUrl}
+        sx={{ mx: 1, width: 75, height: 75 }}
+      />
+    </Link>
+  );
+};
+
+MiniCartItem.ProductDetails = () => {
+  const { number } = useFormatter();
+  const currency = (value: number) =>
+    number(value, { style: "currency", currency: "USD" });
+
+  const ctx = useContext(MiniCartItemContext);
+  if (!ctx) return null;
+  const { item, closeDrawer } = ctx;
+  const quantity = item?.Quantity || 0;
+
+  return (
+    <Box flex="1" textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden">
+      <Link
+        href={item?.Product ? getProductDetailUrl(item?.Product) : ""}
+        onClick={closeDrawer}
+      >
+        <H6 ellipsis className="title">
+          {item?.Product?.Name}
+        </H6>
+      </Link>
+      <H6 color="grey.600" mt={0.5}>
+        {item?.Product?.Dimensions?.map((d, i) => (
+          <span key={i}>{d?.DimensionValue?.Value + " "}</span>
+        ))}
+      </H6>
+      <Tiny color="grey.600">
+        {currency(item?.Price || 0)} x {quantity}
+      </Tiny>
+      <H6 color="primary.main" mt={0.5}>
+        {currency(item?.TotalAmount || 0)}
+      </H6>
+    </Box>
+  );
+};
+
+MiniCartItem.RemoveButton = () => {
+  const ctx = useContext(MiniCartItemContext);
+  if (!ctx) return null;
+  const { item, handleCartAmountChange } = ctx;
+  const t = useTranslations("Cart.CartLine");
+  return (
+    <IconButton
+      size="small"
+      onClick={() => handleCartAmountChange({ ...item, Quantity: 0 })}
+      sx={{ marginLeft: 2.5 }}
+      title={t("removeItem")}
+    >
+      <Close fontSize="small" />
+    </IconButton>
+  );
+};
+
 export default MiniCartItem;

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

@@ -1,29 +1,69 @@
-// GLOBAL CUSTOM COMPONENTS
+"use client";
+
+import React, { createContext, useContext } from "react";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
+import { MdShoppingBag as ShoppingBagIcon } from "react-icons/md";
+
+interface EmptyCartContextValue {
+  message: string;
+}
 
-import { MdShoppingBag as ShoppingBag } from "react-icons/md";
+const EmptyCartContext = createContext<EmptyCartContextValue | null>(null);
 
-export default function EmptyCartView() {
+export interface EmptyCartProps {
+  message?: string;
+  children: React.ReactNode;
+}
+
+const EmptyCart = ({ message, children }: EmptyCartProps) => {
   const t = useTranslations("Cart");
   return (
-    <FlexBox
-      alignItems="center"
-      flexDirection="column"
-      justifyContent="center"
-      height="calc(100% - 74px)"
+    <EmptyCartContext.Provider
+      value={{ message: message || t("emptyCartMsg") }}
     >
-      <ShoppingBag />
-      <Paragraph
-        fontSize={15}
-        mt={2}
-        color="grey.600"
-        textAlign="center"
-        maxWidth={200}
+      <FlexBox
+        alignItems="center"
+        flexDirection="column"
+        justifyContent="center"
+        height="calc(100% - 74px)"
       >
-        {t("emptyCartMsg")}
-      </Paragraph>
-    </FlexBox>
+        {children}
+      </FlexBox>
+    </EmptyCartContext.Provider>
   );
-}
+};
+
+/* ---------- Subcomponents ---------- */
+
+EmptyCart.Icon = ({ size = "3rem" }: { size?: string }) => {
+  return <ShoppingBagIcon style={{ fontSize: size }} />;
+};
+
+EmptyCart.Message = ({
+  fontSize = 15,
+  color = "grey.600",
+  maxWidth = 200,
+}: {
+  fontSize?: number;
+  color?: string;
+  maxWidth?: number;
+}) => {
+  const ctx = useContext(EmptyCartContext);
+  if (!ctx) return null;
+  const { message } = ctx;
+  return (
+    <Paragraph
+      fontSize={fontSize}
+      mt={2}
+      color={color}
+      textAlign="center"
+      maxWidth={maxWidth}
+    >
+      {message}
+    </Paragraph>
+  );
+};
+
+export default EmptyCart;

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/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 "@/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;