@evenicanpm/storefront-core 1.0.3 → 1.0.4

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>
+  );
+};

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

@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import useVariants from "../../../../hooks/use-variants";
+import ProductImages from "./product-intro-images";
+import ProductInfo from "./product-info";
+import { ProductIntroContext } from "./context";
+
+/**
+ * Master product data comes in as prop, selected variant details are called
+ * every render, if there is a valid variant id selected (based on dimensions).
+ */
+type Props = { product: ProductDetails; children: React.ReactNode };
+
+export default function ProductIntro({ product, children }: Props) {
+  // HOOKS
+  const {
+    selectedVariant,
+    selectDimensions,
+    handleChangeVariant,
+    allDimensionsSelected,
+    variantPending,
+  } = useVariants(product);
+
+  return (
+    <ProductIntroContext.Provider
+      value={{
+        masterProduct: product,
+        allDimensionsSelected,
+        variantPending,
+        selectedVariant,
+        selectDimensions,
+        handleChangeVariant,
+      }}
+    >
+      <Box width="100%">
+        <Grid container spacing={3} justifyContent="space-around">
+          {children}
+          {/* PRODUCT INFO AREA */}
+        </Grid>
+      </Box>
+    </ProductIntroContext.Provider>
+  );
+}
+
+ProductIntro.Images = ProductImages;
+ProductIntro.Info = ProductInfo;

package/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Skeleton } from "@mui/material";
+
+/**
+ * Shows a skeleton until the image loads
+ * @category Sub-Component
+ */
+function ThumbnailWithSkeleton({ src }: { src: string }) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <>
+      {!loaded && <Skeleton variant="rounded" width={50} height={50} />}
+      <img
+        src={src}
+        onLoad={() => setLoaded(true)}
+        style={{
+          display: loaded ? "block" : "none",
+          width: "80%",
+          height: "80%",
+          objectFit: "cover",
+        }}
+      />
+    </>
+  );
+}
+
+export default ThumbnailWithSkeleton;

package/src/pages-v2/product-details/product-intro/utils.ts

@@ -0,0 +1,42 @@
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
+
+export const getInventoryLabel = (
+  shippingInventoryData: ProductWarehouseInventoryInformation,
+): string | null => {
+  const aggregate =
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+  if (aggregate) {
+    const { TotalAvailableInventoryLevelLabel } = aggregate;
+    return TotalAvailableInventoryLevelLabel || null;
+  }
+  return null;
+};
+
+export const checkProductOOS = (
+  shippingInventoryData: ProductWarehouseInventoryInformation,
+) => {
+  //TODO: Incorporate global inventory enabled flag.
+  const OOSCode = "OOS"; // Always means out of stock
+  const aggregate =
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+  if (aggregate) {
+    const { TotalAvailableInventoryLevelCode } = aggregate;
+    return TotalAvailableInventoryLevelCode === OOSCode;
+  }
+  return true;
+};
+
+/**
+ * Simple object building for inventory query.
+ */
+export const buildInventorySearchCriteria = (productId: number) => {
+  return {
+    searchCriteria: {
+      defaultWarehouseOnly: true,
+      productIds: [productId],
+    },
+  };
+};

package/src/pages-v2/product-details/product-tabs.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useContext, useState, createContext } from "react";
 import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import styled from "@mui/material/styles/styled";
+
 // LOCAL CUSTOM COMPONENTS
 import ProductDescription from "./product-description";
 import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
+
 // STYLED COMPONENT
 const StyledTabs = styled(Tabs)(({ theme }) => ({
   minHeight: 0,
@@ -21,31 +23,95 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   },
 }));
 
-type Props = { productAttributes: AttributeValue[] };
+type Props = { productAttributes: AttributeValue[]; children: React.ReactNode };
+
+export interface TabsContext {
+  selectedOption: number;
+  productAttributes: AttributeValue[];
+  handleOptionClick: (_: React.SyntheticEvent, value: number) => void;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const TabsContext = createContext<TabsContext>(null);
 
-export default function ProductTabs({ productAttributes }: Props) {
+/**
+ * @category Compound Component
+ */
+export default function ProductTabs({ productAttributes, children }: Props) {
   const [selectedOption, setSelectedOption] = useState(0);
   const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
     setSelectedOption(value);
 
   return (
-    <>
-      <StyledTabs
-        textColor="primary"
-        value={selectedOption}
-        indicatorColor="primary"
-        onChange={handleOptionClick}
-      >
-        <Tab className="inner-tab" label="Description" />
-        <Tab className="inner-tab" label="Review (3)" />
-      </StyledTabs>
-
-      <Box mb={6}>
-        {selectedOption === 0 && (
-          <ProductDescription attributes={productAttributes} />
-        )}
-        {/*selectedOption === 1 && <ProductReview />*/}
-      </Box>
-    </>
+    <TabsContext.Provider
+      value={{ selectedOption, handleOptionClick, productAttributes }}
+    >
+      <Box mb={6}>{children}</Box>
+    </TabsContext.Provider>
   );
 }
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Tabs = ({ children }: { children: React.ReactNode }) => {
+  const { selectedOption, handleOptionClick } = useContext(TabsContext);
+  return (
+    <StyledTabs
+      textColor="primary"
+      value={selectedOption}
+      indicatorColor="primary"
+      onChange={handleOptionClick}
+    >
+      {children}
+    </StyledTabs>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Option = (props: { label: string; value: number }) => {
+  return <Tab className="inner-tab" {...props} />;
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Content = ({
+  index,
+  children,
+}: {
+  index: number;
+  children: React.ReactNode;
+}) => {
+  const { selectedOption } = useContext(TabsContext);
+  return (
+    <CustomTabPanel value={selectedOption} index={index}>
+      {children}
+    </CustomTabPanel>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Description = () => {
+  const { productAttributes } = useContext(TabsContext);
+  return <ProductDescription attributes={productAttributes} />;
+};

package/src/pages-v2/product-details/related-products.tsx

@@ -4,7 +4,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 // GLOBAL CUSTOM COMPONENTS
 import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ProductCard1Wrapper from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-1/product-card-1-wrapper";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
 // CUSTOM DATA MODEL
 import GetRelatedProductsDataFetcher from "@/api-manager/services/product/queries/get-related-products";
 
@@ -23,17 +23,31 @@ export default function RelatedProducts({ RecordId }: Props) {
       <Grid container spacing={3}>
         {products?.map((item, ind) => (
           <Grid size={{ lg: 3, md: 4, sm: 6, xs: 12 }} key={ind}>
-            <ProductCard1Wrapper
-              hoverEffect
-              id={item?.ItemId || ""}
-              slug={String(item?.RecordId) || ""}
-              title={item?.Name || ""}
-              price={item.Price}
-              rating={4.5}
-              imgUrl={item.PrimaryImageUrl || ""}
-              discount={10}
-              mode="PLP"
-            />
+            <ProductCard
+              product={{
+                id: item.ItemId ?? "",
+                slug: String(item?.RecordId) ?? "",
+                title: item.Name ?? "",
+                price: item.Price ?? 0,
+                imgUrl: item.PrimaryImageUrl ?? "",
+                rating: 0,
+                discount: 0,
+                hoverEffect: true,
+              }}
+            >
+              <ProductCard.Image />
+              <ProductCard.Body>
+                <ProductCard.Info>
+                  <ProductCard.Title />
+                  <ProductCard.Rating />
+                  <ProductCard.Price />
+                </ProductCard.Info>
+                <ProductCard.Actions>
+                  <ProductCard.QuantityButtons />
+                  {/* <ProductCard.HoverActions /> */}
+                </ProductCard.Actions>
+              </ProductCard.Body>
+            </ProductCard>
           </Grid>
         ))}
       </Grid>