@evenicanpm/storefront-core 1.0.1 → 1.0.3

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>
+  );
+}

package/src/components-v2/products-view/products-grid-view.tsx

@@ -0,0 +1,52 @@
+import { Fragment, ReactNode } from "react";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import ProductCard16 from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-16/product-card";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+
+// ========================================================
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
+// ========================================================
+
+export default function ProductsGridView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
+  return (
+    <Fragment>
+      <Grid container spacing={3}>
+        {products.map((item: Product) => {
+          const matchingPrice = productPrices?.find(
+            (price) => price.ProductId === item.RecordId,
+          );
+          return (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
+              <ProductCard16
+                id={item.RecordId}
+                key={item.RecordId}
+                slug={item.ItemId ?? ""}
+                title={item.Name ?? ""}
+                price={matchingPrice?.CustomerContextualPrice ?? 0}
+                discount={0} // Need to get discount info for product.
+                rating={item.TotalRatings ?? 0}
+                imgUrl={item.PrimaryImageUrl ?? ""}
+                showAddToCart={false}
+              />
+            </Grid>
+          );
+        })}
+      </Grid>
+      <FlexBetween flexWrap="wrap" mt={6}>
+        {pagination}
+      </FlexBetween>
+    </Fragment>
+  );
+}

package/src/components-v2/products-view/products-list-view.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+import { ProductCard9 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-9/index";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+
+// ==========================================================
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
+// ==========================================================
+
+export default function ProductsListView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
+  return (
+    <div>
+      {products.map((item) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        return (
+          <ProductCard9
+            id={item.RecordId}
+            key={item.RecordId}
+            slug={item.ItemId ?? ""}
+            title={item.Name ?? ""}
+            price={matchingPrice?.CustomerContextualPrice ?? 0}
+            off={0} // Need to get discount info for product.
+            rating={item.TotalRatings ?? 0}
+            imgUrl={item.PrimaryImageUrl ?? ""}
+            showAddToCart={false}
+            showFavorite={false}
+          />
+        );
+      })}
+
+      <FlexBetween flexWrap="wrap" mt={4}>
+        {pagination}
+      </FlexBetween>
+    </div>
+  );
+}

package/src/components-v2/progress/index.ts

@@ -0,0 +1 @@
+export { default } from "./progress";

package/src/components-v2/progress/progress.tsx

@@ -0,0 +1,77 @@
+// https://github.com/apal21/nextjs-progressbar/issues/86
+
+"use client";
+import { useEffect } from "react";
+import NProgress from "nprogress";
+import useTheme from "@mui/material/styles/useTheme";
+import GlobalStyles from "@mui/material/GlobalStyles";
+
+import "nprogress/nprogress.css";
+
+type PushStateInput = [
+  data: string,
+  unused: string,
+  url?: string | URL | null | undefined,
+];
+
+export default function ProgressBar() {
+  const theme = useTheme();
+
+  useEffect(() => {
+    NProgress.configure({ showSpinner: false });
+
+    const handleAnchorClick = (event: Event) => {
+      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
+      const currentUrl = location.href;
+      if (targetUrl !== currentUrl) {
+        NProgress.start();
+      }
+    };
+
+    const handleMutation: MutationCallback = () => {
+      const anchorElements = document.querySelectorAll("a[href]");
+      anchorElements.forEach((anchor) =>
+        anchor.addEventListener("click", handleAnchorClick),
+      );
+    };
+
+    const mutationObserver = new MutationObserver(handleMutation);
+    mutationObserver.observe(document, { childList: true, subtree: true });
+
+    window.history.pushState = new Proxy(window.history.pushState, {
+      apply: (target, thisArg, argArray: PushStateInput) => {
+        NProgress.done();
+        return target.apply(thisArg, argArray);
+      },
+    });
+  });
+
+  return (
+    <GlobalStyles
+      styles={{
+        "#nprogress": {
+          pointerEvents: "none",
+          ".bar": {
+            top: 0,
+            left: 0,
+            height: 2,
+            width: "100%",
+            position: "fixed",
+            zIndex: 9999999999,
+            background: theme.palette.primary.main,
+          },
+          ".peg": {
+            right: 0,
+            opacity: 1,
+            width: 100,
+            height: "100%",
+            display: "block",
+            boxShadow: "none",
+            position: "absolute",
+            transform: "rotate(3deg) translate(0px, -4px)",
+          },
+        },
+      }}
+    />
+  );
+}

package/src/components-v2/scrollbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./scrollbar";