@vtex/faststore 0.0.3 → 0.0.4

package/dist/matter/my-account-profile/my-account-profile.js

@@ -0,0 +1,856 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../../particles/field/field.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { useSession } from "../session/session.js";
+import { Input } from "../../particles/input/input.js";
+import { PhoneField, applyPhoneMask, toE164, validatePhoneNumber } from "../../particles/phone-field/phone-field.js";
+import { DocumentField, isSupportedDocumentType, isValidDocument, maskDocumentValue } from "../../particles/document-field/document-field.js";
+import { Select } from "../../particles/select/select.js";
+import { useToast } from "../../particles/toast/toast.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/my-account-profile/my-account-profile.tsx
+/**
+* The `my-account-profile` compound (specs/sfs-3287-my-account-profile-root.md) — the data root
+* plus form mechanics for the shopper's persistent account profile. `Root` owns the saved profile,
+* the draft, the view↔edit toggle, and the single batched Save; it publishes a context whose
+* registration API is the seam every field Control attaches to.
+*
+* Unlike `ClientProfileFormRoot`, the Root does not enumerate the field set: a Control registers
+* its key plus an optional validator and normalizer, and the Root derives which fields to validate,
+* which to send, and which to focus from the live registry only. A field absent from the
+* composition is absent from the payload by construction (Decision 1).
+*/
+const fragment = `
+  fragment MyAccountProfileData on Query {
+    customerProfile {
+      __typename
+      id
+      firstName
+      lastName
+      email
+      homePhone
+      mobilePhone
+      document
+      documentType
+      birthDate
+      gender
+    }
+  }
+`;
+const FIELD_KEYS = [
+	"firstName",
+	"lastName",
+	"homePhone",
+	"mobilePhone",
+	"document",
+	"birthDate",
+	"gender"
+];
+const DEFAULT_SAVE_FAILED_MESSAGE = "Unable to save your profile. Please try again.";
+const DEFAULT_SAVED_MESSAGE = "Your profile has been saved.";
+function buildSavedValues($data) {
+	return {
+		firstName: $data?.firstName ?? "",
+		lastName: $data?.lastName ?? "",
+		homePhone: $data?.homePhone ?? "",
+		mobilePhone: $data?.mobilePhone ?? "",
+		document: $data?.document ?? "",
+		birthDate: $data?.birthDate ?? "",
+		gender: $data?.gender ?? ""
+	};
+}
+/**
+* Native `<input type="date">` values and the profile's stored `birthDate` are both `yyyy-mm-dd`.
+* `toNativeDate` stays defensive against a `yyyy-mm-ddTHH:mm:ss...` upstream value slipping through
+* unnormalized — the resolver already strips the time component, this is a second line of defense —
+* since the native input rejects anything but the date-only form outright.
+*/
+function toNativeDate(stored) {
+	const [datePart] = stored.split("T");
+	return datePart ?? "";
+}
+function toStoredDate(native) {
+	return native;
+}
+const DEFAULT_GENDER_OPTIONS = [
+	{
+		value: "female",
+		label: "Female"
+	},
+	{
+		value: "male",
+		label: "Male"
+	},
+	{
+		value: "other",
+		label: "Other"
+	},
+	{
+		value: "prefer_not_to_say",
+		label: "Prefer not to say"
+	}
+];
+const MY_ACCOUNT_PROFILE_UNSET = Symbol("MyAccountProfileContextUnset");
+const MyAccountProfileContext = createContext(MY_ACCOUNT_PROFILE_UNSET);
+/** Throws when used outside `MyAccountProfileRoot`, per ADR-0009. */
+function useMyAccountProfile() {
+	const ctx = useContext(MyAccountProfileContext);
+	if (ctx === MY_ACCOUNT_PROFILE_UNSET) throw new Error("MyAccountProfile components must be used inside MyAccountProfileRoot.");
+	return ctx;
+}
+const MyAccountProfileRootDefinition = defineComponent({
+	name: "MyAccountProfileRoot",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	requiresContext: "session",
+	providesContext: "my-account-profile",
+	actions: { identity: ["customerProfileUpdate"] },
+	skeleton: MyAccountProfileSkeleton,
+	editor: {
+		label: "My Account Profile Root",
+		category: "identity"
+	},
+	schema: {
+		documentType: {
+			type: "string",
+			label: "Default document type (e.g. CPF)"
+		},
+		saveFailedMessage: {
+			type: "string",
+			default: DEFAULT_SAVE_FAILED_MESSAGE,
+			label: "Save failure message"
+		},
+		savedMessage: {
+			type: "string",
+			default: DEFAULT_SAVED_MESSAGE,
+			label: "Save success message"
+		}
+	},
+	guideline: "Data root + form mechanics for the persistent My Account profile: owns the saved profile, the draft, the view/edit toggle, and the single batched Save (dispatches only dirty, registered fields; an empty string erases, an omitted field is untouched). Self-gates on the authenticated (loggedIn) session; requires a SessionRoot ancestor and a mounted ToastProvider ancestor — Save success/failure surface as a toast, not an inline part. Field Controls register their key plus an optional validator and normalizer through useMyAccountProfile() — the field set is a merchant composition decision, never enumerated here. Compose EditButton (view state), SaveButton/CancelButton (edit state), and Email as children in any order. See my-account-profile.md."
+});
+function MyAccountProfileRoot({ $data: $dataProp, $actions: $actionsProp, documentType: documentTypeProp, saveFailedMessage = DEFAULT_SAVE_FAILED_MESSAGE, savedMessage = DEFAULT_SAVED_MESSAGE, className, children }) {
+	const { state } = useSession();
+	const toast = useToast();
+	const $data = useDataOverride($dataProp);
+	const $actions = useActionsOverride($actionsProp);
+	const resolved = $data != null;
+	const savedValues = useMemo(() => buildSavedValues($data), [$data]);
+	const savedEmail = $data?.email ?? "";
+	const savedDocumentType = $data?.documentType?.toUpperCase();
+	const activeDocumentType = savedDocumentType && isSupportedDocumentType(savedDocumentType) ? savedDocumentType : documentTypeProp;
+	const [mode, setMode] = useState("view");
+	const [draft, setDraft] = useState(savedValues);
+	const [fieldErrors, setFieldErrors] = useState({});
+	const [pending, setPending] = useState(false);
+	const [registry, setRegistry] = useState(() => /* @__PURE__ */ new Map());
+	const formRef = useRef(null);
+	const [prevSaved, setPrevSaved] = useState(savedValues);
+	const changedKeys = FIELD_KEYS.filter((key) => prevSaved[key] !== savedValues[key]);
+	if (changedKeys.length > 0) {
+		setPrevSaved(savedValues);
+		setDraft((prevDraft) => {
+			let next = prevDraft;
+			for (const key of changedKeys) {
+				if (prevDraft[key] !== prevSaved[key]) continue;
+				if (next === prevDraft) next = { ...prevDraft };
+				next[key] = savedValues[key];
+			}
+			return next;
+		});
+	}
+	const registerField = useCallback((registration) => {
+		setRegistry((prev) => {
+			const next = new Map(prev);
+			next.set(registration.key, registration);
+			return next;
+		});
+		return () => {
+			setRegistry((prev) => {
+				if (!prev.has(registration.key)) return prev;
+				const next = new Map(prev);
+				next.delete(registration.key);
+				return next;
+			});
+		};
+	}, []);
+	const setField = useCallback((key, value) => {
+		setDraft((prev) => ({
+			...prev,
+			[key]: value
+		}));
+		setFieldErrors((prev) => {
+			if (!prev[key]) return prev;
+			const next = { ...prev };
+			delete next[key];
+			return next;
+		});
+	}, []);
+	const edit = useCallback(() => {
+		setDraft(savedValues);
+		setFieldErrors({});
+		setMode("edit");
+	}, [savedValues]);
+	const cancel = useCallback(() => {
+		setDraft(savedValues);
+		setFieldErrors({});
+		setMode("view");
+	}, [savedValues]);
+	function focusFirstInvalid(errors) {
+		const wrappers = formRef.current?.querySelectorAll("[data-fs-my-account-profile-field]");
+		if (!wrappers) return;
+		for (const wrapper of wrappers) {
+			const key = wrapper.dataset.fsMyAccountProfileField;
+			if (key && errors[key]) {
+				(wrapper.querySelector("input, select, textarea") ?? wrapper).focus();
+				return;
+			}
+		}
+	}
+	async function handleSubmit(event) {
+		event.preventDefault();
+		if (pending) return;
+		const dirtyKeys = Array.from(registry.keys()).filter((key) => draft[key] !== savedValues[key]);
+		if (dirtyKeys.length === 0) {
+			setFieldErrors({});
+			setMode("view");
+			toast.add({
+				title: savedMessage,
+				type: "success"
+			});
+			return;
+		}
+		const errors = {};
+		for (const key of dirtyKeys) {
+			const message = registry.get(key)?.validate?.(draft[key]);
+			if (message) errors[key] = message;
+		}
+		if (Object.keys(errors).length > 0) {
+			setFieldErrors(errors);
+			focusFirstInvalid(errors);
+			return;
+		}
+		setFieldErrors({});
+		const identity = $actions?.identity;
+		if (!identity?.customerProfileUpdate) {
+			toast.add({
+				title: saveFailedMessage,
+				type: "error"
+			});
+			return;
+		}
+		const payload = {};
+		for (const key of dirtyKeys) {
+			const registration = registry.get(key);
+			const rawValue = draft[key];
+			payload[key] = registration?.normalize ? registration.normalize(rawValue) : rawValue;
+		}
+		setPending(true);
+		try {
+			const userErrors = await identity.customerProfileUpdate(payload);
+			if (userErrors.length > 0) {
+				toast.add({
+					title: userErrors[0]?.message ?? saveFailedMessage,
+					type: "error"
+				});
+				return;
+			}
+			setMode("view");
+			toast.add({
+				title: savedMessage,
+				type: "success"
+			});
+		} catch (error) {
+			console.error("[MyAccountProfileRoot] customerProfileUpdate failed", error instanceof Error ? error.name : "UnknownError");
+			toast.add({
+				title: saveFailedMessage,
+				type: "error"
+			});
+		} finally {
+			setPending(false);
+		}
+	}
+	const contextValue = useMemo(() => ({
+		mode,
+		savedValues,
+		draft,
+		fieldErrors,
+		email: savedEmail,
+		activeDocumentType,
+		pending,
+		registerField,
+		setField,
+		edit,
+		cancel
+	}), [
+		mode,
+		savedValues,
+		draft,
+		fieldErrors,
+		savedEmail,
+		activeDocumentType,
+		pending,
+		registerField,
+		setField,
+		edit,
+		cancel
+	]);
+	if (state !== "loggedIn") return null;
+	if (!resolved) return /* @__PURE__ */ jsx(MyAccountProfileSkeleton, { className });
+	return /* @__PURE__ */ jsx(MyAccountProfileContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("form", {
+			ref: formRef,
+			onSubmit: handleSubmit,
+			className,
+			"data-fs-my-account-profile": "",
+			"data-fs-my-account-profile-mode": mode,
+			...pending ? { "data-fs-my-account-profile-pending": "" } : {},
+			children
+		})
+	});
+}
+const MyAccountProfileEditButtonDefinition = defineComponent({
+	name: "MyAccountProfileEditButton",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileEditButton,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Edit Button",
+		category: "identity"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Edit",
+		label: "Button label"
+	} },
+	guideline: "Switches MyAccountProfileRoot from the view state to the edit state. Renders only in the view state. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileEditButton({ label = "Edit", className, children }) {
+	const { mode, edit } = useMyAccountProfile();
+	if (mode !== "view") return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: edit,
+		className,
+		"data-fs-my-account-profile-edit": "",
+		children: children ?? label
+	});
+}
+const MyAccountProfileSaveButtonDefinition = defineComponent({
+	name: "MyAccountProfileSaveButton",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileSaveButton,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Save Button",
+		category: "identity"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Save",
+		label: "Button label"
+	} },
+	guideline: "Submits MyAccountProfileRoot's batched Save. Renders only in the edit state; disabled while the write is pending. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileSaveButton({ label = "Save", className, children }) {
+	const { mode, pending } = useMyAccountProfile();
+	if (mode !== "edit") return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "submit",
+		disabled: pending,
+		className,
+		"data-fs-my-account-profile-save": "",
+		children: children ?? label
+	});
+}
+const MyAccountProfileCancelButtonDefinition = defineComponent({
+	name: "MyAccountProfileCancelButton",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileCancelButton,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Cancel Button",
+		category: "identity"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Cancel",
+		label: "Button label"
+	} },
+	guideline: "Reverts every field to its last saved value and returns MyAccountProfileRoot to the view state, without persisting. Renders only in the edit state; disabled while the write is pending. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileCancelButton({ label = "Cancel", className, children }) {
+	const { mode, pending, cancel } = useMyAccountProfile();
+	if (mode !== "edit") return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: pending,
+		onClick: cancel,
+		className,
+		"data-fs-my-account-profile-cancel": "",
+		children: children ?? label
+	});
+}
+const MyAccountProfileEmailDefinition = defineComponent({
+	name: "MyAccountProfileEmail",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileEmail,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Email",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "The shopper's read-only login identifier, or nothing when absent. Never editable — no edit-state rendering exists for it. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileEmail({ className }) {
+	const { email } = useMyAccountProfile();
+	if (!email) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-email": "",
+		children: email
+	});
+}
+const MyAccountProfileSkeletonDefinition = defineComponent({
+	name: "MyAccountProfileSkeleton",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileSkeleton,
+	editor: {
+		label: "My Account Profile Skeleton",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Loading placeholder rendered by MyAccountProfileRoot while $data is unresolved. Declares no context requirement — it renders before the Root has anything to provide."
+});
+function MyAccountProfileSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-my-account-profile-skeleton": "",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", { "data-fs-my-account-profile-skeleton-line": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-my-account-profile-skeleton-line": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-my-account-profile-skeleton-line": "" })
+		]
+	});
+}
+MyAccountProfileRoot.Skeleton = MyAccountProfileSkeleton;
+const MyAccountProfileFirstNameControlDefinition = defineComponent({
+	name: "MyAccountProfileFirstNameControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileFirstNameControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile First Name Control",
+		category: "identity"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "First name",
+			label: "Label"
+		},
+		requiredMessage: {
+			type: "string",
+			default: "First name is required.",
+			label: "Required message"
+		}
+	},
+	guideline: "Draft-bound, required first-name field. Blocks Save with an inline message and focus when left empty. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileFirstNameControl({ label = "First name", requiredMessage = "First name is required.", className }) {
+	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	useEffect(() => {
+		return registerField({
+			key: "firstName",
+			validate: (value) => value.trim() ? null : requiredMessage
+		});
+	}, [requiredMessage, registerField]);
+	const error = fieldErrors.firstName;
+	if (mode === "view") return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-first-name": "",
+		"data-fs-my-account-profile-field": "firstName",
+		children: savedValues.firstName
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		invalid: !!error,
+		disabled: pending,
+		"data-fs-my-account-profile-first-name": "",
+		"data-fs-my-account-profile-field": "firstName",
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Control, {
+				value: draft.firstName,
+				onChange: (event) => setField("firstName", event.target.value),
+				disabled: pending
+			}),
+			error ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: error
+			}) : null
+		]
+	});
+}
+const MyAccountProfileLastNameControlDefinition = defineComponent({
+	name: "MyAccountProfileLastNameControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileLastNameControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Last Name Control",
+		category: "identity"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "Last name",
+			label: "Label"
+		},
+		requiredMessage: {
+			type: "string",
+			default: "Last name is required.",
+			label: "Required message"
+		}
+	},
+	guideline: "Draft-bound, required last-name field. Blocks Save with an inline message and focus when left empty. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileLastNameControl({ label = "Last name", requiredMessage = "Last name is required.", className }) {
+	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	useEffect(() => {
+		return registerField({
+			key: "lastName",
+			validate: (value) => value.trim() ? null : requiredMessage
+		});
+	}, [requiredMessage, registerField]);
+	const error = fieldErrors.lastName;
+	if (mode === "view") return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-last-name": "",
+		"data-fs-my-account-profile-field": "lastName",
+		children: savedValues.lastName
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		invalid: !!error,
+		disabled: pending,
+		"data-fs-my-account-profile-last-name": "",
+		"data-fs-my-account-profile-field": "lastName",
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Control, {
+				value: draft.lastName,
+				onChange: (event) => setField("lastName", event.target.value),
+				disabled: pending
+			}),
+			error ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: error
+			}) : null
+		]
+	});
+}
+const MyAccountProfilePhoneControlDefinition = defineComponent({
+	name: "MyAccountProfilePhoneControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfilePhoneControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Phone Control",
+		category: "identity"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "Phone",
+			label: "Label"
+		},
+		field: {
+			type: ["homePhone", "mobilePhone"],
+			default: "mobilePhone",
+			label: "Bound field"
+		},
+		country: {
+			type: ["US", "BR"],
+			default: "US",
+			label: "Country"
+		},
+		invalidMessage: {
+			type: "string",
+			default: "Invalid phone number",
+			label: "Invalid message"
+		}
+	},
+	guideline: "Draft-bound, optional phone field bound to either homePhone or mobilePhone via the field prop (Decision 1) — compose it twice to expose both numbers. Normalizes to E.164 on the Root's Save. Absent from the composition means absent from the payload. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfilePhoneControl({ label = "Phone", field = "mobilePhone", country = "US", invalidMessage = "Invalid phone number", className }) {
+	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	useEffect(() => {
+		return registerField({
+			key: field,
+			validate: (value) => value.trim() && !validatePhoneNumber(value, country) ? invalidMessage : null,
+			normalize: (value) => value.trim() ? toE164(value, country) : value
+		});
+	}, [
+		field,
+		country,
+		invalidMessage,
+		registerField
+	]);
+	const error = fieldErrors[field];
+	if (mode === "view") return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-phone": field,
+		"data-fs-my-account-profile-field": field,
+		children: savedValues[field] ? applyPhoneMask(savedValues[field], country) : ""
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-fs-my-account-profile-field": field,
+		children: /* @__PURE__ */ jsx(PhoneField, {
+			className,
+			label,
+			country,
+			requirement: "optional",
+			value: draft[field],
+			onValueChange: (value) => setField(field, value),
+			invalid: !!error,
+			error: error ?? void 0,
+			errorInvalid: invalidMessage,
+			isDisabled: pending,
+			"data-fs-my-account-profile-phone": field
+		})
+	});
+}
+const MyAccountProfileTaxIdControlDefinition = defineComponent({
+	name: "MyAccountProfileTaxIdControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileTaxIdControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Tax ID Control",
+		category: "identity"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "National tax ID",
+			label: "Label"
+		},
+		invalidMessage: {
+			type: "string",
+			default: "Invalid document number.",
+			label: "Invalid message"
+		},
+		lockedReason: {
+			type: "string",
+			default: "Your document ID can't be edited.",
+			label: "Locked reason"
+		}
+	},
+	guideline: "Draft-bound, optional national tax-ID field (CPF in V0). Self-gates on the Root's active document type. A saved value renders as a disabled, locked input in the edit state rather than disappearing (Decision 4); an unsaved value renders as an editable field. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileTaxIdControl({ label = "National tax ID", invalidMessage = "Invalid document number.", lockedReason = "Your document ID can't be edited.", className }) {
+	const { mode, draft, savedValues, fieldErrors, pending, activeDocumentType, registerField, setField } = useMyAccountProfile();
+	const documentType = activeDocumentType && isSupportedDocumentType(activeDocumentType) ? activeDocumentType : void 0;
+	const hasSavedDocument = savedValues.document.trim() !== "";
+	useEffect(() => {
+		if (!documentType || hasSavedDocument) return;
+		return registerField({
+			key: "document",
+			validate: (value) => value.trim() && !isValidDocument(value, documentType) ? invalidMessage : null,
+			normalize: (value) => value.replaceAll(/\D/g, "")
+		});
+	}, [
+		documentType,
+		hasSavedDocument,
+		invalidMessage,
+		registerField
+	]);
+	if (!documentType) return null;
+	const error = fieldErrors.document;
+	if (mode === "view") return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-tax-id": "",
+		"data-fs-my-account-profile-field": "document",
+		children: savedValues.document ? maskDocumentValue(savedValues.document, documentType) : ""
+	});
+	if (hasSavedDocument) return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		"data-fs-my-account-profile-tax-id": "",
+		"data-fs-my-account-profile-field": "document",
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Control, {
+				readOnly: true,
+				"aria-disabled": "true",
+				title: lockedReason,
+				value: maskDocumentValue(savedValues.document, documentType),
+				"data-fs-my-account-profile-tax-id-readonly": ""
+			}),
+			/* @__PURE__ */ jsx(Field.Description, { children: lockedReason })
+		]
+	});
+	return /* @__PURE__ */ jsx(DocumentField, {
+		className,
+		label,
+		documentType,
+		value: draft.document,
+		onValueChange: (value) => setField("document", value),
+		invalid: !!error,
+		errorMessage: error,
+		disabled: pending,
+		"data-fs-my-account-profile-tax-id": "",
+		"data-fs-my-account-profile-field": "document"
+	});
+}
+const MyAccountProfileBirthDateControlDefinition = defineComponent({
+	name: "MyAccountProfileBirthDateControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileBirthDateControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Birth Date Control",
+		category: "identity"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Birth date",
+		label: "Label"
+	} },
+	guideline: "Draft-bound, optional birth-date field over a native date input. Maps the native yyyy-mm-dd value to the stored profile format on read and write. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileBirthDateControl({ label = "Birth date", className }) {
+	const { mode, draft, savedValues, pending, registerField, setField } = useMyAccountProfile();
+	useEffect(() => {
+		return registerField({
+			key: "birthDate",
+			normalize: (value) => toStoredDate(value)
+		});
+	}, [registerField]);
+	if (mode === "view") return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-my-account-profile-birth-date": "",
+		"data-fs-my-account-profile-field": "birthDate",
+		children: savedValues.birthDate
+	});
+	function handleChange(event) {
+		setField("birthDate", toStoredDate(event.target.value));
+	}
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		"data-fs-my-account-profile-birth-date": "",
+		"data-fs-my-account-profile-field": "birthDate",
+		children: [/* @__PURE__ */ jsx(Field.Label, { children: label }), /* @__PURE__ */ jsx(Input, {
+			type: "date",
+			value: toNativeDate(draft.birthDate),
+			onChange: handleChange,
+			disabled: pending
+		})]
+	});
+}
+const MyAccountProfileGenderControlDefinition = defineComponent({
+	name: "MyAccountProfileGenderControl",
+	importPath: "@vtex/faststore/components",
+	component: MyAccountProfileGenderControl,
+	requiresContext: "my-account-profile",
+	editor: {
+		label: "My Account Profile Gender Control",
+		category: "identity"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "Gender",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			default: "Select",
+			label: "Placeholder"
+		},
+		clearLabel: {
+			type: "string",
+			default: "Clear",
+			label: "Clear button label"
+		}
+	},
+	guideline: "Draft-bound, optional gender field over a store-configurable set of options (the options prop). Free-string storage — no server-side enum. A Clear button erases a selected value back to empty, since the Select itself offers no such option. Must be a descendant of MyAccountProfileRoot."
+});
+function MyAccountProfileGenderControl({ label = "Gender", placeholder = "Select", clearLabel = "Clear", options = DEFAULT_GENDER_OPTIONS, className }) {
+	const { mode, draft, savedValues, pending, registerField, setField } = useMyAccountProfile();
+	useEffect(() => {
+		return registerField({ key: "gender" });
+	}, [registerField]);
+	if (mode === "view") {
+		const selected = options.find((option) => option.value === savedValues.gender);
+		return /* @__PURE__ */ jsx("p", {
+			className,
+			"data-fs-my-account-profile-gender": "",
+			"data-fs-my-account-profile-field": "gender",
+			children: selected?.label ?? savedValues.gender
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-fs-my-account-profile-gender": "",
+		"data-fs-my-account-profile-field": "gender",
+		children: [/* @__PURE__ */ jsxs(Select.Root, {
+			value: draft.gender,
+			onValueChange: (value) => setField("gender", value ?? ""),
+			disabled: pending,
+			children: [
+				/* @__PURE__ */ jsx(Select.Label, { children: label }),
+				/* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, { placeholder }), /* @__PURE__ */ jsx(Select.Icon, {})] }),
+				/* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, {
+					value: option.value,
+					children: /* @__PURE__ */ jsx(Select.ItemText, { children: option.label })
+				}, option.value)) }) }) }) })
+			]
+		}), draft.gender ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setField("gender", ""),
+			disabled: pending,
+			"data-fs-my-account-profile-gender-clear": "",
+			children: clearLabel
+		}) : null]
+	});
+}
+const MyAccountProfile = {
+	Root: MyAccountProfileRoot,
+	RootDefinition: MyAccountProfileRootDefinition,
+	EditButton: MyAccountProfileEditButton,
+	EditButtonDefinition: MyAccountProfileEditButtonDefinition,
+	SaveButton: MyAccountProfileSaveButton,
+	SaveButtonDefinition: MyAccountProfileSaveButtonDefinition,
+	CancelButton: MyAccountProfileCancelButton,
+	CancelButtonDefinition: MyAccountProfileCancelButtonDefinition,
+	Email: MyAccountProfileEmail,
+	EmailDefinition: MyAccountProfileEmailDefinition,
+	Skeleton: MyAccountProfileSkeleton,
+	SkeletonDefinition: MyAccountProfileSkeletonDefinition,
+	FirstNameControl: MyAccountProfileFirstNameControl,
+	FirstNameControlDefinition: MyAccountProfileFirstNameControlDefinition,
+	LastNameControl: MyAccountProfileLastNameControl,
+	LastNameControlDefinition: MyAccountProfileLastNameControlDefinition,
+	PhoneControl: MyAccountProfilePhoneControl,
+	PhoneControlDefinition: MyAccountProfilePhoneControlDefinition,
+	TaxIdControl: MyAccountProfileTaxIdControl,
+	TaxIdControlDefinition: MyAccountProfileTaxIdControlDefinition,
+	BirthDateControl: MyAccountProfileBirthDateControl,
+	BirthDateControlDefinition: MyAccountProfileBirthDateControlDefinition,
+	GenderControl: MyAccountProfileGenderControl,
+	GenderControlDefinition: MyAccountProfileGenderControlDefinition
+};
+//#endregion
+export { MyAccountProfile, MyAccountProfileBirthDateControl, MyAccountProfileBirthDateControlDefinition, MyAccountProfileCancelButton, MyAccountProfileCancelButtonDefinition, MyAccountProfileEditButton, MyAccountProfileEditButtonDefinition, MyAccountProfileEmail, MyAccountProfileEmailDefinition, MyAccountProfileFirstNameControl, MyAccountProfileFirstNameControlDefinition, MyAccountProfileGenderControl, MyAccountProfileGenderControlDefinition, MyAccountProfileLastNameControl, MyAccountProfileLastNameControlDefinition, MyAccountProfilePhoneControl, MyAccountProfilePhoneControlDefinition, MyAccountProfileRoot, MyAccountProfileRootDefinition, MyAccountProfileSaveButton, MyAccountProfileSaveButtonDefinition, MyAccountProfileSkeleton, MyAccountProfileSkeletonDefinition, MyAccountProfileTaxIdControl, MyAccountProfileTaxIdControlDefinition, useMyAccountProfile };
+
+//# sourceMappingURL=my-account-profile.js.map