@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -18,91 +18,108 @@ import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
  * @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;
+	/** 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,
+	undefined,
 );
 
+/**
+ * Hook to safely access QuantityContext
+ * @throws When used outside of QuantityProvider
+ * @returns The quantity context value
+ */
+export const useQuantity = () => {
+	const context = useContext(QuantityContext);
+
+	if (context === undefined) {
+		throw new Error("useQuantity must be used within a QuantityProvider");
+	}
+
+	return context;
+};
+
 /**
  * @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;
+	/** The cartline that this component will display the quantity of */
+	productId: number | undefined;
+	/** 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
+ * ```tsx
  * <QuantityButtons {...props}>
  *   <QuantityButtons.Remove />
  *   <QuantityButtons.Quantity />
  *   <QuantityButtons.Add />
  * </QuantityButtons>
  *
- * @category Compound Component
+ * ```
  */
 export function QuantityButtons({
-  productId,
-  isOOS = false,
-  customAddToCart,
-  children,
+	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>
-  );
+	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>
+		);
+	}
+
+	if (!currentCartLine?.Quantity) return null;
+
+	const value: QuantityContextType = {
+		loading,
+		quantity: currentCartLine?.Quantity,
+		isOOS,
+		productCartLine: currentCartLine,
+		handleCartAmountChange,
+	};
+
+	return (
+		<QuantityContext.Provider value={value}>
+			<FlexBox alignItems="center">{children}</FlexBox>
+		</QuantityContext.Provider>
+	);
 }
 
 /**
@@ -110,26 +127,25 @@ export function QuantityButtons({
  * @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>
-  );
+	const { handleCartAmountChange, loading, productCartLine } = useQuantity();
+
+	return (
+		<Button
+			size="small"
+			sx={{ p: 1 }}
+			color="primary"
+			variant="outlined"
+			disabled={loading}
+			onClick={() =>
+				handleCartAmountChange(
+					(productCartLine?.Quantity || 0) - 1,
+					productCartLine,
+				)
+			}
+		>
+			<Remove fontSize="small" />
+		</Button>
+	);
 };
 
 /**
@@ -137,26 +153,25 @@ QuantityButtons.Remove = () => {
  * @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>
-  );
+	const { handleCartAmountChange, loading, productCartLine } = useQuantity();
+
+	return (
+		<Button
+			size="small"
+			sx={{ p: 1 }}
+			color="primary"
+			variant="outlined"
+			disabled={loading}
+			onClick={() =>
+				handleCartAmountChange(
+					(productCartLine?.Quantity || 0) + 1,
+					productCartLine,
+				)
+			}
+		>
+			<Add fontSize="small" />
+		</Button>
+	);
 };
 
 /**
@@ -164,18 +179,18 @@ QuantityButtons.Add = () => {
  * @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>
-  );
+	const { loading, productCartLine } = useQuantity();
+	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

@@ -10,13 +10,13 @@ import { QuantityButtonProps } from "@evenicanpm/storefront-core/src/components-
  * Pre-composed version of quantity buttons.
  */
 const ProductQuantityButtons = (props: QuantityButtonProps) => {
-  return (
-    <QuantityButtons {...props}>
-      <QuantityButtons.Remove />
-      <QuantityButtons.Quantity />
-      <QuantityButtons.Add />
-    </QuantityButtons>
-  );
+	return (
+		<QuantityButtons {...props}>
+			<QuantityButtons.Remove />
+			<QuantityButtons.Quantity />
+			<QuantityButtons.Add />
+		</QuantityButtons>
+	);
 };
 
 export default ProductQuantityButtons;

package/src/components-v2/product-quantity-variants/ProductQuantity.stories.tsx

@@ -0,0 +1,18 @@
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import QuantityButtons from "./index";
+import { product } from "../../../__mocks__/product-dimensions";
+
+const meta = {
+	title: "Product/DimensionsQuantitySelector",
+	component: QuantityButtons,
+	tags: ["autodocs"],
+} satisfies Meta<typeof QuantityButtons>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive = () => {
+	return <QuantityButtons product={product} />;
+};

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

@@ -5,86 +5,91 @@ 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";
+import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
 
 // LOCAL HOOKS
 import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import useCart, {
-  AddToCartBopisInput,
+	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;
+	product: ProductDetails;
 }
 
+/**
+ *
+ * @category composed-component
+ *
+ * A composed component made up of the ProductDimensions component
+ * and the quantity selector component. These two components are usually
+ * used together so this is a pre-wired version for convenience.
+ */
 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>
-  );
+	const [showDimensionError, setShowDimensionError] = useState(false);
+
+	const { DimensionValues, RecordId } = product;
+
+	const {
+		selectedVariant,
+		selectDimensions,
+		handleChangeVariant,
+		allDimensionsSelected,
+	} = useVariants(product);
+
+	const { handleAddToCart } = useCart(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 aggregateCode =
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0]
+				?.TotalAvailableInventoryLevelCode;
+
+		return aggregateCode === OOSCode;
+	};
+
+	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/ProductsGrid.stories.tsx

@@ -0,0 +1,18 @@
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductsGrid } from "./index";
+import { data, prices } from "../../../__mocks__/products";
+
+const meta = {
+	title: "Product/ListGrid",
+	component: ProductsGrid,
+	tags: ["autodocs"],
+} satisfies Meta<typeof ProductsGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive = () => {
+	return <ProductsGrid products={data.products} productPrices={prices} />;
+};

package/src/components-v2/products-view/ProductsList.stories.tsx

@@ -0,0 +1,20 @@
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductsList } from "./index";
+import { data, prices } from "../../../__mocks__/products";
+//import { useSession } from "next-auth/react";
+import { expect, mocked } from "storybook/test";
+
+const meta = {
+	title: "Product/ListList",
+	component: ProductsList,
+	tags: ["autodocs"],
+} satisfies Meta<typeof ProductsList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive = () => {
+	return <ProductsList products={data.products} productPrices={prices} />;
+};

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

@@ -1,25 +1,70 @@
 /**
  * @module ProductsView
  */
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
+import { ProductPrice } from "@evenicanpm/storefront-core/src/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[];
+	/** List of products to display */
+	products: Product[];
+	/** Array of product pricing */
+	productPrices?: ProductPrice[];
+}
+
+export interface ProductsViewCardContext {
+	product: Product;
+	price?: ProductPrice;
 }
 
 /**
  * @internal
  */
 export const ProductsViewContext = createContext<null | ProductsViewContext>(
-  null,
+	null,
 );
+
+/**
+ * @internal
+ */
+export const ProductsViewCardContext =
+	createContext<null | ProductsViewCardContext>(null);
+
+/**
+ * Hook to safely access ProductsViewContext
+ * @throws When used outside of ProductsViewProvider
+ * @returns The products view context value
+ */
+export const useProductsView = () => {
+	const context = useContext(ProductsViewContext);
+
+	if (context === null) {
+		throw new Error(
+			"useProductsView must be used within a ProductsViewProvider",
+		);
+	}
+
+	return context;
+};
+
+/**
+ * Hook to safely access ProductsViewCardContext
+ * @throws When used outside of ProductsViewCardProvider
+ * @returns The product card context value
+ */
+export const useProductsViewCard = () => {
+	const context = useContext(ProductsViewCardContext);
+
+	if (context === null) {
+		throw new Error(
+			"useProductsViewCard must be used within a ProductsViewCardProvider",
+		);
+	}
+
+	return context;
+};