@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/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 "@/components/_components/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/_components/product-cards/product-card-8/index.ts

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

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

@@ -0,0 +1,133 @@
+"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";
+import AddShoppingCart from "@mui/icons-material/AddShoppingCart";
+// 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";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { currency } from "@/lib/lib";
+// CUSTOM COMPONENTS
+import {
+  AddToCartButton,
+  Card,
+  CardMedia,
+  FavoriteButton,
+  QuickViewButton,
+} from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard8({ product }: Props) {
+  const { slug, id, title, price, thumbnail, images, categories, reviews } =
+    product || {};
+
+  const {
+    cartItem,
+    handleCartAmountChange,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    toggleFavorite,
+  } = useProduct(slug);
+
+  // HANDLE ADD TO CART PRODUCT
+  const handleAddToCart = () => {
+    const payload = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    payload;
+    handleCartAmountChange();
+  };
+
+  return (
+    <Card>
+      <CardMedia>
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            width={300}
+            height={300}
+            alt="category"
+            className="product-img"
+            src={thumbnail}
+          />
+        </Link>
+
+        {/* ADD TO CART BUTTON */}
+        <AddToCartButton className="product-actions" onClick={handleAddToCart}>
+          <AddShoppingCart className="icon" fontSize="small" />
+        </AddToCartButton>
+
+        {/* PRODUCT FAVORITE BUTTON */}
+        <FavoriteButton className="product-actions" onClick={toggleFavorite}>
+          {isFavorite ? (
+            <Favorite className="icon" fontSize="small" color="primary" />
+          ) : (
+            <FavoriteBorder className="icon" fontSize="small" />
+          )}
+        </FavoriteButton>
+
+        {/* PRODUCT QUICK VIEW BUTTON */}
+        <Box mx={1} position="relative">
+          <QuickViewButton
+            fullWidth
+            size="large"
+            variant="contained"
+            className="product-view-action"
+            onClick={toggleDialog}
+          >
+            Quick View
+          </QuickViewButton>
+        </Box>
+      </CardMedia>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ id, slug, title, price, imgGroup: images ?? [] }}
+      />
+
+      <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={4} readOnly sx={{ fontSize: 16 }} />
+          <Small fontWeight={600} color="grey.500">
+            ({reviews?.length} Reviews)
+          </Small>
+        </FlexRowCenter>
+      </Box>
+    </Card>
+  );
+}

package/src/components/_components/product-cards/product-card-8/styles/index.ts

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

package/src/components/_components/product-cards/product-card-9/components/add-to-cart.tsx

@@ -0,0 +1,60 @@
+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 "@/components/_components/Typography";
+import { FlexBetween, FlexBox } from "@/components/_components/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/_components/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/_components/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/_components/product-cards/product-card-9/index.ts

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

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

@@ -0,0 +1,169 @@
+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 "@/components/_components/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/_components/product-cards/product-price.tsx

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

package/src/components/_components/product-cards/product-rating.tsx

@@ -0,0 +1,28 @@
+import Rating from "@mui/material/Rating";
+import { BoxProps } from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@/components/_components/Typography";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+
+// ==============================================================
+interface Props extends BoxProps {
+  rating: number;
+  showRating: boolean;
+}
+// ==============================================================
+
+export default function ProductRating({
+  showRating,
+  rating = 0,
+  ...props
+}: Props) {
+  if (showRating) {
+    return (
+      <FlexBox gap={1} alignItems="center" {...props}>
+        <Rating size="small" value={rating} color="warn" readOnly />
+        <Span color="grey.600">({rating})</Span>
+      </FlexBox>
+    );
+  }
+  return null;
+}

package/src/components/_components/product-cards/product-title.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { H3 } from "@/components/_components/Typography";
+
+// ==============================================================
+type Props = { title: string; slug: string };
+// ==============================================================
+
+export default function ProductTitle({ title, slug }: Props) {
+  return (
+    <Link href={`/products/${slug}`}>
+      <H3
+        mb={1}
+        ellipsis
+        title={title}
+        fontSize={14}
+        fontWeight={600}
+        className="title"
+        color="text.secondary"
+      >
+        {title}
+      </H3>
+    </Link>
+  );
+}