@evenicanpm/storefront-core 1.0.2 → 1.0.3

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

@@ -0,0 +1,46 @@
+/**
+ * @module dimensions
+ */
+"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/components/dimensions-group-label.tsx

@@ -0,0 +1,27 @@
+/**
+ * @module dimensions
+ */
+"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/components/dimensions-group-list-chip.tsx

@@ -0,0 +1,78 @@
+/**
+ * @module dimensions
+ */
+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/components/dimensions-group-list.tsx

@@ -0,0 +1,24 @@
+/**
+ * @module dimensions
+ */
+"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/components/dimensions-group.tsx

@@ -0,0 +1,55 @@
+/**
+ * @module dimensions
+ */
+"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;

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

@@ -0,0 +1,84 @@
+/**
+ * @module dimensions
+ */
+"use client";
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import React, { PropsWithChildren, ReactElement, createContext } from "react";
+import { DimensionGroup } from "./dimensions-group";
+
+/**
+ * @category Context
+ */
+export interface DimensionsContext {
+  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
+  handleChangeVariant: (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => void;
+  showDimensionError?: boolean;
+}
+
+/**
+ * @internal
+ */
+export const DimensionsContext = createContext<null | DimensionsContext>(null);
+
+// TODO: When selecting a single dimension, loading spinner starts... not necessary, inefficient.
+
+/**
+ * @category Props
+ */
+export interface DimensionsProps extends PropsWithChildren<unknown> {
+  /** An doubly nested array of Dimensions */
+  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
+  /** The currently selected dimension, identitfied with a numeric key */
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
+  /** Event handler that is called after the selected dimensions change */
+  handleChangeVariant: (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => void;
+  /** Whether to show error, usually triggered when trying to add to cart before selecting all dimensions */
+  showDimensionError?: boolean;
+}
+
+/**
+ * The root level dimensions component. Provides dimensions context, insert dimension groups inside.
+ * @category Compound Component
+ * @example
+ * <ProductDimension
+ *   dimensionGroups={dimensionGroups}
+ *   selectDimensions={selectDimensions}
+ *   handleChangeVariant={handleChangeVariant}
+ *   showDimensionError={showDimensionError}
+ * >
+ *   {dimensionGroups.map((group, i) => (
+ *     <ProductDimension.Group dimensions={group} key={i}>
+ *       <ProductDimension.Group.Label />
+ *       <ProductDimension.Group.List />
+ *       <ProductDimension.Group.Error />
+ *     </ProductDimension.Group>
+ *   ))}
+ * </ProductDimension>
+ */
+export const Dimensions = ({
+  dimensionGroups,
+  selectDimensions,
+  handleChangeVariant,
+  showDimensionError,
+  children,
+}: DimensionsProps): ReactElement => {
+  const contextValue = {
+    dimensionGroups,
+    selectDimensions,
+    handleChangeVariant,
+    showDimensionError,
+  };
+
+  return (
+    <DimensionsContext.Provider value={contextValue}>
+      {children}
+    </DimensionsContext.Provider>
+  );
+};
+
+Dimensions.Group = DimensionGroup;

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

@@ -0,0 +1,38 @@
+"use client";
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import { Dimensions } from "./components/dimensions";
+
+// TODO: When selecting a single dimension, loading spinner starts... not necessary, inefficient.
+
+export type Props = {
+  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
+  handleChangeVariant: (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => void;
+  showDimensionError?: boolean;
+};
+
+export default function ProductDimensions({
+  dimensionGroups,
+  selectDimensions,
+  handleChangeVariant,
+  showDimensionError,
+}: Props) {
+  return (
+    <Dimensions
+      dimensionGroups={dimensionGroups}
+      selectDimensions={selectDimensions}
+      handleChangeVariant={handleChangeVariant}
+      showDimensionError={showDimensionError}
+    >
+      {dimensionGroups.map((group, i) => (
+        <Dimensions.Group dimensions={group} key={i}>
+          <Dimensions.Group.Label />
+          <Dimensions.Group.List />
+          <Dimensions.Group.Error />
+        </Dimensions.Group>
+      ))}
+    </Dimensions>
+  );
+}

package/src/components-v2/product-dimensions/utils/has-selected-dimension.ts

@@ -0,0 +1,20 @@
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+
+/**
+ * Checks if dimension exists
+ * @param dimension
+ * @param selectDimensions
+ * @returns
+ */
+export const hasSelectedDimension = (
+  dimension: ProductDimensionValueInventoryAvailability[],
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>,
+) => {
+  return dimension.some((dim) =>
+    Object.values(selectDimensions).some(
+      (selectedDimension) =>
+        selectedDimension.DimensionValue?.RecordId ===
+        dim.DimensionValue?.RecordId,
+    ),
+  );
+};

package/src/components-v2/product-quantity-buttons/product-quantity-buttons.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import Button from "@mui/material/Button";
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { MdAdd as Add } from "react-icons/md";
+import { MdRemove as Remove } from "react-icons/md";
+import CircularProgress from "@mui/material/CircularProgress";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  loading: boolean;
+  productCartLine: CartLine | undefined;
+  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
+  handleAddToCart: () => void;
+  isOOS: boolean;
+}
+
+export default function QuantityButtons({
+  loading,
+  handleAddToCart,
+  handleCartAmountChange,
+  productCartLine,
+  isOOS,
+}: Props) {
+  const t = useTranslations("productDetail");
+
+  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
+    return (
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={handleAddToCart}
+        disabled={isOOS}
+      >
+        {t("btnAddToCart")}
+      </Button>
+    );
+  }
+
+  return (
+    <FlexBox alignItems="center">
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) - 1,
+            productCartLine,
+          )
+        }
+      >
+        <Remove fontSize="small" />
+      </Button>
+
+      <H3
+        fontWeight="600"
+        mx={2.5}
+        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
+      >
+        {loading ? (
+          <CircularProgress size={"10px"} />
+        ) : (
+          productCartLine.Quantity.toString().padStart(2, "0")
+        )}
+      </H3>
+
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) + 1,
+            productCartLine,
+          )
+        }
+      >
+        <Add fontSize="small" />
+      </Button>
+    </FlexBox>
+  );
+}

package/src/components-v2/products-view/product-view-dialog.tsx

@@ -0,0 +1,218 @@
+import Grid from "@mui/material/Grid2";
+import Rating from "@mui/material/Rating";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DialogContent from "@mui/material/DialogContent";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENT
+// LOCAL CUSTOM HOOKS
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { useTranslations } from "next-intl";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { Carousel } from "../carousel";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import BazaarImage from "../BazaarImage";
+import { FlexBox } from "../flex-box";
+import { H2, Paragraph, H1, H6, H3 } from "../Typography";
+import { currency } from "@/lib/lib";
+
+// =====================================================
+interface Props {
+  product: ProductInfo;
+  openDialog: boolean;
+  cartId?: string;
+  handleCloseDialog: () => void;
+}
+// =====================================================
+type CartItem = {
+  id: string | number;
+  qty: number;
+};
+// =====================================================
+export type ProductInfo = {
+  id: string | number;
+  title: string;
+  imgGroup: string[];
+  price: number;
+  slug: string;
+};
+// =====================================================
+type CartDispatch = {
+  type: "CHANGE_CART_AMOUNT";
+  payload: ProductInfo & {
+    qty: number;
+    name: string;
+    imgUrl: string;
+  };
+};
+// =====================================================
+
+export default function ProductViewDialog(props: Props) {
+  const { product, openDialog, cartId, handleCloseDialog } = props;
+  const { mutateAsync: addToCart } = useAddToCart();
+  const { data: cart } = getCart.useData();
+
+  const t = useTranslations("ProductViewDialog");
+  const { setNotification } = useNotification();
+
+  //const { state, dispatch } = useCart();
+  const state: { cart: CartItem[] } = {
+    cart: [],
+  };
+  const dispatch = (input: CartDispatch) => {
+    input;
+  };
+  const cartItem = state.cart.find((item) => item?.id === product.id);
+
+  const handleCartAmountChange = (amount: number) => () => {
+    dispatch({
+      type: "CHANGE_CART_AMOUNT",
+      payload: {
+        ...product,
+        qty: amount,
+        name: product.title,
+        imgUrl: product.imgGroup[0],
+      },
+    });
+  };
+
+  const handleAddToCart = async () => {
+    if (!cart) return;
+    try {
+      await addToCart({
+        cartId: cartId,
+        version: cart.Version,
+        cartLine: [
+          {
+            ProductId: Number(product.id),
+            Quantity: 1,
+          },
+        ],
+      });
+      setNotification({
+        message: t("addToCartSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("addToCartError"),
+        severity: "error",
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={openDialog}
+      maxWidth={false}
+      onClose={handleCloseDialog}
+      sx={{ zIndex: 1501 }}
+    >
+      <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
+        <div>
+          <Grid container spacing={3}>
+            <Grid size={{ md: 6, xs: 12 }}>
+              <Carousel
+                slidesToShow={1}
+                arrowStyles={{
+                  boxShadow: 0,
+                  color: "primary.main",
+                  backgroundColor: "transparent",
+                }}
+              >
+                {product.imgGroup.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>
+
+            <Grid size={{ md: 6, xs: 12 }} alignSelf="center">
+              <H2>{product.title}</H2>
+
+              <Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
+                CATEGORY: Cosmetic
+              </Paragraph>
+
+              <H1 color="primary.main">{currency(product.price)}</H1>
+
+              <FlexBox alignItems="center" gap={1} mt={1}>
+                <Rating color="warn" value={4} readOnly />
+                <H6 lineHeight="1">(50)</H6>
+              </FlexBox>
+
+              <Paragraph my={2}>
+                Sed egestas, ante et vulputate volutpat, eros pede semper est,
+                vitae luctus metus libero eu augue. Morbi purus liberpuro ate
+                vol faucibus adipiscing.
+              </Paragraph>
+
+              <Divider sx={{ mb: 2 }} />
+
+              {!cartItem?.qty ? (
+                <Button
+                  size="large"
+                  color={"primary"}
+                  variant="contained"
+                  // onClick={handleCartAmountChange(1)}
+                  onClick={handleAddToCart}
+                  sx={{ height: 45, borderRadius: 2 }}
+                >
+                  {t("addToCartBtn")}
+                </Button>
+              ) : (
+                <FlexBox alignItems="center">
+                  <Button
+                    size="small"
+                    color={"primary"}
+                    variant="outlined"
+                    sx={{ p: ".6rem", height: 45 }}
+                    onClick={handleCartAmountChange(cartItem?.qty - 1)}
+                  >
+                    <Remove fontSize="small" />
+                  </Button>
+
+                  <H3 fontWeight="600" mx={2.5}>
+                    {cartItem?.qty.toString().padStart(2, "0")}
+                  </H3>
+
+                  <Button
+                    size="small"
+                    color={"primary"}
+                    variant="outlined"
+                    sx={{ p: ".6rem", height: 45 }}
+                    onClick={handleCartAmountChange(cartItem?.qty + 1)}
+                  >
+                    <Add fontSize="small" />
+                  </Button>
+                </FlexBox>
+              )}
+            </Grid>
+          </Grid>
+        </div>
+
+        <IconButton
+          sx={{ position: "absolute", top: 3, right: 3 }}
+          onClick={handleCloseDialog}
+        >
+          <Close fontSize="small" color="secondary" />
+        </IconButton>
+      </DialogContent>
+    </Dialog>
+  );
+}