@evenicanpm/storefront-core 1.0.2 → 1.0.3

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>
+  );
+}

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

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

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

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

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard12({ product }: Props) {
+  const { slug, title, thumbnail, price, discount, rating } = product || {};
+
+  return (
+    <Link href={`/products/${slug}`}>
+      <FlexBox bgcolor="grey.50" borderRadius={3} mb={2}>
+        <LazyImage alt={title} width={380} height={379} src={thumbnail} />
+      </FlexBox>
+
+      <div>
+        <Rating readOnly value={rating} size="small" precision={0.5} />
+        <H6 fontSize={17} fontWeight={700}>
+          {title}
+        </H6>
+
+        <PriceText>
+          {discount ? (
+            <span className="base-price">{currency(price)}</span>
+          ) : null}
+          {calculateDiscount(price, discount)}
+        </PriceText>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 17,
+  fontWeight: 700,
+  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-13/index.ts

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

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

@@ -0,0 +1,48 @@
+import Link from "next/link";
+// LOCAL CUSTOM COMPONENTS
+import DiscountChip from "../discount-chip";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H3,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { CardRoot, PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard13({ product }: Props) {
+  const { title, thumbnail, price, discount, slug } = product || {};
+
+  return (
+    <CardRoot elevation={0}>
+      <Link href={`/products/${slug}`}>
+        {/* SALE CHIP */}
+        <DiscountChip discount={discount} sx={{ top: 15, left: 15 }} />
+
+        {/* PRODUCT IMAGE */}
+        <LazyImage alt={title} width={380} height={379} src={thumbnail} />
+
+        <div className="content">
+          <Paragraph fontWeight={600} color="grey.600">
+            Supplies
+          </Paragraph>
+
+          <H3 fontSize={18}>{title}</H3>
+
+          <PriceText>
+            {calculateDiscount(price, discount)}
+            {discount ? <span>{currency(price)}</span> : null}
+          </PriceText>
+        </div>
+      </Link>
+    </CardRoot>
+  );
+}

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

@@ -0,0 +1,25 @@
+"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]}`,
+  ".content": { padding: "1rem", textAlign: "center" },
+}));
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 16,
+  fontWeight: 700,
+  color: theme.palette.primary.main,
+
+  span: {
+    fontSize: 14,
+    marginLeft: 6,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));

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

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

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

@@ -0,0 +1,125 @@
+"use client";
+
+import Link from "next/link";
+import { Fragment } from "react";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+import clsx from "clsx";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import {
+  H6,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { Content, PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+interface Props {
+  product: Product;
+  btnSmall?: boolean;
+}
+// ==============================================================
+
+export default function ProductCard14({ product, btnSmall = false }: Props) {
+  const { id, slug, title, thumbnail, price, discount } = product || {};
+
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <Fragment>
+      <Link href={`/products/${slug}`}>
+        <FlexBox bgcolor="grey.50" borderRadius={3} mb={2}>
+          <LazyImage alt={title} width={260} height={280} src={thumbnail} />
+        </FlexBox>
+      </Link>
+
+      <Content>
+        <H6 fontSize={17} fontWeight={700}>
+          {title}
+        </H6>
+
+        <Paragraph color="grey.600" fontWeight={600}>
+          12 pcs
+        </Paragraph>
+
+        <PriceText>
+          {calculateDiscount(price, discount)}
+          {discount ? (
+            <span className="base-price">{currency(price)}</span>
+          ) : null}
+        </PriceText>
+
+        <div className={clsx({ "button-small": btnSmall })}>
+          {!cartItem?.Quantity ? (
+            <Button
+              fullWidth
+              disableElevation
+              color="primary"
+              variant="contained"
+              onClick={handleIncrementQuantity}
+            >
+              Add To Cart
+            </Button>
+          ) : (
+            <div className="button-group">
+              <ButtonBase
+                className="base-button"
+                onClick={handleDecrementQuantity}
+              >
+                <Remove fontSize="small" />
+              </ButtonBase>
+
+              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
+                {cartItem?.Quantity}
+              </Paragraph>
+
+              <ButtonBase
+                className="base-button"
+                onClick={handleIncrementQuantity}
+              >
+                <Add fontSize="small" />
+              </ButtonBase>
+            </div>
+          )}
+        </div>
+      </Content>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+import getPaletteColor from "@/lib/get-palette-color";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  gap: 8,
+  fontSize: 17,
+  fontWeight: 700,
+  marginBottom: 8,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.primary.main,
+  ".base-price": {
+    fontSize: 15,
+    // marginLeft: 8,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));
+
+export const Content = styled("div")(({ theme }) => ({
+  textAlign: "center",
+  ".button-group": {
+    color: "white",
+    display: "flex",
+    overflow: "hidden",
+    borderRadius: "6px",
+    alignItems: "center",
+    backgroundColor: theme.palette.primary.main,
+    ".base-button": {
+      padding: "8px 16px",
+      backgroundColor: getPaletteColor(theme, "primary", 800),
+    },
+  },
+  ".button-small": { maxWidth: 170, margin: "auto" },
+  ".MuiButton-containedPrimary": { color: "white" },
+}));

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

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

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

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H6,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { Content, PriceText, StyledRoot } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+interface Props {
+  product: Product;
+}
+// ==============================================================
+
+export default function ProductCard14({ product }: Props) {
+  const { id, slug, title, thumbnail, price, discount } = product || {};
+
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <StyledRoot>
+      <Link href={`/products/${slug}`}>
+        <LazyImage alt={title} width={260} height={280} src={thumbnail} />
+      </Link>
+
+      <Content>
+        <div>
+          <H6 fontSize={17} fontWeight={700}>
+            {title}
+          </H6>
+
+          <Paragraph color="grey.600" mb={2}>
+            10% off
+          </Paragraph>
+
+          <PriceText>
+            {calculateDiscount(price, discount)}
+            {discount ? (
+              <span className="base-price">{currency(price)}</span>
+            ) : null}
+          </PriceText>
+        </div>
+
+        <div>
+          {!cartItem?.Quantity ? (
+            <Button
+              fullWidth
+              disableElevation
+              color="primary"
+              variant="contained"
+              onClick={handleIncrementQuantity}
+            >
+              Add To Cart
+            </Button>
+          ) : (
+            <div className="button-group">
+              <ButtonBase
+                className="base-button"
+                onClick={handleDecrementQuantity}
+              >
+                <Remove fontSize="small" />
+              </ButtonBase>
+
+              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
+                {cartItem?.Quantity}
+              </Paragraph>
+
+              <ButtonBase
+                className="base-button"
+                onClick={handleIncrementQuantity}
+              >
+                <Add fontSize="small" />
+              </ButtonBase>
+            </div>
+          )}
+        </div>
+      </Content>
+    </StyledRoot>
+  );
+}