@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/components/_components/product-cards/product-card-1/components/quantity-buttons.tsx

@@ -6,51 +6,60 @@ import Remove from "@mui/icons-material/Remove";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@/components/_components/flex-box/index";
 import { Paragraph } from "@/components/_components/Typography";
+import { CircularProgress } from "@mui/material";
 
 // ==============================================================
 interface Props {
   quantity: number;
   handleDecrement: () => void;
   handleIncrement: () => void;
+  isLineUpdating: boolean;
 }
 // ==============================================================
 
 export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement } = props || {};
+  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
+    props || {};
 
   return (
     <FlexBox
-      width="30px"
       alignItems="center"
       className="add-cart"
-      flexDirection="column-reverse"
+      flexDirection="row-reverse"
       justifyContent={quantity ? "space-between" : "flex-start"}
+      gap={1}
     >
       <Button
         color="primary"
         variant="outlined"
         onClick={handleIncrement}
         sx={{ padding: "3px" }}
+        disabled={isLineUpdating}
       >
         <Add fontSize="small" />
       </Button>
 
-      {quantity ? (
+      {quantity && (
         <Fragment>
-          <Paragraph color="text.primary" fontWeight="600">
-            {quantity}
-          </Paragraph>
+          {isLineUpdating ? (
+            <CircularProgress size={"10px"} color={"primary"} />
+          ) : (
+            <Paragraph color="text.primary" fontWeight="600">
+              {quantity}
+            </Paragraph>
+          )}
 
           <Button
             color="primary"
             variant="outlined"
             onClick={handleDecrement}
             sx={{ padding: "3px" }}
+            disabled={isLineUpdating}
           >
             <Remove fontSize="small" />
           </Button>
         </Fragment>
-      ) : null}
+      )}
     </FlexBox>
   );
 }

package/src/components/_components/product-cards/product-card-1/product-card-1-wrapper.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { IconButton } from "@mui/material";
+import ProductCard1 from "./product-card";
+import { Delete, ShoppingCart } from "@mui/icons-material";
+import {
+  ExtendedProductListLine,
+  ExtendedWishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { useTranslations } from "next-intl";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+import HoverActions from "./components/hover-actions";
+import { useState } from "react";
+import useUpdateWishlist from "@/api-manager/services/user/mutations/update-wishlist";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { FlexBox } from "@/_components/flex-box";
+import AddToWishlistDialog from "@/_components/wishlist/add-to-wishlist-dialog";
+import RemoveFromWishlistDialog from "@/_components/wishlist/remove-from-wishlist-dialog";
+import ProductViewDialog from "@/_components/products-view/product-view-dialog";
+import { useNotification } from "@/components/Notifications/use-notification";
+
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+  mode: "PLP" | "WishlistDetail";
+  isFavorite?: boolean; //  when called from PLP, whether the product is in a wishlist
+  wishlist?: ExtendedWishlist; // when called from wishlist detail page
+  cart?: Cart; // for adding wishlist item to cart in wishlist detail page
+};
+export default function ProductCard1Wrapper({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+  mode,
+  isFavorite,
+  wishlist,
+  cart,
+}: Props) {
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+  const { mutateAsync: updateWishlist } = useUpdateWishlist();
+  const [favorite, setFavorite] = useState(isFavorite || false);
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+  const [openRemoveFromWishlistDialog, setOpenRemoveFromWishlistDialog] =
+    useState(false);
+  const [openProductModal, setOpenProductModal] = useState(false);
+  const [quantity, setQuantity] = useState(
+    wishlist?.ProductListLines?.find(
+      (item: ExtendedProductListLine) => item.ProductId === id,
+    )?.Quantity || 0,
+  );
+  const [isLineUpdating, setIsLineUpdating] = useState(false);
+  const { mutateAsync: addToCart } = useAddToCart();
+
+  const handleRemoveFromWishlist = async (productId: string | number) => {
+    try {
+      const extendedWishlistLine = wishlist?.ProductListLines?.find(
+        (item: ExtendedProductListLine) => item.ProductId === productId,
+      );
+
+      if (extendedWishlistLine && wishlist) {
+        const { ...wishlistLine } = extendedWishlistLine;
+        delete wishlistLine.Product;
+
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlist.Id,
+          ProductListLines: [wishlistLine],
+        };
+
+        await removeFromWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineRemoveSuccess"),
+          severity: "success",
+        });
+      }
+    } catch (error) {
+      setNotification({
+        message: t("wishlistLineRemoveFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const handleToggleFavorite = () => {
+    if (favorite) {
+      setOpenRemoveFromWishlistDialog(true);
+    } else {
+      setOpenAddToWishlistDialog(true);
+    }
+  };
+
+  const handleToggleProductModal = () => {
+    setOpenProductModal(!openProductModal);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenAddToWishlistDialog(false);
+    setOpenRemoveFromWishlistDialog(false);
+  };
+
+  const handleAddRemoveSuccess = () => {
+    setFavorite(!favorite);
+  };
+
+  const handleWishlistIncrementQuantity = async () => {
+    setIsLineUpdating(true);
+    // update wishlist product list lines
+    if (mode === "WishlistDetail" && wishlist && wishlist.ProductListLines) {
+      try {
+        const updatedProductListLines = wishlist.ProductListLines.map(
+          (line) => {
+            const { ...wishlistLine } = line;
+            delete wishlistLine.Product;
+            if (line.ProductId === Number(id)) {
+              return {
+                ...wishlistLine,
+                Quantity: quantity + 1,
+              };
+            }
+            return wishlistLine;
+          },
+        );
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedProductListLines,
+        });
+        setQuantity(quantity + 1);
+      } catch (error) {
+        // Do nothing
+      }
+    } else {
+      // PLP mode
+      setQuantity(quantity + 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const handleWishlistDecrementQuantity = async () => {
+    setIsLineUpdating(true);
+    // update wishlist product list lines
+    if (
+      mode === "WishlistDetail" &&
+      wishlist &&
+      wishlist.ProductListLines &&
+      quantity > 0
+    ) {
+      try {
+        const updatedProductListLines = wishlist.ProductListLines.map(
+          (line) => {
+            const { ...wishlistLine } = line;
+            delete wishlistLine.Product;
+            if (line.ProductId === Number(id)) {
+              return {
+                ...wishlistLine,
+                Quantity: quantity - 1,
+              };
+            }
+            return wishlistLine;
+          },
+        );
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedProductListLines,
+        });
+        setQuantity(quantity - 1);
+      } catch (error) {
+        // Do nothing
+      }
+    } else {
+      // PLP mode
+      setQuantity(quantity - 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const handleAddItemToCart = async () => {
+    if (!cart) return;
+    try {
+      await addToCart({
+        cartId: cart.Id,
+        version: cart.Version,
+        cartLine: [
+          {
+            ProductId: Number(id),
+            Quantity: quantity,
+          },
+        ],
+      });
+      setNotification({
+        message: "Successfully added item to cart",
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: "Failed to add item to cart",
+        severity: "error",
+      });
+    }
+  };
+
+  // render wishlist controls depending on mode
+  const wishlistControls =
+    mode === "WishlistDetail" ? (
+      // render delete button
+      <>
+        <FlexBox
+          width="25px"
+          alignItems="center"
+          flexDirection="row-reverse"
+          justifyContent="space-between"
+        >
+          <IconButton
+            sx={{ padding: "3px" }}
+            onClick={() => handleAddItemToCart()}
+          >
+            <ShoppingCart fontSize="small" color="inherit" />
+          </IconButton>
+        </FlexBox>
+        <FlexBox
+          width="25px"
+          alignItems="center"
+          flexDirection="row-reverse"
+          justifyContent="space-between"
+        >
+          <IconButton
+            sx={{ padding: "3px" }}
+            onClick={() => handleRemoveFromWishlist(id)}
+          >
+            <Delete fontSize="small" color="inherit" />
+          </IconButton>
+        </FlexBox>
+      </>
+    ) : (
+      // render hover actions for PLP
+      <HoverActions
+        isFavorite={favorite}
+        toggleView={handleToggleProductModal}
+        toggleFavorite={handleToggleFavorite}
+      />
+    );
+
+  return (
+    <>
+      <ProductCard1
+        id={id}
+        slug={slug}
+        title={title}
+        price={price}
+        imgUrl={imgUrl}
+        rating={rating}
+        hideRating={hideRating}
+        hoverEffect={hoverEffect}
+        discount={discount}
+        showProductSize={showProductSize}
+        wishlistControls={wishlistControls}
+        quantity={quantity}
+        isLineUpdating={isLineUpdating}
+        handleIncrementQuantity={handleWishlistIncrementQuantity}
+        handleDecrementQuantity={handleWishlistDecrementQuantity}
+      />
+      {openAddToWishlistDialog && (
+        <AddToWishlistDialog
+          open={openAddToWishlistDialog}
+          handleClose={handleCloseDialog}
+          productId={Number(id)}
+          onSuccess={handleAddRemoveSuccess}
+        />
+      )}
+      {openRemoveFromWishlistDialog && (
+        <RemoveFromWishlistDialog
+          open={openRemoveFromWishlistDialog}
+          handleClose={handleCloseDialog}
+          productId={Number(id)}
+          onSuccess={handleAddRemoveSuccess}
+        />
+      )}
+      {openProductModal && (
+        <ProductViewDialog
+          openDialog={openProductModal || false}
+          handleCloseDialog={handleToggleProductModal}
+          product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+        />
+      )}
+    </>
+  );
+}

package/src/components/_components/product-cards/product-card-1/product-card.tsx

@@ -6,14 +6,10 @@ import Rating from "@mui/material/Rating";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@/components/_components/LazyImage";
 import { Span } from "@/components/_components/Typography";
-import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
 // 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";
 import QuantityButtons from "./components/quantity-buttons";
 // STYLED COMPONENTS
 import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles/index";
@@ -31,6 +27,11 @@ type Props = {
   hideRating?: boolean;
   hoverEffect?: boolean;
   showProductSize?: boolean;
+  wishlistControls?: React.ReactNode;
+  quantity: number;
+  isLineUpdating: boolean;
+  handleIncrementQuantity: () => void;
+  handleDecrementQuantity: () => void;
 };
 // ========================================================
 
@@ -45,54 +46,17 @@ export default function ProductCard1({
   hoverEffect,
   discount = 5,
   showProductSize,
+  wishlistControls,
+  quantity,
+  isLineUpdating,
+  handleIncrementQuantity,
+  handleDecrementQuantity,
 }: Props) {
-  const {
-    isFavorite,
-    openModal,
-    cartItem,
-    toggleDialog,
-    toggleFavorite,
-    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 (
     <StyledBazaarCard hoverEffect={hoverEffect}>
       <ImageWrapper>
         {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-        <DiscountChip discount={discount} />
-
-        {/* HOVER ACTION ICONS */}
-        <HoverActions
-          isFavorite={isFavorite}
-          toggleView={toggleDialog}
-          toggleFavorite={toggleFavorite}
-        />
+        {/* <DiscountChip discount={discount} /> */}
 
         {/* PRODUCT IMAGE / THUMBNAIL */}
         <Link href={buildDetailUrl(title, Number(id))}>
@@ -106,13 +70,6 @@ export default function ProductCard1({
         </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 */}
@@ -136,10 +93,14 @@ export default function ProductCard1({
 
         {/* PRODUCT QUANTITY HANDLER BUTTONS */}
         <QuantityButtons
-          quantity={cartItem?.Quantity || 0}
+          quantity={quantity}
           handleIncrement={handleIncrementQuantity}
           handleDecrement={handleDecrementQuantity}
+          isLineUpdating={isLineUpdating}
         />
+
+        {/* WISHLIST CONTROLS: hover actions, delete button */}
+        {wishlistControls}
       </ContentWrapper>
     </StyledBazaarCard>
   );

package/src/components/_components/product-cards/product-card-8/product-card.tsx

@@ -13,7 +13,9 @@ import useProduct from "../use-product";
 import LazyImage from "@/components/_components/LazyImage";
 import { FlexRowCenter } from "@/components/_components/flex-box/index";
 import { H4, Paragraph, Small } from "@/components/_components/Typography";
-import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
+import ProductViewDialog, {
+  ProductInfo,
+} from "@/components/_components/products-view/product-view-dialog";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { currency } from "@/lib/lib";
 // CUSTOM COMPONENTS
@@ -23,45 +25,56 @@ import {
   CardMedia,
   FavoriteButton,
   QuickViewButton,
+  QuickViewSmallButton,
 } from "./styles/index";
 // CUSTOM DATA MODEL
 import { Product } from "@/components/_components/bazaar-types";
+import { DialogType } from "@/_components/search-box/search-input-category";
+import { RemoveRedEye } from "@mui/icons-material";
+import buildDetailUrl from "@/lib/build-detail-url";
 
 // ==============================================================
-type Props = { product: Product };
+type Props = {
+  slug: string;
+  id: string | number;
+  title: string;
+  price: number;
+  thumbnail: string;
+  categories: string[];
+  reviews: number;
+  rating: number;
+  enableWishlistDialog?: boolean;
+  enableQuickViewDialog?: boolean;
+  openDialog: (
+    type: DialogType,
+    productId: number,
+    productInfo?: ProductInfo,
+  ) => void;
+};
 // ==============================================================
-
-export default function ProductCard8({ product }: Props) {
-  const { slug, id, title, price, thumbnail, images, categories, reviews } =
-    product || {};
+export default function ProductCard8(props: Props) {
+  const {
+    slug,
+    id,
+    title,
+    price,
+    thumbnail,
+    categories,
+    reviews,
+    rating,
+    openDialog,
+    enableWishlistDialog = true,
+    enableQuickViewDialog = true,
+  } = props;
 
   const {
-    cartItem,
-    handleCartAmountChange,
-    isFavorite,
-    openModal,
-    toggleDialog,
-    toggleFavorite,
+    isFavorite, // TODO: always false; need to check if product exists in any of the wishlists?
   } = useProduct(slug);
 
-  // HANDLE ADD TO CART PRODUCT
-  const handleAddToCart = () => {
-    const payload = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl: thumbnail,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    payload;
-    handleCartAmountChange();
-  };
-
   return (
     <Card>
       <CardMedia>
-        <Link href={`/products/${slug}`}>
+        <Link href={buildDetailUrl(title, Number(id))}>
           <LazyImage
             width={300}
             height={300}
@@ -70,42 +83,44 @@ export default function ProductCard8({ product }: Props) {
             src={thumbnail}
           />
         </Link>
-
-        {/* ADD TO CART BUTTON */}
-        <AddToCartButton className="product-actions" onClick={handleAddToCart}>
-          <AddShoppingCart className="icon" fontSize="small" />
-        </AddToCartButton>
+        {/*  */}
+        {/* QUICK VIEW BUTTON */}
+        {enableQuickViewDialog && (
+          <QuickViewSmallButton
+            className="product-actions"
+            onClick={() =>
+              openDialog(DialogType.QuickView, Number(id), {
+                id: Number(id),
+                title,
+                imgGroup: [thumbnail],
+                price,
+                slug,
+              })
+            }
+          >
+            <RemoveRedEye className="icon" fontSize="small" />
+          </QuickViewSmallButton>
+        )}
 
         {/* PRODUCT FAVORITE BUTTON */}
-        <FavoriteButton className="product-actions" onClick={toggleFavorite}>
-          {isFavorite ? (
-            <Favorite className="icon" fontSize="small" color="primary" />
-          ) : (
-            <FavoriteBorder className="icon" fontSize="small" />
-          )}
-        </FavoriteButton>
-
-        {/* PRODUCT QUICK VIEW BUTTON */}
-        <Box mx={1} position="relative">
-          <QuickViewButton
-            fullWidth
-            size="large"
-            variant="contained"
-            className="product-view-action"
-            onClick={toggleDialog}
+        {enableWishlistDialog && (
+          <FavoriteButton
+            className="product-actions"
+            onClick={() =>
+              isFavorite
+                ? openDialog(DialogType.RemoveFromWishlist, Number(id))
+                : openDialog(DialogType.AddToWishlist, Number(id))
+            }
           >
-            Quick View
-          </QuickViewButton>
-        </Box>
+            {isFavorite ? (
+              <Favorite className="icon" fontSize="small" color="primary" />
+            ) : (
+              <FavoriteBorder className="icon" fontSize="small" />
+            )}
+          </FavoriteButton>
+        )}
       </CardMedia>
 
-      {/* PRODUCT VIEW DIALOG BOX */}
-      <ProductViewDialog
-        openDialog={openModal}
-        handleCloseDialog={toggleDialog}
-        product={{ id, slug, title, price, imgGroup: images ?? [] }}
-      />
-
       <Box p={1} textAlign="center">
         {/* PRODUCT CATEGORY */}
         {categories.length > 0 ? (
@@ -122,9 +137,14 @@ export default function ProductCard8({ product }: Props) {
 
         {/* PRODUCT RATING / REVIEW  */}
         <FlexRowCenter gap={1}>
-          <Rating name="read-only" value={4} readOnly sx={{ fontSize: 16 }} />
+          <Rating
+            name="read-only"
+            value={rating}
+            readOnly
+            sx={{ fontSize: 16 }}
+          />
           <Small fontWeight={600} color="grey.500">
-            ({reviews?.length} Reviews)
+            ({reviews} Reviews)
           </Small>
         </FlexRowCenter>
       </Box>

package/src/components/_components/product-cards/product-card-8/styles/index.ts

@@ -49,3 +49,13 @@ export const QuickViewButton = styled(Button)({
   position: "absolute",
   transition: "all 0.3s",
 });
+
+export const QuickViewSmallButton = styled(IconButton)(({ theme }) => ({
+  top: 15,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .1s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));