@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,65 @@
+import { Fragment } from "react";
+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 { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { CircularProgress } from "@mui/material";
+
+// ==============================================================
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+  isLineUpdating: boolean;
+}
+// ==============================================================
+
+export default function QuantityButtons(props: Props) {
+  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
+    props || {};
+
+  return (
+    <FlexBox
+      alignItems="center"
+      className="add-cart"
+      flexDirection="row-reverse"
+      justifyContent={quantity ? "space-between" : "flex-start"}
+      gap={1}
+    >
+      <Button
+        color="primary"
+        variant="outlined"
+        onClick={handleIncrement}
+        sx={{ padding: "3px" }}
+        disabled={isLineUpdating}
+      >
+        <Add fontSize="small" />
+      </Button>
+
+      {quantity > 0 && (
+        <Fragment>
+          {isLineUpdating ? (
+            <CircularProgress size={"10px"} color={"primary"} />
+          ) : (
+            <Paragraph color="text.primary" fontWeight="600">
+              {quantity}
+            </Paragraph>
+          )}
+
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={handleDecrement}
+            sx={{ padding: "3px" }}
+            disabled={isLineUpdating}
+          >
+            <Remove fontSize="small" />
+          </Button>
+        </Fragment>
+      )}
+    </FlexBox>
+  );
+}

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

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

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

@@ -0,0 +1,52 @@
+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";
+
+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 } },
+});
+
+export const ImageWrapper = styled("div")(({ theme }) => ({
+  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",
+});
+
+export const ContentWrapper = styled("div")({
+  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">;
+
+export default StyledBazaarCardType;

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

@@ -0,0 +1,54 @@
+import { Fragment } from "react";
+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 { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+}
+
+export default function QuantityButtons(props: Props) {
+  const { quantity, handleDecrement, handleIncrement } = props || {};
+
+  return (
+    <FlexBox
+      width="30px"
+      alignItems="center"
+      className="add-cart"
+      flexDirection="column-reverse"
+      justifyContent={quantity ? "space-between" : "flex-start"}
+    >
+      <Button
+        color="primary"
+        variant="outlined"
+        onClick={handleIncrement}
+        sx={{ padding: "3px" }}
+      >
+        <Add fontSize="small" />
+      </Button>
+
+      {quantity ? (
+        <Fragment>
+          <Paragraph color="text.primary" fontWeight="600">
+            {quantity}
+          </Paragraph>
+
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={handleDecrement}
+            sx={{ padding: "3px" }}
+          >
+            <Remove fontSize="small" />
+          </Button>
+        </Fragment>
+      ) : null}
+    </FlexBox>
+  );
+}

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

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