@evenicanpm/storefront-core 2.3.1 → 2.4.1

package/src/pages/auth/compound/auth-form.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import {
+	Box,
+	type BoxProps,
+	Button,
+	CircularProgress,
+	TextField,
+} from "@mui/material";
+import type { ChangeEvent, FC } from "react";
+
+interface AuthFormSubmitButtonProps {
+	label: string;
+	loading: boolean;
+	disabled?: boolean;
+	color?: "primary" | "secondary";
+}
+
+interface AuthFormPasswordFieldsProps {
+	password: string;
+	confirmPassword: string;
+	onPasswordChange: (value: string) => void;
+	onConfirmChange: (value: string) => void;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	label?: string;
+	confirmLabel?: string;
+	mismatchHelperText?: string;
+}
+
+interface AuthFormOtpFieldProps {
+	value: string;
+	onChange: (value: string) => void;
+	codeLength: number;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	label?: string;
+}
+
+interface AuthFormErrorProps {
+	message: string | null;
+}
+
+const AuthFormError = ({ message }: AuthFormErrorProps) => {
+	if (!message) return null;
+
+	return (
+		<Box
+			role="alert"
+			sx={{
+				mb: 2,
+				color: "error.main",
+				fontSize: "0.875rem",
+			}}
+		>
+			{message}
+		</Box>
+	);
+};
+
+const AuthFormSubmitButton = ({
+	label,
+	loading,
+	disabled = false,
+	color = "primary",
+}: AuthFormSubmitButtonProps) => {
+	return (
+		<Button
+			type="submit"
+			variant="contained"
+			color={color}
+			fullWidth
+			size="large"
+			disabled={loading || disabled}
+			sx={{ borderRadius: 2, py: 1.4 }}
+		>
+			{loading ? <CircularProgress size={20} color="inherit" /> : label}
+		</Button>
+	);
+};
+
+const AuthFormPasswordFields = ({
+	password,
+	confirmPassword,
+	onPasswordChange,
+	onConfirmChange,
+	disabled = false,
+	autoFocus = false,
+	label = "Password",
+	confirmLabel = "Confirm password",
+	mismatchHelperText = "Passwords do not match",
+}: AuthFormPasswordFieldsProps) => {
+	const mismatch = confirmPassword.length > 0 && password !== confirmPassword;
+
+	return (
+		<>
+			<TextField
+				label={label}
+				type="password"
+				value={password}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => onPasswordChange(event.target.value)}
+				fullWidth
+				required
+				autoComplete="new-password"
+				autoFocus={autoFocus}
+				sx={{ mb: 2 }}
+				disabled={disabled}
+			/>
+			<TextField
+				label={confirmLabel}
+				type="password"
+				value={confirmPassword}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => onConfirmChange(event.target.value)}
+				fullWidth
+				required
+				autoComplete="new-password"
+				error={mismatch}
+				helperText={mismatch ? mismatchHelperText : undefined}
+				sx={{ mb: 3 }}
+				disabled={disabled}
+			/>
+		</>
+	);
+};
+
+const AuthFormOtpField = ({
+	value,
+	onChange,
+	codeLength,
+	disabled = false,
+	autoFocus = true,
+	label = "Verification code",
+}: AuthFormOtpFieldProps) => {
+	return (
+		<TextField
+			label={label}
+			type="text"
+			value={value}
+			onChange={(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+				onChange(event.target.value.replace(/\D/g, "").slice(0, codeLength))
+			}
+			fullWidth
+			required
+			autoFocus={autoFocus}
+			autoComplete="one-time-code"
+			inputProps={{
+				maxLength: codeLength,
+				style: {
+					textAlign: "center",
+					letterSpacing: "0.4em",
+					fontSize: "1.3rem",
+				},
+			}}
+			sx={{ mb: 3 }}
+			disabled={disabled}
+		/>
+	);
+};
+
+type AuthFormProps = BoxProps<"form">;
+
+type AuthFormComponent = FC<AuthFormProps> & {
+	Error: typeof AuthFormError;
+	SubmitButton: typeof AuthFormSubmitButton;
+	PasswordFields: typeof AuthFormPasswordFields;
+	OtpField: typeof AuthFormOtpField;
+};
+
+const AuthForm = ((props: AuthFormProps) => (
+	<Box component="form" noValidate {...props} />
+)) as AuthFormComponent;
+
+AuthForm.Error = AuthFormError;
+AuthForm.SubmitButton = AuthFormSubmitButton;
+AuthForm.PasswordFields = AuthFormPasswordFields;
+AuthForm.OtpField = AuthFormOtpField;
+
+export default AuthForm;

package/src/pages/auth/compound/auth-pages.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import AuthActivatePage from "@evenicanpm/storefront-core/src/pages/auth/auth-activate-page";
+import AuthLoginPage from "@evenicanpm/storefront-core/src/pages/auth/auth-login-page";
+import AuthResetPasswordPage from "@evenicanpm/storefront-core/src/pages/auth/auth-reset-password-page";
+
+type AuthPagesComponent = ((props: { children?: unknown }) => unknown) & {
+	Login: typeof AuthLoginPage;
+	Activate: typeof AuthActivatePage;
+	ResetPassword: typeof AuthResetPasswordPage;
+};
+
+const AuthPages = (({ children }: { children?: unknown }) => (
+	<>{children}</>
+)) as AuthPagesComponent;
+
+AuthPages.Login = AuthLoginPage;
+AuthPages.Activate = AuthActivatePage;
+AuthPages.ResetPassword = AuthResetPasswordPage;
+
+export default AuthPages;

package/src/pages/auth/lib/friendly-error.ts

@@ -0,0 +1,70 @@
+type Translate = (key: string) => string;
+const genericMessage = "Something went wrong. Please try again.";
+
+const defaultMessages: Record<string, string> = {
+	"backend.passwordTooWeak": "Password is too weak.",
+	"backend.passwordTooShort": "Password is too short.",
+	"backend.passwordTooLong": "Password is too long.",
+	"backend.passwordRecentlyUsed": "Password was recently used.",
+	"backend.passwordBanned": "Password is not allowed.",
+	"backend.passwordInvalid": "Password is invalid.",
+	"backend.invalidVerificationCode": "Verification code is invalid.",
+	"backend.userAlreadyExists": "An account already exists.",
+	"backend.userNotFound": "No account found for this email.",
+	"backend.redirectRequired":
+		"This tenant requires browser-based authentication.",
+	"backend.resetFailed": "Password reset failed.",
+	"backend.timeout": "Request timed out. Please try again.",
+	generic: genericMessage,
+};
+
+const translateOrDefault = (t: Translate | undefined, key: string): string => {
+	if (t) return t(key);
+
+	return defaultMessages[key] ?? genericMessage;
+};
+
+export function friendlyError(
+	error: string,
+	suberror?: string,
+	t?: Translate,
+): string {
+	if (suberror === "password_too_weak") {
+		return translateOrDefault(t, "backend.passwordTooWeak");
+	}
+	if (suberror === "password_too_short") {
+		return translateOrDefault(t, "backend.passwordTooShort");
+	}
+	if (suberror === "password_too_long") {
+		return translateOrDefault(t, "backend.passwordTooLong");
+	}
+	if (suberror === "password_recently_used") {
+		return translateOrDefault(t, "backend.passwordRecentlyUsed");
+	}
+	if (suberror === "password_banned") {
+		return translateOrDefault(t, "backend.passwordBanned");
+	}
+	if (suberror === "password_is_invalid") {
+		return translateOrDefault(t, "backend.passwordInvalid");
+	}
+	if (suberror === "invalid_oob_value") {
+		return translateOrDefault(t, "backend.invalidVerificationCode");
+	}
+	if (error === "user_already_exists") {
+		return translateOrDefault(t, "backend.userAlreadyExists");
+	}
+	if (error === "user_not_found") {
+		return translateOrDefault(t, "backend.userNotFound");
+	}
+	if (error === "redirect_required") {
+		return translateOrDefault(t, "backend.redirectRequired");
+	}
+	if (error === "reset_failed") {
+		return translateOrDefault(t, "backend.resetFailed");
+	}
+	if (error === "timeout") {
+		return translateOrDefault(t, "backend.timeout");
+	}
+
+	return translateOrDefault(t, "generic");
+}

package/src/pages/auth/lib/index.ts

@@ -0,0 +1,2 @@
+export { friendlyError } from "@evenicanpm/storefront-core/src/pages/auth/lib/friendly-error";
+export type { OtpMeta } from "@evenicanpm/storefront-core/src/pages/auth/lib/types";

package/src/pages/auth/lib/types.ts

@@ -0,0 +1,5 @@
+export interface OtpMeta {
+	continuation_token: string;
+	challenge_target_label: string;
+	code_length: number;
+}

package/src/pages/cart/cart-item.tsx

@@ -416,13 +416,6 @@ CartItemRoot.Comment = () => {
 				</FlexBox>
 			</>
 		);
-	} else if (isLoading) {
-		content = (
-			<CircularProgress
-				size={30}
-				sx={{ marginTop: "auto", marginLeft: "auto" }}
-			/>
-		);
 	} else {
 		content = (
 			<>
@@ -448,6 +441,7 @@ CartItemRoot.Comment = () => {
 				<Button
 					color="primary"
 					variant="outlined"
+					disabled={isLoading}
 					sx={{ width: 150, mt: "auto", ml: "auto" }}
 					onClick={() => setIsWritingComment(true)}
 				>

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

@@ -7,7 +7,7 @@ import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
 import CheckoutStep from "@evenicanpm/storefront-core/src/pages/checkout/checkout-alt-form/checkout-step";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import type { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import { Box, Button } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
@@ -18,6 +18,7 @@ import React, {
 	type ReactNode,
 	useContext,
 	useEffect,
+	useRef,
 	useState,
 } from "react";
 
@@ -62,12 +63,15 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 	const { data: channelConfigurationData } = getChannelConfiguration.useData();
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [totalSteps, setTotalSteps] = useState(0);
+	const isSubmittingRef = useRef(false);
 
 	const cleanupCart = async (transactionId: string) => {
 		router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
 	};
 
 	const placeOrder = async () => {
+		if (isSubmittingRef.current) return;
+		isSubmittingRef.current = true;
 		setIsSubmitting(true);
 		const cache = queryClient.getQueryCache();
 
@@ -98,6 +102,8 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 					.data as CardPaymentAcceptResult;
 
 				if (!paymentAcceptResult?.TokenizedPaymentCard) {
+					isSubmittingRef.current = false;
+					setIsSubmitting(false);
 					return;
 				}
 
@@ -121,8 +127,9 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 				message: t("placeOrderErrorMessage"),
 				severity: "error",
 			});
+			isSubmittingRef.current = false;
+			setIsSubmitting(false);
 		}
-		setIsSubmitting(false);
 	};
 
 	return (
@@ -227,7 +234,11 @@ CheckoutForm.Footer = () => {
 				color="primary"
 				onClick={placeOrder}
 			>
-				{t("placeOrderButton")}
+				{isSubmitting ? (
+					<CircularProgress size={24} color="inherit" />
+				) : (
+					t("placeOrderButton")
+				)}
 			</Button>
 		</Grid>
 	);

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

@@ -115,13 +115,15 @@ AddressCard.Body = () => {
 	if (!ctx) return null;
 
 	const { address } = ctx;
+	// Join only non-empty values so a dangling comma is never rendered.
+	const stateRegion = [address.State, address.ThreeLetterISORegionName]
+		.filter((value) => value?.trim())
+		.join(", ");
 	return (
 		<>
 			<Paragraph color="grey.700">{address.Street}</Paragraph>
 			<Paragraph color="grey.700">{address.City}</Paragraph>
-			<Paragraph color="grey.700">
-				{address.State}, {address.ThreeLetterISORegionName}
-			</Paragraph>
+			{stateRegion && <Paragraph color="grey.700">{stateRegion}</Paragraph>}
 			<Paragraph color="grey.700">{address.ZipCode}</Paragraph>
 			<Paragraph color="grey.700">{address.Phone}</Paragraph>
 		</>

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

@@ -105,7 +105,8 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 
 	// user + guest logic
 	const { data: user, isLoading: userLoading } = getUser.useData();
-	const isGuest = !userLoading && !user?.RecordId;
+	const isAuthenticatedUser = !!user;
+	const isGuest = !userLoading && !isAuthenticatedUser;
 
 	// dropdown visibility
 	const showDropDown = useDropDown && !isGuest;
@@ -165,9 +166,22 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 
 	const handleAuthFlow = async (address: Address) => {
 		const isNew = !address.Id;
-		const saved = isNew
-			? await createAddress(address)
-			: await updateAddress(address);
+		let saved: Address;
+		if (isNew) {
+			try {
+				saved = await createAddress(address);
+			} catch (error) {
+				const message = error instanceof Error ? error.message : String(error);
+				// Newly created async customers may not be ready for address persistence yet.
+				if (message.includes("CreatingAsyncAddressesNotSupported")) {
+					saved = address;
+				} else {
+					throw error;
+				}
+			}
+		} else {
+			saved = await updateAddress(address);
+		}
 
 		// update local list
 		if (isNew) {
@@ -184,12 +198,12 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 	};
 
 	const handleSaveAddress = async (address: Address) => {
-		if (isGuest) return handleGuestFlow(address);
+		if (!isAuthenticatedUser || userLoading) return handleGuestFlow(address);
 		return handleAuthFlow(address);
 	};
 
 	const handleDelete = async (address: Address) => {
-		if (!isGuest && address.Id) {
+		if (isAuthenticatedUser && address.Id) {
 			await deleteAddress(address.Id);
 		}
 		setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));

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

@@ -14,9 +14,9 @@ import DialogContent from "@mui/material/DialogContent";
 import Grid from "@mui/material/Grid2";
 import TextField from "@mui/material/TextField";
 import { merge } from "lodash";
+import { useTranslations } from "next-intl";
 import React from "react";
 import { Controller, type UseFormReturn, useForm } from "react-hook-form";
-import { useTranslations } from "use-intl";
 import z from "zod";
 
 type AddressFormInput = {

package/src/pages/checkout/checkout-alt-form/steps/customer-info/customer-information.tsx

@@ -39,7 +39,7 @@ const CustomerInformation = (
 	} = props;
 
 	const { data: user, isLoading: userLoading } = getUser.useData();
-	const isGuest = !userLoading && !user?.RecordId;
+	const isGuest = !userLoading && !user;
 
 	const resolveEmail = () => {
 		if (isGuest) return cartEmail;

package/src/pages/confirmation/ordered-products.tsx

@@ -117,7 +117,9 @@ OrderedProducts.Comment = ({ line }: LineProps) => {
 	if (!line.Comment) return null;
 	return (
 		<Paragraph mt={1}>
-			<H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+			<Span sx={{ display: "inline", fontSize: 14, fontWeight: 600 }}>
+				{t("commentLabel")}:
+			</Span>
 			{line.Comment}
 		</Paragraph>
 	);

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

@@ -56,7 +56,7 @@ const initialSearchArea: SearchArea = {
  * @param {Function} props.handleAddToCart - Function to handle adding the product to cart
  * @param {number} props.productId - ID of the product being searched
  *
- * @returns {JSX.Element} - Rendered modal component that displays available stores with inventory information
+ * @returns {React.ReactElement} - Rendered modal component that displays available stores with inventory information
  *
  * @example
  * <FindInStoreModal
@@ -71,7 +71,7 @@ const FindInStoreModal = ({
 	open,
 	handleAddToCart,
 	productId,
-}: Props): JSX.Element => {
+}: Props): React.ReactElement => {
 	const t = useTranslations("productDetail");
 	const [hideOutOfStock, setHideOutOfStock] = React.useState(false);
 	const { data: channelConfig } = getChannelConfiguration.useSuspenseData();
@@ -154,7 +154,7 @@ const FindInStoreModal = ({
 		const _stores = Object.values(stores);
 		if (hideOutOfStock) {
 			return _stores.filter(
-				(store) => !isOutOfStock(store.location.OrgUnitNumber || ""),
+				(store) => !isOutOfStock(store?.location?.OrgUnitNumber || ""),
 			);
 		}
 		return _stores;
@@ -205,7 +205,7 @@ const FindInStoreModal = ({
 				address={location.Address || ""}
 				actionArea={renderActionArea(
 					location.OrgUnitNumber || "",
-					pickupOptions || [],
+					(pickupOptions || []) as DeliveryOption[],
 					inventoryRecord?.TotalAvailableInventoryLevelLabel || "",
 				)}
 				openFrom={location.OpenFrom || 0}

package/src/pages/product-details/bopis/pickup-option-select.tsx

@@ -31,7 +31,7 @@ type Props = {
  * @param {boolean} props.isOutOfStock - Flag indicating if the product is out of stock at this location
  * @param {string} props.inventoryLabel - Label to display when product is out of stock
  *
- * @returns {JSX.Element} The rendered pickup option selection component
+ * @returns {React.ReactElement} The rendered pickup option selection component
  *
  * @example
  * <PickupOptionSelect
@@ -48,7 +48,7 @@ const PickupOptionSelect = ({
 	onPickupClick,
 	isOutOfStock,
 	inventoryLabel,
-}: Props): JSX.Element => {
+}: Props): React.ReactElement => {
 	const [selectedOption, setSelectedOption] =
 		React.useState<DeliveryOption | null>(pickupOptions[0] || null);
 	const handlePickupOptionChange = (event: SelectChangeEvent) => {

package/src/pages/product-details/bopis/search-header.tsx

@@ -19,14 +19,14 @@ type Props = {
  * @param {Object} props - Component props
  * @param {Function} props.handleSearch - Callback function that handles the search action with the search term
  *
- * @returns {JSX.Element} A form with a search input field that triggers the search on submit or Enter key
+ * @returns {React.ReactElement} A form with a search input field that triggers the search on submit or Enter key
  *
  * @example
  * ```tsx
  * <SearchHeader handleSearch={(term) => console.log(`Searching for ${term}`)} />
  * ```
  */
-const SearchHeader = ({ handleSearch }: Props): JSX.Element => {
+const SearchHeader = ({ handleSearch }: Props): React.ReactElement => {
 	const [searchTerm, setSearchTerm] = React.useState<string>("");
 	const t = useTranslations("productDetail.Bopis");
 	const renderSearchAdornment = () => (

package/src/pages/product-details/product-intro/compound/context.ts

@@ -1,4 +1,7 @@
-import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type {
+	ProductDetails,
+	ProductPrice,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import type { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import type {
 	ProductDimensionValueInventoryAvailability,
@@ -44,8 +47,10 @@ export interface ProductImagesContext {
 export interface ProductInfoContext {
 	/** Does the product have variants? If not we do not verify dimensions before adding to cart etc. **/
 	hasVariants: boolean;
-	/** **/
-	inventoryPending: boolean;
+	/** Combined loading state for price and inventory */
+	isProductDetailsPending: boolean;
+	/** */
+	productPrices: ProductPrice[] | undefined;
 	/** */
 	shippingInventoryData: ProductWarehouseInventoryInformation | undefined;
 	/** */

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

@@ -48,11 +48,17 @@ export interface Props {
  */
 const ProductInfo = ({ children }: Props) => {
 	const [showDimensionError, setShowDimensionError] = useState(false);
-	const { masterProduct, selectedVariant } = useProductIntro();
+	const {
+		masterProduct,
+		selectedVariant,
+		variantPending,
+		allDimensionsSelected,
+	} = useProductIntro();
 
 	const hasVariants = masterProduct?.Dimensions?.length !== 0;
 
 	const id = hasVariants ? selectedVariant?.RecordId : masterProduct?.RecordId;
+	const productId = selectedVariant?.RecordId || masterProduct?.RecordId;
 
 	const shippingInventorySearchCriteria =
 		!hasVariants || selectedVariant
@@ -65,11 +71,23 @@ const ProductInfo = ({ children }: Props) => {
 			enabled: !!shippingInventorySearchCriteria,
 		});
 
+	const { data: productPrices, isPending: pricesPending } =
+		getProductPrices.useData({
+			productIds: [productId],
+		});
+
+	const isProductDetailsPending =
+		pricesPending ||
+		!productPrices ||
+		variantPending ||
+		(allDimensionsSelected && inventoryPending);
+
 	return (
 		<ProductInfoContext.Provider
 			value={{
 				hasVariants,
-				inventoryPending,
+				isProductDetailsPending,
+				productPrices,
 				shippingInventoryData,
 				showDimensionError,
 				setShowDimensionError,
@@ -153,23 +171,13 @@ ProductInfo.Dimensions = () => {
 };
 
 ProductInfo.Price = () => {
-	const IntroCtx = useProductIntro();
-	if (!IntroCtx)
-		throw new Error(
-			"ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
-		);
-	const { masterProduct, selectedVariant } = IntroCtx;
 	const { formatCurrency } = useCurrencyFormatter();
-
-	const { data: productPrices, isPending: pricesPending } =
-		getProductPrices.useData({
-			productIds: [selectedVariant?.RecordId || masterProduct?.RecordId],
-		});
+	const { isProductDetailsPending, productPrices } = useProductInfo();
 
 	return (
 		<Box pt={1}>
 			<H2 color="primary.main" mb={0.5} lineHeight="1">
-				{pricesPending || !productPrices ? (
+				{isProductDetailsPending ? (
 					<CircularProgress size={20} />
 				) : (
 					formatCurrency(productPrices?.[0]?.CustomerContextualPrice || 0)
@@ -190,8 +198,8 @@ ProductInfo.Inventory = () => {
 		throw new Error(
 			"ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
 		);
-	const { variantPending, allDimensionsSelected } = IntroCtx;
-	const { shippingInventoryData, inventoryPending } = InfoCtx;
+	const { allDimensionsSelected } = IntroCtx;
+	const { shippingInventoryData, isProductDetailsPending } = InfoCtx;
 	if (!allDimensionsSelected)
 		return (
 			<FlexBox alignItems="center" gap={1}>
@@ -209,9 +217,7 @@ ProductInfo.Inventory = () => {
 		<FlexBox alignItems="center" gap={1}>
 			{/* INVENTORY */}
 			<Box sx={{ my: 3 }}>
-				{inventoryPending || variantPending ? (
-					<CircularProgress size={20} />
-				) : (
+				{!isProductDetailsPending && (
 					<Typography variant="body2" color="text.secondary" fontWeight={600}>
 						{getInventoryLabel(shippingInventoryData)}
 					</Typography>

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

@@ -15,6 +15,7 @@ import useProductList from "@evenicanpm/storefront-core/src/pages/product-list/u
 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 type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useLocale, useTranslations } from "next-intl";
@@ -149,7 +150,7 @@ ProductListView.Pagination = function Pager() {
 ProductListView.Results = function Results() {
 	const t = useTranslations("ProductList");
 	const { productData, isLoading, view, productPrices } = useProductList();
-	const products = productData?.products ?? [];
+	const products = (productData?.products ?? []) as ProductSearchResult[];
 	const paginationNode = <ProductListView.Pagination />;
 
 	if (isLoading) {