@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,304 +0,0 @@
-"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

@@ -1,107 +0,0 @@
-"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-10/index.ts

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

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

@@ -1,128 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,66 +0,0 @@
-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>
-  );
-}

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

@@ -1,16 +0,0 @@
-"use client";
-
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-export const CardRoot = styled(Card)(({ theme }) => ({
-  borderRadius: 16,
-  position: "relative",
-  border: `1px solid ${theme.palette.grey[300]}`,
-}));
-
-export const PriceText = styled("p")(({ theme }) => ({
-  fontWeight: 600,
-  color: theme.palette.grey[600],
-  textDecoration: "line-through",
-}));

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

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