@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/pages-v2/product-details/product-intro/compound/product-intro-images.tsx

@@ -1,6 +1,4 @@
 "use client";
-import Grid from "@mui/material/Grid2";
-import React, { useContext, useState } from "react";
 // GLOBAL CUSTOM COMPONENTS
 import {
 	FlexBox,
@@ -12,6 +10,9 @@ import {
 	ProductIntroContext,
 } from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
 import ThumbnailWithSkeleton from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton";
+import Grid from "@mui/material/Grid2";
+import type React from "react";
+import { useContext, useState } from "react";
 
 type Props = {
 	children: React.ReactNode;
@@ -20,7 +21,7 @@ type Props = {
 /**
  * @category Compound Component
  */
-export default function ProductImages({ children }: Props) {
+export default function ProductImages({ children }: Readonly<Props>) {
 	const [selectedImageIndex, setSelectedImageIndex] = useState<number>(0);
 
 	const ctx = useContext(ProductIntroContext);
@@ -33,12 +34,19 @@ export default function ProductImages({ children }: Props) {
 	 * VARIANT SELECTION - IF VARIANT HAS IMAGES, USE THOSE
 	 * IF NOT USE masterProduct
 	 */
-	const images =
-		Array.isArray(selectedVariant?.Images) && selectedVariant?.Images.length > 0
-			? selectedVariant?.Images
-			: Array.isArray(masterProduct?.Images) && masterProduct?.Images.length > 0
-				? masterProduct?.Images
-				: [];
+	let images: string[] = [];
+
+	if (
+		Array.isArray(selectedVariant?.Images) &&
+		selectedVariant.Images.length > 0
+	) {
+		images = selectedVariant.Images;
+	} else if (
+		Array.isArray(masterProduct?.Images) &&
+		masterProduct.Images.length > 0
+	) {
+		images = masterProduct.Images;
+	}
 
 	const primaryImageUrl =
 		selectedVariant?.PrimaryImageUrl || masterProduct?.PrimaryImageUrl || "";
@@ -79,30 +87,28 @@ ProductImages.Thumbnails = () => {
 	const { images, handleImageClick, selectedImageIndex } = ctx;
 
 	return (
-		<>
-			<FlexBox overflow="auto" gap={1} justifyContent="center">
-				{images?.map((url: string, ind: number) => {
-					return (
-						<FlexRowCenter
-							key={ind}
-							width={64}
-							height={64}
-							minWidth={64}
-							bgcolor="white"
-							border="1px solid"
-							borderRadius="10px"
-							style={{ cursor: "pointer" }}
-							onClick={handleImageClick(ind)}
-							borderColor={
-								selectedImageIndex === ind ? "primary.main" : "grey.400"
-							}
-						>
-							<ThumbnailWithSkeleton src={url} />
-						</FlexRowCenter>
-					);
-				})}
-			</FlexBox>
-		</>
+		<FlexBox overflow="auto" gap={1} justifyContent="center">
+			{images?.map((url: string, ind: number) => {
+				return (
+					<FlexRowCenter
+						key={`thumbnail-${ind + 1}`}
+						width={64}
+						height={64}
+						minWidth={64}
+						bgcolor="white"
+						border="1px solid"
+						borderRadius="10px"
+						style={{ cursor: "pointer" }}
+						onClick={handleImageClick(ind)}
+						borderColor={
+							selectedImageIndex === ind ? "primary.main" : "grey.400"
+						}
+					>
+						<ThumbnailWithSkeleton src={url} />
+					</FlexRowCenter>
+				);
+			})}
+		</FlexBox>
 	);
 };
 

package/src/pages-v2/product-details/product-intro/compound/product-intro.tsx

@@ -1,12 +1,12 @@
 "use client";
-import React from "react";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
-import ProductImages from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-intro-images";
-import ProductInfo from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-info";
 import { ProductIntroContext } from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
+import ProductInfo from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-info";
+import ProductImages from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-intro-images";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import type React from "react";
 
 /**
  * Master product data comes in as prop, selected variant details are called
@@ -14,7 +14,7 @@ import { ProductIntroContext } from "@evenicanpm/storefront-core/src/pages-v2/pr
  */
 type Props = { product: ProductDetails; children: React.ReactNode };
 
-export default function ProductIntro({ product, children }: Props) {
+export default function ProductIntro({ product, children }: Readonly<Props>) {
 	// HOOKS
 	const {
 		selectedVariant,

package/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -1,11 +1,11 @@
-import { useState } from "react";
 import { Skeleton } from "@mui/material";
+import { useState } from "react";
 
 /**
  * Shows a skeleton until the image loads
  * @category Sub-Component
  */
-function ThumbnailWithSkeleton({ src }: { src: string }) {
+function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
 	const [loaded, setLoaded] = useState(false);
 
 	return (

package/src/pages-v2/product-details/product-intro/utils.ts

@@ -1,11 +1,10 @@
-import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
+import type { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
 
 export const getInventoryLabel = (
 	shippingInventoryData?: ProductWarehouseInventoryInformation,
 ): string | null => {
 	const aggregate =
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+		shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 	if (aggregate) {
 		const { TotalAvailableInventoryLevelLabel } = aggregate;
 		return TotalAvailableInventoryLevelLabel || null;
@@ -19,8 +18,7 @@ export const checkProductOOS = (
 	//TODO: Incorporate global inventory enabled flag.
 	const OOSCode = "OOS"; // Always means out of stock
 	const aggregate =
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+		shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 	if (aggregate) {
 		const { TotalAvailableInventoryLevelCode } = aggregate;
 		return TotalAvailableInventoryLevelCode === OOSCode;

package/src/pages-v2/product-details/product-review.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Rating from "@mui/material/Rating";
-import TextField from "@mui/material/TextField";
-import * as yup from "yup";
-import { useFormik } from "formik";
-// Local CUSTOM COMPONENT
-import ProductComment from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-comment";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
 	H2,
 	H5,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// Local CUSTOM COMPONENT
+import ProductComment from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-comment";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Rating from "@mui/material/Rating";
+import TextField from "@mui/material/TextField";
+import { useFormik } from "formik";
+import * as yup from "yup";
 
 export default function ProductReview() {
 	const initialValues = {
@@ -48,7 +48,7 @@ export default function ProductReview() {
 	return (
 		<div>
 			{commentList.map((item, ind) => (
-				<ProductComment {...item} key={ind} />
+				<ProductComment {...item} key={`comment-${ind + 1}`} />
 			))}
 
 			<H2 fontWeight="600" mt={7} mb={2.5}>

package/src/pages-v2/product-details/product-tabs.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React, { useContext, useState, createContext } from "react";
+// LOCAL CUSTOM COMPONENTS
+import ProductDescription from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-description";
+import type { AttributeValue } from "@msdyn365-commerce/retail-proxy";
 import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
-import styled from "@mui/material/styles/styled";
-
-// LOCAL CUSTOM COMPONENTS
-import ProductDescription from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-description";
-import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
+import type React from "react";
+import { createContext, useContext, useState } from "react";
 
 // STYLED COMPONENT
 const StyledTabs = styled(Tabs)(({ theme }) => ({
@@ -37,7 +37,7 @@ interface TabPanelProps {
 	value: number;
 }
 
-function CustomTabPanel(props: TabPanelProps) {
+function CustomTabPanel(props: Readonly<TabPanelProps>) {
 	const { children, value, index, ...other } = props;
 
 	return (
@@ -52,7 +52,10 @@ const TabsContext = createContext<TabsContext | null>(null);
 /**
  * @category Compound Component
  */
-export default function ProductTabs({ productAttributes, children }: Props) {
+export default function ProductTabs({
+	productAttributes,
+	children,
+}: Readonly<Props>) {
 	const [selectedOption, setSelectedOption] = useState(0);
 	const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
 		setSelectedOption(value);

package/src/pages-v2/product-details/related-products.tsx

@@ -1,18 +1,18 @@
 "use client";
 
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
 // CUSTOM DATA MODEL
 import GetRelatedProductsDataFetcher from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-related-products";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
+// GLOBAL CUSTOM COMPONENTS
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
 
 // ==============================================================
 type Props = { RecordId: number };
 // ==============================================================
 
-export default function RelatedProducts({ RecordId }: Props) {
+export default function RelatedProducts({ RecordId }: Readonly<Props>) {
 	const { data: products } = GetRelatedProductsDataFetcher.useData({
 		id: RecordId,
 	});
@@ -21,12 +21,15 @@ export default function RelatedProducts({ RecordId }: Props) {
 			<H3 mb={3}>Related Products</H3>
 
 			<Grid container spacing={3}>
-				{products?.map((item, ind) => (
-					<Grid size={{ lg: 3, md: 4, sm: 6, xs: 12 }} key={ind}>
+				{products?.map((item) => (
+					<Grid
+						size={{ lg: 3, md: 4, sm: 6, xs: 12 }}
+						key={item.RecordId ?? item.ItemId}
+					>
 						<ProductCard
 							product={{
 								id: item.ItemId ?? "",
-								slug: String(item?.RecordId) ?? "",
+								slug: String(item?.RecordId ?? ""),
 								title: item.Name ?? "",
 								price: item.Price ?? 0,
 								imgUrl: item.PrimaryImageUrl ?? "",

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

@@ -1,11 +1,11 @@
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { Breadcrumbs, Typography } from "@mui/material";
-import React from "react";
 import Link from "next/link";
+import React from "react";
 import {
 	getCategoryTranslatedName,
 	getCategoryUrl,
 } from "./utils/search-for-category";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 
 type Props = {
 	breadcrumbs: CategoryHierarchy[];
@@ -17,7 +17,7 @@ export default function CategoryBreadcrumbs({
 	breadcrumbs,
 	locale,
 	productName,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Breadcrumbs>
 			{breadcrumbs.map((bc, index) =>

package/src/pages-v2/product-list/checkbox-label.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
+import Checkbox, { type CheckboxProps } from "@mui/material/Checkbox";
 // MUI
 import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox, { CheckboxProps } from "@mui/material/Checkbox";
+import type { ReactNode } from "react";
 
 // ==============================================================
 interface Props extends CheckboxProps {
@@ -9,7 +9,7 @@ interface Props extends CheckboxProps {
 }
 // ==============================================================
 
-export default function CheckboxLabel({ label, ...props }: Props) {
+export default function CheckboxLabel({ label, ...props }: Readonly<Props>) {
 	return (
 		<FormControlLabel
 			label={label}

package/src/pages-v2/product-list/facet-group.tsx

@@ -1,19 +1,19 @@
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { areRefinersEqual } from "@evenicanpm/storefront-core/src/lib/refiner-utils";
 import {
 	AttributeDataType,
 	DisplayTemplate,
-	ProductRefiner,
+	type ProductRefiner,
 	ProductRefinerSource,
-	ProductRefinerValue,
+	type ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Box, ButtonBase, Collapse, FormGroup } from "@mui/material";
 import React from "react";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import Swatch from "./swatch";
-import RangeFilter from "./range-filter";
 import ListFilter from "./list-filter";
-import { areRefinersEqual } from "@evenicanpm/storefront-core/src/lib/refiner-utils";
+import RangeFilter from "./range-filter";
+import Swatch from "./swatch";
 
 type Props = {
 	facet: ProductRefiner;
@@ -31,7 +31,7 @@ export default function FacetGroup({
 	facet,
 	selectedRefiners,
 	handleRefinerSelect,
-}: Props) {
+}: Readonly<Props>) {
 	const isAnyRefinerFromFacetSelected = () =>
 		facet.Values?.some((v) => isRefinerSelected(v));
 	const isRefinerSelected = (r1: ProductRefinerValue) =>

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

@@ -1,12 +1,13 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
-import { Box, Divider } from "@mui/material";
 import FacetGroup from "@evenicanpm/storefront-core/src/pages/product-list/facet-group";
-import {
+import type {
 	ProductRefiner,
 	ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
+import { Box, Divider } from "@mui/material";
+import type React from "react";
+import { createContext, useContext } from "react";
 
 type Ctx = {
 	facets: ProductRefiner[];

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

@@ -1,14 +1,14 @@
-import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
-import React from "react";
-import CheckboxLabel from "./checkbox-label";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { RenderedFacetProps } from "./facet-group";
+import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import React from "react";
+import CheckboxLabel from "./checkbox-label";
+import type { RenderedFacetProps } from "./facet-group";
 
-type Props = RenderedFacetProps & NonNullable<unknown>;
+type Props = RenderedFacetProps;
 
 const generateKey = (f: ProductRefinerValue) => {
 	return `${f.LeftValueBoundString}-${f.RefinerRecordId}`;
@@ -18,7 +18,7 @@ export default function ListFilter({
 	facet,
 	handleRefinerSelect,
 	isRefinerSelected,
-}: Props) {
+}: Readonly<Props>) {
 	const createFacetLabel = (f: ProductRefinerValue) => {
 		const label = f.LeftValueBoundLocalizedString || f.LeftValueBoundString;
 		return (

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

@@ -1,8 +1,8 @@
 "use client";
-import { ChangeEvent } from "react";
-import MuiPagination, { PaginationProps } from "@mui/material/Pagination";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import MuiPagination, { type PaginationProps } from "@mui/material/Pagination";
 import { useTranslations } from "next-intl";
+import type { ChangeEvent } from "react";
 
 export interface PageInfo {
 	top?: number;

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

@@ -1,27 +1,21 @@
-import {
+import type {
+	ProductPrice,
 	SearchByCriteriaInput,
 	SearchByCriteriaResponse,
-	ProductPrice,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import React, { createContext, useMemo, useCallback } from "react";
-import {
-	PageKey,
-	ProductListParamHandlers,
-	SortOption,
-	ViewMode,
-} from "./utils/product-list-types";
-import {
-	ProductRefinerSource,
-	ProductRefinerValue,
-} from "@msdyn365-commerce/retail-proxy";
+import getProductList from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-list";
+import getProductPrices from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-prices";
 import {
 	areRefinersEqual,
 	convertRefinerToParameter,
 } from "@evenicanpm/storefront-core/src/lib/refiner-utils";
-import getProductList from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-list";
-import getSortOptions from "./utils/sort-options";
+import {
+	ProductRefinerSource,
+	type ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
 import { usePathname, useSearchParams } from "next/navigation";
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import React, { createContext, useCallback, useMemo } from "react";
 import {
 	buildInitialState,
 	calculatePage,
@@ -29,7 +23,13 @@ import {
 	getDefaultValueByPageKey,
 	getSelectedSortOption,
 } from "./utils/product-list-helper";
-import getProductPrices from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-prices";
+import {
+	PageKey,
+	type ProductListParamHandlers,
+	type SortOption,
+	type ViewMode,
+} from "./utils/product-list-types";
+import getSortOptions from "./utils/sort-options";
 export type ProductListContextType = {
 	productData: SearchByCriteriaResponse;
 	isLoading: boolean;
@@ -117,8 +117,10 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			const refiners = newInputParams.searchState.refinement;
 			const priceIndex = ProductRefinerSource.Price;
 			const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+
 			if (refiner.RefinerSourceValue === priceIndex) {
 				const priceRefiner = refiners[idx];
+
 				if (idx > -1) {
 					if (
 						priceRefiner.LeftValueBoundString ===
@@ -133,7 +135,9 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 				} else {
 					refiners.push(refiner);
 				}
-			} else {
+			}
+
+			if (refiner.RefinerSourceValue !== priceIndex) {
 				if (idx > -1) {
 					refiners.splice(idx, 1);
 				} else {

package/src/pages-v2/product-list/product-list-state.ts

@@ -1,22 +1,22 @@
-import { SearchByCriteriaInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import React from "react";
-import {
-	PageKey,
-	ProductListParamHandlers,
-	ViewMode,
-} from "./utils/product-list-types";
-import {
-	IQueryResultSettings,
-	ProductRefinerValue,
-} from "@msdyn365-commerce/retail-proxy";
+import type { SearchByCriteriaInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import getProductList from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-list";
 import {
 	areRefinersEqual,
 	convertParameterToRefiner,
 	convertRefinerToParameter,
 } from "@evenicanpm/storefront-core/src/lib/refiner-utils";
-import getProductList from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-list";
-import { SortOption } from "./types";
+import type {
+	IQueryResultSettings,
+	ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import React from "react";
+import type { SortOption } from "./types";
+import {
+	PageKey,
+	type ProductListParamHandlers,
+	type ViewMode,
+} from "./utils/product-list-types";
 import getSortOptions from "./utils/sort-options";
 
 const calculatePage = (searchState: IQueryResultSettings) => {

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

@@ -1,26 +1,24 @@
 "use client";
 
-import React, { ReactNode, createContext, useContext } from "react";
-import { Box, CircularProgress, Paper, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { useLocale, useTranslations } from "next-intl";
-
-import CategoryBreadcrumbs from "@evenicanpm/storefront-core/src/pages/product-list/breadcrumbs";
-import SelectedFacets from "@evenicanpm/storefront-core/src/pages/product-list/selected-facets";
-import Facet from "@evenicanpm/storefront-core/src/pages-v2/product-list/facet";
-import Pagination from "@evenicanpm/storefront-core/src/pages/product-list/pagination";
-import SearchBar from "@evenicanpm/storefront-core/src/pages-v2/product-list/search-bar";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
-import { searchCategory } from "@evenicanpm/storefront-core/src/pages/product-list/utils/search-for-category";
-import generateBreadcrumbs from "@evenicanpm/storefront-core/src/pages/product-list/utils/generate-breadcrumbs";
-import { usePreviousRefiners } from "@evenicanpm/storefront-core/src/pages/product-list/utils/use-previous-refiners";
-import useProductList from "@evenicanpm/storefront-core/src/pages/product-list/use-product-list";
-
 import {
 	ProductsGrid,
 	ProductsList,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import CategoryBreadcrumbs from "@evenicanpm/storefront-core/src/pages/product-list/breadcrumbs";
+import Pagination from "@evenicanpm/storefront-core/src/pages/product-list/pagination";
+import SelectedFacets from "@evenicanpm/storefront-core/src/pages/product-list/selected-facets";
+import useProductList from "@evenicanpm/storefront-core/src/pages/product-list/use-product-list";
+import generateBreadcrumbs from "@evenicanpm/storefront-core/src/pages/product-list/utils/generate-breadcrumbs";
+import { searchCategory } from "@evenicanpm/storefront-core/src/pages/product-list/utils/search-for-category";
+import { usePreviousRefiners } from "@evenicanpm/storefront-core/src/pages/product-list/utils/use-previous-refiners";
+import Facet from "@evenicanpm/storefront-core/src/pages-v2/product-list/facet";
+import SearchBar from "@evenicanpm/storefront-core/src/pages-v2/product-list/search-bar";
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useLocale, useTranslations } from "next-intl";
+import React, { createContext, type ReactNode, useContext } from "react";
 
 type PLViewCtx = { categoryId: number };
 const ProductListViewContext = createContext<PLViewCtx | null>(null);
@@ -34,7 +32,10 @@ const usePLV = () => {
 };
 
 type RootProps = { categoryId: number; children?: ReactNode };
-export default function ProductListView({ categoryId, children }: RootProps) {
+export default function ProductListView({
+	categoryId,
+	children,
+}: Readonly<RootProps>) {
 	return (
 		<ProductListViewContext.Provider value={{ categoryId }}>
 			{children}

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

@@ -1,12 +1,15 @@
-import Rating from "@mui/material/Rating";
-import { BoxProps } from "@mui/material/Box";
 import { Box, Typography } from "@mui/material";
+import type { BoxProps } from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
 
 interface Props extends BoxProps {
 	rating: number;
 }
 
-export default function ProductRating({ rating = 0, ...props }: Props) {
+export default function ProductRating({
+	rating = 0,
+	...props
+}: Readonly<Props>) {
 	return (
 		<Box display="flex" gap={1} alignItems="center" {...props}>
 			<Rating size="small" value={rating} color="warn" readOnly />