@evenicanpm/storefront-core 1.3.0 → 1.6.0

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

@@ -18,7 +18,7 @@ import { cloneElement } from "react";
 /**
  * Root component of the ProductsListView.
  */
-export default function ProductsListView(props: ProductsViewProps) {
+export default function ProductsListView(props: Readonly<ProductsViewProps>) {
 	const { pagination, products, productPrices, children } = props;
 	console.log(props);
 	return (
@@ -42,14 +42,14 @@ ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
 	const { products, productPrices } = useProductsView();
 	return (
 		<>
-			{products.map((item: Product, i) => {
+			{products.map((item: Product) => {
 				const matchingPrice = productPrices?.find(
 					(price) => price.ProductId === item.RecordId,
 				);
 				// Legacy API, consider alternatives.
 				// Using this to pass props to child.
 				return cloneElement(children, {
-					key: i,
+					key: item.RecordId ?? item.ItemId,
 					product: item,
 					price: matchingPrice,
 				});

package/src/components-v2/products-view/index.tsx

@@ -20,7 +20,7 @@ export interface Props {
  * TODO: Add Pagination to storybook
  *
  */
-export function ProductsGrid(props: Props) {
+export function ProductsGrid(props: Readonly<Props>) {
 	return (
 		<ProductsGridView {...props}>
 			<ProductsGridView.Grid>
@@ -35,7 +35,7 @@ export function ProductsGrid(props: Props) {
  * Pre-composed implementation of ProductList
  *
  */
-export function ProductsList(props: Props) {
+export function ProductsList(props: Readonly<Props>) {
 	return (
 		<ProductsListView {...props}>
 			<ProductsListView.List>

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

@@ -38,7 +38,7 @@ export default function ProgressBar() {
 		const mutationObserver = new MutationObserver(handleMutation);
 		mutationObserver.observe(document, { childList: true, subtree: true });
 
-		window.history.pushState = new Proxy(window.history.pushState, {
+		globalThis.history.pushState = new Proxy(globalThis.history.pushState, {
 			apply: (target, thisArg, argArray: PushStateInput) => {
 				NProgress.done();
 				return target.apply(thisArg, argArray);

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

@@ -18,7 +18,7 @@ export default function Scolbar({
 	autoHide = true,
 	sx,
 	...props
-}: ScrollbarProps) {
+}: Readonly<ScrollbarProps>) {
 	return (
 		<StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
 			{children}

package/src/components-v2/search-bar/compound/results-suspense.tsx

@@ -9,7 +9,6 @@ import ResultItemCardLg from "@evenicanpm/storefront-core/src/components-v2/sear
 import ResultItemCardSm from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-sm";
 import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import { CircularProgress } from "@mui/material";
-import _ from "lodash";
 import type React from "react";
 import { Suspense } from "react";
 
@@ -24,7 +23,7 @@ import { Suspense } from "react";
 export default function SearchResultSuspense({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const { state } = useSearchContext();
 	return (

package/src/components-v2/search-bar/compound/results.tsx

@@ -19,7 +19,7 @@ import type React from "react";
 export default function SearchResultsContainer({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const t = useTranslations();
 	const { state } = useSearchContext();
@@ -36,8 +36,11 @@ export default function SearchResultsContainer({
 	return (
 		<SearchResultCard>
 			<Grid container>
-				{results.map((item, i) => (
-					<SearchResultItemContext.Provider value={item} key={i}>
+				{results.map((item) => (
+					<SearchResultItemContext.Provider
+						value={item}
+						key={item.RecordId ?? item.ItemId}
+					>
 						{children}
 					</SearchResultItemContext.Provider>
 				))}

package/src/components-v2/search-bar/compound/search-bar-root.tsx

@@ -12,7 +12,6 @@ import { useClickOutside } from "@evenicanpm/storefront-core/src/components-v2/s
 // local hooks
 import useSearch from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-search";
 import Box from "@mui/material/Box";
-import _ from "lodash";
 import type React from "react";
 import { useRef } from "react";
 
@@ -33,7 +32,10 @@ interface Props {
  * </SearchBar>
  *
  */
-export default function SearchBarRoot({ handleCloseDrawer, children }: Props) {
+export default function SearchBarRoot({
+	handleCloseDrawer,
+	children,
+}: Readonly<Props>) {
 	const { setters, handlers, state } = useSearch();
 	const inputRef = useRef(null);
 	useClickOutside(inputRef, () => setters.setResultsOpen(false));

package/src/components-v2/search-bar/compound/textfield-adornment-category.tsx

@@ -51,33 +51,31 @@ const CategoryDropdown = ({
 	const title = findCategoryNameById(selectedCategoryId, categories, t);
 
 	return (
-		<>
-			<Menu
-				direction="left"
-				sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
-				handler={(e) => (
-					<DropDownHandler as={TouchRipple} onClick={e}>
-						{title}
-						<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
-					</DropDownHandler>
-				)}
-				options={(onClose) => {
-					return options
-						?.filter((current: DisplayCategory) => current.name !== title)
-						.map((item: DisplayCategory) => (
-							<MenuItem
-								key={item.id}
-								onClick={() => {
-									handleChange(item.id);
-									onClose();
-								}}
-							>
-								{item.name}
-							</MenuItem>
-						));
-				}}
-			/>
-		</>
+		<Menu
+			direction="left"
+			sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
+			handler={(e) => (
+				<DropDownHandler as={TouchRipple} onClick={e}>
+					{title}
+					<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+				</DropDownHandler>
+			)}
+			options={(onClose) => {
+				return options
+					?.filter((current: DisplayCategory) => current.name !== title)
+					.map((item: DisplayCategory) => (
+						<MenuItem
+							key={item.id}
+							onClick={() => {
+								handleChange(item.id);
+								onClose();
+							}}
+						>
+							{item.name}
+						</MenuItem>
+					));
+			}}
+		/>
 	);
 };
 

package/src/components-v2/search-bar/compound/textfield.tsx

@@ -9,7 +9,6 @@ import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/s
 import { INPUT_SX } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import { useMediaQuery, useTheme } from "@mui/material";
 import TextField from "@mui/material/TextField";
-import _ from "lodash";
 import { useTranslations } from "next-intl";
 import React from "react";
 

package/src/components-v2/search-bar/hooks/use-search.ts

@@ -26,7 +26,7 @@ export default function useSearch() {
 		if (searchText.trim() === "") {
 			return;
 		}
-		const url = new URL(PageSlug.ProductList, window.location.origin);
+		const url = new URL(PageSlug.ProductList, globalThis.location.origin);
 		url.searchParams.set(PageKey.SEARCH, searchText);
 		router.push(url.toString());
 		setResultsOpen(false);

package/src/components-v2/section/Section.stories.tsx

@@ -60,7 +60,7 @@ export const LongContent: Story = {
 			</Section.Header>
 
 			{Array.from({ length: 5 }).map((_, i) => (
-				<Typography key={i} paragraph>
+				<Typography key={`paragraph-${i + 1}`} paragraph>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Paragraph{" "}
 					{i + 1}.
 				</Typography>

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

@@ -13,7 +13,7 @@ interface Props {
 	handler: (event: () => void) => ReactNode;
 }
 
-export default function SideNav(props: Props) {
+export default function SideNav(props: Readonly<Props>) {
 	const {
 		position = "left",
 		open = false,

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-dialog.tsx

@@ -44,7 +44,7 @@ export default function AddToWishlistDialog({
 	handleClose,
 	productId,
 	children,
-}: AddToWishlistDialogProps) {
+}: Readonly<AddToWishlistDialogProps>) {
 	const { data: wishlists } = getWishlists.useSuspenseData();
 
 	const { data: session } = useSession();

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-list.tsx

@@ -33,8 +33,8 @@ const WishlistList = ({ children }: { children: React.ReactNode }) => {
 		return <NoRecords message="Account.Wishlists.noWishlists" />;
 	}
 
-	return wishlists?.map((wishlist: Wishlist, i: number) => (
-		<WishListItemContext.Provider value={{ wishlist }} key={i}>
+	return wishlists?.map((wishlist: Wishlist) => (
+		<WishListItemContext.Provider value={{ wishlist }} key={wishlist.Id}>
 			{children}
 		</WishListItemContext.Provider>
 	));

package/src/components-v2/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist.ts

@@ -56,6 +56,7 @@ export default function UseWishlist() {
 				message: t("wishlistLineAddFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -89,6 +90,7 @@ export default function UseWishlist() {
 				message: t("wishlistLineRemoveFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 

package/src/components-v2/wishlist-dialogs/add-to-wishlist/index.tsx

@@ -12,19 +12,17 @@ interface Props {
  */
 const AddToWishListDialog1 = ({ open, handleClose, productId }: Props) => {
 	return (
-		<>
-			<AddToWishlistDialog
-				open={open}
-				handleClose={handleClose}
-				productId={productId}
-			>
-				<AddToWishlistDialog.Header />
-				<AddToWishlistDialog.List>
-					<AddToWishlistDialog.List.Item />
-				</AddToWishlistDialog.List>
-				<AddToWishlistDialog.BottomUI />
-			</AddToWishlistDialog>
-		</>
+		<AddToWishlistDialog
+			open={open}
+			handleClose={handleClose}
+			productId={productId}
+		>
+			<AddToWishlistDialog.Header />
+			<AddToWishlistDialog.List>
+				<AddToWishlistDialog.List.Item />
+			</AddToWishlistDialog.List>
+			<AddToWishlistDialog.BottomUI />
+		</AddToWishlistDialog>
 	);
 };
 

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog.tsx

@@ -39,7 +39,7 @@ interface CreateNewWishlistContext {
 export const CreateNewWishlistContext =
 	createContext<CreateNewWishlistContext | null>(null);
 
-export default function CreateNewList(props: Props) {
+export default function CreateNewList(props: Readonly<Props>) {
 	const { children } = props;
 	const t = useTranslations("Account.Wishlists");
 	const { setNotification } = useNotification();
@@ -59,6 +59,7 @@ export default function CreateNewList(props: Props) {
 				message: t("wishlistFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 

package/src/hooks/use-variants.ts

@@ -51,7 +51,6 @@ export default function useVariants(product: ProductDetails) {
 	const handleSelectDimension = async (
 		dimensionValue: ProductDimensionValueInventoryAvailability,
 	) => {
-		//prefetchPDPData(dimensionValue, queryClient);
 		dispatch({
 			type: "SELECT_DIMENSION",
 			dimensionValue,
@@ -98,37 +97,36 @@ const prefetchPDPData = (
  * Reducer synchronizes selected dimensions and variant ID
  */
 const variantReducer = (state: VariantState, action: VariantAction) => {
-	switch (action.type) {
-		case "SELECT_DIMENSION": {
-			const newDimensionsState: SelectedDimensions = {
-				...state.selectDimensions,
-				[action.dimensionValue?.DimensionTypeValue ?? ""]:
-					action.dimensionValue,
-			};
-
-			const allDimensionsSelected =
-				Object.keys(newDimensionsState).length === action.totalDimensions;
-
-			// We cannot select a variant until all dimensions are selected
-			if (!allDimensionsSelected)
-				return {
-					...state,
-					selectDimensions: newDimensionsState,
-					selectedVariantRecordId: undefined,
-				};
-
-			const dimensionsArray = Object.values(newDimensionsState);
+	if (action.type === "SELECT_DIMENSION") {
+		const newDimensionsState: SelectedDimensions = {
+			...state.selectDimensions,
+			[action.dimensionValue?.DimensionTypeValue ?? ""]: action.dimensionValue,
+		};
 
-			// Deduce product id from selected dimensions
-			const intersectedVariantIds = dimensionsArray.reduce((ids, dimension) => {
-				return ids.filter((id) => dimension.ProductIds?.includes(id));
-			}, dimensionsArray[0]?.ProductIds || []);
+		const allDimensionsSelected =
+			Object.keys(newDimensionsState).length === action.totalDimensions;
 
+		// We cannot select a variant until all dimensions are selected
+		if (!allDimensionsSelected)
 			return {
 				...state,
 				selectDimensions: newDimensionsState,
-				selectedVariantRecordId: intersectedVariantIds[0], // There can be only one!
+				selectedVariantRecordId: undefined,
 			};
-		}
+
+		const dimensionsArray = Object.values(newDimensionsState);
+
+		// Deduce product id from selected dimensions
+		const intersectedVariantIds = dimensionsArray.reduce((ids, dimension) => {
+			return ids.filter((id) => dimension.ProductIds?.includes(id));
+		}, dimensionsArray[0]?.ProductIds || []);
+
+		return {
+			...state,
+			selectDimensions: newDimensionsState,
+			selectedVariantRecordId: intersectedVariantIds[0], // There can be only one!
+		};
 	}
+
+	return state;
 };

package/src/lib/build-detail-url.ts

@@ -4,6 +4,6 @@ const buildDetailUrl = (name: string, id: number) =>
 	`/${PageSlug.ProductDetail}/${normalizeName(name)}/${id}`;
 
 const normalizeName = (name: string) =>
-	name ? name.toLowerCase().replace(/ /g, "-") : "";
+	name ? name.toLowerCase().replaceAll(" ", "-") : "";
 
 export default buildDetailUrl;

package/src/lib/category-helpers.ts

@@ -67,7 +67,7 @@ const mapCategoryToHierarchy = (
 		return categoryHierarchy;
 	}
 
-	return JSON.parse(JSON.stringify(rootCategory.Children)) ?? [];
+	return globalThis.structuredClone(rootCategory.Children) ?? [];
 };
 
 const generateUrl = (
@@ -86,7 +86,7 @@ const generateUrl = (
 		);
 	}
 	categoryNames.unshift(currentCategory.RecordId.toString());
-	return categoryNames.reverse().join("/");
+	return categoryNames.slice().reverse().join("/");
 };
 
 const getFriendlyName = (
@@ -99,7 +99,7 @@ const getFriendlyName = (
 			(item) => item?.Language?.toLowerCase() === locale?.toLowerCase(),
 		);
 	}
-	return nameTranslation && nameTranslation.Text;
+	return nameTranslation?.Text;
 };
 
 const normalizeCategoryName = (string_: string) =>

package/src/lib/get-palette-color.ts

@@ -3,6 +3,36 @@ import type { Theme } from "@mui/material";
 // Define a union type for possible color values
 type ColorValue = string | number | (() => string);
 
+// Helper to resolve possible function values
+const resolveColorValue = (value: ColorValue): string => {
+	return typeof value === "function" ? value() : String(value);
+};
+
+// Helper to get main color if available
+const getMainColor = (colorObj: Record<string, ColorValue>): string => {
+	if ("main" in colorObj) {
+		const mainValue = colorObj.main;
+		return resolveColorValue(mainValue);
+	}
+	return "";
+};
+
+// Helper to get shade color if available
+const getShadeColor = (
+	colorObj: Record<string, ColorValue>,
+	shade: number | string,
+): string | undefined => {
+	const shadeKey = shade.toString();
+
+	// Try to access the shade
+	if (shadeKey in colorObj) {
+		const value = colorObj[shadeKey];
+		return resolveColorValue(value);
+	}
+
+	return undefined;
+};
+
 // Type-safe color getter function
 const getPaletteColor = (
 	theme: Theme,
@@ -21,30 +51,20 @@ const getPaletteColor = (
 
 	// If shade is specified, try to get it
 	if (shade !== undefined) {
-		const shadeKey = shade.toString();
+		const shadeColor = getShadeColor(colorObj, shade);
 
-		// Try to access the shade
-		if (shadeKey in colorObj) {
-			const value = colorObj[shadeKey];
-			// Handle possible function values
-			return typeof value === "function" ? value() : String(value);
+		if (shadeColor) {
+			return shadeColor;
 		}
 
 		// Check if this is a PaletteColor with main/dark/light properties
-		if ("main" in colorObj) {
-			const mainValue = colorObj.main;
-			return typeof mainValue === "function" ? mainValue() : String(mainValue);
-		}
+		return getMainColor(colorObj);
 	}
 
 	// If no shade specified but color has 'main' property
-	if ("main" in colorObj) {
-		const mainValue = colorObj.main;
-		return typeof mainValue === "function" ? mainValue() : String(mainValue);
-	}
+	return getMainColor(colorObj);
 
 	// Last resort fallback
-	return "";
 };
 
 export default getPaletteColor;

package/src/lib/hexToLuma.ts

@@ -8,7 +8,7 @@ function sRGBtoLin(colorChannel: number): number {
 		return ((colorChannel + 0.055) / 1.055) ** 2.4;
 	}
 }
-1;
+
 function YtoLstar(Y: number): number {
 	// Send this function a luminance value between 0.0 and 1.0,
 	// and it returns L* which is "perceptual lightness"
@@ -30,7 +30,7 @@ export const hexToLuma = (hex: string): number => {
 		throw new Error("not a valid hex color code");
 	}
 
-	const number = Number.parseInt(hex[0] === "#" ? hex.slice(1) : hex, 16);
+	const number = Number.parseInt(hex.startsWith("#") ? hex.slice(1) : hex, 16);
 	const red = number >> 16;
 	const green = (number >> 8) & 255;
 	const blue = number & 255;

package/src/lib/store-hours-helper.ts

@@ -46,7 +46,7 @@ export const secondsToTime = (
 	let hours = Math.floor(seconds / (60 * 60));
 	const ampm = hours >= 12 ? "pm" : "am";
 	hours %= 12;
-	hours = hours ? hours : 12;
+	hours = hours || 12;
 	const divisorForMinutes = seconds % (60 * 60);
 	const minutes =
 		Math.floor(divisorForMinutes / 60) < 10
@@ -107,13 +107,13 @@ const buildHoursDisplayInfo = (
 	hoursInfo: string,
 	resources: IStoreSelectorLocationLineItemResources,
 ): IHoursDisplayInfo => {
+	const isSameDay = startDay === endDay;
+
 	return {
 		startDayShort: getShortTimeString(startDay, resources),
 		startDayFull: getFullTimeString(startDay, resources),
-		endDayShort:
-			startDay !== endDay ? getShortTimeString(endDay, resources) : undefined,
-		endDayFull:
-			startDay !== endDay ? getFullTimeString(endDay, resources) : undefined,
+		endDayShort: isSameDay ? undefined : getShortTimeString(endDay, resources),
+		endDayFull: isSameDay ? undefined : getFullTimeString(endDay, resources),
 		timeRange: hoursInfo,
 	};
 };

package/src/pages-v2/account/addresses/address-form.tsx

@@ -43,7 +43,8 @@ interface RootProps {
 }
 
 const AddressForm = ({ address, children }: RootProps) => {
-	const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
+	const tn = useTranslations("Account.Addresses");
+	const t = useTranslations("Address");
 	const { setNotification } = useNotification();
 	const router = useRouter();
 	const locale = useLocale();
@@ -118,6 +119,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 				message: tn("addressFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -153,9 +155,9 @@ AddressForm.Fields = ({ children }: { children?: React.ReactNode }) => {
 
 AddressForm.Field = ({ name, label, required }: FieldProps) => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -180,9 +182,9 @@ AddressForm.Field = ({ name, label, required }: FieldProps) => {
 
 AddressForm.Country = () => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik, countries, setSelectedCountry } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -210,8 +212,8 @@ AddressForm.Country = () => {
 					}}
 				>
 					<MenuItem value="">Select Country</MenuItem>
-					{countries?.map(({ ShortName, CountryRegionId }, i) => (
-						<MenuItem key={i} value={CountryRegionId}>
+					{countries?.map(({ ShortName, CountryRegionId }) => (
+						<MenuItem key={CountryRegionId} value={CountryRegionId}>
 							{ShortName}
 						</MenuItem>
 					))}
@@ -230,9 +232,9 @@ AddressForm.Country = () => {
 
 AddressForm.State = () => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik, states } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -253,8 +255,8 @@ AddressForm.State = () => {
 					onBlur={formik.handleBlur}
 				>
 					<MenuItem value="">Select a state</MenuItem>
-					{states?.map(({ StateId, StateName }, i) => (
-						<MenuItem key={i} value={StateId}>
+					{states?.map(({ StateId, StateName }) => (
+						<MenuItem key={StateId} value={StateId}>
 							{StateName}
 						</MenuItem>
 					))}

package/src/pages-v2/account/addresses/address-item.tsx

@@ -114,9 +114,9 @@ AddressListItem.Actions = ({ children }: { children: ReactNode }) => {
 
 AddressListItem.Primary = () => {
 	const ctx = useContext(AddressContext);
+	const t = useTranslations("Account.Addresses");
 	if (!ctx) return null;
 	const { address, setPrimaryAddress } = ctx;
-	const t = useTranslations("Account.Addresses");
 	const rid = address.RecordId?.toString();
 	const addrId = address.Id ?? rid ?? "";
 

package/src/pages-v2/account/orders/order-progress.tsx

@@ -85,7 +85,7 @@ OrderProgress.Steps = () => {
 	return (
 		<StyledFlexbox>
 			{stepIcons.map((Icon, index) => (
-				<Fragment key={index}>
+				<Fragment key={`step-${index + 1}`}>
 					<Box position="relative">
 						<Avatar
 							alt="step"

package/src/pages-v2/account/orders/ordered-products.tsx

@@ -141,7 +141,7 @@ OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
 	return (
 		<Grid size={{ xs: 8, sm: 4 }}>
 			{item.Product.Dimensions.map((dim, i) => (
-				<Paragraph key={i} paddingLeft={"15px"}>
+				<Paragraph key={`product-dim-${i + 1}`} paddingLeft={"15px"}>
 					<Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
 					<Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
 				</Paragraph>