@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,81 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import Box from "@mui/material/Box";
+import Button, { ButtonProps } from "@mui/material/Button";
+import { useTranslations } from "next-intl";
+
+interface BottomActionsContextValue {
+  total: string;
+  handleNavigate: (path: string) => () => void;
+}
+
+const BottomActionsContext = createContext<BottomActionsContextValue | null>(
+  null,
+);
+
+export interface BottomActionsProps {
+  total: string;
+  handleNavigate: (path: string) => () => void;
+  children: React.ReactNode;
+}
+
+const BottomActions = ({
+  total,
+  handleNavigate,
+  children,
+}: BottomActionsProps) => {
+  return (
+    <BottomActionsContext.Provider value={{ total, handleNavigate }}>
+      <Box p={2.5} display="flex" flexDirection="column" gap={1}>
+        {children}
+      </Box>
+    </BottomActionsContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
+
+BottomActions.ViewCartButton = function ViewCartButton(
+  props: Omit<ButtonProps, "onClick" | "children">,
+) {
+  const ctx = useContext(BottomActionsContext);
+  if (!ctx) return null;
+  const { total, handleNavigate } = ctx;
+  const t = useTranslations("Cart");
+  return (
+    <Button
+      fullWidth
+      color="primary"
+      variant="outlined"
+      sx={{ height: 40 }}
+      onClick={handleNavigate("/cart")}
+      {...props}
+    >
+      {t("viewCartBtn", { total })}
+    </Button>
+  );
+};
+
+BottomActions.CustomButton = function CustomButton({
+  path,
+  children,
+  ...props
+}: { path: string } & Omit<ButtonProps, "onClick">) {
+  const ctx = useContext(BottomActionsContext);
+  if (!ctx) return null;
+  const { handleNavigate } = ctx;
+  return (
+    <Button
+      fullWidth
+      variant="contained"
+      sx={{ height: 40 }}
+      onClick={handleNavigate(path)}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};
+
+export default BottomActions;

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

@@ -0,0 +1,205 @@
+// @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";
+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";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import {
+  H6,
+  Tiny,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { CartLine } from "@/schemas/cart.schema";
+import { useFormatter, useTranslations } from "next-intl";
+import { getProductDetailUrl } from "@/lib/build-product-detail-url";
+
+interface MiniCartItemContextValue {
+  item: CartLine;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  isLineUpdating: boolean;
+  closeDrawer: () => void;
+}
+
+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,
+  closeDrawer,
+  children,
+}: MiniCartItemProps) => {
+  return (
+    <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"
+      >
+        <CircularProgress size={"10px"} color={"primary"} />
+      </FlexBox>
+    );
+  }
+
+  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 }}
+      >
+        <Add fontSize="small" />
+      </Button>
+
+      <H6 my="3px">{quantity}</H6>
+
+      <Button
+        data-testid={"decreaseQuantity"}
+        size="small"
+        color="primary"
+        variant="outlined"
+        title={t("decreaseQuantity")}
+        disabled={quantity === 1}
+        onClick={() =>
+          handleCartAmountChange({ ...item, Quantity: quantity - 1 })
+        }
+        sx={{ height: 28, width: 28, borderRadius: 50 }}
+      >
+        <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

@@ -0,0 +1,69 @@
+"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;
+}
+
+const EmptyCartContext = createContext<EmptyCartContextValue | null>(null);
+
+export interface EmptyCartProps {
+  message?: string;
+  children: React.ReactNode;
+}
+
+const EmptyCart = ({ message, children }: EmptyCartProps) => {
+  const t = useTranslations("Cart");
+  return (
+    <EmptyCartContext.Provider
+      value={{ message: message || t("emptyCartMsg") }}
+    >
+      <FlexBox
+        alignItems="center"
+        flexDirection="column"
+        justifyContent="center"
+        height="calc(100% - 74px)"
+      >
+        {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

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import IconButton from "@mui/material/IconButton";
+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";
+import { MdOutlineShoppingBag as CartBagIcon } from "react-icons/md";
+import { useTranslations } from "next-intl";
+
+interface TopHeaderContextValue {
+  total: number;
+  toggle: () => void;
+}
+
+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 (
+    <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

@@ -0,0 +1 @@
+export { default as MiniCart } from "./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 "@/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

@@ -0,0 +1,175 @@
+"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";
+
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import TopHeader from "./components/top-header";
+import MiniCartItem from "./components/cart-item";
+import EmptyCart from "./components/empty-view";
+import BottomActions from "./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";
+
+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;
+}
+
+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,
+    variables: deleteVariables,
+  } = useDeleteCartLine();
+
+  const shouldShowLoadingSpinner = (lineId: string) =>
+    (isUpdatePending || isDeletePending) &&
+    (updateVariables?.cartLine[0].LineId === lineId ||
+      deleteVariables?.cartLine[0].LineId === lineId);
+
+  const handleCartAmountChange = (cartLine: CartLine) => {
+    if (cartLine.Quantity === 0) {
+      deleteLine({
+        cartLine: [cartLine],
+        cartId: cart.Id,
+        version: cart.Version,
+      });
+      return;
+    }
+    updateLine({
+      cartLine: [cartLine],
+      cartId: cart.Id,
+      version: cart.Version,
+    });
+  };
+
+  const handleNavigate = (path: string) => () => {
+    push(path);
+  };
+
+  return (
+    <MiniCartContext.Provider
+      value={{
+        cart,
+        closeDrawer,
+        currency,
+        handleCartAmountChange,
+        shouldShowLoadingSpinner,
+        handleNavigate,
+      }}
+    >
+      <Box width="100%" minWidth={380}>
+        {children}
+      </Box>
+    </MiniCartContext.Provider>
+  );
+};
+
+/* ---------- Subcomponents ---------- */
+
+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;