@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -4,49 +4,49 @@ import { StyledComponent } from "@mui/styled-engine";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 
 export const StyledBazaarCard = styled(BazaarCard)({
-  height: "100%",
-  margin: "auto",
-  display: "flex",
-  overflow: "hidden",
-  borderRadius: "8px",
-  position: "relative",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  transition: "all 250ms ease-in-out",
-  ":hover": { "& .hover-box": { opacity: 1 } },
+	height: "100%",
+	margin: "auto",
+	display: "flex",
+	overflow: "hidden",
+	borderRadius: "8px",
+	position: "relative",
+	flexDirection: "column",
+	justifyContent: "space-between",
+	transition: "all 250ms ease-in-out",
+	":hover": { "& .hover-box": { opacity: 1 } },
 });
 
 export const ImageWrapper = styled("div")(({ theme }) => ({
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
+	textAlign: "center",
+	position: "relative",
+	display: "inline-block",
+	[theme.breakpoints.down("sm")]: { display: "block" },
 }));
 
 export const HoverIconWrapper = styled("div")({
-  zIndex: 2,
-  top: "7px",
-  opacity: 0,
-  right: "15px",
-  display: "flex",
-  cursor: "pointer",
-  position: "absolute",
-  flexDirection: "column",
-  transition: "all 0.3s ease-in-out",
+	zIndex: 2,
+	top: "7px",
+	opacity: 0,
+	right: "15px",
+	display: "flex",
+	cursor: "pointer",
+	position: "absolute",
+	flexDirection: "column",
+	transition: "all 0.3s ease-in-out",
 });
 
 export const ContentWrapper = styled("div")({
-  gap: 8,
-  display: "flex",
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
+	gap: 8,
+	display: "flex",
+	padding: "1rem",
+	"& .title, & .categories": {
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+	},
 });
 
 const StyledBazaarCardType: StyledComponent<typeof BazaarCard, {}, "div"> =
-  StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
+	StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
 
 export default StyledBazaarCardType;

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ProductCardPlp from "./index";
+import { Box } from "@mui/material";
+import { data } from "../../../../__mocks__/products";
+
+const meta = {
+	title: "Product/ProductCards/ProductCardPlp",
+	component: ProductCardPlp,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta<typeof ProductCardPlp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleProduct = {
+	title: data.products[0].Name,
+	id: data.products[0].RecordId,
+	price: data.products[0].Price,
+	imgUrl: data.products[0].PrimaryImageUrl,
+	rating: data.products[0].TotalRatings,
+	discount: 20,
+	size: "10 US",
+	slug: data.products[0].ProductNumber,
+	hoverEffect: true,
+};
+
+export const GridView: Story = {
+	args: {
+		product: sampleProduct,
+		children: (
+			<>
+				<ProductCardPlp.ImageWrapper>
+					<ProductCardPlp.Image />
+					<ProductCardPlp.HoverActions>
+						<ProductCardPlp.QuickViewButton />
+						<ProductCardPlp.FavoriteButton />
+					</ProductCardPlp.HoverActions>
+				</ProductCardPlp.ImageWrapper>
+				<ProductCardPlp.Body>
+					<ProductCardPlp.Info>
+						<ProductCardPlp.Title />
+						<ProductCardPlp.Rating />
+						<ProductCardPlp.Price />
+					</ProductCardPlp.Info>
+					<ProductCardPlp.Actions>
+						<ProductCardPlp.QuantityButtons />
+					</ProductCardPlp.Actions>
+				</ProductCardPlp.Body>
+			</>
+		),
+	},
+	decorators: [
+		(Story) => (
+			<Box sx={{ maxWidth: "280px" }}>
+				<Story />
+			</Box>
+		),
+	],
+};

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

@@ -1,161 +1,253 @@
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, ReactNode, useState } from "react";
 import Link from "next/link";
 import Rating from "@mui/material/Rating";
+import IconButton from "@mui/material/IconButton";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
 // GLOBAL CUSTOM COMPONENTS
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
-  FlexBetween,
-  FlexBox,
+	FlexBetween,
+	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-// STYLED COMPONENTS
-import { PriceText } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
-// LOCAL COMPONENTS
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+// LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/components/quantity-buttons";
-// LOCAL CUSTOM HOOKS
-import useProduct from "@evenicanpm/storefront-core/src/components-v2/product-cards/use-product";
-
-import buildDetailUrl from "@/lib/build-detail-url";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+// LIBRARY AND HOOKS
+import {
+	calculateDiscount,
+	currency,
+} from "@evenicanpm/storefront-core/src/lib/lib";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
+// STYLED COMPONENTS
+import {
+	PriceText,
+	HoverIconWrapper,
+} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
 
 type Product = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: number;
+	title: string;
+	slug: string;
+	price: number;
+	imgUrl: string;
+	rating?: number;
+	discount?: number;
+	id: number;
 };
 
-const ProductCardPlpContext = createContext<{ product: Product } | null>(null);
+const ProductCardPlpContext = createContext<{
+	product: Product;
+	setOpenAddToWishlistDialog?: (open: boolean) => void;
+	setOpenProductModal?: (open: boolean) => void;
+} | null>(null);
 
 type ProductCardPlpProps = {
-  product: Product;
-  children: ReactNode;
+	product: Product;
+	children: ReactNode;
 };
 
 const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
-  return (
-    <ProductCardPlpContext.Provider value={{ product }}>
-      <div>{children}</div>
-    </ProductCardPlpContext.Provider>
-  );
+	const [openProductModal, setOpenProductModal] = useState(false);
+	const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+
+	return (
+		<ProductCardPlpContext.Provider
+			value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
+		>
+			<div>{children}</div>
+			{openAddToWishlistDialog && (
+				<AddToWishlistDialog
+					open={openAddToWishlistDialog}
+					handleClose={() => setOpenAddToWishlistDialog(false)}
+					productId={Number(product.id)}
+				/>
+			)}
+			{openProductModal && (
+				<ProductViewDialog
+					openDialog={openProductModal}
+					handleCloseDialog={() => setOpenProductModal(false)}
+					productId={Number(product.id)}
+				/>
+			)}
+		</ProductCardPlpContext.Provider>
+	);
+};
+
+ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { title, id } = ctx.product;
+
+	return (
+		<Link href={buildDetailUrl(title, id)}>
+			<FlexBox
+				className="hover-box-container"
+				position="relative"
+				bgcolor="grey.50"
+				borderRadius={3}
+				mb={2}
+			>
+				{children}
+			</FlexBox>
+		</Link>
+	);
 };
 
 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>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { title, imgUrl, discount = 0 } = ctx.product;
+	return (
+		<>
+			<ImageWithFallback
+				alt={title ?? "Product Image"}
+				width={380}
+				height={379}
+				src={imgUrl}
+				style={{ borderRadius: "12px" }}
+			/>
+			{discount ? (
+				<DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
+			) : null}
+		</>
+	);
 };
 
 ProductCardPlp.Body = ({ children }: { children: React.ReactNode }) => {
-  return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
+	return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
 };
 
 ProductCardPlp.Info = ({ children }: { children: React.ReactNode }) => {
-  return <div>{children}</div>;
+	return <div>{children}</div>;
 };
 
 ProductCardPlp.Actions = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
+	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>
-  );
+	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 ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
 
-  const { rating } = ctx.product;
+	const { rating } = ctx.product;
 
-  return <Rating readOnly value={rating} size="small" precision={0.5} />;
+	return <Rating readOnly value={rating} size="small" precision={0.5} />;
 };
 
 ProductCardPlp.Price = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { discount = 0, price } = ctx.product;
+	if (price == null) return null;
+
+	return (
+		<PriceText>
+			{discount > 0 ? (
+				<>
+					<span className="base-price">{currency(price)}</span>
+					{calculateDiscount(price, discount)}
+				</>
+			) : (
+				currency(price)
+			)}
+		</PriceText>
+	);
+};
+
+ProductCardPlp.HoverActions = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
+	);
+};
+
+ProductCardPlp.QuickViewButton = () => {
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	return (
+		<IconButton
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				ctx.setOpenProductModal?.(true);
+			}}
+		>
+			<RemoveRedEye color="disabled" fontSize="small" />
+		</IconButton>
+	);
+};
+
+ProductCardPlp.FavoriteButton = () => {
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { id } = ctx.product;
 
-  const { discount, price } = ctx.product;
+	const isFavorite = useFavorite(Number(id));
 
-  return (
-    <PriceText>
-      {discount ? <span className="base-price">{currency(price)}</span> : null}
-      {calculateDiscount(price, discount)}
-    </PriceText>
-  );
+	return (
+		<FavoriteButton
+			isFavorite={isFavorite}
+			onToggle={() => {
+				ctx.setOpenAddToWishlistDialog?.(true);
+			}}
+		/>
+	);
 };
 
+// Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
+// So hide them for now, implement based on client requirements.
 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}
-    />
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { id } = ctx.product;
+	const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
+	const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
+
+	const handleIncrementQuantity = () => {
+		const qty = quantity + 1;
+		handleCartAmountChange(qty);
+		setQuantity(qty);
+	};
+
+	const handleDecrementQuantity = () => {
+		if (quantity <= 0) return;
+		const qty = quantity - 1;
+		handleCartAmountChange(qty);
+		setQuantity(qty);
+	};
+
+	return (
+		<QuantityButtons
+			quantity={quantity}
+			handleIncrement={handleIncrementQuantity}
+			handleDecrement={handleDecrementQuantity}
+			isLineUpdating={loading}
+		/>
+	);
 };
 
 export default ProductCardPlp;

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

@@ -3,16 +3,33 @@
 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],
-  },
+	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],
+	},
 }));
+
+export const HoverIconWrapper = styled("div")({
+	zIndex: 2,
+	top: "7px",
+	right: "15px",
+	display: "flex",
+	cursor: "pointer",
+	position: "absolute",
+	flexDirection: "column",
+	opacity: 0,
+	transition: "all 0.3s ease-in-out",
+
+	// Show when parent (with .hover-box-container) is hovered
+	".hover-box-container:hover &": {
+		opacity: 1,
+	},
+});

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { ProductCardPlpList } from "./index";
+import { data } from "../../../../__mocks__/products";
+
+const meta = {
+	title: "Product/ProductCards/ProductCardPlpList",
+	component: ProductCardPlpList,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta<typeof ProductCardPlpList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleProduct = {
+	title: data.products[0].Name,
+	id: data.products[0].RecordId,
+	price: data.products[0].Price,
+	imgUrl: data.products[0].PrimaryImageUrl,
+	rating: data.products[0].TotalRatings,
+	discount: 20,
+	size: "10 US",
+	slug: data.products[0].ProductNumber,
+	hoverEffect: true,
+};
+
+export const ListView: Story = {
+	args: {
+		product: sampleProduct,
+		children: (
+			<>
+				<ProductCardPlpList.QuickViewButton />
+				<ProductCardPlpList.Body>
+					<ProductCardPlpList.Image />
+					<ProductCardPlpList.Content>
+						<ProductCardPlpList.Info>
+							<ProductCardPlpList.Tags />
+							<ProductCardPlpList.Title />
+							<ProductCardPlpList.Rating />
+							<ProductCardPlpList.Price />
+						</ProductCardPlpList.Info>
+						<ProductCardPlpList.Actions>
+							<ProductCardPlpList.FavoriteButton />
+						</ProductCardPlpList.Actions>
+					</ProductCardPlpList.Content>
+				</ProductCardPlpList.Body>
+			</>
+		),
+	},
+};

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

@@ -3,31 +3,31 @@ 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",
-  },
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	"& p": {
+		fontSize: 11,
+		fontWeight: 700,
+		display: "inline-block",
+		textDecoration: "underline",
+	},
 }));
 
 // ==============================================================
 interface Props {
-  tags: string[];
+	tags: string[];
 }
 // ==============================================================
 
 export default function ProductTags({ tags }: Props) {
-  return (
-    <StyledRoot>
-      {tags.map((item) => (
-        <Link href="#" key={item}>
-          <p>{item}</p>
-        </Link>
-      ))}
-    </StyledRoot>
-  );
+	return (
+		<StyledRoot>
+			{tags.map((item) => (
+				<Link href="#" key={item}>
+					<p>{item}</p>
+				</Link>
+			))}
+		</StyledRoot>
+	);
 }