@evenicanpm/storefront-core 2.4.2 → 2.5.0

package/src/cms/blocks/components/featured-categories.tsx

@@ -19,21 +19,24 @@ const FeaturedCategories = (categoriesData: FeaturedCategoriesBlock) => {
 			<Container>
 				<h1 style={{ fontSize: "25px" }}>Best Selling Categories</h1>
 				<Grid container spacing={2}>
-					{categoriesData?.categories?.map((category: Category, i: number) => {
-						return (
-							<Grid
-								size={3}
-								display="flex"
-								justifyContent="center"
-								key={`category_index_${i}`}
-							>
-								<CategoryCard
-									name={category.name}
-									imgUrl={category?.image?.url}
-								></CategoryCard>
-							</Grid>
-						);
-					})}
+					{categoriesData?.categories?.map(
+						(category: Category, index: number) => {
+							const categoryKey = `${category.name || "category-item"}-${index}`;
+							return (
+								<Grid
+									size={3}
+									display="flex"
+									justifyContent="center"
+									key={categoryKey}
+								>
+									<CategoryCard
+										name={category.name}
+										imgUrl={category?.image?.url}
+									></CategoryCard>
+								</Grid>
+							);
+						},
+					)}
 				</Grid>
 			</Container>
 		</Box>

package/src/cms/blocks/components/featured-products.tsx

@@ -16,13 +16,14 @@ const FeaturedProducts = (productsData: FeaturedProductsBlock) => {
 			<Container>
 				<h1 style={{ fontSize: "25px" }}>Featured Products</h1>
 				<Grid container spacing={2}>
-					{productsData?.products?.map((product: Product, i: number) => {
+					{productsData?.products?.map((product: Product, index: number) => {
+						const productKey = `${product?.description || "product-item"}-${index}`;
 						return (
 							<Grid
 								size={3}
 								display="flex"
 								justifyContent="center"
-								key={`product_index_${i}`}
+								key={productKey}
 							>
 								<MediaCard
 									name={product?.description ?? ""}

package/src/cms/blocks/components/footer/sections/footer-contact.tsx

@@ -5,8 +5,6 @@ import SocialLinks from "@/cms/blocks/components/footer/sections/footer-social-l
 import { Heading } from "@/cms/blocks/components/footer/styles/index";
 
 interface Props {
-	isDark?: boolean;
-	title?: string;
 	address?: string;
 	email?: string;
 	phoneNumber?: string;

package/src/cms/blocks/components/footer/sections/footer-logo.tsx

@@ -17,6 +17,7 @@ export default function LogoSection(props: Readonly<Props>) {
 	const theme = useTheme();
 	const downMd = useMediaQuery(theme.breakpoints.down(1150));
 	const logoHeight = downMd ? "2.125rem" : "3rem";
+	const logoProps = downMd ? { height: "2.125rem" } : {};
 
 	return (
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
@@ -29,7 +30,7 @@ export default function LogoSection(props: Readonly<Props>) {
 					/>
 				</Box>
 			) : (
-				<SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+				<SiteLogo {...logoProps} />
 			)}
 
 			<Paragraph mb={2.5} color="grey.500">

package/src/components/SearchInput.stories.tsx

@@ -11,19 +11,21 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof SearchInput>;
 
+const BasicRender = (args: React.ComponentProps<typeof SearchInput>) => {
+	const [value, setValue] = useState("");
+	return (
+		<SearchInput
+			{...args}
+			value={value}
+			onChange={(e) => setValue(e.target.value)}
+		/>
+	);
+};
+
 export const Basic: Story = {
 	args: {
 		placeholder: "Search...",
 		disabled: false,
 	},
-	render: (args) => {
-		const [value, setValue] = useState("");
-		return (
-			<SearchInput
-				{...args}
-				value={value}
-				onChange={(e) => setValue(e.target.value)}
-			/>
-		);
-	},
+	render: (args) => <BasicRender {...args} />,
 };

package/src/components/base-layout.tsx

@@ -0,0 +1,42 @@
+"use server";
+import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
+import { getQueryClient } from "@evenicanpm/storefront-core/src/api-manager/services/get-query-client";
+import { MobileNavigationBar } from "@evenicanpm/storefront-core/src/components/mobile-navigation";
+import { Navbar } from "@evenicanpm/storefront-core/src/components/navbar";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import type React from "react";
+
+interface BaseLayoutProps {
+	children: React.ReactNode;
+	header?: React.ReactNode;
+	footer?: React.ReactNode;
+	showNavbar?: boolean;
+}
+
+export default async function BaseLayout({
+	children,
+	header,
+	footer,
+	showNavbar = true,
+}: Readonly<BaseLayoutProps>) {
+	const queryClient = getQueryClient();
+	await getCategories.prefetchData(queryClient);
+
+	return (
+		<HydrationBoundary state={dehydrate(queryClient)}>
+			{(header || showNavbar) && (
+				<header>
+					{header}
+					{showNavbar && <Navbar border={1} />}
+				</header>
+			)}
+
+			<main>{children}</main>
+
+			{footer}
+
+			{/* Small screen bottom menu like in mobile apps */}
+			<MobileNavigationBar />
+		</HydrationBoundary>
+	);
+}

package/src/components/categories/category-list/category-list.tsx

@@ -9,7 +9,7 @@ import CategoryListItem from "@evenicanpm/storefront-core/src/components/categor
 import MegaMenu1 from "@evenicanpm/storefront-core/src/components/categories/mega-menu/mega-menu-1";
 import MegaMenu2 from "@evenicanpm/storefront-core/src/components/categories/mega-menu/mega-menu-2";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
 
@@ -33,6 +33,27 @@ interface RootProps {
 	children?: ReactNode;
 }
 
+const defaultMegaMenuRenderer = (children: CategoryHierarchy[]) => (
+	<CategoryList.SubMenu items={children} />
+);
+
+const megaMenu1Renderer = (children: CategoryHierarchy[]) => (
+	<MegaMenu1 data={children} />
+);
+
+const megaMenu2Renderer = (children: CategoryHierarchy[]) => (
+	<MegaMenu2 data={children} />
+);
+
+const megaMenuRenderers: Record<
+	MegaMenuType,
+	(children: CategoryHierarchy[]) => ReactNode
+> = {
+	default: defaultMegaMenuRenderer,
+	"mega-menu-1": megaMenu1Renderer,
+	"mega-menu-2": megaMenu2Renderer,
+};
+
 const CategoryList = ({
 	open,
 	position = "absolute",
@@ -47,17 +68,13 @@ const CategoryList = ({
 		cats = fetchedCategories;
 	}
 
-	const megaMenuRenderers: Record<
-		MegaMenuType,
-		(children: CategoryHierarchy[]) => ReactNode
-	> = {
-		default: (children) => <CategoryList.SubMenu items={children} />,
-		"mega-menu-1": (children) => <MegaMenu1 data={children} />,
-		"mega-menu-2": (children) => <MegaMenu2 data={children} />,
-	};
+	const contextValue = useMemo(
+		() => ({ open, position, megaMenuRenderers }),
+		[open, position],
+	);
 
 	return (
-		<CategoryListContext.Provider value={{ open, position, megaMenuRenderers }}>
+		<CategoryListContext.Provider value={contextValue}>
 			<StyledRoot open={open} position={position}>
 				{children ??
 					cats?.map((c) => <CategoryList.Item key={c.RecordId} category={c} />)}
@@ -69,7 +86,7 @@ const CategoryList = ({
 interface ItemProps {
 	category: CategoryHierarchy;
 }
-CategoryList.Item = ({ category }: ItemProps) => {
+const Item = ({ category }: ItemProps) => {
 	const ctx = useContext(CategoryListContext);
 	if (!ctx) return null;
 	const { megaMenuRenderers } = ctx;
@@ -98,7 +115,7 @@ CategoryList.Item = ({ category }: ItemProps) => {
 interface SubMenuProps {
 	items: CategoryHierarchy[];
 }
-CategoryList.SubMenu = ({ items }: SubMenuProps) => {
+const SubMenu = ({ items }: SubMenuProps) => {
 	return (
 		<SubMenuStyledRoot elevation={2}>
 			{items.map((c) => (
@@ -108,4 +125,7 @@ CategoryList.SubMenu = ({ items }: SubMenuProps) => {
 	);
 };
 
+CategoryList.Item = Item;
+CategoryList.SubMenu = SubMenu;
+
 export default CategoryList;

package/src/components/header/__tests__/header.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
 import { vi } from "vitest";
 import Header from "../header";
 
@@ -47,23 +46,6 @@ vi.mock(
 	}),
 );
 
-vi.mock(
-	"@evenicanpm/storefront-core/src/components/header/components/user",
-	() => {
-		const User = ({ children }: { children?: ReactNode }) => (
-			<div data-testid="user-component">User: {children}</div>
-		);
-		User.DesktopTrigger = () => <div data-testid="user-trigger">Trigger</div>;
-		User.Menu = () => <div data-testid="user-menu">Menu</div>;
-		User.LoginButton = () => (
-			<button type="button" data-testid="login-button">
-				Login
-			</button>
-		);
-		return { default: User };
-	},
-);
-
 describe("header", () => {
 	it("renders header wrapper with children", () => {
 		render(
@@ -108,12 +90,6 @@ describe("header", () => {
 		expect(screen.getByText("Mid Content")).toBeInTheDocument();
 	});
 
-	it("renders User subcomponent", () => {
-		render(<Header.User />);
-
-		expect(screen.getByTestId("user-component")).toBeInTheDocument();
-	});
-
 	it("renders Cart subcomponent", () => {
 		render(<Header.Cart />);
 

package/src/components/header/components/mobile-header.tsx

@@ -4,7 +4,6 @@ import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components/flex-box/index";
-import User from "@evenicanpm/storefront-core/src/components/header/components/user";
 import useHeader from "@evenicanpm/storefront-core/src/components/header/hooks/use-header";
 import MobileCartBag from "@evenicanpm/storefront-core/src/components/icons/cart-bag";
 import Search from "@evenicanpm/storefront-core/src/components/icons/search";
@@ -18,6 +17,7 @@ import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/co
 import SiteLogo from "@evenicanpm/storefront-core/src/components/site-logo";
 // CUSTOM COMPONENTS
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
+import User from "@evenicanpm/storefront-core/src/components/user";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -59,7 +59,7 @@ const MobileHeader = ({ children }: MobileHeaderRootProps) => {
 	);
 };
 
-MobileHeader.Menu = () => {
+const Menu = () => {
 	const { categories, cmsNav } = useContext(NavContext);
 	const categoriesNavItems = transformCategoryNav(categories ?? []);
 	const cmsNavItems = transformCmsNav(cmsNav ?? []);
@@ -77,11 +77,11 @@ MobileHeader.Menu = () => {
 	);
 };
 
-MobileHeader.Logo = () => {
+const Logo = () => {
 	return <SiteLogo height="2.125rem" />;
 };
 
-MobileHeader.Icons = ({ children }: { children: ReactNode }) => {
+const Icons = ({ children }: { children: ReactNode }) => {
 	return (
 		<FlexBox justifyContent="end" flex={1}>
 			{children}
@@ -89,7 +89,7 @@ MobileHeader.Icons = ({ children }: { children: ReactNode }) => {
 	);
 };
 
-MobileHeader.User = () => {
+const MobileUser = () => {
 	return (
 		<User>
 			<User.MobileTrigger />
@@ -97,7 +97,7 @@ MobileHeader.User = () => {
 	);
 };
 
-MobileHeader.Search = () => {
+const MobileSearch = () => {
 	const { toggleSearchBar } = useMobileHeader();
 	return (
 		<IconButton onClick={toggleSearchBar}>
@@ -106,7 +106,7 @@ MobileHeader.Search = () => {
 	);
 };
 
-MobileHeader.Cart = () => {
+const Cart = () => {
 	const { data: cart } = getCart.useData();
 	return cart ? (
 		<MiniCartTrigger cart={cart}>
@@ -120,7 +120,7 @@ MobileHeader.Cart = () => {
 	) : null;
 };
 
-MobileHeader.SearchDrawer = () => {
+const SearchDrawer = () => {
 	const { searchBarOpen, toggleSearchBar } = useMobileHeader();
 	const t = useTranslations("Search");
 
@@ -144,4 +144,12 @@ MobileHeader.SearchDrawer = () => {
 	);
 };
 
+MobileHeader.Menu = Menu;
+MobileHeader.Logo = Logo;
+MobileHeader.Icons = Icons;
+MobileHeader.User = MobileUser;
+MobileHeader.Search = MobileSearch;
+MobileHeader.Cart = Cart;
+MobileHeader.SearchDrawer = SearchDrawer;
+
 export default MobileHeader;

package/src/components/header/header.tsx

@@ -6,7 +6,6 @@ import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/q
 import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 // LOCAL CUSTOM COMPONENTS
 import CategoriesMenu from "@evenicanpm/storefront-core/src/components/header/components/categories-menu";
-import User from "@evenicanpm/storefront-core/src/components/header/components/user";
 // STYLED COMPONENTS
 import {
 	HeaderWrapper,
@@ -14,6 +13,7 @@ import {
 } from "@evenicanpm/storefront-core/src/components/header/styles/index";
 import MiniCartTrigger from "@evenicanpm/storefront-core/src/components/mini-cart/mini-cart-trigger";
 import SiteLogo from "@evenicanpm/storefront-core/src/components/site-logo";
+import User from "@evenicanpm/storefront-core/src/components/user";
 import { useAppSession } from "@evenicanpm/storefront-core/src/hooks/use-nextauth-session";
 import clsx from "clsx";
 import type { ReactNode } from "react";
@@ -51,7 +51,7 @@ Header.MidSlot = ({ children }: { children: ReactNode }) => {
 	return <>{children}</>;
 };
 
-Header.User = () => {
+const HeaderUser = () => {
 	const { session } = useAppSession();
 	const isAuthenticated = !!session;
 	return (
@@ -68,7 +68,7 @@ Header.User = () => {
 	);
 };
 
-Header.Cart = () => {
+const HeaderCart = () => {
 	const { data: cart } = getCart.useData();
 	return cart ? (
 		<MiniCartTrigger cart={cart}>
@@ -82,4 +82,7 @@ Header.Cart = () => {
 	) : null;
 };
 
+Header.User = HeaderUser;
+Header.Cart = HeaderCart;
+
 export default Header;

package/src/components/mini-cart/components/bottom-actions.tsx

@@ -4,7 +4,7 @@ import Box from "@mui/material/Box";
 import Button, { type ButtonProps } from "@mui/material/Button";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 interface BottomActionsContextValue {
 	total: string;
@@ -26,8 +26,13 @@ const BottomActions = ({
 	handleNavigate,
 	children,
 }: BottomActionsProps) => {
+	const contextValue = useMemo(
+		() => ({ total, handleNavigate }),
+		[total, handleNavigate],
+	);
+
 	return (
-		<BottomActionsContext.Provider value={{ total, handleNavigate }}>
+		<BottomActionsContext.Provider value={contextValue}>
 			<Box p={2.5} display="flex" flexDirection="column" gap={1}>
 				{children}
 			</Box>

package/src/components/mini-cart/components/cart-item.tsx

@@ -18,7 +18,7 @@ import IconButton from "@mui/material/IconButton";
 import Link from "next/link";
 import { useFormatter, useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import type { CartLine } from "@/schemas/cart.schema";
 
 interface MiniCartItemContextValue {
@@ -47,15 +47,13 @@ const MiniCartItem = ({
 	closeDrawer,
 	children,
 }: MiniCartItemProps) => {
+	const contextValue = useMemo(
+		() => ({ item, handleCartAmountChange, isLineUpdating, closeDrawer }),
+		[item, handleCartAmountChange, isLineUpdating, closeDrawer],
+	);
+
 	return (
-		<MiniCartItemContext.Provider
-			value={{
-				item,
-				handleCartAmountChange,
-				isLineUpdating,
-				closeDrawer,
-			}}
-		>
+		<MiniCartItemContext.Provider value={contextValue}>
 			<FlexBox
 				py={2}
 				px={2.5}
@@ -72,7 +70,7 @@ const MiniCartItem = ({
 
 /* ---------- Subcomponents ---------- */
 
-MiniCartItem.QuantityControls = () => {
+const QuantityControls = () => {
 	const ctx = useContext(MiniCartItemContext);
 	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
@@ -133,7 +131,7 @@ MiniCartItem.QuantityControls = () => {
 	);
 };
 
-MiniCartItem.ProductImage = () => {
+const ProductImage = () => {
 	const ctx = useContext(MiniCartItemContext);
 	if (!ctx) return null;
 	const { item, closeDrawer } = ctx;
@@ -151,7 +149,7 @@ MiniCartItem.ProductImage = () => {
 	);
 };
 
-MiniCartItem.ProductDetails = () => {
+const ProductDetails = () => {
 	const { number } = useFormatter();
 	const currency = (value: number) =>
 		number(value, { style: "currency", currency: "USD" });
@@ -186,7 +184,7 @@ MiniCartItem.ProductDetails = () => {
 	);
 };
 
-MiniCartItem.RemoveButton = () => {
+const RemoveButton = () => {
 	const ctx = useContext(MiniCartItemContext);
 	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
@@ -203,4 +201,9 @@ MiniCartItem.RemoveButton = () => {
 	);
 };
 
+MiniCartItem.QuantityControls = QuantityControls;
+MiniCartItem.ProductImage = ProductImage;
+MiniCartItem.ProductDetails = ProductDetails;
+MiniCartItem.RemoveButton = RemoveButton;
+
 export default MiniCartItem;

package/src/components/mini-cart/components/empty-view.tsx

@@ -4,7 +4,7 @@ import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box/ind
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { MdShoppingBag as ShoppingBagIcon } from "react-icons/md";
 
 interface EmptyCartContextValue {
@@ -20,10 +20,13 @@ export interface EmptyCartProps {
 
 const EmptyCart = ({ message, children }: EmptyCartProps) => {
 	const t = useTranslations("Cart");
+	const contextValue = useMemo(
+		() => ({ message: message || t("emptyCartMsg") }),
+		[message, t],
+	);
+
 	return (
-		<EmptyCartContext.Provider
-			value={{ message: message || t("emptyCartMsg") }}
-		>
+		<EmptyCartContext.Provider value={contextValue}>
 			<FlexBox
 				alignItems="center"
 				flexDirection="column"
@@ -38,11 +41,11 @@ const EmptyCart = ({ message, children }: EmptyCartProps) => {
 
 /* ---------- Subcomponents ---------- */
 
-EmptyCart.Icon = ({ size = "3rem" }: { size?: string }) => {
+const Icon = ({ size = "3rem" }: { size?: string }) => {
 	return <ShoppingBagIcon style={{ fontSize: size }} />;
 };
 
-EmptyCart.Message = ({
+const Message = ({
 	fontSize = 15,
 	color = "grey.600",
 	maxWidth = 200,
@@ -67,4 +70,7 @@ EmptyCart.Message = ({
 	);
 };
 
+EmptyCart.Icon = Icon;
+EmptyCart.Message = Message;
+
 export default EmptyCart;

package/src/components/mini-cart/components/top-header.tsx

@@ -9,7 +9,7 @@ import ClearIcon from "@mui/icons-material/Clear";
 import IconButton from "@mui/material/IconButton";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { MdOutlineShoppingBag as CartBagIcon } from "react-icons/md";
 
 interface TopHeaderContextValue {
@@ -26,8 +26,10 @@ export interface TopHeaderProps {
 }
 
 const TopHeader = ({ total, toggle, children }: TopHeaderProps) => {
+	const contextValue = useMemo(() => ({ total, toggle }), [total, toggle]);
+
 	return (
-		<TopHeaderContext.Provider value={{ total, toggle }}>
+		<TopHeaderContext.Provider value={contextValue}>
 			<FlexBetween mx={3} height={74}>
 				{children}
 			</FlexBetween>
@@ -37,7 +39,7 @@ const TopHeader = ({ total, toggle, children }: TopHeaderProps) => {
 
 /* ---------- Subcomponents ---------- */
 
-TopHeader.Heading = ({
+const Heading = ({
 	icon = <CartBagIcon color="inherit" />,
 }: {
 	icon?: React.ReactNode;
@@ -57,11 +59,7 @@ TopHeader.Heading = ({
 	);
 };
 
-TopHeader.CloseButton = ({
-	icon = <ClearIcon />,
-}: {
-	icon?: React.ReactNode;
-}) => {
+const CloseButton = ({ icon = <ClearIcon /> }: { icon?: React.ReactNode }) => {
 	const ctx = useContext(TopHeaderContext);
 	const t = useTranslations("Cart");
 	if (!ctx) return null;
@@ -74,4 +72,7 @@ TopHeader.CloseButton = ({
 	);
 };
 
+TopHeader.Heading = Heading;
+TopHeader.CloseButton = CloseButton;
+
 export default TopHeader;