@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,11 +1,11 @@
 "use client";
 
 import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useMemo,
-  useState,
+	createContext,
+	ReactNode,
+	useContext,
+	useMemo,
+	useState,
 } from "react";
 import Link from "next/link";
 import Box from "@mui/material/Box";
@@ -30,423 +30,423 @@ import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 // STYLED COMPONENTS
 import {
-  ImageWrapper,
-  ContentWrapper,
-  StyledBazaarCard,
-  HoverIconWrapper,
+	ImageWrapper,
+	ContentWrapper,
+	StyledBazaarCard,
+	HoverIconWrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/styles/index";
 // LIBRARY AND HOOKS
-import buildDetailUrl from "@/lib/build-detail-url";
-import useFavorite from "@/hooks/use-favorite";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
 // API AND SCHEMAS
-import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
-import useUpdateWishlist from "@/api-manager/services/user/mutations/update-wishlist";
-import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
-import { WISHLIST_DETAILS_QUERY_KEY } from "@/api-manager/services/user/queries/get-wishlist-details";
+import useRemoveFromWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/remove-from-wishlist";
+import useUpdateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-wishlist";
+import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
+import { WISHLIST_DETAILS_QUERY_KEY } from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlist-details";
 import {
-  ExtendedWishlist,
-  ExtendedProductListLine,
-  WishlistLinesInput,
-} from "@/api-manager/schemas/user.schema";
-import { Cart } from "@/api-manager/schemas/cart.schema";
+	ExtendedWishlist,
+	ExtendedProductListLine,
+	WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 
 function findChild(
-  children: ReactNode,
-  component: typeof WishlistControls,
+	children: ReactNode,
+	component: typeof WishlistControls,
 ): boolean {
-  let found = false;
-
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) return;
-    if (child.type === component) {
-      found = true;
-    } else if (child.props?.children) {
-      found ||= findChild(child.props.children, component);
-    }
-  });
-
-  return found;
+	let found = false;
+
+	React.Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === component) {
+			found = true;
+		} else if (child.props?.children) {
+			found ||= findChild(child.props.children, component);
+		}
+	});
+
+	return found;
 }
 type InternalCtx = {
-  handleToggleFavorite: () => void;
-  openProductModal: boolean;
-  handleToggleProductModal: () => void;
-  quantity: number;
-  handleIncrementQuantity: () => void;
-  handleDecrementQuantity: () => void;
-  isLineUpdating: boolean;
-  handleAddItemToCart: () => void;
-  handleRemoveFromWishlist: () => void;
+	handleToggleFavorite: () => void;
+	openProductModal: boolean;
+	handleToggleProductModal: () => void;
+	quantity: number;
+	handleIncrementQuantity: () => void;
+	handleDecrementQuantity: () => void;
+	isLineUpdating: boolean;
+	handleAddItemToCart: () => void;
+	handleRemoveFromWishlist: () => void;
 };
 type Product = {
-  title: string;
-  slug: string;
-  price: number;
-  size?: string;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: string | number;
-  hoverEffect?: boolean;
+	title: string;
+	slug: string;
+	price: number;
+	size?: string;
+	imgUrl: string;
+	rating?: number;
+	discount?: number;
+	id: string | number;
+	hoverEffect?: boolean;
 };
 
 const ProductCardContext = createContext<{ product: Product } | null>(null);
 
 type ProductCardProps = {
-  product: Product;
-  children: ReactNode;
-  wishlist?: ExtendedWishlist;
-  cart?: Cart;
+	product: Product;
+	children: ReactNode;
+	wishlist?: ExtendedWishlist;
+	cart?: Cart;
 };
 
 const ProductCardInternalContext = createContext<InternalCtx | null>(null);
 
 const ProductCard = ({
-  product,
-  children,
-  wishlist,
-  cart,
+	product,
+	children,
+	wishlist,
+	cart,
 }: ProductCardProps) => {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
-  const { mutateAsync: updateWishlist } = useUpdateWishlist();
-  const { mutateAsync: addToCart } = useAddToCart();
-
-  const foundWishlistProduct = wishlist?.ProductListLines?.find(
-    (item: ExtendedProductListLine) => item.ProductId === product.id,
-  );
-
-  const [openProductModal, setOpenProductModal] = useState(false);
-  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
-  const [quantity, setQuantity] = useState(foundWishlistProduct?.Quantity ?? 0);
-  const [isLineUpdatingLocal, setIsLineUpdatingLocal] = useState(false);
-
-  // detect if WishlistControls are being rendered
-  const containsWishlistControls = useMemo(
-    () => findChild(children, WishlistControls),
-    [children],
-  );
-
-  const handleRemoveFromWishlist = async () => {
-    try {
-      const extendedWishlistLine = wishlist?.ProductListLines?.find(
-        (item: ExtendedProductListLine) => item.ProductId === product.id,
-      );
-      if (extendedWishlistLine && wishlist) {
-        const { ...wishlistLine } = extendedWishlistLine;
-        delete wishlistLine.Product;
-
-        const wishlistLinesInput: WishlistLinesInput = {
-          Id: wishlist.Id,
-          ProductListLines: [wishlistLine],
-        };
-        await removeFromWishlist(wishlistLinesInput);
-        setNotification({
-          message: t("wishlistLineRemoveSuccess"),
-          severity: "success",
-        });
-      }
-    } catch {
-      setNotification({
-        message: t("wishlistLineRemoveFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  const handleToggleFavorite = () => {
-    setOpenAddToWishlistDialog(true);
-  };
-
-  const handleToggleProductModal = () => {
-    setOpenProductModal((prev) => !prev);
-  };
-
-  const handleAddItemToCart = async () => {
-    if (!cart) return;
-    try {
-      await addToCart({
-        cartId: cart.Id,
-        version: cart.Version,
-        cartLine: [{ ProductId: Number(product.id), Quantity: quantity }],
-      });
-      setNotification({
-        message: "Successfully added item to cart",
-        severity: "success",
-      });
-    } catch {
-      setNotification({
-        message: "Failed to add item to cart",
-        severity: "error",
-      });
-    }
-  };
-
-  const isWishlistFetching =
-    useIsFetching({ queryKey: [WISHLIST_DETAILS_QUERY_KEY] }) > 0;
-  const isLineUpdating = isLineUpdatingLocal || isWishlistFetching;
-
-  const handleIncrementQuantity = async () => {
-    if (isLineUpdating) return;
-    setIsLineUpdatingLocal(true);
-
-    try {
-      if (containsWishlistControls && wishlist) {
-        const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
-          const updated = { ...line, Product: undefined };
-          if (line.ProductId === Number(product.id)) {
-            updated.Quantity = quantity + 1;
-          }
-          return updated;
-        });
-        if (!updatedLines) return;
-        await updateWishlist({
-          Id: wishlist?.Id,
-          ProductListLines: updatedLines,
-        });
-      }
-
-      setQuantity((q) => q + 1);
-    } catch (err) {
-      console.error("Increment failed", err);
-    } finally {
-      setIsLineUpdatingLocal(false);
-    }
-  };
-
-  const handleDecrementQuantity = async () => {
-    if (isLineUpdating || quantity <= 0) return;
-    setIsLineUpdatingLocal(true);
-
-    try {
-      if (containsWishlistControls && wishlist) {
-        const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
-          const updated = { ...line, Product: undefined };
-          if (line.ProductId === Number(product.id)) {
-            updated.Quantity = quantity - 1;
-          }
-          return updated;
-        });
-        if (!updatedLines) return;
-        await updateWishlist({
-          Id: wishlist?.Id,
-          ProductListLines: updatedLines,
-        });
-      }
-
-      setQuantity((q) => q - 1);
-    } catch (err) {
-      console.error("Decrement failed", err);
-    } finally {
-      setIsLineUpdatingLocal(false);
-    }
-  };
-
-  const internalContextValue = {
-    handleToggleFavorite,
-    openProductModal,
-    handleToggleProductModal,
-    quantity,
-    handleIncrementQuantity,
-    handleDecrementQuantity,
-    isLineUpdating,
-    handleAddItemToCart,
-    handleRemoveFromWishlist,
-  };
-
-  return (
-    <ProductCardContext.Provider value={{ product }}>
-      <ProductCardInternalContext.Provider value={internalContextValue}>
-        <StyledBazaarCard hoverEffect={product.hoverEffect}>
-          {children}
-        </StyledBazaarCard>
-
-        {openAddToWishlistDialog && (
-          <AddToWishlistDialog
-            open={openAddToWishlistDialog}
-            handleClose={() => setOpenAddToWishlistDialog(false)}
-            productId={Number(product.id)}
-          />
-        )}
-        {openProductModal && (
-          <ProductViewDialog
-            openDialog={openProductModal}
-            handleCloseDialog={handleToggleProductModal}
-            productId={Number(product.id)}
-          />
-        )}
-      </ProductCardInternalContext.Provider>
-    </ProductCardContext.Provider>
-  );
+	const t = useTranslations("Account.Wishlists");
+	const { setNotification } = useNotification();
+
+	const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+	const { mutateAsync: updateWishlist } = useUpdateWishlist();
+	const { mutateAsync: addToCart } = useAddToCart();
+
+	const foundWishlistProduct = wishlist?.ProductListLines?.find(
+		(item: ExtendedProductListLine) => item.ProductId === product.id,
+	);
+
+	const [openProductModal, setOpenProductModal] = useState(false);
+	const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+	const [quantity, setQuantity] = useState(foundWishlistProduct?.Quantity ?? 0);
+	const [isLineUpdatingLocal, setIsLineUpdatingLocal] = useState(false);
+
+	// detect if WishlistControls are being rendered
+	const containsWishlistControls = useMemo(
+		() => findChild(children, WishlistControls),
+		[children],
+	);
+
+	const handleRemoveFromWishlist = async () => {
+		try {
+			const extendedWishlistLine = wishlist?.ProductListLines?.find(
+				(item: ExtendedProductListLine) => item.ProductId === product.id,
+			);
+			if (extendedWishlistLine && wishlist) {
+				const { ...wishlistLine } = extendedWishlistLine;
+				delete wishlistLine.Product;
+
+				const wishlistLinesInput: WishlistLinesInput = {
+					Id: wishlist.Id,
+					ProductListLines: [wishlistLine],
+				};
+				await removeFromWishlist(wishlistLinesInput);
+				setNotification({
+					message: t("wishlistLineRemoveSuccess"),
+					severity: "success",
+				});
+			}
+		} catch {
+			setNotification({
+				message: t("wishlistLineRemoveFailed"),
+				severity: "error",
+			});
+		}
+	};
+
+	const handleToggleFavorite = () => {
+		setOpenAddToWishlistDialog(true);
+	};
+
+	const handleToggleProductModal = () => {
+		setOpenProductModal((prev) => !prev);
+	};
+
+	const handleAddItemToCart = async () => {
+		if (!cart) return;
+		try {
+			await addToCart({
+				cartId: cart.Id,
+				version: cart.Version,
+				cartLine: [{ ProductId: Number(product.id), Quantity: quantity }],
+			});
+			setNotification({
+				message: "Successfully added item to cart",
+				severity: "success",
+			});
+		} catch {
+			setNotification({
+				message: "Failed to add item to cart",
+				severity: "error",
+			});
+		}
+	};
+
+	const isWishlistFetching =
+		useIsFetching({ queryKey: [WISHLIST_DETAILS_QUERY_KEY] }) > 0;
+	const isLineUpdating = isLineUpdatingLocal || isWishlistFetching;
+
+	const handleIncrementQuantity = async () => {
+		if (isLineUpdating) return;
+		setIsLineUpdatingLocal(true);
+
+		try {
+			if (containsWishlistControls && wishlist) {
+				const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
+					const updated = { ...line, Product: undefined };
+					if (line.ProductId === Number(product.id)) {
+						updated.Quantity = quantity + 1;
+					}
+					return updated;
+				});
+				if (!updatedLines) return;
+				await updateWishlist({
+					Id: wishlist?.Id,
+					ProductListLines: updatedLines,
+				});
+			}
+
+			setQuantity((q) => q + 1);
+		} catch (err) {
+			console.error("Increment failed", err);
+		} finally {
+			setIsLineUpdatingLocal(false);
+		}
+	};
+
+	const handleDecrementQuantity = async () => {
+		if (isLineUpdating || quantity <= 0) return;
+		setIsLineUpdatingLocal(true);
+
+		try {
+			if (containsWishlistControls && wishlist) {
+				const updatedLines = (wishlist?.ProductListLines ?? []).map((line) => {
+					const updated = { ...line, Product: undefined };
+					if (line.ProductId === Number(product.id)) {
+						updated.Quantity = quantity - 1;
+					}
+					return updated;
+				});
+				if (!updatedLines) return;
+				await updateWishlist({
+					Id: wishlist?.Id,
+					ProductListLines: updatedLines,
+				});
+			}
+
+			setQuantity((q) => q - 1);
+		} catch (err) {
+			console.error("Decrement failed", err);
+		} finally {
+			setIsLineUpdatingLocal(false);
+		}
+	};
+
+	const internalContextValue = {
+		handleToggleFavorite,
+		openProductModal,
+		handleToggleProductModal,
+		quantity,
+		handleIncrementQuantity,
+		handleDecrementQuantity,
+		isLineUpdating,
+		handleAddItemToCart,
+		handleRemoveFromWishlist,
+	};
+
+	return (
+		<ProductCardContext.Provider value={{ product }}>
+			<ProductCardInternalContext.Provider value={internalContextValue}>
+				<StyledBazaarCard hoverEffect={product.hoverEffect}>
+					{children}
+				</StyledBazaarCard>
+
+				{openAddToWishlistDialog && (
+					<AddToWishlistDialog
+						open={openAddToWishlistDialog}
+						handleClose={() => setOpenAddToWishlistDialog(false)}
+						productId={Number(product.id)}
+					/>
+				)}
+				{openProductModal && (
+					<ProductViewDialog
+						openDialog={openProductModal}
+						handleCloseDialog={handleToggleProductModal}
+						productId={Number(product.id)}
+					/>
+				)}
+			</ProductCardInternalContext.Provider>
+		</ProductCardContext.Provider>
+	);
 };
 
 ProductCard.Image = () => {
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
-
-  const { title, id, imgUrl, discount = 0 } = ctx.product;
-
-  return (
-    <ImageWrapper>
-      {discount > 0 && <DiscountChip discount={discount} />}
-      <Link href={buildDetailUrl(title, Number(id))}>
-        <LazyImage priority src={imgUrl} width={500} height={500} alt={title} />
-      </Link>
-    </ImageWrapper>
-  );
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
+
+	const { title, id, imgUrl, discount = 0 } = ctx.product;
+
+	return (
+		<ImageWrapper>
+			{discount > 0 && <DiscountChip discount={discount} />}
+			<Link href={buildDetailUrl(title, Number(id))}>
+				<LazyImage priority src={imgUrl} width={500} height={500} alt={title} />
+			</Link>
+		</ImageWrapper>
+	);
 };
 
 ProductCard.Body = ({ children }: { children: React.ReactNode }) => {
-  return <ContentWrapper>{children}</ContentWrapper>;
+	return <ContentWrapper>{children}</ContentWrapper>;
 };
 
 ProductCard.Info = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Box flex="1 1 0" minWidth="0px" mr={1}>
-      {children}
-    </Box>
-  );
+	return (
+		<Box flex="1 1 0" minWidth="0px" mr={1}>
+			{children}
+		</Box>
+	);
 };
 
 ProductCard.Actions = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
+	return <>{children}</>;
 };
 
 ProductCard.Title = () => {
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
 
-  const { title, slug } = ctx.product;
-  return <ProductTitle title={title} slug={slug} />;
+	const { title, slug } = ctx.product;
+	return <ProductTitle title={title} slug={slug} />;
 };
 
 ProductCard.Rating = () => {
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
 
-  const { rating } = ctx.product;
+	const { rating } = ctx.product;
 
-  return <Rating size="small" value={rating} color="warn" readOnly />;
+	return <Rating size="small" value={rating} color="warn" readOnly />;
 };
 
 ProductCard.Size = () => {
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
 
-  const { size } = ctx.product;
+	const { size } = ctx.product;
 
-  return (
-    <Span color="grey.600" mb={1} display="block">
-      {size}
-    </Span>
-  );
+	return (
+		<Span color="grey.600" mb={1} display="block">
+			{size}
+		</Span>
+	);
 };
 
 ProductCard.Price = () => {
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
 
-  const { discount, price } = ctx.product;
-  if (!price || !discount) return null;
-  return <ProductPrice discount={discount} price={price} />;
+	const { discount, price } = ctx.product;
+	if (!price || !discount) return null;
+	return <ProductPrice discount={discount} price={price} />;
 };
 
 const QuantityButtons = () => {
-  const internal = useContext(ProductCardInternalContext);
-  if (!internal) return null;
-
-  const {
-    quantity,
-    isLineUpdating,
-    handleIncrementQuantity,
-    handleDecrementQuantity,
-  } = internal;
-
-  return (
-    <QuantityBtns
-      quantity={quantity}
-      handleIncrement={handleIncrementQuantity}
-      handleDecrement={handleDecrementQuantity}
-      isLineUpdating={isLineUpdating}
-    />
-  );
+	const internal = useContext(ProductCardInternalContext);
+	if (!internal) return null;
+
+	const {
+		quantity,
+		isLineUpdating,
+		handleIncrementQuantity,
+		handleDecrementQuantity,
+	} = internal;
+
+	return (
+		<QuantityBtns
+			quantity={quantity}
+			handleIncrement={handleIncrementQuantity}
+			handleDecrement={handleDecrementQuantity}
+			isLineUpdating={isLineUpdating}
+		/>
+	);
 };
 
 ProductCard.QuantityButtons = QuantityButtons;
 
 ProductCard.HoverActions = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
-  );
+	return (
+		<HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
+	);
 };
 
 ProductCard.QuickViewButton = () => {
-  const internal = useContext(ProductCardInternalContext);
-  if (!internal) return null;
+	const internal = useContext(ProductCardInternalContext);
+	if (!internal) return null;
 
-  const { handleToggleProductModal } = internal;
+	const { handleToggleProductModal } = internal;
 
-  return (
-    <IconButton onClick={handleToggleProductModal}>
-      <RemoveRedEye color="disabled" fontSize="small" />
-    </IconButton>
-  );
+	return (
+		<IconButton onClick={handleToggleProductModal}>
+			<RemoveRedEye color="disabled" fontSize="small" />
+		</IconButton>
+	);
 };
 
 ProductCard.FavoriteButton = () => {
-  const internal = useContext(ProductCardInternalContext);
-  if (!internal) return null;
+	const internal = useContext(ProductCardInternalContext);
+	if (!internal) return null;
 
-  const { handleToggleFavorite } = internal;
+	const { handleToggleFavorite } = internal;
 
-  const ctx = useContext(ProductCardContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardContext);
+	if (!ctx) return null;
 
-  const { id } = ctx.product;
+	const { id } = ctx.product;
 
-  const isFavorite = useFavorite(Number(id));
+	const isFavorite = useFavorite(Number(id));
 
-  return (
-    <FavoriteButton isFavorite={isFavorite} onToggle={handleToggleFavorite} />
-  );
+	return (
+		<FavoriteButton isFavorite={isFavorite} onToggle={handleToggleFavorite} />
+	);
 };
 
 // Used only in wishlist detail page with addtocart and remove from wishlist actions
 const WishlistControls = () => {
-  const internal = useContext(ProductCardInternalContext);
-  if (!internal) return null;
-  return (
-    <>
-      <FlexBox
-        width="25px"
-        alignItems="center"
-        flexDirection="row-reverse"
-        justifyContent="space-between"
-      >
-        <IconButton
-          sx={{ padding: "3px" }}
-          onClick={internal.handleAddItemToCart}
-        >
-          <ShoppingCart fontSize="small" color="inherit" />
-        </IconButton>
-      </FlexBox>
-      <FlexBox
-        width="25px"
-        alignItems="center"
-        flexDirection="row-reverse"
-        justifyContent="space-between"
-      >
-        <IconButton
-          sx={{ padding: "3px" }}
-          onClick={internal.handleRemoveFromWishlist}
-        >
-          <Delete fontSize="small" color="inherit" />
-        </IconButton>
-      </FlexBox>
-    </>
-  );
+	const internal = useContext(ProductCardInternalContext);
+	if (!internal) return null;
+	return (
+		<>
+			<FlexBox
+				width="25px"
+				alignItems="center"
+				flexDirection="row-reverse"
+				justifyContent="space-between"
+			>
+				<IconButton
+					sx={{ padding: "3px" }}
+					onClick={internal.handleAddItemToCart}
+				>
+					<ShoppingCart fontSize="small" color="inherit" />
+				</IconButton>
+			</FlexBox>
+			<FlexBox
+				width="25px"
+				alignItems="center"
+				flexDirection="row-reverse"
+				justifyContent="space-between"
+			>
+				<IconButton
+					sx={{ padding: "3px" }}
+					onClick={internal.handleRemoveFromWishlist}
+				>
+					<Delete fontSize="small" color="inherit" />
+				</IconButton>
+			</FlexBox>
+		</>
+	);
 };
 
 ProductCard.WishlistControls = WishlistControls;