@evenicanpm/storefront-core 2.3.1 → 2.4.1

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

@@ -2,13 +2,8 @@
 
 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 getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
-import {
-	getMsalInstance,
-	initializeMsal,
-} from "@evenicanpm/storefront-core/src/auth/msal";
 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";
@@ -27,13 +22,16 @@ import {
 	ListItemButton,
 	Popover,
 } from "@mui/material";
-import { genericOAuthClient } from "better-auth/client/plugins";
+import {
+	customSessionClient,
+	genericOAuthClient,
+} from "better-auth/client/plugins";
 // Auth components
 import { createAuthClient } from "better-auth/react";
 import { useRouter } from "next/navigation";
 
 const authClient = createAuthClient({
-	plugins: [genericOAuthClient()],
+	plugins: [genericOAuthClient(), customSessionClient()],
 });
 const { useSession: useBetterAuthSession } = authClient;
 
@@ -44,15 +42,11 @@ import {
 	type ReactNode,
 	useContext,
 	useEffect,
+	useRef,
 	useState,
 } from "react";
 import { MdPersonOutline as PersonOutline } from "react-icons/md";
 
-interface IdTokenClaims {
-	given_name?: string;
-	family_name?: string;
-}
-
 const routeToMenuItem = (route: AccountRoute) => ({
 	href: route.href,
 	label: `Account.Menu.${route.titleKey}`,
@@ -104,47 +98,80 @@ const User = ({ children }: Props) => {
 	}
 
 	const isAuthenticated = !!session;
+	const isE4Datasource = (process.env.API_MANAGER_PRIMARY ?? "e4") === "e4";
+	const isD365Datasource = !isE4Datasource;
 	const { mutateAsync: sessionInit } = useSessionInit();
-	const { mutateAsync: updateUser } = useUpdateUser();
 	const { mutateAsync: sessionLogout } = useSessionLogout();
+	const { mutateAsync: updateUser } = useUpdateUser();
+	const syncedUserKeyRef = useRef<string>("");
 	// Register the "me" query on the client so the hydrated cache entry has a queryFn for refetches
-	getUser.useData();
+	const { data: currentUser, isPending: isUserPending } = getUser.useData();
 
 	// session init
 	useEffect(() => {
-		if (isAuthenticated && session?.user?.email) {
-			const accessToken =
-				(session.session as { accessToken?: string })?.accessToken || "";
+		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,
 			);
 		}
-	}, [isAuthenticated, session, sessionInit]);
+	}, [isE4Datasource, isAuthenticated, session, sessionInit]);
 
-	// Handles MSAL redirect - which happens for edit profile and reset password use cases in account/profile page.
+	// 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(() => {
-		const handleRedirect = async () => {
-			try {
-				await initializeMsal();
-				const res = await getMsalInstance().handleRedirectPromise();
-				if (res) {
-					const { given_name, family_name } =
-						res.idTokenClaims as IdTokenClaims;
-					// Update the API when profile info is updated through MSAL
-					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]);
+		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) => {
+			// Allow retry on next render when sync fails.
+			syncedUserKeyRef.current = "";
+			console.warn("D365 user sync error:", error);
+		});
+	}, [
+		currentUser,
+		isD365Datasource,
+		isAuthenticated,
+		isUserPending,
+		session,
+		updateUser,
+	]);
 
 	const handleLogout = async () => {
 		try {
@@ -156,10 +183,10 @@ const User = ({ children }: Props) => {
 	};
 
 	const handleSignIn = () => {
-		authClient.signIn.oauth2({
-			providerId: "entra-external-id",
-			callbackURL: "/",
-		});
+		const callbackUrl = encodeURIComponent(
+			globalThis.location.pathname + globalThis.location.search,
+		);
+		globalThis.location.href = `/login?callbackUrl=${callbackUrl}`;
 	};
 
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

package/src/components/header/sticky-header.tsx

@@ -8,7 +8,6 @@ import { Sticky } from "@evenicanpm/ui";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useCallback, useState } from "react";
-import { AccountRouteOverrides } from "../../pages/account/account-routes";
 
 /**
  * @category Implementation

package/src/components/navbar/mobile-menu/mobile-menu.test.tsx

@@ -1,9 +1,9 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import MobileMenu from "@evenicanpm/storefront-core/src/components/navbar/mobile-menu/mobile-menu";
 import { transformCmsNav } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import { fireEvent, render, screen } from "@testing-library/react";
 import type React from "react";
 import { beforeEach, describe, it, vi } from "vitest";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 const useContext = vi.fn();
 

package/src/components/navbar/utils/transform-nav.test.ts

@@ -1,10 +1,10 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import {
 	transformCategoryNav,
 	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { describe, expect, it } from "vitest";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 describe("transform nav items", () => {
 	it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {

package/src/components/navbar/utils/transform-nav.ts

@@ -1,6 +1,6 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import type { SvgIconComponent } from "@mui/icons-material";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
 export interface TransformedNavItem {

package/src/components/product-cards/product-card/product-card.tsx

@@ -60,8 +60,11 @@ function findChild(
 		if (!React.isValidElement(child)) return;
 		if (child.type === component) {
 			found = true;
-		} else if (child.props?.children) {
-			found ||= findChild(child.props.children, component);
+		} else if ((child.props as { children?: ReactNode })?.children) {
+			found ||= findChild(
+				(child.props as { children?: ReactNode }).children,
+				component,
+			);
 		}
 	});
 

package/src/components/product-cards/product-card/styles/index.ts

@@ -1,7 +1,6 @@
 // GLOBAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
 import styled from "@mui/material/styles/styled";
-import type { StyledComponent } from "@mui/styled-engine";
 
 export const StyledBazaarCard = styled(BazaarCard)({
 	height: "100%",
@@ -46,7 +45,4 @@ export const ContentWrapper = styled("div")({
 	},
 });
 
-const StyledBazaarCardType: StyledComponent<typeof BazaarCard, object, "div"> =
-	StyledBazaarCard as StyledComponent<typeof BazaarCard, object, "div">;
-
-export default StyledBazaarCardType;
+export default StyledBazaarCard;

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

@@ -52,7 +52,11 @@ export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
+ProductsGridView.Grid = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 
 	return (

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

@@ -38,7 +38,11 @@ export default function ProductsListView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
+ProductsListView.List = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 	return (
 		<>

package/src/global.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";

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

@@ -1,12 +1,6 @@
 // hooks/useAppSession.ts
 
 import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init";
-// 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 { createAuthClient } from "better-auth/react";
 import { useEffect } from "react";
 
@@ -16,7 +10,6 @@ const { useSession: useBetterAuthSession } = authClient;
 export function useAppSession() {
 	const { data: session, isPending } = useBetterAuthSession();
 	const { mutateAsync: sessionInit } = useSessionInit();
-	const { mutateAsync: updateUser } = useUpdateUser();
 
 	// Initialize session in API
 	useEffect(() => {
@@ -30,32 +23,6 @@ export function useAppSession() {
 		}
 	}, [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 {
-						given_name?: string;
-						family_name?: string;
-					};
-					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/lib/auth-client.ts

@@ -0,0 +1,14 @@
+import type { auth } from "@evenicanpm/storefront-core/src/lib/auth";
+import {
+	customSessionClient,
+	genericOAuthClient,
+} from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+
+const authClient = createAuthClient({
+	plugins: [genericOAuthClient(), customSessionClient<typeof auth>()],
+});
+
+export const { signIn, signOut, signUp, useSession, getSession } = authClient;
+
+export type Session = typeof auth.$Infer.Session;

package/src/lib/auth.ts

@@ -0,0 +1,4 @@
+export {
+	auth,
+	type Session,
+} from "@evenicanpm/storefront-core/src/auth/better-auth";

package/src/lib/entra-native-auth.ts

@@ -0,0 +1,138 @@
+const CLIENT_ID = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "";
+const TENANT = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
+const CUSTOM_SCOPES =
+	process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CUSTOM_SCOPES ||
+	"openid offline_access email profile";
+
+function baseUrl() {
+	return `https://${TENANT}.ciamlogin.com/${TENANT}.onmicrosoft.com`;
+}
+
+async function post(path: string, params: Record<string, string>) {
+	const res = await fetch(`${baseUrl()}${path}`, {
+		method: "POST",
+		headers: { "Content-Type": "application/x-www-form-urlencoded" },
+		body: new URLSearchParams(params).toString(),
+		cache: "no-store",
+	});
+	return res.json() as Promise<Record<string, unknown>>;
+}
+
+export function nativeLoginInitiate(username: string) {
+	return post("/oauth2/v2.0/initiate", {
+		client_id: CLIENT_ID,
+		challenge_type: "password redirect",
+		username,
+		capabilities: "mfa_required registration_required",
+	});
+}
+
+export function nativeLoginChallenge(continuationToken: string) {
+	return post("/oauth2/v2.0/challenge", {
+		client_id: CLIENT_ID,
+		challenge_type: "password redirect",
+		continuation_token: continuationToken,
+		capabilities: "mfa_required registration_required",
+	});
+}
+
+export function nativeLoginToken(continuationToken: string, password: string) {
+	return post("/oauth2/v2.0/token", {
+		client_id: CLIENT_ID,
+		grant_type: "password",
+		password,
+		scope: CUSTOM_SCOPES,
+		continuation_token: continuationToken,
+	});
+}
+
+export function signupStart(
+	username: string,
+	password: string,
+	givenName?: string,
+	surname?: string,
+	displayName?: string,
+) {
+	const params: Record<string, string> = {
+		client_id: CLIENT_ID,
+		username,
+		password,
+		challenge_type: "oob password redirect",
+	};
+
+	if (givenName || surname || displayName) {
+		params.attributes = JSON.stringify({
+			...(givenName ? { givenName } : {}),
+			...(surname ? { surname } : {}),
+			...(displayName ? { displayName } : {}),
+		});
+	}
+
+	return post("/signup/v1.0/start", params);
+}
+
+export function signupChallenge(continuationToken: string) {
+	return post("/signup/v1.0/challenge", {
+		client_id: CLIENT_ID,
+		challenge_type: "oob password redirect",
+		continuation_token: continuationToken,
+	});
+}
+
+export function signupContinueOtp(continuationToken: string, oob: string) {
+	return post("/signup/v1.0/continue", {
+		client_id: CLIENT_ID,
+		continuation_token: continuationToken,
+		grant_type: "oob",
+		oob,
+	});
+}
+
+export function getTokenAfterSignup(continuationToken: string) {
+	return post("/oauth2/v2.0/token", {
+		client_id: CLIENT_ID,
+		continuation_token: continuationToken,
+		grant_type: "continuation_token",
+		scope: CUSTOM_SCOPES,
+	});
+}
+
+export function ssrpStart(username: string) {
+	return post("/resetpassword/v1.0/start", {
+		client_id: CLIENT_ID,
+		username,
+		challenge_type: "oob redirect",
+	});
+}
+
+export function ssrpChallenge(continuationToken: string) {
+	return post("/resetpassword/v1.0/challenge", {
+		client_id: CLIENT_ID,
+		challenge_type: "oob redirect",
+		continuation_token: continuationToken,
+	});
+}
+
+export function ssrpContinueOtp(continuationToken: string, oob: string) {
+	return post("/resetpassword/v1.0/continue", {
+		client_id: CLIENT_ID,
+		continuation_token: continuationToken,
+		grant_type: "oob",
+		oob,
+	});
+}
+
+export function ssrpSubmit(continuationToken: string, newPassword: string) {
+	return post("/resetpassword/v1.0/submit", {
+		client_id: CLIENT_ID,
+		continuation_token: continuationToken,
+		new_password: newPassword,
+	});
+}
+
+export function ssrpPollCompletion(continuationToken: string) {
+	return post("/resetpassword/v1.0/poll_completion", {
+		client_id: CLIENT_ID,
+		continuation_token: continuationToken,
+	});
+}