@evenicanpm/storefront-core 2.4.1 → 2.5.0

package/src/pages/checkout/checkout-alt-form/steps/payment/payment-details.tsx

@@ -58,7 +58,7 @@ type PaymentDetailsCompound = React.FC<CheckoutStepComponentProps> & {
 		selectedPaymentMethod: PaymentMethod;
 	}>;
 	Form: React.FC<{
-		iframeReference: React.RefObject<HTMLIFrameElement>;
+		iframeReference: React.RefObject<HTMLIFrameElement | null>;
 		iframeHeight: number;
 		errorState: PaymentError[];
 		paymentAcceptPointData: CardPaymentAcceptPoint | null | undefined;
@@ -111,7 +111,7 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 
 	const { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
 	const iframeReference = React.useRef<HTMLIFrameElement>(null);
-	const [iframeHeight, setIFrameHeight] = React.useState<number>(1);
+	const [iframeHeight, setIframeHeight] = React.useState<number>(1);
 	const [errorState, setErrorState] = React.useState<PaymentError[]>([]);
 
 	const paymentConnectorMessage = React.useCallback(
@@ -182,7 +182,9 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 			switch (type) {
 				case PaymentConnectorPostMessageType.Height: {
 					// Payment connector posts height after initialization
-					setIFrameHeight(value as number);
+					if (typeof value === "number") {
+						setIframeHeight(value);
+					}
 					postMessageToIframe(
 						paymentConnectorMessage(
 							cart.TotalAmount.toString(),
@@ -194,7 +196,7 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 				case PaymentConnectorPostMessageType.Result: {
 					try {
 						if (typeof value !== "string") {
-							throw new Error("Invalid payment result access code");
+							throw new TypeError("Invalid payment result access code");
 						}
 						await handleResultsAccessCode(value);
 						setStepSubmissionState("idle");
@@ -363,7 +365,10 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 	);
 };
 
-PaymentDetails.Preview = ({ paymentAcceptResult, selectedPaymentMethod }) => {
+const PaymentDetailsPreview = ({
+	paymentAcceptResult,
+	selectedPaymentMethod,
+}) => {
 	const t = useTranslations("Checkout.Payment");
 
 	if (selectedPaymentMethod === "on-account") {
@@ -422,7 +427,9 @@ PaymentDetails.Preview = ({ paymentAcceptResult, selectedPaymentMethod }) => {
 	);
 };
 
-PaymentDetails.Form = ({
+PaymentDetails.Preview = PaymentDetailsPreview;
+
+const PaymentDetailsForm = ({
 	iframeReference,
 	iframeHeight,
 	errorState,
@@ -468,4 +475,6 @@ PaymentDetails.Form = ({
 	);
 };
 
+PaymentDetails.Form = PaymentDetailsForm;
+
 export default PaymentDetails;

package/src/pages/checkout/checkout-alt-form/steps/shipping/delivery-options.tsx

@@ -173,7 +173,7 @@ const DeliveryOptions: DeliveryOptionsCompound = (props) => {
 	);
 };
 
-DeliveryOptions.Preview = ({ deliveryOptions, selectedOption }) => {
+const DeliveryOptionsPreview = ({ deliveryOptions, selectedOption }) => {
 	const { formatCurrency } = useCurrencyFormatter();
 	const deliveryOption = deliveryOptions.find(
 		(dlv) => dlv.Code === selectedOption,
@@ -189,7 +189,9 @@ DeliveryOptions.Preview = ({ deliveryOptions, selectedOption }) => {
 	);
 };
 
-DeliveryOptions.Form = ({
+DeliveryOptions.Preview = DeliveryOptionsPreview;
+
+const DeliveryOptionsForm = ({
 	deliveryOptions,
 	deliveryUnavailable,
 	selectedOption,
@@ -240,4 +242,6 @@ DeliveryOptions.Form = ({
 	);
 };
 
+DeliveryOptions.Form = DeliveryOptionsForm;
+
 export default DeliveryOptions;

package/src/pages/checkout/checkout-alt-summary/cart-item.tsx

@@ -7,7 +7,7 @@ import {
 	Span,
 } from "@evenicanpm/storefront-core/src/components/Typography";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 interface CartItemContextValue {
 	cartLine: CartLine;
@@ -20,8 +20,12 @@ interface CartItemProps {
 }
 const CartItem = ({ cartLine, children }: CartItemProps) => {
 	const { formatCurrency } = useCurrencyFormatter();
+	const contextValue = useMemo(
+		() => ({ cartLine, formatCurrency }),
+		[cartLine, formatCurrency],
+	);
 	return (
-		<CartItemContext.Provider value={{ cartLine, formatCurrency }}>
+		<CartItemContext.Provider value={contextValue}>
 			<FlexBetween mb={1.5}>
 				{children ?? (
 					<>
@@ -34,7 +38,7 @@ const CartItem = ({ cartLine, children }: CartItemProps) => {
 	);
 };
 
-CartItem.Description = () => {
+const CartItemDescription = () => {
 	const ctx = useContext(CartItemContext);
 	if (!ctx) return null;
 	const { cartLine } = ctx;
@@ -46,7 +50,9 @@ CartItem.Description = () => {
 	);
 };
 
-CartItem.Price = () => {
+CartItem.Description = CartItemDescription;
+
+const CartItemPrice = () => {
 	const ctx = useContext(CartItemContext);
 	if (!ctx) return null;
 	const { cartLine, formatCurrency } = ctx;
@@ -69,4 +75,6 @@ CartItem.Price = () => {
 	);
 };
 
+CartItem.Price = CartItemPrice;
+
 export default CartItem;

package/src/pages/checkout/checkout-alt-summary/checkout-alt-summary.tsx

@@ -13,7 +13,7 @@ import ListItem from "@evenicanpm/storefront-core/src/pages/checkout/checkout-al
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import { useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 interface Props {
 	cart: Cart;
@@ -29,15 +29,16 @@ const CheckoutAltSummaryContext =
 
 const CheckoutAltSummary = ({ cart, children }: Props) => {
 	const t = useTranslations("Checkout.Summary");
+	const contextValue = useMemo(() => ({ cart, t }), [cart, t]);
 
 	return (
-		<CheckoutAltSummaryContext.Provider value={{ cart, t }}>
+		<CheckoutAltSummaryContext.Provider value={contextValue}>
 			<div>{children}</div>
 		</CheckoutAltSummaryContext.Provider>
 	);
 };
 
-CheckoutAltSummary.Title = () => {
+const CheckoutAltSummaryTitle = () => {
 	const ctx = useContext(CheckoutAltSummaryContext);
 	if (!ctx) return null;
 	const { t } = ctx;
@@ -48,7 +49,9 @@ CheckoutAltSummary.Title = () => {
 	);
 };
 
-CheckoutAltSummary.CartItems = () => {
+CheckoutAltSummary.Title = CheckoutAltSummaryTitle;
+
+const CheckoutAltSummaryCartItems = () => {
 	const ctx = useContext(CheckoutAltSummaryContext);
 	if (!ctx) return null;
 	const { cart } = ctx;
@@ -61,11 +64,13 @@ CheckoutAltSummary.CartItems = () => {
 	);
 };
 
+CheckoutAltSummary.CartItems = CheckoutAltSummaryCartItems;
+
 CheckoutAltSummary.Divider = (props: { sx?: object }) => {
 	return <Box component={Divider} borderColor="grey.300" {...props} />;
 };
 
-CheckoutAltSummary.ListItem = ({
+const CheckoutAltSummaryListItem = ({
 	cartKey,
 	titleKey,
 	color,
@@ -89,4 +94,6 @@ CheckoutAltSummary.ListItem = ({
 	);
 };
 
+CheckoutAltSummary.ListItem = CheckoutAltSummaryListItem;
+
 export default CheckoutAltSummary;

package/src/pages/checkout/checkout-alt-summary/list-item.tsx

@@ -1,7 +1,7 @@
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 interface ListItemProps {
 	title: string;
@@ -30,13 +30,16 @@ const ListItem = ({
 }: ListItemProps) => {
 	const { formatCurrency } = useCurrencyFormatter();
 
-	const contextValue: ListItemContextValue = {
-		title,
-		value,
-		mb,
-		color,
-		formatCurrency,
-	};
+	const contextValue: ListItemContextValue = useMemo(
+		() => ({
+			title,
+			value,
+			mb,
+			color,
+			formatCurrency,
+		}),
+		[title, value, mb, color, formatCurrency],
+	);
 
 	return (
 		<ListItemContext.Provider value={contextValue}>
@@ -52,14 +55,16 @@ const ListItem = ({
 	);
 };
 
-ListItem.Title = () => {
+const ListItemTitle = () => {
 	const ctx = useContext(ListItemContext);
 	if (!ctx) return null;
 	const { title, color } = ctx;
 	return <Paragraph color={color}>{title}:</Paragraph>;
 };
 
-ListItem.Value = () => {
+ListItem.Title = ListItemTitle;
+
+const ListItemValue = () => {
 	const ctx = useContext(ListItemContext);
 	if (!ctx) return null;
 	const { value, formatCurrency } = ctx;
@@ -70,4 +75,6 @@ ListItem.Value = () => {
 	);
 };
 
+ListItem.Value = ListItemValue;
+
 export default ListItem;

package/src/pages/confirmation/address.tsx

@@ -24,7 +24,7 @@ const OrderAddress = ({ address, children }: Props) => {
 	);
 };
 
-OrderAddress.Heading = ({ children }: { children?: ReactNode }) => {
+const OrderAddressHeading = ({ children }: { children?: ReactNode }) => {
 	const t = useTranslations("Address");
 	return (
 		<H5 mt={0} mb={2}>
@@ -33,7 +33,9 @@ OrderAddress.Heading = ({ children }: { children?: ReactNode }) => {
 	);
 };
 
-OrderAddress.Field = ({
+OrderAddress.Heading = OrderAddressHeading;
+
+const OrderAddressField = ({
 	property,
 }: {
 	property: Exclude<keyof Address, "ExtensionProperties">;
@@ -48,4 +50,6 @@ OrderAddress.Field = ({
 	return <Paragraph>{value}</Paragraph>;
 };
 
+OrderAddress.Field = OrderAddressField;
+
 export default OrderAddress;

package/src/pages/confirmation/confirmation-summary.tsx

@@ -12,7 +12,7 @@ import {
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import { Card, Divider } from "@mui/material";
 import { useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 type SummaryValues = {
 	order: SalesOrder;
@@ -26,9 +26,13 @@ type Props = SummaryValues & { children?: ReactNode };
 
 const OrderSummary = ({ order, children }: Props) => {
 	const { formatCurrency } = useCurrencyFormatter();
+	const contextValue = useMemo(
+		() => ({ order, formatCurrency }),
+		[order, formatCurrency],
+	);
 
 	return (
-		<SummaryContext.Provider value={{ order, formatCurrency }}>
+		<SummaryContext.Provider value={contextValue}>
 			<Card sx={{ px: 3, mb: "30px" }}>
 				{children ?? (
 					<>
@@ -51,7 +55,7 @@ type ItemProps = {
 	field: keyof SalesOrder;
 };
 
-OrderSummary.Title = () => {
+const OrderSummaryTitle = () => {
 	const t = useTranslations("Confirmation");
 	return (
 		<FlexBox
@@ -66,7 +70,9 @@ OrderSummary.Title = () => {
 	);
 };
 
-OrderSummary.Item = ({ label, field }: ItemProps) => {
+OrderSummary.Title = OrderSummaryTitle;
+
+const OrderSummaryItem = ({ label, field }: ItemProps) => {
 	const ctx = useContext(SummaryContext);
 	const t = useTranslations("Checkout.Summary");
 	if (!ctx) return null;
@@ -88,6 +94,8 @@ OrderSummary.Item = ({ label, field }: ItemProps) => {
 	);
 };
 
+OrderSummary.Item = OrderSummaryItem;
+
 OrderSummary.Divider = (props: { sx?: object }) => {
 	return <Divider {...props} />;
 };

package/src/pages/confirmation/ordered-products.tsx

@@ -33,7 +33,7 @@ export const OrderedProducts = ({ order, children }: Props) => {
 	);
 };
 
-OrderedProducts.Header = () => {
+const OrderedProductsHeader = () => {
 	const ctx = useContext(OrderedProductsContext);
 	const t = useTranslations("Confirmation");
 	const { dateTime } = useFormatter();
@@ -68,6 +68,8 @@ OrderedProducts.Header = () => {
 	);
 };
 
+OrderedProducts.Header = OrderedProductsHeader;
+
 OrderedProducts.List = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<Grid container spacing={2} alignItems="center" padding="15px 5px">
@@ -100,7 +102,7 @@ OrderedProducts.Info = ({ children }: { children: React.ReactNode }) => {
 	return <div>{children}</div>;
 };
 
-OrderedProducts.Title = ({ line }: LineProps) => {
+const OrderedProductsTitle = ({ line }: LineProps) => {
 	const { formatCurrency } = useCurrencyFormatter();
 	return (
 		<>
@@ -112,7 +114,9 @@ OrderedProducts.Title = ({ line }: LineProps) => {
 	);
 };
 
-OrderedProducts.Comment = ({ line }: LineProps) => {
+OrderedProducts.Title = OrderedProductsTitle;
+
+const OrderedProductsComment = ({ line }: LineProps) => {
 	const t = useTranslations("Confirmation");
 	if (!line.Comment) return null;
 	return (
@@ -125,6 +129,8 @@ OrderedProducts.Comment = ({ line }: LineProps) => {
 	);
 };
 
+OrderedProducts.Comment = OrderedProductsComment;
+
 OrderedProducts.Dimensions = ({ line }: LineProps) => {
 	if (!line.Product?.Dimensions?.length) return <Box />;
 	return (
@@ -139,7 +145,7 @@ OrderedProducts.Dimensions = ({ line }: LineProps) => {
 	);
 };
 
-OrderedProducts.Total = ({ line }: LineProps) => {
+const OrderedProductsTotal = ({ line }: LineProps) => {
 	const { formatCurrency } = useCurrencyFormatter();
 	return (
 		<Grid size={{ xs: 4, sm: 2 }}>
@@ -150,4 +156,6 @@ OrderedProducts.Total = ({ line }: LineProps) => {
 	);
 };
 
+OrderedProducts.Total = OrderedProductsTotal;
+
 export default OrderedProducts;

package/src/pages/product-details/bopis/store-card/shop-card.tsx

@@ -14,7 +14,7 @@ import {
 // STYLED COMPONENT
 import { ContentWrapper } from "@evenicanpm/storefront-core/src/pages/product-details/bopis/store-card/styles";
 import { convertSecondsToTime } from "@evenicanpm/storefront-core/src/pages/product-details/bopis/store-card/utils/convertSecondsToTime";
-import { getDaysResources } from "@evenicanpm/storefront-core/src/pages/product-details/bopis/store-card/utils/getDaysResources";
+import { useDaysResources } from "@evenicanpm/storefront-core/src/pages/product-details/bopis/store-card/utils/getDaysResources";
 import type {
 	ProductWarehouseInventoryAvailability,
 	StoreHours,
@@ -39,7 +39,7 @@ export default function ShopCard(props: Readonly<Props>) {
 	const { name, address, actionArea, openFrom, openTo, storeHours } =
 		props || {};
 
-	const resources = getDaysResources();
+	const resources = useDaysResources();
 
 	const renderStoreHours = () => {
 		if (storeHours?.RegularStoreHours) {

package/src/pages/product-details/bopis/store-card/utils/getDaysResources.ts

@@ -1,7 +1,7 @@
 import type { IStoreSelectorLocationLineItemResources } from "@evenicanpm/storefront-core/src/lib/store-hours-helper";
 import { useTranslations } from "next-intl";
 
-export const getDaysResources = (): IStoreSelectorLocationLineItemResources => {
+export const useDaysResources = (): IStoreSelectorLocationLineItemResources => {
 	const daysTrans = useTranslations("StoreHours");
 	return {
 		days: {

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

@@ -13,7 +13,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import Rating from "@mui/material/Rating";
 import type React from "react";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 
 // D365
 
@@ -81,18 +81,27 @@ const ProductInfo = ({ children }: Props) => {
 		!productPrices ||
 		variantPending ||
 		(allDimensionsSelected && inventoryPending);
+	const contextValue = useMemo(
+		() => ({
+			hasVariants,
+			isProductDetailsPending,
+			productPrices,
+			shippingInventoryData,
+			showDimensionError,
+			setShowDimensionError,
+		}),
+		[
+			hasVariants,
+			isProductDetailsPending,
+			productPrices,
+			shippingInventoryData,
+			showDimensionError,
+			setShowDimensionError,
+		],
+	);
 
 	return (
-		<ProductInfoContext.Provider
-			value={{
-				hasVariants,
-				isProductDetailsPending,
-				productPrices,
-				shippingInventoryData,
-				showDimensionError,
-				setShowDimensionError,
-			}}
-		>
+		<ProductInfoContext.Provider value={contextValue}>
 			<Grid size={{ md: 6, xs: 12 }} alignItems="center">
 				{children}
 			</Grid>
@@ -103,7 +112,7 @@ const ProductInfo = ({ children }: Props) => {
 /**
  * @category Sub-Component
  */
-ProductInfo.Name = () => {
+const ProductInfoName = () => {
 	const IntroCtx = useProductIntro();
 	if (!IntroCtx)
 		throw new Error(
@@ -113,10 +122,12 @@ ProductInfo.Name = () => {
 	return <H1 mb={1}>{masterProduct.Name}</H1>;
 };
 
+ProductInfo.Name = ProductInfoName;
+
 /**
  * @category Sub-Component
  */
-ProductInfo.Sku = () => {
+const ProductInfoSku = () => {
 	const IntroCtx = useProductIntro();
 	if (!IntroCtx)
 		throw new Error(
@@ -130,10 +141,12 @@ ProductInfo.Sku = () => {
 	);
 };
 
+ProductInfo.Sku = ProductInfoSku;
+
 /**
  * @category Sub-Component
  */
-ProductInfo.Sku = () => {
+const ProductInfoRating = () => {
 	return (
 		<FlexBox alignItems="center" gap={1} mb={2}>
 			<Box lineHeight="1">Rated:</Box>
@@ -143,10 +156,12 @@ ProductInfo.Sku = () => {
 	);
 };
 
+ProductInfo.Rating = ProductInfoRating;
+
 /**
  * @category Sub-Component
  */
-ProductInfo.Dimensions = () => {
+const ProductInfoDimensions = () => {
 	const InfoCtx = useContext(ProductInfoContext);
 	const IntroCtx = useProductIntro();
 	if (!InfoCtx || !IntroCtx)
@@ -170,7 +185,9 @@ ProductInfo.Dimensions = () => {
 	);
 };
 
-ProductInfo.Price = () => {
+ProductInfo.Dimensions = ProductInfoDimensions;
+
+const ProductInfoPrice = () => {
 	const { formatCurrency } = useCurrencyFormatter();
 	const { isProductDetailsPending, productPrices } = useProductInfo();
 
@@ -188,10 +205,12 @@ ProductInfo.Price = () => {
 	);
 };
 
+ProductInfo.Price = ProductInfoPrice;
+
 /**
  * @category Sub-Component
  */
-ProductInfo.Inventory = () => {
+const ProductInfoInventory = () => {
 	const InfoCtx = useContext(ProductInfoContext);
 	const IntroCtx = useProductIntro();
 	if (!InfoCtx || !IntroCtx)
@@ -227,12 +246,14 @@ ProductInfo.Inventory = () => {
 	);
 };
 
+ProductInfo.Inventory = ProductInfoInventory;
+
 /**
  * These are grouped together because they have similar functionality and callbacks
  * addToCart Etc
  * @category Sub-Component
  */
-ProductInfo.Buttons = () => {
+const ProductInfoButtons = () => {
 	const { masterProduct, selectedVariant, allDimensionsSelected } =
 		useProductIntro();
 	const { setShowDimensionError, shippingInventoryData, hasVariants } =
@@ -282,4 +303,6 @@ ProductInfo.Buttons = () => {
 	);
 };
 
+ProductInfo.Buttons = ProductInfoButtons;
+
 export default ProductInfo;

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

@@ -13,7 +13,7 @@ import ThumbnailWithSkeleton from "@evenicanpm/storefront-core/src/pages/product
 import Grid from "@mui/material/Grid2";
 import Skeleton from "@mui/material/Skeleton";
 import type React from "react";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 
 type Props = {
 	children: React.ReactNode;
@@ -56,17 +56,19 @@ export default function ProductImages({ children }: Readonly<Props>) {
 	const handleImageClick = (ind: number) => () => {
 		setSelectedImageIndex(ind);
 	};
+	const contextValue = useMemo(
+		() => ({
+			name: Name,
+			selectedImageIndex,
+			images,
+			handleImageClick,
+			primaryImageUrl,
+		}),
+		[Name, selectedImageIndex, images, handleImageClick, primaryImageUrl],
+	);
 
 	return (
-		<ProductImagesContext.Provider
-			value={{
-				name: Name,
-				selectedImageIndex,
-				images,
-				handleImageClick,
-				primaryImageUrl,
-			}}
-		>
+		<ProductImagesContext.Provider value={contextValue}>
 			<Grid size={{ md: 6, xs: 12 }} alignItems="center">
 				{children}
 			</Grid>
@@ -78,7 +80,7 @@ export default function ProductImages({ children }: Readonly<Props>) {
  * The image gallery thumbnails, when clicked switches the main image.
  * @category Sub-Component
  */
-ProductImages.Thumbnails = () => {
+const ProductImagesThumbnails = () => {
 	const ctx = useContext(ProductImagesContext);
 	if (!ctx)
 		throw new Error(
@@ -113,12 +115,14 @@ ProductImages.Thumbnails = () => {
 	);
 };
 
+ProductImages.Thumbnails = ProductImagesThumbnails;
+
 /**
  * Main large image on PDP that displays currently selected image from
  * product details.
  * @category Sub-Component
  */
-ProductImages.Main = () => {
+const ProductImagesMain = () => {
 	const ctx = useContext(ProductImagesContext);
 	if (!ctx)
 		throw new Error(
@@ -162,3 +166,5 @@ ProductImages.Main = () => {
 		</FlexBox>
 	);
 };
+
+ProductImages.Main = ProductImagesMain;

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

@@ -7,6 +7,7 @@ import ProductImages from "@evenicanpm/storefront-core/src/pages/product-details
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import type React from "react";
+import { useMemo } from "react";
 
 /**
  * Master product data comes in as prop, selected variant details are called
@@ -23,18 +24,27 @@ export default function ProductIntro({ product, children }: Readonly<Props>) {
 		allDimensionsSelected,
 		variantPending,
 	} = useVariants(product);
+	const contextValue = useMemo(
+		() => ({
+			masterProduct: product,
+			allDimensionsSelected,
+			variantPending,
+			selectedVariant,
+			selectDimensions,
+			handleChangeVariant,
+		}),
+		[
+			product,
+			allDimensionsSelected,
+			variantPending,
+			selectedVariant,
+			selectDimensions,
+			handleChangeVariant,
+		],
+	);
 
 	return (
-		<ProductIntroContext.Provider
-			value={{
-				masterProduct: product,
-				allDimensionsSelected,
-				variantPending,
-				selectedVariant,
-				selectDimensions,
-				handleChangeVariant,
-			}}
-		>
+		<ProductIntroContext.Provider value={contextValue}>
 			<Box width="100%">
 				<Grid container spacing={3} justifyContent="space-around">
 					{children}