@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/components/_components/product-cards/product-card-wishlist/components/hover-actions.tsx

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// STYLED COMPONENTS
+import { HoverIconWrapper } from "../styles";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleFavorite,
+  toggleView,
+}: Props) {
+  return (
+    <HoverIconWrapper className="hover-box">
+      <IconButton onClick={toggleView}>
+        <RemoveRedEye color="disabled" fontSize="small" />
+      </IconButton>
+
+      <IconButton onClick={toggleFavorite}>
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="disabled" />
+        )}
+      </IconButton>
+    </HoverIconWrapper>
+  );
+}

package/src/components/_components/product-cards/product-card-wishlist/index.ts

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

package/src/components/_components/product-cards/product-card-wishlist/product-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import ProductViewDialog from "@/_components/products-view/product-view-dialog";
+import { Span } from "@/_components/Typography";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import HoverActions from "./components/hover-actions";
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import DiscountChip from "../discount-chip";
+// STYLED COMPONENTS
+import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles";
+import { IconButton } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import LazyImage from "@/_components/LazyImage";
+
+// ========================================================
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+  lineId: string | undefined;
+  handleRemoveProductFromWishlist: (linedId: string | undefined) => void;
+};
+// ========================================================
+
+export default function ProductCardWishlist({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+  lineId,
+  handleRemoveProductFromWishlist,
+}: Props) {
+  const { isFavorite, openModal, toggleDialog, toggleFavorite } =
+    useProduct(slug);
+
+  return (
+    <StyledBazaarCard hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={discount} />
+
+        {/* HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleView={toggleDialog}
+          toggleFavorite={toggleFavorite}
+        />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            priority
+            src={imgUrl}
+            width={500}
+            height={500}
+            alt={title}
+          />
+        </Link>
+      </ImageWrapper>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+      />
+
+      <ContentWrapper>
+        <Box flex="1 1 0" minWidth="0px" mr={1}>
+          {/* PRODUCT NAME / TITLE */}
+          <ProductTitle title={title} slug={slug} />
+
+          {/* PRODUCT RATINGS IF AVAILABLE */}
+          {!hideRating ? (
+            <Rating size="small" value={rating} color="warn" readOnly />
+          ) : null}
+
+          {/* PRODUCT SIZE IF AVAILABLE */}
+          {showProductSize ? (
+            <Span color="grey.600" mb={1} display="block">
+              Liter
+            </Span>
+          ) : null}
+
+          {/* PRODUCT PRICE WITH DISCOUNT */}
+          <ProductPrice discount={discount} price={price} />
+        </Box>
+
+        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
+        <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+          <IconButton onClick={() => handleRemoveProductFromWishlist(lineId)}>
+            <Delete fontSize="small" color="inherit" />
+          </IconButton>
+        </Box>
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,51 @@
+import BazaarCard, { Props } from "@/_components/BazaarCard";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import React, { ComponentType } from "react";
+
+export const StyledBazaarCard: ComponentType<Props> = 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: ComponentType<React.ComponentProps<"div">> = styled(
+  "div",
+)(({ theme }) => ({
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+}));
+
+export const HoverIconWrapper: ComponentType<React.ComponentProps<"div">> =
+  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: ComponentType<React.ComponentProps<"div">> =
+  styled("div")({
+    gap: 8,
+    display: "flex",
+    padding: "1rem",
+    "& .title, & .categories": {
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+    },
+  });

package/src/components/_components/product-dimensions/product-dimensions.tsx

@@ -0,0 +1,114 @@
+"use client";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import { H6 } from "@/components/_components/Typography";
+
+import {
+  ProductDimensionType,
+  ProductDimensionValueInventoryAvailability,
+} from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+// ================================================================
+type Props = {
+  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
+  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
+  handleChangeVariant: (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => void;
+  showDimensionError?: boolean;
+};
+// ================================================================
+
+export default function ProductDimensions({
+  dimensionGroups,
+  selectDimensions,
+  handleChangeVariant,
+  showDimensionError,
+}: Props) {
+  const t = useTranslations("productDetail.Dimensions");
+  const hasSelectedDimension = (
+    dimension: ProductDimensionValueInventoryAvailability[],
+  ) => {
+    return dimension.some((dim) =>
+      Object.values(selectDimensions).some(
+        (selectedDimension) =>
+          selectedDimension.DimensionValue?.RecordId ===
+          dim.DimensionValue?.RecordId,
+      ),
+    );
+  };
+
+  return (
+    <>
+      {Array.isArray(dimensionGroups) &&
+        dimensionGroups.map((dimensions, i) => (
+          <Box key={i} mb={2}>
+            <H6 mb={1}>
+              {ProductDimensionType[dimensions[0]?.DimensionTypeValue || 0]}
+            </H6>
+            {dimensions.map((dimension) => {
+              // CHECK STOCK
+              const disabled =
+                dimension.TotalAvailableInventoryLevelCode !== "AVAIL";
+              const selected =
+                selectDimensions[dimension.DimensionTypeValue || 0]
+                  ?.DimensionValue === dimension.DimensionValue;
+
+              // SWATCH DIMENSIONS
+              if (
+                ProductDimensionType[dimension.DimensionTypeValue || 0] ===
+                "Color"
+              ) {
+                return (
+                  <Chip
+                    key={dimension.DimensionValue?.RecordId}
+                    onClick={() => {
+                      handleChangeVariant(dimension);
+                    }}
+                    disabled={disabled}
+                    sx={{
+                      borderRadius: "100%",
+                      mr: 1,
+                      cursor: "pointer",
+                      backgroundColor: dimension.DimensionValue?.Value,
+                      width: 32,
+                      height: 32,
+                      border: selected ? "2px solid" : "2px solid transparent",
+                      "&:hover": {
+                        backgroundColor: dimension.DimensionValue?.Value,
+                      },
+                    }}
+                  />
+                );
+              }
+
+              // TEXT DIMENSIONS
+              return (
+                <Chip
+                  key={dimension.DimensionValue?.RecordId}
+                  label={dimension.DimensionValue?.Value}
+                  onClick={() => {
+                    handleChangeVariant(dimension);
+                  }}
+                  disabled={disabled}
+                  sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
+                  color={selected ? "primary" : "default"}
+                />
+              );
+            })}
+            {showDimensionError && !hasSelectedDimension(dimensions) && (
+              <H6 color="error.main" mb={1}>
+                {t("selectError", {
+                  dimension:
+                    ProductDimensionType[
+                      dimensions[0]?.DimensionTypeValue || 0
+                    ],
+                })}
+              </H6>
+            )}
+          </Box>
+        ))}
+    </>
+  );
+}

package/src/components/_components/product-quantity-buttons/product-quantity-buttons.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FlexBox } from "@/components/_components/flex-box";
+import Button from "@mui/material/Button";
+import { H3 } from "@/components/_components/Typography";
+import { MdAdd as Add } from "react-icons/md";
+import { MdRemove as Remove } from "react-icons/md";
+import CircularProgress from "@mui/material/CircularProgress";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  loading: boolean;
+  productCartLine: CartLine | undefined;
+  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
+  handleAddToCart: () => void;
+  isOOS: boolean;
+}
+
+export default function QuantityButtons({
+  loading,
+  handleAddToCart,
+  handleCartAmountChange,
+  productCartLine,
+  isOOS,
+}: Props) {
+  const t = useTranslations("productDetail");
+
+  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
+    return (
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={handleAddToCart}
+        disabled={isOOS}
+      >
+        {t("btnAddToCart")}
+      </Button>
+    );
+  }
+
+  return (
+    <FlexBox alignItems="center">
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) - 1,
+            productCartLine,
+          )
+        }
+      >
+        <Remove fontSize="small" />
+      </Button>
+
+      <H3
+        fontWeight="600"
+        mx={2.5}
+        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
+      >
+        {loading ? (
+          <CircularProgress size={"10px"} />
+        ) : (
+          productCartLine.Quantity.toString().padStart(2, "0")
+        )}
+      </H3>
+
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) + 1,
+            productCartLine,
+          )
+        }
+      >
+        <Add fontSize="small" />
+      </Button>
+    </FlexBox>
+  );
+}

package/src/components/_components/products-view/product-view-dialog.tsx

@@ -9,20 +9,24 @@ import DialogContent from "@mui/material/DialogContent";
 import Add from "@mui/icons-material/Add";
 import Close from "@mui/icons-material/Close";
 import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { Carousel } from "@/components/_components/carousel/index";
-import BazaarImage from "@/components/_components/BazaarImage";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-import { H1, H2, H3, H6, Paragraph } from "@/components/_components/Typography";
+// GLOBAL CUSTOM COMPONENT
 // LOCAL CUSTOM HOOKS
-//import useCart from "hooks/useCart";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import { useTranslations } from "next-intl";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
 // CUSTOM UTILS LIBRARY FUNCTION
+import { Carousel } from "../carousel";
+import { useNotification } from "@/components/Notifications/use-notification";
+import BazaarImage from "../BazaarImage";
+import { FlexBox } from "../flex-box";
+import { H2, Paragraph, H1, H6, H3 } from "../Typography";
 import { currency } from "@/lib/lib";
 
 // =====================================================
 interface Props {
   product: ProductInfo;
   openDialog: boolean;
+  cartId?: string;
   handleCloseDialog: () => void;
 }
 // =====================================================
@@ -31,7 +35,7 @@ type CartItem = {
   qty: number;
 };
 // =====================================================
-type ProductInfo = {
+export type ProductInfo = {
   id: string | number;
   title: string;
   imgGroup: string[];
@@ -50,7 +54,12 @@ type CartDispatch = {
 // =====================================================
 
 export default function ProductViewDialog(props: Props) {
-  const { product, openDialog, handleCloseDialog } = props;
+  const { product, openDialog, cartId, handleCloseDialog } = props;
+  const { mutateAsync: addToCart } = useAddToCart();
+  const { data: cart } = getCart.useData();
+
+  const t = useTranslations("ProductViewDialog");
+  const { setNotification } = useNotification();
 
   //const { state, dispatch } = useCart();
   const state: { cart: CartItem[] } = {
@@ -73,6 +82,31 @@ export default function ProductViewDialog(props: Props) {
     });
   };
 
+  const handleAddToCart = async () => {
+    if (!cart) return;
+    try {
+      await addToCart({
+        cartId: cartId,
+        version: cart.Version,
+        cartLine: [
+          {
+            ProductId: Number(product.id),
+            Quantity: 1,
+          },
+        ],
+      });
+      setNotification({
+        message: t("addToCartSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("addToCartError"),
+        severity: "error",
+      });
+    }
+  };
+
   return (
     <Dialog
       open={openDialog}
@@ -133,16 +167,19 @@ export default function ProductViewDialog(props: Props) {
               {!cartItem?.qty ? (
                 <Button
                   size="large"
+                  color={"primary"}
                   variant="contained"
-                  onClick={handleCartAmountChange(1)}
+                  // onClick={handleCartAmountChange(1)}
+                  onClick={handleAddToCart}
                   sx={{ height: 45, borderRadius: 2 }}
                 >
-                  Add to Cart
+                  {t("addToCartBtn")}
                 </Button>
               ) : (
                 <FlexBox alignItems="center">
                   <Button
                     size="small"
+                    color={"primary"}
                     variant="outlined"
                     sx={{ p: ".6rem", height: 45 }}
                     onClick={handleCartAmountChange(cartItem?.qty - 1)}
@@ -156,6 +193,7 @@ export default function ProductViewDialog(props: Props) {
 
                   <Button
                     size="small"
+                    color={"primary"}
                     variant="outlined"
                     sx={{ p: ".6rem", height: 45 }}
                     onClick={handleCartAmountChange(cartItem?.qty + 1)}

package/src/components/_components/products-view/products-grid-view.tsx

@@ -5,30 +5,44 @@ import { FlexBetween } from "@/components/_components/flex-box/index";
 import ProductCard16 from "@/components/_components/product-cards/product-card-16/index";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
 
 // ========================================================
-type Props = { products: Product[]; pagination?: ReactNode };
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
 // ========================================================
 
-export default function ProductsGridView({ products, pagination }: Props) {
+export default function ProductsGridView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
   return (
     <Fragment>
       <Grid container spacing={3}>
-        {products.map((item: Product) => (
-          <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-            <ProductCard16
-              id={item.RecordId}
-              key={item.RecordId}
-              slug={item.ItemId ?? ""}
-              title={item.Name ?? ""}
-              price={item.Price ?? 0}
-              discount={0} // Need to get discount info for product.
-              rating={item.TotalRatings ?? 0}
-              imgUrl={item.PrimaryImageUrl ?? ""}
-              showAddToCart={false}
-            />
-          </Grid>
-        ))}
+        {products.map((item: Product) => {
+          const matchingPrice = productPrices?.find(
+            (price) => price.ProductId === item.RecordId,
+          );
+          return (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
+              <ProductCard16
+                id={item.RecordId}
+                key={item.RecordId}
+                slug={item.ItemId ?? ""}
+                title={item.Name ?? ""}
+                price={matchingPrice?.CustomerContextualPrice ?? null}
+                discount={0} // Need to get discount info for product.
+                rating={item.TotalRatings ?? 0}
+                imgUrl={item.PrimaryImageUrl ?? ""}
+                showAddToCart={false}
+              />
+            </Grid>
+          );
+        })}
       </Grid>
 
       <FlexBetween flexWrap="wrap" mt={6}>

package/src/components/_components/products-view/products-list-view.tsx

@@ -4,28 +4,42 @@ import FlexBetween from "@/components/_components/flex-box/flex-between";
 import { ProductCard9 } from "@/components/_components/product-cards/product-card-9/index";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
 
 // ==========================================================
-type Props = { products: Product[]; pagination?: ReactNode };
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
 // ==========================================================
 
-export default function ProductsListView({ products, pagination }: Props) {
+export default function ProductsListView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
   return (
     <div>
-      {products.map((item) => (
-        <ProductCard9
-          id={item.RecordId}
-          key={item.RecordId}
-          slug={item.ItemId ?? ""}
-          title={item.Name ?? ""}
-          price={item.Price}
-          off={0} // Need to get discount info for product.
-          rating={item.TotalRatings ?? 0}
-          imgUrl={item.PrimaryImageUrl ?? ""}
-          showAddToCart={false}
-          showFavorite={false}
-        />
-      ))}
+      {products.map((item) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        return (
+          <ProductCard9
+            id={item.RecordId}
+            key={item.RecordId}
+            slug={item.ItemId ?? ""}
+            title={item.Name ?? ""}
+            price={matchingPrice?.CustomerContextualPrice ?? null}
+            off={0} // Need to get discount info for product.
+            rating={item.TotalRatings ?? 0}
+            imgUrl={item.PrimaryImageUrl ?? ""}
+            showAddToCart={false}
+            showFavorite={false}
+          />
+        );
+      })}
 
       <FlexBetween flexWrap="wrap" mt={4}>
         {pagination}