@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,16 +1,14 @@
-/*
 import { Cart, CartLine } from "@/schemas/cart.schema";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { setupServer } from "msw/node";
 import React from "react";
-import cartData from "./test-cart-with-itemon";
+import cartData from "./test-cart-with-item.json";
 import { NextIntlClientProvider } from "next-intl";
-import ENUS from "../../../../../messages/en-USon";
-import fr from "../../../../../messages/fron";
+import ENUS from "@messages/en-US.json";
 import CartItem from "../components/cart-item";
 import { vi } from "vitest";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/components-v2/Notifications/notification-context";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 // @ts-expect-error - We don't use the dates from this json and its not worth parsin
 const cart: Cart = cartData;
@@ -30,14 +28,6 @@ const Wrapper = ({ children }: React.PropsWithChildren) => (
   </NextIntlClientProvider>
 );
 
-const Wrapper2 = ({ children }: React.PropsWithChildren) => (
-  <NextIntlClientProvider locale={"fr"} messages={fr}>
-    <NotificationProvider>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </NotificationProvider>
-  </NextIntlClientProvider>
-);
-
 describe("cart-item", () => {
   it("Renders the name and price", () => {
     render(
@@ -51,7 +41,9 @@ describe("cart-item", () => {
           handleCartAmountChange={(cartline: CartLine) => {
             cartline;
           }}
-        />
+        >
+          <CartItem.ProductDetails />
+        </CartItem>
       </Wrapper>,
     );
 
@@ -70,32 +62,17 @@ describe("cart-item", () => {
           handleCartAmountChange={(cartline: CartLine) => {
             cartline;
           }}
-        />
+        >
+          <CartItem.QuantityControls />
+          <CartItem.RemoveButton />
+        </CartItem>
       </Wrapper>,
     );
     expect(screen.getByTitle("Increase Quantity")).toBeInTheDocument();
     expect(screen.getByTitle("Decrease Quantity")).toBeInTheDocument();
     expect(screen.getByTitle("Remove Item")).toBeInTheDocument();
   });
-  it("Translates to French", () => {
-    const testClick = vi.fn();
-    render(
-      <Wrapper2>
-        <CartItem
-          item={cart.CartLines[0]}
-          isLineUpdating={false}
-          closeDrawer={() => {
-            fn;
-          }}
-          handleCartAmountChange={testClick}
-        />
-      </Wrapper2>,
-    );
-    // screen.debug(undefined, 100000)
-    expect(screen.getByTitle("Augmenter la quantité")).toBeInTheDocument();
-    expect(screen.getByTitle("Diminuer la quantité")).toBeInTheDocument();
-    expect(screen.getByTitle("Supprimer")).toBeInTheDocument();
-  });
+
   it("Hides Buttons while loading", () => {
     render(
       <Wrapper>
@@ -108,12 +85,16 @@ describe("cart-item", () => {
           handleCartAmountChange={(cartline: CartLine) => {
             cartline;
           }}
-        />
+        >
+          <CartItem.QuantityControls />
+          <CartItem.RemoveButton />
+        </CartItem>
       </Wrapper>,
     );
     expect(() => screen.getByTitle("Increase Quantity")).toThrow();
     expect(() => screen.getByTitle("Decrease Quantity")).toThrow();
   });
+
   it("Does allow increase", () => {
     const testClick = vi.fn();
     render(
@@ -125,7 +106,9 @@ describe("cart-item", () => {
             fn;
           }}
           handleCartAmountChange={testClick}
-        />
+        >
+          <CartItem.QuantityControls />
+        </CartItem>
       </Wrapper>,
     );
     // screen.debug(undefined, 100000)
@@ -133,6 +116,7 @@ describe("cart-item", () => {
     fireEvent.click(button);
     expect(testClick).toHaveBeenCalled();
   });
+
   it("Does not allow decrease", () => {
     const testClick = vi.fn();
     render(
@@ -144,7 +128,10 @@ describe("cart-item", () => {
             fn;
           }}
           handleCartAmountChange={testClick}
-        />
+        >
+          <CartItem.QuantityControls />
+          <CartItem.RemoveButton />
+        </CartItem>
       </Wrapper>,
     );
     // screen.debug(undefined, 100000)
@@ -152,6 +139,7 @@ describe("cart-item", () => {
     fireEvent.click(button);
     expect(testClick).not.toHaveBeenCalled();
   });
+
   it("Allows Remove", () => {
     const testClick = vi.fn();
     render(
@@ -163,12 +151,15 @@ describe("cart-item", () => {
             fn;
           }}
           handleCartAmountChange={testClick}
-        />
+        >
+          <CartItem.QuantityControls />
+          <CartItem.RemoveButton />
+        </CartItem>
       </Wrapper>,
     );
-    // screen.debug(undefined, 100000)
+
     const button = screen.getByTitle("Remove Item");
     fireEvent.click(button);
     expect(testClick).toHaveBeenCalled();
   });
-});*/
+});

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

@@ -1,15 +1,14 @@
-/*
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NextIntlClientProvider } from "next-intl";
-import cartData from "./test-cart-with-itemon";
-import cartDataEmpty from "./test-cart-emptyon";
-import ENUS from "../../../../../messages/en-USon";
-import fr from "../../../../../messages/fron";
+import cartData from "./test-cart-with-item.json";
+import cartDataEmpty from "./test-cart-empty.json";
+import ENUS from "@messages/en-US.json";
+import fr from "@messages/fr.json";
 import { fireEvent, render, screen } from "@testing-library/react";
 import MiniCart from "../mini-cart";
 import { vi } from "vitest";
 import { Cart } from "@msdyn365-commerce/retail-proxy";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/components-v2/Notifications/notification-context";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 const { useRouter, mockedRouterPush } = vi.hoisted(() => {
   const mockedRouterPush = vi.fn();
@@ -56,7 +55,7 @@ const ensureCartLinesNotNull = (cartObject: Cart) => ({
   CartLines: cartObject.CartLines || [],
 });
 
-describe("Mini Cart", () => {
+describe.skip("Mini Cart", () => {
   it("Displays one item in bag", () => {
     render(
       <Wrapper>
@@ -118,4 +117,4 @@ describe("Mini Cart", () => {
     fireEvent.click(screen.getByTitle("Close"));
     expect(testClick).toHaveBeenCalled();
   });
-});*/
+});

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

@@ -1,27 +1,81 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
+import Button, { ButtonProps } from "@mui/material/Button";
 import { useTranslations } from "next-intl";
 
-// ==============================================================
-interface Props {
+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;
 }
-// ==============================================================
 
-export default function BottomActions({ total, handleNavigate }: Props) {
+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 (
-    <Box p={2.5}>
-      <Button
-        fullWidth
-        color="primary"
-        variant="outlined"
-        sx={{ height: 40 }}
-        onClick={handleNavigate("/cart")}
-      >
-        {t("viewCartBtn", { total })}
-      </Button>
-    </Box>
+    <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

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