@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/product-cards/product-card-plp-list/product-card.tsx

@@ -1,25 +1,25 @@
-import { createContext, useContext, ReactNode, useState } from "react";
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Rating from "@mui/material/Rating";
-import styled from "@mui/material/styles/styled";
-import IconButton from "@mui/material/IconButton";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
-import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 import ProductTags from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/components/tags";
-// LIBRARY AND HOOKS
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+// GLOBAL CUSTOM COMPONENTS
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
 import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
+// LIBRARY AND HOOKS
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import Card from "@mui/material/Card";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import styled from "@mui/material/styles/styled";
+import Link from "next/link";
+import { createContext, type ReactNode, useContext, useState } from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled(Card)({
@@ -201,11 +201,12 @@ ProductCardPlpList.Price = () => {
 
 ProductCardPlpList.FavoriteButton = () => {
 	const ctx = useContext(ProductCardPlpListContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
 	const isFavorite = useFavorite(id);
 
+	if (!ctx) return null;
+
 	return (
 		<FavoriteButton
 			isFavorite={isFavorite}
@@ -220,12 +221,14 @@ ProductCardPlpList.FavoriteButton = () => {
 // So hide them for now, implement based on client requirements.
 ProductCardPlpList.QuantityButtons = () => {
 	const ctx = useContext(ProductCardPlpListContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
 	const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
+
 	const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
 
+	if (!ctx) return null;
+
 	const handleIncrementQuantity = () => {
 		const qty = quantity + 1;
 		handleCartAmountChange(qty);

package/src/components-v2/product-cards/product-card-search/ProductCardSearch.stories.tsx

@@ -1,8 +1,8 @@
+import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import ProductCardSearch from "./index";
 import { data } from "../../../../__mocks__/products";
-import { Box } from "@mui/material";
+import ProductCardSearch from "./index";
 
 const meta = {
 	title: "Product/ProductCards/ProductCardSearch",

package/src/components-v2/product-cards/product-card-search/product-card.tsx

@@ -1,32 +1,32 @@
 "use client";
 
-import { createContext, useContext, ReactNode, useState } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-// MUI ICON COMPONENTS
-import { RemoveRedEye } from "@mui/icons-material";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+// STYLED COMPONENTS
+import {
+	Card,
+	CardMedia,
+	QuickViewSmallButton,
+} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search/styles/index";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 import {
 	H4,
 	Paragraph,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
 // LIBRARY AND HOOKS
 import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
-// STYLED COMPONENTS
-import {
-	Card,
-	CardMedia,
-	QuickViewSmallButton,
-} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search/styles/index";
+// MUI ICON COMPONENTS
+import { RemoveRedEye } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+import Link from "next/link";
+import { createContext, type ReactNode, useContext, useState } from "react";
 
 type Product = {
 	slug: string;
@@ -171,9 +171,11 @@ ProductCardSearch.QuickViewButton = () => {
 
 ProductCardSearch.FavoriteButton = () => {
 	const ctx = useContext(ProductCardSearchContext);
+
+	const id = ctx?.product?.id;
+	const isFavorite = useFavorite(id ? Number(id) : undefined);
+
 	if (!ctx) return null;
-	const { id } = ctx.product;
-	const isFavorite = useFavorite(Number(id));
 
 	return (
 		<FavoriteButton

package/src/components-v2/product-cards/product-price.tsx

@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
@@ -7,12 +6,13 @@ import {
 	calculateDiscount,
 	currency,
 } from "@evenicanpm/storefront-core/src/lib/lib";
+import Box from "@mui/material/Box";
 
 // ==============================================================
 type Props = { price: number; discount: number };
 // ==============================================================
 
-export default function ProductPrice({ discount, price }: Props) {
+export default function ProductPrice({ discount, price }: Readonly<Props>) {
 	return (
 		<FlexBox alignItems="center" gap={1} mt={0.5}>
 			<Paragraph fontWeight={600} color="primary.main">

package/src/components-v2/product-cards/product-rating.tsx

@@ -1,8 +1,8 @@
-import Rating from "@mui/material/Rating";
-import { BoxProps } from "@mui/material/Box";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import type { BoxProps } from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
 
 // ==============================================================
 interface Props extends BoxProps {
@@ -15,7 +15,7 @@ export default function ProductRating({
 	showRating,
 	rating = 0,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	if (showRating) {
 		return (
 			<FlexBox gap={1} alignItems="center" {...props}>

package/src/components-v2/product-cards/product-title.tsx

@@ -1,11 +1,11 @@
-import Link from "next/link";
 import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Link from "next/link";
 
 // ==============================================================
 type Props = { title: string; slug: string };
 // ==============================================================
 
-export default function ProductTitle({ title, slug }: Props) {
+export default function ProductTitle({ title, slug }: Readonly<Props>) {
 	return (
 		<Link href={`/products/${slug}`}>
 			<H3

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

@@ -1,12 +1,12 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
 import { CircularProgress } from "@mui/material";
+import Button from "@mui/material/Button";
+import { Fragment } from "react";
 
 // ==============================================================
 interface Props {
@@ -17,7 +17,7 @@ interface Props {
 }
 // ==============================================================
 
-export default function QuantityButtons(props: Props) {
+export default function QuantityButtons(props: Readonly<Props>) {
 	const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
 		props || {};
 

package/src/components-v2/product-dialog/ProductDialog.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ProductDialog from "./index";
 import { Button } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "storybook/internal/preview-api";
 import { data } from "../../../__mocks__/products";
+import ProductDialog from "./index";
 
 const meta = {
 	title: "Product/ProductDialog",

package/src/components-v2/product-dialog/compound/product-dialog.tsx

@@ -2,27 +2,27 @@
  * @module ProductViewDialog
  */
 "use client";
-import Grid from "@mui/material/Grid2";
-import Rating from "@mui/material/Rating";
-import Dialog from "@mui/material/Dialog";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import DialogContent from "@mui/material/DialogContent";
-import Close from "@mui/icons-material/Close";
-import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel";
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
 import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import QuantityVariantsSelect from "@evenicanpm/storefront-core/src/components-v2/product-quantity-variants";
 import {
-	H2,
-	Paragraph,
 	H1,
+	H2,
 	H6,
+	Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import QuantityVariantsSelect from "@evenicanpm/storefront-core/src/components-v2/product-quantity-variants";
-import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
-import { createContext, ReactElement, useContext } from "react";
-import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import Close from "@mui/icons-material/Close";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import Divider from "@mui/material/Divider";
+import Grid from "@mui/material/Grid2";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import { createContext, type ReactElement, useContext } from "react";
 
 /**
  * @category Props
@@ -87,7 +87,7 @@ export const useProductDialog = () => {
  *     </ProductViewDialog.Content>
  *   </ProductViewDialog>
  */
-export default function ProductDialog(props: Props) {
+export default function ProductDialog(props: Readonly<Props>) {
 	const { children, openDialog, handleCloseDialog } = props;
 	const { data: product } = getProductById.useSuspenseData({
 		id: Number(props.productId),
@@ -161,7 +161,7 @@ export const ProductDialogContentImages = () => {
 			>
 				{product?.Images?.map((item: string, index: number) => (
 					<BazaarImage
-						key={index}
+						key={item + index}
 						src={item}
 						alt="product"
 						sx={{

package/src/components-v2/product-dialog/index.tsx

@@ -10,7 +10,7 @@ interface Props {
 /**
  * @category Composed Component
  */
-export default function ProductDialog(props: Props) {
+export default function ProductDialog(props: Readonly<Props>) {
 	return (
 		<ProductViewDialog {...props}>
 			<ProductViewDialog.Content>

package/src/components-v2/product-dimensions/Dimensions.stories.tsx

@@ -1,9 +1,10 @@
 // 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 React from "react";
+import useVariants from "../../hooks/use-variants";
 import { data, product } from "./__mocks__/data";
 import { Dimensions } from "./compound/dimensions";
-import useVariants from "../../hooks/use-variants";
 
 const meta = {
 	title: "Product/Dimensions",

package/src/components-v2/product-dimensions/compound/dimensions-group-error.tsx

@@ -3,12 +3,12 @@
  */
 "use client";
 import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
+import { hasSelectedDimension } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/utils/has-selected-dimension";
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useTranslations } from "next-intl";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-import { hasSelectedDimension } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/utils/has-selected-dimension";
+import { useTranslations } from "next-intl";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * An error that corresponds with a specific dimension group.

package/src/components-v2/product-dimensions/compound/dimensions-group-label.tsx

@@ -2,10 +2,10 @@
  * @module ProductDimensions
  */
 "use client";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * @category Sub-Component

package/src/components-v2/product-dimensions/compound/dimensions-group-list-chip.tsx

@@ -1,13 +1,14 @@
 /**
  * @module ProductDimensions
  */
-import React, { useContext } from "react";
-import { Chip } from "@mui/material";
+
+import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
 import {
-	ProductDimensionValueInventoryAvailability,
 	ProductDimensionType,
+	type ProductDimensionValueInventoryAvailability,
 } from "@msdyn365-commerce/retail-proxy";
-import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import { Chip } from "@mui/material";
+import React, { useContext } from "react";
 
 /**
  * @category Props

package/src/components-v2/product-dimensions/compound/dimensions-group-list.tsx

@@ -2,9 +2,9 @@
  * @module ProductDimensions
  */
 "use client";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 import { DimensionGroupListChip } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-list-chip";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * @category Sub-Component
@@ -19,6 +19,11 @@ export const DimensionGroupList = () => {
 	const { dimensions } = context;
 
 	return dimensions.map((dimension, i) => {
-		return <DimensionGroupListChip dimension={dimension} key={i} />;
+		return (
+			<DimensionGroupListChip
+				dimension={dimension}
+				key={`dimension-${i + 1}`}
+			/>
+		);
 	});
 };

package/src/components-v2/product-dimensions/compound/dimensions-group.tsx

@@ -2,13 +2,12 @@
  * @module ProductDimensions
  */
 "use client";
-import Box from "@mui/material/Box";
-import { createContext } from "react";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-import { PropsWithChildren } from "react";
 import { DimensionGroupError } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-error";
 import { DimensionGroupLabel } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-label";
 import { DimensionGroupList } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-list";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import Box from "@mui/material/Box";
+import { createContext, type PropsWithChildren } from "react";
 
 /**
  * @category Props

package/src/components-v2/product-dimensions/compound/dimensions.tsx

@@ -1,7 +1,11 @@
 "use client";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-import React, { PropsWithChildren, ReactElement, createContext } from "react";
 import { DimensionGroup } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import React, {
+	createContext,
+	type PropsWithChildren,
+	type ReactElement,
+} from "react";
 
 /**
  * @category Context

package/src/components-v2/product-dimensions/index.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 import { Dimensions } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 
-// TODO: When selecting a single dimension, loading spinner starts... not necessary, inefficient.
+// When selecting a single dimension, loading spinner starts... not necessary, inefficient.
 
 export type Props = {
 	dimensionGroups: ProductDimensionValueInventoryAvailability[][];
@@ -18,7 +18,7 @@ export default function ProductDimensions({
 	selectDimensions,
 	handleChangeVariant,
 	showDimensionError,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Dimensions
 			dimensionGroups={dimensionGroups}
@@ -27,7 +27,7 @@ export default function ProductDimensions({
 			showDimensionError={showDimensionError}
 		>
 			{dimensionGroups.map((group, i) => (
-				<Dimensions.Group dimensions={group} key={i}>
+				<Dimensions.Group dimensions={group} key={`dim-grp-${i + 1}`}>
 					<Dimensions.Group.Label />
 					<Dimensions.Group.List />
 					<Dimensions.Group.Error />

package/src/components-v2/product-dimensions/utils/has-selected-dimension.ts

@@ -1,4 +1,4 @@
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 
 /**
  * Checks if dimension exists

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

@@ -1,6 +1,7 @@
 // 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 React from "react";
 import { QuantityButtons } from "./compound/quantity-buttons-root";
 
 const meta = {

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

@@ -1,16 +1,16 @@
 /**
  * @module ProductQuantityButtons
  */
-import React, { createContext, useContext, ReactNode } 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";
+import type { CartLine } from "@msdyn365-commerce/retail-proxy";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import { useTranslations } from "next-intl";
+import React, { createContext, type ReactNode, useContext } from "react";
+import { MdAdd as Add, MdRemove as Remove } from "react-icons/md";
 // TODO: Encapsulate the addToCart api calls inside this component
 // so no need to pass in props.
 
@@ -84,7 +84,7 @@ export function QuantityButtons({
 	isOOS = false,
 	customAddToCart,
 	children,
-}: QuantityButtonProps) {
+}: Readonly<QuantityButtonProps>) {
 	const t = useTranslations("productDetail");
 
 	const { handleAddToCart, handleCartAmountChange, loading, currentCartLine } =

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

@@ -2,9 +2,12 @@
  * @component
  * @category Implementation component
  */
+
+import {
+	type QuantityButtonProps,
+	QuantityButtons,
+} from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
 import React from "react";
-import { QuantityButtons } from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
-import { QuantityButtonProps } from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
 
 /**
  * Pre-composed version of quantity buttons.

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

@@ -1,8 +1,9 @@
 // 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 React from "react";
 import { product } from "../../../__mocks__/product-dimensions";
+import QuantityButtons from "./index";
 
 const meta = {
 	title: "Product/DimensionsQuantitySelector",

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

@@ -1,21 +1,19 @@
 "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 "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { 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";
+// LOCAL COMPONENTS
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+// GLOBAL CUSTOM COMPONENTS
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import useCart, {
-	AddToCartBopisInput,
+	type AddToCartBopisInput,
 } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 
-// LOCAL COMPONENTS
-import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+// LOCAL HOOKS
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import Box from "@mui/material/Box";
+import { useState } from "react";
 
 interface Props {
 	product: ProductDetails;
@@ -29,7 +27,7 @@ interface Props {
  * 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) {
+export default function QuantityVariantsSelect({ product }: Readonly<Props>) {
 	const [showDimensionError, setShowDimensionError] = useState(false);
 
 	const { DimensionValues, RecordId } = product;
@@ -41,7 +39,9 @@ export default function QuantityVariantsSelect({ product }: Props) {
 		allDimensionsSelected,
 	} = useVariants(product);
 
-	const { handleAddToCart } = useCart(selectedVariant?.RecordId);
+	const productId = selectedVariant?.RecordId ?? RecordId;
+
+	const { handleAddToCart } = useCart(productId);
 
 	const searchCriteria = {
 		searchCriteria: {
@@ -61,7 +61,6 @@ export default function QuantityVariantsSelect({ product }: Props) {
 		const OOSCode = "OOS"; // Always means out of stock
 
 		const aggregateCode =
-			shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
 			shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0]
 				?.TotalAvailableInventoryLevelCode;
 

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

@@ -1,8 +1,9 @@
 // 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 React from "react";
 import { data, prices } from "../../../__mocks__/products";
+import { ProductsGrid } from "./index";
 
 const meta = {
 	title: "Product/ListGrid",

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

@@ -1,10 +1,9 @@
 // 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 React from "react";
 import { data, prices } from "../../../__mocks__/products";
-//import { useSession } from "next-auth/react";
-import { expect, mocked } from "storybook/test";
+import { ProductsList } from "./index";
 
 const meta = {
 	title: "Product/ListList",