@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import SideNav from "./index";
 import {
 	Box,
 	Button,
-	Typography,
 	List,
 	ListItem,
 	ListItemText,
+	Typography,
 } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import SideNav from "./index";
 
 const meta: Meta<typeof SideNav> = {
 	title: "Utility/SideNav",

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

@@ -1,7 +1,7 @@
-import { useEffect, useState, ReactNode } from "react";
-import Drawer from "@mui/material/Drawer";
 // GLOBAL CUSTOM COMPONENT
 import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import Drawer from "@mui/material/Drawer";
+import { type ReactNode, useEffect, useState } from "react";
 
 interface Props {
 	/** Optionally manage open state from parent, default is to use local state. */
@@ -13,7 +13,7 @@ interface Props {
 	handler: (event: () => void) => ReactNode;
 }
 
-export default function SideNav(props: Props) {
+export default function SideNav(props: Readonly<Props>) {
 	const {
 		position = "left",
 		open = false,

package/src/components-v2/wishlist-dialogs/__tests__/create-new-list.test.tsx

@@ -1,15 +1,13 @@
-import { vi } from "vitest";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { NextIntlClientProvider } from "next-intl";
 import CreateNewList from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/index";
-
 import {
-	NotificationProvider,
 	Notification,
+	NotificationProvider,
 } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
-
 import ENUS from "@messages/en-US.json";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { NextIntlClientProvider } from "next-intl";
+import { vi } from "vitest";
 
 const queryClient = new QueryClient();
 

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

@@ -1,8 +1,8 @@
+import { Button } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "storybook/internal/preview-api";
-import { Button } from "@mui/material";
-import AddToWishListDialog1 from "./index";
 import { data } from "../../../../__mocks__/products";
+import AddToWishListDialog1 from "./index";
 
 const meta = {
 	title: "Wishlist/AddToWishListDialog",

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

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import { Button, ButtonProps } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/index";
+import { Button, type ButtonProps } from "@mui/material";
+import { useState } from "react";
 
 interface Props {
 	path: string;

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

@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
-import { useTranslations } from "next-intl";
-import { Grid, Button } from "@mui/material";
 import { AddToWishListDialogContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context";
+import { Button, Grid } from "@mui/material";
+import { useTranslations } from "next-intl";
+import React, { useContext } from "react";
 
 const AddToWishListBottomUI = () => {
 	const t = useTranslations("Account.Wishlists");

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

@@ -1,16 +1,15 @@
 // EXTERNAL LIBRARIES AND REACT
-import React from "react";
-import { Dialog, DialogContent } from "@mui/material";
-import { useSession } from "next-auth/react";
-
-// LOCAL COMPONENTS
-import DialogHeader from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header";
-import WishlistList from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-list";
-import AddToWishListBottomUI from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-bottom-ui";
 
 // API AND CONTEXT
 import getWishlists from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlists";
+import AddToWishListBottomUI from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-bottom-ui";
+import WishlistList from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-list";
 import { AddToWishListDialogContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context";
+// LOCAL COMPONENTS
+import DialogHeader from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header";
+import { Dialog, DialogContent } from "@mui/material";
+import { useSession } from "next-auth/react";
+import type React from "react";
 
 export interface AddToWishlistDialogProps {
 	open: boolean;
@@ -45,7 +44,7 @@ export default function AddToWishlistDialog({
 	handleClose,
 	productId,
 	children,
-}: AddToWishlistDialogProps) {
+}: Readonly<AddToWishlistDialogProps>) {
 	const { data: wishlists } = getWishlists.useSuspenseData();
 
 	const { data: session } = useSession();

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

@@ -1,18 +1,17 @@
 /**
  * @module Add-To-Wishlist-Dialog
  */
-import { useContext } from "react";
 
-// LOCAL COMPONENTS
-import WishlistItem from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-item";
+import type { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
-
 // API AND CONTEXT
 import {
 	AddToWishListDialogContext,
 	WishListItemContext,
 } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context";
-import { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+// LOCAL COMPONENTS
+import WishlistItem from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-item";
+import { useContext } from "react";
 
 /**
  * Maps out the list items (wishlists) or displays no records.
@@ -34,8 +33,8 @@ const WishlistList = ({ children }: { children: React.ReactNode }) => {
 		return <NoRecords message="Account.Wishlists.noWishlists" />;
 	}
 
-	return wishlists?.map((wishlist: Wishlist, i: number) => (
-		<WishListItemContext.Provider value={{ wishlist }} key={i}>
+	return wishlists?.map((wishlist: Wishlist) => (
+		<WishListItemContext.Provider value={{ wishlist }} key={wishlist.Id}>
 			{children}
 		</WishListItemContext.Provider>
 	));

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context.ts

@@ -1,8 +1,9 @@
 /**
  * @module Add-To-Wishlist-Dialog
  */
+
+import type { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 import { createContext } from "react";
-import { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 
 /**
  * @category Context

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

@@ -1,21 +1,19 @@
 /**
  * @module Add-To-Wishlist-Dialog
  */
-import React from "react";
-import { useSession } from "next-auth/react";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTranslations } from "next-intl";
-
-// ICONS
-import { MdFavorite } from "react-icons/md";
-import { IconButton, Theme, styled } from "@mui/material";
 
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 // GLOBAL COMPONENTS
 import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-
 // LOCAL COMPONENTS
 import CreateWishlistButton from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/create-wishlist-button";
+import { IconButton, styled, type Theme } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useSession } from "next-auth/react";
+import { useTranslations } from "next-intl";
+import React from "react";
+// ICONS
+import { MdFavorite } from "react-icons/md";
 
 // STYLED COMPONENT
 const StyledBox = styled("div")(({ theme }) => ({

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

@@ -1,19 +1,19 @@
 /**
  * @module Add-To-Wishlist-Dialog
  */
-import { useContext, useState } from "react";
-import Link from "next/link";
+
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	AddToWishListDialogContext,
 	WishListItemContext,
 } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context";
 import UseWishlist from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist";
-import { format } from "date-fns";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { StyledTableRow } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/styles";
-import { Add } from "@mui/icons-material";
+import { Add, Delete } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
-import { Delete } from "@mui/icons-material";
+import { format } from "date-fns";
+import Link from "next/link";
+import { useContext, useState } from "react";
 /**
  * Wishlist dialog list item. Displays info about the wishlist and
  * also has a context-aware "action" button, either add or remove depending on

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

@@ -2,21 +2,19 @@
  * @module Add-To-Wishlist-Dialog
  */
 // External libraries
-import { useTranslations } from "next-intl";
 
-// Core/storefront utilities
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import {
+import type {
 	ExtendedProductListLine,
 	WishlistLinesInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-
 // API manager - mutations
 import useAddToWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/add-to-wishlist";
 import useRemoveFromWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/remove-from-wishlist";
-
 // API manager - queries and types
 import getWishlists from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlists";
+// Core/storefront utilities
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { useTranslations } from "next-intl";
 
 /**
  * Handles adding and removing products from a wishlist.
@@ -58,6 +56,7 @@ export default function UseWishlist() {
 				message: t("wishlistLineAddFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -91,6 +90,7 @@ export default function UseWishlist() {
 				message: t("wishlistLineRemoveFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 

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

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

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

@@ -1,8 +1,8 @@
-import React, { useContext } from "react";
-import { useTranslations } from "next-intl";
+import { CreateNewWishlistContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog";
 import { Button } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import { CreateNewWishlistContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog";
+import { useTranslations } from "next-intl";
+import React, { useContext } from "react";
 
 function BottomUI() {
 	const t = useTranslations("Account.Wishlists");

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

@@ -1,17 +1,18 @@
-import React, { createContext } from "react";
-import isFunction from "lodash/isFunction";
-import { useTranslations } from "next-intl";
-import { Dialog, DialogContent, CircularProgress } from "@mui/material";
+// API
+import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
 // Global Custom components
 import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import CreateNewWishlistForm from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-form";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { CircularProgress, Dialog, DialogContent } from "@mui/material";
 // Forms
 import { useFormik } from "formik";
-import { z } from "zod";
 import { withZodSchema } from "formik-validator-zod";
-// API
-import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
-import CreateNewWishlistForm from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-form";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext } from "react";
+import { z } from "zod";
 
 interface Props {
 	open: boolean;
@@ -38,7 +39,7 @@ interface CreateNewWishlistContext {
 export const CreateNewWishlistContext =
 	createContext<CreateNewWishlistContext | null>(null);
 
-export default function CreateNewList(props: Props) {
+export default function CreateNewList(props: Readonly<Props>) {
 	const { children } = props;
 	const t = useTranslations("Account.Wishlists");
 	const { setNotification } = useNotification();
@@ -58,6 +59,7 @@ export default function CreateNewList(props: Props) {
 				message: t("wishlistFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 

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

@@ -1,13 +1,15 @@
 /**
  * @module Create-Wishlist-Dialog
  */
-import React, { useContext } from "react";
-import { useTranslations } from "next-intl";
-import { Box, TextField, FormControlLabel, Checkbox } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+
 // Global Custom components
 import BottomUI from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-bottom-ui";
 import { CreateNewWishlistContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog";
+import { Box, Checkbox, FormControlLabel, TextField } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useContext } from "react";
 
 /*
  * @category Sub-Component

package/src/components-v2/wishlist-dialogs/create-wishlist/create-wishlist-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
 import CreateNewListDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/index";
+import { Button } from "@mui/material";
+import { useState } from "react";
 
 interface Props {
 	path?: string;

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

@@ -1,9 +1,9 @@
-import Card, { CardProps } from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
 import NavLink, {
-	NavLinkProps,
+	type NavLinkProps,
 } from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
-import { ComponentType } from "react";
+import Card, { type CardProps } from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import type { ComponentType } from "react";
 
 type ExtendedNavLinkProps = NavLinkProps & {
 	isCurrentPath?: boolean;

package/src/hooks/use-cart.ts

@@ -1,6 +1,6 @@
 "use client";
-import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
 import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
+import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
 import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
 import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 /**

package/src/hooks/use-nextauth-session.ts

@@ -0,0 +1,65 @@
+// hooks/useAppSession.ts
+
+import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init";
+import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
+// API hooks
+import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import {
+	getMsalInstance,
+	initializeMsal,
+} from "@evenicanpm/storefront-core/src/auth/msal";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+
+export function useAppSession() {
+	const { data: session } = useSession();
+	const { mutateAsync: sessionInit } = useSessionInit();
+	const { mutateAsync: updateUser } = useUpdateUser();
+	const { mutateAsync: sessionLogout } = useSessionLogout();
+
+	// Handle custom auth errors
+	useEffect(() => {
+		if (session?.error) {
+			console.warn("Auth Error", session.error);
+			sessionLogout({}); // Or your custom signOut
+		}
+	}, [session, sessionLogout]);
+
+	// Initialize session in API
+	useEffect(() => {
+		if (!session) return;
+
+		const { accessToken, user } = session;
+		if (accessToken && user?.email) {
+			sessionInit({ accessToken, email: user.email }).catch(console.error);
+		}
+	}, [session, sessionInit]);
+
+	// MSAL redirect handling
+	useEffect(() => {
+		const handleRedirect = async () => {
+			try {
+				await initializeMsal();
+				const res = await getMsalInstance().handleRedirectPromise();
+				if (res) {
+					const { given_name, family_name } = res.idTokenClaims as any;
+					if (given_name && family_name) {
+						updateUser({
+							AccountNumber: "",
+							FirstName: given_name,
+							LastName: family_name,
+						}).catch(console.error);
+					}
+				}
+			} catch (err) {
+				console.error("MSAL redirect error:", err);
+			}
+		};
+		handleRedirect();
+	}, [updateUser]);
+
+	return {
+		session,
+		isAuthenticated: !!session,
+	};
+}

package/src/hooks/use-overflow-detect.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function useOverflowDetect() {
 	const elementRef = useRef<HTMLElement | null>(null);

package/src/hooks/use-settings.ts

@@ -1,4 +1,4 @@
-import { Direction } from "@mui/material/styles";
+import type { Direction } from "@mui/material/styles";
 export type SettingsOptions = { direction: Direction };
 
 const initialSettings: SettingsOptions = { direction: "ltr" };

package/src/hooks/use-variants.ts

@@ -1,13 +1,12 @@
 "use client";
-// react and react-query
-import { useReducer } from "react";
 
 // Types
-import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // Data fetching
 import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+// react and react-query
+import { useReducer } from "react";
 
 // Define Types for Hook
 export type SelectedDimensions = Record<
@@ -52,7 +51,6 @@ export default function useVariants(product: ProductDetails) {
 	const handleSelectDimension = async (
 		dimensionValue: ProductDimensionValueInventoryAvailability,
 	) => {
-		//prefetchPDPData(dimensionValue, queryClient);
 		dispatch({
 			type: "SELECT_DIMENSION",
 			dimensionValue,
@@ -99,36 +97,36 @@ const prefetchPDPData = (
  * Reducer synchronizes selected dimensions and variant ID
  */
 const variantReducer = (state: VariantState, action: VariantAction) => {
-	switch (action.type) {
-		case "SELECT_DIMENSION":
-			const newDimensionsState: SelectedDimensions = {
-				...state.selectDimensions,
-				[action.dimensionValue?.DimensionTypeValue ?? ""]:
-					action.dimensionValue,
-			};
-
-			const allDimensionsSelected =
-				Object.keys(newDimensionsState).length === action.totalDimensions;
+	if (action.type === "SELECT_DIMENSION") {
+		const newDimensionsState: SelectedDimensions = {
+			...state.selectDimensions,
+			[action.dimensionValue?.DimensionTypeValue ?? ""]: action.dimensionValue,
+		};
 
-			// We cannot select a variant until all dimensions are selected
-			if (!allDimensionsSelected)
-				return {
-					...state,
-					selectDimensions: newDimensionsState,
-					selectedVariantRecordId: undefined,
-				};
-
-			const dimensionsArray = Object.values(newDimensionsState);
-
-			// Deduce product id from selected dimensions
-			const intersectedVariantIds = dimensionsArray.reduce((ids, dimension) => {
-				return ids.filter((id) => dimension.ProductIds?.includes(id));
-			}, dimensionsArray[0]?.ProductIds || []);
+		const allDimensionsSelected =
+			Object.keys(newDimensionsState).length === action.totalDimensions;
 
+		// We cannot select a variant until all dimensions are selected
+		if (!allDimensionsSelected)
 			return {
 				...state,
 				selectDimensions: newDimensionsState,
-				selectedVariantRecordId: intersectedVariantIds[0], // There can be only one!
+				selectedVariantRecordId: undefined,
 			};
+
+		const dimensionsArray = Object.values(newDimensionsState);
+
+		// Deduce product id from selected dimensions
+		const intersectedVariantIds = dimensionsArray.reduce((ids, dimension) => {
+			return ids.filter((id) => dimension.ProductIds?.includes(id));
+		}, dimensionsArray[0]?.ProductIds || []);
+
+		return {
+			...state,
+			selectDimensions: newDimensionsState,
+			selectedVariantRecordId: intersectedVariantIds[0], // There can be only one!
+		};
 	}
+
+	return state;
 };

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

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

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

@@ -1,4 +1,4 @@
-import {
+import type {
 	ProductSearchResult,
 	SimpleProduct,
 } from "@msdyn365-commerce/retail-proxy";

package/src/lib/cart-cookie-handler.ts

@@ -1,9 +1,9 @@
 "use server";
-import { cookies } from "next/headers";
 import {
 	CART_COOKIE_NAME,
 	CartCookieType,
 } from "@evenicanpm/storefront-core/src/lib/cart-cookie-handler-constants";
+import { cookies } from "next/headers";
 
 const getCartCookie = async (): Promise<string | null> =>
 	(await getCartCookieWithAuthStatus())?.id ?? null;