@vtex/faststore 0.0.7 → 0.0.10

package/dist/matter/account-address-book/account-address-form.js

@@ -0,0 +1,946 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { resolveSiteRelativeHref } from "../../utils/safe-href.js";
+import { useIntl } from "../../sdk/i18n/client.js";
+import { useStorefrontNavigation } from "../../sdk/navigation/use-storefront-navigation.js";
+import { Field, FieldsetFieldContext, TEXT_FIELD_VALUE, useBoundField, useFieldsetField, useFieldsetFieldNames } from "../../particles/field/field.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { useSession } from "../session/session.js";
+import { loggableErrorName } from "../../utils/loggable-error-name.js";
+import { Button } from "../../particles/button/button.js";
+import { ACCOUNT_FIELD_LABELS, ACCOUNT_MAX_LENGTH } from "../../sdk/address/constants.js";
+import { useOptionalAccountAddressBook } from "./account-address-book.js";
+import { useToast } from "../../particles/toast/toast.js";
+import { Select } from "../../particles/select/select.js";
+import { AccountAddressFormContext, useAccountAddressForm } from "./account-address-form-context.js";
+import { AccountAddressCountryNotice, AddressCountryControl } from "./account-address-country.js";
+import { FormRoot, useFormRegistry } from "../../particles/form/form.js";
+import { addressFields } from "../../sdk/address/address-fields.js";
+import { loadCountryRules } from "../../sdk/address/country-rules.js";
+import { toAddressFieldName } from "../../sdk/address/server-fields.js";
+import { validateAddress } from "../../sdk/address/validate-address.js";
+import { applyCountrySwitch, initialAddressCountry } from "./account-address-country-switch.js";
+import { dependentsOf, usePostalCodeAutofill } from "./account-address-postal-autofill.js";
+import { useOptionalAccountAddressRecord } from "./account-address-record.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext, useWatch } from "react-hook-form";
+//#region src/matter/account-address-book/account-address-form.tsx
+const DEFAULT_COUNTRY = "BRA";
+const DEFAULT_RETURN_PAGE = { standard: "address" };
+/** The react-hook-form namespace every field of the form registers under. */
+const ADDRESS_NAMESPACE = "accountAddress";
+/** What `dispatch` hands `FormRoot` when it writes nothing because a write or a switch is in flight. */
+const BUSY = [{
+	code: "ADDRESS_FORM_BUSY",
+	message: ""
+}];
+const EDITABLE_FIELDS = [
+	"recipientName",
+	"street",
+	"number",
+	"complement",
+	"neighborhood",
+	"city",
+	"state",
+	"postalCode",
+	"reference"
+];
+const SERVER_REQUIRED = {
+	code: "required",
+	messageId: "fs/address.error.required"
+};
+const SERVER_INVALID = {
+	code: "invalid",
+	messageId: "fs/address.error.invalid"
+};
+const ERROR_MESSAGE_IDS = {
+	unrenderedField: "fs/address-form.error.unrendered-field",
+	notFound: "fs/address-form.error.not-found",
+	unauthorized: "fs/address-form.error.unauthorized",
+	saveFailed: "fs/address-form.error.save-failed",
+	rulesFailed: "fs/address-form.error.rules-failed",
+	countrySwitchFailed: "fs/address-form.error.country-switch-failed",
+	unsupportedCountry: "fs/address-form.error.unsupported-country"
+};
+function toDraft(address) {
+	if (!address) return {};
+	return Object.fromEntries(EDITABLE_FIELDS.map((field) => [field, address[field] ?? ""]));
+}
+function isBlankDraft(draft) {
+	return EDITABLE_FIELDS.every((field) => (draft[field] ?? "").trim() === "");
+}
+function toCountry(code) {
+	return resolveAuthoredCopy(code, DEFAULT_COUNTRY).trim().toUpperCase();
+}
+/** A refusal's code decides the message when it names no field on screen; a named field reads as unrendered. */
+function toFormError({ code, field }) {
+	if (code === "UNSUPPORTED_COUNTRY") return "unsupportedCountry";
+	if (code === "NOT_FOUND") return "notFound";
+	if (code === "UNAUTHORIZED") return "unauthorized";
+	return field === null ? "saveFailed" : "unrenderedField";
+}
+function fieldPath(name) {
+	return `${ADDRESS_NAMESPACE}.${name}`;
+}
+/** The editable fields react-hook-form holds a value for, out of the namespace's raw values. */
+function pickEditable(values) {
+	if (typeof values !== "object" || values === null) return {};
+	const raw = values;
+	return Object.fromEntries(EDITABLE_FIELDS.flatMap((field) => typeof raw[field] === "string" ? [[field, raw[field]]] : []));
+}
+function pick(draft, fields) {
+	return Object.fromEntries(fields.map((field) => [field, draft[field] ?? ""]));
+}
+function changedFields(draft, seedDraft) {
+	return EDITABLE_FIELDS.filter((field) => (draft[field] ?? "") !== (seedDraft[field] ?? ""));
+}
+function typedFields(draft) {
+	return EDITABLE_FIELDS.filter((field) => (draft[field] ?? "").trim() !== "");
+}
+/** The write a save sends, or `undefined` when the provider chain never delivered its action. */
+function resolveWrite(actions, edit) {
+	if (edit) {
+		const update = actions?.address?.update;
+		return update ? (payload) => update(payload) : void 0;
+	}
+	const create = actions?.address?.create;
+	return create ? (payload) => create(payload) : void 0;
+}
+/** Splits the draft's errors into those a control on screen can show, and a form-level error for any with none. */
+function splitByScreen(found, controls) {
+	const onScreen = {};
+	let offScreen = false;
+	for (const [name, error] of Object.entries(found)) if (controls.has(name)) onScreen[name] = error;
+	else offScreen = true;
+	return {
+		onScreen,
+		formLevel: offScreen ? "unrenderedField" : null
+	};
+}
+function successTitle({ edited, addedMessage, savedMessage, intl }) {
+	if (edited) return resolveAuthoredCopy(savedMessage, intl.formatMessage({ id: "fs/address-form.saved" }));
+	return resolveAuthoredCopy(addedMessage, intl.formatMessage({ id: "fs/address-form.added" }));
+}
+function describeStatus(status, blockedMessage, intl) {
+	if (status === null) return "";
+	if (status.kind === "filled") return intl.formatMessage({ id: "fs/address-form.status.filled" }, { count: status.count });
+	const fallback = status.kind === "fields" ? intl.formatMessage({ id: "fs/address-form.status.fields" }, { count: status.count }) : intl.formatMessage({ id: "fs/address-form.status.failed" });
+	return resolveAuthoredCopy(blockedMessage, fallback);
+}
+function focusFirstInvalid(form, errors) {
+	if (!form) return;
+	for (const wrapper of form.querySelectorAll("[data-fs-account-address-form-field]")) {
+		const name = wrapper.dataset.fsAccountAddressFormField;
+		if (name && errors[name]) {
+			wrapper.querySelector("[data-fs-account-address-form-control]")?.focus();
+			return;
+		}
+	}
+}
+/** Where the form stands decides its seed: the book's open edit form, then the record the page names, then nothing. */
+function useFormPlacement() {
+	const book = useOptionalAccountAddressBook();
+	const record = useOptionalAccountAddressRecord();
+	const openForm = book?.openForm ?? null;
+	const seed = (openForm?.mode === "edit" ? openForm.address : null) ?? record?.address ?? null;
+	return {
+		book,
+		record,
+		seed,
+		mode: seed ? "edit" : "add"
+	};
+}
+function AccountAddressFormRoot({ defaultCountry, addedMessage, savedMessage, blockedMessage, returnHref, $actions, className, children, ...props }) {
+	const { state: sessionState } = useSession();
+	useToast();
+	const { book, record, mode } = useFormPlacement();
+	const [writing, setWriting] = useState(false);
+	const setBookFormPending = book?.setFormPending;
+	useEffect(() => {
+		setBookFormPending?.(writing);
+		return () => setBookFormPending?.(false);
+	}, [writing, setBookFormPending]);
+	const [switchTarget, setSwitchTarget] = useState(null);
+	if (sessionState !== "loggedIn") return null;
+	if (!book && record && !record.address) return null;
+	return /* @__PURE__ */ jsx(FormRoot, {
+		...props,
+		className,
+		"aria-busy": writing || switchTarget !== null || void 0,
+		"data-fs-account-address-form": "",
+		"data-fs-account-address-form-mode": mode,
+		children: /* @__PURE__ */ jsx(AccountAddressFieldset, {
+			defaultCountry,
+			addedMessage,
+			savedMessage,
+			blockedMessage,
+			returnHref,
+			$actions,
+			writing,
+			setWriting,
+			switchTarget,
+			setSwitchTarget,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(AddressCountryControl, {}),
+				/* @__PURE__ */ jsx(AccountAddressCountryNotice, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormRecipientName, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormFields, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormReference, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormError, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormSubmit, {}),
+				/* @__PURE__ */ jsx(AccountAddressFormCancel, {})
+			] })
+		})
+	});
+}
+/**
+* The form's one fieldset under its FormRoot. It reads and writes the draft through react-hook-form,
+* and owns the rules, the errors, the country switch, the postal-code fill and the write.
+*/
+function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, blockedMessage, returnHref, $actions: $actionsProp, writing, setWriting, switchTarget, setSwitchTarget, children }) {
+	const { registerFieldset } = useFormRegistry();
+	const { getValues, setValue, subscribe } = useFormContext();
+	const toast = useToast();
+	const intl = useIntl();
+	const $actions = useActionsOverride($actionsProp);
+	const { push } = useStorefrontNavigation();
+	const { book, seed, mode } = useFormPlacement();
+	const preferredCountry = toCountry(seed?.country ?? defaultCountry);
+	const seedDraft = useMemo(() => toDraft(seed), [seed]);
+	const close = book?.close;
+	const [offered, setOffered] = useState(void 0);
+	const [chosenCountry, setChosenCountry] = useState(null);
+	const [lastChange, setLastChange] = useState(null);
+	const [rules, setRules] = useState(null);
+	const [fieldErrors, setFieldErrors] = useState({});
+	const [formError, setFormError] = useState(null);
+	const [status, setStatus] = useState(null);
+	const pendingRef = useRef(false);
+	const mountedRef = useRef(true);
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+		};
+	}, []);
+	const dispatched = useRef(false);
+	const statusRef = useRef(null);
+	const offers = useRef(0);
+	const switchedRef = useRef(false);
+	const switchToken = useRef(0);
+	const asideRef = useRef({});
+	const { registry, getFieldNames } = useFieldsetFieldNames(ADDRESS_NAMESPACE);
+	const watched = useWatch({ name: ADDRESS_NAMESPACE });
+	const draft = useMemo(() => ({
+		...seedDraft,
+		...pickEditable(watched)
+	}), [seedDraft, watched]);
+	const country = mode === "edit" ? preferredCountry : chosenCountry ?? "";
+	const latest = useRef({
+		mode,
+		country,
+		rules,
+		seedDraft
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			mode,
+			country,
+			rules,
+			seedDraft
+		};
+	});
+	/** The draft as react-hook-form holds it now, not as the last render saw it. */
+	const readDraft = useCallback(() => ({
+		...latest.current.seedDraft,
+		...pickEditable(getValues(ADDRESS_NAMESPACE))
+	}), [getValues]);
+	/** Writes each field whose value changes. The country switch and the postal-code fill both write through here. */
+	const writeDraft = useCallback((values) => {
+		const current = readDraft();
+		for (const [name, value] of Object.entries(values)) if ((current[name] ?? "") !== value) setValue(fieldPath(name), value, { shouldDirty: true });
+	}, [readDraft, setValue]);
+	const mountedFields = useCallback(() => new Set(getFieldNames().map((name) => name.slice(15))), [getFieldNames]);
+	/**
+	* Loads `next`'s rules and applies the switch to the draft as it is then; only the latest call applies.
+	* A `silent` switch is one the shopper did not ask for, so its failure shows no error.
+	*/
+	const startSwitch = useCallback((next, silent = false) => {
+		const to = toCountry(next);
+		if (latest.current.mode !== "add") return;
+		const token = ++switchToken.current;
+		if (to === latest.current.country) {
+			setSwitchTarget(null);
+			return;
+		}
+		setSwitchTarget(to);
+		loadCountryRules(to).then((toRules) => {
+			if (token !== switchToken.current) return;
+			const { rules: fromRules } = latest.current;
+			if (fromRules) {
+				const result = applyCountrySwitch({
+					draft: readDraft(),
+					aside: asideRef.current,
+					from: fromRules,
+					to: toRules
+				});
+				asideRef.current = result.aside;
+				writeDraft(Object.fromEntries(EDITABLE_FIELDS.map((field) => [field, result.draft[field] ?? ""])));
+				setLastChange(result.change);
+			}
+			setRules(toRules);
+			setChosenCountry(to);
+			setSwitchTarget(null);
+			setFieldErrors({});
+			setFormError(null);
+			setStatus(null);
+		}, () => {
+			if (token !== switchToken.current) return;
+			setSwitchTarget(null);
+			if (!silent) setFormError("countrySwitchFailed");
+		});
+	}, [
+		readDraft,
+		writeDraft,
+		setSwitchTarget
+	]);
+	useEffect(() => () => {
+		switchToken.current += 1;
+	}, []);
+	const change = useCallback((to) => {
+		if (pendingRef.current) return;
+		switchedRef.current = true;
+		startSwitch(to);
+	}, [startSwitch]);
+	const offer = useCallback((countries) => {
+		offers.current += 1;
+		setOffered(countries);
+		return () => {
+			offers.current -= 1;
+			if (offers.current === 0) setOffered(void 0);
+		};
+	}, []);
+	useEffect(() => {
+		if (mode !== "add") return;
+		if (offered === void 0) {
+			if (offers.current === 0) setChosenCountry((current) => current ?? preferredCountry);
+			return;
+		}
+		const initial = initialAddressCountry(offered, preferredCountry);
+		if (chosenCountry === null) setChosenCountry(initial);
+		else if (!switchedRef.current && initial !== chosenCountry && isBlankDraft(readDraft())) startSwitch(initial, true);
+	}, [
+		mode,
+		offered,
+		preferredCountry,
+		chosenCountry,
+		startSwitch,
+		readDraft
+	]);
+	useEffect(() => {
+		if (!country) return;
+		let current = true;
+		loadCountryRules(country).then((loaded) => {
+			if (!current) return;
+			setRules(loaded);
+			if (seed) setFieldErrors(validateAddress(seedDraft, loaded));
+		}, () => {
+			if (current) setFormError("rulesFailed");
+		});
+		return () => {
+			current = false;
+		};
+	}, [
+		country,
+		seed,
+		seedDraft
+	]);
+	const registerField = useCallback((name) => registry.registerFieldName(fieldPath(name)), [registry]);
+	const applyFill = useCallback((filled) => {
+		writeDraft(filled);
+		setFieldErrors((previous) => {
+			const next = Object.fromEntries(Object.entries(previous).filter(([name]) => !(name in filled)));
+			return Object.keys(next).length === Object.keys(previous).length ? previous : next;
+		});
+		const count = Object.values(filled).filter((value) => value !== "").length;
+		if (count > 0) setStatus({
+			kind: "filled",
+			count
+		});
+	}, [writeDraft]);
+	const { fieldChanged, postalCodeChanged } = usePostalCodeAutofill({
+		country,
+		rules,
+		draft,
+		onFill: applyFill
+	});
+	const setField = useCallback((name, value) => {
+		fieldChanged(name);
+		if (name === "postalCode") postalCodeChanged(value);
+		setValue(fieldPath(name), value, { shouldDirty: true });
+		setFieldErrors((previous) => {
+			if (!previous[name]) return previous;
+			const { [name]: _cleared, ...rest } = previous;
+			return rest;
+		});
+		setFormError((previous) => previous === "rulesFailed" ? previous : null);
+		setStatus(null);
+	}, [
+		fieldChanged,
+		postalCodeChanged,
+		setValue
+	]);
+	const destination = typeof returnHref === "string" && returnHref.trim().length === 0 ? void 0 : returnHref;
+	const closeForm = useCallback(() => {
+		if (book) {
+			close?.();
+			return;
+		}
+		if (destination === void 0) push(DEFAULT_RETURN_PAGE);
+		else if (typeof destination === "string") {
+			const target = resolveSiteRelativeHref(destination);
+			if (target.safe) push(target.href);
+			else console.warn(`[AccountAddressFormRoot] returnHref refused (${target.reason}): ${destination}`);
+		} else push(destination);
+	}, [
+		book,
+		close,
+		destination,
+		push
+	]);
+	function block(errors, formLevel) {
+		const count = Object.keys(errors).length;
+		const blocked = count > 0 ? {
+			kind: "fields",
+			count
+		} : { kind: "failed" };
+		setFieldErrors(errors);
+		setFormError(formLevel);
+		setStatus(blocked);
+		focusFirstInvalid(statusRef.current?.closest("form") ?? null, errors);
+		return blocked;
+	}
+	/** Blocks on the draft's errors and returns what `dispatch` hands `FormRoot`, or `null` when the draft passes. */
+	function blockInvalid(current, currentRules) {
+		const { onScreen, formLevel } = splitByScreen(validateAddress(current, currentRules), mountedFields());
+		if (formLevel === null && Object.keys(onScreen).length === 0) return null;
+		return [{
+			code: "ADDRESS_FORM_BLOCKED",
+			message: describeStatus(block(onScreen, formLevel), blockedMessage, intl)
+		}];
+	}
+	/** Puts each refusal on the field it names, and the rest on the form: a save never fails silently. */
+	function refuse(userErrors) {
+		const errors = {};
+		const controls = mountedFields();
+		let formLevel = null;
+		for (const userError of userErrors) {
+			const name = toAddressFieldName(userError.field);
+			const onField = userError.code !== "NOT_FOUND" && userError.code !== "UNSUPPORTED_COUNTRY";
+			if (name && controls.has(name) && onField) errors[name] ??= userError.code === "MISSING_REQUIRED_FIELD" ? SERVER_REQUIRED : SERVER_INVALID;
+			else formLevel ??= toFormError(userError);
+		}
+		block(errors, formLevel);
+	}
+	function toPayload(values) {
+		const current = {
+			...seedDraft,
+			...pickEditable(values)
+		};
+		if (seed) return {
+			id: seed.id,
+			...pick(current, changedFields(current, seedDraft))
+		};
+		return {
+			country,
+			...pick(current, typedFields(current))
+		};
+	}
+	/** The form's only path to a write: FormRoot calls it when a mounted field is dirty, `settleUnsent` otherwise. */
+	async function dispatch(payload) {
+		if (!rules || pendingRef.current || switchTarget !== null) return BUSY;
+		const current = readDraft();
+		const blocked = blockInvalid(current, rules);
+		if (blocked) return blocked;
+		if (seed && changedFields(current, seedDraft).length === 0) {
+			setFieldErrors({});
+			closeForm();
+			return [];
+		}
+		setFieldErrors({});
+		setFormError(null);
+		setStatus(null);
+		const write = resolveWrite($actions, seed !== null);
+		if (!write) {
+			block({}, "saveFailed");
+			throw new Error("AccountAddressFormRoot requires $actions.address.");
+		}
+		pendingRef.current = true;
+		setWriting(true);
+		try {
+			const userErrors = await write(payload);
+			if (userErrors.length > 0) {
+				refuse(userErrors);
+				return userErrors;
+			}
+			toast.add({
+				title: successTitle({
+					edited: seed !== null,
+					addedMessage,
+					savedMessage,
+					intl
+				}),
+				type: "success"
+			});
+			if (mountedRef.current) closeForm();
+			return [];
+		} catch (error) {
+			console.error("[AccountAddressFormRoot] address write failed", loggableErrorName(error));
+			block({}, "saveFailed");
+			throw error;
+		} finally {
+			pendingRef.current = false;
+			setWriting(false);
+		}
+	}
+	/**
+	* A submit FormRoot settled without calling `dispatch`, because no mounted field is dirty. The draft
+	* can still differ from what was saved: a value written before its control mounted is that control's
+	* dirty baseline. So the save takes the same path, which writes only what changed.
+	*/
+	function settleUnsent() {
+		dispatch(toPayload(getValues(ADDRESS_NAMESPACE) ?? {})).catch(() => void 0);
+	}
+	const handlers = useRef({
+		toPayload,
+		dispatch,
+		settleUnsent
+	});
+	useLayoutEffect(() => {
+		handlers.current = {
+			toPayload,
+			dispatch,
+			settleUnsent
+		};
+	});
+	useEffect(() => registerFieldset({
+		namespace: ADDRESS_NAMESPACE,
+		getFieldNames,
+		toPayload: (values) => handlers.current.toPayload(values),
+		dispatch: (payload) => {
+			dispatched.current = true;
+			return handlers.current.dispatch(payload);
+		},
+		label: "account-address"
+	}), [registerFieldset, getFieldNames]);
+	useEffect(() => {
+		let seen = 0;
+		return subscribe({
+			formState: { submitCount: true },
+			callback: ({ submitCount = 0 }) => {
+				if (submitCount === seen) return;
+				seen = submitCount;
+				if (dispatched.current) dispatched.current = false;
+				else handlers.current.settleUnsent();
+			}
+		});
+	}, [subscribe]);
+	const selected = switchTarget ?? country;
+	const countryChoice = useMemo(() => ({
+		offer,
+		selected,
+		change,
+		lastChange
+	}), [
+		offer,
+		selected,
+		change,
+		lastChange
+	]);
+	const value = useMemo(() => ({
+		mode,
+		country,
+		rules,
+		draft,
+		fieldErrors,
+		formError,
+		pending: writing,
+		setField,
+		registerField,
+		close: closeForm,
+		countryChoice
+	}), [
+		mode,
+		country,
+		rules,
+		draft,
+		fieldErrors,
+		formError,
+		writing,
+		setField,
+		registerField,
+		closeForm,
+		countryChoice
+	]);
+	return /* @__PURE__ */ jsx(FieldsetFieldContext, {
+		value: registry,
+		children: /* @__PURE__ */ jsxs(AccountAddressFormContext, {
+			value,
+			children: [children, /* @__PURE__ */ jsx("output", {
+				ref: statusRef,
+				"aria-live": "polite",
+				"data-fs-account-address-form-status": "",
+				"data-fs-sr-only": "",
+				className: "sr-only",
+				children: describeStatus(status, blockedMessage, intl)
+			})]
+		})
+	});
+}
+function fieldErrorText(error, intl) {
+	return intl.formatMessage({ id: error.messageId }, error.values);
+}
+/** Registers the field with the form while it is on screen and returns its value. */
+function useAddressFieldValue(name) {
+	const { draft } = useAccountAddressForm();
+	const { getValues } = useFormContext();
+	const path = useFieldsetField(ADDRESS_NAMESPACE, name);
+	const [seed] = useState(() => {
+		const live = getValues(path);
+		return typeof live === "string" ? live : draft[name] ?? "";
+	});
+	return useBoundField({
+		name: path,
+		defaultValue: seed
+	}, TEXT_FIELD_VALUE).value;
+}
+/** Sets a list's option and empties the fields that read their options from it. The form's only dependent reset. */
+function chooseOption(setField, name, value, descriptors) {
+	setField(name, value);
+	for (const dependent of dependentsOf(name, descriptors)) setField(dependent, "");
+}
+function AddressTextField({ name, label, maxLength, inputMode, placeholder, className }) {
+	const { fieldErrors, setField } = useAccountAddressForm();
+	const value = useAddressFieldValue(name);
+	const intl = useIntl();
+	const error = fieldErrors[name];
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		invalid: !!error,
+		"data-fs-account-address-form-field": name,
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, { children: label }),
+			/* @__PURE__ */ jsx(Field.Control, {
+				value,
+				onChange: (event) => setField(name, event.target.value),
+				maxLength,
+				inputMode,
+				placeholder,
+				"data-fs-account-address-form-control": ""
+			}),
+			error ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: fieldErrorText(error, intl)
+			}) : null
+		]
+	});
+}
+function AddressSelectField({ name, label, options, placeholder, className, onChange }) {
+	const { fieldErrors } = useAccountAddressForm();
+	const value = useAddressFieldValue(name);
+	const intl = useIntl();
+	const errorId = useId();
+	const error = fieldErrors[name];
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-fs-account-address-form-field": name,
+		...error ? { "data-invalid": "" } : {},
+		children: [/* @__PURE__ */ jsxs(Select.Root, {
+			value,
+			onValueChange: (next) => onChange(next ?? ""),
+			children: [
+				/* @__PURE__ */ jsx(Select.Label, { children: label }),
+				/* @__PURE__ */ jsxs(Select.Trigger, {
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": error ? errorId : void 0,
+					"data-fs-account-address-form-control": "",
+					children: [/* @__PURE__ */ jsx(Select.Value, {
+						placeholder,
+						children: (value) => options.find((option) => option.value === value)?.label ?? 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,
+					label: option.label,
+					children: /* @__PURE__ */ jsx(Select.ItemText, { children: option.label })
+				}, option.value)) }) }) }) })
+			]
+		}), error ? /* @__PURE__ */ jsx("p", {
+			id: errorId,
+			"data-fs-account-address-form-field-error": "",
+			children: fieldErrorText(error, intl)
+		}) : null]
+	});
+}
+function AccountAddressFormRecipientName({ label, className }) {
+	const { rules } = useAccountAddressForm();
+	const intl = useIntl();
+	if (!rules) return null;
+	return /* @__PURE__ */ jsx(AddressTextField, {
+		name: "recipientName",
+		label: resolveAuthoredCopy(label, intl.formatMessage({ id: ACCOUNT_FIELD_LABELS.recipientName })),
+		maxLength: ACCOUNT_MAX_LENGTH.recipientName,
+		className
+	});
+}
+function AccountAddressFormReference({ label, className }) {
+	const { rules } = useAccountAddressForm();
+	const intl = useIntl();
+	if (!rules) return null;
+	return /* @__PURE__ */ jsx(AddressTextField, {
+		name: "reference",
+		label: resolveAuthoredCopy(label, intl.formatMessage({ id: ACCOUNT_FIELD_LABELS.reference })),
+		maxLength: ACCOUNT_MAX_LENGTH.reference,
+		className
+	});
+}
+/**
+* One field per descriptor the country's rules give for the draft, in the order the country's form lists them.
+* A complete postal code fills the empty state, city, neighborhood and street the shopper has not typed;
+* the fill is announced once.
+*/
+function AccountAddressFormFields({ className }) {
+	const { rules, draft, setField } = useAccountAddressForm();
+	const intl = useIntl();
+	if (!rules) return null;
+	const descriptors = addressFields(rules, draft);
+	return descriptors.map((descriptor) => {
+		const { name, control, labelId, maxLength, inputMode, options, placeholder } = descriptor;
+		const label = intl.formatMessage({ id: labelId });
+		const hint = placeholder ? intl.formatMessage({ id: placeholder.id }, placeholder.values) : void 0;
+		if (control === "select") return /* @__PURE__ */ jsx(AddressSelectField, {
+			name,
+			label,
+			options: options ?? [],
+			placeholder: hint,
+			className,
+			onChange: (value) => chooseOption(setField, name, value, descriptors)
+		}, name);
+		return /* @__PURE__ */ jsx(AddressTextField, {
+			name,
+			label,
+			maxLength,
+			inputMode,
+			placeholder: hint,
+			className
+		}, name);
+	});
+}
+function AccountAddressFormError({ unrenderedFieldMessage, notFoundMessage, unauthorizedMessage, saveFailedMessage, rulesFailedMessage, countrySwitchFailedMessage, unsupportedCountryMessage, className, ...props }) {
+	const { formError } = useAccountAddressForm();
+	const intl = useIntl();
+	if (!formError) return null;
+	const authored = {
+		unrenderedField: unrenderedFieldMessage,
+		notFound: notFoundMessage,
+		unauthorized: unauthorizedMessage,
+		saveFailed: saveFailedMessage,
+		rulesFailed: rulesFailedMessage,
+		countrySwitchFailed: countrySwitchFailedMessage,
+		unsupportedCountry: unsupportedCountryMessage
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "alert",
+		className,
+		"data-fs-account-address-form-error": formError,
+		children: resolveAuthoredCopy(authored[formError], intl.formatMessage({ id: ERROR_MESSAGE_IDS[formError] }))
+	});
+}
+function AccountAddressFormSubmit({ label, className, children, ...props }) {
+	const { country, rules, formError, pending, countryChoice } = useAccountAddressForm();
+	const intl = useIntl();
+	const switching = countryChoice.selected !== country;
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		type: "submit",
+		className,
+		disabled: rules === null || formError === "rulesFailed" || pending || switching,
+		"aria-busy": pending || void 0,
+		"data-fs-account-address-form-submit": "",
+		children: children ?? resolveAuthoredCopy(label, intl.formatMessage({ id: "fs/address-form.submit" }))
+	});
+}
+function AccountAddressFormCancel({ label, className, children, onClick, ...props }) {
+	const { close, pending } = useAccountAddressForm();
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		type: "button",
+		disabled: pending || props.disabled,
+		className,
+		onClick: (event) => {
+			onClick?.(event);
+			close();
+		},
+		"data-fs-account-address-form-cancel": "",
+		children: children ?? resolveAuthoredCopy(label, intl.formatMessage({ id: "fs/address-form.cancel" }))
+	});
+}
+const AccountAddressFormRootDefinition = defineComponent({
+	name: "AccountAddressFormRoot",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormRoot,
+	requiresContext: "session",
+	providesContext: "account-address-form",
+	actions: { address: ["create", "update"] },
+	editor: {
+		label: "Account Address Form",
+		category: "identity"
+	},
+	schema: {
+		defaultCountry: {
+			type: "string",
+			default: "BRA",
+			label: "Preferred country (ISO-3)"
+		},
+		addedMessage: {
+			type: "string",
+			label: "Address added message"
+		},
+		savedMessage: {
+			type: "string",
+			label: "Address saved message"
+		},
+		blockedMessage: {
+			type: "string",
+			label: "Save blocked message"
+		},
+		returnHref: {
+			type: "link",
+			default: { standard: "address" },
+			label: "Return page"
+		}
+	},
+	guideline: "The form that adds an address or corrects a saved one, with the fields, order and options of the address's country. Opens through AccountAddressBookAddTrigger and AccountAddressBookEditTrigger, placed by AccountAddressBookFormSlot or AccountAddressBookFormDialog. Requires a SessionRoot and a mounted ToastProvider ancestor: saving shows a toast and closes the form. On its own page (add: no ancestor; edit: inside AccountAddressRecord) leaving the form, by a save, a save with no changes or Cancel, goes to returnHref instead, so mount the ToastProvider in the layout for the toast to outlive the navigation. A new address takes defaultCountry when the store ships there or the list is unknown, else the first country the store ships to; the shopper picks another through AddressCountryControl. A saved address keeps its own country, shown as text. A save the form or the server blocks marks each field, moves focus to the first one and announces it, and keeps what was typed. With no children it renders AddressCountryControl, AccountAddressCountryNotice, RecipientName, Fields, Reference, Error, Submit and Cancel; that control gets no list there and shows defaultCountry as text, so compose AddressCountryControl explicitly to offer the choice. See account-address-book.md."
+});
+const AccountAddressFormRecipientNameDefinition = defineComponent({
+	name: "AccountAddressFormRecipientName",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormRecipientName,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Recipient Name",
+		category: "input"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Field label"
+	} },
+	guideline: "The name of the person who receives the order. Required for every country. Place it first, before AccountAddressFormFields. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormFieldsDefinition = defineComponent({
+	name: "AccountAddressFormFields",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormFields,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Fields",
+		category: "input"
+	},
+	schema: {},
+	guideline: "One field per field the address's country asks for, in the order that country's form lists them, with its labels, limits and lists: Brazil's city is a list that follows its state. Changing a list clears the fields that depend on it. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormReferenceDefinition = defineComponent({
+	name: "AccountAddressFormReference",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormReference,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Reference",
+		category: "input"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Field label"
+	} },
+	guideline: "A landmark that helps the carrier find the address. Optional. Place it after AccountAddressFormFields. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormErrorDefinition = defineComponent({
+	name: "AccountAddressFormError",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormError,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Error",
+		category: "content"
+	},
+	schema: {
+		unrenderedFieldMessage: {
+			type: "string",
+			label: "Field not shown message"
+		},
+		notFoundMessage: {
+			type: "string",
+			label: "Address gone message"
+		},
+		unauthorizedMessage: {
+			type: "string",
+			label: "Session expired message"
+		},
+		saveFailedMessage: {
+			type: "string",
+			label: "Save failed message"
+		},
+		rulesFailedMessage: {
+			type: "string",
+			label: "Form failed to load message"
+		},
+		countrySwitchFailedMessage: {
+			type: "string",
+			label: "Country change failed message"
+		},
+		unsupportedCountryMessage: {
+			type: "string",
+			label: "Country not delivered message"
+		}
+	},
+	guideline: "The error about the whole form, as an alert: a refusal on a field this form does not show, an address that no longer exists, an expired session, a failed save, a form that could not load, a country change that could not load, or a country the store doesn't deliver to. Renders nothing when there is none. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormSubmitDefinition = defineComponent({
+	name: "AccountAddressFormSubmit",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormSubmit,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Submit",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Button label"
+	} },
+	guideline: "Saves the form. Disabled until the country's rules have loaded, while a country change loads, and while a save is in flight, and marked busy then. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormCancelDefinition = defineComponent({
+	name: "AccountAddressFormCancel",
+	importPath: "@vtex/faststore/components",
+	component: AccountAddressFormCancel,
+	requiresContext: "account-address-form",
+	editor: {
+		label: "Account Address Form Cancel",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Button label"
+	} },
+	guideline: "Closes the form and drops what was typed. On its own page it goes to the returnHref of its root. Must be inside AccountAddressFormRoot."
+});
+//#endregion
+export { AccountAddressFormCancel, AccountAddressFormCancelDefinition, AccountAddressFormError, AccountAddressFormErrorDefinition, AccountAddressFormFields, AccountAddressFormFieldsDefinition, AccountAddressFormRecipientName, AccountAddressFormRecipientNameDefinition, AccountAddressFormReference, AccountAddressFormReferenceDefinition, AccountAddressFormRoot, AccountAddressFormRootDefinition, AccountAddressFormSubmit, AccountAddressFormSubmitDefinition };
+
+//# sourceMappingURL=account-address-form.js.map