@vtex/faststore 0.0.10 → 0.0.11

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

@@ -1,8 +1,11 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { Field } from "../../particles/field/field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { useSession } from "../session/session.js";
 import { loggableErrorName } from "../../utils/loggable-error-name.js";
@@ -42,6 +45,264 @@ const fragment = `
     }
   }
 `;
+const MyAccountProfileRootContent = defineContentType({
+	id: "my-account-profile-root",
+	title: "My Account Profile Root",
+	description: "The toasts the profile Save raises.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			saveFailedMessage: {
+				type: "string",
+				title: "Save failure message",
+				description: "Shown for a network failure, and when the save cannot be dispatched at all.",
+				format: "icu-message",
+				messageSource: "Unable to save your profile. Please try again."
+			},
+			invalidValueMessage: {
+				type: "string",
+				title: "Refused value message",
+				description: "Shown when the account refuses one or more of the submitted values.",
+				format: "icu-message",
+				messageSource: "Some of your details were not accepted. Check them and try again."
+			},
+			sessionExpiredMessage: {
+				type: "string",
+				title: "Session expired message",
+				description: "Shown when the session ended before the save, so the shopper must sign in again.",
+				format: "icu-message",
+				messageSource: "Your session has expired. Please sign in again."
+			},
+			savedMessage: {
+				type: "string",
+				title: "Save success message",
+				format: "icu-message",
+				messageSource: "Your profile has been saved."
+			}
+		}
+	}
+});
+/**
+* `CustomerProfileErrorCode` of API Core's schema plus the two codes the sdk mints: the transport failure
+* and the expired session, which the write answers with a top-level `UNAUTHORIZED`.
+*/
+const MY_ACCOUNT_PROFILE_ERROR_FIELDS = {
+	INVALID_VALUE: "invalidValueMessage",
+	UNAUTHORIZED: "sessionExpiredMessage",
+	NETWORK_ERROR: "saveFailedMessage"
+};
+const MyAccountProfileEditButtonContent = defineContentType({
+	id: "my-account-profile-edit",
+	title: "My Account Profile Edit Button",
+	description: "The edit button's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Edit"
+		} }
+	}
+});
+const MyAccountProfileSaveButtonContent = defineContentType({
+	id: "my-account-profile-save",
+	title: "My Account Profile Save Button",
+	description: "The save button's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Save"
+		} }
+	}
+});
+const MyAccountProfileCancelButtonContent = defineContentType({
+	id: "my-account-profile-cancel",
+	title: "My Account Profile Cancel Button",
+	description: "The cancel button's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Cancel"
+		} }
+	}
+});
+const MyAccountProfileFirstNameControlContent = defineContentType({
+	id: "my-account-profile-first-name",
+	title: "My Account Profile First Name Control",
+	description: "The first-name field's label and required message.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "First name"
+			},
+			requiredMessage: {
+				type: "string",
+				title: "Required message",
+				format: "icu-message",
+				messageSource: "First name is required."
+			}
+		}
+	}
+});
+const MyAccountProfileLastNameControlContent = defineContentType({
+	id: "my-account-profile-last-name",
+	title: "My Account Profile Last Name Control",
+	description: "The last-name field's label and required message.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Last name"
+			},
+			requiredMessage: {
+				type: "string",
+				title: "Required message",
+				format: "icu-message",
+				messageSource: "Last name is required."
+			}
+		}
+	}
+});
+const MyAccountProfilePhoneControlContent = defineContentType({
+	id: "my-account-profile-phone",
+	title: "My Account Profile Phone Control",
+	description: "The phone field's label and invalid message.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Phone"
+			},
+			invalidMessage: {
+				type: "string",
+				title: "Invalid message",
+				format: "icu-message",
+				messageSource: "Invalid phone number"
+			}
+		}
+	}
+});
+const MyAccountProfileTaxIdControlContent = defineContentType({
+	id: "my-account-profile-tax-id",
+	title: "My Account Profile Tax ID Control",
+	description: "The tax-ID field's label, invalid message and the reason a saved document is locked.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "National tax ID"
+			},
+			invalidMessage: {
+				type: "string",
+				title: "Invalid message",
+				format: "icu-message",
+				messageSource: "Invalid document number."
+			},
+			lockedReason: {
+				type: "string",
+				title: "Locked reason",
+				format: "icu-message",
+				messageSource: "Your document ID can't be edited."
+			}
+		}
+	}
+});
+const MyAccountProfileBirthDateControlContent = defineContentType({
+	id: "my-account-profile-birth-date",
+	title: "My Account Profile Birth Date Control",
+	description: "The birth-date field's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Birth date"
+		} }
+	}
+});
+const MyAccountProfileGenderControlContent = defineContentType({
+	id: "my-account-profile-gender",
+	title: "My Account Profile Gender Control",
+	description: "The gender field's label, placeholder, clear button label and the default options' labels.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Gender"
+			},
+			placeholder: {
+				type: "string",
+				title: "Placeholder",
+				format: "icu-message",
+				messageSource: "Select"
+			},
+			clearLabel: {
+				type: "string",
+				title: "Clear button label",
+				format: "icu-message",
+				messageSource: "Clear"
+			},
+			femaleLabel: {
+				type: "string",
+				title: "Female option label",
+				format: "icu-message",
+				messageSource: "Female"
+			},
+			maleLabel: {
+				type: "string",
+				title: "Male option label",
+				format: "icu-message",
+				messageSource: "Male"
+			},
+			otherLabel: {
+				type: "string",
+				title: "Other option label",
+				format: "icu-message",
+				messageSource: "Other"
+			},
+			preferNotToSayLabel: {
+				type: "string",
+				title: "Prefer-not-to-say option label",
+				format: "icu-message",
+				messageSource: "Prefer not to say"
+			}
+		}
+	}
+});
 const FIELD_KEYS = [
 	"firstName",
 	"lastName",
@@ -51,8 +312,6 @@ const FIELD_KEYS = [
 	"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 ?? "",
@@ -77,22 +336,23 @@ function toNativeDate(stored) {
 function toStoredDate(native) {
 	return native;
 }
+/** The default option set, each value labelled by a message field; used only when no `options` are authored. */
 const DEFAULT_GENDER_OPTIONS = [
 	{
 		value: "female",
-		label: "Female"
+		field: "femaleLabel"
 	},
 	{
 		value: "male",
-		label: "Male"
+		field: "maleLabel"
 	},
 	{
 		value: "other",
-		label: "Other"
+		field: "otherLabel"
 	},
 	{
 		value: "prefer_not_to_say",
-		label: "Prefer not to say"
+		field: "preferNotToSayLabel"
 	}
 ];
 const MY_ACCOUNT_PROFILE_UNSET = Symbol("MyAccountProfileContextUnset");
@@ -107,6 +367,7 @@ const MyAccountProfileRootDefinition = defineComponent({
 	name: "MyAccountProfileRoot",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileRoot,
+	content: MyAccountProfileRootContent,
 	fragment,
 	fetchStrategy: "reactive",
 	requiresContext: "session",
@@ -117,25 +378,14 @@ const MyAccountProfileRootDefinition = defineComponent({
 		label: "My Account Profile Root",
 		category: "identity"
 	},
-	schema: {
-		documentType: {
-			type: "string",
-			label: "Default document type (e.g. CPF)"
-		},
-		saveFailedMessage: {
-			type: "string",
-			default: "Unable to save your profile. Please try again.",
-			label: "Save failure message"
-		},
-		savedMessage: {
-			type: "string",
-			default: "Your profile has been saved.",
-			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."
+	schema: { documentType: {
+		type: "string",
+		label: "Default document type (e.g. CPF)"
+	} },
+	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 (the $content fields savedMessage, saveFailedMessage, invalidValueMessage and sessionExpiredMessage, by refusal code), 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 }) {
+function MyAccountProfileRoot({ $data: $dataProp, $actions: $actionsProp, documentType: documentTypeProp, $content, $locale, className, children }) {
+	const { format } = useMessageFormatter(MyAccountProfileRootContent, $content);
 	const { state } = useSession();
 	const toast = useToast();
 	const $data = useDataOverride($dataProp);
@@ -221,7 +471,7 @@ function MyAccountProfileRoot({ $data: $dataProp, $actions: $actionsProp, docume
 			setFieldErrors({});
 			setMode("view");
 			toast.add({
-				title: savedMessage,
+				title: format("savedMessage"),
 				type: "success"
 			});
 			return;
@@ -240,7 +490,7 @@ function MyAccountProfileRoot({ $data: $dataProp, $actions: $actionsProp, docume
 		const identity = $actions?.identity;
 		if (!identity?.customerProfileUpdate) {
 			toast.add({
-				title: saveFailedMessage,
+				title: format("saveFailedMessage"),
 				type: "error"
 			});
 			return;
@@ -253,23 +503,24 @@ function MyAccountProfileRoot({ $data: $dataProp, $actions: $actionsProp, docume
 		}
 		setPending(true);
 		try {
-			const userErrors = await identity.customerProfileUpdate(payload);
-			if (userErrors.length > 0) {
+			const [firstError] = await identity.customerProfileUpdate(payload);
+			if (firstError) {
+				const title = formatErrorCode(MyAccountProfileRootContent, MY_ACCOUNT_PROFILE_ERROR_FIELDS, firstError, format, "saveFailedMessage");
 				toast.add({
-					title: userErrors[0]?.message ?? saveFailedMessage,
+					title,
 					type: "error"
 				});
 				return;
 			}
 			setMode("view");
 			toast.add({
-				title: savedMessage,
+				title: format("savedMessage"),
 				type: "success"
 			});
 		} catch (error) {
 			console.error("[MyAccountProfileRoot] customerProfileUpdate failed", loggableErrorName(error));
 			toast.add({
-				title: saveFailedMessage,
+				title: format("saveFailedMessage"),
 				type: "error"
 			});
 		} finally {
@@ -320,74 +571,68 @@ const MyAccountProfileEditButtonDefinition = defineComponent({
 	name: "MyAccountProfileEditButton",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileEditButton,
+	content: MyAccountProfileEditButtonContent,
 	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."
+	schema: {},
+	guideline: "Its label is the $content field label unless children are composed. 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 }) {
+function MyAccountProfileEditButton({ $content, $locale, className, children }) {
 	const { mode, edit } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileEditButtonContent, $content);
 	if (mode !== "view") return null;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: edit,
 		className,
 		"data-fs-my-account-profile-edit": "",
-		children: children ?? label
+		children: children ?? format("label")
 	});
 }
 const MyAccountProfileSaveButtonDefinition = defineComponent({
 	name: "MyAccountProfileSaveButton",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileSaveButton,
+	content: MyAccountProfileSaveButtonContent,
 	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."
+	schema: {},
+	guideline: "Its label is the $content field label unless children are composed. 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 }) {
+function MyAccountProfileSaveButton({ $content, $locale, className, children }) {
 	const { mode, pending } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileSaveButtonContent, $content);
 	if (mode !== "edit") return null;
 	return /* @__PURE__ */ jsx("button", {
 		type: "submit",
 		disabled: pending,
 		className,
 		"data-fs-my-account-profile-save": "",
-		children: children ?? label
+		children: children ?? format("label")
 	});
 }
 const MyAccountProfileCancelButtonDefinition = defineComponent({
 	name: "MyAccountProfileCancelButton",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileCancelButton,
+	content: MyAccountProfileCancelButtonContent,
 	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."
+	schema: {},
+	guideline: "Its label is the $content field label unless children are composed. 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 }) {
+function MyAccountProfileCancelButton({ $content, $locale, className, children }) {
 	const { mode, pending, cancel } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileCancelButtonContent, $content);
 	if (mode !== "edit") return null;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -395,7 +640,7 @@ function MyAccountProfileCancelButton({ label = "Cancel", className, children })
 		onClick: cancel,
 		className,
 		"data-fs-my-account-profile-cancel": "",
-		children: children ?? label
+		children: children ?? format("label")
 	});
 }
 const MyAccountProfileEmailDefinition = defineComponent({
@@ -448,33 +693,24 @@ const MyAccountProfileFirstNameControlDefinition = defineComponent({
 	name: "MyAccountProfileFirstNameControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileFirstNameControl,
+	content: MyAccountProfileFirstNameControlContent,
 	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."
+	schema: {},
+	guideline: "Draft-bound, required first-name field, labelled by the $content field label. Blocks Save with the inline $content field requiredMessage and focus when left empty. Must be a descendant of MyAccountProfileRoot."
 });
-function MyAccountProfileFirstNameControl({ label = "First name", requiredMessage = "First name is required.", className }) {
+function MyAccountProfileFirstNameControl({ $content, $locale, className }) {
 	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileFirstNameControlContent, $content);
 	useEffect(() => {
 		return registerField({
 			key: "firstName",
-			validate: (value) => value.trim() ? null : requiredMessage
+			validate: (value) => value.trim() ? null : format("requiredMessage")
 		});
-	}, [requiredMessage, registerField]);
+	}, [format, registerField]);
 	const error = fieldErrors.firstName;
 	if (mode === "view") return /* @__PURE__ */ jsx("p", {
 		className,
@@ -489,7 +725,7 @@ function MyAccountProfileFirstNameControl({ label = "First name", requiredMessag
 		"data-fs-my-account-profile-first-name": "",
 		"data-fs-my-account-profile-field": "firstName",
 		children: [
-			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Label, { children: format("label") }),
 			/* @__PURE__ */ jsx(Field.Control, {
 				value: draft.firstName,
 				onChange: (event) => setField("firstName", event.target.value),
@@ -506,33 +742,24 @@ const MyAccountProfileLastNameControlDefinition = defineComponent({
 	name: "MyAccountProfileLastNameControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileLastNameControl,
+	content: MyAccountProfileLastNameControlContent,
 	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."
+	schema: {},
+	guideline: "Draft-bound, required last-name field, labelled by the $content field label. Blocks Save with the inline $content field requiredMessage and focus when left empty. Must be a descendant of MyAccountProfileRoot."
 });
-function MyAccountProfileLastNameControl({ label = "Last name", requiredMessage = "Last name is required.", className }) {
+function MyAccountProfileLastNameControl({ $content, $locale, className }) {
 	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileLastNameControlContent, $content);
 	useEffect(() => {
 		return registerField({
 			key: "lastName",
-			validate: (value) => value.trim() ? null : requiredMessage
+			validate: (value) => value.trim() ? null : format("requiredMessage")
 		});
-	}, [requiredMessage, registerField]);
+	}, [format, registerField]);
 	const error = fieldErrors.lastName;
 	if (mode === "view") return /* @__PURE__ */ jsx("p", {
 		className,
@@ -547,7 +774,7 @@ function MyAccountProfileLastNameControl({ label = "Last name", requiredMessage
 		"data-fs-my-account-profile-last-name": "",
 		"data-fs-my-account-profile-field": "lastName",
 		children: [
-			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Label, { children: format("label") }),
 			/* @__PURE__ */ jsx(Field.Control, {
 				value: draft.lastName,
 				onChange: (event) => setField("lastName", event.target.value),
@@ -564,17 +791,13 @@ const MyAccountProfilePhoneControlDefinition = defineComponent({
 	name: "MyAccountProfilePhoneControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfilePhoneControl,
+	content: MyAccountProfilePhoneControlContent,
 	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",
@@ -584,27 +807,23 @@ const MyAccountProfilePhoneControlDefinition = defineComponent({
 			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."
+	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. Its copy is the $content fields label and invalidMessage. 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 }) {
+function MyAccountProfilePhoneControl({ field = "mobilePhone", country = "US", $content, $locale, className }) {
 	const { mode, draft, savedValues, fieldErrors, pending, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfilePhoneControlContent, $content);
 	useEffect(() => {
 		return registerField({
 			key: field,
-			validate: (value) => value.trim() && !validatePhoneNumber(value, country) ? invalidMessage : null,
+			validate: (value) => value.trim() && !validatePhoneNumber(value, country) ? format("invalidMessage") : null,
 			normalize: (value) => value.trim() ? toE164(value, country) : value
 		});
 	}, [
 		field,
 		country,
-		invalidMessage,
+		format,
 		registerField
 	]);
 	const error = fieldErrors[field];
@@ -618,14 +837,14 @@ function MyAccountProfilePhoneControl({ label = "Phone", field = "mobilePhone",
 		"data-fs-my-account-profile-field": field,
 		children: /* @__PURE__ */ jsx(PhoneField, {
 			className,
-			label,
+			label: format("label"),
 			country,
 			requirement: "optional",
 			value: draft[field],
 			onValueChange: (value) => setField(field, value),
 			invalid: !!error,
 			error: error ?? void 0,
-			errorInvalid: invalidMessage,
+			errorInvalid: format("invalidMessage"),
 			isDisabled: pending,
 			"data-fs-my-account-profile-phone": field
 		})
@@ -635,45 +854,31 @@ const MyAccountProfileTaxIdControlDefinition = defineComponent({
 	name: "MyAccountProfileTaxIdControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileTaxIdControl,
+	content: MyAccountProfileTaxIdControlContent,
 	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 for the Root's active document type: CPF, SSN, SIN or RFC, each with its own mask and validation. Self-gates on that type and renders nothing when it is unset or unknown. 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."
+	schema: {},
+	guideline: "Draft-bound, optional national tax-ID field for the Root's active document type: CPF, SSN, SIN or RFC, each with its own mask and validation. Self-gates on that type and renders nothing when it is unset or unknown. Its copy is the $content fields label, invalidMessage and lockedReason. 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 }) {
+function MyAccountProfileTaxIdControl({ $content, $locale, className }) {
 	const { mode, draft, savedValues, fieldErrors, pending, activeDocumentType, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileTaxIdControlContent, $content);
 	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,
+			validate: (value) => value.trim() && !isValidDocument(value, documentType) ? format("invalidMessage") : null,
 			normalize: (value) => DOCUMENTS[documentType].sanitize(value)
 		});
 	}, [
 		documentType,
 		hasSavedDocument,
-		invalidMessage,
+		format,
 		registerField
 	]);
 	if (!documentType) return null;
@@ -684,25 +889,28 @@ function MyAccountProfileTaxIdControl({ label = "National tax ID", invalidMessag
 		"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 })
-		]
-	});
+	if (hasSavedDocument) {
+		const lockedReason = format("lockedReason");
+		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: format("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,
+		label: format("label"),
 		documentType,
 		value: draft.document,
 		onValueChange: (value) => setField("document", value),
@@ -717,20 +925,18 @@ const MyAccountProfileBirthDateControlDefinition = defineComponent({
 	name: "MyAccountProfileBirthDateControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileBirthDateControl,
+	content: MyAccountProfileBirthDateControlContent,
 	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."
+	schema: {},
+	guideline: "Draft-bound, optional birth-date field over a native date input, labelled by the $content field label. 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 }) {
+function MyAccountProfileBirthDateControl({ $content, $locale, className }) {
 	const { mode, draft, savedValues, pending, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileBirthDateControlContent, $content);
 	useEffect(() => {
 		return registerField({
 			key: "birthDate",
@@ -750,7 +956,7 @@ function MyAccountProfileBirthDateControl({ label = "Birth date", className }) {
 		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, {
+		children: [/* @__PURE__ */ jsx(Field.Label, { children: format("label") }), /* @__PURE__ */ jsx(Input, {
 			type: "date",
 			value: toNativeDate(draft.birthDate),
 			onChange: handleChange,
@@ -762,32 +968,22 @@ const MyAccountProfileGenderControlDefinition = defineComponent({
 	name: "MyAccountProfileGenderControl",
 	importPath: "@vtex/faststore/components",
 	component: MyAccountProfileGenderControl,
+	content: MyAccountProfileGenderControlContent,
 	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."
+	schema: {},
+	guideline: "Draft-bound, optional gender field over a store-configurable set of options (the options prop); its label, placeholder and clear label are the $content fields label, placeholder and clearLabel. Without authored options it offers female, male, other and prefer not to say, labelled by the $content fields femaleLabel, maleLabel, otherLabel and preferNotToSayLabel. 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 }) {
+function MyAccountProfileGenderControl({ options: authoredOptions, $content, $locale, className }) {
 	const { mode, draft, savedValues, pending, registerField, setField } = useMyAccountProfile();
+	const { format } = useMessageFormatter(MyAccountProfileGenderControlContent, $content);
+	const options = useMemo(() => authoredOptions ?? DEFAULT_GENDER_OPTIONS.map(({ value, field }) => ({
+		value,
+		label: format(field)
+	})), [authoredOptions, format]);
 	useEffect(() => {
 		return registerField({ key: "gender" });
 	}, [registerField]);
@@ -809,8 +1005,8 @@ function MyAccountProfileGenderControl({ label = "Gender", placeholder = "Select
 			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.Label, { children: format("label") }),
+				/* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, { placeholder: format("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 })
@@ -821,7 +1017,7 @@ function MyAccountProfileGenderControl({ label = "Gender", placeholder = "Select
 			onClick: () => setField("gender", ""),
 			disabled: pending,
 			"data-fs-my-account-profile-gender-clear": "",
-			children: clearLabel
+			children: format("clearLabel")
 		}) : null]
 	});
 }
@@ -852,6 +1048,6 @@ const MyAccountProfile = {
 	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 };
+export { MY_ACCOUNT_PROFILE_ERROR_FIELDS, MyAccountProfile, MyAccountProfileBirthDateControl, MyAccountProfileBirthDateControlContent, MyAccountProfileBirthDateControlDefinition, MyAccountProfileCancelButton, MyAccountProfileCancelButtonContent, MyAccountProfileCancelButtonDefinition, MyAccountProfileEditButton, MyAccountProfileEditButtonContent, MyAccountProfileEditButtonDefinition, MyAccountProfileEmail, MyAccountProfileEmailDefinition, MyAccountProfileFirstNameControl, MyAccountProfileFirstNameControlContent, MyAccountProfileFirstNameControlDefinition, MyAccountProfileGenderControl, MyAccountProfileGenderControlContent, MyAccountProfileGenderControlDefinition, MyAccountProfileLastNameControl, MyAccountProfileLastNameControlContent, MyAccountProfileLastNameControlDefinition, MyAccountProfilePhoneControl, MyAccountProfilePhoneControlContent, MyAccountProfilePhoneControlDefinition, MyAccountProfileRoot, MyAccountProfileRootContent, MyAccountProfileRootDefinition, MyAccountProfileSaveButton, MyAccountProfileSaveButtonContent, MyAccountProfileSaveButtonDefinition, MyAccountProfileSkeleton, MyAccountProfileSkeletonDefinition, MyAccountProfileTaxIdControl, MyAccountProfileTaxIdControlContent, MyAccountProfileTaxIdControlDefinition, useMyAccountProfile };
 
 //# sourceMappingURL=my-account-profile.js.map