@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/pages-v2/product-details/product-filter-card.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { Fragment, useState } from "react";
+// MUI
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+import Divider from "@mui/material/Divider";
+import Collapse from "@mui/material/Collapse";
+import TextField from "@mui/material/TextField";
+import FormGroup from "@mui/material/FormGroup";
+// LOCAL CUSTOM COMPONENTS
+import CheckboxLabel from "./checkbox-label";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H5,
+  H6,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AccordionHeader from "@evenicanpm/storefront-core/src/components-v2/accordion/accordion-header";
+// TYPE
+import {
+  ProductFilterKeys,
+  ProductFilterValues,
+  ProductFilters,
+} from "./types";
+import { Slider } from "@mui/material";
+
+// FILTER OPTIONS
+const categoryList = [
+  {
+    title: "Bath Preparations",
+    subCategories: ["Bubble Bath", "Bath Capsules", "Others"],
+  },
+  { title: "Eye Makeup Preparations" },
+  { title: "Fragrance" },
+  { title: "Hair Preparations" },
+];
+
+const BRANDS = [
+  { label: "Mac", value: "mac" },
+  { label: "Karts", value: "karts" },
+  { label: "Baals", value: "baals" },
+  { label: "Bukks", value: "bukks" },
+  { label: "Luasis", value: "luasis" },
+];
+
+const OTHERS = [
+  { label: "On Sale", value: "sale" },
+  { label: "In Stock", value: "stock" },
+  { label: "Featured", value: "featured" },
+];
+
+const colorList = [
+  "#1C1C1C",
+  "#FF7A7A",
+  "#FFC672",
+  "#84FFB5",
+  "#70F6FF",
+  "#6B7AFF",
+];
+
+// ============================================================================
+interface Props {
+  filters: ProductFilters;
+  changeFilters: (key: ProductFilterKeys, values: ProductFilterValues) => void;
+}
+// ============================================================================
+
+export default function ProductFilterCard({ filters, changeFilters }: Props) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  const handleChangePrice = (values: number[]) => {
+    changeFilters("price", values);
+  };
+
+  const handleChangeColor = (value: string) => {
+    const values = filters.color.includes(value)
+      ? filters.color.filter((item) => item !== value)
+      : [...filters.color, value];
+
+    changeFilters("color", values);
+  };
+
+  const handleChangeBrand = (value: string) => {
+    const values = filters.brand.includes(value)
+      ? filters.brand.filter((item) => item !== value)
+      : [...filters.brand, value];
+
+    changeFilters("brand", values);
+  };
+
+  const handleChangeSales = (value: string) => {
+    const values = filters.sales.includes(value)
+      ? filters.sales.filter((item) => item !== value)
+      : [...filters.sales, value];
+
+    changeFilters("sales", values);
+  };
+
+  const handleChangeRating = (value: number) => {
+    changeFilters("rating", value);
+  };
+
+  return (
+    <div>
+      {/* CATEGORY VARIANT FILTER */}
+      <H6 mb={1.25}>Categories</H6>
+      {categoryList.map((item) =>
+        item.subCategories ? (
+          <Fragment key={item.title}>
+            <AccordionHeader
+              open={collapsed}
+              onClick={() => setCollapsed((state) => !state)}
+              sx={{ padding: ".5rem 0", cursor: "pointer", color: "grey.600" }}
+            >
+              <Span>{item.title}</Span>
+            </AccordionHeader>
+
+            <Collapse in={collapsed}>
+              {item.subCategories.map((name) => (
+                <Paragraph
+                  pl="22px"
+                  py={0.75}
+                  key={name}
+                  fontSize="14px"
+                  color="grey.600"
+                  sx={{ cursor: "pointer" }}
+                >
+                  {name}
+                </Paragraph>
+              ))}
+            </Collapse>
+          </Fragment>
+        ) : (
+          <Paragraph
+            key={item.title}
+            sx={{
+              py: 0.75,
+              fontSize: 14,
+              cursor: "pointer",
+              color: "grey.600",
+            }}
+          >
+            {item.title}
+          </Paragraph>
+        ),
+      )}
+
+      <Box component={Divider} my={3} />
+
+      {/* PRICE VARIANT FILTER */}
+      <H6 mb={2}>Price Range</H6>
+
+      <Slider
+        min={0}
+        max={300}
+        size="small"
+        value={filters.price}
+        valueLabelDisplay="auto"
+        valueLabelFormat={(v) => `$${v}`}
+        onChange={(_, v) => handleChangePrice(v as number[])}
+      />
+      <FlexBetween>
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          placeholder="0"
+          value={filters.price[0]}
+          onChange={(e) =>
+            handleChangePrice([+e.target.value, filters.price[1]])
+          }
+        />
+
+        <H5 color="grey.600" px={1}>
+          -
+        </H5>
+
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          placeholder="250"
+          value={filters.price[1]}
+          onChange={(e) =>
+            handleChangePrice([filters.price[0], +e.target.value])
+          }
+        />
+      </FlexBetween>
+
+      <Box component={Divider} my={3} />
+
+      {/* BRAND VARIANT FILTER */}
+      <H6 mb={2}>Brands</H6>
+      <FormGroup>
+        {BRANDS.map(({ label, value }) => (
+          <CheckboxLabel
+            key={value}
+            label={label}
+            checked={filters.brand.includes(value)}
+            onChange={() => handleChangeBrand(value)}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* SALES OPTIONS */}
+      <FormGroup>
+        {OTHERS.map(({ label, value }) => (
+          <CheckboxLabel
+            key={value}
+            label={label}
+            checked={filters.sales.includes(value)}
+            onChange={() => handleChangeSales(value)}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* RATINGS FILTER */}
+      <H6 mb={2}>Ratings</H6>
+      <FormGroup>
+        {[5, 4, 3, 2, 1].map((item) => (
+          <CheckboxLabel
+            key={item}
+            checked={filters.rating === item}
+            onChange={() => handleChangeRating(item)}
+            label={<Rating size="small" value={item} color="warn" readOnly />}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* COLORS VARIANT FILTER */}
+      <H6 mb={2}>Colors</H6>
+      <FlexBox mb={2} flexWrap="wrap" gap={1.5}>
+        {colorList.map((item) => (
+          <Box
+            key={item}
+            width={25}
+            height={25}
+            flexShrink={0}
+            bgcolor={item}
+            borderRadius="50%"
+            onClick={() => handleChangeColor(item)}
+            sx={{
+              outlineOffset: 1,
+              cursor: "pointer",
+              outline: filters.color.includes(item) ? 1 : 0,
+              outlineColor: item,
+            }}
+          />
+        ))}
+      </FlexBox>
+    </div>
+  );
+}

package/src/pages-v2/product-details/product-intro/compound/context.ts

@@ -0,0 +1,52 @@
+import { createContext } from "react";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import {
+  ProductWarehouseInventoryAvailability,
+  ProductWarehouseInventoryInformation,
+} from "@msdyn365-commerce/retail-proxy";
+
+export interface ProductIntroContext {
+  /** The current master product of the PDP */
+  masterProduct: ProductDetails;
+  /** The currently selected variant that is deduced from dimensions */
+  selectedVariant: ProductDetails;
+  /** Is the data for variant loading? */
+  variantPending: boolean;
+  /** State that tracks which dimensions are currently selected */
+  selectDimensions: SelectedDimensions;
+  /** Handler for when dimensions are selected **/
+  handleChangeVariant: () => void;
+  /** Calculated value are all dimensions selected? **/
+  allDimensionsSelected: boolean;
+}
+
+export interface ProductImagesContext {
+  /** Currently selected index from images array of product details */
+  selectedImageIndex?: number;
+  /** The default image to show on PDP */
+  primaryImageUrl: string;
+  /* Handler when thumbnails are clicked */
+  handleImageClick: (ind: number) => () => void;
+  /* The array of images to display, comes from */
+  images: string[];
+  /* Name */
+  name: string | undefined;
+}
+
+export interface ProductInfoContext {
+  /** Currently selected index from images array of product details */
+  isOOS: boolean;
+  /** **/
+  inventoryPending: boolean;
+  /** */
+  shippingInventoryData: ProductWarehouseInventoryInformation;
+  /** */
+  showDimensionError: boolean;
+  /** */
+  setShowDimensionError: () => void;
+}
+
+export const ProductImagesContext = createContext(null);
+export const ProductIntroContext = createContext(null);
+export const ProductInfoContext = createContext(null);

package/src/pages-v2/product-details/product-intro/compound/product-info.tsx

@@ -0,0 +1,231 @@
+import React, { useContext, useState } from "react";
+import Rating from "@mui/material/Rating";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import { CircularProgress, Typography } from "@mui/material";
+
+// GLOBAL CUSTOM COMPONENTS
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import {
+  H1,
+  H2,
+  H6,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
+import AddToWishlistButton from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/add-to-wishlist-button";
+// D365
+
+// API MANAGER
+import getProductPrices from "@/api-manager/services/product/queries/get-product-prices";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+
+// LOCAL HOOKS
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
+
+// LOCAL COMPONENTS
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+import FindInStoreButton from "../../bopis/find-in-store-button";
+import { ProductIntroContext, ProductInfoContext } from "./context";
+
+import {
+  getInventoryLabel,
+  checkProductOOS,
+  buildInventorySearchCriteria,
+} from "../utils";
+
+export interface Props {
+  children: React.ReactNode;
+}
+
+/**
+ * PRODUCT INFO
+ */
+const ProductInfo = ({ children }: Props) => {
+  const [showDimensionError, setShowDimensionError] = useState(false);
+  const { selectedVariant } = useContext(ProductIntroContext);
+
+  const shippingInventorySearchCriteria = selectedVariant
+    ? buildInventorySearchCriteria(selectedVariant?.RecordId)
+    : null;
+
+  // Query disabled if the input is null
+  const { data: shippingInventoryData, isLoading: inventoryPending } =
+    getProductAvailability.useData(shippingInventorySearchCriteria);
+
+  return (
+    <ProductInfoContext.Provider
+      value={{
+        inventoryPending,
+        shippingInventoryData,
+        showDimensionError,
+        setShowDimensionError,
+      }}
+    >
+      <Grid size={{ md: 6, xs: 12 }} alignItems="center">
+        {children}
+      </Grid>
+    </ProductInfoContext.Provider>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Name = () => {
+  const { masterProduct } = useContext(ProductIntroContext);
+  return <H1 mb={1}>{masterProduct.Name}</H1>;
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Sku = () => {
+  const { masterProduct, selectedVariant } = useContext(ProductIntroContext);
+  return (
+    <FlexBox alignItems="center" mb={1}>
+      <H6>SKU: {selectedVariant?.ItemId || masterProduct.ItemId}</H6>
+    </FlexBox>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Sku = () => {
+  return (
+    <FlexBox alignItems="center" gap={1} mb={2}>
+      <Box lineHeight="1">Rated:</Box>
+      <Rating color="warn" value={0} readOnly />
+      <H6 lineHeight="1">(0)</H6>
+    </FlexBox>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Dimensions = () => {
+  const { masterProduct, selectDimensions, handleChangeVariant } =
+    useContext(ProductIntroContext);
+  const { showDimensionError } = useContext(ProductInfoContext);
+  return (
+    <ProductDimensions
+      dimensionGroups={masterProduct.DimensionValues}
+      selectDimensions={selectDimensions}
+      handleChangeVariant={handleChangeVariant}
+      showDimensionError={showDimensionError}
+    />
+  );
+};
+
+ProductInfo.Price = () => {
+  const { masterProduct, selectedVariant } = useContext(ProductIntroContext);
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const { data: productPrices, isPending: pricesPending } =
+    getProductPrices.useData({
+      productIds: [selectedVariant?.RecordId || masterProduct?.RecordId],
+    });
+
+  return (
+    <Box pt={1}>
+      <H2 color="primary.main" mb={0.5} lineHeight="1">
+        {pricesPending || !productPrices ? (
+          <CircularProgress size={20} />
+        ) : (
+          formatCurrency(productPrices?.[0]?.CustomerContextualPrice)
+        )}
+      </H2>
+      <Box color="inherit">{}</Box>
+    </Box>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Inventory = () => {
+  const { variantPending, allDimensionsSelected } =
+    useContext(ProductIntroContext);
+  const { shippingInventoryData, inventoryPending } =
+    useContext(ProductInfoContext);
+
+  if (!allDimensionsSelected)
+    return (
+      <FlexBox alignItems="center" gap={1}>
+        {/* INVENTORY */}
+        <Box sx={{ my: 3 }}>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            fontWeight={600}
+          ></Typography>
+        </Box>
+      </FlexBox>
+    );
+  return (
+    <FlexBox alignItems="center" gap={1}>
+      {/* INVENTORY */}
+      <Box sx={{ my: 3 }}>
+        {inventoryPending || variantPending ? (
+          <CircularProgress size={20} />
+        ) : (
+          <Typography variant="body2" color="text.secondary" fontWeight={600}>
+            {getInventoryLabel(shippingInventoryData)}
+          </Typography>
+        )}
+      </Box>
+    </FlexBox>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductInfo.Buttons = () => {
+  const { masterProduct, selectedVariant, allDimensionsSelected } =
+    useContext(ProductIntroContext);
+  const { setShowDimensionError, shippingInventoryData } =
+    useContext(ProductInfoContext);
+  const { handleAddToCart } = useCart(selectedVariant?.RecordId);
+
+  /**
+   * A wrapper around the add to cart handler that
+   * checks if the dimensions are selected and shows errors if not
+   */
+  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    if (!allDimensionsSelected) {
+      setShowDimensionError(true);
+      return;
+    }
+    setShowDimensionError(false);
+    handleAddToCart(bopisInput);
+  };
+
+  const isOOS = allDimensionsSelected && checkProductOOS(shippingInventoryData);
+
+  return (
+    <FlexBox gap={2}>
+      <QuantityButtons
+        customAddToCart={onAddToCart}
+        isOOS={isOOS}
+        productId={selectedVariant?.RecordId}
+      />
+      <FindInStoreButton
+        setDimensionsError={setShowDimensionError}
+        productId={selectedVariant?.RecordId || masterProduct.RecordId}
+        handleAddToCart={() => handleAddToCart(selectedVariant?.RecordId)}
+        allDimensionsSelected={allDimensionsSelected}
+      />
+      <AddToWishlistButton
+        path="Account.Wishlists.btnAddToWishlist"
+        product={masterProduct}
+      />
+    </FlexBox>
+  );
+};
+
+export default ProductInfo;

package/src/pages-v2/product-details/product-intro/compound/product-intro-images.tsx

@@ -0,0 +1,124 @@
+"use client";
+import Grid from "@mui/material/Grid2";
+import React, { useContext, useEffect, useState } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  FlexBox,
+  FlexRowCenter,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
+import { ProductImagesContext, ProductIntroContext } from "./context";
+import ThumbnailWithSkeleton from "./thumbnail-with-skeleton";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * @category Compound Component
+ */
+export default function ProductImages({ children }: Props) {
+  const [selectedImageIndex, setSelectedImageIndex] = useState<number>(0);
+
+  const { selectedVariant, masterProduct } = useContext(ProductIntroContext);
+  const { Name } = masterProduct;
+
+  /**
+   * VARIANT SELECTION - IF VARIANT HAS IMAGES, USE THOSE
+   * IF NOT USE masterProduct
+   */
+  const images =
+    Array.isArray(selectedVariant?.Images) && selectedVariant?.Images.length > 0
+      ? selectedVariant?.Images
+      : Array.isArray(masterProduct?.Images) && masterProduct?.Images.length > 0
+        ? masterProduct?.Images
+        : [];
+
+  const primaryImageUrl =
+    selectedVariant?.primaryImageUrl || masterProduct?.primaryImageUrl;
+
+  // HANDLE SELECT IMAGE
+  const handleImageClick = (ind: number) => () => {
+    setSelectedImageIndex(ind);
+  };
+
+  return (
+    <ProductImagesContext.Provider
+      value={{
+        name: Name,
+        selectedImageIndex,
+        images,
+        handleImageClick,
+        primaryImageUrl,
+      }}
+    >
+      <Grid size={{ md: 6, xs: 12 }} alignItems="center">
+        {children}
+      </Grid>
+    </ProductImagesContext.Provider>
+  );
+}
+
+/**
+ * The image gallery thumbnails, when clicked switches the main image.
+ * @category Sub-Component
+ */
+ProductImages.Thumbnails = () => {
+  const { images, handleImageClick, selectedImageIndex } =
+    useContext(ProductImagesContext);
+
+  return (
+    <>
+      <FlexBox overflow="auto" gap={1} justifyContent="center">
+        {images?.map((url: string, ind: number) => {
+          return (
+            <FlexRowCenter
+              key={ind}
+              width={64}
+              height={64}
+              minWidth={64}
+              bgcolor="white"
+              border="1px solid"
+              borderRadius="10px"
+              style={{ cursor: "pointer" }}
+              onClick={handleImageClick(ind)}
+              borderColor={
+                selectedImageIndex === ind ? "primary.main" : "grey.400"
+              }
+            >
+              <ThumbnailWithSkeleton src={url} />
+            </FlexRowCenter>
+          );
+        })}
+      </FlexBox>
+    </>
+  );
+};
+
+/**
+ * Main large image on PDP that displays currently selected image from
+ * product details.
+ * @category Sub-Component
+ */
+ProductImages.Main = () => {
+  const { name, images, primaryImageUrl, selectedImageIndex } =
+    useContext(ProductImagesContext);
+  return (
+    <FlexBox borderRadius={3} overflow="hidden" justifyContent="center" mb={6}>
+      <ImageWithFallback
+        alt={name ?? "product"}
+        width={300}
+        height={300}
+        loading="eager"
+        src={
+          Array.isArray(images) &&
+          selectedImageIndex !== undefined &&
+          images[selectedImageIndex]
+            ? images[selectedImageIndex]
+            : primaryImageUrl
+        }
+        style={{ objectFit: "contain" }}
+      />
+    </FlexBox>
+  );
+};