@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/product-cards/product-card-search/styles/index.ts

@@ -0,0 +1,61 @@
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+export const Card = styled("div")({
+  ":hover": {
+    img: { transform: "scale(1.1)" },
+    ".product-actions": { right: 15 },
+    ".product-view-action": { opacity: 1 },
+  },
+});
+
+export const CardMedia = styled("div")(({ theme }) => ({
+  aspectRatio: "1/1",
+  // maxHeight: 300,
+  borderRadius: 4,
+  cursor: "pointer",
+  overflow: "hidden",
+  position: "relative",
+  backgroundColor: theme.palette.grey[300],
+  img: { transition: "0.3s" },
+}));
+
+export const AddToCartButton = styled(IconButton)(({ theme }) => ({
+  top: 15,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .1s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));
+
+export const FavoriteButton = styled(IconButton)(({ theme }) => ({
+  top: 55,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .2s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));
+
+export const QuickViewButton = styled(Button)({
+  left: 0,
+  bottom: 12,
+  opacity: 0,
+  borderRadius: 4,
+  position: "absolute",
+  transition: "all 0.3s",
+});
+
+export const QuickViewSmallButton = styled(IconButton)(({ theme }) => ({
+  top: 15,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .1s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));

package/src/components-v2/product-cards/product-price.tsx

@@ -0,0 +1,26 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+
+// ==============================================================
+type Props = { price: number; discount: number };
+// ==============================================================
+
+export default function ProductPrice({ discount, price }: Props) {
+  return (
+    <FlexBox alignItems="center" gap={1} mt={0.5}>
+      <Paragraph fontWeight={600} color="primary.main">
+        {calculateDiscount(price, discount)}
+      </Paragraph>
+
+      {discount ? (
+        <Box component="del" fontWeight={600} color="grey.600">
+          {currency(price)}
+        </Box>
+      ) : null}
+    </FlexBox>
+  );
+}

package/src/components-v2/product-cards/product-rating.tsx

@@ -0,0 +1,28 @@
+import Rating from "@mui/material/Rating";
+import { BoxProps } from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+
+// ==============================================================
+interface Props extends BoxProps {
+  rating: number;
+  showRating: boolean;
+}
+// ==============================================================
+
+export default function ProductRating({
+  showRating,
+  rating = 0,
+  ...props
+}: Props) {
+  if (showRating) {
+    return (
+      <FlexBox gap={1} alignItems="center" {...props}>
+        <Rating size="small" value={rating} color="warn" readOnly />
+        <Span color="grey.600">({rating})</Span>
+      </FlexBox>
+    );
+  }
+  return null;
+}

package/src/components-v2/product-cards/product-title.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// ==============================================================
+type Props = { title: string; slug: string };
+// ==============================================================
+
+export default function ProductTitle({ title, slug }: Props) {
+  return (
+    <Link href={`/products/${slug}`}>
+      <H3
+        mb={1}
+        ellipsis
+        title={title}
+        fontSize={14}
+        fontWeight={600}
+        className="title"
+        color="text.secondary"
+      >
+        {title}
+      </H3>
+    </Link>
+  );
+}

package/src/components-v2/product-cards/use-product.ts

@@ -0,0 +1,35 @@
+import getCart from "@/services/cart/queries/get-cart";
+import { useCallback, useState } from "react";
+import { useSnackbar } from "notistack";
+
+export default function useProduct(slug: string) {
+  const { data: cart } = getCart.useData();
+  const { enqueueSnackbar } = useSnackbar();
+  const [openModal, setOpenModal] = useState(false);
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  const cartItem = cart?.CartLines?.find(
+    (cartLine) => String(cartLine.Product?.RecordId) === slug,
+  );
+
+  const toggleFavorite = useCallback(() => setIsFavorite((fav) => !fav), []);
+  const toggleDialog = useCallback(() => setOpenModal((open) => !open), []);
+
+  const handleCartAmountChange = (type?: "remove") => {
+    // TODO Febraury 25, 2025: Implement this function
+    //dispatch({ type: "CHANGE_CART_AMOUNT", payload: product });
+    // SHOW ALERT PRODUCT ADDED OR REMOVE
+    if (type === "remove")
+      enqueueSnackbar("Remove from Cart", { variant: "error" });
+    else enqueueSnackbar("Added to Cart", { variant: "success" });
+  };
+
+  return {
+    cartItem,
+    openModal,
+    isFavorite,
+    toggleDialog,
+    toggleFavorite,
+    handleCartAmountChange,
+  };
+}

package/src/components-v2/product-dialog/compound/product-dialog.tsx

@@ -0,0 +1,225 @@
+/**
+ * @module ProductViewDialog
+ */
+"use client";
+import Grid from "@mui/material/Grid2";
+import Rating from "@mui/material/Rating";
+import Dialog from "@mui/material/Dialog";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DialogContent from "@mui/material/DialogContent";
+import Close from "@mui/icons-material/Close";
+import { Carousel } from "../../carousel";
+import BazaarImage from "../../BazaarImage";
+import { FlexBox } from "../../flex-box";
+import { H2, Paragraph, H1, H6 } from "../../Typography";
+import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
+import QuantityVariantsSelect from "../../product-quantity-variants";
+import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
+import { createContext, ReactElement, useContext } from "react";
+import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+
+/**
+ * @category Props
+ */
+interface Props {
+  productId: number;
+  openDialog: boolean;
+  cartId?: string;
+  handleCloseDialog?: () => void;
+  children: ReactElement;
+}
+
+/**
+ * @category Context
+ */
+interface ProductDialogContext {
+  /** the product details object that is return from getProductById */
+  product: ProductDetails;
+  /* is dialog open? */
+  openDialog: boolean;
+  /** close dialog handler */
+  handleCloseDialog?: () => void;
+}
+
+/**
+ * @internal
+ */
+export const ProductDialogContext = createContext(null);
+
+/**
+* @category Compound Component
+* @example
+*   <ProductViewDialog {...props}>
+*     <ProductViewDialog.Content>
+*       <ProductViewDialog.Content.Images />
+*       <ProductViewDialog.Content.Info>
+*         <ProductViewDialog.Content.Info.Name />
+*         <ProductViewDialog.Content.Info.Category />
+*         <ProductViewDialog.Content.Info.Description />
+*         <ProductViewDialog.Content.Info.Rating />
+*         <ProductViewDialog.Content.Info.AddToCart />
+*       </ProductViewDialog.Content.Info>
+*     </ProductViewDialog.Content>
+*   </ProductViewDialog>
+*/
+export default function ProductDialog(props: Props) {
+  const { children, openDialog, handleCloseDialog } = props;
+  const { data: product, isPending } = getProductById.useData({
+    id: Number(props.productId),
+  });
+  if (isPending) return null;
+  return (
+    <ProductDialogContext.Provider value={{ product, openDialog, handleCloseDialog }}>
+      <Dialog
+        open={openDialog}
+        maxWidth={false}
+        onClose={handleCloseDialog}
+        sx={{ zIndex: 1501 }}
+      >
+        <DialogContent sx={{ maxWidth: 900, width: "100%" }}>{children}</DialogContent>
+      </Dialog>
+    </ProductDialogContext.Provider >
+  );
+}
+
+/**
+  * @category Sub-Component
+  */
+export const ProductDialogContent = ({ children }: { children: React.ReactNode }) => {
+  const { handleCloseDialog } = useContext(ProductDialogContext);
+
+  return (
+    <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
+      <div>
+        <Grid container spacing={3}>
+          {children}
+        </Grid>
+      </div>
+      <IconButton
+        sx={{ position: "absolute", top: 3, right: 3 }}
+        onClick={handleCloseDialog}
+      >
+        <Close fontSize="small" color="secondary" />
+      </IconButton>
+    </DialogContent>
+  );
+}
+
+/**
+  * @category Sub-Component
+  */
+export const ProductDialogContentImages = () => {
+  const { product } = useContext(ProductDialogContext);
+
+  return (
+    < Grid size={{ md: 6, xs: 12 }
+    }>
+      <Carousel
+        slidesToShow={1}
+        arrowStyles={{
+          boxShadow: 0,
+          color: "primary.main",
+          backgroundColor: "transparent",
+        }}
+      >
+        {product?.Images.map((item: string, index: number) => (
+          <BazaarImage
+            key={index}
+            src={item}
+            alt="product"
+            sx={{
+              mx: "auto",
+              width: "100%",
+              objectFit: "contain",
+              height: { sm: 400, xs: 250 },
+            }}
+          />
+        ))}
+      </Carousel>
+    </Grid >
+  );
+}
+
+/**
+ * @category Sub-Component
+ */
+export const ProductDialogContentInfo = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid size={{ md: 6, xs: 12 }} alignSelf="center">
+      {children}
+    </Grid>
+  );
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoName = () => {
+  const { product } = useContext(ProductDialogContext);
+  return <H2>{product?.Name}</H2>
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoCategory = () => {
+  return (
+    <Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
+      CATEGORY
+    </Paragraph>
+  )
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoPrice = () => {
+  const { product } = useContext(ProductDialogContext);
+  return <H1 color="primary.main">{currency(product?.Price)}</H1>
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoDescription = () => {
+  const { product } = useContext(ProductDialogContext);
+  return <Paragraph my={2}>{product?.Description}</Paragraph>
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoRating = () => {
+  return (
+    <FlexBox alignItems="center" gap={1} mt={1}>
+      <Rating color="warn" value={4} readOnly />
+      <H6 lineHeight="1">(50)</H6>
+    </FlexBox>
+  );
+}
+
+/**
+ * @category Sub-Component
+ */
+export const InfoAddToCart = () => {
+  const { product } = useContext(ProductDialogContext);
+  return (
+    <>
+      <Divider sx={{ mb: 2 }} />
+      <FlexBox alignItems="center">
+        <QuantityVariantsSelect product={product} />
+      </FlexBox>
+    </>
+  );
+}
+
+ProductDialog.Content = ProductDialogContent;
+ProductDialogContentInfo.Name = InfoName;
+ProductDialogContentInfo.Category = InfoCategory;
+ProductDialogContentInfo.Price = InfoPrice;
+ProductDialogContentInfo.Description = InfoDescription;
+ProductDialogContentInfo.Rating = InfoRating;
+ProductDialogContentInfo.AddToCart = InfoAddToCart;
+ProductDialogContent.Images = ProductDialogContentImages;
+ProductDialogContent.Info = ProductDialogContentInfo;

package/src/components-v2/product-dialog/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+import ProductViewDialog from "./compound/product-dialog";
+
+interface Props {
+  productId: number;
+  openDialog: boolean;
+  handleCloseDialog?: () => void;
+}
+
+/**
+ * @category Composed Component
+ */
+export default function ProductDialog(props: Props) {
+  return (
+    <ProductViewDialog {...props}>
+      <ProductViewDialog.Content>
+        <ProductViewDialog.Content.Images />
+        <ProductViewDialog.Content.Info>
+          <ProductViewDialog.Content.Info.Name />
+          <ProductViewDialog.Content.Info.Category />
+          <ProductViewDialog.Content.Info.Description />
+          <ProductViewDialog.Content.Info.Rating />
+          <ProductViewDialog.Content.Info.AddToCart />
+        </ProductViewDialog.Content.Info>
+      </ProductViewDialog.Content>
+    </ProductViewDialog>
+  );
+}
+

package/src/components-v2/product-dimensions/compound/dimensions-group-error.tsx

@@ -0,0 +1,46 @@
+/**
+ * @module ProductDimensions
+ */
+"use client";
+import { DimensionsContext } from "./dimensions";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import { hasSelectedDimension } from "../utils/has-selected-dimension";
+import { useContext } from "react";
+import { DimensionsGroupContext } from "./dimensions-group";
+
+/**
+ * An error that corresponds with a specific dimension group.
+ * Usually renders if the user tries to add to cart without selecting
+ * all required dimensions to get variant id.
+ *
+ * @category Sub-Component
+ */
+export const DimensionGroupError = () => {
+  const t = useTranslations("productDetail.Dimensions");
+  const dimensionGroupContext = useContext(DimensionsGroupContext);
+  const dimensionsContext = useContext(DimensionsContext);
+
+  if (!dimensionGroupContext || !dimensionsContext)
+    throw new Error(
+      "ProductDimensionGroup.Error must be used within a ProductDimensionsGroupContext",
+    );
+
+  const { dimensions } = dimensionGroupContext;
+  const { selectDimensions, showDimensionError } = dimensionsContext;
+
+  if (
+    showDimensionError &&
+    !hasSelectedDimension(dimensions, selectDimensions)
+  ) {
+    return (
+      <H6 color="error.main" mb={1}>
+        {t("selectError", {
+          dimension:
+            ProductDimensionType[dimensions[0]?.DimensionTypeValue || 0],
+        })}
+      </H6>
+    );
+  }
+};

package/src/components-v2/product-dimensions/compound/dimensions-group-label.tsx

@@ -0,0 +1,27 @@
+/**
+ * @module ProductDimensions
+ */
+"use client";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import { useContext } from "react";
+import { DimensionsGroupContext } from "./dimensions-group";
+
+/**
+ * @category Sub-Component
+ */
+export const DimensionGroupLabel = () => {
+  const context = useContext(DimensionsGroupContext);
+  if (!context)
+    throw new Error(
+      "ProductDimensionGroup.Error must be used within a ProductDimensionsGroupContext",
+    );
+
+  const { dimensions } = context;
+
+  return (
+    <H6 mb={1}>
+      {ProductDimensionType[dimensions[0]?.DimensionTypeValue || 0]}
+    </H6>
+  );
+};

package/src/components-v2/product-dimensions/compound/dimensions-group-list-chip.tsx

@@ -0,0 +1,78 @@
+/**
+ * @module ProductDimensions
+ */
+import React, { useContext } from "react";
+import { Chip } from "@mui/material";
+import {
+  ProductDimensionValueInventoryAvailability,
+  ProductDimensionType,
+} from "@msdyn365-commerce/retail-proxy";
+import { DimensionsContext } from "./dimensions";
+
+/**
+ * @category Props
+ */
+interface Props {
+  dimension: ProductDimensionValueInventoryAvailability;
+}
+
+/**
+ * @category Sub-Component
+ */
+export const DimensionGroupListChip = ({ dimension }: Props) => {
+  const context = useContext(DimensionsContext);
+  if (!context)
+    throw new Error(
+      "ProductDimensionGroup.Error must be used within a ProductDimensionsGroupContext",
+    );
+  const { selectDimensions, handleChangeVariant } = context;
+
+  // Calculate Values
+  const type = ProductDimensionType[dimension.DimensionTypeValue || 0];
+
+  const disabled = dimension.TotalAvailableInventoryLevelCode !== "AVAIL";
+
+  const selected =
+    selectDimensions[dimension.DimensionTypeValue || 0]?.DimensionValue ===
+    dimension.DimensionValue;
+
+  switch (type) {
+    case "Color":
+      return (
+        <Chip
+          key={dimension.DimensionValue?.RecordId}
+          onClick={() => {
+            handleChangeVariant(dimension);
+          }}
+          disabled={disabled}
+          sx={{
+            borderRadius: "100%",
+            mr: 1,
+            cursor: "pointer",
+            backgroundColor: dimension.DimensionValue?.Value,
+            width: 32,
+            height: 32,
+            border: selected ? "2px solid" : "2px solid transparent",
+            "&:hover": {
+              backgroundColor: dimension.DimensionValue?.Value,
+            },
+          }}
+        />
+      );
+    // Standard text dimension
+    default:
+      return (
+        <Chip
+          key={dimension.DimensionValue?.RecordId}
+          label={dimension.DimensionValue?.Value}
+          onClick={() => {
+            handleChangeVariant(dimension);
+          }}
+          disabled={disabled}
+          sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
+          color={selected ? "primary" : "default"}
+        />
+      );
+    // Add more chips as needed.
+  }
+};

package/src/components-v2/product-dimensions/compound/dimensions-group-list.tsx

@@ -0,0 +1,24 @@
+/**
+ * @module ProductDimensions
+ */
+"use client";
+import { DimensionGroupListChip } from "./dimensions-group-list-chip";
+import { useContext } from "react";
+import { DimensionsGroupContext } from "./dimensions-group";
+
+/**
+ * @category Sub-Component
+ */
+export const DimensionGroupList = () => {
+  const context = useContext(DimensionsGroupContext);
+  if (!context)
+    throw new Error(
+      "ProductDimensionGroup.Error must be used within a ProductDimensionsGroupContext",
+    );
+
+  const { dimensions } = context;
+
+  return dimensions.map((dimension, i) => {
+    return <DimensionGroupListChip dimension={dimension} key={i} />;
+  });
+};

package/src/components-v2/product-dimensions/compound/dimensions-group.tsx

@@ -0,0 +1,55 @@
+/**
+ * @module ProductDimensions
+ */
+"use client";
+import Box from "@mui/material/Box";
+import { createContext } from "react";
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import { PropsWithChildren } from "react";
+import { DimensionGroupError } from "./dimensions-group-error";
+import { DimensionGroupLabel } from "./dimensions-group-label";
+import { DimensionGroupList } from "./dimensions-group-list";
+
+/**
+ * @category Props
+ */
+export interface DimensionGroupProps extends PropsWithChildren {
+  dimensions: ProductDimensionValueInventoryAvailability[];
+}
+
+/**
+ * @category Context
+ */
+export interface DimensionGroupContext {
+  dimensions: ProductDimensionValueInventoryAvailability[];
+}
+/**
+ * @internal
+ */
+export const DimensionsGroupContext =
+  createContext<DimensionGroupContext | null>(null);
+
+/**
+ * A Dimension group ie. 'Swatch' or 'Size. Renders out a list of options in MUI Chips.
+ * @category Sub-Component
+ * @example
+ * <ProductDimension.Group dimensions={group} key={i}>
+ *   <ProductDimension.Group.Label />
+ *   <ProductDimension.Group.List />
+ *   <ProductDimension.Group.Error />
+ * </ProductDimension.Group>
+ */
+export const DimensionGroup = ({
+  dimensions,
+  children,
+}: DimensionGroupProps) => {
+  return (
+    <DimensionsGroupContext.Provider value={{ dimensions }}>
+      <Box mb={2}>{children}</Box>
+    </DimensionsGroupContext.Provider>
+  );
+};
+
+DimensionGroup.Error = DimensionGroupError;
+DimensionGroup.Label = DimensionGroupLabel;
+DimensionGroup.List = DimensionGroupList;