@evenicanpm/storefront-core 1.3.0 → 1.4.0

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -62,7 +62,7 @@ const MobileNavContext = createContext<{ menuList: MenuItemProps[] }>({
 export default function MobileNavigationBar({
 	children,
 	menuList,
-}: MobileNavigationBarProps) {
+}: Readonly<MobileNavigationBarProps>) {
 	const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
 
 	const defaultMenuList: MenuItemProps[] = [

package/src/components-v2/nav-link/nav-link-2.tsx

@@ -16,7 +16,7 @@ export default function NavLink2({
 	color,
 	title = "SHOP NOW",
 	borderColor = "primary.600",
-}: NavLinkProps) {
+}: Readonly<NavLinkProps>) {
 	return (
 		<Link href={url}>
 			<Small

package/src/components-v2/nav-link/nav-link-3.tsx

@@ -21,7 +21,7 @@ export default function NavLink3({
 	color = "text.primary",
 	hoverColor = "primary.main",
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Link href={href}>
 			<Span

package/src/components-v2/nav-link/nav-link.tsx

@@ -30,7 +30,7 @@ export default function NavLink({
 	style,
 	className,
 	...props
-}: NavLinkProps) {
+}: Readonly<NavLinkProps>) {
 	const pathname = usePathname();
 
 	// CHECK CURRENT ROUTE

package/src/components-v2/navbar/categories.tsx

@@ -17,7 +17,9 @@ const CategoriesContext = createContext<CategoriesContextValue | undefined>(
 	undefined,
 );
 
-export default function Categories({ children }: { children?: ReactNode }) {
+export default function Categories({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
 	const t = useTranslations("Navigation");
 
 	const label = t("topLevelCategoryName");

package/src/components-v2/navbar/category-based-menu/category-based-menu.tsx

@@ -107,13 +107,13 @@ CategoryBasedMenu.Section = () => {
 		<Scrollbar autoHide={false} sx={{ width: "100%" }}>
 			<Box px={6} py={2} height="100%">
 				{category.items.map((item, idx) => (
-					<div key={idx}>
+					<div key={item.title + idx}>
 						<H6 fontWeight={700} my={3}>
 							{item.title}
 						</H6>
 						<SubCategoryList>
 							{item.items.map((sub, subIdx) => (
-								<CategoryBasedMenu.Item item={sub} key={subIdx} />
+								<CategoryBasedMenu.Item item={sub} key={sub.title + subIdx} />
 							))}
 						</SubCategoryList>
 					</div>

package/src/components-v2/navbar/mobile-menu/mobile-menu.tsx

@@ -76,7 +76,11 @@ MobileMenu.List = ({ data }: { data: TransformedNavItem[] }) => {
 	return (
 		<>
 			{data.map((item, idx) => (
-				<MobileMenu.Item key={idx} item={item} onClose={toggleMobileSideNav} />
+				<MobileMenu.Item
+					key={item.title + idx}
+					item={item}
+					onClose={toggleMobileSideNav}
+				/>
 			))}
 		</>
 	);
@@ -107,7 +111,7 @@ MobileMenu.Item = ({
 }) => {
 	const { href, title, items } = item;
 
-	if (items && items.length) {
+	if (items?.length) {
 		return (
 			<Accordion square elevation={0} disableGutters sx={ACCORDION_STYLES}>
 				<AccordionSummary
@@ -118,7 +122,11 @@ MobileMenu.Item = ({
 				</AccordionSummary>
 				<Box mx={2}>
 					{items.map((sub, idx) => (
-						<MobileMenu.Item key={idx} item={sub} onClose={onClose} />
+						<MobileMenu.Item
+							key={sub.title + idx}
+							item={sub}
+							onClose={onClose}
+						/>
 					))}
 				</Box>
 			</Accordion>

package/src/components-v2/navbar/nav-list/nav-item-child.tsx

@@ -25,7 +25,7 @@ interface Props extends PropsWithChildren {
 }
 // ==============================================================
 
-export default function NavItemChild({ nav, children }: Props) {
+export default function NavItemChild({ nav, children }: Readonly<Props>) {
 	const pathname = usePathname();
 	const { settings } = useSettings();
 	const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =

package/src/components-v2/navbar/nav-list/nav-list.tsx

@@ -17,19 +17,108 @@ import {
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// import { useContext as useReactContext } from "react";
 import MenuItem from "@mui/material/MenuItem";
 import { createContext, type ReactNode, useContext } from "react";
 
 type NavigationContextValue = {
 	list: TransformedNavItem[];
 };
+
 const NavigationContext = createContext<NavigationContextValue | undefined>(
 	undefined,
 );
 
-export default function Navigation({ children }: { children?: ReactNode }) {
+type NavigationItemProps = Readonly<{
+	nav: TransformedNavItem;
+	isRoot?: boolean;
+}>;
+
+function RenderMegaMenu(props: Readonly<{ nav: TransformedNavItem }>) {
+	const { nav } = props;
+	const columns = nav.items.map((item) => [item]);
+	const columnCount = columns.length;
+
+	return (
+		<MegaMenu title={nav.title}>
+			<MegaMenu.Container>
+				{columns.map((column) => {
+					const columnKey = column.map((c) => c.title).join("-");
+
+					return (
+						<MegaMenu.Column key={columnKey} count={columnCount}>
+							{column.map((cat) => (
+								<MegaMenu.Category key={cat.title} title={cat.title}>
+									{cat.items.map((sub) => (
+										<MegaMenu.Item key={sub.title} href={sub.href}>
+											{sub.title}
+										</MegaMenu.Item>
+									))}
+								</MegaMenu.Category>
+							))}
+						</MegaMenu.Column>
+					);
+				})}
+			</MegaMenu.Container>
+		</MegaMenu>
+	);
+}
+
+function RenderFullScreenMenu({ nav }: Readonly<{ nav: TransformedNavItem }>) {
+	return (
+		<CategoryBasedMenu key={nav.title} title={nav.title} menuList={nav.items}>
+			<CategoryBasedMenu.MainList />
+			<CategoryBasedMenu.Section />
+		</CategoryBasedMenu>
+	);
+}
+
+function RenderRootWithChildren({
+	nav,
+}: Readonly<{ nav: TransformedNavItem }>) {
+	const { title, items } = nav;
+
+	return (
+		<FlexBox
+			alignItems="center"
+			position="relative"
+			flexDirection="column"
+			sx={{
+				"&:hover": { "& > .child-nav-item": { display: "block" } },
+			}}
+		>
+			<FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
+				{title}
+				<KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+			</FlexBox>
+
+			<ChildNavListWrapper className="child-nav-item">
+				<BazaarCard elevation={3} sx={{ mt: 2.5, py: 1, minWidth: 100 }}>
+					{items.map((child) => (
+						<Navigation.Item key={child.title} nav={child} />
+					))}
+				</BazaarCard>
+			</ChildNavListWrapper>
+		</FlexBox>
+	);
+}
+
+function RenderChildWithChildren({
+	nav,
+}: Readonly<{ nav: TransformedNavItem }>) {
+	return (
+		<Navigation.Child nav={nav}>
+			{nav.items.map((child) => (
+				<Navigation.Item key={child.title} nav={child} />
+			))}
+		</Navigation.Child>
+	);
+}
+
+export default function Navigation({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
 	const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+
 	return (
 		<NavigationContext.Provider value={{ list: cmsList }}>
 			<FlexBox gap={4}>{children ?? <Navigation.List />}</FlexBox>
@@ -40,6 +129,7 @@ export default function Navigation({ children }: { children?: ReactNode }) {
 Navigation.List = function List() {
 	const ctx = useContext(NavigationContext);
 	if (!ctx) return null;
+
 	return (
 		<>
 			{ctx.list.map((nav) => (
@@ -49,96 +139,44 @@ Navigation.List = function List() {
 	);
 };
 
-Navigation.Item = function Item({
-	nav,
-	isRoot = false,
-}: {
-	nav: TransformedNavItem;
-	isRoot?: boolean;
-}) {
+Navigation.Item = function Item({ nav, isRoot = false }: NavigationItemProps) {
 	const { href, title, items, menuType } = nav;
-	const hasChildren = !!(items && items.length);
+	const hasChildren = !!items?.length;
 
+	// ROOT ITEMS
 	if (isRoot) {
 		if (menuType === "mega-menu") {
-			return (
-				<MegaMenu title={title}>
-					<MegaMenu.Container>
-						{nav.items
-							.map((i) => [i])
-							.map((column, i) => (
-								<MegaMenu.Column
-									key={i}
-									count={nav.items.map((i) => [i]).length}
-								>
-									{column.map((cat) => (
-										<MegaMenu.Category key={cat.title} title={cat.title}>
-											{cat.items.map((sub) => (
-												<MegaMenu.Item key={sub.title} href={sub.href}>
-													{sub.title}
-												</MegaMenu.Item>
-											))}
-										</MegaMenu.Category>
-									))}
-								</MegaMenu.Column>
-							))}
-					</MegaMenu.Container>
-				</MegaMenu>
-			);
+			return <RenderMegaMenu nav={nav} />;
 		}
+
 		if (menuType === "full-screen-mega-menu") {
-			return (
-				<CategoryBasedMenu key={title} title={title} menuList={nav.items}>
-					<CategoryBasedMenu.MainList />
-					<CategoryBasedMenu.Section />
-				</CategoryBasedMenu>
-			);
+			return <RenderFullScreenMenu nav={nav} />;
 		}
-		if (href && !hasChildren) {
+
+		if (!hasChildren && href) {
 			return <StyledNavLink href={href}>{title}</StyledNavLink>;
 		}
+
 		if (hasChildren) {
-			return (
-				<FlexBox
-					alignItems="center"
-					position="relative"
-					flexDirection="column"
-					sx={{
-						"&:hover": { "& > .child-nav-item": { display: "block" } },
-					}}
-				>
-					<FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
-						{title}{" "}
-						<KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
-					</FlexBox>
-					<ChildNavListWrapper className="child-nav-item">
-						<BazaarCard elevation={3} sx={{ mt: 2.5, py: 1, minWidth: 100 }}>
-							{items.map((child) => (
-								<Navigation.Item key={child.title} nav={child} />
-							))}
-						</BazaarCard>
-					</ChildNavListWrapper>
-				</FlexBox>
-			);
-		}
-	} else {
-		if (href && !hasChildren) {
-			return (
-				<NavLink href={href}>
-					<MenuItem>{title}</MenuItem>
-				</NavLink>
-			);
-		}
-		if (hasChildren) {
-			return (
-				<Navigation.Child nav={nav}>
-					{items.map((child) => (
-						<Navigation.Item key={child.title} nav={child} />
-					))}
-				</Navigation.Child>
-			);
+			return <RenderRootWithChildren nav={nav} />;
 		}
+
+		return null;
+	}
+
+	// CHILD ITEMS
+	if (!hasChildren && href) {
+		return (
+			<NavLink href={href}>
+				<MenuItem>{title}</MenuItem>
+			</NavLink>
+		);
 	}
+
+	if (hasChildren) {
+		return <RenderChildWithChildren nav={nav} />;
+	}
+
 	return null;
 };
 

package/src/components-v2/navbar/navbar.tsx

@@ -56,7 +56,7 @@ export default function Navbar({
 	elevation = 2,
 	hideCategories = false,
 	children,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<NavbarContext.Provider value={{ hideCategories }}>
 			<NavBarWrapper hoverEffect={false} elevation={elevation} border={border}>

package/src/components-v2/no-records.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 type Props = { message: string };
 
-export default function NoRecords({ message }: Props) {
+export default function NoRecords({ message }: Readonly<Props>) {
 	const t = useTranslations();
 	return (
 		<Box

package/src/components-v2/product-cards/favorite-button.tsx

@@ -28,7 +28,7 @@ export default function FavoriteButton({
 	activeColor = "primary",
 	inactiveColor = "disabled",
 	...rest
-}: FavoriteButtonProps) {
+}: Readonly<FavoriteButtonProps>) {
 	const iconProps = customIconSize
 		? { sx: { fontSize: customIconSize } }
 		: { fontSize: iconSize };

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

@@ -397,16 +397,14 @@ ProductCard.QuickViewButton = () => {
 
 ProductCard.FavoriteButton = () => {
 	const internal = useContext(ProductCardInternalContext);
-	if (!internal) return null;
-
-	const { handleToggleFavorite } = internal;
-
 	const ctx = useContext(ProductCardContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
+	const isFavorite = useFavorite(id ? Number(id) : undefined);
+
+	if (!internal || !ctx) return null;
 
-	const isFavorite = useFavorite(Number(id));
+	const { handleToggleFavorite } = internal;
 
 	return (
 		<FavoriteButton isFavorite={isFavorite} onToggle={handleToggleFavorite} />

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

@@ -201,11 +201,11 @@ ProductCardPlp.QuickViewButton = () => {
 
 ProductCardPlp.FavoriteButton = () => {
 	const ctx = useContext(ProductCardPlpContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
+	const isFavorite = useFavorite(id ? Number(id) : undefined);
 
-	const isFavorite = useFavorite(Number(id));
+	if (!ctx) return null;
 
 	return (
 		<FavoriteButton
@@ -216,17 +216,18 @@ 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 ctx = useContext(ProductCardPlpContext);
-	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-plp-list/components/tags.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 // ==============================================================
 
-export default function ProductTags({ tags }: Props) {
+export default function ProductTags({ tags }: Readonly<Props>) {
 	return (
 		<StyledRoot>
 			{tags.map((item) => (

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

@@ -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/product-card.tsx

@@ -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

@@ -12,7 +12,7 @@ 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

@@ -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

@@ -5,7 +5,7 @@ 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

@@ -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/compound/product-dialog.tsx

@@ -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/compound/dimensions-group-list.tsx

@@ -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/index.tsx

@@ -2,7 +2,7 @@
 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-quantity-buttons/compound/quantity-buttons-root.tsx

@@ -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-variants/index.tsx

@@ -27,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;
@@ -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/ProductsList.stories.tsx

@@ -2,8 +2,6 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-//import { useSession } from "next-auth/react";
-import { expect, mocked } from "storybook/test";
 import { data, prices } from "../../../__mocks__/products";
 import { ProductsList } from "./index";
 

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

@@ -30,7 +30,7 @@ import { cloneElement } from "react";
  *   </ProductsGridView.Container>
  * </ProductsGridView>
  */
-export default function ProductsGridView(props: ProductsViewProps) {
+export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
 	const { products, productPrices, pagination, children } = props;
 
 	return (
@@ -68,7 +68,7 @@ ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
 						value={{ price: matchingPrice, product }}
 					>
 						{cloneElement(children, {
-							key: i,
+							key: product.RecordId ?? product.ItemId,
 							product: product,
 							price: matchingPrice,
 						})}