@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/product-cards/product-card-plp-list/product-card.tsx

@@ -0,0 +1,219 @@
+import { createContext, useContext, ReactNode } from "react";
+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";
+import ProductTags from "./components/tags";
+
+// 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 Product = {
+  id: number;
+  discount?: number;
+  slug: string;
+  price: number;
+  title: string;
+  imgUrl: string;
+  rating: number;
+  tags?: Array<string>;
+};
+
+const ProductCardPlpListContext = createContext<{ product: Product } | null>(
+  null,
+);
+
+type ProductCardPlpListProps = {
+  product: Product;
+  children: ReactNode;
+};
+
+const ProductCardPlpList = ({ product, children }: ProductCardPlpListProps) => {
+  return (
+    <ProductCardPlpListContext.Provider value={{ product }}>
+      <Wrapper>{children}</Wrapper>
+    </ProductCardPlpListContext.Provider>
+  );
+};
+
+ProductCardPlpList.FavoriteButton = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { slug } = ctx.product;
+
+  const { isFavorite, toggleFavorite } = useProduct(slug);
+
+  return (
+    <FavoriteButton isFavorite={isFavorite} toggleFavorite={toggleFavorite} />
+  );
+};
+
+ProductCardPlpList.Body = ({ children }: { children: React.ReactNode }) => {
+  return <ContentWrapper>{children}</ContentWrapper>;
+};
+
+ProductCardPlpList.Image = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { title, imgUrl, discount = 0 } = ctx.product;
+
+  return (
+    <div className="img-wrapper">
+      <DiscountChip discount={discount ?? 0} />
+      <ImageWithFallback
+        alt={title ?? "Product Image"}
+        src={imgUrl}
+        fill
+        style={{ objectFit: "contain" }}
+        sizes="150px"
+      />
+    </div>
+  );
+};
+
+ProductCardPlpList.Content = ({ children }: { children: React.ReactNode }) => {
+  return <div className="content">{children}</div>;
+};
+
+ProductCardPlpList.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+ProductCardPlpList.Actions = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+ProductCardPlpList.Tags = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { tags } = ctx.product;
+  if (!Array.isArray(tags) || tags.length === 0) return null;
+  return <ProductTags tags={tags} />;
+};
+
+ProductCardPlpList.Title = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { title, id } = ctx.product;
+  return (
+    <Link href={buildDetailUrl(title ?? "", id)}>
+      <H5 fontWeight="700" mt={1} mb={2}>
+        {title}
+      </H5>
+    </Link>
+  );
+};
+
+ProductCardPlpList.Rating = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { rating } = ctx.product;
+
+  return <Rating size="small" value={rating} color="warn" readOnly />;
+};
+
+ProductCardPlpList.Price = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { discount, price } = ctx.product;
+
+  return <ProductPrice price={price} discount={discount ?? 0} />;
+};
+
+ProductCardPlpList.QuantityButtons = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { slug, id, price, imgUrl, title } = ctx.product;
+
+  const { cartItem, handleCartAmountChange } = 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 (
+    <AddToCartButton
+      quantity={cartItem?.Quantity ?? 0}
+      handleDecrement={handleDecrementQuantity}
+      handleIncrement={handleIncrementQuantity}
+    />
+  );
+};
+
+export default ProductCardPlpList;

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// MUI ICON COMPONENTS
+import { RemoveRedEye } from "@mui/icons-material";
+import Favorite from "@mui/icons-material/Favorite";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H4,
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// UTILS LIBRARY FUNCTION
+import buildDetailUrl from "@/lib/build-detail-url";
+import { currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import {
+  Card,
+  CardMedia,
+  FavoriteButton,
+  QuickViewSmallButton,
+} from "./styles/index";
+
+type Product = {
+  slug: string;
+  id: string | number;
+  title: string;
+  price: number;
+  thumbnail: string;
+  categories: string[];
+  reviews: number;
+  rating: number;
+};
+
+type ProductCardSearchProps = {
+  product: Product;
+  children: ReactNode;
+};
+
+const ProductCardSearchContext = createContext<{
+  product: Product;
+} | null>(null);
+
+const ProductCardSearch = ({ product, children }: ProductCardSearchProps) => {
+  return (
+    <ProductCardSearchContext.Provider value={{ product }}>
+      <Card>{children}</Card>
+    </ProductCardSearchContext.Provider>
+  );
+};
+
+// ===== Subcomponents =====
+
+ProductCardSearch.CardMedia = ({ children }: { children: React.ReactNode }) => {
+  return <CardMedia>{children}</CardMedia>;
+};
+ProductCardSearch.Image = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { title, id, thumbnail } = product;
+  return (
+    <Link href={buildDetailUrl(title, Number(id))}>
+      <LazyImage
+        width={300}
+        height={300}
+        alt={title}
+        className="product-img"
+        src={thumbnail}
+      />
+    </Link>
+  );
+};
+
+ProductCardSearch.Info = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box p={1} textAlign="center">
+      {children}
+    </Box>
+  );
+};
+ProductCardSearch.Category = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { categories } = product;
+  if (!categories.length) return null;
+  return <Small color="grey.500">{categories[0]}</Small>;
+};
+
+ProductCardSearch.Title = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return <Paragraph fontWeight="bold">{product?.title}</Paragraph>;
+};
+
+ProductCardSearch.Price = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return (
+    <H4 fontWeight={700} py={0.5}>
+      {currency(product?.price)}
+    </H4>
+  );
+};
+
+ProductCardSearch.Rating = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return (
+    <FlexRowCenter gap={1}>
+      <Rating
+        name="read-only"
+        value={product?.rating}
+        readOnly
+        sx={{ fontSize: 16 }}
+      />
+      <Small fontWeight={600} color="grey.500">
+        ({product?.reviews} Reviews)
+      </Small>
+    </FlexRowCenter>
+  );
+};
+
+ProductCardSearch.QuickViewButton = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { id, title, thumbnail, price, slug } = product;
+
+  return (
+    <QuickViewSmallButton className="product-actions">
+      <RemoveRedEye className="icon" fontSize="small" />
+    </QuickViewSmallButton>
+  );
+};
+
+ProductCardSearch.WishlistButton = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { isFavorite } = useProduct(product?.slug);
+
+  return (
+    <FavoriteButton className="product-actions" onClick={() => {}}>
+      {isFavorite ? (
+        <Favorite className="icon" fontSize="small" color="primary" />
+      ) : (
+        <FavoriteBorder className="icon" fontSize="small" />
+      )}
+    </FavoriteButton>
+  );
+};
+
+export default ProductCardSearch;

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/{components → compound}/dimensions-group-error.tsx

@@ -1,5 +1,5 @@
 /**
- * @module dimensions
+ * @module ProductDimensions
  */
 "use client";
 import { DimensionsContext } from "./dimensions";

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

@@ -1,5 +1,5 @@
 /**
- * @module dimensions
+ * @module ProductDimensions
  */
 "use client";
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";

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

@@ -1,5 +1,5 @@
 /**
- * @module dimensions
+ * @module ProductDimensions
  */
 import React, { useContext } from "react";
 import { Chip } from "@mui/material";

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

@@ -1,5 +1,5 @@
 /**
- * @module dimensions
+ * @module ProductDimensions
  */
 "use client";
 import { DimensionGroupListChip } from "./dimensions-group-list-chip";

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

@@ -1,5 +1,5 @@
 /**
- * @module dimensions
+ * @module ProductDimensions
  */
 "use client";
 import Box from "@mui/material/Box";

package/src/components-v2/product-dimensions/{components → compound}/dimensions.tsx

@@ -1,6 +1,3 @@
-/**
- * @module dimensions
- */
 "use client";
 import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 import React, { PropsWithChildren, ReactElement, createContext } from "react";

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

@@ -1,6 +1,6 @@
 "use client";
 import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-import { Dimensions } from "./components/dimensions";
+import { Dimensions } from "./compound/dimensions";
 
 // TODO: When selecting a single dimension, loading spinner starts... not necessary, inefficient.