@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,139 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { SxProps, Theme } from "@mui/material/styles";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import {
-  H3,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// LOCAL CUSTOM HOOK
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import ProductPrice from "../product-price";
-import DiscountChip from "../discount-chip";
-import ProductStatus from "./components/product-status";
-import ProductRating from "../product-rating";
-import QuantityButtons from "./components/quantity-buttons";
-// STYLED COMPONENTS
-import { StyledCard, ContentWrapper, ColorBox, ImgBox } from "./styles/index";
-
-// =======================================================
-interface Props {
-  off: number;
-  slug: string;
-  price: number;
-  title: string;
-  imgUrl: string;
-  status: string;
-  rating?: number;
-  id: string | number;
-  sx?: SxProps<Theme>;
-  hideRating?: boolean;
-  productColors: string[];
-}
-// =======================================================
-
-export default function ProductCard7(props: Props) {
-  const {
-    sx,
-    off,
-    status,
-    id,
-    title,
-    price,
-    imgUrl,
-    rating,
-    hideRating,
-    productColors,
-    slug,
-  } = props;
-
-  const { cartItem, 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 (
-    <StyledCard sx={sx}>
-      <Link href={`/products/${slug}`}>
-        <ImgBox>
-          {/* PRODUCT BADGE STATUS IF STATUS AVAILABLE */}
-          <ProductStatus status={status} />
-
-          {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-          <DiscountChip discount={off} sx={{ borderRadius: 0 }} />
-
-          {/* PRODUCT IMAGE / THUMBNAIL */}
-          <div className="img-wrapper">
-            <LazyImage alt={title} width={300} height={273} src={imgUrl} />
-          </div>
-        </ImgBox>
-      </Link>
-
-      <ContentWrapper>
-        <div className="content">
-          {/* PRODUCT TITLE / NAME */}
-          <Link href={`/products/${slug}`}>
-            <H3
-              mb={1}
-              ellipsis
-              title={title}
-              fontSize={24}
-              fontWeight={700}
-              color="text.secondary"
-            >
-              {title}
-            </H3>
-          </Link>
-
-          {/* PRODUCT RATING / REVIEW  */}
-          <ProductRating showRating={!hideRating} rating={rating ?? 0} />
-
-          {/* PRODUCT COLORS */}
-          {productColors.length ? (
-            <ColorBox>
-              {productColors.map((color, ind) => (
-                <Span key={ind} bgcolor={color} />
-              ))}
-            </ColorBox>
-          ) : null}
-
-          {/* PRODUCT PRICE WITH DISCOUNT */}
-          <ProductPrice discount={off} price={price} />
-        </div>
-
-        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
-        <QuantityButtons
-          quantity={cartItem?.Quantity || 0}
-          handleIncrement={handleIncrementQuantity}
-          handleDecrement={handleDecrementQuantity}
-        />
-      </ContentWrapper>
-    </StyledCard>
-  );
-}

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

@@ -1,98 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-export const StyledCard = styled(Box)(({ theme }) => ({
-  height: "100%",
-  margin: "auto",
-  borderRadius: 0,
-  overflow: "hidden",
-  position: "relative",
-  transition: "all 250ms ease-in-out",
-  outline: `2px solid ${theme.palette.grey[50]}`,
-  ":hover": { boxShadow: theme.shadows[2] },
-}));
-
-export const ImgBox = styled("div")(({ theme }) => ({
-  height: 230,
-  marginBottom: "5rem",
-  padding: "60px 40px 20px 40px",
-  background: theme.palette.grey[100],
-  ".img-wrapper": { maxWidth: 300, margin: "auto" },
-}));
-
-export const ContentWrapper = styled("div")({
-  gap: 8,
-  display: "flex",
-  padding: "1rem",
-  ".content": { flex: "1 1 0" },
-});
-
-export const StatusChipBox = styled("div")(({ theme }) => ({
-  width: 40,
-  height: 42,
-  zIndex: 11,
-  top: "0px",
-  right: "30px",
-  fontSize: "12px",
-  position: "absolute",
-  background: theme.palette.primary.main,
-
-  ".triangle": {
-    width: "100%",
-    display: "flex",
-  },
-
-  ".triangle-left": {
-    width: 0,
-    height: 0,
-    borderTop: "0px solid transparent",
-    borderBottom: "10px solid transparent",
-    borderLeft: `20px solid ${theme.palette.primary.main}`,
-  },
-
-  ".triangle-right": {
-    width: 0,
-    height: 0,
-    borderTop: "0px solid transparent",
-    borderBottom: "10px solid transparent",
-    borderRight: `20px solid ${theme.palette.primary.main}`,
-  },
-}));
-
-export const StatusChip = styled(Span)({
-  color: "#fff",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-export const ColorBox = styled("div")(({ theme }) => ({
-  gap: 8,
-  display: "flex",
-  padding: "10px 5px",
-  "& span": {
-    width: 12,
-    height: 12,
-    borderRadius: 8,
-    "&:hover": {
-      cursor: "pointer",
-      outline: `2px solid ${theme.palette.grey[200]}`,
-    },
-  },
-}));
-
-export const StyledButton = styled(Button)(({ theme }) => ({
-  padding: "4px",
-  borderRadius: 0,
-  transition: "all 0.3s",
-  color: theme.palette.primary.main,
-  ":hover": {
-    color: "#fff",
-    background: theme.palette.primary.main,
-    border: `1px solid ${theme.palette.primary.main}`,
-  },
-}));

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

@@ -1,151 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-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 { ProductInfo } from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
-// CUSTOM UTILS LIBRARY FUNCTION
-import { currency } from "@/lib/lib";
-// CUSTOM COMPONENTS
-import {
-  Card,
-  CardMedia,
-  FavoriteButton,
-  QuickViewSmallButton,
-} from "./styles/index";
-// CUSTOM DATA MODEL
-import { DialogType } from "@evenicanpm/storefront-core/src/components-v2/search-box/search-input-category";
-import { RemoveRedEye } from "@mui/icons-material";
-import buildDetailUrl from "@/lib/build-detail-url";
-
-// ==============================================================
-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(props: Props) {
-  const {
-    slug,
-    id,
-    title,
-    price,
-    thumbnail,
-    categories,
-    reviews,
-    rating,
-    openDialog,
-    enableWishlistDialog = true,
-    enableQuickViewDialog = true,
-  } = props;
-
-  const {
-    isFavorite, // TODO: always false; need to check if product exists in any of the wishlists?
-  } = useProduct(slug);
-
-  return (
-    <Card>
-      <CardMedia>
-        <Link href={buildDetailUrl(title, Number(id))}>
-          <LazyImage
-            width={300}
-            height={300}
-            alt="category"
-            className="product-img"
-            src={thumbnail}
-          />
-        </Link>
-        {/*  */}
-        {/* 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 */}
-        {enableWishlistDialog && (
-          <FavoriteButton
-            className="product-actions"
-            onClick={() =>
-              isFavorite
-                ? openDialog(DialogType.RemoveFromWishlist, Number(id))
-                : openDialog(DialogType.AddToWishlist, Number(id))
-            }
-          >
-            {isFavorite ? (
-              <Favorite className="icon" fontSize="small" color="primary" />
-            ) : (
-              <FavoriteBorder className="icon" fontSize="small" />
-            )}
-          </FavoriteButton>
-        )}
-      </CardMedia>
-
-      <Box p={1} textAlign="center">
-        {/* PRODUCT CATEGORY */}
-        {categories.length > 0 ? (
-          <Small color="grey.500">{categories[0]}</Small>
-        ) : null}
-
-        {/* PRODUCT TITLE / NAME */}
-        <Paragraph fontWeight="bold">{title}</Paragraph>
-
-        {/* PRODUCT PRICE  */}
-        <H4 fontWeight={700} py={0.5}>
-          {currency(price)}
-        </H4>
-
-        {/* PRODUCT RATING / REVIEW  */}
-        <FlexRowCenter gap={1}>
-          <Rating
-            name="read-only"
-            value={rating}
-            readOnly
-            sx={{ fontSize: 16 }}
-          />
-          <Small fontWeight={600} color="grey.500">
-            ({reviews} Reviews)
-          </Small>
-        </FlexRowCenter>
-      </Box>
-    </Card>
-  );
-}

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

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

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

@@ -1,169 +0,0 @@
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Rating from "@mui/material/Rating";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ImageWithFallback from "../../ImageWithFallback";
-// LOCAL CUSTOM HOOK
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import DiscountChip from "../discount-chip";
-import ProductPrice from "../product-price";
-// import ProductTags from "./components/tags";
-import AddToCartButton from "./components/add-to-cart";
-import FavoriteButton from "./components/favorite-button";
-
-import buildDetailUrl from "@/lib/build-detail-url";
-
-// STYLED COMPONENT
-const Wrapper = styled(Card)({
-  width: "100%",
-  overflow: "hidden",
-  position: "relative",
-  marginBottom: "1.25rem",
-});
-
-const ContentWrapper = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "row",
-
-  "& .img-wrapper": {
-    width: 150,
-    height: 150,
-    flexShrink: 0,
-    position: "relative",
-    backgroundColor: theme.palette.grey[200],
-  },
-
-  "& .content": {
-    flex: 1,
-    padding: "1rem",
-    display: "flex",
-    alignItems: "flex-end",
-    justifyContent: "space-between",
-  },
-
-  [theme.breakpoints.down("sm")]: {
-    flexDirection: "column",
-    alignItems: "flex-start",
-    "& .img-wrapper": { width: "100%" },
-    "& .content": { width: "100%" },
-  },
-}));
-
-// ===========================================================
-type Props = {
-  id: number;
-  off?: number;
-  slug: string;
-  price: number;
-  title: string;
-  imgUrl: string;
-  rating: number;
-  // show or hide
-  showAddToCart?: boolean;
-  showFavorite?: boolean;
-};
-// ===========================================================
-
-export default function ProductCard9(props: Props) {
-  const {
-    imgUrl,
-    title,
-    price,
-    off,
-    rating,
-    id,
-    slug,
-    showAddToCart = true,
-    showFavorite = true,
-  } = props || {};
-
-  const { cartItem, handleCartAmountChange, isFavorite, toggleFavorite } =
-    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 (
-    <Wrapper>
-      {/* PRODUCT FAVORITE BUTTON */}
-      {showFavorite && (
-        <FavoriteButton
-          isFavorite={isFavorite}
-          toggleFavorite={toggleFavorite}
-        />
-      )}
-
-      <ContentWrapper>
-        <div className="img-wrapper">
-          {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-          <DiscountChip discount={off ?? 0} />
-
-          {/* PRODUCT IMAGE / THUMBNAIL */}
-          <ImageWithFallback
-            alt={title ?? "Product Image"}
-            src={imgUrl}
-            fill
-            style={{ objectFit: "contain" }}
-            sizes="150px"
-          />
-        </div>
-
-        <div className="content">
-          <div>
-            {/* PRODUCT TAG LIST */}
-            {/* <ProductTags tags={["Bike", "Motor", "Ducati"]} /> */}
-
-            {/* PRODUCT TITLE / NAME */}
-            <Link href={buildDetailUrl(title ?? "", id)}>
-              <H5 fontWeight="700" mt={1} mb={2}>
-                {title}
-              </H5>
-            </Link>
-
-            {/* PRODUCT RATING / REVIEW  */}
-            <Rating size="small" value={rating} color="warn" readOnly />
-
-            {/* PRODUCT PRICE */}
-            <ProductPrice price={price} discount={off ?? 0} />
-          </div>
-
-          {/* PRODUCT ADD TO CART BUTTON */}
-          {showAddToCart && (
-            <AddToCartButton
-              quantity={cartItem?.Quantity ?? 0}
-              handleDecrement={handleDecrementQuantity}
-              handleIncrement={handleIncrementQuantity}
-            />
-          )}
-        </div>
-      </ContentWrapper>
-    </Wrapper>
-  );
-}

package/src/components-v2/product-cards/product-card-wishlist/components/hover-actions.tsx

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