@evenicanpm/storefront-core 2.1.0 → 2.3.0

package/src/components/header/__tests__/user.test.tsx

@@ -4,6 +4,14 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { NextIntlClientProvider } from "next-intl";
 import { vi } from "vitest";
 
+const { mockMutate, mockHandleRedirectPromise, mockUseSession } = vi.hoisted(
+	() => ({
+		mockMutate: vi.fn().mockResolvedValue({}),
+		mockHandleRedirectPromise: vi.fn().mockResolvedValue(null),
+		mockUseSession: vi.fn(),
+	}),
+);
+
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init",
 	() => ({
@@ -11,10 +19,6 @@ vi.mock(
 	}),
 );
 
-const mockMutate = vi.fn().mockResolvedValue({});
-const mockHandleRedirectPromise = vi.fn().mockResolvedValue(null);
-const mockUseSession = vi.fn();
-
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user",
 	() => ({
@@ -36,9 +40,17 @@ vi.mock("next/navigation", () => ({
 	usePathname: () => "/mock-path",
 }));
 
-vi.doMock("next-auth/react", () => ({
-	useSession: mockUseSession,
-	signIn: vi.fn(),
+vi.mock("better-auth/react", () => {
+	return {
+		createAuthClient: () => ({
+			useSession: mockUseSession,
+			signIn: { oauth2: vi.fn() },
+		}),
+	};
+});
+
+vi.mock("better-auth/client/plugins", () => ({
+	genericOAuthClient: () => ({}),
 }));
 
 vi.mock("@evenicanpm/storefront-core/src/auth/msal", () => ({
@@ -58,7 +70,7 @@ describe.skip("User Component", async () => {
 	it("renders login button when user is not authenticated", () => {
 		mockUseSession.mockReturnValue({
 			data: null,
-			status: "unauthenticated",
+			isPending: false,
 		});
 		render(
 			<NextIntlClientProvider locale="en" messages={messages}>
@@ -75,9 +87,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		render(
@@ -94,10 +106,10 @@ describe.skip("User Component", async () => {
 		expect(userMenuButton).toBeInTheDocument();
 	});
 
-	it("calls signOut when session.error is present", () => {
+	it("calls signOut when session is null after pending", () => {
 		mockUseSession.mockReturnValue({
-			data: { error: "Some auth error" },
-			status: "authenticated",
+			data: null,
+			isPending: false,
 		});
 
 		render(
@@ -113,8 +125,11 @@ describe.skip("User Component", async () => {
 		const mockSignOut = vi.mocked(signOut);
 
 		mockUseSession.mockReturnValue({
-			data: { user: { email: "test@example.com" }, accessToken: "token" },
-			status: "authenticated",
+			data: {
+				user: { email: "test@example.com" },
+				session: { accessToken: "token" },
+			},
+			isPending: false,
 		});
 
 		render(
@@ -139,9 +154,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		vi.mocked(mockHandleRedirectPromise).mockResolvedValue({
@@ -193,9 +208,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		vi.mocked(mockHandleRedirectPromise).mockRejectedValue(

package/src/components/header/components/user.tsx

@@ -4,6 +4,7 @@ import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services
 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 getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
 import {
 	getMsalInstance,
 	initializeMsal,
@@ -12,6 +13,11 @@ import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
 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,
+	type AccountRouteOverrides,
+	createAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // UI Components
 import {
 	Box,
@@ -21,9 +27,16 @@ import {
 	ListItemButton,
 	Popover,
 } from "@mui/material";
-import { useRouter } from "next/navigation";
+import { genericOAuthClient } from "better-auth/client/plugins";
 // Auth components
-import { signIn, useSession } from "next-auth/react";
+import { createAuthClient } from "better-auth/react";
+import { useRouter } from "next/navigation";
+
+const authClient = createAuthClient({
+	plugins: [genericOAuthClient()],
+});
+const { useSession: useBetterAuthSession } = authClient;
+
 import type React from "react";
 import {
 	createContext,
@@ -40,19 +53,32 @@ interface IdTokenClaims {
 	family_name?: string;
 }
 
-const MENU_ITEMS = [
-	{ href: "/account/profile", label: "Account.Menu.profile" },
-	{ href: "/account/addresses", label: "Account.Menu.addresses" },
-	{ href: "/account/orders", label: "Account.Menu.orders" },
-	{ href: "/account/wish-lists", label: "Account.Menu.wishlists" },
-];
+const routeToMenuItem = (route: AccountRoute) => ({
+	href: route.href,
+	label: `Account.Menu.${route.titleKey}`,
+	Icon: route.Icon,
+	count: route.count,
+});
+
+const buildMenuItems = (overrides?: AccountRouteOverrides) => {
+	const routes = createAccountRoutes(overrides);
+	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: typeof MENU_ITEMS;
+	menuItems: MenuItem[];
 	handleLogout: () => Promise<void>;
-	signIn: typeof signIn;
+	handleSignIn: () => void;
 	signOut: () => Promise<void>;
 	anchorEl: HTMLButtonElement | null;
 	setAnchorEl: (el: HTMLButtonElement | null) => void;
@@ -63,30 +89,36 @@ const UserContext = createContext<UserContextValue | undefined>(undefined);
 
 interface Props {
 	children?: ReactNode;
+	routeOverrides?: AccountRouteOverrides;
 }
 
-const User = ({ children }: Props) => {
-	const { data: session, status } = useSession();
+const User = ({ children, routeOverrides }: Props) => {
+	const { data: session, isPending } = useBetterAuthSession();
+	const status = isPending
+		? "loading"
+		: session
+			? "authenticated"
+			: "unauthenticated";
 
-	if (session?.error) {
-		// Custom error set in server - /api/auth/[...nextauth]
-		console.warn("Auth Error", session?.error);
-		signOutCustom();
+	if (session === null && !isPending) {
+		// No error handling needed - session is simply null when not authenticated
 	}
 
 	const isAuthenticated = !!session;
 	const { mutateAsync: sessionInit } = useSessionInit();
 	const { mutateAsync: updateUser } = useUpdateUser();
 	const { mutateAsync: sessionLogout } = useSessionLogout();
+	// Register the "me" query on the client so the hydrated cache entry has a queryFn for refetches
+	getUser.useData();
 
 	// session init
 	useEffect(() => {
-		if (isAuthenticated) {
-			const { accessToken, user } = session;
-			const email = user?.email;
-			if (accessToken && email) {
-				sessionInit({ accessToken, email });
-			}
+		if (isAuthenticated && session?.user?.email) {
+			const accessToken =
+				(session.session as { accessToken?: string })?.accessToken || "";
+			sessionInit({ accessToken, email: session.user.email }).catch(
+				console.error,
+			);
 		}
 	}, [isAuthenticated, session, sessionInit]);
 
@@ -124,15 +156,24 @@ const User = ({ children }: Props) => {
 		}
 	};
 
+	const handleSignIn = () => {
+		authClient.signIn.oauth2({
+			providerId: "entra-external-id",
+			callbackURL: "/",
+		});
+	};
+
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
 
+	const menuItems = buildMenuItems(routeOverrides);
+
 	const value: UserContextValue = {
 		isAuthenticated,
 		status,
-		menuItems: MENU_ITEMS,
+		menuItems,
 		handleLogout,
-		signIn,
+		handleSignIn,
 		signOut: signOutCustom,
 		anchorEl,
 		setAnchorEl,
@@ -149,13 +190,13 @@ User.MobileTrigger = function MobileTrigger() {
 	const ctx = useContext(UserContext);
 	const router = useRouter();
 	if (!ctx) return null;
-	const { isAuthenticated, signIn } = ctx;
+	const { isAuthenticated, handleSignIn } = ctx;
 	return (
 		<IconButton
 			aria-label="User Menu"
 			onClick={() => {
 				if (isAuthenticated) router.push("/account/profile");
-				else signIn();
+				else handleSignIn();
 			}}
 		>
 			<MobileUserIcon style={{ fontSize: "1.25rem" }} />
@@ -182,7 +223,7 @@ User.DesktopTrigger = function DesktopTrigger() {
 User.Menu = function Menu({
 	children,
 }: {
-	children?: (items: typeof MENU_ITEMS) => React.ReactNode;
+	children?: (items: MenuItem[]) => React.ReactNode;
 }) {
 	const ctx = useContext(UserContext);
 	if (!ctx) return null;
@@ -239,13 +280,13 @@ User.MenuItem = function MenuItem({
 User.LoginButton = function LoginButton() {
 	const ctx = useContext(UserContext);
 	if (!ctx) return null;
-	const { signIn } = ctx;
+	const { handleSignIn } = ctx;
 	return (
 		<Button
 			size="small"
 			variant="contained"
 			color="primary"
-			onClick={() => signIn()}
+			onClick={() => handleSignIn()}
 		>
 			<T path="Account.Menu.btnLogin" />
 		</Button>

package/src/components/mini-cart/mini-cart.tsx

@@ -121,8 +121,8 @@ MiniCart.Items = () => {
 	} = ctx;
 
 	return (
-		<Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
-			{cart.CartLines.length > 0 ? (
+		<Box height={`calc(100vh - ${cart?.CartLines?.length ? "207px" : "75px"})`}>
+			{cart?.CartLines?.length > 0 ? (
 				<Scrollbar>
 					{cart?.CartLines?.map((item) => (
 						<MiniCartItem
@@ -153,7 +153,7 @@ MiniCart.Actions = () => {
 	const ctx = useContext(MiniCartContext);
 	if (!ctx) return null;
 	const { cart, currency, handleNavigate } = ctx;
-	return cart?.CartLines.length > 0 ? (
+	return cart?.CartLines?.length > 0 ? (
 		<BottomActions
 			total={currency(cart?.TotalAmount || 0)}
 			handleNavigate={handleNavigate}

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

@@ -8,9 +8,11 @@ import { AddToWishListDialogContext } from "@evenicanpm/storefront-core/src/comp
 // LOCAL COMPONENTS
 import DialogHeader from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header";
 import { Dialog, DialogContent } from "@mui/material";
-import { useSession } from "next-auth/react";
+import { createAuthClient } from "better-auth/react";
 import type React from "react";
 
+const { useSession } = createAuthClient();
+
 export interface AddToWishlistDialogProps {
 	open: boolean;
 	handleClose: () => void;

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

@@ -9,8 +9,11 @@ import { H2 } from "@evenicanpm/storefront-core/src/components/Typography";
 import CreateWishlistButton from "@evenicanpm/storefront-core/src/components/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 { createAuthClient } from "better-auth/react";
 import { useTranslations } from "next-intl";
+
+const { useSession } = createAuthClient();
+
 // ICONS
 import { MdFavorite } from "react-icons/md";
 

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

@@ -1,36 +1,31 @@
 // 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 { createAuthClient } from "better-auth/react";
 import { useEffect } from "react";
 
+const authClient = createAuthClient();
+const { useSession: useBetterAuthSession } = authClient;
+
 export function useAppSession() {
-	const { data: session } = useSession();
+	const { data: session, isPending } = useBetterAuthSession();
 	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) {
+		const { user } = session;
+		const accessToken =
+			(session.session as { accessToken?: string })?.accessToken || "";
+		if (user?.email) {
 			sessionInit({ accessToken, email: user.email }).catch(console.error);
 		}
 	}, [session, sessionInit]);
@@ -64,5 +59,6 @@ export function useAppSession() {
 	return {
 		session,
 		isAuthenticated: !!session,
+		isPending,
 	};
 }

package/src/pages/account/account-navigation.tsx

@@ -9,6 +9,11 @@ import {
 	Paragraph,
 	Span,
 } from "@evenicanpm/storefront-core/src/components/Typography";
+import {
+	type AccountRoute,
+	type AccountRouteOverrides,
+	createAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // STYLED COMPONENTS
 import {
 	MainContainer,
@@ -17,88 +22,114 @@ import {
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { createContext, Fragment, type ReactNode } from "react";
-// ICON COMPONENTS
-import {
-	MdFavoriteBorder as FavoriteBorder,
-	MdPerson as Person,
-	MdPlace as Place,
-	MdOutlineShoppingBag as ShoppingBagOutlined,
-} from "react-icons/md";
+import type { IconType } from "react-icons";
 
 /**
  * 
  *** Extend menu: 
 <AccountNavigation
-  items={[
-    ...DEFAULT_MENU_ITEMS,
-    {
-      title: "EXTRAS",
-      list: [
-        {
-          href: "/account/rewards",
-          title: "rewards",
-          Icon: RewardsIcon,
-          count: 5,
-        },
-      ],
-    },
-  ]}
+	items={[
+		...DEFAULT_MENU_ITEMS,
+		{
+			title: "EXTRAS",
+			list: [
+				{
+					href: "/account/rewards",
+					title: "rewards",
+					Icon: RewardsIcon,
+					count: 5,
+				},
+			],
+		},
+	]}
 />;
 
 *** Override completely:
 <AccountNavigation>
-  <AccountNavigation.Section title="Custom Section">
-    <AccountNavigation.Item
-      href="/custom"
-      Icon={CustomIcon}
-      label="Custom Page"
-    />
-  </AccountNavigation.Section>
+	<AccountNavigation.Section title="Custom Section">
+		<AccountNavigation.Item
+			href="/custom"
+			Icon={CustomIcon}
+			label="Custom Page"
+		/>
+	</AccountNavigation.Section>
 </AccountNavigation>;
  */
 
-export const DEFAULT_MENU_ITEMS = [
-	{
-		title: "DASHBOARD",
-		list: [
-			{
-				href: "/account/orders",
-				title: "orders",
-				Icon: ShoppingBagOutlined,
-				count: 0,
-			},
-			{ href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
-		],
-	},
-	{
-		title: "ACCOUNT SETTINGS",
-		list: [
-			{ href: "/account/profile", title: "profile", Icon: Person },
-			{ href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
-		],
-	},
-];
+interface NavItem {
+	href: string;
+	title: string;
+	Icon: IconType;
+	count?: number;
+}
+
+interface NavSection {
+	title: string;
+	list: NavItem[];
+}
+
+/**
+ *
+ * @param route
+ * @returns
+ */
+const routeToNavItem = (route: AccountRoute): NavItem => {
+	return {
+		href: route.href,
+		title: route.titleKey,
+		Icon: route.Icon,
+		count: route.count,
+	};
+};
+
+export const DEFAULT_MENU_ITEMS = (
+	overrides?: AccountRouteOverrides,
+): NavSection[] => {
+	const routes = createAccountRoutes(overrides);
+	return [
+		{
+			title: "DASHBOARD",
+			list: [
+				routeToNavItem(routes.orders),
+				routeToNavItem(routes.wishlists),
+				routeToNavItem(routes.invoices),
+			],
+		},
+		{
+			title: "ACCOUNT SETTINGS",
+			list: [routeToNavItem(routes.profile), routeToNavItem(routes.addresses)],
+		},
+	];
+};
 
 interface AccountNavigationContextValue {
-	items: typeof DEFAULT_MENU_ITEMS;
+	items: NavSection[];
 }
 
 const AccountNavigationContext =
 	createContext<AccountNavigationContextValue | null>(null);
+
 interface AccountNavigationProps {
-	items?: typeof DEFAULT_MENU_ITEMS;
+	items?: NavSection[];
 	children?: ReactNode;
+	routeOverrides?: AccountRouteOverrides;
 }
 
-const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
+const AccountNavigation = ({
+	items,
+	children,
+	routeOverrides,
+}: AccountNavigationProps) => {
 	const pathname = usePathname();
 	const t = useTranslations("Account.Menu");
 
 	const { data: user } = getUser.useData();
 	const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
 
-	// Merge default items with provided overrides
-	const mergedItems = (items || DEFAULT_MENU_ITEMS).map((section) => ({
+	const defaultItems = DEFAULT_MENU_ITEMS(routeOverrides);
+
+	// Render either the props items or the default items
+	const itemsWCounts = (items || defaultItems).map((section) => ({
 		...section,
 		list: section.list.map((item) => {
 			if (item.href === "/account/orders") {
@@ -112,10 +143,10 @@ const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
 	}));
 
 	return (
-		<AccountNavigationContext.Provider value={{ items: mergedItems }}>
+		<AccountNavigationContext.Provider value={{ items: itemsWCounts }}>
 			<MainContainer>
 				{children ||
-					mergedItems.map((section) => (
+					itemsWCounts.map((section) => (
 						<AccountNavigation.Section
 							key={section.title}
 							title={section.title}
@@ -151,10 +182,7 @@ AccountNavigation.Section = ({ title, children }: SectionProps) => {
 	);
 };
 
-interface ItemProps {
-	href: string;
-	Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-	count?: number;
+interface ItemProps extends Pick<NavItem, "href" | "Icon" | "count"> {
 	label: string;
 	isActive?: boolean;
 }

package/src/pages/account/account-routes.ts

@@ -0,0 +1,52 @@
+import type { IconType } from "react-icons";
+import {
+	MdFavoriteBorder as FavoriteBorder,
+	MdDocumentScanner as InvoicesIcon,
+	MdPerson as Person,
+	MdPlace as Place,
+	MdOutlineShoppingBag as ShoppingBagOutlined,
+} from "react-icons/md";
+
+export interface AccountRoute {
+	href: string;
+	titleKey: string;
+	Icon: IconType;
+	count?: number;
+}
+
+export interface AccountRouteOverrides {
+	wishlists?: { href?: string; titleKey?: string };
+}
+
+const defaults = {
+	orders: {
+		href: "/account/orders",
+		titleKey: "orders",
+		Icon: ShoppingBagOutlined,
+		count: 0,
+	},
+	wishlists: {
+		href: "/account/wish-lists",
+		titleKey: "wishlists",
+		Icon: FavoriteBorder,
+	},
+	invoices: {
+		href: "/account/invoices",
+		titleKey: "invoices",
+		Icon: InvoicesIcon,
+	},
+	profile: { href: "/account/profile", titleKey: "profile", Icon: Person },
+	addresses: {
+		href: "/account/addresses",
+		titleKey: "addresses",
+		Icon: Place,
+		count: 0,
+	},
+} as const satisfies Record<string, AccountRoute>;
+
+export type AccountRouteKey = keyof typeof defaults;
+
+export const createAccountRoutes = (overrides?: AccountRouteOverrides) => ({
+	...defaults,
+	wishlists: { ...defaults.wishlists, ...overrides?.wishlists },
+});