@evenicanpm/storefront-core 2.4.0 → 2.4.2

package/src/pages/auth/compound/auth-form.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import {
+	Box,
+	type BoxProps,
+	Button,
+	CircularProgress,
+	TextField,
+} from "@mui/material";
+import type { ChangeEvent, FC } from "react";
+
+interface AuthFormSubmitButtonProps {
+	label: string;
+	loading: boolean;
+	disabled?: boolean;
+	color?: "primary" | "secondary";
+}
+
+interface AuthFormPasswordFieldsProps {
+	password: string;
+	confirmPassword: string;
+	onPasswordChange: (value: string) => void;
+	onConfirmChange: (value: string) => void;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	label?: string;
+	confirmLabel?: string;
+	mismatchHelperText?: string;
+}
+
+interface AuthFormOtpFieldProps {
+	value: string;
+	onChange: (value: string) => void;
+	codeLength: number;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	label?: string;
+}
+
+interface AuthFormErrorProps {
+	message: string | null;
+}
+
+const AuthFormError = ({ message }: AuthFormErrorProps) => {
+	if (!message) return null;
+
+	return (
+		<Box
+			role="alert"
+			sx={{
+				mb: 2,
+				color: "error.main",
+				fontSize: "0.875rem",
+			}}
+		>
+			{message}
+		</Box>
+	);
+};
+
+const AuthFormSubmitButton = ({
+	label,
+	loading,
+	disabled = false,
+	color = "primary",
+}: AuthFormSubmitButtonProps) => {
+	return (
+		<Button
+			type="submit"
+			variant="contained"
+			color={color}
+			fullWidth
+			size="large"
+			disabled={loading || disabled}
+			sx={{ borderRadius: 2, py: 1.4 }}
+		>
+			{loading ? <CircularProgress size={20} color="inherit" /> : label}
+		</Button>
+	);
+};
+
+const AuthFormPasswordFields = ({
+	password,
+	confirmPassword,
+	onPasswordChange,
+	onConfirmChange,
+	disabled = false,
+	autoFocus = false,
+	label = "Password",
+	confirmLabel = "Confirm password",
+	mismatchHelperText = "Passwords do not match",
+}: AuthFormPasswordFieldsProps) => {
+	const mismatch = confirmPassword.length > 0 && password !== confirmPassword;
+
+	return (
+		<>
+			<TextField
+				label={label}
+				type="password"
+				value={password}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => onPasswordChange(event.target.value)}
+				fullWidth
+				required
+				autoComplete="new-password"
+				autoFocus={autoFocus}
+				sx={{ mb: 2 }}
+				disabled={disabled}
+			/>
+			<TextField
+				label={confirmLabel}
+				type="password"
+				value={confirmPassword}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => onConfirmChange(event.target.value)}
+				fullWidth
+				required
+				autoComplete="new-password"
+				error={mismatch}
+				helperText={mismatch ? mismatchHelperText : undefined}
+				sx={{ mb: 3 }}
+				disabled={disabled}
+			/>
+		</>
+	);
+};
+
+const AuthFormOtpField = ({
+	value,
+	onChange,
+	codeLength,
+	disabled = false,
+	autoFocus = true,
+	label = "Verification code",
+}: AuthFormOtpFieldProps) => {
+	return (
+		<TextField
+			label={label}
+			type="text"
+			value={value}
+			onChange={(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+				onChange(event.target.value.replace(/\D/g, "").slice(0, codeLength))
+			}
+			fullWidth
+			required
+			autoFocus={autoFocus}
+			autoComplete="one-time-code"
+			inputProps={{
+				maxLength: codeLength,
+				style: {
+					textAlign: "center",
+					letterSpacing: "0.4em",
+					fontSize: "1.3rem",
+				},
+			}}
+			sx={{ mb: 3 }}
+			disabled={disabled}
+		/>
+	);
+};
+
+type AuthFormProps = BoxProps<"form">;
+
+type AuthFormComponent = FC<AuthFormProps> & {
+	Error: typeof AuthFormError;
+	SubmitButton: typeof AuthFormSubmitButton;
+	PasswordFields: typeof AuthFormPasswordFields;
+	OtpField: typeof AuthFormOtpField;
+};
+
+const AuthForm = ((props: AuthFormProps) => (
+	<Box component="form" noValidate {...props} />
+)) as AuthFormComponent;
+
+AuthForm.Error = AuthFormError;
+AuthForm.SubmitButton = AuthFormSubmitButton;
+AuthForm.PasswordFields = AuthFormPasswordFields;
+AuthForm.OtpField = AuthFormOtpField;
+
+export default AuthForm;

package/src/pages/auth/compound/auth-pages.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import AuthActivatePage from "@evenicanpm/storefront-core/src/pages/auth/auth-activate-page";
+import AuthLoginPage from "@evenicanpm/storefront-core/src/pages/auth/auth-login-page";
+import AuthResetPasswordPage from "@evenicanpm/storefront-core/src/pages/auth/auth-reset-password-page";
+
+type AuthPagesComponent = ((props: { children?: unknown }) => unknown) & {
+	Login: typeof AuthLoginPage;
+	Activate: typeof AuthActivatePage;
+	ResetPassword: typeof AuthResetPasswordPage;
+};
+
+const AuthPages = (({ children }: { children?: unknown }) => (
+	<>{children}</>
+)) as AuthPagesComponent;
+
+AuthPages.Login = AuthLoginPage;
+AuthPages.Activate = AuthActivatePage;
+AuthPages.ResetPassword = AuthResetPasswordPage;
+
+export default AuthPages;

package/src/pages/auth/lib/friendly-error.ts

@@ -0,0 +1,70 @@
+type Translate = (key: string) => string;
+const genericMessage = "Something went wrong. Please try again.";
+
+const defaultMessages: Record<string, string> = {
+	"backend.passwordTooWeak": "Password is too weak.",
+	"backend.passwordTooShort": "Password is too short.",
+	"backend.passwordTooLong": "Password is too long.",
+	"backend.passwordRecentlyUsed": "Password was recently used.",
+	"backend.passwordBanned": "Password is not allowed.",
+	"backend.passwordInvalid": "Password is invalid.",
+	"backend.invalidVerificationCode": "Verification code is invalid.",
+	"backend.userAlreadyExists": "An account already exists.",
+	"backend.userNotFound": "No account found for this email.",
+	"backend.redirectRequired":
+		"This tenant requires browser-based authentication.",
+	"backend.resetFailed": "Password reset failed.",
+	"backend.timeout": "Request timed out. Please try again.",
+	generic: genericMessage,
+};
+
+const translateOrDefault = (t: Translate | undefined, key: string): string => {
+	if (t) return t(key);
+
+	return defaultMessages[key] ?? genericMessage;
+};
+
+export function friendlyError(
+	error: string,
+	suberror?: string,
+	t?: Translate,
+): string {
+	if (suberror === "password_too_weak") {
+		return translateOrDefault(t, "backend.passwordTooWeak");
+	}
+	if (suberror === "password_too_short") {
+		return translateOrDefault(t, "backend.passwordTooShort");
+	}
+	if (suberror === "password_too_long") {
+		return translateOrDefault(t, "backend.passwordTooLong");
+	}
+	if (suberror === "password_recently_used") {
+		return translateOrDefault(t, "backend.passwordRecentlyUsed");
+	}
+	if (suberror === "password_banned") {
+		return translateOrDefault(t, "backend.passwordBanned");
+	}
+	if (suberror === "password_is_invalid") {
+		return translateOrDefault(t, "backend.passwordInvalid");
+	}
+	if (suberror === "invalid_oob_value") {
+		return translateOrDefault(t, "backend.invalidVerificationCode");
+	}
+	if (error === "user_already_exists") {
+		return translateOrDefault(t, "backend.userAlreadyExists");
+	}
+	if (error === "user_not_found") {
+		return translateOrDefault(t, "backend.userNotFound");
+	}
+	if (error === "redirect_required") {
+		return translateOrDefault(t, "backend.redirectRequired");
+	}
+	if (error === "reset_failed") {
+		return translateOrDefault(t, "backend.resetFailed");
+	}
+	if (error === "timeout") {
+		return translateOrDefault(t, "backend.timeout");
+	}
+
+	return translateOrDefault(t, "generic");
+}

package/src/pages/auth/lib/index.ts

@@ -0,0 +1,2 @@
+export { friendlyError } from "@evenicanpm/storefront-core/src/pages/auth/lib/friendly-error";
+export type { OtpMeta } from "@evenicanpm/storefront-core/src/pages/auth/lib/types";

package/src/pages/auth/lib/types.ts

@@ -0,0 +1,5 @@
+export interface OtpMeta {
+	continuation_token: string;
+	challenge_target_label: string;
+	code_length: number;
+}

package/src/pages/checkout/checkout-alt-form/steps/address/delivery-address.tsx

@@ -105,7 +105,8 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 
 	// user + guest logic
 	const { data: user, isLoading: userLoading } = getUser.useData();
-	const isGuest = !userLoading && !user?.RecordId;
+	const isAuthenticatedUser = !!user;
+	const isGuest = !userLoading && !isAuthenticatedUser;
 
 	// dropdown visibility
 	const showDropDown = useDropDown && !isGuest;
@@ -165,9 +166,22 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 
 	const handleAuthFlow = async (address: Address) => {
 		const isNew = !address.Id;
-		const saved = isNew
-			? await createAddress(address)
-			: await updateAddress(address);
+		let saved: Address;
+		if (isNew) {
+			try {
+				saved = await createAddress(address);
+			} catch (error) {
+				const message = error instanceof Error ? error.message : String(error);
+				// Newly created async customers may not be ready for address persistence yet.
+				if (message.includes("CreatingAsyncAddressesNotSupported")) {
+					saved = address;
+				} else {
+					throw error;
+				}
+			}
+		} else {
+			saved = await updateAddress(address);
+		}
 
 		// update local list
 		if (isNew) {
@@ -184,12 +198,12 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 	};
 
 	const handleSaveAddress = async (address: Address) => {
-		if (isGuest) return handleGuestFlow(address);
+		if (!isAuthenticatedUser || userLoading) return handleGuestFlow(address);
 		return handleAuthFlow(address);
 	};
 
 	const handleDelete = async (address: Address) => {
-		if (!isGuest && address.Id) {
+		if (isAuthenticatedUser && address.Id) {
 			await deleteAddress(address.Id);
 		}
 		setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));

package/src/pages/checkout/checkout-alt-form/steps/customer-info/customer-information.tsx

@@ -39,7 +39,7 @@ const CustomerInformation = (
 	} = props;
 
 	const { data: user, isLoading: userLoading } = getUser.useData();
-	const isGuest = !userLoading && !user?.RecordId;
+	const isGuest = !userLoading && !user;
 
 	const resolveEmail = () => {
 		if (isGuest) return cartEmail;

package/tsconfig.json

@@ -7,25 +7,31 @@
 		"esModuleInterop": true,
 		"skipLibCheck": true,
 		"declaration": true,
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"outDir": "./dist",
+		"rootDir": "./src",
 		"jsx": "preserve",
-		"baseUrl": ".",
 		"paths": {
+			"@evenicanpm/cms/src/*": ["../cms/src/*"],
 			"@evenicanpm/storefront-core/src/*": ["./src/*"],
-			"@evenicanpm/storefront-core/src/lib/*": ["src/lib/*"],
-			"@evenicanpm/storefront-core/src/api-manager/*": ["src/api-manager/*"],
-			"@evenicanpm/storefront-core/src/components/*": ["src/components/*"],
-			"@/auth/*": ["src/auth/*"],
-			"@/_components/*": ["src/components/_components/*"],
-			"@/components/*": ["src/components/*"],
-			"@/cms/*": ["src/cms/*"],
-			"@/schemas/*": ["src/api-manager/schemas/*"],
-			"@/services/*": ["src/api-manager/services/*"],
-			"@evenicanpm/storefront-core/src/hooks/*": ["src/hooks/*"],
-			"@config": ["src/config"],
-			"@messages/*": ["../../../../storefront/messages/*"]
+			"@evenicanpm/storefront-core/src/lib/*": ["./src/lib/*"],
+			"@evenicanpm/storefront-core/src/api-manager/*": ["./src/api-manager/*"],
+			"@evenicanpm/storefront-core/src/components/*": ["./src/components/*"],
+			"@/auth/*": ["./src/auth/*"],
+			"@/_components/*": ["./src/components/_components/*"],
+			"@/components/*": ["./src/components/*"],
+			"@/cms/*": ["./src/cms/*"],
+			"@/schemas/*": ["./src/api-manager/schemas/*"],
+			"@/services/*": ["./src/api-manager/services/*"],
+			"@evenicanpm/storefront-core/src/hooks/*": ["./src/hooks/*"],
+			"@config": ["./src/config"],
+			"@messages/*": ["../../../../storefront/messages/*"],
+			"*": [
+				"../../node_modules/.pnpm/node_modules/*",
+				"./node_modules/*",
+				"../../apps/storefront/node_modules/*"
+			]
 		}
 	},
 	"include": ["src"]

package/src/auth/msal.ts

@@ -1,65 +0,0 @@
-import {
-	type Configuration,
-	PublicClientApplication,
-} from "@azure/msal-browser";
-
-const createMsalConfig = (): Configuration => {
-	return {
-		auth: {
-			clientId: process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "",
-			authority: process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY || "",
-			redirectUri: process.env.NEXT_PUBLIC_AZURE_AD_B2C_REDIRECT || "/",
-			postLogoutRedirectUri:
-				process.env.NEXT_PUBLIC_AZURE_AD_B2C_POST_LOGOUT_REDIRECT || "/",
-			knownAuthorities: [
-				process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
-			],
-		},
-		system: {},
-	};
-};
-
-// create module singleton (to pass the env variables)
-// const msalInstance = new PublicClientApplication(createMsalConfig());
-let msalInstance: PublicClientApplication | null = null;
-
-const initializeMsal = async () => {
-	try {
-		const config = createMsalConfig();
-		msalInstance = new PublicClientApplication(config);
-		await msalInstance.initialize();
-
-		const accounts = msalInstance.getAllAccounts();
-		if (accounts.length > 0) {
-			msalInstance.setActiveAccount(accounts[0]);
-		}
-	} catch (error) {
-		console.error("MSAL Initialization Error:", error);
-	}
-};
-
-const getMsalInstance = () => {
-	if (!msalInstance) throw new Error("msalInstance not initialized");
-	return msalInstance;
-};
-
-const getRequestConfig = (requestType?: string) => {
-	const editAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_EDIT_AUTHORITY;
-	const resetAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_RESET_AUTHORITY;
-
-	const baseRequest = {
-		scopes: [process.env.NEXT_PUBLIC_AZURE_AD_B2C_API_PERMISSION],
-		authority: createMsalConfig().auth.authority,
-	};
-
-	switch (requestType) {
-		case "edit":
-			return { ...baseRequest, authority: editAuthority };
-		case "reset":
-			return { ...baseRequest, authority: resetAuthority };
-		default:
-			return baseRequest;
-	}
-};
-
-export { getMsalInstance, getRequestConfig, initializeMsal };

package/src/pages/account/profile/profile-button.test.tsx

@@ -1,59 +0,0 @@
-import ProfileButton from "@evenicanpm/storefront-core/src/pages/account/profile/profile-button";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { vi } from "vitest";
-import { getMsalInstance, getRequestConfig, initializeMsal } from "@/auth/msal";
-
-vi.mock("@/auth/msal", () => ({
-	initializeMsal: vi.fn(),
-	getMsalInstance: vi.fn(),
-	getRequestConfig: vi.fn(),
-}));
-
-vi.mock("@evenicanpm/storefront-core/src/components/T/index", () => ({
-	default: ({ path }: { path: string }) => <span>{path}</span>,
-}));
-
-describe("ProfileButton Component", () => {
-	afterEach(() => {
-		vi.restoreAllMocks();
-	});
-
-	it("renders disabled button initially (MSAL not ready)", () => {
-		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-		const button = screen.getByRole("button");
-		expect(button).toBeDisabled();
-	});
-
-	it("initializes MSAL on mount", async () => {
-		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-		await waitFor(() => {
-			expect(initializeMsal).toHaveBeenCalled();
-		});
-	});
-
-	it("calls MSAL loginRedirect when clicked", async () => {
-		(initializeMsal as ReturnType<typeof vi.fn>).mockImplementation(() =>
-			Promise.resolve(),
-		);
-		(getRequestConfig as ReturnType<typeof vi.fn>).mockReturnValue({
-			scopes: ["user.read"],
-		});
-		(getMsalInstance as ReturnType<typeof vi.fn>).mockReturnValue({
-			loginRedirect: vi.fn(),
-		});
-		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-
-		await waitFor(() => {
-			expect(initializeMsal).toHaveBeenCalled();
-		});
-
-		const button = screen.getByRole("button");
-		fireEvent.click(button);
-
-		await waitFor(() => {
-			expect(getMsalInstance().loginRedirect).toHaveBeenCalledWith({
-				scopes: ["user.read"],
-			});
-		});
-	});
-});

package/src/pages/account/profile/profile-button.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import type { RedirectRequest } from "@azure/msal-browser";
-import T from "@evenicanpm/storefront-core/src/components/T/index";
-import { Button } from "@mui/material";
-import { useEffect, useState } from "react";
-import { getMsalInstance, getRequestConfig, initializeMsal } from "@/auth/msal";
-
-interface Props {
-	type: string;
-	path: string;
-}
-
-const ProfileButton = ({ type, path }: Props) => {
-	const [isMsalReady, setIsMsalReady] = useState(false);
-
-	useEffect(() => {
-		const initMsal = async () => {
-			await initializeMsal();
-			setIsMsalReady(true);
-		};
-		initMsal();
-	}, []);
-
-	const handleProfile = async () => {
-		if (!isMsalReady) {
-			console.error("MSAL is not initialized yet.");
-			return;
-		}
-
-		try {
-			const req = getRequestConfig(type);
-			await getMsalInstance().loginRedirect(req as RedirectRequest); // "handleRedirectPromise" is in user component.
-		} catch (error) {
-			console.error("Profile update through MSAL failed", error);
-		}
-	};
-
-	return (
-		<Button
-			onClick={() => handleProfile()}
-			disabled={!isMsalReady}
-			color="primary"
-			sx={{ bgcolor: "primary.light", px: 4 }}
-		>
-			<T path={path} />
-		</Button>
-	);
-};
-
-export default ProfileButton;