@evenicanpm/storefront-core 1.0.0-alpha

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

@@ -0,0 +1,137 @@
+"use client";
+
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import DiscountChip from "../discount-chip";
+import ProductRating from "../product-rating";
+import HoverActions from "./components/hover-actions";
+import ButtonActions from "./components/button-actions";
+// STYLED COMPONENTS
+import {
+  ContentWrapper,
+  ImageBox,
+  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 ProductCard5(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 elevation={0} hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip
+          discount={off}
+          sx={{ left: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+        />
+
+        <ImageBox>
+          {/* PRODUCT IMAGE / THUMBNAIL */}
+          <Link href={`/products/${slug}`}>
+            <LazyImage alt={title} src={imgUrl} width={150} height={150} />
+          </Link>
+
+          {/* HOVER ACTION ICONS */}
+          <HoverActions
+            isFavorite={isFavorite}
+            toggleView={toggleDialog}
+            toggleFavorite={toggleFavorite}
+            handleIncrementQuantity={handleIncrementQuantity}
+          />
+        </ImageBox>
+      </ImageWrapper>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+      />
+
+      <ContentWrapper>
+        {/* PRODUCT NAME / TITLE */}
+        <ProductTitle slug={slug} title={title} />
+
+        {/* PRODUCT RATINGS IF AVAILABLE */}
+        <ProductRating rating={rating ?? 0} showRating={!hideRating} />
+
+        {/* PRODUCT PRICE WITH DISCOUNT */}
+        <ProductPrice discount={off} price={price} />
+
+        {/* PRODUCT QUANTITY HANDLER & FAVORITE BUTTONS */}
+        <ButtonActions
+          hasQty={cartItem?.Quantity ? true : false}
+          handleIncrementQuantity={handleIncrementQuantity}
+          handleDecrementQuantity={handleDecrementQuantity}
+        />
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,94 @@
+import styled from "@mui/material/styles/styled";
+import BazaarCard from "@/components/_components/BazaarCard";
+import getPaletteColor from "@/lib/get-palette-color";
+
+export const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({
+  margin: "auto",
+  height: "100%",
+  display: "flex",
+  overflow: "hidden",
+  position: "relative",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  transition: "all 250ms ease-in-out",
+  border: `1px solid ${theme.palette.grey[300]}`,
+  ":hover": {
+    boxShadow: theme.shadows[2],
+    ".controller": { right: 10 },
+  },
+}));
+
+export const ImageWrapper = styled("div")(({ theme }) => ({
+  height: "100%",
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+}));
+
+export const ImageBox = styled("div")(({ theme }) => ({
+  padding: "3rem",
+  height: "100%",
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+}));
+
+export const HoverWrapper = styled("div")(({ theme }) => ({
+  top: 0,
+  bottom: 0,
+  width: 35,
+  right: -40,
+  height: 120,
+  margin: "auto",
+  display: "flex",
+  background: "#fff",
+  overflow: "hidden",
+  borderRadius: "5px",
+  alignItems: "center",
+  position: "absolute",
+  flexDirection: "column",
+  boxShadow: theme.shadows[2],
+  justifyContent: "space-between",
+  transition: "right 0.3s ease-in-out",
+  span: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    padding: "10px 0px",
+    alignItems: "center",
+    justifyContent: "center",
+    ":hover": { cursor: "pointer", background: "#f3f5f9" },
+  },
+  a: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&:hover": { cursor: "pointer", background: "#f3f5f9" },
+  },
+  svg: {
+    fontSize: 18,
+    color: theme.palette.grey[600],
+  },
+}));
+
+export const ContentWrapper = styled("div")({
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});
+
+export const ButtonBox = styled("div")(({ theme }) => ({
+  gap: 10,
+  display: "flex",
+  marginTop: "15px",
+  justifyContent: "space-between",
+  "& button": {
+    color: "#fff",
+    background: theme.palette.primary.main,
+    "&:hover": { background: getPaletteColor(theme, "primary", 600) },
+  },
+}));

package/src/components/_components/product-cards/product-card-6/components/hover-actions.tsx

@@ -0,0 +1,50 @@
+import Divider from "@mui/material/Divider";
+// MUI ICON COMPONENTS
+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 "@/components/_components/Typography";
+// STYLED COMPONENT
+import { ItemController } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+  handleAddToCart: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleView,
+  toggleFavorite,
+  handleAddToCart,
+}: Props) {
+  return (
+    <ItemController className="controlBox">
+      <Span onClick={toggleView}>
+        <RemoveRedEye />
+      </Span>
+
+      <Divider orientation="horizontal" flexItem />
+
+      <Span onClick={toggleFavorite}>
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="primary" />
+        )}
+      </Span>
+
+      <Divider orientation="horizontal" flexItem />
+
+      <Span onClick={handleAddToCart}>
+        <AddShoppingCart />
+      </Span>
+    </ItemController>
+  );
+}

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

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

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

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+// LOCAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import HoverActions from "./components/hover-actions";
+import ProductTitle from "../product-title";
+import ProductPrice from "../product-price";
+import DiscountChip from "../discount-chip";
+import ProductRating from "../product-rating";
+// STYLED COMPONENTS
+import { ContentWrapper, ImgBox, StyledCard } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ============================================================
+interface Props extends Partial<Product> {
+  hideRating?: boolean;
+  showProductSize?: boolean;
+  discount?: number;
+  id?: string;
+  slug: string;
+  title?: string;
+  price?: number;
+  thumbnail?: string;
+  rating?: number;
+  imgUrl?: string;
+}
+// ============================================================
+
+export default function ProductCard6(props: Props) {
+  const {
+    hideRating,
+    discount,
+    id,
+    slug,
+    title,
+    price,
+    thumbnail,
+    rating,
+    imgUrl,
+  } = props;
+
+  const {
+    cartItem,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    toggleFavorite,
+    handleCartAmountChange,
+  } = useProduct(slug);
+
+  const handleAddToCart = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      imgUrl,
+      name: title,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  return (
+    <StyledCard>
+      <ImgBox id="imgBox">
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={discount ?? 0} shape="square" />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            alt={title ?? "title error"}
+            width={550}
+            height={550}
+            src={thumbnail ?? ""}
+            style={{ height: 190, objectFit: "contain" }}
+          />
+        </Link>
+
+        {/* HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleView={toggleDialog}
+          toggleFavorite={toggleFavorite}
+          handleAddToCart={handleAddToCart}
+        />
+      </ImgBox>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{
+          title: title || "",
+          price: price || 0,
+          id: id || "",
+          slug: slug || "",
+          imgGroup: imgUrl ? [imgUrl] : ([] as string[]),
+        }}
+      />
+
+      <ContentWrapper>
+        {/* PRODUCT PRICE WITH DISCOUNT */}
+        <ProductPrice discount={discount ?? 0} price={price ?? 0} />
+
+        {/* PRODUCT NAME / TITLE */}
+        <ProductTitle slug={slug} title={title ?? "title error"} />
+
+        {/* PRODUCT RATINGS IF AVAILABLE */}
+        <ProductRating rating={rating ?? 0} showRating={!hideRating} />
+      </ContentWrapper>
+    </StyledCard>
+  );
+}

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

@@ -0,0 +1,63 @@
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+import { FlexBetween } from "@/components/_components/flex-box/index";
+import getPaletteColor from "@/lib/get-palette-color";
+
+export const StyledCard = styled(Box)(({ theme }) => ({
+  height: "100%",
+  margin: "auto",
+  borderRadius: 0,
+  overflow: "hidden",
+  position: "relative",
+  transition: "all 250ms ease-in-out",
+  "&:hover": {
+    boxShadow: theme.shadows[2],
+    "& .css-1i2n18j": { display: "flex" },
+    "& .controlBox": { display: "flex", bottom: 0 },
+  },
+}));
+
+export const ImgBox = styled("div")(({ theme }) => ({
+  overflow: "hidden",
+  position: "relative",
+  padding: "0 40px 20px 40px",
+  background: getPaletteColor(theme, "primary", 100),
+}));
+
+export const ItemController = styled(FlexBetween)(({ theme }) => ({
+  width: 35,
+  right: 15,
+  height: 120,
+  bottom: -120,
+  background: "#fff",
+  overflow: "hidden",
+  position: "absolute",
+  flexDirection: "column",
+  transition: "bottom 0.3s ease-in-out",
+  "& span": {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    padding: "8px 10px",
+    alignItems: "center",
+    justifyContent: "center",
+    "&:hover": {
+      cursor: "pointer",
+      background: theme.palette.primary.main,
+      "& svg": { color: "#fff" },
+    },
+  },
+  "& svg": { fontSize: 18, color: theme.palette.grey[600] },
+}));
+
+export const ContentWrapper = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "column",
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});

package/src/components/_components/product-cards/product-card-7/components/product-status.tsx

@@ -0,0 +1,18 @@
+// STYLED COMPONENTS
+import { StatusChipBox, StatusChip } from "../styles/index";
+
+// ==============================================================
+type Props = { status: string };
+// ==============================================================
+
+export default function ProductStatus({ status }: Props) {
+  return status ? (
+    <StatusChipBox>
+      <StatusChip>{status}</StatusChip>
+      <div className="triangle">
+        <div className="triangle-left" />
+        <div className="triangle-right" />
+      </div>
+    </StatusChipBox>
+  ) : null;
+}

package/src/components/_components/product-cards/product-card-7/components/quantity-buttons.tsx

@@ -0,0 +1,47 @@
+import { Fragment } from "react";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENT
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { Paragraph } from "@/components/_components/Typography";
+// STYLED COMPONENT
+import { StyledButton } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+}
+// ==============================================================
+
+export default function QuantityButtons({
+  quantity,
+  handleDecrement,
+  handleIncrement,
+}: Props) {
+  return (
+    <FlexBox
+      width="30px"
+      alignItems="center"
+      className="add-cart"
+      flexDirection="column-reverse"
+      justifyContent={quantity ? "space-between" : "flex-start"}
+    >
+      <StyledButton variant="outlined" onClick={handleIncrement}>
+        <Add fontSize="small" />
+      </StyledButton>
+
+      {quantity ? (
+        <Fragment>
+          <Paragraph fontWeight={600}>{quantity}</Paragraph>
+
+          <StyledButton variant="outlined" onClick={handleDecrement}>
+            <Remove fontSize="small" />
+          </StyledButton>
+        </Fragment>
+      ) : null}
+    </FlexBox>
+  );
+}

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

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

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

@@ -0,0 +1,136 @@
+"use client";
+
+import Link from "next/link";
+import { SxProps, Theme } from "@mui/material/styles";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { H3, Span } from "@/components/_components/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>
+  );
+}