@evenicanpm/storefront-core 1.3.0 → 1.4.0

package/src/cms/blocks/components/hero-carousel/index.tsx

@@ -9,37 +9,41 @@ import React from "react";
 import type { HeroCarouselBlock, Slide } from "@/cms/blocks/interfaces";
 import { getImageUrl } from "@/cms/endpoints";
 
-export default function HeroCarousel(data: HeroCarouselBlock) {
+export default function HeroCarousel(data: Readonly<HeroCarouselBlock>) {
 	return (
 		<Box sx={{ backgroundColor: "white" }}>
 			<Container className="pt-2 pb-2">
 				<Carousel slidesToShow={1} autoplay={true} arrows={false} dots={true}>
-					{data.Slides.map((data: Slide, ind: number) => (
-						<CarouselCard1 key={ind}>
-							<CarouselCard1.Info>
-								<CarouselCard1.Title title={data?.heading} />
-								<CarouselCard1.Description description={data?.description} />
-								<CarouselCard1.Button
-									buttonLink={
-										data?.linkToPage?.slug
-											? `/pages/${data?.linkToPage?.slug}`
-											: data?.linkToProduct?.sku
-												? `/product/${data?.linkToProduct?.sku}`
-												: ""
+					{data.Slides.map((data: Slide, ind: number) => {
+						const productLink = data?.linkToProduct?.sku
+							? `/product/${data.linkToProduct.sku}`
+							: "";
+
+						const buttonLink = data?.linkToPage?.slug
+							? `/pages/${data.linkToPage.slug}`
+							: productLink;
+
+						return (
+							<CarouselCard1 key={data.id + ind}>
+								<CarouselCard1.Info>
+									<CarouselCard1.Title title={data?.heading} />
+									<CarouselCard1.Description description={data?.description} />
+									<CarouselCard1.Button
+										buttonLink={buttonLink}
+										buttonText={data?.buttonText}
+									/>
+								</CarouselCard1.Info>
+
+								<CarouselCard1.Image
+									imgUrl={
+										data?.image?.formats
+											? getImageUrl(data?.image?.formats)
+											: data?.image?.url
 									}
-									buttonText={data?.buttonText}
 								/>
-							</CarouselCard1.Info>
-
-							<CarouselCard1.Image
-								imgUrl={
-									data?.image?.formats
-										? getImageUrl(data?.image?.formats)
-										: data?.image?.url
-								}
-							/>
-						</CarouselCard1>
-					))}
+							</CarouselCard1>
+						);
+					})}
 				</Carousel>
 			</Container>
 		</Box>

package/src/cms/blocks/components/media-card.tsx

@@ -12,7 +12,7 @@ interface Props {
 	imgUrl: string;
 }
 
-export default function MediaCard({ name, imgUrl }: Props) {
+export default function MediaCard({ name, imgUrl }: Readonly<Props>) {
 	return (
 		<Card sx={{ width: "100%" }}>
 			<Box

package/src/cms/blocks/components/product-carousel/index.tsx

@@ -13,7 +13,7 @@ import { getImageUrl } from "@/cms/endpoints";
 
 type CombinedProduct = Product & SimpleProduct;
 
-export default function ProductCarousel(data: ProductCarouselBlock) {
+export default function ProductCarousel(data: Readonly<ProductCarouselBlock>) {
 	const { data: e4Products = [], error } = getProductByIds.useData({
 		id: data?.products?.map((product: Product) => product.sku),
 	});

package/src/cms/blocks/components/product-section-fullwidth/index.tsx

@@ -26,7 +26,7 @@ import { getImageUrl } from "@/cms/endpoints";
 
 type CombinedProduct = Product & SimpleProduct;
 export default async function ProductSectionFullWidth(
-	data: ProductSectionFullWidthBlock,
+	data: Readonly<ProductSectionFullWidthBlock>,
 ) {
 	const queryClient = getQueryClient();
 
@@ -34,7 +34,7 @@ export default async function ProductSectionFullWidth(
 
 	const e4Products = await getProductByIds.fetchData(queryClient, { id: skus });
 
-	if (!(e4Products && e4Products.length)) {
+	if (!e4Products?.length) {
 		return null;
 	}
 

package/src/cms/blocks/components/seo/index.tsx

@@ -36,7 +36,11 @@ const Seo = (pageData: SeoPageData) => {
 				</>
 			)}
 			{pageData?.seo?.meta?.map((metaItem: MetaItem, i: number) => (
-				<meta name={metaItem.name} key={i} content={metaItem.content} />
+				<meta
+					name={metaItem.name}
+					key={metaItem.id}
+					content={metaItem.content}
+				/>
 			))}
 			<script type="application/ld+json">
 				{JSON.stringify(pageData?.seo?.structuredData)}

package/src/cms/blocks/components/services/index.tsx

@@ -8,7 +8,7 @@ import type {
 	ServicesBlock,
 } from "@/cms/blocks/interfaces";
 
-export default function Services(data: ServicesBlock) {
+export default function Services(data: Readonly<ServicesBlock>) {
 	return (
 		<Container sx={{ marginBottom: "80px", marginTop: "80px" }}>
 			<Grid container spacing={3}>

package/src/cms/blocks/components/services/service-card.tsx

@@ -45,7 +45,7 @@ const StyledCard = styled(Card)(({ theme }) => ({
 type Props = { service: Service };
 // ==================================================
 
-export default function ServiceCard({ service }: Props) {
+export default function ServiceCard({ service }: Readonly<Props>) {
 	const { icon, title, description } = service;
 
 	const Icon = getIcon(icon);

package/src/cms/blocks/components/shared/featured-product-card.tsx

@@ -8,7 +8,10 @@ import React from "react";
 type Props = { title: string; imgUrl: string };
 // ==========================================================
 
-export default function FeaturedProductCard({ imgUrl, title }: Props) {
+export default function FeaturedProductCard({
+	imgUrl,
+	title,
+}: Readonly<Props>) {
 	return (
 		<div>
 			<HoverBox borderRadius="5px" mb={1}>

package/src/cms/blocks/components/shared/product-category-item.tsx

@@ -31,7 +31,7 @@ export default function ProductCategoryItem({
 	isSelected,
 	sx = {},
 	...others
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<StyledBazaarCard
 			elevation={isSelected ? 2 : 0}

package/src/cms/blocks/components/shared/product-grid.tsx

@@ -20,7 +20,10 @@ interface Product {
 
 type Props = { products: Product[]; heading: string };
 
-export default function ProductGridList({ products, heading }: Props) {
+export default function ProductGridList({
+	products,
+	heading,
+}: Readonly<Props>) {
 	return (
 		<Box flex="1 1 0">
 			<Section>

package/src/cms/blocks/components/shared/top-categories-card.tsx

@@ -26,7 +26,11 @@ interface Props {
 }
 // ========================================================
 
-export default function TopCategoriesCard({ title, subtitle, imgUrl }: Props) {
+export default function TopCategoriesCard({
+	title,
+	subtitle,
+	imgUrl,
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const color = theme.palette.secondary.main;
 	return (

package/src/cms/blocks/components/shared/top-rating-product-card.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 // ======================================================
 
-export default function TopRatingProductCard(props: Props) {
+export default function TopRatingProductCard(props: Readonly<Props>) {
 	const { title, price, imgUrl, rating = 5, reviewCount = 10 } = props;
 
 	return (

package/src/components-v2/BazaarImage.tsx

@@ -7,6 +7,6 @@ interface Props extends BoxProps {
 }
 // ==============================================================
 
-export default function BazaarImage(props: Props) {
+export default function BazaarImage(props: Readonly<Props>) {
 	return <Box component="img" {...props} />;
 }

package/src/components-v2/BazaarMenu.tsx

@@ -21,7 +21,7 @@ export default function BazaarMenu({
 	direction = "left",
 	sx,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
 	const handleClose = () => setAnchorEl(null);
@@ -36,7 +36,7 @@ export default function BazaarMenu({
 				elevation={0}
 				anchorEl={anchorEl}
 				onClose={handleClose}
-				open={open !== undefined ? open : !!anchorEl}
+				open={open ?? Boolean(anchorEl)}
 				anchorOrigin={{ vertical: "bottom", horizontal: direction }}
 				transformOrigin={{ vertical: "top", horizontal: direction }}
 				sx={sx}

package/src/components-v2/BazaarTextField.tsx

@@ -17,7 +17,7 @@ export default function BazaarTextField({
 
 	// Splits props into Box and TextField props. Bracket notation allows dynamic names like "mt" or "mb".
 	for (const key in props) {
-		if (SPACE_PROPS_LIST.includes(key)) {
+		if (SPACE_PROPS_LIST.has(key)) {
 			(boxProps as any)[key] = (props as any)[key];
 		} else {
 			(textFieldProps as any)[key] = (props as any)[key];
@@ -45,7 +45,7 @@ export default function BazaarTextField({
 	);
 }
 
-const SPACE_PROPS_LIST = [
+const SPACE_PROPS_LIST = new Set([
 	"m",
 	"mt",
 	"mr",
@@ -74,4 +74,4 @@ const SPACE_PROPS_LIST = [
 	"paddingLeft",
 	"paddingX",
 	"paddingY",
-];
+]);

package/src/components-v2/BorderShadowCard.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import { BorderShadowCard, lightBorder, lightShadow } from "./BoxShadowCard";
+import { BorderShadowCard } from "./BoxShadowCard";
 
 const meta = {
 	title: "Bazaar/BorderShadowCard",

package/src/components-v2/DropZone.tsx

@@ -26,8 +26,7 @@ export default function DropZone({
 	onChange,
 	title = "Drag & drop files here",
 	handleReject,
-	accept,
-}: Props) {
+}: Readonly<Props>) {
 	const onDrop = useCallback(
 		(acceptedFiles: File[]) => onChange(acceptedFiles),
 		[onChange],

package/src/components-v2/Typography.tsx

@@ -22,7 +22,7 @@ const StyledBox = styled(Box, {
 	}),
 }));
 
-export function H1(props: EllipsisProps) {
+export function H1(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -39,7 +39,7 @@ export function H1(props: EllipsisProps) {
 	);
 }
 
-export function H2(props: EllipsisProps) {
+export function H2(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -56,7 +56,7 @@ export function H2(props: EllipsisProps) {
 	);
 }
 
-export function H3(props: EllipsisProps) {
+export function H3(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -73,7 +73,7 @@ export function H3(props: EllipsisProps) {
 	);
 }
 
-export function H4(props: EllipsisProps) {
+export function H4(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -90,7 +90,7 @@ export function H4(props: EllipsisProps) {
 	);
 }
 
-export function H5(props: EllipsisProps) {
+export function H5(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -108,7 +108,7 @@ export function H5(props: EllipsisProps) {
 	);
 }
 
-export function H6(props: EllipsisProps) {
+export function H6(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -125,7 +125,7 @@ export function H6(props: EllipsisProps) {
 	);
 }
 
-export function Paragraph(props: EllipsisProps) {
+export function Paragraph(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -142,7 +142,7 @@ export function Paragraph(props: EllipsisProps) {
 	);
 }
 
-export function Small(props: EllipsisProps) {
+export function Small(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -159,7 +159,7 @@ export function Small(props: EllipsisProps) {
 	);
 }
 
-export function Span(props: EllipsisProps) {
+export function Span(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -174,7 +174,7 @@ export function Span(props: EllipsisProps) {
 	);
 }
 
-export function Tiny(props: EllipsisProps) {
+export function Tiny(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -191,7 +191,7 @@ export function Tiny(props: EllipsisProps) {
 	);
 }
 
-export function Display(props: EllipsisProps) {
+export function Display(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -208,7 +208,7 @@ export function Display(props: EllipsisProps) {
 	);
 }
 
-export function Subtitle(props: EllipsisProps) {
+export function Subtitle(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (

package/src/components-v2/accordion/accordion-header.tsx

@@ -31,7 +31,7 @@ interface Props extends BoxProps {
 }
 // =================================================================
 
-export default function AccordionHeader(props: Props) {
+export default function AccordionHeader(props: Readonly<Props>) {
 	const { open, children, showIcon = true, ...others } = props;
 
 	return (

package/src/components-v2/categories/category-list/styles.ts

@@ -2,13 +2,6 @@ import type { Props } from "@evenicanpm/storefront-core/src/components-v2/catego
 import Card from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 
-/*
-interface StyledRootProps extends React.HTMLAttributes<HTMLDivElement> {
-  elevation: number;
-  open?: boolean;
-  position: "absolute" | "relative";
-}
-*/
 // styled component
 export const StyledRoot = styled("div", {
 	shouldForwardProp: (prop) => prop !== "position" && prop !== "open",

package/src/components-v2/categories/category-list-item/category-menu-item.tsx

@@ -16,7 +16,7 @@ interface Props {
 }
 // =============================================================
 
-export default function CategoryListItem(props: Props) {
+export default function CategoryListItem(props: Readonly<Props>) {
 	const { href, title, render, caret = true, icon: Icon } = props;
 
 	return (

package/src/components-v2/categories/category-menu.tsx

@@ -7,16 +7,19 @@ import { type MouseEvent, useCallback, useEffect, useState } from "react";
 // STYLED COMPONENT
 const Wrapper = styled("div", {
 	shouldForwardProp: (prop) => prop !== "open",
-})<{ open: boolean }>(({ open, theme: { direction } }) => ({
-	cursor: "pointer",
-	position: "relative",
-	"& .dropdown-icon": {
-		transition: "all 250ms ease-in-out",
-		transform: `rotate(${
-			open ? (direction === "rtl" ? "-90deg" : "90deg") : "0deg"
-		})`,
-	},
-}));
+})<{ open: boolean }>(({ open, theme: { direction } }) => {
+	const rotationDegrees = direction === "rtl" ? "-90deg" : "90deg";
+	const rotation = open ? rotationDegrees : "0deg";
+
+	return {
+		cursor: "pointer",
+		position: "relative",
+		"& .dropdown-icon": {
+			transition: "all 250ms ease-in-out",
+			transform: `rotate(${rotation})`,
+		},
+	};
+});
 
 type Props = {
 	render: (
@@ -26,7 +29,7 @@ type Props = {
 
 // CategoryMenu is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function CategoryMenu({ render }: Props) {
+export default function CategoryMenu({ render }: Readonly<Props>) {
 	const [open, setOpen] = useState(false);
 
 	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -37,8 +40,8 @@ export default function CategoryMenu({ render }: Props) {
 	const handleDocumentClick = useCallback(() => setOpen(false), []);
 
 	useEffect(() => {
-		window.addEventListener("click", handleDocumentClick);
-		return () => window.removeEventListener("click", handleDocumentClick);
+		document.addEventListener("click", handleDocumentClick);
+		return () => document.removeEventListener("click", handleDocumentClick);
 	}, [handleDocumentClick]);
 
 	return (

package/src/components-v2/categories/mega-menu/mega-menu-1.tsx

@@ -19,7 +19,7 @@ interface Props {
 
 // MegaMenu1 is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function MegaMenu1({ banner, data }: Props) {
+export default function MegaMenu1({ banner, data }: Readonly<Props>) {
 	return (
 		<ColumnList>
 			<ColumnList.Wrapper>

package/src/components-v2/categories/mega-menu/mega-menu-2.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 // MegaMenu2 is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function MegaMenu2({ data }: Props) {
+export default function MegaMenu2({ data }: Readonly<Props>) {
 	return (
 		<StyledRoot elevation={2}>
 			{data.map((item) => (
@@ -25,7 +25,7 @@ export default function MegaMenu2({ data }: Props) {
 					//icon={item.icon} // No icon information
 					key={item.RecordId}
 					title={item.Name ?? ""}
-					caret={!!(item.Children && item.Children.length)}
+					caret={!!item?.Children?.length}
 					render={
 						item.Children?.length ? (
 							<ColumnList minWidth={550}>

package/src/components-v2/header/components/user.tsx

@@ -51,9 +51,9 @@ interface UserContextValue {
 	isAuthenticated: boolean;
 	status: string;
 	menuItems: typeof MENU_ITEMS;
-	handleLogout: () => void;
+	handleLogout: () => Promise<void>;
 	signIn: typeof signIn;
-	signOut: () => void;
+	signOut: () => Promise<void>;
 	anchorEl: HTMLButtonElement | null;
 	setAnchorEl: (el: HTMLButtonElement | null) => void;
 	open: boolean;
@@ -147,15 +147,15 @@ const User = ({ children }: Props) => {
 // Subcomponents
 User.MobileTrigger = function MobileTrigger() {
 	const ctx = useContext(UserContext);
+	const router = useRouter();
 	if (!ctx) return null;
 	const { isAuthenticated, signIn } = ctx;
-	const router = useRouter();
 	return (
 		<IconButton
 			aria-label="User Menu"
 			onClick={() => {
-				if (!isAuthenticated) signIn();
-				else router.push("/account/profile");
+				if (isAuthenticated) router.push("/account/profile");
+				else signIn();
 			}}
 		>
 			<MobileUserIcon style={{ fontSize: "1.25rem" }} />

package/src/components-v2/mini-cart/__tests__/cart-item.test.tsx

@@ -6,7 +6,7 @@ import { setupServer } from "msw/node";
 import { NextIntlClientProvider } from "next-intl";
 import type React from "react";
 import { vi } from "vitest";
-import type { Cart, CartLine } from "@/schemas/cart.schema";
+import type { Cart } from "@/schemas/cart.schema";
 import CartItem from "../components/cart-item";
 import cartData from "./test-cart-with-item.json";
 
@@ -36,10 +36,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.ProductDetails />
@@ -57,10 +57,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.QuantityControls />
@@ -80,10 +80,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={true}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.QuantityControls />
@@ -103,7 +103,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>
@@ -125,7 +125,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>
@@ -148,7 +148,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>

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

@@ -41,9 +41,9 @@ BottomActions.ViewCartButton = function ViewCartButton(
 	props: Omit<ButtonProps, "onClick" | "children">,
 ) {
 	const ctx = useContext(BottomActionsContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { total, handleNavigate } = ctx;
-	const t = useTranslations("Cart");
 	return (
 		<Button
 			fullWidth

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

@@ -74,9 +74,9 @@ const MiniCartItem = ({
 
 MiniCartItem.QuantityControls = () => {
 	const ctx = useContext(MiniCartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { item, handleCartAmountChange, isLineUpdating } = ctx;
-	const t = useTranslations("Cart.CartLine");
 	const quantity = item?.Quantity || 0;
 
 	if (isLineUpdating) {
@@ -173,7 +173,7 @@ MiniCartItem.ProductDetails = () => {
 			</Link>
 			<H6 color="grey.600" mt={0.5}>
 				{item?.Product?.Dimensions?.map((d, i) => (
-					<span key={i}>{d?.DimensionValue?.Value + " "}</span>
+					<span key={`dim-${i + 1}`}>{`${d?.DimensionValue?.Value} `}</span>
 				))}
 			</H6>
 			<Tiny color="grey.600">
@@ -188,9 +188,9 @@ MiniCartItem.ProductDetails = () => {
 
 MiniCartItem.RemoveButton = () => {
 	const ctx = useContext(MiniCartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { item, handleCartAmountChange } = ctx;
-	const t = useTranslations("Cart.CartLine");
 	return (
 		<IconButton
 			size="small"

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

@@ -43,9 +43,9 @@ TopHeader.Heading = ({
 	icon?: React.ReactNode;
 }) => {
 	const ctx = useContext(TopHeaderContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { total } = ctx;
-	const t = useTranslations("Cart");
 
 	return (
 		<FlexBox gap={1} alignItems="center" color="secondary.main">
@@ -63,9 +63,9 @@ TopHeader.CloseButton = ({
 	icon?: React.ReactNode;
 }) => {
 	const ctx = useContext(TopHeaderContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { toggle } = ctx;
-	const t = useTranslations("Cart");
 
 	return (
 		<IconButton onClick={toggle} title={t("closeMiniCart")}>