@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/client-profile-form/client-profile-fieldset.js

@@ -1,13 +1,16 @@
 "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, FieldBinding, FieldsetFieldContext, useFieldsetField, useFieldsetFieldNames, useNoAncestorFieldset } 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 { useFormRegistry } from "../../particles/form/form.js";
 import { useEntityDataResolved } from "../../sdk/data/entity-resolution-context.js";
 import { useReactiveDataSettled } from "../../sdk/data/use-reactive-data-settled.js";
+import { useFormRegistry } from "../../particles/form/form.js";
 import { Fieldset } from "../../particles/fieldset/fieldset.js";
 import { DOCUMENTS, DocumentField, isSupportedDocumentType } from "../../particles/document-field/document-field.js";
 import { PhoneField, toE164 } from "../../particles/phone-field/phone-field.js";
@@ -46,6 +49,119 @@ const fragment = `
     }
   }
 `;
+const ClientProfileFieldsetContent = defineContentType({
+	id: "client-profile-fieldset",
+	title: "Client Profile Fieldset",
+	description: "The profile fieldset's loading and loaded announcements and its accessible group name.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			loadingLabel: {
+				type: "string",
+				title: "Loading announcement",
+				format: "icu-message",
+				messageSource: "Loading your details"
+			},
+			loadedLabel: {
+				type: "string",
+				title: "Loaded announcement",
+				format: "icu-message",
+				messageSource: "Your details are ready"
+			},
+			groupLabel: {
+				type: "string",
+				title: "Accessible group name",
+				format: "icu-message",
+				messageSource: "Your details",
+				messageOptional: true
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Generic error message",
+				description: "Shown by FormError when the details could not be saved.",
+				format: "icu-message",
+				messageSource: "Unable to save your details. Please try again."
+			}
+		}
+	}
+});
+/**
+* The message for each refusal of the profile write: every `ClientProfileUpdateErrorCode` plus the
+* client-minted transport failure. None is a fault the shopper can fix, so all share one message.
+* `dispatch` hands `FormError` this copy, and genericErrorMessage for an unknown code.
+*/
+const CLIENT_PROFILE_FIELDSET_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NO_PROFILE_FIELD_PROVIDED: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
+function wordClientProfileError(error, { format }) {
+	return {
+		code: error.code,
+		message: formatErrorCode(ClientProfileFieldsetContent, CLIENT_PROFILE_FIELDSET_ERROR_FIELDS, error, format, "genericErrorMessage")
+	};
+}
+const ClientProfileFieldsetPhoneControlContent = defineContentType({
+	id: "client-profile-fieldset-phone",
+	title: "Client Profile Fieldset Phone Control",
+	description: "The phone control's label and its validation messages.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Phone"
+			},
+			errorInvalid: {
+				type: "string",
+				title: "Invalid error message",
+				format: "icu-message",
+				messageSource: "Invalid phone number"
+			},
+			errorRequired: {
+				type: "string",
+				title: "Required error message",
+				format: "icu-message",
+				messageSource: "Phone number is required"
+			}
+		}
+	}
+});
+const ClientProfileFirstNameControlContent = defineContentType({
+	id: "client-profile-first-name",
+	title: "Client Profile First Name Control",
+	description: "The first-name control's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "First name"
+		} }
+	}
+});
+const ClientProfileLastNameControlContent = defineContentType({
+	id: "client-profile-last-name",
+	title: "Client Profile Last Name Control",
+	description: "The last-name control's label.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Last name"
+		} }
+	}
+});
 /** No control publishes a rule today — a blocking `RegisterOptions` key would reopen the same submit
 * block for a read-only session (Decision 6): `readOnly` disables a control's rendered `<input>` via a
 * plain HTML attribute, never react-hook-form's own `disabled` registration option (`field.tsx`'s
@@ -71,6 +187,7 @@ const ClientProfileFieldsetDefinition = defineComponent({
 	name: "ClientProfileFieldset",
 	importPath: "@vtex/faststore/components",
 	component: ClientProfileFieldset,
+	content: ClientProfileFieldsetContent,
 	fragment,
 	fetchStrategy: "reactive",
 	skeleton: ClientProfileFieldsetSkeleton,
@@ -95,73 +212,49 @@ const ClientProfileFieldsetDefinition = defineComponent({
 			type: "number",
 			default: 4,
 			label: "Skeleton rows"
-		},
-		loadingLabel: {
-			type: "string",
-			default: "Loading your details",
-			label: "Loading announcement"
-		},
-		loadedLabel: {
-			type: "string",
-			default: "Your details are ready",
-			label: "Loaded announcement"
-		},
-		groupLabel: {
-			type: "string",
-			default: "Your details",
-			label: "Accessible group name"
 		}
 	},
-	guideline: "Registers a batched write of the ClientProfile entity with the enclosing FormRoot; renders one Fieldset.Root and no <form>. Must be inside a FormRoot with a SessionRoot ancestor. Compose ClientProfileFirstNameControl / ClientProfileLastNameControl / ClientProfileFieldsetPhoneControl / ClientProfileDocumentControl as children, in any order. The controls mount only once the profile has resolved, with skeletonCount placeholder rows in their place until then — set it to the number of controls composed, or the form jumps by the difference. Style the announcement sr-only. Dispatches only the fields the shopper changed. groupLabel names the group as its accessible name; blank emits no aria-label, and a composed FieldsetLegend wins over it."
+	guideline: "Registers a batched write of the ClientProfile entity with the enclosing FormRoot; renders one Fieldset.Root and no <form>. Must be inside a FormRoot with a SessionRoot ancestor. Compose ClientProfileFirstNameControl / ClientProfileLastNameControl / ClientProfileFieldsetPhoneControl / ClientProfileDocumentControl as children, in any order. The controls mount only once the profile has resolved, with skeletonCount placeholder rows in their place until then — set it to the number of controls composed, or the form jumps by the difference. Style the announcement sr-only; it reads the $content fields loadingLabel and loadedLabel. Dispatches only the fields the shopper changed. The $content field groupLabel names the group as its accessible name; an unauthored one emits no aria-label, and a composed FieldsetLegend wins over it."
 });
 const ClientProfileFirstNameControlDefinition = defineComponent({
 	name: "ClientProfileFirstNameControl",
 	importPath: "@vtex/faststore/components",
 	component: ClientProfileFirstNameControl,
+	content: ClientProfileFirstNameControlContent,
 	requiresContext: "client-profile-fieldset",
 	providesContext: "field",
 	editor: {
 		label: "Client Profile First Name Control",
 		category: "identity"
 	},
-	schema: {
-		label: {
-			type: "string",
-			label: "Label"
-		},
-		placeholder: {
-			type: "string",
-			label: "Placeholder"
-		}
-	},
-	guideline: "The bound first-name control; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order."
+	schema: { placeholder: {
+		type: "string",
+		label: "Placeholder"
+	} },
+	guideline: "The bound first-name control, labelled by the $content field label; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order."
 });
 const ClientProfileLastNameControlDefinition = defineComponent({
 	name: "ClientProfileLastNameControl",
 	importPath: "@vtex/faststore/components",
 	component: ClientProfileLastNameControl,
+	content: ClientProfileLastNameControlContent,
 	requiresContext: "client-profile-fieldset",
 	providesContext: "field",
 	editor: {
 		label: "Client Profile Last Name Control",
 		category: "identity"
 	},
-	schema: {
-		label: {
-			type: "string",
-			label: "Label"
-		},
-		placeholder: {
-			type: "string",
-			label: "Placeholder"
-		}
-	},
-	guideline: "The bound last-name control; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order."
+	schema: { placeholder: {
+		type: "string",
+		label: "Placeholder"
+	} },
+	guideline: "The bound last-name control, labelled by the $content field label; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order."
 });
 const ClientProfileFieldsetPhoneControlDefinition = defineComponent({
 	name: "ClientProfileFieldsetPhoneControl",
 	importPath: "@vtex/faststore/components",
 	component: ClientProfileFieldsetPhoneControl,
+	content: ClientProfileFieldsetPhoneControlContent,
 	requiresContext: "client-profile-fieldset",
 	providesContext: ["field", "phone-field"],
 	editor: {
@@ -169,10 +262,6 @@ const ClientProfileFieldsetPhoneControlDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {
-		label: {
-			type: "string",
-			label: "Label"
-		},
 		placeholder: {
 			type: "string",
 			label: "Placeholder"
@@ -180,17 +269,9 @@ const ClientProfileFieldsetPhoneControlDefinition = defineComponent({
 		requirement: {
 			type: ["mandatory", "optional"],
 			label: "Requirement"
-		},
-		errorInvalid: {
-			type: "string",
-			label: "Invalid error message"
-		},
-		errorRequired: {
-			type: "string",
-			label: "Required error message"
 		}
 	},
-	guideline: "The bound phone control; must be a descendant of ClientProfileFieldset. Distinct from ClientProfilePhoneControl (matter/client-profile), which writes on blur and requires the client-profile context — the two cannot compile into each other's container. Composes the PhoneField particle: recomposable (RFC:503) — given children, they replace PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order; childless keeps today's order. Its className styles PhoneField's own root, the node that lays out label, input and error — not the wrapper, which carries only the data-fs-client-profile-fieldset-field=\"phone\" styling hook. A store that does not want a phone field omits this element from the page: requirement only governs required validation, never visibility."
+	guideline: "The bound phone control; must be a descendant of ClientProfileFieldset. Its label and its invalid and required messages are the $content fields label, errorInvalid and errorRequired. Distinct from ClientProfilePhoneControl (matter/client-profile), which writes on blur and requires the client-profile context — the two cannot compile into each other's container. Composes the PhoneField particle: recomposable (RFC:503) — given children, they replace PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order; childless keeps today's order. Its className styles PhoneField's own root, the node that lays out label, input and error — not the wrapper, which carries only the data-fs-client-profile-fieldset-field=\"phone\" styling hook. A store that does not want a phone field omits this element from the page: requirement only governs required validation, never visibility."
 });
 const ClientProfileDocumentControlDefinition = defineComponent({
 	name: "ClientProfileDocumentControl",
@@ -240,13 +321,16 @@ const ClientProfileDocumentControlDefinition = defineComponent({
 * carries trees with no reactive root above them, where the slice arrives as a plain prop.
 *
 * Both ends of that wait are spoken: the fieldset carries `aria-busy` while it lasts and holds a polite
-* live region that announces `loadingLabel` and then `loadedLabel`. Style the region `sr-only` — it is
+* live region that announces the `loadingLabel` and then the `loadedLabel` message. Style the region `sr-only` — it is
 * text meant for a screen reader, not for the page.
 */
-function ClientProfileFieldset({ country = "US", documentType, skeletonCount = CLIENT_PROFILE_SKELETON_ROWS, loadingLabel = "Loading your details", loadedLabel = "Your details are ready", groupLabel = "Your details", className, children, $data: $dataProp, $actions: $actionsProp }) {
+function ClientProfileFieldset({ country = "US", documentType, skeletonCount = CLIENT_PROFILE_SKELETON_ROWS, $content, $locale, className, children, $data: $dataProp, $actions: $actionsProp }) {
 	useNoAncestorFieldset("ClientProfileFieldset");
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
+	const messages = useMessageFormatter(ClientProfileFieldsetContent, $content);
+	const { format } = messages;
+	const groupLabel = format("groupLabel");
 	const settled = useReactiveDataSettled();
 	const sliceResolved = useEntityDataResolved();
 	const resolved = settled && sliceResolved && $data !== void 0;
@@ -259,7 +343,8 @@ function ClientProfileFieldset({ country = "US", documentType, skeletonCount = C
 		country,
 		documentType,
 		readOnly,
-		getFieldState
+		getFieldState,
+		messages
 	});
 	useEffect(() => {
 		latest.current = {
@@ -267,21 +352,23 @@ function ClientProfileFieldset({ country = "US", documentType, skeletonCount = C
 			country,
 			documentType,
 			readOnly,
-			getFieldState
+			getFieldState,
+			messages
 		};
 	}, [
 		$actions,
 		country,
 		documentType,
 		readOnly,
-		getFieldState
+		getFieldState,
+		messages
 	]);
 	const { registry: fieldsetRegistry, getFieldNames } = useFieldsetFieldNames("clientProfile");
 	const dispatch = useCallback(async (payload) => {
 		if (latest.current.readOnly) throw new Error("ClientProfileFieldset cannot dispatch while the session is read-only.");
 		const update = latest.current.$actions?.identity?.clientProfileUpdate;
 		if (!update) throw new Error("ClientProfileFieldset requires $actions.identity.clientProfileUpdate.");
-		return update(payload);
+		return (await update(payload)).map((error) => wordClientProfileError(error, latest.current.messages));
 	}, []);
 	const toPayload = useCallback((values) => {
 		const { country: activeCountry, documentType: activeDocumentType, getFieldState } = latest.current;
@@ -331,7 +418,7 @@ function ClientProfileFieldset({ country = "US", documentType, skeletonCount = C
 		documentType
 	]);
 	const [announcement, setAnnouncement] = useState("");
-	const announced = resolved ? loadedLabel : loadingLabel;
+	const announced = format(resolved ? "loadedLabel" : "loadingLabel");
 	useEffect(() => {
 		setAnnouncement(announced);
 	}, [announced]);
@@ -339,7 +426,7 @@ function ClientProfileFieldset({ country = "US", documentType, skeletonCount = C
 		className,
 		disabled: readOnly,
 		"aria-busy": resolved ? void 0 : true,
-		...groupLabel?.trim() ? { "aria-label": groupLabel } : {},
+		...groupLabel.trim() ? { "aria-label": groupLabel } : {},
 		"data-fs-client-profile-fieldset": "",
 		...resolved ? {} : { "data-fs-client-profile-fieldset-pending": "" },
 		...readOnly ? { "data-fs-client-profile-fieldset-readonly": "" } : {},
@@ -371,12 +458,12 @@ function ClientProfileFieldsetSkeleton({ count = CLIENT_PROFILE_SKELETON_ROWS, c
 	});
 }
 ClientProfileFieldset.Skeleton = ClientProfileFieldsetSkeleton;
-function ProfileTextControl({ fieldKey, attr, autoComplete, defaultLabel, label, placeholder, className, children }) {
+function ProfileTextControl({ fieldKey, attr, autoComplete, label, placeholder, className, children }) {
 	const { namespace, saved, readOnly, rules } = useClientProfileFieldsetContext();
 	const name = useFieldsetField(namespace, fieldKey);
 	return /* @__PURE__ */ jsx(FieldBinding, {
 		name,
-		label: label ?? defaultLabel,
+		label,
 		placeholder,
 		defaultValue: saved[fieldKey],
 		rule: rules[fieldKey],
@@ -393,25 +480,25 @@ function ProfileTextControl({ fieldKey, attr, autoComplete, defaultLabel, label,
 		})
 	});
 }
-function ClientProfileFirstNameControl({ label, placeholder, className, children }) {
+function ClientProfileFirstNameControl({ placeholder, $content, $locale, className, children }) {
+	const { format } = useMessageFormatter(ClientProfileFirstNameControlContent, $content);
 	return /* @__PURE__ */ jsx(ProfileTextControl, {
 		fieldKey: "firstName",
 		attr: "first-name",
 		autoComplete: "given-name",
-		defaultLabel: "First name",
-		label,
+		label: format("label"),
 		placeholder,
 		className,
 		children
 	});
 }
-function ClientProfileLastNameControl({ label, placeholder, className, children }) {
+function ClientProfileLastNameControl({ placeholder, $content, $locale, className, children }) {
+	const { format } = useMessageFormatter(ClientProfileLastNameControlContent, $content);
 	return /* @__PURE__ */ jsx(ProfileTextControl, {
 		fieldKey: "lastName",
 		attr: "last-name",
 		autoComplete: "family-name",
-		defaultLabel: "Last name",
-		label,
+		label: format("label"),
 		placeholder,
 		className,
 		children
@@ -424,12 +511,13 @@ function ClientProfileLastNameControl({ label, placeholder, className, children
 * state for this control to second-guess; `requirement` only ever raises the field to required,
 * and left unset it raises nothing.
 */
-function ClientProfileFieldsetPhoneControl({ label, placeholder, requirement, errorInvalid, errorRequired, className, children }) {
+function ClientProfileFieldsetPhoneControl({ placeholder, requirement, $content, $locale, className, children }) {
 	const { namespace, saved, readOnly, rules, country } = useClientProfileFieldsetContext();
 	const name = useFieldsetField(namespace, "phone");
+	const { format } = useMessageFormatter(ClientProfileFieldsetPhoneControlContent, $content);
 	const binding = /* @__PURE__ */ jsx(FieldBinding, {
 		name,
-		label,
+		label: format("label"),
 		placeholder,
 		defaultValue: saved.phone,
 		rule: rules.phone,
@@ -437,8 +525,8 @@ function ClientProfileFieldsetPhoneControl({ label, placeholder, requirement, er
 		children: /* @__PURE__ */ jsx(PhoneField, {
 			country,
 			requirement,
-			errorInvalid,
-			errorRequired,
+			errorInvalid: format("errorInvalid"),
+			errorRequired: format("errorRequired"),
 			className,
 			children
 		})
@@ -486,6 +574,6 @@ function ClientProfileDocumentControl({ label, placeholder, errorMessage, classN
 	});
 }
 //#endregion
-export { ClientProfileDocumentControl, ClientProfileDocumentControlDefinition, ClientProfileFieldset, ClientProfileFieldsetDefinition, ClientProfileFieldsetPhoneControl, ClientProfileFieldsetPhoneControlDefinition, ClientProfileFieldsetSkeleton, ClientProfileFirstNameControl, ClientProfileFirstNameControlDefinition, ClientProfileLastNameControl, ClientProfileLastNameControlDefinition };
+export { CLIENT_PROFILE_FIELDSET_ERROR_FIELDS, ClientProfileDocumentControl, ClientProfileDocumentControlDefinition, ClientProfileFieldset, ClientProfileFieldsetContent, ClientProfileFieldsetDefinition, ClientProfileFieldsetPhoneControl, ClientProfileFieldsetPhoneControlContent, ClientProfileFieldsetPhoneControlDefinition, ClientProfileFieldsetSkeleton, ClientProfileFirstNameControl, ClientProfileFirstNameControlContent, ClientProfileFirstNameControlDefinition, ClientProfileLastNameControl, ClientProfileLastNameControlContent, ClientProfileLastNameControlDefinition };
 
 //# sourceMappingURL=client-profile-fieldset.js.map