@evenicanpm/storefront-core 1.0.0-alpha

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

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

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

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

package/src/components/_components/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 "@/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 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/_components/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 "@/components/_components/BazaarCard";
+import { FlexBetween } from "@/components/_components/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",
+  },
+});

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

@@ -0,0 +1,49 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// STYLED COMPONENT
+import { ButtonBox } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  hasQty: boolean;
+  handleDecrementQuantity: () => void;
+  handleIncrementQuantity: () => void;
+}
+// ==============================================================
+
+export default function ButtonActions({
+  hasQty,
+  handleDecrementQuantity,
+  handleIncrementQuantity,
+}: Props) {
+  const BTN_STYLE = { py: "3px", fontSize: 13, width: "100%" };
+
+  return (
+    <ButtonBox>
+      {hasQty ? (
+        <Button
+          variant="contained"
+          onClick={handleDecrementQuantity}
+          sx={BTN_STYLE}
+        >
+          <Remove /> Remove from Cart
+        </Button>
+      ) : (
+        <Button
+          variant="contained"
+          onClick={handleIncrementQuantity}
+          sx={BTN_STYLE}
+        >
+          <Add /> Add to Cart
+        </Button>
+      )}
+
+      <Button variant="contained" sx={{ p: "3px 8px" }}>
+        <FavoriteBorder sx={{ fontSize: 16 }} />
+      </Button>
+    </ButtonBox>
+  );
+}

package/src/components/_components/product-cards/product-card-5/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 { 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>
+
+      <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={handleIncrementQuantity}>
+        <AddShoppingCart />
+      </Span>
+    </HoverWrapper>
+  );
+}

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

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