@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/product-cards/product-card-9/product-card.tsx

@@ -0,0 +1,169 @@
+import Link from "next/link";
+import Card from "@mui/material/Card";
+import Rating from "@mui/material/Rating";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENTS
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import ImageWithFallback from "../../ImageWithFallback";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import DiscountChip from "../discount-chip";
+import ProductPrice from "../product-price";
+// import ProductTags from "./components/tags";
+import AddToCartButton from "./components/add-to-cart";
+import FavoriteButton from "./components/favorite-button";
+
+import buildDetailUrl from "@/lib/build-detail-url";
+
+// STYLED COMPONENT
+const Wrapper = styled(Card)({
+  width: "100%",
+  overflow: "hidden",
+  position: "relative",
+  marginBottom: "1.25rem",
+});
+
+const ContentWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "row",
+
+  "& .img-wrapper": {
+    width: 150,
+    height: 150,
+    flexShrink: 0,
+    position: "relative",
+    backgroundColor: theme.palette.grey[200],
+  },
+
+  "& .content": {
+    flex: 1,
+    padding: "1rem",
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "space-between",
+  },
+
+  [theme.breakpoints.down("sm")]: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    "& .img-wrapper": { width: "100%" },
+    "& .content": { width: "100%" },
+  },
+}));
+
+// ===========================================================
+type Props = {
+  id: number;
+  off?: number;
+  slug: string;
+  price: number;
+  title: string;
+  imgUrl: string;
+  rating: number;
+  // show or hide
+  showAddToCart?: boolean;
+  showFavorite?: boolean;
+};
+// ===========================================================
+
+export default function ProductCard9(props: Props) {
+  const {
+    imgUrl,
+    title,
+    price,
+    off,
+    rating,
+    id,
+    slug,
+    showAddToCart = true,
+    showFavorite = true,
+  } = props || {};
+
+  const { cartItem, handleCartAmountChange, isFavorite, toggleFavorite } =
+    useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      imgUrl,
+      name: title,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      imgUrl,
+      name: title,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <Wrapper>
+      {/* PRODUCT FAVORITE BUTTON */}
+      {showFavorite && (
+        <FavoriteButton
+          isFavorite={isFavorite}
+          toggleFavorite={toggleFavorite}
+        />
+      )}
+
+      <ContentWrapper>
+        <div className="img-wrapper">
+          {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+          <DiscountChip discount={off ?? 0} />
+
+          {/* PRODUCT IMAGE / THUMBNAIL */}
+          <ImageWithFallback
+            alt={title ?? "Product Image"}
+            src={imgUrl}
+            fill
+            style={{ objectFit: "contain" }}
+            sizes="150px"
+          />
+        </div>
+
+        <div className="content">
+          <div>
+            {/* PRODUCT TAG LIST */}
+            {/* <ProductTags tags={["Bike", "Motor", "Ducati"]} /> */}
+
+            {/* PRODUCT TITLE / NAME */}
+            <Link href={buildDetailUrl(title ?? "", id)}>
+              <H5 fontWeight="700" mt={1} mb={2}>
+                {title}
+              </H5>
+            </Link>
+
+            {/* PRODUCT RATING / REVIEW  */}
+            <Rating size="small" value={rating} color="warn" readOnly />
+
+            {/* PRODUCT PRICE */}
+            <ProductPrice price={price} discount={off ?? 0} />
+          </div>
+
+          {/* PRODUCT ADD TO CART BUTTON */}
+          {showAddToCart && (
+            <AddToCartButton
+              quantity={cartItem?.Quantity ?? 0}
+              handleDecrement={handleDecrementQuantity}
+              handleIncrement={handleIncrementQuantity}
+            />
+          )}
+        </div>
+      </ContentWrapper>
+    </Wrapper>
+  );
+}

package/src/components-v2/product-cards/product-card-wishlist/components/hover-actions.tsx

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// STYLED COMPONENTS
+import { HoverIconWrapper } from "../styles";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleFavorite,
+  toggleView,
+}: Props) {
+  return (
+    <HoverIconWrapper className="hover-box">
+      <IconButton onClick={toggleView}>
+        <RemoveRedEye color="disabled" fontSize="small" />
+      </IconButton>
+
+      <IconButton onClick={toggleFavorite}>
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="disabled" />
+        )}
+      </IconButton>
+    </HoverIconWrapper>
+  );
+}

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

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

package/src/components-v2/product-cards/product-card-wishlist/product-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import HoverActions from "./components/hover-actions";
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import DiscountChip from "../discount-chip";
+// STYLED COMPONENTS
+import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles";
+import { IconButton } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+
+// ========================================================
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+  lineId: string | undefined;
+  handleRemoveProductFromWishlist: (linedId: string | undefined) => void;
+};
+// ========================================================
+
+export default function ProductCardWishlist({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+  lineId,
+  handleRemoveProductFromWishlist,
+}: Props) {
+  const { isFavorite, openModal, toggleDialog, toggleFavorite } =
+    useProduct(slug);
+
+  return (
+    <StyledBazaarCard hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={discount} />
+
+        {/* HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleView={toggleDialog}
+          toggleFavorite={toggleFavorite}
+        />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            priority
+            src={imgUrl}
+            width={500}
+            height={500}
+            alt={title}
+          />
+        </Link>
+      </ImageWrapper>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+      />
+
+      <ContentWrapper>
+        <Box flex="1 1 0" minWidth="0px" mr={1}>
+          {/* PRODUCT NAME / TITLE */}
+          <ProductTitle title={title} slug={slug} />
+
+          {/* PRODUCT RATINGS IF AVAILABLE */}
+          {!hideRating ? (
+            <Rating size="small" value={rating} color="warn" readOnly />
+          ) : null}
+
+          {/* PRODUCT SIZE IF AVAILABLE */}
+          {showProductSize ? (
+            <Span color="grey.600" mb={1} display="block">
+              Liter
+            </Span>
+          ) : null}
+
+          {/* PRODUCT PRICE WITH DISCOUNT */}
+          <ProductPrice discount={discount} price={price} />
+        </Box>
+
+        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
+        <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+          <IconButton onClick={() => handleRemoveProductFromWishlist(lineId)}>
+            <Delete fontSize="small" color="inherit" />
+          </IconButton>
+        </Box>
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,53 @@
+import BazaarCard, {
+  Props,
+} from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import React, { ComponentType } from "react";
+
+export const StyledBazaarCard: ComponentType<Props> = styled(BazaarCard)({
+  height: "100%",
+  margin: "auto",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: "8px",
+  position: "relative",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  transition: "all 250ms ease-in-out",
+  ":hover": { "& .hover-box": { opacity: 1 } },
+});
+
+export const ImageWrapper: ComponentType<React.ComponentProps<"div">> = styled(
+  "div",
+)(({ theme }) => ({
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+}));
+
+export const HoverIconWrapper: ComponentType<React.ComponentProps<"div">> =
+  styled("div")({
+    zIndex: 2,
+    top: "7px",
+    opacity: 0,
+    right: "15px",
+    display: "flex",
+    cursor: "pointer",
+    position: "absolute",
+    flexDirection: "column",
+    transition: "all 0.3s ease-in-out",
+  });
+
+export const ContentWrapper: ComponentType<React.ComponentProps<"div">> =
+  styled("div")({
+    gap: 8,
+    display: "flex",
+    padding: "1rem",
+    "& .title, & .categories": {
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+    },
+  });

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