@evenicanpm/storefront-core 1.0.6 → 1.1.0

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

@@ -1,21 +1,25 @@
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, ReactNode, useState } 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";
+import IconButton from "@mui/material/IconButton";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
 // GLOBAL CUSTOM COMPONENTS
 import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-// LOCAL CUSTOM HOOK
-import useProduct from "@evenicanpm/storefront-core/src/components-v2/product-cards/use-product";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
 import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
-import AddToCartButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/components/add-to-cart";
-import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/components/favorite-button";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 import ProductTags from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/components/tags";
-
+// LIBRARY AND HOOKS
 import buildDetailUrl from "@/lib/build-detail-url";
+import useCart from "@/hooks/use-cart";
+import useFavorite from "@/hooks/use-favorite";
 
 // STYLED COMPONENT
 const Wrapper = styled(Card)({
@@ -65,9 +69,11 @@ type Product = {
   tags?: Array<string>;
 };
 
-const ProductCardPlpListContext = createContext<{ product: Product } | null>(
-  null,
-);
+const ProductCardPlpListContext = createContext<{
+  product: Product;
+  setOpenAddToWishlistDialog: (open: boolean) => void;
+  setOpenProductModal: (open: boolean) => void;
+} | null>(null);
 
 type ProductCardPlpListProps = {
   product: Product;
@@ -75,23 +81,44 @@ type ProductCardPlpListProps = {
 };
 
 const ProductCardPlpList = ({ product, children }: ProductCardPlpListProps) => {
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+  const [openProductModal, setOpenProductModal] = useState(false);
   return (
-    <ProductCardPlpListContext.Provider value={{ product }}>
+    <ProductCardPlpListContext.Provider
+      value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
+    >
       <Wrapper>{children}</Wrapper>
+      {openProductModal && (
+        <ProductViewDialog
+          openDialog={openProductModal}
+          handleCloseDialog={() => setOpenProductModal(false)}
+          productId={Number(product.id)}
+        />
+      )}
+      {openAddToWishlistDialog && (
+        <AddToWishlistDialog
+          open={openAddToWishlistDialog}
+          handleClose={() => setOpenAddToWishlistDialog(false)}
+          productId={Number(product.id)}
+        />
+      )}
     </ProductCardPlpListContext.Provider>
   );
 };
 
-ProductCardPlpList.FavoriteButton = () => {
+ProductCardPlpList.QuickViewButton = () => {
   const ctx = useContext(ProductCardPlpListContext);
   if (!ctx) return null;
 
-  const { slug } = ctx.product;
-
-  const { isFavorite, toggleFavorite } = useProduct(slug);
-
   return (
-    <FavoriteButton isFavorite={isFavorite} toggleFavorite={toggleFavorite} />
+    <IconButton
+      sx={{ position: "absolute", top: 10, right: 15, zIndex: 1 }}
+      onClick={() => {
+        ctx.setOpenProductModal(true);
+      }}
+    >
+      <RemoveRedEye color="disabled" fontSize="small" />
+    </IconButton>
   );
 };
 
@@ -172,45 +199,52 @@ ProductCardPlpList.Price = () => {
   return <ProductPrice price={price} discount={discount ?? 0} />;
 };
 
-ProductCardPlpList.QuantityButtons = () => {
+ProductCardPlpList.FavoriteButton = () => {
   const ctx = useContext(ProductCardPlpListContext);
   if (!ctx) return null;
 
-  const { slug, id, price, imgUrl, title } = ctx.product;
+  const { id } = ctx.product;
+  const isFavorite = useFavorite(id);
+
+  return (
+    <FavoriteButton
+      isFavorite={isFavorite}
+      onToggle={() => ctx.setOpenAddToWishlistDialog(true)}
+      size="small"
+      sx={{ position: "absolute", bottom: 10, right: 15, zIndex: 1 }}
+    />
+  );
+};
+
+// Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
+// So hide them for now, implement based on client requirements.
+ProductCardPlpList.QuantityButtons = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
 
-  const { cartItem, handleCartAmountChange } = useProduct(slug);
+  const { id } = ctx.product;
+  const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
+  const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
 
   const handleIncrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
+    const qty = quantity + 1;
+    handleCartAmountChange(qty);
+    setQuantity(qty);
   };
 
   const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
+    if (quantity <= 0) return;
+    const qty = quantity - 1;
+    handleCartAmountChange(qty);
+    setQuantity(qty);
   };
 
   return (
-    <AddToCartButton
-      quantity={cartItem?.Quantity ?? 0}
-      handleDecrement={handleDecrementQuantity}
+    <QuantityButtons
+      quantity={quantity}
       handleIncrement={handleIncrementQuantity}
+      handleDecrement={handleDecrementQuantity}
+      isLineUpdating={loading}
     />
   );
 };

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

@@ -1,15 +1,11 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, ReactNode, useState } 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 "@evenicanpm/storefront-core/src/components-v2/product-cards/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";
@@ -18,14 +14,17 @@ import {
   Paragraph,
   Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// UTILS LIBRARY FUNCTION
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+// LIBRARY AND HOOKS
 import buildDetailUrl from "@/lib/build-detail-url";
 import { currency } from "@/lib/lib";
+import useFavorite from "@/hooks/use-favorite";
 // STYLED COMPONENTS
 import {
   Card,
   CardMedia,
-  FavoriteButton,
   QuickViewSmallButton,
 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search/styles/index";
 
@@ -47,12 +46,35 @@ type ProductCardSearchProps = {
 
 const ProductCardSearchContext = createContext<{
   product: Product;
+  handleToggleProductModal: () => void;
+  setOpenAddToWishlistDialog: (open: boolean) => void;
 } | null>(null);
 
 const ProductCardSearch = ({ product, children }: ProductCardSearchProps) => {
+  const [openProductModal, setOpenProductModal] = useState(false);
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+  const handleToggleProductModal = () => {
+    setOpenProductModal((prev) => !prev);
+  };
   return (
-    <ProductCardSearchContext.Provider value={{ product }}>
+    <ProductCardSearchContext.Provider
+      value={{ product, handleToggleProductModal, setOpenAddToWishlistDialog }}
+    >
       <Card>{children}</Card>
+      {openProductModal && (
+        <ProductViewDialog
+          openDialog={openProductModal}
+          handleCloseDialog={handleToggleProductModal}
+          productId={Number(product.id)}
+        />
+      )}
+      {openAddToWishlistDialog && (
+        <AddToWishlistDialog
+          open={openAddToWishlistDialog}
+          handleClose={() => setOpenAddToWishlistDialog(false)}
+          productId={Number(product.id)}
+        />
+      )}
     </ProductCardSearchContext.Provider>
   );
 };
@@ -136,30 +158,37 @@ ProductCardSearch.Rating = () => {
 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">
+    <QuickViewSmallButton
+      className="product-actions"
+      onClick={ctx.handleToggleProductModal}
+    >
       <RemoveRedEye className="icon" fontSize="small" />
     </QuickViewSmallButton>
   );
 };
 
-ProductCardSearch.WishlistButton = () => {
+ProductCardSearch.FavoriteButton = () => {
   const ctx = useContext(ProductCardSearchContext);
   if (!ctx) return null;
-  const { product } = ctx;
-  const { isFavorite } = useProduct(product?.slug);
+  const { id } = ctx.product;
+  const isFavorite = useFavorite(Number(id));
 
   return (
-    <FavoriteButton className="product-actions" onClick={() => {}}>
-      {isFavorite ? (
-        <Favorite className="icon" fontSize="small" color="primary" />
-      ) : (
-        <FavoriteBorder className="icon" fontSize="small" />
-      )}
-    </FavoriteButton>
+    <FavoriteButton
+      className="product-actions"
+      isFavorite={isFavorite}
+      onToggle={() => ctx.setOpenAddToWishlistDialog(true)}
+      sx={{
+        top: 55,
+        right: -40,
+        position: "absolute",
+        backgroundColor: "white",
+        transition: "right 0.3s .2s",
+      }}
+      customIconSize={16}
+    />
   );
 };
 

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

@@ -31,16 +31,6 @@ export const AddToCartButton = styled(IconButton)(({ theme }) => ({
   ".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,

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

@@ -50,7 +50,26 @@ interface ProductDialogContext {
 /**
  * @internal
  */
-export const ProductDialogContext = createContext(null);
+export const ProductDialogContext = createContext<ProductDialogContext | null>(
+  null,
+);
+
+/**
+ * Hook to safely access ProductDialogContext
+ * @throws When used outside of ProductDialogProvider
+ * @returns The product dialog context value
+ */
+export const useProductDialog = () => {
+  const context = useContext(ProductDialogContext);
+
+  if (context === null) {
+    throw new Error(
+      "useProductDialog must be used within a ProductDialogProvider",
+    );
+  }
+
+  return context;
+};
 
 /**
  * @category Compound Component
@@ -70,10 +89,10 @@ export const ProductDialogContext = createContext(null);
  */
 export default function ProductDialog(props: Props) {
   const { children, openDialog, handleCloseDialog } = props;
-  const { data: product, isPending } = getProductById.useData({
+  const { data: product } = getProductById.useSuspenseData({
     id: Number(props.productId),
   });
-  if (isPending) return null;
+  if (!product) return null;
   return (
     <ProductDialogContext.Provider
       value={{ product, openDialog, handleCloseDialog }}
@@ -84,9 +103,7 @@ export default function ProductDialog(props: Props) {
         onClose={handleCloseDialog}
         sx={{ zIndex: 1501 }}
       >
-        <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
-          {children}
-        </DialogContent>
+        {children}
       </Dialog>
     </ProductDialogContext.Provider>
   );
@@ -100,10 +117,13 @@ export const ProductDialogContent = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { handleCloseDialog } = useContext(ProductDialogContext);
+  const { handleCloseDialog } = useProductDialog();
 
   return (
-    <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
+    <DialogContent
+      sx={{ maxWidth: 900, width: "100%" }}
+      onClick={(e) => e.stopPropagation()}
+    >
       <div>
         <Grid container spacing={3}>
           {children}
@@ -111,7 +131,10 @@ export const ProductDialogContent = ({
       </div>
       <IconButton
         sx={{ position: "absolute", top: 3, right: 3 }}
-        onClick={handleCloseDialog}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleCloseDialog?.();
+        }}
       >
         <Close fontSize="small" color="secondary" />
       </IconButton>
@@ -123,19 +146,20 @@ export const ProductDialogContent = ({
  * @category Sub-Component
  */
 export const ProductDialogContentImages = () => {
-  const { product } = useContext(ProductDialogContext);
+  const { product } = useProductDialog();
 
   return (
     <Grid size={{ md: 6, xs: 12 }}>
       <Carousel
         slidesToShow={1}
+        infinite={false}
         arrowStyles={{
           boxShadow: 0,
           color: "primary.main",
           backgroundColor: "transparent",
         }}
       >
-        {product?.Images.map((item: string, index: number) => (
+        {product?.Images?.map((item: string, index: number) => (
           <BazaarImage
             key={index}
             src={item}
@@ -172,7 +196,7 @@ export const ProductDialogContentInfo = ({
  * @category Sub-Component
  */
 export const InfoName = () => {
-  const { product } = useContext(ProductDialogContext);
+  const { product } = useProductDialog();
   return <H2>{product?.Name}</H2>;
 };
 
@@ -191,7 +215,7 @@ export const InfoCategory = () => {
  * @category Sub-Component
  */
 export const InfoPrice = () => {
-  const { product } = useContext(ProductDialogContext);
+  const { product } = useProductDialog();
   return <H1 color="primary.main">{currency(product?.Price)}</H1>;
 };
 
@@ -199,7 +223,7 @@ export const InfoPrice = () => {
  * @category Sub-Component
  */
 export const InfoDescription = () => {
-  const { product } = useContext(ProductDialogContext);
+  const { product } = useProductDialog();
   return <Paragraph my={2}>{product?.Description}</Paragraph>;
 };
 
@@ -219,7 +243,7 @@ export const InfoRating = () => {
  * @category Sub-Component
  */
 export const InfoAddToCart = () => {
-  const { product } = useContext(ProductDialogContext);
+  const { product } = useProductDialog();
   return (
     <>
       <Divider sx={{ mb: 2 }} />

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

@@ -37,12 +37,27 @@ export const QuantityContext = createContext<QuantityContextType | undefined>(
   undefined,
 );
 
+/**
+ * Hook to safely access QuantityContext
+ * @throws {Error} When used outside of QuantityProvider
+ * @returns {QuantityContextType} The quantity context value
+ */
+export const useQuantity = () => {
+  const context = useContext(QuantityContext);
+
+  if (context === undefined) {
+    throw new Error("useQuantity must be used within a QuantityProvider");
+  }
+
+  return context;
+};
+
 /**
  * @category Props
  */
 export interface QuantityButtonProps {
   /** The cartline that this component will display the quantity of */
-  productId: number;
+  productId: number | undefined;
   /** Is the item out of stock? */
   isOOS?: boolean;
   /** React children */
@@ -90,6 +105,8 @@ export function QuantityButtons({
     );
   }
 
+  if (!currentCartLine?.Quantity) return null;
+
   const value: QuantityContextType = {
     loading,
     quantity: currentCartLine?.Quantity,
@@ -110,8 +127,7 @@ export function QuantityButtons({
  * @category Sub-Component
  */
 QuantityButtons.Remove = () => {
-  const { handleCartAmountChange, loading, productCartLine } =
-    useContext(QuantityContext);
+  const { handleCartAmountChange, loading, productCartLine } = useQuantity();
 
   return (
     <Button
@@ -137,8 +153,7 @@ QuantityButtons.Remove = () => {
  * @category Sub-Component
  */
 QuantityButtons.Add = () => {
-  const { handleCartAmountChange, loading, productCartLine } =
-    useContext(QuantityContext);
+  const { handleCartAmountChange, loading, productCartLine } = useQuantity();
 
   return (
     <Button
@@ -164,7 +179,7 @@ QuantityButtons.Add = () => {
  * @category Sub-Component
  */
 QuantityButtons.Quantity = () => {
-  const { loading, productCartLine } = useContext(QuantityContext);
+  const { loading, productCartLine } = useQuantity();
   return (
     <H3
       fontWeight="600"
@@ -174,7 +189,7 @@ QuantityButtons.Quantity = () => {
       {loading ? (
         <CircularProgress size={"10px"} />
       ) : (
-        productCartLine?.Quantity.toString().padStart(2, "0")
+        productCartLine?.Quantity?.toString().padStart(2, "0")
       )}
     </H3>
   );

package/src/components-v2/product-quantity-variants/index.tsx

@@ -33,7 +33,7 @@ export default function QuantityVariantsSelect({ product }: Props) {
     allDimensionsSelected,
   } = useVariants(product);
 
-  const { handleAddToCart } = useCart(RecordId, selectedVariant.RecordId);
+  const { handleAddToCart } = useCart(selectedVariant?.RecordId);
 
   const searchCriteria = {
     searchCriteria: {

package/src/components-v2/products-view/compound/context.ts

@@ -1,7 +1,7 @@
 /**
  * @module ProductsView
  */
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import { ProductPrice } from "@/api-manager/schemas/product.schema";
@@ -17,9 +17,54 @@ export interface ProductsViewContext {
   productPrices?: ProductPrice[];
 }
 
+export interface ProductsViewCardContext {
+  product: Product;
+  price?: ProductPrice;
+}
+
 /**
  * @internal
  */
 export const ProductsViewContext = createContext<null | ProductsViewContext>(
   null,
 );
+
+/**
+ * @internal
+ */
+export const ProductsViewCardContext =
+  createContext<null | ProductsViewCardContext>(null);
+
+/**
+ * Hook to safely access ProductsViewContext
+ * @throws When used outside of ProductsViewProvider
+ * @returns The products view context value
+ */
+export const useProductsView = () => {
+  const context = useContext(ProductsViewContext);
+
+  if (context === null) {
+    throw new Error(
+      "useProductsView must be used within a ProductsViewProvider",
+    );
+  }
+
+  return context;
+};
+
+/**
+ * Hook to safely access ProductsViewCardContext
+ * @throws When used outside of ProductsViewCardProvider
+ * @returns The product card context value
+ */
+export const useProductsViewCard = () => {
+  const context = useContext(ProductsViewCardContext);
+
+  if (context === null) {
+    throw new Error(
+      "useProductsViewCard must be used within a ProductsViewCardProvider",
+    );
+  }
+
+  return context;
+};