@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -1,124 +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 "@/components/_components/LazyImage";
-import { FlexRowCenter } from "@/components/_components/flex-box/index";
-import { H4, Paragraph, Small } from "@/components/_components/Typography";
-import ProductViewDialog from "@/components/_components/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 "@/components/_components/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/_components/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/_components/product-cards/product-card-11/index.ts

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

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

@@ -1,63 +0,0 @@
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@/components/_components/LazyImage";
-import { H3, Paragraph } from "@/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexRowCenter,
-} from "@/components/_components/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/_components/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/_components/product-cards/product-card-12/index.ts

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

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

@@ -1,42 +0,0 @@
-import Link from "next/link";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@/components/_components/Typography";
-import LazyImage from "@/components/_components/LazyImage";
-import { FlexBox } from "@/components/_components/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 "@/components/_components/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/_components/product-cards/product-card-12/styles/index.ts

@@ -1,16 +0,0 @@
-"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/_components/product-cards/product-card-13/index.ts

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

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

@@ -1,45 +0,0 @@
-import Link from "next/link";
-// LOCAL CUSTOM COMPONENTS
-import DiscountChip from "../discount-chip";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@/components/_components/LazyImage";
-import { H3, Paragraph } from "@/components/_components/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 "@/components/_components/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/_components/product-cards/product-card-13/styles/index.ts

@@ -1,25 +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]}`,
-  ".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/_components/product-cards/product-card-14/index.ts

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

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

@@ -1,122 +0,0 @@
-"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 "@/components/_components/LazyImage";
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { H6, Paragraph } from "@/components/_components/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 "@/components/_components/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/_components/product-cards/product-card-14/styles/index.ts

@@ -1,40 +0,0 @@
-"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/_components/product-cards/product-card-15/index.ts

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

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

@@ -1,118 +0,0 @@
-"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 "@/components/_components/LazyImage";
-import { H6, Paragraph } from "@/components/_components/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 "@/components/_components/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>
-  );
-}