@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/pages-v2/product-list/quick-view-dialog-content.tsx

@@ -1,38 +1,37 @@
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import type {
+	InventorySearchCriteriaInput,
+	ProductDetails,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import {
 	H1,
 	H2,
 	H6,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// import ImageWithFallback from "@app/_shared/ImageWithFallback";
-import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import useCart, {
+	type AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import {
 	Button,
 	CircularProgress,
 	DialogContent,
 	Typography,
 } from "@mui/material";
-import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-import ProductRating from "./product-rating";
-import useCart, {
-	AddToCartBopisInput,
-} from "@evenicanpm/storefront-core/src/hooks/use-cart";
-import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
-import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
-import {
-	InventorySearchCriteriaInput,
-	ProductDetails,
-} from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-import { useMemo, useState } from "react";
-import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
+import Grid from "@mui/material/Grid";
 import Link from "next/link";
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import ProductRating from "./product-rating";
 
 interface Props {
 	product: ProductSearchResult;
@@ -46,7 +45,7 @@ export default function QuickViewContent({
 	cart,
 	productDetails,
 	handleClose,
-}: Props) {
+}: Readonly<Props>) {
 	const [showDimensionError, setShowDimensionError] = useState(false);
 	const {
 		selectedVariant,
@@ -106,8 +105,7 @@ export default function QuickViewContent({
 
 	const getInventoryLabel = (): string | null => {
 		const aggregate =
-			shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-			shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 		if (aggregate) {
 			const { TotalAvailableInventoryLevelLabel } = aggregate;
 			return TotalAvailableInventoryLevelLabel || null;

package/src/pages-v2/product-list/quick-view-dialog.tsx

@@ -1,7 +1,7 @@
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import { CircularProgress, Dialog, DialogContent } from "@mui/material";
 import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { CircularProgress, Dialog, DialogContent } from "@mui/material";
 import QuickViewContent from "./quick-view-dialog-content";
 
 interface Props {
@@ -10,7 +10,11 @@ interface Props {
 	product: ProductSearchResult;
 }
 
-export default function QuickView({ open, handleClose, product }: Props) {
+export default function QuickView({
+	open,
+	handleClose,
+	product,
+}: Readonly<Props>) {
 	if (!open) {
 		return;
 	}

package/src/pages-v2/product-list/range-filter.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { Box, Typography, Slider, TextField } from "@mui/material";
-import { RenderedFacetProps } from "./facet-group";
 import {
 	ProductRefinerSource,
-	ProductRefinerValue,
+	type ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
-import React from "react";
+import { Box, Slider, TextField, Typography } from "@mui/material";
+import type React from "react";
+import { useEffect, useState } from "react";
+import type { RenderedFacetProps } from "./facet-group";
 
 type Props = RenderedFacetProps & {
 	selectedValues?: ProductRefinerValue;
@@ -44,7 +44,6 @@ export default function RangeFilter({
 			setMaxVal(Number(selectedValues.RightValueBoundString));
 			setTextMin(Number(selectedValues.LeftValueBoundString));
 			setTextMax(Number(selectedValues.RightValueBoundString));
-		} else {
 		}
 	}, [selectedValues]);
 

package/src/pages-v2/product-list/scrollbar.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { SxProps, Theme } from "@mui/material/styles";
-import { Props } from "simplebar-react";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { ReactNode } from "react";
+import type { Props } from "simplebar-react";
 import "simplebar-react/dist/simplebar.min.css";
 import { alpha, styled } from "@mui/material/styles";
 import SimpleBar from "simplebar-react";
@@ -29,7 +29,7 @@ export default function Scrollbar({
 	autoHide = true,
 	sx,
 	...props
-}: ScrollbarProps) {
+}: Readonly<ScrollbarProps>) {
 	return (
 		<StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
 			{children}

package/src/pages-v2/product-list/search-bar.tsx

@@ -1,24 +1,24 @@
 "use client";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import Apps from "@mui/icons-material/Apps";
+import FilterList from "@mui/icons-material/FilterList";
+import ViewList from "@mui/icons-material/ViewList";
 import {
 	Box,
+	IconButton,
 	MenuItem,
-	Typography,
-	ToggleButtonGroup,
-	ToggleButton,
 	TextField,
-	IconButton,
+	ToggleButton,
+	ToggleButtonGroup,
+	Typography,
 } from "@mui/material";
-import Apps from "@mui/icons-material/Apps";
-import ViewList from "@mui/icons-material/ViewList";
-import FilterList from "@mui/icons-material/FilterList";
-import { Theme } from "@mui/material/styles";
+import type { Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
-
-import useProductList from "./use-product-list";
-import { ViewMode } from "./utils/product-list-types";
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import Sidenav from "./side-nav";
+import useProductList from "./use-product-list";
+import type { ViewMode } from "./utils/product-list-types";
 
 const sxView = {
 	display: "flex",

package/src/pages-v2/product-list/selected-facets.tsx

@@ -1,12 +1,12 @@
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	ProductRefinerSource,
-	ProductRefinerValue,
+	type ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
 import { Button, Chip, Stack } from "@mui/material";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import React, { useState, useEffect } from "react";
-import useProductList from "./use-product-list";
 import { useTranslations } from "next-intl";
+import React, { useEffect, useState } from "react";
+import useProductList from "./use-product-list";
 
 export default function SelectedFacets() {
 	const t = useTranslations("ProductList.Facets");

package/src/pages-v2/product-list/side-nav.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, ReactNode } from "react";
 import Drawer from "@mui/material/Drawer";
+import { type ReactNode, useEffect, useState } from "react";
 // GLOBAL CUSTOM COMPONENT
 import Scrollbar from "./scrollbar";
 
@@ -14,7 +14,7 @@ interface Props {
 }
 // ================================================================
 
-export default function SideNav(props: Props) {
+export default function SideNav(props: Readonly<Props>) {
 	const {
 		position = "left",
 		open = false,

package/src/pages-v2/product-list/swatch.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { Box } from "@mui/material";
-import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
-import { Chip, useTheme } from "@mui/material";
-import { RenderedFacetProps } from "./facet-group";
+import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import { Box, Chip, useTheme } from "@mui/material";
+import type { RenderedFacetProps } from "./facet-group";
 
-type Props = RenderedFacetProps & NonNullable<unknown>;
+type Props = RenderedFacetProps;
 
 const cssColorName = (color: string | undefined) => {
 	if (!color) return false;
@@ -22,12 +21,21 @@ export default function Swatch({
 	facet,
 	handleRefinerSelect,
 	isRefinerSelected,
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 
 	return (
 		<Box mb={3}>
 			{facet.Values?.map((colorItem: ProductRefinerValue) => {
+				const borderStyle = (() => {
+					if (checkWhite(colorItem.LeftValueBoundString)) {
+						return "1px solid black";
+					}
+					if (isRefinerSelected(colorItem)) {
+						return "2px solid";
+					}
+					return "2px solid transparent";
+				})();
 				return (
 					<Box
 						key={colorItem.LeftValueBoundString}
@@ -49,11 +57,7 @@ export default function Swatch({
 										: theme.palette.grey[300]),
 								width: 32,
 								height: 32,
-								border: checkWhite(colorItem.LeftValueBoundString)
-									? "1px solid black"
-									: isRefinerSelected(colorItem)
-										? "2px solid"
-										: "2px solid transparent",
+								border: borderStyle,
 								"&:hover": {
 									backgroundColor:
 										colorItem.SwatchColorHexCode ||

package/src/pages-v2/product-list/utils/generate-breadcrumbs.ts

@@ -1,4 +1,4 @@
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { searchCategory } from "./search-for-category";
 
 const generateBreadcrumbs = (

package/src/pages-v2/product-list/utils/getCategoryFilterFromSlug.ts

@@ -10,6 +10,23 @@ export type Category = {
 	Children?: Category[];
 };
 
+const matchesSlug = (cat: Category, slug: string) => {
+	const url = cat?.Url?.toLowerCase() || "";
+	const name = cat?.Name?.toLowerCase() || "";
+	const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+	const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+
+	return (
+		url.includes(slug) ||
+		name === slug ||
+		neutralName === slug ||
+		seoCrumb === slug
+	);
+};
+
+const getCategoryId = (cat: Category, isD365: boolean) =>
+	isD365 ? cat.RecordId?.toString() : cat.id?.toString();
+
 export function getCategoryIdFromSlug(
 	slug: string[],
 	categories: Category[],
@@ -23,18 +40,9 @@ export function getCategoryIdFromSlug(
 		const parentSlug = slug[0]?.toLowerCase();
 		const childSlug = slug[1]?.toLowerCase();
 
-		const parentCategory = categories.find((cat) => {
-			const url = cat?.Url?.toLowerCase() || "";
-			const name = cat?.Name?.toLowerCase() || "";
-			const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-			const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-			return (
-				url.includes(parentSlug) ||
-				name === parentSlug ||
-				neutralName === parentSlug ||
-				seoCrumb === parentSlug
-			);
-		});
+		const parentCategory = categories.find((cat) =>
+			matchesSlug(cat, parentSlug),
+		);
 
 		if (!parentCategory) {
 			console.warn(
@@ -44,74 +52,30 @@ export function getCategoryIdFromSlug(
 			return undefined;
 		}
 
-		const childMatch = parentCategory.Children?.find((cat) => {
-			const url = cat?.Url?.toLowerCase() || "";
-			const name = cat?.Name?.toLowerCase() || "";
-			const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-			const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-			return (
-				url.includes(childSlug) ||
-				name === childSlug ||
-				neutralName === childSlug ||
-				seoCrumb === childSlug
-			);
-		});
-		if (childMatch) {
-			return isD365
-				? childMatch.RecordId?.toString()
-				: childMatch.id?.toString();
-		}
+		const childMatch = parentCategory.Children?.find((cat) =>
+			matchesSlug(cat, childSlug),
+		);
 
-		return undefined;
+		return childMatch ? getCategoryId(childMatch, isD365) : undefined;
 	}
 
 	const slugValue = slug[0]?.toLowerCase();
 
-	const topLevelMatch = categories.find((cat) => {
-		const url = cat?.Url?.toLowerCase() || "";
-		const name = cat?.Name?.toLowerCase() || "";
-		const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-		const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-		return (
-			url.includes(slugValue) ||
-			name === slugValue ||
-			neutralName === slugValue ||
-			seoCrumb === slugValue
-		);
-	});
+	const topLevelMatch = categories.find((cat) => matchesSlug(cat, slugValue));
 
 	if (topLevelMatch) {
-		return isD365
-			? topLevelMatch.RecordId?.toString()
-			: topLevelMatch.id?.toString();
+		return getCategoryId(topLevelMatch, isD365);
 	}
 
-	let childMatch: Category | undefined;
 	for (const topLevelCat of categories) {
-		if (topLevelCat.Children && topLevelCat.Children.length > 0) {
-			const child = topLevelCat.Children.find((cat) => {
-				const url = cat?.Url?.toLowerCase() || "";
-				const name = cat?.Name?.toLowerCase() || "";
-				const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-				const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-				return (
-					url.includes(slugValue) ||
-					name === slugValue ||
-					neutralName === slugValue ||
-					seoCrumb === slugValue
-				);
-			});
-			if (child) {
-				childMatch = child;
-				break;
-			}
+		const child = topLevelCat.Children?.find((cat) =>
+			matchesSlug(cat, slugValue),
+		);
+		if (child) {
+			return getCategoryId(child, isD365);
 		}
 	}
 
-	if (childMatch) {
-		return isD365 ? childMatch.RecordId?.toString() : childMatch.id?.toString();
-	}
-
 	return undefined;
 }
 
@@ -142,7 +106,8 @@ export function getCategoryFilterFromSlug(
 			});
 			if (children.length > 0) {
 				return children
-					.map((child) => (child.seoCrumb || child.Url || child.Name) as string)
+					.map((child) => child.seoCrumb || child.Url || child.Name)
+					.filter(Boolean)
 					.join("|");
 			}
 		}

package/src/pages-v2/product-list/utils/product-list-helper.ts

@@ -1,8 +1,8 @@
-import { IQueryResultSettings } from "@msdyn365-commerce/retail-proxy";
-import { PageKey, SortOption } from "./product-list-types";
-import getSortOptions from "./sort-options";
+import type { SearchByCriteriaInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import { convertParameterToRefiner } from "@evenicanpm/storefront-core/src/lib/refiner-utils";
-import { SearchByCriteriaInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { IQueryResultSettings } from "@msdyn365-commerce/retail-proxy";
+import { PageKey, type SortOption } from "./product-list-types";
+import getSortOptions from "./sort-options";
 
 const getDefaultValueByPageKey = (pageKey: PageKey) => {
 	switch (pageKey) {
@@ -42,7 +42,7 @@ const getSelectedSortOption = (
 const getCategoryFromSlug = (slug: string[]) => {
 	if (Array.isArray(slug)) {
 		const categoryId = Number(slug.pop());
-		if (!isNaN(categoryId)) {
+		if (!Number.isNaN(categoryId)) {
 			return categoryId;
 		}
 	}

package/src/pages-v2/product-list/utils/product-list-types.ts

@@ -1,4 +1,4 @@
-import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
 
 export const PageKey = {
 	TOP: "perPage",

package/src/pages-v2/product-list/utils/search-for-category.ts

@@ -1,6 +1,6 @@
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
-import { TextValueTranslation } from "@msdyn365-commerce/retail-proxy";
+import type { TextValueTranslation } from "@msdyn365-commerce/retail-proxy";
 
 const searchCategory = (
 	locale: string,
@@ -53,11 +53,11 @@ const getCategoryTranslatedName = (
 			(item) => item.Language?.toLowerCase() === locale.toLowerCase(),
 		);
 	}
-	return nameTranslation && nameTranslation.Text;
+	return nameTranslation?.Text;
 };
 
 const normalizeCategoryName = (name: string) =>
-	name.toLowerCase().replace(/ /g, "-");
+	name.toLowerCase().replaceAll(" ", "-");
 
 const getCategoryUrl = (category: CategoryHierarchy) => {
 	const contentPageKey = PageSlug.Content;

package/src/pages-v2/product-list/utils/sort-options.ts

@@ -1,4 +1,4 @@
-import { SortOption } from "./product-list-types";
+import type { SortOption } from "./product-list-types";
 
 const sortOptions: SortOption[] = [
 	{