@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,161 @@
+import { createContext, useContext, ReactNode } from "react";
+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 {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import ImageWithFallback from "../../ImageWithFallback";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { PriceText } from "./styles/index";
+// LOCAL COMPONENTS
+import DiscountChip from "../discount-chip";
+import QuantityButtons from "./components/quantity-buttons";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+
+import buildDetailUrl from "@/lib/build-detail-url";
+
+type Product = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: number;
+};
+
+const ProductCardPlpContext = createContext<{ product: Product } | null>(null);
+
+type ProductCardPlpProps = {
+  product: Product;
+  children: ReactNode;
+};
+
+const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
+  return (
+    <ProductCardPlpContext.Provider value={{ product }}>
+      <div>{children}</div>
+    </ProductCardPlpContext.Provider>
+  );
+};
+
+ProductCardPlp.Image = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { title, id, imgUrl, discount = 0 } = ctx.product;
+
+  return (
+    <Link href={buildDetailUrl(title, id)}>
+      <FlexBox position="relative" bgcolor="grey.50" borderRadius={3} mb={2}>
+        <ImageWithFallback
+          alt={title ?? "Product Image"}
+          width={380}
+          height={379}
+          src={imgUrl}
+          style={{ borderRadius: "12px" }}
+        />
+        {discount ? (
+          <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
+        ) : null}
+      </FlexBox>
+    </Link>
+  );
+};
+
+ProductCardPlp.Body = ({ children }: { children: React.ReactNode }) => {
+  return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
+};
+
+ProductCardPlp.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+ProductCardPlp.Actions = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+ProductCardPlp.Title = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { title, id } = ctx.product;
+  return (
+    <Link href={buildDetailUrl(title, id)}>
+      <H6 fontWeight={700} mb={1}>
+        {title}
+      </H6>
+    </Link>
+  );
+};
+
+ProductCardPlp.Rating = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { rating } = ctx.product;
+
+  return <Rating readOnly value={rating} size="small" precision={0.5} />;
+};
+
+ProductCardPlp.Price = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { discount, price } = ctx.product;
+
+  return (
+    <PriceText>
+      {discount ? <span className="base-price">{currency(price)}</span> : null}
+      {calculateDiscount(price, discount)}
+    </PriceText>
+  );
+};
+
+ProductCardPlp.QuantityButtons = () => {
+  const ctx = useContext(ProductCardPlpContext);
+  if (!ctx) return null;
+
+  const { id, price, title, imgUrl, slug } = ctx.product;
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+  return (
+    <QuantityButtons
+      quantity={cartItem?.Quantity || 0}
+      handleIncrement={handleIncrementQuantity}
+      handleDecrement={handleDecrementQuantity}
+    />
+  );
+};
+
+export default ProductCardPlp;

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

@@ -0,0 +1,18 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 17,
+  lineHeight: 1,
+  fontWeight: 700,
+  marginTop: ".75rem",
+  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-plp-list/components/add-to-cart.tsx

@@ -0,0 +1,63 @@
+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 "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-cards/product-card-plp-list/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-v2/product-cards/product-card-plp-list/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-v2/product-cards/product-card-plp-list/index.ts

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

package/src/components-v2/product-cards/product-card-plp-list/product-card.tsx

@@ -0,0 +1,219 @@
+import { createContext, useContext, ReactNode } from "react";
+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 "@evenicanpm/storefront-core/src/components-v2/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";
+import ProductTags from "./components/tags";
+
+// 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 Product = {
+  id: number;
+  discount?: number;
+  slug: string;
+  price: number;
+  title: string;
+  imgUrl: string;
+  rating: number;
+  tags?: Array<string>;
+};
+
+const ProductCardPlpListContext = createContext<{ product: Product } | null>(
+  null,
+);
+
+type ProductCardPlpListProps = {
+  product: Product;
+  children: ReactNode;
+};
+
+const ProductCardPlpList = ({ product, children }: ProductCardPlpListProps) => {
+  return (
+    <ProductCardPlpListContext.Provider value={{ product }}>
+      <Wrapper>{children}</Wrapper>
+    </ProductCardPlpListContext.Provider>
+  );
+};
+
+ProductCardPlpList.FavoriteButton = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { slug } = ctx.product;
+
+  const { isFavorite, toggleFavorite } = useProduct(slug);
+
+  return (
+    <FavoriteButton isFavorite={isFavorite} toggleFavorite={toggleFavorite} />
+  );
+};
+
+ProductCardPlpList.Body = ({ children }: { children: React.ReactNode }) => {
+  return <ContentWrapper>{children}</ContentWrapper>;
+};
+
+ProductCardPlpList.Image = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { title, imgUrl, discount = 0 } = ctx.product;
+
+  return (
+    <div className="img-wrapper">
+      <DiscountChip discount={discount ?? 0} />
+      <ImageWithFallback
+        alt={title ?? "Product Image"}
+        src={imgUrl}
+        fill
+        style={{ objectFit: "contain" }}
+        sizes="150px"
+      />
+    </div>
+  );
+};
+
+ProductCardPlpList.Content = ({ children }: { children: React.ReactNode }) => {
+  return <div className="content">{children}</div>;
+};
+
+ProductCardPlpList.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+ProductCardPlpList.Actions = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+ProductCardPlpList.Tags = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { tags } = ctx.product;
+  if (!Array.isArray(tags) || tags.length === 0) return null;
+  return <ProductTags tags={tags} />;
+};
+
+ProductCardPlpList.Title = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { title, id } = ctx.product;
+  return (
+    <Link href={buildDetailUrl(title ?? "", id)}>
+      <H5 fontWeight="700" mt={1} mb={2}>
+        {title}
+      </H5>
+    </Link>
+  );
+};
+
+ProductCardPlpList.Rating = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { rating } = ctx.product;
+
+  return <Rating size="small" value={rating} color="warn" readOnly />;
+};
+
+ProductCardPlpList.Price = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { discount, price } = ctx.product;
+
+  return <ProductPrice price={price} discount={discount ?? 0} />;
+};
+
+ProductCardPlpList.QuantityButtons = () => {
+  const ctx = useContext(ProductCardPlpListContext);
+  if (!ctx) return null;
+
+  const { slug, id, price, imgUrl, title } = ctx.product;
+
+  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 (
+    <AddToCartButton
+      quantity={cartItem?.Quantity ?? 0}
+      handleDecrement={handleDecrementQuantity}
+      handleIncrement={handleIncrementQuantity}
+    />
+  );
+};
+
+export default ProductCardPlpList;

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

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

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// MUI ICON COMPONENTS
+import { RemoveRedEye } from "@mui/icons-material";
+import Favorite from "@mui/icons-material/Favorite";
+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";
+import {
+  H4,
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// UTILS LIBRARY FUNCTION
+import buildDetailUrl from "@/lib/build-detail-url";
+import { currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import {
+  Card,
+  CardMedia,
+  FavoriteButton,
+  QuickViewSmallButton,
+} from "./styles/index";
+
+type Product = {
+  slug: string;
+  id: string | number;
+  title: string;
+  price: number;
+  thumbnail: string;
+  categories: string[];
+  reviews: number;
+  rating: number;
+};
+
+type ProductCardSearchProps = {
+  product: Product;
+  children: ReactNode;
+};
+
+const ProductCardSearchContext = createContext<{
+  product: Product;
+} | null>(null);
+
+const ProductCardSearch = ({ product, children }: ProductCardSearchProps) => {
+  return (
+    <ProductCardSearchContext.Provider value={{ product }}>
+      <Card>{children}</Card>
+    </ProductCardSearchContext.Provider>
+  );
+};
+
+// ===== Subcomponents =====
+
+ProductCardSearch.CardMedia = ({ children }: { children: React.ReactNode }) => {
+  return <CardMedia>{children}</CardMedia>;
+};
+ProductCardSearch.Image = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { title, id, thumbnail } = product;
+  return (
+    <Link href={buildDetailUrl(title, Number(id))}>
+      <LazyImage
+        width={300}
+        height={300}
+        alt={title}
+        className="product-img"
+        src={thumbnail}
+      />
+    </Link>
+  );
+};
+
+ProductCardSearch.Info = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box p={1} textAlign="center">
+      {children}
+    </Box>
+  );
+};
+ProductCardSearch.Category = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { categories } = product;
+  if (!categories.length) return null;
+  return <Small color="grey.500">{categories[0]}</Small>;
+};
+
+ProductCardSearch.Title = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return <Paragraph fontWeight="bold">{product?.title}</Paragraph>;
+};
+
+ProductCardSearch.Price = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return (
+    <H4 fontWeight={700} py={0.5}>
+      {currency(product?.price)}
+    </H4>
+  );
+};
+
+ProductCardSearch.Rating = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  return (
+    <FlexRowCenter gap={1}>
+      <Rating
+        name="read-only"
+        value={product?.rating}
+        readOnly
+        sx={{ fontSize: 16 }}
+      />
+      <Small fontWeight={600} color="grey.500">
+        ({product?.reviews} Reviews)
+      </Small>
+    </FlexRowCenter>
+  );
+};
+
+ProductCardSearch.QuickViewButton = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { id, title, thumbnail, price, slug } = product;
+
+  return (
+    <QuickViewSmallButton className="product-actions">
+      <RemoveRedEye className="icon" fontSize="small" />
+    </QuickViewSmallButton>
+  );
+};
+
+ProductCardSearch.WishlistButton = () => {
+  const ctx = useContext(ProductCardSearchContext);
+  if (!ctx) return null;
+  const { product } = ctx;
+  const { isFavorite } = useProduct(product?.slug);
+
+  return (
+    <FavoriteButton className="product-actions" onClick={() => {}}>
+      {isFavorite ? (
+        <Favorite className="icon" fontSize="small" color="primary" />
+      ) : (
+        <FavoriteBorder className="icon" fontSize="small" />
+      )}
+    </FavoriteButton>
+  );
+};
+
+export default ProductCardSearch;