@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist/add-to-wishlist-dialog";
+import RemoveFromWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist/remove-from-wishlist-dialog";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/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-v2/product-cards/product-card-1/product-card.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM HOOK
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import QuantityButtons from "./components/quantity-buttons";
+// STYLED COMPONENTS
+import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles/index";
+import buildDetailUrl from "@/lib/build-detail-url";
+
+// ========================================================
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+  wishlistControls?: React.ReactNode;
+  quantity: number;
+  isLineUpdating: boolean;
+  handleIncrementQuantity: () => void;
+  handleDecrementQuantity: () => void;
+};
+// ========================================================
+
+export default function ProductCard1({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+  wishlistControls,
+  quantity,
+  isLineUpdating,
+  handleIncrementQuantity,
+  handleDecrementQuantity,
+}: Props) {
+  return (
+    <StyledBazaarCard hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        {/* <DiscountChip discount={discount} /> */}
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={buildDetailUrl(title, Number(id))}>
+          <LazyImage
+            priority
+            src={imgUrl}
+            width={500}
+            height={500}
+            alt={title}
+          />
+        </Link>
+      </ImageWrapper>
+
+      <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 */}
+        <QuantityButtons
+          quantity={quantity}
+          handleIncrement={handleIncrementQuantity}
+          handleDecrement={handleDecrementQuantity}
+          isLineUpdating={isLineUpdating}
+        />
+
+        {/* WISHLIST CONTROLS: hover actions, delete button */}
+        {wishlistControls}
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,46 @@
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+
+export const StyledBazaarCard = 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 = styled("div")(({ theme }) => ({
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+}));
+
+export const HoverIconWrapper = 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 = styled("div")({
+  gap: 8,
+  display: "flex",
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});

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

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

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

@@ -0,0 +1,128 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Rating from "@mui/material/Rating";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+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/index";
+import {
+  H4,
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
+// STYLED COMPONENTS
+import {
+  StyledIconButton,
+  Card,
+  CardMedia,
+  FavoriteButton,
+} from "./styles/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { currency } from "@/lib/lib";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard10({ product }: Props) {
+  const { slug, id, price, rating, thumbnail, title, reviews } = product;
+
+  const {
+    cartItem,
+    handleCartAmountChange,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    toggleFavorite,
+  } = useProduct(slug);
+
+  const handleAddToCart = () => {
+    const payload = {
+      id: id,
+      slug: slug,
+      name: title,
+      price: price,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    payload;
+    handleCartAmountChange();
+  };
+
+  return (
+    <Card>
+      <CardMedia>
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            width={300}
+            height={300}
+            alt="category"
+            src={thumbnail}
+            className="product-img"
+          />
+        </Link>
+
+        {/* PRODUCT VIEW BUTTON */}
+        <StyledIconButton className="product-actions" onClick={toggleDialog}>
+          <RemoveRedEye color="disabled" fontSize="small" />
+        </StyledIconButton>
+
+        {/* PRODUCT FAVORITE BUTTON */}
+        <FavoriteButton className="product-actions" onClick={toggleFavorite}>
+          {isFavorite ? (
+            <Favorite color="primary" fontSize="small" />
+          ) : (
+            <FavoriteBorder color="disabled" fontSize="small" />
+          )}
+        </FavoriteButton>
+      </CardMedia>
+
+      {/* PRODUCT VIEW BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ id, slug, title, price, imgGroup: [thumbnail, thumbnail] }}
+      />
+
+      <Box p={2} textAlign="center">
+        {/* PRODUCT TITLE */}
+        <Paragraph>{title}</Paragraph>
+
+        {/* PRODUCT PRICE */}
+        <H4 fontWeight={700} py={0.5}>
+          {currency(price)}
+        </H4>
+
+        {/* PRODUCT RATINGS */}
+        <FlexRowCenter gap={1} mb={2}>
+          <Rating
+            name="read-only"
+            value={rating || 4}
+            readOnly
+            sx={{ fontSize: 14 }}
+          />
+          <Small fontWeight={600} color="grey.500">
+            ({reviews?.length})
+          </Small>
+        </FlexRowCenter>
+
+        {/* PRODUCT ADD TO CART BUTTON */}
+        <Button fullWidth variant="outlined" onClick={handleAddToCart}>
+          Add To Cart
+        </Button>
+      </Box>
+    </Card>
+  );
+}

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

@@ -0,0 +1,38 @@
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+export const Card = styled("div")(({ theme }) => ({
+  height: "100%",
+  borderRadius: "3px",
+  transition: "all 0.3s",
+  backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.grey[100]}`,
+  ":hover": {
+    "& .product-actions": { right: 5 },
+    "& img": { transform: "scale(1.1)" },
+    border: `1px solid ${theme.palette.primary.dark}`,
+  },
+}));
+
+export const CardMedia = styled("div")({
+  width: "100%",
+  maxHeight: 300,
+  cursor: "pointer",
+  overflow: "hidden",
+  position: "relative",
+  "& img": { transition: "0.3s" },
+});
+
+export const StyledIconButton = styled(IconButton)({
+  top: 10,
+  right: -40,
+  position: "absolute",
+  transition: "right 0.3s .1s",
+});
+
+export const FavoriteButton = styled(IconButton)({
+  top: 45,
+  right: -40,
+  position: "absolute",
+  transition: "right 0.3s .2s",
+});

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

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

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

@@ -0,0 +1,66 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H3,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexRowCenter,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// STYLED COMPONENTS
+import { CardRoot, PriceText } from "./styles/index";
+
+// ==============================================================
+interface Props {
+  image: string;
+  sale?: boolean;
+  title?: string;
+  salePrice?: number;
+  description?: string;
+  regularPrice?: number;
+}
+// ==============================================================
+
+export default function ProductCard11(props: Props) {
+  const { image, sale, title } = props || {};
+
+  return (
+    <CardRoot elevation={0}>
+      {/* SALE CHIP */}
+      {sale ? (
+        <FlexRowCenter
+          top={12}
+          left={12}
+          width={50}
+          height={50}
+          borderRadius="50%"
+          position="absolute"
+          bgcolor="error.main"
+        >
+          <Paragraph color="white">Sale!</Paragraph>
+        </FlexRowCenter>
+      ) : null}
+
+      {/* PRODUCT IMAGE */}
+      <LazyImage width={379} height={340} alt="Apple Watch" src={image} />
+
+      <Box p={2}>
+        {/* PRODUCT TITLE & REGULAR PRICE */}
+        <FlexBetween>
+          <H3 fontSize={18}>{title}</H3>
+          <PriceText>$250.00</PriceText>
+        </FlexBetween>
+
+        {/* DESCRIPTION & SALE PRICE */}
+        <FlexBetween mt={0.5}>
+          <Paragraph color="grey.600" ellipsis>
+            Powerful sensors, advanced
+          </Paragraph>
+          <H3 fontSize={18}>$110.00</H3>
+        </FlexBetween>
+      </Box>
+    </CardRoot>
+  );
+}