@evenicanpm/storefront-core 1.0.0-alpha → 1.0.0

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

package/src/components/_components/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/_components/product-cards/product-card-wishlist/index.ts

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

package/src/components/_components/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 "@/_components/products-view/product-view-dialog";
+import { Span } from "@/_components/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 "@/_components/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/_components/product-cards/product-card-wishlist/styles/index.ts

@@ -0,0 +1,51 @@
+import BazaarCard, { Props } from "@/_components/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/_components/products-view/product-view-dialog.tsx

@@ -9,20 +9,24 @@ import DialogContent from "@mui/material/DialogContent";
 import Add from "@mui/icons-material/Add";
 import Close from "@mui/icons-material/Close";
 import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { Carousel } from "@/components/_components/carousel/index";
-import BazaarImage from "@/components/_components/BazaarImage";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-import { H1, H2, H3, H6, Paragraph } from "@/components/_components/Typography";
+// GLOBAL CUSTOM COMPONENT
 // LOCAL CUSTOM HOOKS
-//import useCart from "hooks/useCart";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { useTranslations } from "next-intl";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
 // CUSTOM UTILS LIBRARY FUNCTION
+import { Carousel } from "../carousel";
+import { useNotification } from "@/components/Notifications/use-notification";
+import BazaarImage from "../BazaarImage";
+import { FlexBox } from "../flex-box";
+import { H2, Paragraph, H1, H6, H3 } from "../Typography";
 import { currency } from "@/lib/lib";
 
 // =====================================================
 interface Props {
   product: ProductInfo;
   openDialog: boolean;
+  cartId?: string;
   handleCloseDialog: () => void;
 }
 // =====================================================
@@ -31,7 +35,7 @@ type CartItem = {
   qty: number;
 };
 // =====================================================
-type ProductInfo = {
+export type ProductInfo = {
   id: string | number;
   title: string;
   imgGroup: string[];
@@ -50,7 +54,12 @@ type CartDispatch = {
 // =====================================================
 
 export default function ProductViewDialog(props: Props) {
-  const { product, openDialog, handleCloseDialog } = props;
+  const { product, openDialog, cartId, handleCloseDialog } = props;
+  const { mutateAsync: addToCart } = useAddToCart();
+  const { data: cart } = getCart.useData();
+
+  const t = useTranslations("ProductViewDialog");
+  const { setNotification } = useNotification();
 
   //const { state, dispatch } = useCart();
   const state: { cart: CartItem[] } = {
@@ -73,6 +82,31 @@ export default function ProductViewDialog(props: Props) {
     });
   };
 
+  const handleAddToCart = async () => {
+    if (!cart) return;
+    try {
+      await addToCart({
+        cartId: cartId,
+        version: cart.Version,
+        cartLine: [
+          {
+            ProductId: Number(product.id),
+            Quantity: 1,
+          },
+        ],
+      });
+      setNotification({
+        message: t("addToCartSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("addToCartError"),
+        severity: "error",
+      });
+    }
+  };
+
   return (
     <Dialog
       open={openDialog}
@@ -133,16 +167,19 @@ export default function ProductViewDialog(props: Props) {
               {!cartItem?.qty ? (
                 <Button
                   size="large"
+                  color={"primary"}
                   variant="contained"
-                  onClick={handleCartAmountChange(1)}
+                  // onClick={handleCartAmountChange(1)}
+                  onClick={handleAddToCart}
                   sx={{ height: 45, borderRadius: 2 }}
                 >
-                  Add to Cart
+                  {t("addToCartBtn")}
                 </Button>
               ) : (
                 <FlexBox alignItems="center">
                   <Button
                     size="small"
+                    color={"primary"}
                     variant="outlined"
                     sx={{ p: ".6rem", height: 45 }}
                     onClick={handleCartAmountChange(cartItem?.qty - 1)}
@@ -156,6 +193,7 @@ export default function ProductViewDialog(props: Props) {
 
                   <Button
                     size="small"
+                    color={"primary"}
                     variant="outlined"
                     sx={{ p: ".6rem", height: 45 }}
                     onClick={handleCartAmountChange(cartItem?.qty + 1)}