@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

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

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

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

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

@@ -0,0 +1,151 @@
+"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-8/styles/index.ts

@@ -0,0 +1,61 @@
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+export const Card = styled("div")({
+  ":hover": {
+    img: { transform: "scale(1.1)" },
+    ".product-actions": { right: 15 },
+    ".product-view-action": { opacity: 1 },
+  },
+});
+
+export const CardMedia = styled("div")(({ theme }) => ({
+  aspectRatio: "1/1",
+  // maxHeight: 300,
+  borderRadius: 4,
+  cursor: "pointer",
+  overflow: "hidden",
+  position: "relative",
+  backgroundColor: theme.palette.grey[300],
+  img: { transition: "0.3s" },
+}));
+
+export const AddToCartButton = styled(IconButton)(({ theme }) => ({
+  top: 15,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .1s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));
+
+export const FavoriteButton = styled(IconButton)(({ theme }) => ({
+  top: 55,
+  right: -40,
+  position: "absolute",
+  backgroundColor: "white",
+  transition: "right 0.3s .2s",
+  color: theme.palette.text.primary,
+  ".icon": { fontSize: 16 },
+}));
+
+export const QuickViewButton = styled(Button)({
+  left: 0,
+  bottom: 12,
+  opacity: 0,
+  borderRadius: 4,
+  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-v2/product-cards/product-card-9/components/add-to-cart.tsx

@@ -0,0 +1,63 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+
+// ==============================================================
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+}
+// ==============================================================
+
+export default function AddToCartButton({
+  quantity,
+  handleDecrement,
+  handleIncrement,
+}: Props) {
+  return (
+    <FlexBox mt={1} flexShrink={0}>
+      {quantity ? (
+        <FlexBetween>
+          <Button
+            color="primary"
+            variant="contained"
+            sx={{ padding: 0.5, minHeight: 0 }}
+            onClick={handleIncrement}
+          >
+            <Add fontSize="small" />
+          </Button>
+
+          <H5 fontWeight="600" fontSize="15px" mx={1.5}>
+            {quantity}
+          </H5>
+
+          <Button
+            color="primary"
+            variant="contained"
+            sx={{ padding: 0.5, minHeight: 0 }}
+            onClick={handleDecrement}
+          >
+            <Remove fontSize="small" />
+          </Button>
+        </FlexBetween>
+      ) : (
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={handleIncrement}
+          sx={{ padding: 0.5, minHeight: 0 }}
+        >
+          <Add fontSize="small" />
+        </Button>
+      )}
+    </FlexBox>
+  );
+}

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

@@ -0,0 +1,27 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleFavorite: () => void;
+}
+// ==============================================================
+
+export default function FavoriteButton({ isFavorite, toggleFavorite }: Props) {
+  return (
+    <IconButton
+      size="small"
+      onClick={toggleFavorite}
+      sx={{ position: "absolute", top: 15, right: 15, zIndex: 1 }}
+    >
+      {isFavorite ? (
+        <Favorite color="primary" fontSize="small" />
+      ) : (
+        <FavoriteBorder fontSize="small" />
+      )}
+    </IconButton>
+  );
+}

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

@@ -0,0 +1,33 @@
+import styled from "@mui/material/styles/styled";
+import Link from "next/link";
+
+// STYLED COMPONENTS
+const StyledRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  "& p": {
+    fontSize: 11,
+    fontWeight: 700,
+    display: "inline-block",
+    textDecoration: "underline",
+  },
+}));
+
+// ==============================================================
+interface Props {
+  tags: string[];
+}
+// ==============================================================
+
+export default function ProductTags({ tags }: Props) {
+  return (
+    <StyledRoot>
+      {tags.map((item) => (
+        <Link href="#" key={item}>
+          <p>{item}</p>
+        </Link>
+      ))}
+    </StyledRoot>
+  );
+}

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

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