@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,18 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 17,
+  lineHeight: 1,
+  fontWeight: 700,
+  marginTop: ".75rem",
+  color: theme.palette.primary.main,
+  ".base-price": {
+    fontSize: 15,
+    marginRight: 8,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));

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

@@ -0,0 +1,29 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  handleClick: () => void;
+}
+// ==============================================================
+
+export default function FavoriteButton({ isFavorite, handleClick }: Props) {
+  const STYLES = {
+    height: 0,
+    alignItems: "flex-start",
+    "&:hover": { backgroundColor: "transparent" },
+  };
+
+  return (
+    <Button disableRipple disableElevation onClick={handleClick} sx={STYLES}>
+      {isFavorite ? (
+        <Favorite fontSize="small" color="primary" />
+      ) : (
+        <FavoriteBorder fontSize="small" sx={{ opacity: 0.5 }} />
+      )}
+    </Button>
+  );
+}

package/src/components-v2/product-cards/product-card-2/components/product-price.tsx

@@ -0,0 +1,26 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+
+// ==============================================================
+type Props = { price: number; off: number };
+// ==============================================================
+
+export default function ProductPrice({ price, off }: Props) {
+  return (
+    <FlexBox gap={1} alignItems="center">
+      <Paragraph fontWeight="600" color="primary.main">
+        {calculateDiscount(price, off)}
+      </Paragraph>
+
+      {off ? (
+        <Box component="del" fontWeight="600" color="grey.600">
+          {currency(price)}
+        </Box>
+      ) : null}
+    </FlexBox>
+  );
+}

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

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

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

@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import Rating from "@mui/material/Rating";
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "./components/product-price";
+import FavoriteButton from "./components/favorite-button";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+
+// ========================================================
+interface Props {
+  off?: number;
+  slug: string;
+  title: string;
+  price: number;
+  imgUrl: string;
+  rating: number;
+  hideReview?: boolean;
+  hideFavoriteIcon?: boolean;
+}
+// ========================================================
+
+export default function ProductCard2({
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating,
+  off = 20,
+  hideReview,
+  hideFavoriteIcon,
+}: Props) {
+  const [favorite, setFavorite] = useState(false);
+
+  return (
+    <div>
+      <Link href={`/products/${slug}`}>
+        <HoverBox overflow="hidden" borderRadius={2}>
+          <LazyImage width={270} height={270} alt={title} src={imgUrl} />
+        </HoverBox>
+      </Link>
+
+      <FlexBetween mt={2}>
+        <div>
+          <H6 mb={0.5} title={title} ellipsis>
+            {title}
+          </H6>
+
+          {!hideReview ? (
+            <Rating size="small" value={rating} color="warn" readOnly />
+          ) : null}
+
+          <ProductPrice price={price} off={off} />
+        </div>
+
+        {!hideFavoriteIcon ? (
+          <FavoriteButton
+            isFavorite={favorite}
+            handleClick={() => setFavorite((state) => !state)}
+          />
+        ) : null}
+      </FlexBetween>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+import AddShoppingCart from "@mui/icons-material/AddShoppingCart";
+// GLOBAL CUSTOM COMPONENT
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENTS
+import { HoverButtonBox, ItemController } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  hasQty: boolean;
+  isFavorite: boolean;
+  toggleDialog: () => void;
+  toggleFavorite: () => void;
+  handleAddToCart: () => void;
+  handleRemoveFormCart: () => void;
+}
+// ==============================================================
+
+export default function HoverActions(props: Props) {
+  const {
+    hasQty,
+    isFavorite,
+    toggleDialog,
+    toggleFavorite,
+    handleAddToCart,
+    handleRemoveFormCart,
+  } = props;
+
+  return (
+    <HoverButtonBox className="hoverButtonBox">
+      <div className="buttonBox">
+        <ItemController>
+          <Span onClick={toggleDialog}>
+            <RemoveRedEye />
+          </Span>
+
+          <Divider orientation="vertical" flexItem />
+
+          <Span onClick={toggleFavorite}>
+            {isFavorite ? (
+              <Favorite color="primary" fontSize="small" />
+            ) : (
+              <FavoriteBorder color="primary" fontSize="small" />
+            )}
+          </Span>
+
+          <Divider orientation="vertical" flexItem />
+
+          <Span onClick={handleAddToCart}>
+            <AddShoppingCart />
+          </Span>
+        </ItemController>
+
+        {hasQty ? (
+          <Button
+            color="primary"
+            variant="outlined"
+            className="addCartButton"
+            onClick={handleRemoveFormCart}
+          >
+            <Remove /> Remove from Cart
+          </Button>
+        ) : (
+          <Button
+            color="primary"
+            variant="outlined"
+            className="addCartButton"
+            onClick={handleAddToCart}
+          >
+            <Add /> Add to Cart
+          </Button>
+        )}
+      </div>
+    </HoverButtonBox>
+  );
+}

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

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

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

@@ -0,0 +1,110 @@
+"use client";
+
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import DiscountChip from "../discount-chip";
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import ProductRating from "../product-rating";
+import HoverActions from "./components/hover-actions";
+// STYLED COMPONENTS
+import {
+  ContentWrapper,
+  ImageBox,
+  ImageWrapper,
+  StyledBazaarCard,
+} from "./styles/index";
+
+// ====================================================================
+type Props = {
+  off: number;
+  slug: string;
+  price: number;
+  title: string;
+  imgUrl: string;
+  rating?: number;
+  id: string | number;
+  hideRating?: boolean;
+};
+// ====================================================================
+
+export default function ProductCard10(props: Props) {
+  const { off, id, title, price, imgUrl, rating, hideRating, slug } = props;
+
+  const {
+    handleCartAmountChange,
+    cartItem,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    toggleFavorite,
+  } = useProduct(slug);
+
+  const handleAddToCart = () => {
+    const product = { price, imgUrl, id, name: title, qty: 1, slug };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleRemoveFormCart = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      imgUrl,
+      name: title,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <StyledBazaarCard>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={off} />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <ImageBox className="hoverImgBox">
+          <Link href={`/products/${slug}`}>
+            <LazyImage alt={title} width={190} height={190} src={imgUrl} />
+          </Link>
+        </ImageBox>
+
+        {/* PRODUCT VIEW DIALOG BOX */}
+        <ProductViewDialog
+          openDialog={openModal}
+          handleCloseDialog={toggleDialog}
+          product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+        />
+
+        {/* PRODUCT HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleDialog={toggleDialog}
+          toggleFavorite={toggleFavorite}
+          handleAddToCart={handleAddToCart}
+          hasQty={cartItem?.Quantity ? true : false}
+          handleRemoveFormCart={handleRemoveFormCart}
+        />
+      </ImageWrapper>
+
+      <ContentWrapper>
+        {/* PRODUCT NAME / TITLE */}
+        <ProductTitle title={title} slug={slug} />
+
+        {/* PRODUCT RATING / REVIEW  */}
+        <ProductRating showRating={!hideRating} rating={rating ?? 0} />
+
+        {/* PRODUCT PRICE WITH DISCOUNT */}
+        <ProductPrice discount={off} price={price} />
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,89 @@
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+
+export const StyledBazaarCard = styled("div")({
+  height: "100%",
+  margin: "auto",
+  display: "flex",
+  overflow: "hidden",
+  position: "relative",
+  flexDirection: "column",
+  justifyContent: "space-between",
+});
+
+export const ImageWrapper = styled("div")(({ theme }) => ({
+  height: "100%",
+  borderRadius: 8,
+  overflow: "hidden",
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+  "&:hover": {
+    "& .hoverButtonBox": { opacity: 1 },
+    "& .hoverImgBox": { filter: "blur(5px)" },
+  },
+}));
+
+export const HoverButtonBox = styled("div")({
+  opacity: 0,
+  top: "50%",
+  left: "50%",
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  transition: ".5s ease",
+  transform: "translate(-50%, -50%)",
+  "& .buttonBox": {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    flexDirection: "column",
+    justifyContent: "center",
+    "& .addCartButton": {
+      bottom: 20,
+      margin: "auto",
+      padding: "4px 14px",
+      position: "absolute",
+      "& svg": { fontSize: 16 },
+    },
+  },
+});
+
+export const ImageBox = styled("div")({
+  opacity: 1,
+  height: "100%",
+  display: "grid",
+  placeItems: "center",
+  padding: "44px 40px",
+  background: "#F5F5F5",
+  transition: "all .3s ease",
+});
+
+export const ItemController = styled(FlexBetween)(({ theme }) => ({
+  background: "#fff",
+  overflow: "hidden",
+  borderRadius: "5px",
+  boxShadow: theme.shadows[2],
+  "& span": {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    padding: "6px 12px",
+    alignItems: "center",
+    "&:hover": { cursor: "pointer", background: "#f3f5f9" },
+  },
+  "& svg": { fontSize: 22, color: theme.palette.grey[600] },
+}));
+
+export const ContentWrapper = styled("div")({
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});

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

@@ -0,0 +1,50 @@
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import ShoppingCart from "@mui/icons-material/ShoppingCart";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// GLOBAL CUSTOM COMPONENT
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENT
+import { HoverWrapper } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+  handleIncrementQuantity: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleView,
+  toggleFavorite,
+  handleIncrementQuantity,
+}: Props) {
+  return (
+    <HoverWrapper className="controller">
+      <Span onClick={toggleView}>
+        <RemoveRedEye />
+      </Span>
+
+      <Span
+        onClick={toggleFavorite}
+        borderLeft="1px solid"
+        borderRight="1px solid"
+        borderColor="grey.300"
+      >
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="disabled" />
+        )}
+      </Span>
+
+      <Span onClick={handleIncrementQuantity}>
+        <ShoppingCart />
+      </Span>
+    </HoverWrapper>
+  );
+}

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

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

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

@@ -0,0 +1,128 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import DiscountChip from "../discount-chip";
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import ProductRating from "../product-rating";
+import HoverActions from "./components/hover-actions";
+import QuantityButtons from "../product-card-1/components/quantity-buttons";
+// STYLED COMPONENTS
+import { ContentWrapper, ImageWrapper, StyledBazaarCard } from "./styles/index";
+
+// ===============================================================
+type Props = {
+  off: number;
+  slug: string;
+  title: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+};
+// ===============================================================
+
+export default function ProductCard4(props: Props) {
+  const {
+    off,
+    id,
+    title,
+    price,
+    imgUrl,
+    rating,
+    hideRating,
+    hoverEffect,
+    slug,
+  } = props;
+
+  const {
+    cartItem,
+    handleCartAmountChange,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    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 (
+    <StyledBazaarCard hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={off} />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage alt={title} src={imgUrl} width={450} height={450} />
+        </Link>
+
+        {/* HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleView={toggleDialog}
+          toggleFavorite={toggleFavorite}
+          handleIncrementQuantity={handleIncrementQuantity}
+        />
+      </ImageWrapper>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+      />
+
+      <ContentWrapper>
+        <Box flex="1 1 0" pt="3px">
+          {/* PRODUCT NAME / TITLE */}
+          <ProductTitle title={title} slug={slug} />
+
+          {/* PRODUCT RATING / REVIEW  */}
+          <ProductRating showRating={!hideRating} rating={rating ?? 0} />
+
+          {/* PRODUCT PRICE WITH DISCOUNT */}
+          <ProductPrice discount={off} price={price} />
+        </Box>
+
+        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
+        <QuantityButtons
+          quantity={cartItem?.Quantity || 0}
+          handleIncrement={handleIncrementQuantity}
+          handleDecrement={handleDecrementQuantity}
+        />
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,66 @@
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+
+export const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({
+  height: "100%",
+  margin: "auto",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: "8px",
+  position: "relative",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  transition: "all 250ms ease-in-out",
+  "&:hover": {
+    boxShadow: theme.shadows[2],
+    "& .controller": { display: "flex", bottom: 20 },
+  },
+}));
+
+export const HoverWrapper = styled(FlexBetween)(({ theme }) => ({
+  left: 0,
+  right: 0,
+  width: 120,
+  height: 25,
+  bottom: -40,
+  margin: "auto",
+  overflow: "hidden",
+  background: "#fff",
+  borderRadius: "5px",
+  position: "absolute",
+  boxShadow: theme.shadows[2],
+  transition: "bottom 0.3s ease-in-out",
+  "& span, & a": {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    "&:hover": { cursor: "pointer", background: "#f3f5f9" },
+  },
+  "& span": { padding: "0px 10px" },
+  "& svg": { fontSize: 18, color: theme.palette.grey[600] },
+}));
+
+export const ImageWrapper = styled("div")(({ theme }) => ({
+  minHeight: 288,
+  display: "grid",
+  overflow: "hidden",
+  textAlign: "center",
+  position: "relative",
+  padding: "44px 40px",
+  placeItems: "center",
+  backgroundColor: theme.palette.grey[100],
+}));
+
+export const ContentWrapper = styled("div")({
+  gap: 8,
+  display: "flex",
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});