@evenicanpm/storefront-core 1.0.5 → 1.1.0

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

@@ -1,43 +1,54 @@
 "use client";
 
-import { createContext, ReactNode, useContext, useMemo, useState } from "react";
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
 import Link from "next/link";
 import Box from "@mui/material/Box";
 import Rating from "@mui/material/Rating";
 import IconButton from "@mui/material/IconButton";
 import { Delete, ShoppingCart } from "@mui/icons-material";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import { useTranslations } from "next-intl";
+import { useIsFetching } from "@tanstack/react-query";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+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 ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
 import ProductTitle from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-title";
-import QuantityBtns from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/components/quantity-buttons";
+import QuantityBtns from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
-import HoverActions from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/components/hover-actions";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 // STYLED COMPONENTS
 import {
   ImageWrapper,
   ContentWrapper,
   StyledBazaarCard,
+  HoverIconWrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/styles/index";
-
+// LIBRARY AND HOOKS
 import buildDetailUrl from "@/lib/build-detail-url";
-import { useTranslations } from "next-intl";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import useFavorite from "@/hooks/use-favorite";
+// API AND SCHEMAS
 import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
 import useUpdateWishlist from "@/api-manager/services/user/mutations/update-wishlist";
 import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { WISHLIST_DETAILS_QUERY_KEY } from "@/api-manager/services/user/queries/get-wishlist-details";
 import {
   ExtendedWishlist,
   ExtendedProductListLine,
   WishlistLinesInput,
 } from "@/api-manager/schemas/user.schema";
 import { Cart } from "@/api-manager/schemas/cart.schema";
-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";
-import React from "react";
 
 function findChild(
   children: ReactNode,
@@ -57,7 +68,6 @@ function findChild(
   return found;
 }
 type InternalCtx = {
-  favorite: boolean;
   handleToggleFavorite: () => void;
   openProductModal: boolean;
   handleToggleProductModal: () => void;
@@ -108,11 +118,10 @@ const ProductCard = ({
     (item: ExtendedProductListLine) => item.ProductId === product.id,
   );
 
-  const [favorite, setFavorite] = useState(!!foundWishlistProduct);
   const [openProductModal, setOpenProductModal] = useState(false);
   const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
   const [quantity, setQuantity] = useState(foundWishlistProduct?.Quantity ?? 0);
-  const [isLineUpdating, setIsLineUpdating] = useState(false);
+  const [isLineUpdatingLocal, setIsLineUpdatingLocal] = useState(false);
 
   // detect if WishlistControls are being rendered
   const containsWishlistControls = useMemo(
@@ -155,10 +164,6 @@ const ProductCard = ({
     setOpenProductModal((prev) => !prev);
   };
 
-  const handleAddRemoveSuccess = () => {
-    setFavorite(!favorite);
-  };
-
   const handleAddItemToCart = async () => {
     if (!cart) return;
     try {
@@ -179,53 +184,67 @@ const ProductCard = ({
     }
   };
 
+  const isWishlistFetching =
+    useIsFetching({ queryKey: [WISHLIST_DETAILS_QUERY_KEY] }) > 0;
+  const isLineUpdating = isLineUpdatingLocal || isWishlistFetching;
+
   const handleIncrementQuantity = async () => {
-    setIsLineUpdating(true);
-    if (containsWishlistControls && wishlist) {
-      try {
-        const updatedLines = wishlist.ProductListLines.map((line) => {
+    if (isLineUpdating) return;
+    setIsLineUpdatingLocal(true);
+
+    try {
+      if (containsWishlistControls && wishlist) {
+        const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
           const updated = { ...line, Product: undefined };
-          if (line.ProductId === Number(product.id))
+          if (line.ProductId === Number(product.id)) {
             updated.Quantity = quantity + 1;
+          }
           return updated;
         });
+        if (!updatedLines) return;
         await updateWishlist({
-          Id: wishlist.Id,
+          Id: wishlist?.Id,
           ProductListLines: updatedLines,
         });
-        setQuantity((q) => q + 1);
-      } catch {}
-    } else {
+      }
+
       setQuantity((q) => q + 1);
+    } catch (err) {
+      console.error("Increment failed", err);
+    } finally {
+      setIsLineUpdatingLocal(false);
     }
-    setIsLineUpdating(false);
   };
 
   const handleDecrementQuantity = async () => {
-    if (quantity <= 0) return;
-    setIsLineUpdating(true);
-    if (containsWishlistControls && wishlist) {
-      try {
-        const updatedLines = wishlist.ProductListLines.map((line) => {
+    if (isLineUpdating || quantity <= 0) return;
+    setIsLineUpdatingLocal(true);
+
+    try {
+      if (containsWishlistControls && wishlist) {
+        const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
           const updated = { ...line, Product: undefined };
-          if (line.ProductId === Number(product.id))
+          if (line.ProductId === Number(product.id)) {
             updated.Quantity = quantity - 1;
+          }
           return updated;
         });
+        if (!updatedLines) return;
         await updateWishlist({
-          Id: wishlist.Id,
+          Id: wishlist?.Id,
           ProductListLines: updatedLines,
         });
-        setQuantity((q) => q - 1);
-      } catch {}
-    } else {
+      }
+
       setQuantity((q) => q - 1);
+    } catch (err) {
+      console.error("Decrement failed", err);
+    } finally {
+      setIsLineUpdatingLocal(false);
     }
-    setIsLineUpdating(false);
   };
 
   const internalContextValue = {
-    favorite,
     handleToggleFavorite,
     openProductModal,
     handleToggleProductModal,
@@ -249,7 +268,6 @@ const ProductCard = ({
             open={openAddToWishlistDialog}
             handleClose={() => setOpenAddToWishlistDialog(false)}
             productId={Number(product.id)}
-            onSuccess={handleAddRemoveSuccess}
           />
         )}
         {openProductModal && (
@@ -331,7 +349,7 @@ ProductCard.Price = () => {
   if (!ctx) return null;
 
   const { discount, price } = ctx.product;
-
+  if (!price || !discount) return null;
   return <ProductPrice discount={discount} price={price} />;
 };
 
@@ -358,18 +376,40 @@ const QuantityButtons = () => {
 
 ProductCard.QuantityButtons = QuantityButtons;
 
-ProductCard.HoverActions = () => {
+ProductCard.HoverActions = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
+  );
+};
+
+ProductCard.QuickViewButton = () => {
   const internal = useContext(ProductCardInternalContext);
   if (!internal) return null;
 
-  const { favorite, handleToggleProductModal, handleToggleFavorite } = internal;
+  const { handleToggleProductModal } = internal;
 
   return (
-    <HoverActions
-      isFavorite={favorite}
-      toggleView={handleToggleProductModal}
-      toggleFavorite={handleToggleFavorite}
-    />
+    <IconButton onClick={handleToggleProductModal}>
+      <RemoveRedEye color="disabled" fontSize="small" />
+    </IconButton>
+  );
+};
+
+ProductCard.FavoriteButton = () => {
+  const internal = useContext(ProductCardInternalContext);
+  if (!internal) return null;
+
+  const { handleToggleFavorite } = internal;
+
+  const ctx = useContext(ProductCardContext);
+  if (!ctx) return null;
+
+  const { id } = ctx.product;
+
+  const isFavorite = useFavorite(Number(id));
+
+  return (
+    <FavoriteButton isFavorite={isFavorite} onToggle={handleToggleFavorite} />
   );
 };
 

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

@@ -1,6 +1,8 @@
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, ReactNode, useState } from "react";
 import Link from "next/link";
 import Rating from "@mui/material/Rating";
+import IconButton from "@mui/material/IconButton";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
 // GLOBAL CUSTOM COMPONENTS
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
@@ -8,17 +10,22 @@ import {
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-// STYLED COMPONENTS
-import { PriceText } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
-// LOCAL COMPONENTS
+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 QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/components/quantity-buttons";
-// LOCAL CUSTOM HOOKS
-import useProduct from "@evenicanpm/storefront-core/src/components-v2/product-cards/use-product";
-
+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";
+// LIBRARY AND HOOKS
+import { calculateDiscount, currency } from "@/lib/lib";
 import buildDetailUrl from "@/lib/build-detail-url";
+import useCart from "@/hooks/use-cart";
+import useFavorite from "@/hooks/use-favorite";
+// STYLED COMPONENTS
+import {
+  PriceText,
+  HoverIconWrapper,
+} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
 
 type Product = {
   title: string;
@@ -30,7 +37,11 @@ type Product = {
   id: number;
 };
 
-const ProductCardPlpContext = createContext<{ product: Product } | null>(null);
+const ProductCardPlpContext = createContext<{
+  product: Product;
+  setOpenAddToWishlistDialog?: (open: boolean) => void;
+  setOpenProductModal?: (open: boolean) => void;
+} | null>(null);
 
 type ProductCardPlpProps = {
   product: Product;
@@ -38,37 +49,74 @@ type ProductCardPlpProps = {
 };
 
 const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
+  const [openProductModal, setOpenProductModal] = useState(false);
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+
   return (
-    <ProductCardPlpContext.Provider value={{ product }}>
+    <ProductCardPlpContext.Provider
+      value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
+    >
       <div>{children}</div>
+      {openAddToWishlistDialog && (
+        <AddToWishlistDialog
+          open={openAddToWishlistDialog}
+          handleClose={() => setOpenAddToWishlistDialog(false)}
+          productId={Number(product.id)}
+        />
+      )}
+      {openProductModal && (
+        <ProductViewDialog
+          openDialog={openProductModal}
+          handleCloseDialog={() => setOpenProductModal(false)}
+          productId={Number(product.id)}
+        />
+      )}
     </ProductCardPlpContext.Provider>
   );
 };
 
-ProductCardPlp.Image = () => {
+ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
   const ctx = useContext(ProductCardPlpContext);
   if (!ctx) return null;
 
-  const { title, id, imgUrl, discount = 0 } = ctx.product;
+  const { title, id } = ctx.product;
 
   return (
     <Link href={buildDetailUrl(title, id)}>
-      <FlexBox position="relative" bgcolor="grey.50" borderRadius={3} mb={2}>
-        <ImageWithFallback
-          alt={title ?? "Product Image"}
-          width={380}
-          height={379}
-          src={imgUrl}
-          style={{ borderRadius: "12px" }}
-        />
-        {discount ? (
-          <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
-        ) : null}
+      <FlexBox
+        className="hover-box-container"
+        position="relative"
+        bgcolor="grey.50"
+        borderRadius={3}
+        mb={2}
+      >
+        {children}
       </FlexBox>
     </Link>
   );
 };
 
+ProductCardPlp.Image = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { title, imgUrl, discount = 0 } = ctx.product;
+  return (
+    <>
+      <ImageWithFallback
+        alt={title ?? "Product Image"}
+        width={380}
+        height={379}
+        src={imgUrl}
+        style={{ borderRadius: "12px" }}
+      />
+      {discount ? (
+        <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
+      ) : null}
+    </>
+  );
+};
+
 ProductCardPlp.Body = ({ children }: { children: React.ReactNode }) => {
   return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
 };
@@ -108,52 +156,93 @@ ProductCardPlp.Price = () => {
   const ctx = useContext(ProductCardPlpContext);
   if (!ctx) return null;
 
-  const { discount, price } = ctx.product;
+  const { discount = 0, price } = ctx.product;
+  if (price == null) return null;
 
   return (
     <PriceText>
-      {discount ? <span className="base-price">{currency(price)}</span> : null}
-      {calculateDiscount(price, discount)}
+      {discount > 0 ? (
+        <>
+          <span className="base-price">{currency(price)}</span>
+          {calculateDiscount(price, discount)}
+        </>
+      ) : (
+        currency(price)
+      )}
     </PriceText>
   );
 };
 
+ProductCardPlp.HoverActions = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
+  );
+};
+
+ProductCardPlp.QuickViewButton = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  return (
+    <IconButton
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        ctx.setOpenProductModal?.(true);
+      }}
+    >
+      <RemoveRedEye color="disabled" fontSize="small" />
+    </IconButton>
+  );
+};
+
+ProductCardPlp.FavoriteButton = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { id } = ctx.product;
+
+  const isFavorite = useFavorite(Number(id));
+
+  return (
+    <FavoriteButton
+      isFavorite={isFavorite}
+      onToggle={() => {
+        ctx.setOpenAddToWishlistDialog?.(true);
+      }}
+    />
+  );
+};
+
+// 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.
 ProductCardPlp.QuantityButtons = () => {
   const ctx = useContext(ProductCardPlpContext);
   if (!ctx) return null;
 
-  const { id, price, title, imgUrl, slug } = ctx.product;
-  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,
-      name: title,
-      imgUrl,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
+    const qty = quantity + 1;
+    handleCartAmountChange(qty);
+    setQuantity(qty);
   };
 
   const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
+    if (quantity <= 0) return;
+    const qty = quantity - 1;
+    handleCartAmountChange(qty);
+    setQuantity(qty);
   };
+
   return (
     <QuantityButtons
-      quantity={cartItem?.Quantity || 0}
+      quantity={quantity}
       handleIncrement={handleIncrementQuantity}
       handleDecrement={handleDecrementQuantity}
+      isLineUpdating={loading}
     />
   );
 };

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

@@ -16,3 +16,20 @@ export const PriceText = styled("p")(({ theme }) => ({
     color: theme.palette.grey[600],
   },
 }));
+
+export const HoverIconWrapper = styled("div")({
+  zIndex: 2,
+  top: "7px",
+  right: "15px",
+  display: "flex",
+  cursor: "pointer",
+  position: "absolute",
+  flexDirection: "column",
+  opacity: 0,
+  transition: "all 0.3s ease-in-out",
+
+  // Show when parent (with .hover-box-container) is hovered
+  ".hover-box-container:hover &": {
+    opacity: 1,
+  },
+});