@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -0,0 +1,410 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useMemo, useState } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+import IconButton from "@mui/material/IconButton";
+import { Delete, ShoppingCart } from "@mui/icons-material";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import QuantityBtns from "./components/quantity-buttons";
+import DiscountChip from "../discount-chip";
+import HoverActions from "./components/hover-actions";
+// STYLED COMPONENTS
+import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles/index";
+
+import buildDetailUrl from "@/lib/build-detail-url";
+import { useTranslations } from "next-intl";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+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 {
+  ExtendedWishlist,
+  ExtendedProductListLine,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+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";
+import React from "react";
+
+function findChild(
+  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;
+}
+type InternalCtx = {
+  favorite: boolean;
+  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;
+};
+
+const ProductCardContext = createContext<{ product: Product } | null>(null);
+
+type ProductCardProps = {
+  product: Product;
+  children: ReactNode;
+  wishlist?: ExtendedWishlist;
+  cart?: Cart;
+};
+
+const ProductCardInternalContext = createContext<InternalCtx | null>(null);
+
+const ProductCard = ({
+  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 [favorite, setFavorite] = useState(!!foundWishlistProduct);
+  const [openProductModal, setOpenProductModal] = useState(false);
+  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+  const [quantity, setQuantity] = useState(foundWishlistProduct?.Quantity ?? 0);
+  const [isLineUpdating, setIsLineUpdating] = 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 handleAddRemoveSuccess = () => {
+    setFavorite(!favorite);
+  };
+
+  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 handleIncrementQuantity = async () => {
+    setIsLineUpdating(true);
+    if (containsWishlistControls && wishlist) {
+      try {
+        const updatedLines = wishlist.ProductListLines.map((line) => {
+          const updated = { ...line, Product: undefined };
+          if (line.ProductId === Number(product.id))
+            updated.Quantity = quantity + 1;
+          return updated;
+        });
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedLines,
+        });
+        setQuantity((q) => q + 1);
+      } catch {}
+    } else {
+      setQuantity((q) => q + 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const handleDecrementQuantity = async () => {
+    if (quantity <= 0) return;
+    setIsLineUpdating(true);
+    if (containsWishlistControls && wishlist) {
+      try {
+        const updatedLines = wishlist.ProductListLines.map((line) => {
+          const updated = { ...line, Product: undefined };
+          if (line.ProductId === Number(product.id))
+            updated.Quantity = quantity - 1;
+          return updated;
+        });
+        await updateWishlist({
+          Id: wishlist.Id,
+          ProductListLines: updatedLines,
+        });
+        setQuantity((q) => q - 1);
+      } catch {}
+    } else {
+      setQuantity((q) => q - 1);
+    }
+    setIsLineUpdating(false);
+  };
+
+  const internalContextValue = {
+    favorite,
+    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)}
+            onSuccess={handleAddRemoveSuccess}
+          />
+        )}
+        {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>
+  );
+};
+
+ProductCard.Body = ({ children }: { children: React.ReactNode }) => {
+  return <ContentWrapper>{children}</ContentWrapper>;
+};
+
+ProductCard.Info = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box flex="1 1 0" minWidth="0px" mr={1}>
+      {children}
+    </Box>
+  );
+};
+
+ProductCard.Actions = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+ProductCard.Title = () => {
+  const ctx = useContext(ProductCardContext);
+  if (!ctx) return null;
+
+  const { title, slug } = ctx.product;
+  return <ProductTitle title={title} slug={slug} />;
+};
+
+ProductCard.Rating = () => {
+  const ctx = useContext(ProductCardContext);
+  if (!ctx) return null;
+
+  const { rating } = ctx.product;
+
+  return <Rating size="small" value={rating} color="warn" readOnly />;
+};
+
+ProductCard.Size = () => {
+  const ctx = useContext(ProductCardContext);
+  if (!ctx) return null;
+
+  const { size } = ctx.product;
+
+  return (
+    <Span color="grey.600" mb={1} display="block">
+      {size}
+    </Span>
+  );
+};
+
+ProductCard.Price = () => {
+  const ctx = useContext(ProductCardContext);
+  if (!ctx) return null;
+
+  const { discount, price } = ctx.product;
+
+  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}
+    />
+  );
+};
+
+ProductCard.QuantityButtons = QuantityButtons;
+
+ProductCard.HoverActions = () => {
+  const internal = useContext(ProductCardInternalContext);
+  if (!internal) return null;
+
+  const { favorite, handleToggleProductModal, handleToggleFavorite } = internal;
+
+  return (
+    <HoverActions
+      isFavorite={favorite}
+      toggleView={handleToggleProductModal}
+      toggleFavorite={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>
+    </>
+  );
+};
+
+ProductCard.WishlistControls = WishlistControls;
+
+export default ProductCard;

package/src/components-v2/product-cards/{product-card-1 → product-card}/styles/index.ts

@@ -1,4 +1,5 @@
 import styled from "@mui/material/styles/styled";
+import { StyledComponent } from "@mui/styled-engine";
 // GLOBAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 
@@ -44,3 +45,8 @@ export const ContentWrapper = styled("div")({
     textOverflow: "ellipsis",
   },
 });
+
+const StyledBazaarCardType: StyledComponent<typeof BazaarCard, {}, "div"> =
+  StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
+
+export default StyledBazaarCardType;

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-list/index.ts

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