@evenicanpm/storefront-core 2.4.1 → 2.5.0

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

@@ -1,322 +0,0 @@
-"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 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,
-	useCreateAccountRoutes,
-} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
-// UI Components
-import {
-	Box,
-	Button,
-	IconButton,
-	List,
-	ListItemButton,
-	Popover,
-} from "@mui/material";
-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(), customSessionClient()],
-});
-const { useSession: useBetterAuthSession } = authClient;
-
-import type React from "react";
-import {
-	createContext,
-	type MouseEvent,
-	type ReactNode,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import { MdPersonOutline as PersonOutline } from "react-icons/md";
-
-const routeToMenuItem = (route: AccountRoute) => ({
-	href: route.href,
-	label: `Account.Menu.${route.titleKey}`,
-	Icon: route.Icon,
-	count: route.count,
-});
-
-const buildMenuItems = (overrides?: AccountRouteOverrides) => {
-	const routes = useCreateAccountRoutes(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: 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 { data: session, isPending } = useBetterAuthSession();
-	const status = isPending
-		? "loading"
-		: session
-			? "authenticated"
-			: "unauthenticated";
-
-	if (session === null && !isPending) {
-		// No error handling needed - session is simply null when not 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>("");
-	// Register the "me" query on the client so the hydrated cache entry has a queryFn for refetches
-	const { data: currentUser, isPending: isUserPending } = getUser.useData();
-
-	// session init
-	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) => {
-			// 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 {
-			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}`;
-	};
-
-	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-	const open = Boolean(anchorEl);
-
-	const menuItems = buildMenuItems();
-
-	const value: UserContextValue = {
-		isAuthenticated,
-		status,
-		menuItems,
-		handleLogout,
-		handleSignIn,
-		signOut: signOutCustom,
-		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;