@evenicanpm/storefront-core 2.4.1 → 2.5.0

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

@@ -26,7 +26,13 @@ import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
 import IconButton from "@mui/material/IconButton";
 import Rating from "@mui/material/Rating";
 import Link from "next/link";
-import { createContext, type ReactNode, useContext, useState } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
 
 type Product = {
 	title: string;
@@ -52,11 +58,13 @@ type ProductCardPlpProps = {
 const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
 	const [openProductModal, setOpenProductModal] = useState(false);
 	const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+	const contextValue = useMemo(
+		() => ({ product, setOpenAddToWishlistDialog, setOpenProductModal }),
+		[product],
+	);
 
 	return (
-		<ProductCardPlpContext.Provider
-			value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
-		>
+		<ProductCardPlpContext.Provider value={contextValue}>
 			<div>{children}</div>
 			{openAddToWishlistDialog && (
 				<AddToWishlistDialog
@@ -76,7 +84,7 @@ const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
 	);
 };
 
-ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
+const ImageWrapper = ({ children }: { children: React.ReactNode }) => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -91,7 +99,7 @@ ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-ProductCardPlp.Image = () => {
+const PlpImage = () => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -112,19 +120,19 @@ ProductCardPlp.Image = () => {
 	);
 };
 
-ProductCardPlp.Body = ({ children }: { children: React.ReactNode }) => {
+const PlpBody = ({ children }: { children: React.ReactNode }) => {
 	return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
 };
 
-ProductCardPlp.Info = ({ children }: { children: React.ReactNode }) => {
+const PlpInfo = ({ children }: { children: React.ReactNode }) => {
 	return <div>{children}</div>;
 };
 
-ProductCardPlp.Actions = ({ children }: { children: React.ReactNode }) => {
+const PlpActions = ({ children }: { children: React.ReactNode }) => {
 	return <>{children}</>;
 };
 
-ProductCardPlp.Title = () => {
+const PlpTitle = () => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -138,7 +146,7 @@ ProductCardPlp.Title = () => {
 	);
 };
 
-ProductCardPlp.Rating = () => {
+const PlpRating = () => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -147,7 +155,7 @@ ProductCardPlp.Rating = () => {
 	return <Rating readOnly value={rating} size="small" precision={0.5} />;
 };
 
-ProductCardPlp.Price = () => {
+const PlpPrice = () => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -168,13 +176,13 @@ ProductCardPlp.Price = () => {
 	);
 };
 
-ProductCardPlp.HoverActions = ({ children }: { children: React.ReactNode }) => {
+const HoverActions = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
 	);
 };
 
-ProductCardPlp.QuickViewButton = () => {
+const QuickViewButton = () => {
 	const ctx = useContext(ProductCardPlpContext);
 	if (!ctx) return null;
 
@@ -191,7 +199,7 @@ ProductCardPlp.QuickViewButton = () => {
 	);
 };
 
-ProductCardPlp.FavoriteButton = () => {
+const PlpFavoriteButton = () => {
 	const ctx = useContext(ProductCardPlpContext);
 
 	const id = ctx?.product?.id;
@@ -210,7 +218,7 @@ ProductCardPlp.FavoriteButton = () => {
 };
 // Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
 // So hide them for now, implement based on client requirements.
-ProductCardPlp.QuantityButtons = () => {
+const PlpQuantityButtons = () => {
 	const ctx = useContext(ProductCardPlpContext);
 
 	const id = ctx?.product?.id;
@@ -243,4 +251,17 @@ ProductCardPlp.QuantityButtons = () => {
 	);
 };
 
+ProductCardPlp.ImageWrapper = ImageWrapper;
+ProductCardPlp.Image = PlpImage;
+ProductCardPlp.Body = PlpBody;
+ProductCardPlp.Info = PlpInfo;
+ProductCardPlp.Actions = PlpActions;
+ProductCardPlp.Title = PlpTitle;
+ProductCardPlp.Rating = PlpRating;
+ProductCardPlp.Price = PlpPrice;
+ProductCardPlp.HoverActions = HoverActions;
+ProductCardPlp.QuickViewButton = QuickViewButton;
+ProductCardPlp.FavoriteButton = PlpFavoriteButton;
+ProductCardPlp.QuantityButtons = PlpQuantityButtons;
+
 export default ProductCardPlp;

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

@@ -19,7 +19,13 @@ 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";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled(Card)({
@@ -83,10 +89,13 @@ type ProductCardPlpListProps = {
 const ProductCardPlpList = ({ product, children }: ProductCardPlpListProps) => {
 	const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
 	const [openProductModal, setOpenProductModal] = useState(false);
+	const contextValue = useMemo(
+		() => ({ product, setOpenAddToWishlistDialog, setOpenProductModal }),
+		[product],
+	);
+
 	return (
-		<ProductCardPlpListContext.Provider
-			value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
-		>
+		<ProductCardPlpListContext.Provider value={contextValue}>
 			<Wrapper>{children}</Wrapper>
 			{openProductModal && (
 				<ProductViewDialog
@@ -106,7 +115,7 @@ const ProductCardPlpList = ({ product, children }: ProductCardPlpListProps) => {
 	);
 };
 
-ProductCardPlpList.QuickViewButton = () => {
+const QuickViewButton = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -122,11 +131,11 @@ ProductCardPlpList.QuickViewButton = () => {
 	);
 };
 
-ProductCardPlpList.Body = ({ children }: { children: React.ReactNode }) => {
+const Body = ({ children }: { children: React.ReactNode }) => {
 	return <ContentWrapper>{children}</ContentWrapper>;
 };
 
-ProductCardPlpList.Image = () => {
+const Image = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -146,19 +155,19 @@ ProductCardPlpList.Image = () => {
 	);
 };
 
-ProductCardPlpList.Content = ({ children }: { children: React.ReactNode }) => {
+const Content = ({ children }: { children: React.ReactNode }) => {
 	return <div className="content">{children}</div>;
 };
 
-ProductCardPlpList.Info = ({ children }: { children: React.ReactNode }) => {
+const Info = ({ children }: { children: React.ReactNode }) => {
 	return <div>{children}</div>;
 };
 
-ProductCardPlpList.Actions = ({ children }: { children: React.ReactNode }) => {
+const Actions = ({ children }: { children: React.ReactNode }) => {
 	return <>{children}</>;
 };
 
-ProductCardPlpList.Tags = () => {
+const Tags = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -167,7 +176,7 @@ ProductCardPlpList.Tags = () => {
 	return <ProductTags tags={tags} />;
 };
 
-ProductCardPlpList.Title = () => {
+const Title = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -181,7 +190,7 @@ ProductCardPlpList.Title = () => {
 	);
 };
 
-ProductCardPlpList.Rating = () => {
+const ProductRating = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -190,7 +199,7 @@ ProductCardPlpList.Rating = () => {
 	return <Rating size="small" value={rating} color="warn" readOnly />;
 };
 
-ProductCardPlpList.Price = () => {
+const Price = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 	if (!ctx) return null;
 
@@ -199,7 +208,7 @@ ProductCardPlpList.Price = () => {
 	return <ProductPrice price={price} discount={discount ?? 0} />;
 };
 
-ProductCardPlpList.FavoriteButton = () => {
+const PlpFavoriteButton = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 
 	const id = ctx?.product?.id;
@@ -219,7 +228,7 @@ ProductCardPlpList.FavoriteButton = () => {
 
 // Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
 // So hide them for now, implement based on client requirements.
-ProductCardPlpList.QuantityButtons = () => {
+const PlpQuantityButtons = () => {
 	const ctx = useContext(ProductCardPlpListContext);
 
 	const id = ctx?.product?.id;
@@ -252,4 +261,17 @@ ProductCardPlpList.QuantityButtons = () => {
 	);
 };
 
+ProductCardPlpList.QuickViewButton = QuickViewButton;
+ProductCardPlpList.Body = Body;
+ProductCardPlpList.Image = Image;
+ProductCardPlpList.Content = Content;
+ProductCardPlpList.Info = Info;
+ProductCardPlpList.Actions = Actions;
+ProductCardPlpList.Tags = Tags;
+ProductCardPlpList.Title = Title;
+ProductCardPlpList.Rating = ProductRating;
+ProductCardPlpList.Price = Price;
+ProductCardPlpList.FavoriteButton = PlpFavoriteButton;
+ProductCardPlpList.QuantityButtons = PlpQuantityButtons;
+
 export default ProductCardPlpList;

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

@@ -26,7 +26,13 @@ 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";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
 
 type Product = {
 	slug: string;
@@ -56,10 +62,13 @@ const ProductCardSearch = ({ product, children }: ProductCardSearchProps) => {
 	const handleToggleProductModal = () => {
 		setOpenProductModal((prev) => !prev);
 	};
+	const contextValue = useMemo(
+		() => ({ product, handleToggleProductModal, setOpenAddToWishlistDialog }),
+		[product, handleToggleProductModal],
+	);
+
 	return (
-		<ProductCardSearchContext.Provider
-			value={{ product, handleToggleProductModal, setOpenAddToWishlistDialog }}
-		>
+		<ProductCardSearchContext.Provider value={contextValue}>
 			<Card>{children}</Card>
 			{openProductModal && (
 				<ProductViewDialog
@@ -81,10 +90,11 @@ const ProductCardSearch = ({ product, children }: ProductCardSearchProps) => {
 
 // ===== Subcomponents =====
 
-ProductCardSearch.CardMedia = ({ children }: { children: React.ReactNode }) => {
+const SearchCardMedia = ({ children }: { children: React.ReactNode }) => {
 	return <CardMedia>{children}</CardMedia>;
 };
-ProductCardSearch.Image = () => {
+
+const SearchImage = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 	const { product } = ctx;
@@ -102,14 +112,15 @@ ProductCardSearch.Image = () => {
 	);
 };
 
-ProductCardSearch.Info = ({ children }: { children: React.ReactNode }) => {
+const SearchInfo = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<Box p={1} textAlign="center">
 			{children}
 		</Box>
 	);
 };
-ProductCardSearch.Category = () => {
+
+const SearchCategory = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 	const { product } = ctx;
@@ -118,14 +129,14 @@ ProductCardSearch.Category = () => {
 	return <Small color="grey.500">{categories[0]}</Small>;
 };
 
-ProductCardSearch.Title = () => {
+const SearchTitle = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 	const { product } = ctx;
 	return <Paragraph fontWeight="bold">{product?.title}</Paragraph>;
 };
 
-ProductCardSearch.Price = () => {
+const SearchPrice = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 	const { product } = ctx;
@@ -136,7 +147,7 @@ ProductCardSearch.Price = () => {
 	);
 };
 
-ProductCardSearch.Rating = () => {
+const SearchRating = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 	const { product } = ctx;
@@ -155,7 +166,7 @@ ProductCardSearch.Rating = () => {
 	);
 };
 
-ProductCardSearch.QuickViewButton = () => {
+const SearchQuickViewButton = () => {
 	const ctx = useContext(ProductCardSearchContext);
 	if (!ctx) return null;
 
@@ -169,7 +180,7 @@ ProductCardSearch.QuickViewButton = () => {
 	);
 };
 
-ProductCardSearch.FavoriteButton = () => {
+const SearchFavoriteButton = () => {
 	const ctx = useContext(ProductCardSearchContext);
 
 	const id = ctx?.product?.id;
@@ -194,4 +205,14 @@ ProductCardSearch.FavoriteButton = () => {
 	);
 };
 
+ProductCardSearch.CardMedia = SearchCardMedia;
+ProductCardSearch.Image = SearchImage;
+ProductCardSearch.Info = SearchInfo;
+ProductCardSearch.Category = SearchCategory;
+ProductCardSearch.Title = SearchTitle;
+ProductCardSearch.Price = SearchPrice;
+ProductCardSearch.Rating = SearchRating;
+ProductCardSearch.QuickViewButton = SearchQuickViewButton;
+ProductCardSearch.FavoriteButton = SearchFavoriteButton;
+
 export default ProductCardSearch;

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

@@ -1,5 +1,6 @@
 import { Button } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
+import type React from "react";
 import { useArgs } from "storybook/internal/preview-api";
 import { data } from "../../../__mocks__/products";
 import ProductDialog from "./index";
@@ -13,25 +14,26 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof ProductDialog>;
 
-export const WithTrigger: Story = {
-	render: (args) => {
-		const [, setArgs] = useArgs();
+const WithTriggerRender = (
+	args: React.ComponentProps<typeof ProductDialog>,
+) => {
+	const [, setArgs] = useArgs();
 
-		return (
-			<>
-				<Button
-					variant="contained"
-					onClick={() => setArgs({ openDialog: true })}
-				>
-					Open Product Dialog
-				</Button>
-				<ProductDialog
-					{...args}
-					handleCloseDialog={() => setArgs({ openDialog: false })}
-				/>
-			</>
-		);
-	},
+	return (
+		<>
+			<Button variant="contained" onClick={() => setArgs({ openDialog: true })}>
+				Open Product Dialog
+			</Button>
+			<ProductDialog
+				{...args}
+				handleCloseDialog={() => setArgs({ openDialog: false })}
+			/>
+		</>
+	);
+};
+
+export const WithTrigger: Story = {
+	render: (args) => <WithTriggerRender {...args} />,
 	args: {
 		productId: Number(data.products[0].ItemId),
 		openDialog: false,

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

@@ -22,7 +22,7 @@ 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";
+import { createContext, type ReactElement, useContext, useMemo } from "react";
 
 /**
  * @category Props
@@ -92,11 +92,14 @@ export default function ProductDialog(props: Readonly<Props>) {
 	const { data: product } = getProductById.useSuspenseData({
 		id: Number(props.productId),
 	});
+	const contextValue = useMemo(
+		() => ({ product, openDialog, handleCloseDialog }),
+		[product, openDialog, handleCloseDialog],
+	);
 	if (!product) return null;
+
 	return (
-		<ProductDialogContext.Provider
-			value={{ product, openDialog, handleCloseDialog }}
-		>
+		<ProductDialogContext.Provider value={contextValue}>
 			<Dialog
 				open={openDialog}
 				maxWidth={false}

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

@@ -7,7 +7,7 @@ import { DimensionGroupLabel } from "@evenicanpm/storefront-core/src/components/
 import { DimensionGroupList } from "@evenicanpm/storefront-core/src/components/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";
+import { createContext, type PropsWithChildren, useMemo } from "react";
 
 /**
  * @category Props
@@ -42,8 +42,10 @@ export const DimensionGroup = ({
 	dimensions,
 	children,
 }: DimensionGroupProps) => {
+	const contextValue = useMemo(() => ({ dimensions }), [dimensions]);
+
 	return (
-		<DimensionsGroupContext.Provider value={{ dimensions }}>
+		<DimensionsGroupContext.Provider value={contextValue}>
 			<Box mb={2}>{children}</Box>
 		</DimensionsGroupContext.Provider>
 	);

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

@@ -5,6 +5,7 @@ import {
 	createContext,
 	type PropsWithChildren,
 	type ReactElement,
+	useMemo,
 } from "react";
 
 /**
@@ -69,12 +70,20 @@ export const Dimensions = ({
 	showDimensionError,
 	children,
 }: DimensionsProps): ReactElement => {
-	const contextValue = {
-		dimensionGroups,
-		selectDimensions,
-		handleChangeVariant,
-		showDimensionError,
-	};
+	const contextValue = useMemo(
+		() => ({
+			dimensionGroups,
+			selectDimensions,
+			handleChangeVariant,
+			showDimensionError,
+		}),
+		[
+			dimensionGroups,
+			selectDimensions,
+			handleChangeVariant,
+			showDimensionError,
+		],
+	);
 
 	return (
 		<DimensionsContext.Provider value={contextValue}>

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

@@ -9,7 +9,7 @@ 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 { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } 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.
@@ -90,6 +90,18 @@ export function QuantityButtons({
 	const { handleAddToCart, handleCartAmountChange, loading, currentCartLine } =
 		useCart(productId);
 
+	const value = useMemo<QuantityContextType | null>(() => {
+		if (!currentCartLine?.Quantity) return null;
+
+		return {
+			loading,
+			quantity: currentCartLine.Quantity,
+			isOOS,
+			productCartLine: currentCartLine,
+			handleCartAmountChange,
+		};
+	}, [loading, currentCartLine, isOOS, handleCartAmountChange]);
+
 	if (!currentCartLine || currentCartLine?.Quantity === 0) {
 		return (
 			<Button
@@ -105,15 +117,7 @@ export function QuantityButtons({
 		);
 	}
 
-	if (!currentCartLine?.Quantity) return null;
-
-	const value: QuantityContextType = {
-		loading,
-		quantity: currentCartLine?.Quantity,
-		isOOS,
-		productCartLine: currentCartLine,
-		handleCartAmountChange,
-	};
+	if (!value) return null;
 
 	return (
 		<QuantityContext.Provider value={value}>
@@ -126,7 +130,7 @@ export function QuantityButtons({
  * The remove/decrementor button that appears when the quantity is not 0
  * @category Sub-Component
  */
-QuantityButtons.Remove = () => {
+const RemoveButton = () => {
 	const { handleCartAmountChange, loading, productCartLine } = useQuantity();
 
 	return (
@@ -152,7 +156,7 @@ QuantityButtons.Remove = () => {
  * The add/incrementor button that appears when the quantity is not 0
  * @category Sub-Component
  */
-QuantityButtons.Add = () => {
+const AddButton = () => {
 	const { handleCartAmountChange, loading, productCartLine } = useQuantity();
 
 	return (
@@ -178,7 +182,7 @@ QuantityButtons.Add = () => {
  * The display component that shows the current quantity.
  * @category Sub-Component
  */
-QuantityButtons.Quantity = () => {
+const Quantity = () => {
 	const { loading, productCartLine } = useQuantity();
 	return (
 		<H3
@@ -194,3 +198,7 @@ QuantityButtons.Quantity = () => {
 		</H3>
 	);
 };
+
+QuantityButtons.Remove = RemoveButton;
+QuantityButtons.Add = AddButton;
+QuantityButtons.Quantity = Quantity;

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

@@ -16,7 +16,7 @@ import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/componen
 import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import Grid from "@mui/material/Grid2";
 import type React from "react";
-import { cloneElement } from "react";
+import { cloneElement, useMemo } from "react";
 
 /**
  * Root component of products grid view.
@@ -32,9 +32,13 @@ import { cloneElement } from "react";
  */
 export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
 	const { products, productPrices, pagination, children } = props;
+	const contextValue = useMemo(
+		() => ({ products, productPrices }),
+		[products, productPrices],
+	);
 
 	return (
-		<ProductsViewContext.Provider value={{ products, productPrices }}>
+		<ProductsViewContext.Provider value={contextValue}>
 			<Grid container spacing={3}>
 				{children}
 			</Grid>
@@ -52,7 +56,7 @@ export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsGridView.Grid = ({
+const ProductsGrid = ({
 	children,
 }: {
 	children: React.ReactElement<Record<string, unknown>>;
@@ -93,7 +97,7 @@ export interface ProductCardProps {
  * @param props.price The product price data.
  * @category Sub-Component
  */
-ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
+const ProductsGridCard = ({ product, price }: ProductCardProps) => {
 	if (!product) return null;
 	return (
 		<Grid size={{ lg: 4, sm: 6, xs: 12 }} key={product.ItemId}>
@@ -130,3 +134,6 @@ ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
 		</Grid>
 	);
 };
+
+ProductsGridView.Grid = ProductsGrid;
+ProductsGridView.Card = ProductsGridCard;