@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root.tsx

@@ -0,0 +1,181 @@
+/**
+ * @module ProductQuantityButtons
+ */
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import Button from "@mui/material/Button";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+import { MdAdd as Add } from "react-icons/md";
+import { MdRemove as Remove } from "react-icons/md";
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
+// TODO: Encapsulate the addToCart api calls inside this component
+// so no need to pass in props.
+
+/**
+ * @category Context
+ */
+export interface QuantityContextType {
+  /** Loading state, usually triggered by mutating quantity */
+  loading: boolean;
+  /** Current quantity of the passed in cartline */
+  quantity: number;
+  /** Is the product out of stock? */
+  isOOS: boolean;
+  /** The cartline to display/mutate the quantity of */
+  productCartLine: CartLine;
+  /** Handler for when the quantity is changed via sub-component buttons */
+  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
+}
+
+/**
+ * @internal
+ */
+export const QuantityContext = createContext<QuantityContextType | undefined>(
+  undefined,
+);
+
+/**
+ * @category Props
+ */
+export interface QuantityButtonProps {
+  /** The cartline that this component will display the quantity of */
+  productId: number;
+  /** Is the item out of stock? */
+  isOOS?: boolean;
+  /** React children */
+  children?: ReactNode;
+  /** An optional custom handler for add to cart, if project needs to plug in logic */
+  customAddToCart?: () => void;
+}
+
+/**
+ * Quantity button component, takes quantity of a product, if it's zero
+ * will display an add to cart button, if it's not zero it will display the current
+ * quantity with small add and remove buttons on either side.
+ * @example
+ * <QuantityButtons {...props}>
+ *   <QuantityButtons.Remove />
+ *   <QuantityButtons.Quantity />
+ *   <QuantityButtons.Add />
+ * </QuantityButtons>
+ *
+ * @category Compound Component
+ */
+export function QuantityButtons({
+  productId,
+  isOOS = false,
+  customAddToCart,
+  children,
+}: QuantityButtonProps) {
+  const t = useTranslations("productDetail");
+
+  const { handleAddToCart, handleCartAmountChange, loading, currentCartLine } =
+    useCart(productId);
+
+  if (!currentCartLine || currentCartLine?.Quantity === 0) {
+    return (
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={() => {
+          customAddToCart ? customAddToCart() : handleAddToCart();
+        }}
+        disabled={isOOS}
+      >
+        {t("btnAddToCart")}
+      </Button>
+    );
+  }
+
+  const value: QuantityContextType = {
+    loading,
+    quantity: currentCartLine?.Quantity,
+    isOOS,
+    productCartLine: currentCartLine,
+    handleCartAmountChange,
+  };
+
+  return (
+    <QuantityContext.Provider value={value}>
+      <FlexBox alignItems="center">{children}</FlexBox>
+    </QuantityContext.Provider>
+  );
+}
+
+/**
+ * The remove/decrementor button that appears when the quantity is not 0
+ * @category Sub-Component
+ */
+QuantityButtons.Remove = () => {
+  const { handleCartAmountChange, loading, productCartLine } =
+    useContext(QuantityContext);
+
+  return (
+    <Button
+      size="small"
+      sx={{ p: 1 }}
+      color="primary"
+      variant="outlined"
+      disabled={loading}
+      onClick={() =>
+        handleCartAmountChange(
+          (productCartLine?.Quantity || 0) - 1,
+          productCartLine,
+        )
+      }
+    >
+      <Remove fontSize="small" />
+    </Button>
+  );
+};
+
+/**
+ * The add/incrementor button that appears when the quantity is not 0
+ * @category Sub-Component
+ */
+QuantityButtons.Add = () => {
+  const { handleCartAmountChange, loading, productCartLine } =
+    useContext(QuantityContext);
+
+  return (
+    <Button
+      size="small"
+      sx={{ p: 1 }}
+      color="primary"
+      variant="outlined"
+      disabled={loading}
+      onClick={() =>
+        handleCartAmountChange(
+          (productCartLine?.Quantity || 0) + 1,
+          productCartLine,
+        )
+      }
+    >
+      <Add fontSize="small" />
+    </Button>
+  );
+};
+
+/**
+ * The display component that shows the current quantity.
+ * @category Sub-Component
+ */
+QuantityButtons.Quantity = () => {
+  const { loading, productCartLine } = useContext(QuantityContext);
+  return (
+    <H3
+      fontWeight="600"
+      mx={2.5}
+      sx={{ width: "20px", display: "flex", justifyContent: "center" }}
+    >
+      {loading ? (
+        <CircularProgress size={"10px"} />
+      ) : (
+        productCartLine?.Quantity.toString().padStart(2, "0")
+      )}
+    </H3>
+  );
+};

package/src/components-v2/product-quantity-buttons/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @component
+ * @category Implementation component
+ */
+import React from "react";
+import { QuantityButtons } from "./compound/quantity-buttons-root";
+import { QuantityButtonProps } from "./compound/quantity-buttons-root";
+
+/**
+ * Pre-composed version of quantity buttons.
+ */
+const ProductQuantityButtons = (props: QuantityButtonProps) => {
+  return (
+    <QuantityButtons {...props}>
+      <QuantityButtons.Remove />
+      <QuantityButtons.Quantity />
+      <QuantityButtons.Add />
+    </QuantityButtons>
+  );
+};
+
+export default ProductQuantityButtons;

package/src/components-v2/product-quantity-variants/index.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+
+// GLOBAL CUSTOM COMPONENTS
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
+// API MANAGER
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+
+// LOCAL HOOKS
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
+
+// LOCAL COMPONENTS
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+
+interface Props {
+  product: ProductDetails;
+}
+
+export default function QuantityVariantsSelect({ product }: Props) {
+  const [showDimensionError, setShowDimensionError] = useState(false);
+
+  const { DimensionValues, RecordId } = product;
+
+  const {
+    selectedVariant,
+    selectDimensions,
+    handleChangeVariant,
+    allDimensionsSelected,
+  } = useVariants(product);
+
+  const { handleAddToCart } = useCart(RecordId, selectedVariant.RecordId);
+
+  const searchCriteria = {
+    searchCriteria: {
+      defaultWarehouseOnly: true,
+      productIds: [selectedVariant?.RecordId || RecordId],
+    },
+  };
+
+  const { data: shippingInventoryData } =
+    getProductAvailability.useData(searchCriteria);
+
+  const addToCartDisabled = () => {
+    if (!allDimensionsSelected) {
+      return false; // Don't disable add to cart if dimensions are not selected, so clicking the button will provide an error message showing the user what to do.
+    }
+
+    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;
+  };
+
+  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    if (!allDimensionsSelected) {
+      setShowDimensionError(true);
+      return;
+    }
+    setShowDimensionError(false);
+    handleAddToCart(bopisInput);
+  };
+
+  return (
+    <Box width="100%">
+      <ProductDimensions
+        dimensionGroups={DimensionValues}
+        selectDimensions={selectDimensions}
+        handleChangeVariant={handleChangeVariant}
+        showDimensionError={showDimensionError}
+      />
+      <QuantityButtons
+        customAddToCart={onAddToCart}
+        isOOS={addToCartDisabled()}
+        productId={selectedVariant?.RecordId}
+      />
+    </Box>
+  );
+}

package/src/components-v2/products-view/compound/context.ts

@@ -0,0 +1,25 @@
+/**
+ * @module ProductsView
+ */
+import { createContext } from "react";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+
+/**
+ * Shared context value for the products list passed into root component.
+ * @category Context
+ */
+export interface ProductsViewContext {
+  /** List of products to display */
+  products: Product[];
+  /** Array of product pricing */
+  productPrices?: ProductPrice[];
+}
+
+/**
+ * @internal
+ */
+export const ProductsViewContext = createContext<null | ProductsViewContext>(
+  null,
+);

package/src/components-v2/products-view/compound/products-grid-view.tsx

@@ -0,0 +1,109 @@
+/**
+ * @module ProductsView
+ */
+import React, { useContext, cloneElement } from "react";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+import { ProductsViewContext } from "./context";
+import { ProductsViewProps } from "./types";
+
+/**
+ * Root component of products grid view.
+ * @category Compound Component
+ * @example
+ * <ProductsGridView products={products} productPrices={prices}>
+ *   <ProductsGridView.Container>
+ *     <ProductsGridView.Grid>
+ *       <ProductsGridView.Card />
+ *     </ProductsGridView.Grid>
+ *   </ProductsGridView.Container>
+ * </ProductsGridView>
+ */
+export default function ProductsGridView(props: ProductsViewProps) {
+  const { products, productPrices, pagination, children } = props;
+
+  return (
+    <ProductsViewContext.Provider value={{ products, productPrices }}>
+      <Grid container spacing={3}>
+        {children}
+      </Grid>
+      <FlexBetween flexWrap="wrap" mt={6}>
+        {pagination}
+      </FlexBetween>
+    </ProductsViewContext.Provider>
+  );
+}
+
+/**
+ *
+ * Grid that handles rendering the list of component and passing
+ * product and pricing props to individual items.
+ * @category Sub-Component
+ *
+ */
+ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
+  const { products, productPrices } = useContext(ProductsViewContext);
+  return (
+    <>
+      {products.map((item: Product, i) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        // Legacy API, consider alternatives.
+        // Using this to pass props to child.
+        return cloneElement(children, {
+          key: i,
+          product: item,
+          price: matchingPrice,
+        });
+      })}
+    </>
+  );
+};
+
+/**
+ * @category Props
+ */
+export interface ProductCardProps {
+  product?: Product;
+  price?: ProductPrice;
+}
+
+/**
+ * Individual product card component displayed in the grid.
+ * @param props.item The product data to render.
+ * @param props.price The product price data.
+ * @category Sub-Component
+ */
+ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
+  return (
+    <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={product.ItemId}>
+      <ProductCardPlp
+        key={product.RecordId}
+        product={{
+          title: product.Name ?? "",
+          slug: product.ItemId ?? "",
+          price: price?.CustomerContextualPrice ?? 0,
+          imgUrl: product.PrimaryImageUrl ?? "",
+          rating: product.TotalRatings ?? 0,
+          discount: 0, // Need to get discount info for product.
+          id: product.RecordId,
+        }}
+      >
+        <ProductCardPlp.Image />
+        <ProductCardPlp.Body>
+          <ProductCardPlp.Info>
+            <ProductCardPlp.Title />
+            <ProductCardPlp.Rating />
+            <ProductCardPlp.Price />
+          </ProductCardPlp.Info>
+        </ProductCardPlp.Body>
+      </ProductCardPlp>
+    </Grid>
+  );
+};

package/src/components-v2/products-view/compound/products-list-view.tsx

@@ -0,0 +1,98 @@
+/**
+ * @module ProductsView
+ */
+import { useContext, cloneElement } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductsViewContext } from "./context";
+import { ProductsViewProps } from "./types";
+
+/**
+ * Root component of the ProductsListView.
+ */
+export default function ProductsListView(props: ProductsViewProps) {
+  const { pagination, products, productPrices, children } = props;
+
+  return (
+    <ProductsViewContext.Provider value={{ products, productPrices }}>
+      {children}
+      <FlexBetween flexWrap="wrap" mt={4}>
+        {pagination}
+      </FlexBetween>
+    </ProductsViewContext.Provider>
+  );
+}
+
+/**
+ *
+ * Grid that handles rendering the list of component and passing
+ * product and pricing props to individual items.
+ * @category Sub-Component
+ *
+ */
+ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
+  const { products, productPrices } = useContext(ProductsViewContext);
+  return (
+    <>
+      {products.map((item: Product, i) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        // Legacy API, consider alternatives.
+        // Using this to pass props to child.
+        return cloneElement(children, {
+          key: i,
+          product: item,
+          price: matchingPrice,
+        });
+      })}
+    </>
+  );
+};
+
+/**
+ * @category Props
+ */
+export interface ProductCardProps {
+  product?: Product;
+  price?: ProductPrice;
+}
+
+/**
+ * Individual product card component displayed in the grid.
+ * @param props.item The product data to render.
+ * @param props.price The product price data.
+ * @category Sub-Component
+ */
+ProductsListView.Card = ({ product, price }: ProductCardProps) => {
+  return (
+    <ProductCardPlpList
+      key={product.RecordId}
+      product={{
+        id: product.RecordId,
+        title: product.Name ?? "",
+        slug: product.ItemId ?? "",
+        price: price?.CustomerContextualPrice ?? 0,
+        imgUrl: product.PrimaryImageUrl ?? "",
+        rating: product.TotalRatings ?? 0,
+        discount: 0, // Need to get discount info for product.,
+        //tags: ["Bike", "Motor", "Ducati"], // Example tags
+      }}
+    >
+      <ProductCardPlpList.Body>
+        <ProductCardPlpList.Image />
+        <ProductCardPlpList.Content>
+          <ProductCardPlpList.Info>
+            <ProductCardPlpList.Title />
+            <ProductCardPlpList.Price />
+            <ProductCardPlpList.Rating />
+          </ProductCardPlpList.Info>
+        </ProductCardPlpList.Content>
+      </ProductCardPlpList.Body>
+    </ProductCardPlpList>
+  );
+};

package/src/components-v2/products-view/compound/types.ts

@@ -0,0 +1,12 @@
+import { ProductsViewContext } from "./context";
+import { PropsWithChildren, ReactNode } from "react";
+
+/**
+ * This prop type is used for both the ProductsViewGrid and the ProductsViewList.
+ * @category Props
+ */
+export interface ProductsViewProps
+  extends ProductsViewContext,
+    PropsWithChildren {
+  pagination?: ReactNode;
+}

package/src/components-v2/products-view/index.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import ProductsGridView from "./compound/products-grid-view";
+import ProductsListView from "./compound/products-list-view";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+
+export interface Props {
+  /** List of products to display */
+  products: Product[];
+  /** Pagination component */
+  pagination?: ReactNode;
+  /** Array of product pricing */
+  productPrices?: ProductPrice[];
+}
+
+/**
+ *
+ * Pre-composed implementation of ProductGrid
+ *
+ */
+export function ProductsGrid(props: Props) {
+  return (
+    <ProductsGridView {...props}>
+      <ProductsGridView.Grid>
+        <ProductsGridView.Card />
+      </ProductsGridView.Grid>
+    </ProductsGridView>
+  );
+}
+
+/**
+ *
+ * Pre-composed implementation of ProductList
+ *
+ */
+export function ProductsList(props: Props) {
+  return (
+    <ProductsListView {...props}>
+      <ProductsListView.List>
+        <ProductsListView.Card />
+      </ProductsListView.List>
+    </ProductsListView>
+  );
+}

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

@@ -2,7 +2,7 @@ import { Fragment, ReactNode } from "react";
 import Grid from "@mui/material/Grid2";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import ProductCard16 from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-16/product-card";
+import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import { ProductPrice } from "@/api-manager/schemas/product.schema";
@@ -29,17 +29,30 @@ export default function ProductsGridView({
           );
           return (
             <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-              <ProductCard16
-                id={item.RecordId}
+              <ProductCardPlp
                 key={item.RecordId}
-                slug={item.ItemId ?? ""}
-                title={item.Name ?? ""}
-                price={matchingPrice?.CustomerContextualPrice ?? 0}
-                discount={0} // Need to get discount info for product.
-                rating={item.TotalRatings ?? 0}
-                imgUrl={item.PrimaryImageUrl ?? ""}
-                showAddToCart={false}
-              />
+                product={{
+                  title: item.Name ?? "",
+                  slug: item.ItemId ?? "",
+                  price: matchingPrice?.CustomerContextualPrice ?? 0,
+                  imgUrl: item.PrimaryImageUrl ?? "",
+                  rating: item.TotalRatings ?? 0,
+                  discount: 0, // Need to get discount info for product.
+                  id: item.RecordId,
+                }}
+              >
+                <ProductCardPlp.Image />
+                <ProductCardPlp.Body>
+                  <ProductCardPlp.Info>
+                    <ProductCardPlp.Title />
+                    <ProductCardPlp.Rating />
+                    <ProductCardPlp.Price />
+                  </ProductCardPlp.Info>
+                  {/* <ProductCardPlp.Actions>
+                    <ProductCardPlp.QuantityButtons />
+                  </ProductCardPlp.Actions> */}
+                </ProductCardPlp.Body>
+              </ProductCardPlp>
             </Grid>
           );
         })}