@evenicanpm/storefront-core 2.4.0 → 2.4.2

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

@@ -0,0 +1,285 @@
+"use client";
+
+import type { User } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import {
+	createProfileValidationSchema,
+	type ProfileFormValues,
+} from "@evenicanpm/storefront-core/src/pages/account/profile/profile-validation";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { Button, CircularProgress, TextField, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import {
+	type ChangeEvent,
+	createContext,
+	type PropsWithChildren,
+	type ReactNode,
+	type SyntheticEvent,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+
+interface ProfileFormContextValue {
+	values: ProfileFormValues;
+	touched: Partial<Record<keyof ProfileFormValues, boolean>>;
+	errors: Partial<Record<keyof ProfileFormValues, string>>;
+	isSubmitting: boolean;
+	handleChange: (name: keyof ProfileFormValues, value: string) => void;
+	handleBlur: (name: keyof ProfileFormValues) => void;
+	submitError: string | null;
+	setSubmitError: (value: string | null) => void;
+	handleSubmit: (event: SyntheticEvent<HTMLFormElement>) => Promise<void>;
+}
+
+const ProfileFormContext = createContext<ProfileFormContextValue | null>(null);
+
+type ProfileFormProps = Readonly<
+	PropsWithChildren<{
+		user: User;
+		onBeforeSave?: (values: ProfileFormValues) => Promise<void>;
+		onSuccess?: () => void;
+	}>
+>;
+
+const ProfileForm = ({
+	user,
+	onBeforeSave,
+	onSuccess,
+	children,
+}: ProfileFormProps) => {
+	const t = useTranslations("Account.Profile");
+	const router = useRouter();
+	const queryClient = useQueryClient();
+	const { setNotification } = useNotification();
+	const { mutateAsync: updateUser } = useUpdateUser();
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [values, setValues] = useState<ProfileFormValues>({
+		firstName: user?.FirstName ?? "",
+		lastName: user?.LastName ?? "",
+	});
+	const [touched, setTouched] = useState<
+		Partial<Record<keyof ProfileFormValues, boolean>>
+	>({});
+	const [errors, setErrors] = useState<
+		Partial<Record<keyof ProfileFormValues, string>>
+	>({});
+
+	useEffect(() => {
+		setValues({
+			firstName: user?.FirstName ?? "",
+			lastName: user?.LastName ?? "",
+		});
+		setTouched({});
+		setErrors({});
+		setSubmitError(null);
+	}, [user?.FirstName, user?.LastName]);
+
+	const validationSchema = createProfileValidationSchema({
+		requiredFirstName: t("validationRequired", { field: t("fieldFirstName") }),
+		requiredLastName: t("validationRequired", { field: t("fieldLastName") }),
+		invalidCharacters: t("validationNameInvalidCharacters"),
+		tooLong: t("validationNameTooLong"),
+	});
+
+	const mapZodErrors = (input: ProfileFormValues) => {
+		const result = validationSchema.safeParse(input);
+		if (result.success)
+			return {} as Partial<Record<keyof ProfileFormValues, string>>;
+
+		return {
+			firstName: result.error.flatten().fieldErrors.firstName?.[0],
+			lastName: result.error.flatten().fieldErrors.lastName?.[0],
+		};
+	};
+
+	const handleChange = (name: keyof ProfileFormValues, value: string) => {
+		setSubmitError(null);
+		setValues((prev: ProfileFormValues) => {
+			const next = { ...prev, [name]: value };
+			if (touched[name]) {
+				const nextErrors = mapZodErrors(next);
+				setErrors(nextErrors);
+			}
+			return next;
+		});
+	};
+
+	const handleBlur = (name: keyof ProfileFormValues) => {
+		setTouched((prev: Partial<Record<keyof ProfileFormValues, boolean>>) => ({
+			...prev,
+			[name]: true,
+		}));
+		setErrors(mapZodErrors(values));
+	};
+
+	const handleSubmit = async (event: SyntheticEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setSubmitError(null);
+
+		const payload: ProfileFormValues = {
+			firstName: values.firstName.trim(),
+			lastName: values.lastName.trim(),
+		};
+
+		const validationErrors = mapZodErrors(payload);
+		setTouched({ firstName: true, lastName: true });
+		setErrors(validationErrors);
+		if (validationErrors.firstName || validationErrors.lastName) {
+			return;
+		}
+
+		try {
+			setIsSubmitting(true);
+			if (onBeforeSave) {
+				await onBeforeSave(payload);
+			}
+
+			await updateUser({
+				AccountNumber: "",
+				Email: user?.Email || undefined,
+				FirstName: payload.firstName,
+				LastName: payload.lastName,
+			});
+
+			await queryClient.invalidateQueries({ queryKey: ["me"] });
+			if (onSuccess) onSuccess();
+			else router.push("/account/profile");
+		} catch {
+			setSubmitError(null);
+			setNotification({
+				message: t("errorUpdateFailed"),
+				severity: "error",
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const contextValue = useMemo<ProfileFormContextValue>(
+		() => ({
+			values,
+			touched,
+			errors,
+			isSubmitting,
+			handleChange,
+			handleBlur,
+			submitError,
+			setSubmitError,
+			handleSubmit,
+		}),
+		[
+			values,
+			touched,
+			errors,
+			isSubmitting,
+			handleChange,
+			handleBlur,
+			submitError,
+			handleSubmit,
+		],
+	);
+
+	return (
+		<ProfileFormContext.Provider value={contextValue}>
+			<form onSubmit={handleSubmit} noValidate>
+				{children}
+			</form>
+		</ProfileFormContext.Provider>
+	);
+};
+
+ProfileForm.Fields = ({ children }: Readonly<{ children?: ReactNode }>) => {
+	return (
+		<Grid container spacing={3}>
+			{children}
+		</Grid>
+	);
+};
+
+function ProfileFormField({
+	name,
+	label,
+	required,
+	autoComplete,
+}: Readonly<{
+	name: keyof ProfileFormValues;
+	label: string;
+	required?: boolean;
+	autoComplete?: string;
+}>) {
+	const ctx = useContext(ProfileFormContext);
+	if (!ctx) return null;
+	const { values, touched, errors, handleChange, handleBlur } = ctx;
+
+	return (
+		<Grid size={{ sm: 6, xs: 12 }}>
+			<TextField
+				name={name}
+				label={label}
+				fullWidth
+				required={required}
+				autoComplete={autoComplete}
+				value={values[name] ?? ""}
+				onChange={(event: ChangeEvent<HTMLInputElement>) => {
+					handleChange(name, event.target.value);
+				}}
+				onBlur={() => handleBlur(name)}
+				error={touched[name] && Boolean(errors[name])}
+				helperText={
+					touched[name] && typeof errors[name] === "string"
+						? errors[name]
+						: undefined
+				}
+			/>
+		</Grid>
+	);
+}
+ProfileForm.Field = ProfileFormField;
+
+function ProfileFormError() {
+	const ctx = useContext(ProfileFormContext);
+	if (!ctx?.submitError) return null;
+
+	return <Typography color="error.main">{ctx.submitError}</Typography>;
+}
+ProfileForm.Error = ProfileFormError;
+
+ProfileForm.Actions = ({ children }: Readonly<PropsWithChildren>) => {
+	return (
+		<Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
+			{children}
+		</Grid>
+	);
+};
+
+function ProfileFormSubmitButton() {
+	const t = useTranslations("Account.Profile");
+	const ctx = useContext(ProfileFormContext);
+	if (!ctx) return null;
+	const { isSubmitting } = ctx;
+
+	return (
+		<Button
+			type="submit"
+			variant="contained"
+			color="primary"
+			disabled={isSubmitting}
+			startIcon={
+				isSubmitting ? (
+					<CircularProgress size={20} color="inherit" />
+				) : undefined
+			}
+		>
+			{t("btnSaveProfile")}
+		</Button>
+	);
+}
+ProfileForm.SubmitButton = ProfileFormSubmitButton;
+
+export default ProfileForm;

package/src/pages/account/profile/profile-validation.ts

@@ -0,0 +1,52 @@
+import z from "zod";
+
+const namePattern = /^[\p{L}\p{M}][\p{L}\p{M}'’. -]*$/u;
+
+export type ProfileValidationMessages = {
+	requiredFirstName: string;
+	requiredLastName: string;
+	invalidCharacters: string;
+	tooLong: string;
+};
+
+const createNameSchema = (
+	requiredMessage: string,
+	messages: ProfileValidationMessages,
+) =>
+	z
+		.string()
+		.trim()
+		.min(1, requiredMessage)
+		.max(50, messages.tooLong)
+		.refine(
+			(value) => value.length === 0 || namePattern.test(value),
+			messages.invalidCharacters,
+		);
+
+export const createProfileValidationSchema = (
+	messages?: Partial<ProfileValidationMessages>,
+) => {
+	const resolvedMessages: ProfileValidationMessages = {
+		requiredFirstName: "First Name is required",
+		requiredLastName: "Last Name is required",
+		invalidCharacters:
+			"Names can only contain letters, spaces, apostrophes, periods, and hyphens.",
+		tooLong: "Names must be 50 characters or fewer.",
+		...messages,
+	};
+
+	return z.object({
+		firstName: createNameSchema(
+			resolvedMessages.requiredFirstName,
+			resolvedMessages,
+		),
+		lastName: createNameSchema(
+			resolvedMessages.requiredLastName,
+			resolvedMessages,
+		),
+	});
+};
+
+export type ProfileFormValues = z.infer<
+	ReturnType<typeof createProfileValidationSchema>
+>;