@evenicanpm/storefront-core 1.6.0 → 1.7.0

package/__mocks__/next-image.tsx

@@ -1,7 +1,9 @@
 // __mocks__/next/image.js
 const Image = (props) => {
+	const { alt = "", ...rest } = props;
+
 	// eslint-disable-next-line @next/next/no-img-element
-	return <img {...props} />;
+	return <img alt={alt} {...rest} />;
 };
 
 export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -16,7 +16,7 @@
 	"author": "Evenica",
 	"license": "ISC",
 	"dependencies": {
-		"@evenicanpm/ui": "^1.6.0"
+		"@evenicanpm/ui": "file:../../../common/@evenicanpm/ui"
 	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^9.1.6",
@@ -48,6 +48,5 @@
 		"@storybook/builder-manager": {
 			"esbuild": "0.19.11"
 		}
-	},
-	"gitHead": "9b18fe6294cc0e57332ec8703825a609ac7b73b2"
+	}
 }

package/src/api-manager/datasources/d365/d365-product.datasource.ts

@@ -150,7 +150,7 @@ class D365ProductDatasource extends D365DatasourceBase implements ProductApi {
 
 		const refinerSearchSettings = { ...searchCriteria };
 		const queryResultSettingsWithCount: IQueryResultSettings = {
-			...(queryResultSettings ?? {}),
+			...queryResultSettings,
 			count: true,
 		};
 

package/src/api-manager/datasources/d365/utils/product-inventory-utils.ts

@@ -17,9 +17,7 @@ const createInventoryAvailabilitySearchCriteria = (
 	defaultDeliveryMode: DeliveryMode,
 ) => {
 	const salesUnitType = 2; // Sales unit type is always 2 for product inventory
-	const deliveryMode = defaultDeliveryMode
-		? defaultDeliveryMode
-		: DeliveryMode.shipping;
+	const deliveryMode = defaultDeliveryMode || DeliveryMode.shipping;
 
 	const inventoryAvailabilitySearchCriteria: InventoryAvailabilitySearchCriteria =
 		{

package/src/api-manager/datasources/e4/cart/e4-cart.remaps.ts

@@ -30,12 +30,14 @@ export const cartLineMap = {
 			if (!product) return;
 
 			// For some reason transform is run multiple times. This prevents merge from running multiple times and overwriting translation.
-			const translated = merge(product, productMap) as DynProduct & {
-				ProductTypeValue?: number;
+			const raw = merge(product, productMap) as unknown as DynProduct;
+
+			if (!raw?.RecordId) return product;
+
+			return {
+				...raw,
+				ProductTypeValue: 4, // default for now. Type = Standalone
 			};
-			if (!translated.RecordId) return product;
-			translated.ProductTypeValue = 4; // default for now. Type = Standalone
-			return translated;
 		},
 	},
 	"[].id": "[].LineId",

package/src/api-manager/datasources/e4/product/e4-product.datasource.ts

@@ -13,9 +13,6 @@ import type {
 	SimpleProduct,
 } from "@msdyn365-commerce/retail-proxy";
 
-// See TODO below
-//import { generateCategoryFilterString } from "./e4.translator";
-
 const product: ProductApi = {
 	async getProductById(
 		input: productSchema.GetProductByIdInput,
@@ -92,7 +89,7 @@ const product: ProductApi = {
 				return null;
 			})
 			.filter(Boolean) as ProductSearchResult[];
-		return products as ProductSearchResult[];
+		return products;
 	},
 
 	async getProductsList(

package/src/api-manager/datasources/e4/product/e4-product.translator.ts

@@ -207,7 +207,7 @@ export const refinersTransformValidate = (
 			if (
 				!rawRefiner ||
 				typeof rawRefiner !== "object" ||
-				!rawRefiner.AttributeName ||
+				!rawRefiner.name ||
 				!Array.isArray(rawRefiner.value)
 			) {
 				console.warn("Skipping invalid raw refiner object:", rawRefiner);
@@ -219,8 +219,8 @@ export const refinersTransformValidate = (
 					if (
 						!rawValue ||
 						typeof rawValue !== "object" ||
-						!rawValue.AttributeValue ||
-						typeof rawValue.Count !== "number"
+						!rawValue.value ||
+						typeof rawValue.count !== "number"
 					) {
 						console.warn(
 							"Skipping invalid raw refiner value object:",
@@ -229,33 +229,29 @@ export const refinersTransformValidate = (
 						return null;
 					}
 
-					RECORD_ID_MAPPER.add(
-						Number(rawValue?.id),
-						rawValue?.AttributeId ?? "",
-					);
+					RECORD_ID_MAPPER.add(Number(rawValue?.id), rawValue?.id ?? "");
 
 					return {
 						RefinerRecordId: Number(rawValue?.id),
 						DataTypeValue: DATA_TYPE_VALUE_STRING,
-						LeftValueBoundString: rawValue.AttributeValue,
-						RightValueBoundString: rawValue.AttributeValue,
+						LeftValueBoundString: rawValue.value,
+						RightValueBoundString: rawValue.value,
 						UnitText: "",
 						RowNumber: 0,
-						Count: rawValue.Count,
+						Count: rawValue.count,
 						LeftValueBoundLocalizedString: "",
 						RightValueBoundLocalizedString: "",
 						ExtensionProperties: [],
 						RefinerSourceValue: SOURCE_VALUE_ATTRIBUTE,
 						SwatchImageUrl: "",
-						SwatchColorHexCode:
-							rawValue?.AttributeId === "color" ? rawValue.AttributeValue : "",
+						SwatchColorHexCode: rawValue?.id === "color" ? rawValue.value : "",
 						"@odata.type": ODATA_TYPE_REFINER_VALUE,
 					};
 				})
 				.filter((value): value is TransformedRefinerValue => value !== null);
 
 			const isDimension = DIMENSION_ATTRIBUTE_IDS.has(
-				rawRefiner.AttributeId?.toLowerCase() ?? "",
+				rawRefiner.id?.toLowerCase() ?? "",
 			);
 
 			return {
@@ -292,16 +288,14 @@ export const refinersTransformValidate = (
 export const productTransformValidate = (
 	productData: Product,
 ): ProductDetails => {
-	const translatedData = merge(
-		productData,
-		productDetailsMap,
-	) as ProductDetails;
+	const translatedData = merge(productData, productDetailsMap);
+
 	try {
-		productSchema.parse(translatedData);
+		return productSchema.parse(translatedData) as ProductDetails;
 	} catch (e) {
 		console.warn("Product data does not match retail-proxy schema", e);
+		return translatedData as ProductDetails; // fallback only if needed
 	}
-	return translatedData;
 };
 
 export const productPricesTransformValidate = (

package/src/api-manager/datasources/e4/utils/unwrap-e4-variants.ts

@@ -1,8 +1,4 @@
-import type {
-	Attributes,
-	Maybe,
-	Variants,
-} from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+import type { Variants } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 import { dimensionMap } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/product/e4-product.remaps";
 import { merge } from "object-mapper";
 
@@ -28,18 +24,19 @@ export default function unwrapE4Variants(
 	variants: Variants[],
 ): UnwrappedAttribute[][] {
 	if (!variants?.length) return [];
-	const attrs: UnwrappedAttribute[] = variants.flatMap(
-		(v) =>
-			v.Attributes?.map((attr: Maybe<Attributes>) => {
-				const dimension = attr ? merge(attr, dimensionMap) : null;
+	const attrs: UnwrappedAttribute[] = variants.flatMap((v) =>
+		(v.Attributes ?? [])
+			.map((attr) => {
+				if (!attr) return null;
 
-				if (!dimension) return null;
+				const dimension = merge(attr, dimensionMap);
 
 				return {
-					...dimension,
+					...(dimension as object),
 					ProductIds: [v.ProductId],
-				} as UnwrappedAttribute;
-			}).filter(Boolean) as UnwrappedAttribute[],
+				};
+			})
+			.filter((item): item is UnwrappedAttribute => item !== null),
 	);
 
 	const grouped: UnwrappedAttribute[][] = attrs.reduce((acc, item) => {

package/src/auth/auth-options.ts

@@ -23,6 +23,35 @@ const createAuthOptions = (): NextAuthOptions => {
 	return {
 		providers,
 		secret,
+		cookies: {
+			csrfToken: {
+				name: "next-auth.csrf-token",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+			pkceCodeVerifier: {
+				name: "next-auth.pkce.code_verifier",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+			nonce: {
+				name: "next-auth.nonce",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+		},
 		// Order in which callbacks are called = signin > redirect > jwt > session. Thats why session callback has token info.
 		callbacks: {
 			// By default, NextAuth uses "session" with strategy: "jwt"
@@ -31,7 +60,11 @@ const createAuthOptions = (): NextAuthOptions => {
 				// account and profile is available only in first callback after signin
 				if (account && profile) {
 					_token.provider = account.provider;
-					_token.accessToken = account.access_token;
+					// use id_token for entra external id and access_token for aadb2c
+					_token.accessToken =
+						_token.provider === "entra-external-id"
+							? account.id_token
+							: account.access_token;
 					_token.refreshToken = account.refresh_token;
 				}
 				return _token;

package/src/auth/providers/entra-external-id-provider.ts

@@ -0,0 +1,50 @@
+import { Provider } from "next-auth/providers";
+
+const createEntraExternalIdProvider = (): Provider => {
+	const clientId = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "";
+	const customScopes =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CUSTOM_SCOPES || "";
+	const tenantName =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
+	const clientSecret =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_SECRET || "";
+
+	// Build auth url and wellKnown from the loginAuthority
+	const loginAuthority = `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;
+	const authUrl = `${loginAuthority}/oauth2/v2.0/authorize`;
+	const wellKnownUrl = `${loginAuthority}/v2.0/.well-known/openid-configuration`;
+
+	return {
+		id: "entra-external-id",
+		clientId: clientId,
+		client: {
+			client_id: clientId,
+			response_types: ["code id_token"],
+			client_secret: clientSecret,
+			// token_endpoint_auth_method: 'none',
+		},
+		type: "oauth",
+		idToken: true,
+		name: "Microsoft Entra External ID",
+		authorization: {
+			url: authUrl,
+			params: {
+				scope: customScopes,
+				prompt: "login",
+				response_type: "code id_token",
+				response_mode: "form_post",
+			},
+		},
+		wellKnown: wellKnownUrl,
+		profile(profile) {
+			return {
+				id: profile.oid,
+				name: profile.name,
+				email: profile.email,
+			};
+		},
+		checks: ["pkce", "nonce"],
+	};
+};
+
+export default createEntraExternalIdProvider;

package/src/auth/providers/index.ts

@@ -1,9 +1,16 @@
 import azureADB2CProvider from "@/auth/providers/aadb2c-provider";
 import authentikProvider from "@/auth/providers/authentik-provider";
 import keycloakProvider from "@/auth/providers/keycloak-provider";
+import createEntraExternalIdProvider from "@/auth/providers/entra-external-id-provider";
 
 export const getProviders = () => {
 	const azureProvider = azureADB2CProvider();
+	const entraExternalIdProvider = createEntraExternalIdProvider();
 	// once we stop hard coding others use loader function here
-	return [authentikProvider, azureProvider, keycloakProvider];
+	return [
+		authentikProvider,
+		azureProvider,
+		keycloakProvider,
+		entraExternalIdProvider,
+	];
 };

package/src/auth/refresh-token.ts

@@ -53,7 +53,7 @@ const checkAccessTokenExpiry = async (
 	const matchedProvider = providers.find(
 		(p) => p.id.toLowerCase() === token.provider.toLowerCase(),
 	);
-	if (!matchedProvider) {
+	if (!matchedProvider || !("wellKnown" in matchedProvider)) {
 		token.error = "NoProviderMatch";
 		return {
 			token,

package/src/cms/blocks/interfaces.ts

@@ -131,6 +131,8 @@ export interface ImageBlock {
 	id: number;
 	__component: "blocks.image-block";
 	media: MediaData;
+	size?: string;
+	justify?: string;
 }
 
 export interface RichTextBlock {

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

@@ -16,7 +16,7 @@ export const Basic: Story = {
 	args: {
 		direction: "left",
 		handler: (onClick) => (
-			<Button variant="contained" onClick={onClick as any}>
+			<Button variant="contained" onClick={onClick}>
 				Open Menu
 			</Button>
 		),

package/src/components-v2/BazaarMenu.tsx

@@ -8,7 +8,7 @@ import { Fragment, type ReactNode, useState } from "react";
 interface Props {
 	open?: boolean;
 	sx?: SxProps<Theme>;
-	handler?: (e: (event: React.MouseEvent) => void) => ReactNode;
+	handler?: (onClick: React.MouseEventHandler<HTMLElement>) => ReactNode;
 	options: (e: () => void) => ReactNode;
 	direction?: "left" | "right" | "center";
 }
@@ -25,8 +25,9 @@ export default function BazaarMenu({
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
 	const handleClose = () => setAnchorEl(null);
-	const handleClick = (event: React.MouseEvent<Element>) =>
-		setAnchorEl(event.currentTarget as HTMLElement);
+	const handleClick: React.MouseEventHandler<HTMLElement> = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
 
 	return (
 		<Fragment>

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

@@ -82,7 +82,11 @@ CategoryList.Item = ({ category }: ItemProps) => {
 			href={`/products/${Url}`}
 			title={Name ?? ""}
 			caret={hasChildren}
-			render={hasChildren ? megaMenuRenderers[menuType]?.(Children!) : null}
+			render={
+				Children && Children.length > 0
+					? megaMenuRenderers[menuType]?.(Children)
+					: null
+			}
 		/>
 	);
 };

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

@@ -2,7 +2,7 @@
 
 import CategoryList from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/index";
 import styled from "@mui/material/styles/styled";
-import { type MouseEvent, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled("div", {
@@ -31,13 +31,19 @@ type Props = {
 // not as a reusable UI element that needs further extensibility.
 export default function CategoryMenu({ render }: Readonly<Props>) {
 	const [open, setOpen] = useState(false);
+	const wrapperRef = useRef<HTMLDivElement | null>(null);
 
-	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-		e.stopPropagation();
+	const onClick = () => {
 		setOpen((open) => !open);
 	};
 
-	const handleDocumentClick = useCallback(() => setOpen(false), []);
+	const handleDocumentClick = useCallback((e: globalThis.MouseEvent) => {
+		const target = e.target as Node | null;
+		if (target && wrapperRef.current?.contains(target)) {
+			return;
+		}
+		setOpen(false);
+	}, []);
 
 	useEffect(() => {
 		document.addEventListener("click", handleDocumentClick);
@@ -45,7 +51,7 @@ export default function CategoryMenu({ render }: Readonly<Props>) {
 	}, [handleDocumentClick]);
 
 	return (
-		<Wrapper open={open}>
+		<Wrapper ref={wrapperRef} open={open}>
 			{render(onClick)}
 
 			<CategoryList open={open} />

package/src/components-v2/product-dimensions/compound/dimensions-group-list-chip.tsx

@@ -37,43 +37,42 @@ export const DimensionGroupListChip = ({ dimension }: Props) => {
 		selectDimensions[dimension.DimensionTypeValue || 0]?.DimensionValue ===
 		dimension.DimensionValue;
 
-	switch (type) {
-		case "Color":
-			return (
-				<Chip
-					key={dimension.DimensionValue?.RecordId}
-					onClick={() => {
-						handleChangeVariant(dimension);
-					}}
-					disabled={disabled}
-					sx={{
-						borderRadius: "100%",
-						mr: 1,
-						cursor: "pointer",
+	if (type === "Color") {
+		return (
+			<Chip
+				key={dimension.DimensionValue?.RecordId}
+				onClick={() => {
+					handleChangeVariant(dimension);
+				}}
+				disabled={disabled}
+				sx={{
+					borderRadius: "100%",
+					mr: 1,
+					cursor: "pointer",
+					backgroundColor: dimension.DimensionValue?.Value,
+					width: 32,
+					height: 32,
+					border: selected ? "2px solid" : "2px solid transparent",
+					"&:hover": {
 						backgroundColor: dimension.DimensionValue?.Value,
-						width: 32,
-						height: 32,
-						border: selected ? "2px solid" : "2px solid transparent",
-						"&:hover": {
-							backgroundColor: dimension.DimensionValue?.Value,
-						},
-					}}
-				/>
-			);
-		// Standard text dimension
-		default:
-			return (
-				<Chip
-					key={dimension.DimensionValue?.RecordId}
-					label={dimension.DimensionValue?.Value}
-					onClick={() => {
-						handleChangeVariant(dimension);
-					}}
-					disabled={disabled}
-					sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
-					color={selected ? "primary" : "default"}
-				/>
-			);
-		// Add more chips as needed.
+					},
+				}}
+			/>
+		);
 	}
+
+	// Standard text dimension
+	return (
+		<Chip
+			key={dimension.DimensionValue?.RecordId}
+			label={dimension.DimensionValue?.Value}
+			onClick={() => {
+				handleChangeVariant(dimension);
+			}}
+			disabled={disabled}
+			sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
+			color={selected ? "primary" : "default"}
+		/>
+	);
+	// Add more chips as needed.
 };

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

@@ -22,8 +22,8 @@ export const WithLink = () => (
 				padding: "25px",
 			}}
 		>
-			{[...Array(50)].map((x, i) => (
-				<p>{i}</p>
+			{Array.from({ length: 50 }).map((_, i) => (
+				<p key={`item-${i + 1}`}>{i}</p>
 			))}
 		</Scrollbar>
 	</div>

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

@@ -29,7 +29,7 @@ export default function SearchResultsContainer({
 		category: state.searchCategory,
 	});
 
-	if (!results || results.length === 0) {
+	if (!results || !Array.isArray(results) || results.length === 0) {
 		return <SearchResultCard>{t("Search.noResults")}</SearchResultCard>;
 	}
 

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

@@ -23,23 +23,22 @@ const AddToWishlistButton = (props: Props) => {
 	};
 
 	// conditionally render button styles based on variant (pdp or minicart)
-	let style: any, btnFullwidth: boolean;
+	let style: any;
+	let btnFullwidth: boolean;
 	let btnColor: ButtonProps["color"];
 	let btnVariant: ButtonProps["variant"];
-	switch (props.variant) {
-		case "minicart":
-			style = {
-				px: 4,
-			};
-			btnFullwidth = true;
-			btnVariant = "outlined";
-			btnColor = "primary";
-			break;
-		default:
-			btnFullwidth = false;
-			btnVariant = "contained";
-			btnColor = "secondary";
-			break;
+
+	if (props.variant === "minicart") {
+		style = {
+			px: 4,
+		};
+		btnFullwidth = true;
+		btnVariant = "outlined";
+		btnColor = "primary";
+	} else {
+		btnFullwidth = false;
+		btnVariant = "contained";
+		btnColor = "secondary";
 	}
 
 	return (

package/src/components-v2/wishlist-dialogs/styles.ts

@@ -9,16 +9,14 @@ type ExtendedNavLinkProps = NavLinkProps & {
 	isCurrentPath?: boolean;
 };
 
-export const MainContainer: ComponentType<CardProps> = styled(Card)(
-	({ theme }) => ({
-		paddingBottom: "1.5rem",
-		[theme.breakpoints.down("md")]: {
-			boxShadow: "none",
-			overflowY: "auto",
-			height: "calc(100vh - 64px)",
-		},
-	}),
-) as typeof Card;
+export const MainContainer = styled(Card)(({ theme }) => ({
+	paddingBottom: "1.5rem",
+	[theme.breakpoints.down("md")]: {
+		boxShadow: "none",
+		overflowY: "auto",
+		height: "calc(100vh - 64px)",
+	},
+}));
 
 export const StyledNavLink: ComponentType<ExtendedNavLinkProps> = styled(
 	NavLink,

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

@@ -83,9 +83,10 @@ const AddressListItem = ({ address, children, sx }: RootProps) => {
 };
 
 // ----------------- Subcomponents -----------------
+type FieldValue = string | number | boolean;
 interface FieldProps {
 	field: keyof Address; // "Name" | "FullAddress" | "Phone" etc.
-	render?: (value: string | number | boolean, address: Address) => ReactNode;
+	render?: (value: FieldValue, address: Address) => ReactNode;
 }
 
 AddressListItem.Field = ({ field, render }: FieldProps) => {

package/src/pages-v2/checkout/checkout-alt-form/checkout-form.tsx

@@ -166,10 +166,15 @@ CheckoutForm.Step = <T extends object>({
 	const t = useTranslations("Checkout");
 	if (!ctx) return null;
 	const { activeStep, setActiveStep, cart } = ctx;
+
+	if (stepNumber === undefined) {
+		throw new Error("CheckoutForm.Step must be used inside CheckoutForm.Steps");
+	}
+
 	return (
 		<CheckoutStep
 			title={t(title)}
-			stepNumber={stepNumber!}
+			stepNumber={stepNumber}
 			activeStep={activeStep}
 			setActiveStep={setActiveStep}
 			cart={cart}

package/src/pages-v2/checkout/checkout-alt-form/steps/address/new-address-form.tsx

@@ -179,12 +179,12 @@ const NewAddressForm = ({
 	const ctx: NewAddressFormCtx = {
 		form,
 		countries,
-		states: states
-			? states?.map((s) => ({
+		states: Array.isArray(states)
+			? states.map((s) => ({
 					StateName: s.StateName ?? "",
 					StateId: s.StateId ?? "",
 				}))
-			: undefined,
+			: [],
 		selectedCountry,
 		setSelectedCountry,
 		errors,
@@ -312,11 +312,12 @@ NewAddressForm.StateSelect = () => {
 					render={({ field }) => (
 						<Select labelId="state-label" {...field}>
 							<MenuItem value="0">Select a state</MenuItem>
-							{states?.map(({ StateName, StateId }) => (
-								<MenuItem key={StateId} value={StateId}>
-									{StateName}
-								</MenuItem>
-							))}
+							{Array.isArray(states) &&
+								states?.map(({ StateName, StateId }) => (
+									<MenuItem key={StateId} value={StateId}>
+										{StateName}
+									</MenuItem>
+								))}
 						</Select>
 					)}
 				/>

package/src/pages-v2/product-details/bopis/find-in-store-modal.tsx

@@ -155,7 +155,7 @@ const FindInStoreModal = ({
 		if (!stores) {
 			return [];
 		}
-		const _stores = [...Object.values(stores)];
+		const _stores = Object.values(stores);
 		if (hideOutOfStock) {
 			return _stores.filter(
 				(store) => !isOutOfStock(store.location.OrgUnitNumber || ""),

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

@@ -13,6 +13,7 @@ function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
 			{!loaded && <Skeleton variant="rounded" width={50} height={50} />}
 			<img
 				src={src}
+				alt="Product thumbnail"
 				onLoad={() => setLoaded(true)}
 				style={{
 					display: loaded ? "block" : "none",

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

@@ -15,7 +15,7 @@ import {
 } 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 React, { createContext, useCallback, useMemo, useRef } from "react";
 import {
 	buildInitialState,
 	calculatePage,
@@ -52,6 +52,7 @@ export const ProductListContext = createContext<
 const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
+	const isUserInitiated = useRef(false);
 	const [topParameter, setTopParameter] = useQueryState(
 		PageKey.TOP,
 		parseAsInteger
@@ -96,16 +97,57 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			.withOptions({ clearOnDefault: true }),
 	);
 
-	const initialState = buildInitialState(
-		pathname.split("/"),
-		topParameter,
-		pageParameter,
-		sortParameter,
-		refinerParameter,
-		searchParameter,
+	const initialState = React.useMemo(
+		() =>
+			buildInitialState(
+				pathname.split("/"),
+				topParameter,
+				pageParameter,
+				sortParameter,
+				refinerParameter,
+				searchParameter,
+			),
+		[
+			pathname,
+			topParameter,
+			pageParameter,
+			sortParameter,
+			refinerParameter,
+			searchParameter,
+		],
 	);
 	const [inputParams, setInputParams] =
 		React.useState<SearchByCriteriaInput>(initialState);
+	React.useEffect(() => {
+		if (isUserInitiated.current) {
+			return;
+		}
+
+		setInputParams((prev) => {
+			const prevRefiners = prev.searchState.refinement
+				.map((r) => convertRefinerToParameter(r))
+				.join("||");
+			if (prevRefiners === refinerParameter) {
+				return prev;
+			}
+			const newState = buildInitialState(
+				pathname.split("/"),
+				topParameter,
+				pageParameter,
+				sortParameter,
+				refinerParameter,
+				searchParameter,
+			);
+			return newState;
+		});
+	}, [
+		refinerParameter,
+		searchParameter,
+		sortParameter,
+		topParameter,
+		pageParameter,
+		pathname,
+	]);
 
 	const { data, isLoading } = getProductList.useData(inputParams);
 	const { data: productPrices } = getProductPrices.useSuspenseData({
@@ -113,45 +155,57 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	});
 	const handleRefinerChange = useCallback(
 		(refiner: ProductRefinerValue) => {
-			const newInputParams = { ...inputParams };
-			const refiners = newInputParams.searchState.refinement;
+			isUserInitiated.current = true;
+			const refiners = inputParams.searchState.refinement;
 			const priceIndex = ProductRefinerSource.Price;
-			const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+
+			let newRefiners: ProductRefinerValue[];
 
 			if (refiner.RefinerSourceValue === priceIndex) {
-				const priceRefiner = refiners[idx];
+				const priceRefinerIndex = refiners.findIndex(
+					(r) => r.RefinerSourceValue === priceIndex,
+				);
 
-				if (idx > -1) {
+				if (priceRefinerIndex > -1) {
+					const existingPriceRefiner = refiners[priceRefinerIndex];
 					if (
-						priceRefiner.LeftValueBoundString ===
+						existingPriceRefiner.LeftValueBoundString ===
 							refiner.LeftValueBoundString &&
-						priceRefiner.RightValueBoundString === refiner.RightValueBoundString
+						existingPriceRefiner.RightValueBoundString ===
+							refiner.RightValueBoundString
 					) {
-						refiners.splice(idx, 1);
+						newRefiners = refiners.filter((_, i) => i !== priceRefinerIndex);
 					} else {
-						priceRefiner.LeftValueBoundString = refiner.LeftValueBoundString;
-						priceRefiner.RightValueBoundString = refiner.RightValueBoundString;
+						newRefiners = refiners.map((r, i) =>
+							i === priceRefinerIndex ? refiner : r,
+						);
 					}
 				} else {
-					refiners.push(refiner);
+					newRefiners = [...refiners, refiner];
 				}
-			}
-
-			if (refiner.RefinerSourceValue !== priceIndex) {
+			} else {
+				const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
 				if (idx > -1) {
-					refiners.splice(idx, 1);
+					newRefiners = refiners.filter((_, i) => i !== idx);
 				} else {
-					refiners.push(refiner);
+					newRefiners = [...refiners, refiner];
 				}
 			}
 
-			setInputParams(newInputParams);
+			setInputParams({
+				...inputParams,
+				searchState: {
+					...inputParams.searchState,
+					refinement: newRefiners,
+				},
+			});
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handlePageChange = useCallback(
 		(page: number) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			const calculationSkip = calculateSkip(page, topParameter);
 			let paging = updatedInputParams.searchState.queryResultSettings.Paging;
@@ -159,18 +213,19 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			paging.Skip = calculationSkip;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, topParameter, setInputParams],
+		[inputParams, topParameter],
 	);
 
 	const handlePerPageChange = useCallback(
 		(newValue: number) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			let paging = updatedInputParams.searchState.queryResultSettings.Paging;
 			paging = paging || {};
 			paging.Top = newValue;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleViewChange = useCallback(
@@ -182,6 +237,7 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 
 	const handleSortChange = useCallback(
 		(sort: SortOption) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			const sortOption = getSortOptions().find((s) => s.code === sort.code);
 			if (!sortOption) {
@@ -194,23 +250,25 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			];
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleSearchChange = useCallback(
 		(searchTerm: string) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			updatedInputParams.searchState.searchTerm = searchTerm;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleRefinersClear = useCallback(() => {
+		isUserInitiated.current = true;
 		const updatedInputParams = { ...inputParams };
 		updatedInputParams.searchState.refinement = [];
 		setInputParams(updatedInputParams);
-	}, [inputParams, setInputParams]);
+	}, [inputParams]);
 
 	const paramHandlers = useMemo(
 		() => ({
@@ -234,6 +292,10 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	);
 
 	React.useEffect(() => {
+		if (!isUserInitiated.current) {
+			return;
+		}
+
 		const sortObj =
 			inputParams.searchState.queryResultSettings.Sorting?.Columns?.[0];
 		let sortCode = "";
@@ -246,21 +308,38 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 				)?.code || "";
 		}
 
-		setTopParameter(
-			inputParams.searchState.queryResultSettings.Paging?.Top || 20,
-		);
-		setPageParameter(
-			calculatePage(inputParams.searchState.queryResultSettings),
-		);
-		setRefinerParameter(
-			inputParams.searchState.refinement
-				.map((r) => convertRefinerToParameter(r))
-				.join("||"),
-		);
-		setSortParameter(sortCode);
-		setSearchParameter(inputParams.searchState.searchTerm || "");
+		const newTop =
+			inputParams.searchState.queryResultSettings.Paging?.Top || 20;
+		const newPage = calculatePage(inputParams.searchState.queryResultSettings);
+		const newRefiners = inputParams.searchState.refinement
+			.map((r) => convertRefinerToParameter(r))
+			.join("||");
+		const newSearch = inputParams.searchState.searchTerm || "";
+
+		if (topParameter !== newTop) {
+			setTopParameter(newTop);
+		}
+		if (pageParameter !== newPage) {
+			setPageParameter(newPage);
+		}
+		if (refinerParameter !== newRefiners) {
+			setRefinerParameter(newRefiners);
+		}
+		if (sortParameter !== sortCode) {
+			setSortParameter(sortCode);
+		}
+		if (searchParameter !== newSearch) {
+			setSearchParameter(newSearch);
+		}
+
+		isUserInitiated.current = false;
 	}, [
 		inputParams,
+		topParameter,
+		pageParameter,
+		refinerParameter,
+		sortParameter,
+		searchParameter,
 		setPageParameter,
 		setRefinerParameter,
 		setSearchParameter,

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

@@ -6,7 +6,7 @@ import {
 } from "@msdyn365-commerce/retail-proxy";
 import { Box, Slider, TextField, Typography } from "@mui/material";
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RenderedFacetProps } from "./facet-group";
 
 type Props = RenderedFacetProps & {
@@ -17,6 +17,7 @@ export default function RangeFilter({
 	handleRefinerSelect,
 	selectedValues,
 }: Props) {
+	const isUserInteraction = useRef(false);
 	const getMinValForSlider = () => {
 		const item = facet.Values?.[0];
 		if (item) {
@@ -36,58 +37,68 @@ export default function RangeFilter({
 	const [maxVal, setMaxVal] = useState<number>(getMaxValForSlider());
 	const [textMin, setTextMin] = useState<number>(getMinValForSlider());
 	const [textMax, setTextMax] = useState<number>(getMaxValForSlider());
-	const [selected, setSelected] = useState<boolean>(false);
 
+	// Sync slider position when selectedValues changes from URL
 	useEffect(() => {
 		if (selectedValues) {
-			setMinVal(Number(selectedValues.LeftValueBoundString));
-			setMaxVal(Number(selectedValues.RightValueBoundString));
-			setTextMin(Number(selectedValues.LeftValueBoundString));
-			setTextMax(Number(selectedValues.RightValueBoundString));
+			const newMin = Number(selectedValues.LeftValueBoundString);
+			const newMax = Number(selectedValues.RightValueBoundString);
+			// Only sync from URL if not from user interaction
+			if (
+				!isUserInteraction.current &&
+				(minVal !== newMin || maxVal !== newMax)
+			) {
+				setMinVal(newMin);
+				setMaxVal(newMax);
+				setTextMin(newMin);
+				setTextMax(newMax);
+			}
 		}
-	}, [selectedValues]);
+	}, [selectedValues, minVal, maxVal]);
+
+	const pushPriceFilter = useCallback(() => {
+		const refiner: ProductRefinerValue = {
+			RefinerRecordId: 0,
+			RefinerSourceValue: ProductRefinerSource.Price,
+			LeftValueBoundString: minVal.toString(),
+			RightValueBoundString: maxVal.toString(),
+			DataTypeValue: 1,
+		};
+		handleRefinerSelect(refiner);
+		// Reset flag after pushing
+		isUserInteraction.current = false;
+	}, [minVal, maxVal, handleRefinerSelect]);
 
 	useEffect(() => {
-		// debouncing
+		if (!isUserInteraction.current) {
+			return;
+		}
 		const request = setTimeout(pushPriceFilter, 600);
 		return () => clearTimeout(request);
-	});
+	}, [pushPriceFilter]);
 
 	const handleSliderChange = (_: Event, newValue: number | number[]) => {
+		isUserInteraction.current = true;
 		if (Array.isArray(newValue)) {
 			setMinVal(Number(newValue[0]));
 			setTextMin(Number(newValue[0]));
 			setMaxVal(Number(newValue[1]));
 			setTextMax(Number(newValue[1]));
-			setSelected(true);
 		}
 	};
 
 	const handleTextMin = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		isUserInteraction.current = true;
 		const val = Number(evt.target.value);
 		setTextMin(val);
 		setMinVal(val);
-		setSelected(true);
 	};
 
 	const handleTextMax = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		isUserInteraction.current = true;
 		const val = Number(evt.target.value);
 		setTextMax(val);
 		setMaxVal(val);
-		setSelected(true);
-	};
-
-	const pushPriceFilter = () => {
-		if (selected) {
-			const refiner: ProductRefinerValue = {
-				RefinerRecordId: 0,
-				RefinerSourceValue: ProductRefinerSource.Price,
-				LeftValueBoundString: minVal.toString(),
-				RightValueBoundString: maxVal.toString(),
-				DataTypeValue: 1,
-			};
-			handleRefinerSelect(refiner);
-		}
 	};
 
 	return (

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

@@ -62,14 +62,21 @@ export default function SelectedFacets() {
 
 	return (
 		<Stack direction={"row"} spacing={2}>
-			{selectedRefiners.map((refiner) => (
-				<Chip
-					key={`${refiner.RefinerRecordId}-${refiner.LeftValueBoundString}`}
-					title={refiner.LeftValueBoundString}
-					label={`${getRefinerLabel(refiner)}: ${getRefinerValue(refiner)}`}
-					onDelete={() => handleRefinerChange(refiner)}
-				/>
-			))}
+			{selectedRefiners.map((refiner, _) => {
+				// For price refiners (RefinerRecordId is always 0), use index + source value for unique key
+				const key =
+					refiner.RefinerSourceValue === ProductRefinerSource.Price
+						? `price-${refiner.LeftValueBoundString}-${refiner.RightValueBoundString}`
+						: `${refiner.RefinerRecordId}-${refiner.LeftValueBoundString}`;
+				return (
+					<Chip
+						key={key}
+						title={refiner.LeftValueBoundString}
+						label={`${getRefinerLabel(refiner)}: ${getRefinerValue(refiner)}`}
+						onDelete={() => handleRefinerChange(refiner)}
+					/>
+				);
+			})}
 			{selectedRefiners.length > 0 ? (
 				<Button variant={"text"} sx={{ ml: 2 }} onClick={handleRefinersClear}>
 					<Paragraph>{t("clearAll")}</Paragraph>