@evenicanpm/storefront-core 2.4.1 → 2.5.0

package/src/components/products-view/compound/products-list-view.tsx

@@ -13,7 +13,7 @@ import {
 import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/components/products-view/compound/types";
 // DATA MODEL
 import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { cloneElement } from "react";
+import { cloneElement, useMemo } from "react";
 
 /**
  * Root component of the ProductsListView.
@@ -21,8 +21,12 @@ import { cloneElement } from "react";
 export default function ProductsListView(props: Readonly<ProductsViewProps>) {
 	const { pagination, products, productPrices, children } = props;
 	console.log(props);
+	const contextValue = useMemo(
+		() => ({ products, productPrices }),
+		[products, productPrices],
+	);
 	return (
-		<ProductsViewContext.Provider value={{ products, productPrices }}>
+		<ProductsViewContext.Provider value={contextValue}>
 			{children}
 			<FlexBetween flexWrap="wrap" mt={4}>
 				{pagination}
@@ -38,7 +42,7 @@ export default function ProductsListView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsListView.List = ({
+const ProductsList = ({
 	children,
 }: {
 	children: React.ReactElement<Record<string, unknown>>;
@@ -76,7 +80,7 @@ export interface ProductCardProps {
  * @param props.price The product price data.
  * @category Sub-Component
  */
-ProductsListView.Card = ({ product, price }: ProductCardProps) => {
+const ProductsListCard = ({ product, price }: ProductCardProps) => {
 	if (!product) return null;
 	return (
 		<ProductCardPlpList
@@ -110,3 +114,6 @@ ProductsListView.Card = ({ product, price }: ProductCardProps) => {
 		</ProductCardPlpList>
 	);
 };
+
+ProductsListView.List = ProductsList;
+ProductsListView.Card = ProductsListCard;

package/src/components/search-bar/compound/search-bar-root.tsx

@@ -13,7 +13,7 @@ import { useClickOutside } from "@evenicanpm/storefront-core/src/components/sear
 import useSearch from "@evenicanpm/storefront-core/src/components/search-bar/hooks/use-search";
 import Box from "@mui/material/Box";
 import type React from "react";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 
 interface Props {
 	handleCloseDrawer?: () => void;
@@ -39,11 +39,13 @@ export default function SearchBarRoot({
 	const { setters, handlers, state } = useSearch();
 	const inputRef = useRef(null);
 	useClickOutside(inputRef, () => setters.setResultsOpen(false));
+	const contextValue = useMemo(
+		() => ({ setters, handlers, state, handleCloseDrawer }),
+		[setters, handlers, state, handleCloseDrawer],
+	);
 
 	return (
-		<SearchContext.Provider
-			value={{ setters, handlers, state, handleCloseDrawer }}
-		>
+		<SearchContext.Provider value={contextValue}>
 			<Box
 				position="relative"
 				flex="1 1 0"

package/src/components/search-bar/compound/textfield-adornment-category.tsx

@@ -17,6 +17,26 @@ type DisplayCategory = {
 	id: number;
 };
 
+const CategoryOptionItem = ({
+	item,
+	onClose,
+	handleChange,
+}: {
+	item: DisplayCategory;
+	onClose: () => void;
+	handleChange: (categoryId: number) => void;
+}) => (
+	<MenuItem
+		key={item.id}
+		onClick={() => {
+			handleChange(item.id);
+			onClose();
+		}}
+	>
+		{item.name}
+	</MenuItem>
+);
+
 /**
  * @category Props
  */
@@ -63,15 +83,12 @@ const CategoryDropdown = ({
 				return options
 					?.filter((current: DisplayCategory) => current.name !== title)
 					.map((item: DisplayCategory) => (
-						<MenuItem
+						<CategoryOptionItem
 							key={item.id}
-							onClick={() => {
-								handleChange(item.id);
-								onClose();
-							}}
-						>
-							{item.name}
-						</MenuItem>
+							item={item}
+							onClose={onClose}
+							handleChange={handleChange}
+						/>
 					));
 			}}
 		/>

package/src/components/search-bar/hooks/use-click-outside.ts

@@ -9,7 +9,13 @@ export const useClickOutside = (
 ) => {
 	useEffect(() => {
 		const handleClick = (e: Event) => {
-			if (ref.current && !ref.current.contains(e.target as Node)) callback();
+			if (
+				ref.current &&
+				e.target instanceof Node &&
+				!ref.current.contains(e.target)
+			) {
+				callback();
+			}
 		};
 
 		document.addEventListener("click", handleClick);

package/src/components/search-bar/hooks/use-search.ts

@@ -12,14 +12,14 @@ export default function useSearch() {
 	// State
 	const [resultsOpen, setResultsOpen] = useState(false);
 	const [searchText, setSearchText] = React.useState<string>("");
-	const [searchCategory, setSelectedCategory] = React.useState<number>(0);
+	const [searchCategory, setSearchCategory] = React.useState<number>(0);
 
 	// Hooks
 	const router = useRouter();
 
 	// Handlers
 	const handleCategoryChange = (categoryId: number) => {
-		setSelectedCategory(categoryId);
+		setSearchCategory(categoryId);
 	};
 
 	const handleNavigate = () => {
@@ -37,7 +37,7 @@ export default function useSearch() {
 		handleNavigate();
 		setResultsOpen(false);
 		setSearchText("");
-		setSelectedCategory(0);
+		setSearchCategory(0);
 	};
 
 	const handleSearch = _.debounce((e) => {

package/src/components/user/index.ts

@@ -0,0 +1,3 @@
+export type { AuthStatus, UseUserAuthResult } from "./use-user-auth";
+export { default as useUserAuth } from "./use-user-auth";
+export { default } from "./user";

package/src/components/user/use-user-auth.ts

@@ -0,0 +1,163 @@
+"use client";
+
+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";
+import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
+import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
+import {
+	customSessionClient,
+	genericOAuthClient,
+} from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+import { useEffect, useRef } from "react";
+
+const authClient = createAuthClient({
+	plugins: [genericOAuthClient(), customSessionClient()],
+});
+const { useSession: useBetterAuthSession } = authClient;
+
+/** Represents the current authentication lifecycle state. */
+export type AuthStatus = "loading" | "authenticated" | "unauthenticated";
+
+/** Return value of {@link useUserAuth}. */
+export interface UseUserAuthResult {
+	/** `true` when a valid session exists. */
+	isAuthenticated: boolean;
+	/** Current authentication lifecycle state. */
+	status: AuthStatus;
+	/** Raw Better Auth session data, or `null` / `undefined` when unauthenticated. */
+	session: ReturnType<typeof useBetterAuthSession>["data"];
+	/** Terminates the current session and redirects via {@link signOutCustom}. */
+	handleLogout: () => Promise<void>;
+	/** Redirects to `/login` with the current path as the `callbackUrl`. */
+	handleSignIn: () => void;
+	/** Low-level sign-out helper (clears the local auth cookie / token). */
+	signOut: () => Promise<void>;
+}
+
+/**
+ * Manages authentication state for the storefront user.
+ *
+ * - Derives `isAuthenticated` and `status` from the Better Auth session.
+ * - For the **E4** datasource, calls `sessionInit` on sign-in to register the
+ *   access token with the backend.
+ * - For the **D365** datasource, back-fills `FirstName` / `LastName` from the
+ *   auth session when the commerce profile has no name yet, preventing stale
+ *   overwrites on subsequent renders.
+ *
+ * @returns Auth state and action handlers consumed by the `User` header component.
+ */
+const useUserAuth = (): UseUserAuthResult => {
+	const { data: session, isPending } = useBetterAuthSession();
+
+	let status: AuthStatus = "unauthenticated";
+	if (isPending) {
+		status = "loading";
+	} else if (session) {
+		status = "authenticated";
+	}
+
+	const isAuthenticated = !!session;
+	const isE4Datasource = (process.env.API_MANAGER_PRIMARY ?? "e4") === "e4";
+	const isD365Datasource = !isE4Datasource;
+
+	const { mutateAsync: sessionInit } = useSessionInit();
+	const { mutateAsync: sessionLogout } = useSessionLogout();
+	const { mutateAsync: updateUser } = useUpdateUser();
+	const syncedUserKeyRef = useRef<string>("");
+
+	const { data: currentUser, isPending: isUserPending } = getUser.useData();
+
+	// session init for E4 datasource
+	useEffect(() => {
+		const accessToken =
+			(session?.session as { accessToken?: string } | undefined)?.accessToken ||
+			"";
+
+		if (
+			isE4Datasource &&
+			isAuthenticated &&
+			session?.user?.email &&
+			accessToken
+		) {
+			sessionInit({ accessToken, email: session.user.email }).catch(
+				console.error,
+			);
+		}
+	}, [isE4Datasource, isAuthenticated, session, sessionInit]);
+
+	// For D365, only seed profile details from the auth session when D365 does not
+	// already have a name. This avoids overwriting explicit profile edits with a
+	// stale session.user.name snapshot.
+	useEffect(() => {
+		if (!isD365Datasource || !isAuthenticated || isUserPending) return;
+
+		const existingFirstName =
+			typeof currentUser?.FirstName === "string"
+				? currentUser.FirstName.trim()
+				: "";
+		const existingLastName =
+			typeof currentUser?.LastName === "string"
+				? currentUser.LastName.trim()
+				: "";
+		if (existingFirstName || existingLastName) return;
+
+		const fullName =
+			typeof session?.user?.name === "string" ? session.user.name.trim() : "";
+		const [firstName = "", ...lastParts] = fullName
+			.split(/\s+/)
+			.filter(Boolean);
+		const lastName = lastParts.join(" ");
+
+		if (!firstName && !lastName) return;
+
+		const syncKey = `${session?.user?.email || ""}:${firstName}:${lastName}`;
+		if (syncedUserKeyRef.current === syncKey) return;
+
+		syncedUserKeyRef.current = syncKey;
+		updateUser({
+			AccountNumber: "",
+			Email: session?.user?.email || undefined,
+			FirstName: firstName || undefined,
+			LastName: lastName || undefined,
+		}).catch((error) => {
+			syncedUserKeyRef.current = "";
+			console.warn("D365 user sync error:", error);
+		});
+	}, [
+		currentUser,
+		isD365Datasource,
+		isAuthenticated,
+		isUserPending,
+		session,
+		updateUser,
+	]);
+
+	const handleLogout = async () => {
+		try {
+			await sessionLogout({});
+			signOutCustom();
+		} catch (err) {
+			console.error("Logout Error:", err);
+		}
+	};
+
+	const handleSignIn = () => {
+		const callbackUrl = encodeURIComponent(
+			globalThis.location.pathname + globalThis.location.search,
+		);
+		globalThis.location.href = `/login?callbackUrl=${callbackUrl}`;
+	};
+
+	return {
+		isAuthenticated,
+		status,
+		session,
+		handleLogout,
+		handleSignIn,
+		signOut: signOutCustom,
+	};
+};
+
+export default useUserAuth;

package/src/components/user/user.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import MobileUserIcon from "@evenicanpm/storefront-core/src/components/icons/user";
+import { NavLink } from "@evenicanpm/storefront-core/src/components/nav-link";
+import T from "@evenicanpm/storefront-core/src/components/T";
+import {
+	type AccountRoute,
+	useCreateAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
+// UI Components
+import {
+	Box,
+	Button,
+	IconButton,
+	List,
+	ListItemButton,
+	Popover,
+} from "@mui/material";
+import { useRouter } from "next/navigation";
+import type React from "react";
+import {
+	createContext,
+	type MouseEvent,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+import { MdPersonOutline as PersonOutline } from "react-icons/md";
+import useUserAuth from "./use-user-auth";
+
+const routeToMenuItem = (route: AccountRoute) => ({
+	href: route.href,
+	label: `Account.Menu.${route.titleKey}`,
+	Icon: route.Icon,
+	count: route.count,
+});
+
+const useBuildMenuItems = () => {
+	const routes = useCreateAccountRoutes();
+	return [
+		routeToMenuItem(routes.profile),
+		routeToMenuItem(routes.orders),
+		routeToMenuItem(routes.wishlists),
+		routeToMenuItem(routes.invoices),
+		routeToMenuItem(routes.addresses),
+	];
+};
+
+type MenuItem = { href: string; label: string };
+
+interface UserContextValue {
+	isAuthenticated: boolean;
+	status: string;
+	menuItems: MenuItem[];
+	handleLogout: () => Promise<void>;
+	handleSignIn: () => void;
+	signOut: () => Promise<void>;
+	anchorEl: HTMLButtonElement | null;
+	setAnchorEl: (el: HTMLButtonElement | null) => void;
+	open: boolean;
+}
+
+const UserContext = createContext<UserContextValue | undefined>(undefined);
+
+interface Props {
+	children?: ReactNode;
+}
+
+const User = ({ children }: Props) => {
+	const { isAuthenticated, status, handleLogout, handleSignIn, signOut } =
+		useUserAuth();
+	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+	const open = Boolean(anchorEl);
+	const menuItems = useBuildMenuItems();
+
+	const value: UserContextValue = useMemo(
+		() => ({
+			isAuthenticated,
+			status,
+			menuItems,
+			handleLogout,
+			handleSignIn,
+			signOut,
+			anchorEl,
+			setAnchorEl,
+			open,
+		}),
+		[
+			isAuthenticated,
+			status,
+			menuItems,
+			handleLogout,
+			handleSignIn,
+			signOut,
+			anchorEl,
+			setAnchorEl,
+			open,
+		],
+	);
+
+	if (status === "loading") return null;
+
+	return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+// Subcomponents
+User.MobileTrigger = function MobileTrigger() {
+	const ctx = useContext(UserContext);
+	const router = useRouter();
+	if (!ctx) return null;
+	const { isAuthenticated, handleSignIn } = ctx;
+	return (
+		<IconButton
+			aria-label="User Menu"
+			onClick={() => {
+				if (isAuthenticated) router.push("/account/profile");
+				else handleSignIn();
+			}}
+		>
+			<MobileUserIcon style={{ fontSize: "1.25rem" }} />
+		</IconButton>
+	);
+};
+
+User.DesktopTrigger = function DesktopTrigger() {
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { setAnchorEl } = ctx;
+	return (
+		<IconButton
+			aria-label="User Menu"
+			onClick={(e: MouseEvent<HTMLButtonElement>) =>
+				setAnchorEl(e.currentTarget)
+			}
+		>
+			<PersonOutline />
+		</IconButton>
+	);
+};
+
+User.Menu = function Menu({
+	children,
+}: {
+	children?: (items: MenuItem[]) => React.ReactNode;
+}) {
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { anchorEl, open, setAnchorEl, menuItems, handleLogout } = ctx;
+	const id = open ? "account-popover" : undefined;
+
+	return (
+		<Popover
+			id={id}
+			open={open}
+			anchorEl={anchorEl}
+			onClose={() => setAnchorEl(null)}
+			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+			transformOrigin={{ vertical: "top", horizontal: "right" }}
+		>
+			<List sx={{ p: 1 }} onClick={() => setAnchorEl(null)}>
+				{children
+					? children(menuItems) // Allow caller to control what gets rendered
+					: menuItems.map(({ href, label }) => (
+							<User.MenuItem key={href} href={href} label={label} />
+						))}
+				<Box p={1}>
+					<Button
+						fullWidth
+						size="small"
+						color="primary"
+						variant="outlined"
+						onClick={handleLogout}
+					>
+						<T path="Account.Menu.btnLogout" />
+					</Button>
+				</Box>
+			</List>
+		</Popover>
+	);
+};
+
+User.MenuItem = function MenuItem({
+	href,
+	label,
+}: {
+	href: string;
+	label: string;
+}) {
+	return (
+		<NavLink href={href} style={{ color: "inherit" }}>
+			<ListItemButton>
+				<T path={label} />
+			</ListItemButton>
+		</NavLink>
+	);
+};
+
+User.LoginButton = function LoginButton() {
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { handleSignIn } = ctx;
+	return (
+		<Button
+			size="small"
+			variant="contained"
+			color="primary"
+			onClick={() => handleSignIn()}
+		>
+			<T path="Account.Menu.btnLogin" />
+		</Button>
+	);
+};
+
+export default User;

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

@@ -1,5 +1,6 @@
 import { Button } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
+import type React from "react";
 import { useArgs } from "storybook/internal/preview-api";
 import { data } from "../../../../__mocks__/products";
 import AddToWishListDialog1 from "./index";
@@ -13,25 +14,29 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const WithTriggerRender = (
+	args: React.ComponentProps<typeof AddToWishListDialog1>,
+) => {
+	const [, setArgs] = useArgs();
+
+	return (
+		<>
+			<Button variant="contained" onClick={() => setArgs({ open: true })}>
+				Add To Wishlist
+			</Button>
+			<AddToWishListDialog1
+				{...args}
+				handleClose={() => setArgs({ open: false })}
+			/>
+		</>
+	);
+};
+
 export const WithTrigger: Story = {
 	args: {
 		productId: Number(data.products[0].ItemId),
 		open: false,
 		handleClose: () => {},
 	},
-	render: (args) => {
-		const [, setArgs] = useArgs();
-
-		return (
-			<>
-				<Button variant="contained" onClick={() => setArgs({ open: true })}>
-					Add To Wishlist
-				</Button>
-				<AddToWishListDialog1
-					{...args}
-					handleClose={() => setArgs({ open: false })}
-				/>
-			</>
-		);
-	},
+	render: (args) => <WithTriggerRender {...args} />,
 };

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

@@ -10,6 +10,7 @@ import DialogHeader from "@evenicanpm/storefront-core/src/components/wishlist-di
 import { Dialog, DialogContent } from "@mui/material";
 import { createAuthClient } from "better-auth/react";
 import type React from "react";
+import { useMemo } from "react";
 
 const { useSession } = createAuthClient();
 
@@ -57,16 +58,18 @@ export default function AddToWishlistDialog({
 			handleClose();
 		}
 	};
+	const contextValue = useMemo(
+		() => ({
+			wishlists,
+			productId,
+			isAuthenticated,
+			handleClose: handleCloseDialog,
+		}),
+		[wishlists, productId, isAuthenticated, handleCloseDialog],
+	);
 
 	return (
-		<AddToWishListDialogContext.Provider
-			value={{
-				wishlists,
-				productId,
-				isAuthenticated,
-				handleClose: handleCloseDialog,
-			}}
-		>
+		<AddToWishListDialogContext.Provider value={contextValue}>
 			<Dialog
 				open={open}
 				onClick={(e) => {

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

@@ -11,7 +11,22 @@ import {
 } from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/context";
 // LOCAL COMPONENTS
 import WishlistItem from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-item";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
+
+function WishListItemProvider({
+	wishlist,
+	children,
+}: Readonly<{
+	wishlist: Wishlist;
+	children: React.ReactNode;
+}>) {
+	const contextValue = useMemo(() => ({ wishlist }), [wishlist]);
+	return (
+		<WishListItemContext.Provider value={contextValue}>
+			{children}
+		</WishListItemContext.Provider>
+	);
+}
 
 /**
  * Maps out the list items (wishlists) or displays no records.
@@ -34,9 +49,9 @@ const WishlistList = ({ children }: { children: React.ReactNode }) => {
 	}
 
 	return wishlists?.map((wishlist: Wishlist) => (
-		<WishListItemContext.Provider value={{ wishlist }} key={wishlist.Id}>
+		<WishListItemProvider wishlist={wishlist} key={wishlist.Id}>
 			{children}
-		</WishListItemContext.Provider>
+		</WishListItemProvider>
 	));
 };
 

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

@@ -4,7 +4,6 @@ interface Props {
 	open: boolean;
 	handleClose: () => void;
 	productId?: number;
-	onSuccess?: () => void;
 }
 
 /**