@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/cart-destination/cart-destination.d.ts

@@ -1,8 +1,9 @@
-import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ShippingAddressUpdateErrorEntity } from "../../sdk/shipping/shipping-operations.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
+import { CountryRules } from "../../sdk/address/types.js";
 import { ComponentPropsWithRef, ReactNode } from "react";
 //#region src/matter/cart-destination/cart-destination.d.ts
 export declare const CartDestinationValueContent: {
@@ -72,7 +73,7 @@ export declare const CartDestinationCancelContent: {
 export declare const CartDestinationErrorContent: {
   readonly id: "cart-destination-error";
   readonly title: "Cart Destination Error";
-  readonly description: "Message shown when the destination write fails.";
+  readonly description: "Messages shown when the destination write is refused, one per error code the shopper can act on.";
   readonly schema: {
     readonly type: "object";
     readonly additionalProperties: false;
@@ -80,6 +81,16 @@ export declare const CartDestinationErrorContent: {
       readonly genericMessage: {
         readonly type: "string";
         readonly title: "Failure message";
+        readonly description: "Shown for a network failure and for every refusal the shopper cannot act on.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to update the delivery location. Please try again.";
+      };
+      readonly invalidPostalCodeMessage: {
+        readonly type: "string";
+        readonly title: "Invalid postal code message";
+        readonly description: "Shown when the server rejects the postal code.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a valid postal code.";
       };
     };
   };
@@ -115,7 +126,7 @@ export type CartDestinationValueProps = Omit<ComponentPropsWithRef<'span'>, 'chi
   /** Merchant-authored copy; wins over the prop when present. */
   $content?: ContentValue<typeof CartDestinationValueContent>;
 };
-export type CartDestinationUnsetProps = ComponentPropsWithRef<'div'>;
+export type CartDestinationUnsetProps = ComponentPropsWithRef<'button'>;
 export type CartDestinationChangeProps = ComponentPropsWithRef<'button'> & {
   label?: string;
   $content?: ContentValue<typeof CartDestinationChangeContent>;
@@ -123,11 +134,10 @@ export type CartDestinationChangeProps = ComponentPropsWithRef<'button'> & {
 export type CartDestinationFormProps = ComponentPropsWithRef<'form'>;
 export type CartDestinationPostalCodeControlProps = {
   className?: string;
-  /** Mask template; defaults to the one of the cart's country. */
-  mask?: string;
   label?: string;
+  /** Wins over the example the country's rules give. */
   placeholder?: string;
-  /** The field's own message for a draft that is incomplete or fails the country's pattern. */
+  /** The field's own message for a draft that fails the country's postal code rules. */
   invalidMessage?: string;
 };
 export type CartDestinationSubmitProps = ComponentPropsWithRef<'button'> & {
@@ -139,9 +149,8 @@ export type CartDestinationCancelProps = ComponentPropsWithRef<'button'> & {
   label?: string;
   $content?: ContentValue<typeof CartDestinationCancelContent>;
 };
-/** Children are omitted: what this renders is the write's own error, never authored content. */
-export type CartDestinationErrorProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
-  genericMessage?: string;
+/** Children are omitted: what this renders is the message for the write's error code. */
+export type CartDestinationErrorProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
   $content?: ContentValue<typeof CartDestinationErrorContent>;
 };
 export type CartDestinationContextValue = Readonly<{
@@ -160,18 +169,20 @@ export type CartDestinationContextValue = Readonly<{
   cancel: () => void;
   draft: string;
   setDraft: (value: string) => void;
-  /** The draft is complete, valid, different from the current one, and no write is pending. */
+  /**
+   * The country's rules for edit mode. `null` while they load, and when the load failed or the
+   * country is outside the library: the draft is then free text and nothing validates it.
+   */
+  rules: CountryRules | null;
+  /** The rules are still loading: the field and Submit stay disabled. */
+  rulesLoading: boolean;
+  /** The draft is valid for the country, different from the current one, and no write is pending. */
   canSubmit: boolean;
   pending: boolean;
   errors: readonly ShippingAddressUpdateErrorEntity[];
   /** The last submit was refused locally. */
   invalid: boolean;
   submit: () => void;
-  /**
-   * The postal code control reports the mask it renders (`null` on unmount), so the root validates the
-   * draft against the same one. Without a control the root uses the country's mask.
-   */
-  registerMask: (mask: string | null) => void;
 }>;
 /**
  * Read the destination and the edit-mode state from the nearest `CartDestinationRoot`. Throws outside
@@ -181,7 +192,7 @@ export declare function useCartDestination(): CartDestinationContextValue;
 export declare const CartDestinationRootDefinition: ComponentDefinition<CartDestinationRootProps>;
 export declare const CartDestinationReadDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const CartDestinationValueDefinition: ComponentDefinition<CartDestinationValueProps>;
-export declare const CartDestinationUnsetDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CartDestinationUnsetDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
 export declare const CartDestinationChangeDefinition: ComponentDefinition<CartDestinationChangeProps>;
 export declare const CartDestinationFormDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
 export declare const CartDestinationPostalCodeControlDefinition: ComponentDefinition<CartDestinationPostalCodeControlProps>;
@@ -199,13 +210,13 @@ export declare const CartDestinationErrorDefinition: ComponentDefinition<CartDes
 export declare function CartDestinationRoot({ defaultCountry, $data: $dataProp, $actions: $actionsProp, className, children, ...props }: CartDestinationRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartDestinationRead({ className, children, ...props }: CartDestinationReadProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function CartDestinationValue({ prefix, $content, className, ...props }: CartDestinationValueProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function CartDestinationUnset({ className, children, ...props }: CartDestinationUnsetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CartDestinationUnset({ className, children, onClick, ...props }: CartDestinationUnsetProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function CartDestinationChange({ label, $content, className, children, ...props }: CartDestinationChangeProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartDestinationForm({ className, children, ...props }: CartDestinationFormProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function CartDestinationPostalCodeControl({ className, mask, label, placeholder, invalidMessage }: Readonly<CartDestinationPostalCodeControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function CartDestinationPostalCodeControl({ className, label, placeholder, invalidMessage }: Readonly<CartDestinationPostalCodeControlProps>): import("react/jsx-runtime").JSX.Element;
 export declare function CartDestinationSubmit({ label, pendingLabel, $content, className, children, ...props }: CartDestinationSubmitProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartDestinationCancel({ label, $content, className, children, ...props }: CartDestinationCancelProps): import("react/jsx-runtime").JSX.Element;
-export declare function CartDestinationError({ genericMessage, $content, className, ...props }: CartDestinationErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CartDestinationError({ $content, $locale, className, ...props }: CartDestinationErrorProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const CartDestination: {
   Root: typeof CartDestinationRoot;
   Read: typeof CartDestinationRead;

package/dist/matter/cart-destination/cart-destination.js

@@ -2,12 +2,19 @@
 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 { loggableErrorName } from "../../utils/loggable-error-name.js";
 import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
-import { getCountryDescriptor } from "../shipping-address/country-descriptors.js";
+import { addressFields } from "../../sdk/address/address-fields.js";
+import { loadCountryRules } from "../../sdk/address/country-rules.js";
+import { validateAddress } from "../../sdk/address/validate-address.js";
+import { normalizePostalCode } from "../../sdk/address/postal-code.js";
 import { awaitCartWrites } from "../../sdk/cart/write-gate.js";
-import { PostalCodeField, isPostalCodeComplete } from "../../particles/postal-code-field/postal-code-field.js";
+import { Input } from "../../particles/input/input.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/cart-destination/cart-destination.tsx
@@ -88,14 +95,26 @@ const CartDestinationCancelContent = defineContentType({
 const CartDestinationErrorContent = defineContentType({
 	id: "cart-destination-error",
 	title: "Cart Destination Error",
-	description: "Message shown when the destination write fails.",
+	description: "Messages shown when the destination write is refused, one per error code the shopper can act on.",
 	schema: {
 		type: "object",
 		additionalProperties: false,
-		properties: { genericMessage: {
-			type: "string",
-			title: "Failure message"
-		} }
+		properties: {
+			genericMessage: {
+				type: "string",
+				title: "Failure message",
+				description: "Shown for a network failure and for every refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Unable to update the delivery location. Please try again."
+			},
+			invalidPostalCodeMessage: {
+				type: "string",
+				title: "Invalid postal code message",
+				description: "Shown when the server rejects the postal code.",
+				format: "icu-message",
+				messageSource: "Enter a valid postal code."
+			}
+		}
 	}
 });
 const CART_DESTINATION_CONTEXT_UNSET = Symbol("CartDestinationContextUnset");
@@ -112,24 +131,18 @@ function useCartDestination() {
 /** Whether a `CartDestinationForm` encloses the subtree, so `CartDestinationSubmit` knows its form owner. */
 const CartDestinationFormContext = createContext(false);
 const DEFAULT_COUNTRY = "BRA";
-/** Mask per country; the field's own default (the Brazilian CEP) covers any country not listed. */
-const DEFAULT_MASK = "99999-999";
-const COUNTRY_MASKS = {
-	BRA: DEFAULT_MASK,
-	USA: "99999|99999-9999"
-};
-function maskFor(country) {
-	return COUNTRY_MASKS[country] ?? DEFAULT_MASK;
+/** Whether the country's rules refuse the value. A country the library does not cover refuses nothing. */
+function isPostalCodeRefused(value, rules) {
+	if (!rules?.covered) return false;
+	return validateAddress({ postalCode: value.trim() }, rules).postalCode !== void 0;
 }
-/** Letters and digits only, so `01310100` and `01310-100` compare equal. */
-function normalizePostalCode(value) {
-	return value.replaceAll(/[^0-9A-Za-z]/g, "").toUpperCase();
+/** The form the write sends and the comparison uses: the country's own, else the trimmed text. */
+function toStoredPostalCode(value, rules) {
+	return rules ? normalizePostalCode(value, rules) : value.trim();
 }
-function isDraftValid(draft, country, mask) {
-	if (!isPostalCodeComplete(draft, mask)) return false;
-	const pattern = getCountryDescriptor(country)?.fields.find((field) => field.name === "postalCode")?.rule?.pattern;
-	if (!pattern) return true;
-	return (pattern instanceof RegExp ? pattern : pattern.value).test(draft);
+function isDraftSubmittable(draft, current, rules) {
+	if (draft.trim() === "" || isPostalCodeRefused(draft, rules)) return false;
+	return toStoredPostalCode(draft, rules) !== toStoredPostalCode(current ?? "", rules);
 }
 const CartDestinationRootDefinition = defineComponent({
 	name: "CartDestinationRoot",
@@ -188,7 +201,7 @@ const CartDestinationUnsetDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "Renders its children only once the destination resolved and none is set. Place the store-authored invitation (for example a Text reading \"Informe seu CEP\") inside it, within CartDestinationRead. Must be inside CartDestinationRoot."
+	guideline: "A button that opens edit mode when pressed, like CartDestinationChange, with aria-expanded tied to the mode. Renders only once the destination resolved and none is set. Its children are the store-authored invitation (for example an Icon and a Text reading \"Informe seu CEP\"). Never place a CartDestinationChange, a link or another button inside it: a button cannot hold another. The regular CartDestinationChange repeats it, so the store usually hides that one while this shows. Place it within CartDestinationRead. Must be inside CartDestinationRoot."
 });
 const CartDestinationChangeDefinition = defineComponent({
 	name: "CartDestinationChange",
@@ -228,10 +241,6 @@ const CartDestinationPostalCodeControlDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {
-		mask: {
-			type: "string",
-			label: "Mask pattern"
-		},
 		label: {
 			type: "string",
 			label: "Label"
@@ -245,7 +254,7 @@ const CartDestinationPostalCodeControlDefinition = defineComponent({
 			label: "Invalid-value message"
 		}
 	},
-	guideline: "The postal code input of edit mode, empty each time edit mode opens and focused on open. The mask follows the cart country unless set. Must be inside CartDestinationForm."
+	guideline: "The postal code input of edit mode, empty each time edit mode opens and focused once enabled. A plain text field whose limits and example come from the cart country's postal code rules; it stays disabled while they load, and a country the rules do not cover takes free text. Must be inside CartDestinationForm."
 });
 const CartDestinationSubmitDefinition = defineComponent({
 	name: "CartDestinationSubmit",
@@ -267,7 +276,7 @@ const CartDestinationSubmitDefinition = defineComponent({
 			label: "Pending label"
 		}
 	},
-	guideline: "Writes the typed postal code. Disabled until it is complete for the country, valid and different from the current one, and while a write is pending (aria-busy). Must be inside CartDestinationForm."
+	guideline: "Writes the typed postal code. Disabled until the country's rules have loaded, the typed code is valid for the country (any text for a country the rules do not cover) and different from the current one, and while a write is pending (aria-busy). Must be inside CartDestinationForm."
 });
 const CartDestinationCancelDefinition = defineComponent({
 	name: "CartDestinationCancel",
@@ -295,11 +304,8 @@ const CartDestinationErrorDefinition = defineComponent({
 		label: "Cart Destination Error",
 		category: "content"
 	},
-	schema: { genericMessage: {
-		type: "string",
-		label: "Failure message"
-	} },
-	guideline: "Announces why the destination write failed, as an alert, and renders nothing otherwise. Author one message covering a refused postal code and a network failure: both reach the client as the same error. Must be inside CartDestinationForm."
+	schema: {},
+	guideline: "Announces why the destination write failed, as an alert, and renders nothing otherwise. Words each error code from its $content: invalidPostalCodeMessage for a postal code the server rejects, genericMessage for a network failure and every refusal the shopper cannot act on. A postal code the platform refuses upstream also reaches the client as a network failure, so write genericMessage to cover it. An unknown code also shows genericMessage. Must be inside CartDestinationForm."
 });
 /**
 * Reads the cart destination reactively and publishes it, the edit-mode flag, the draft and the write
@@ -326,19 +332,47 @@ function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataPro
 	const rootRef = useRef(null);
 	const wasEditingRef = useRef(false);
 	/**
-	* Opening edit mode moves focus to the field; leaving it moves focus back to the change control,
-	* which only mounts once read mode renders again, hence an effect on the flag rather than a call at
-	* the event.
+	* Leaving edit mode moves focus back to the control that opens it, which only mounts once read mode
+	* renders again, hence an effect on the flag rather than a call at the event. With no destination that
+	* is the invitation; the change control is hidden then, so the invitation wins when both exist.
+	* Opening it focuses the field, which `CartDestinationPostalCodeControl` does once the rules have loaded and enabled it.
 	*/
 	useEffect(() => {
 		if (wasEditingRef.current === editing) return;
 		wasEditingRef.current = editing;
-		const selector = editing ? "[data-fs-postal-code-field-input]" : "[data-fs-cart-destination-change]";
-		rootRef.current?.querySelector(selector)?.focus();
+		if (editing) return;
+		(rootRef.current?.querySelector("[data-fs-cart-destination-unset]") ?? rootRef.current?.querySelector("[data-fs-cart-destination-change]"))?.focus();
 	}, [editing]);
-	const [registeredMask, setRegisteredMask] = useState(null);
-	const mask = registeredMask ?? maskFor(country);
-	const canSubmit = !pending && isDraftValid(draft, country, mask) && normalizePostalCode(draft) !== normalizePostalCode(postalCode ?? "");
+	const [loaded, setLoaded] = useState(null);
+	useEffect(() => {
+		if (!editing) {
+			setLoaded((current) => current?.rules ? current : null);
+			return;
+		}
+		let active = true;
+		loadCountryRules(country).then((rules) => {
+			if (active) setLoaded({
+				country,
+				rules
+			});
+		}, (error) => {
+			if (!active) return;
+			console.warn("[CartDestinationRoot] country rules failed to load", {
+				country,
+				error: loggableErrorName(error)
+			});
+			setLoaded({
+				country,
+				rules: null
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [editing, country]);
+	const rulesLoading = editing && loaded?.country !== country;
+	const rules = loaded?.country === country ? loaded.rules : null;
+	const canSubmit = !pending && !rulesLoading && isDraftSubmittable(draft, postalCode, rules);
 	const startEditing = useCallback(() => setEditing(true), []);
 	const cancel = useCallback(() => {
 		setEditing(false);
@@ -365,7 +399,7 @@ function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataPro
 		setErrors([]);
 		setInvalid(false);
 		awaitCartWrites().then(() => setAddress({
-			postalCode: draft,
+			postalCode: toStoredPostalCode(draft, rules),
 			country
 		})).then((writeErrors) => {
 			if (writeErrors.length > 0) {
@@ -382,7 +416,8 @@ function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataPro
 		$actions,
 		canSubmit,
 		draft,
-		country
+		country,
+		rules
 	]);
 	const value = useMemo(() => ({
 		postalCode,
@@ -395,12 +430,13 @@ function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataPro
 		cancel,
 		draft,
 		setDraft: updateDraft,
+		rules,
+		rulesLoading,
 		canSubmit,
 		pending,
 		errors,
 		invalid,
-		submit,
-		registerMask: setRegisteredMask
+		submit
 	}), [
 		postalCode,
 		address?.city,
@@ -412,6 +448,8 @@ function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataPro
 		cancel,
 		draft,
 		updateDraft,
+		rules,
+		rulesLoading,
 		canSubmit,
 		pending,
 		errors,
@@ -477,11 +515,17 @@ function CartDestinationValue({ prefix, $content, className, ...props }) {
 		]
 	});
 }
-function CartDestinationUnset({ className, children, ...props }) {
-	const { postalCode, loading } = useCartDestination();
+function CartDestinationUnset({ className, children, onClick, ...props }) {
+	const { postalCode, loading, editing, startEditing } = useCartDestination();
 	if (loading || postalCode != null) return null;
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("button", {
 		...props,
+		type: "button",
+		onClick: (event) => {
+			onClick?.(event);
+			startEditing();
+		},
+		"aria-expanded": editing,
 		className,
 		"data-fs-cart-destination-unset": "",
 		children
@@ -522,15 +566,21 @@ function CartDestinationForm({ className, children, ...props }) {
 		})
 	});
 }
-function CartDestinationPostalCodeControl({ className, mask, label, placeholder, invalidMessage }) {
-	const { country, draft, setDraft, errors, invalid, pending, registerMask } = useCartDestination();
+function CartDestinationPostalCodeControl({ className, label, placeholder, invalidMessage }) {
+	const { draft, setDraft, errors, invalid, pending, rules, rulesLoading } = useCartDestination();
 	const rootRef = useRef(null);
+	const focusedOnOpenRef = useRef(false);
+	const [blurInvalid, setBlurInvalid] = useState(false);
 	const refused = errors.length > 0;
-	const effectiveMask = mask ?? maskFor(country);
+	const descriptor = useMemo(() => rules ? addressFields(rules, {}).find(({ name }) => name === "postalCode") : void 0, [rules]);
+	/** The country's example postal code: address data, not a message. */
+	const example = descriptor?.placeholder?.values.example;
+	/** A disabled input cannot take focus, so opening edit mode focuses the field once the rules enable it. */
 	useEffect(() => {
-		registerMask(effectiveMask);
-		return () => registerMask(null);
-	}, [effectiveMask, registerMask]);
+		if (rulesLoading || focusedOnOpenRef.current) return;
+		focusedOnOpenRef.current = true;
+		rootRef.current?.querySelector("[data-fs-postal-code-field-input]")?.focus();
+	}, [rulesLoading]);
 	/**
 	* Disabling the input while the write is in flight drops focus to the body, so a refusal otherwise
 	* lands with nothing focused. Waits for `pending` to clear: focusing a disabled input is a no-op.
@@ -539,18 +589,42 @@ function CartDestinationPostalCodeControl({ className, mask, label, placeholder,
 		if (!refused || pending) return;
 		rootRef.current?.querySelector("[data-fs-postal-code-field-input]")?.focus();
 	}, [refused, pending]);
-	return /* @__PURE__ */ jsx(PostalCodeField, {
+	function handleChange(event) {
+		setBlurInvalid(false);
+		setDraft(event.target.value);
+	}
+	const showInvalid = invalid || refused || blurInvalid;
+	return /* @__PURE__ */ jsxs(Field.Root, {
 		ref: rootRef,
 		className,
+		name: "postalCode",
+		invalid: showInvalid,
+		disabled: pending || rulesLoading,
+		"data-fs-postal-code-field": "",
 		"data-fs-cart-destination-postal-code-control": "",
-		mask: effectiveMask,
-		label,
-		placeholder,
-		errorMessage: refused ? void 0 : invalidMessage,
-		value: draft,
-		onValueChange: setDraft,
-		invalid: invalid || refused,
-		disabled: pending
+		children: [
+			label ? /* @__PURE__ */ jsx(Field.Label, {
+				"data-fs-postal-code-field-label": "",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(Input, {
+				"data-fs-postal-code-field-input": "",
+				type: "text",
+				name: "postalCode",
+				autoComplete: "postal-code",
+				value: draft,
+				maxLength: descriptor?.maxLength,
+				inputMode: descriptor?.inputMode,
+				placeholder: placeholder ?? example,
+				onChange: handleChange,
+				onBlur: () => setBlurInvalid(draft.trim() !== "" && isPostalCodeRefused(draft, rules))
+			}),
+			showInvalid && !refused && invalidMessage ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				"data-fs-postal-code-field-error": "",
+				children: invalidMessage
+			}) : null
+		]
 	});
 }
 function CartDestinationSubmit({ label, pendingLabel, $content, className, children, ...props }) {
@@ -583,16 +657,32 @@ function CartDestinationCancel({ label, $content, className, children, ...props
 		children: children ?? resolvedLabel
 	});
 }
-function CartDestinationError({ genericMessage, $content, className, ...props }) {
+/**
+* The message for each code `shippingAddressUpdate` can return, plus the client-minted transport failure.
+* This form writes only the postal code and the country, so every other refusal is one the shopper
+* cannot act on here.
+*/
+const CART_DESTINATION_ERROR_FIELDS = {
+	INVALID_POSTAL_CODE: "invalidPostalCodeMessage",
+	INVALID_ADDRESS: "genericMessage",
+	INVALID_COUNTRY_CODE: "genericMessage",
+	MISSING_RECIPIENT_NAME: "genericMessage",
+	INVALID_SAVED_ADDRESS_ID: "genericMessage",
+	MISSING_CART_CONTEXT: "genericMessage",
+	CART_NOT_FOUND: "genericMessage",
+	NETWORK_ERROR: "genericMessage"
+};
+function CartDestinationError({ $content, $locale, className, ...props }) {
 	const { errors } = useCartDestination();
-	if (errors.length === 0) return null;
-	const authored = pickAuthored($content?.genericMessage, genericMessage);
+	const { format } = useMessageFormatter(CartDestinationErrorContent, $content);
+	const [firstError] = errors;
+	if (!firstError) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		role: "alert",
 		className,
 		"data-fs-cart-destination-error": "",
-		children: authored ?? errors[0]?.message
+		children: formatErrorCode(CartDestinationErrorContent, CART_DESTINATION_ERROR_FIELDS, firstError, format, "genericMessage")
 	});
 }
 const CartDestination = {
@@ -608,6 +698,6 @@ const CartDestination = {
 	Error: CartDestinationError
 };
 //#endregion
-export { CartDestination, CartDestinationCancel, CartDestinationCancelContent, CartDestinationCancelDefinition, CartDestinationChange, CartDestinationChangeContent, CartDestinationChangeDefinition, CartDestinationError, CartDestinationErrorContent, CartDestinationErrorDefinition, CartDestinationForm, CartDestinationFormDefinition, CartDestinationPostalCodeControl, CartDestinationPostalCodeControlDefinition, CartDestinationRead, CartDestinationReadDefinition, CartDestinationRoot, CartDestinationRootDefinition, CartDestinationSubmit, CartDestinationSubmitContent, CartDestinationSubmitDefinition, CartDestinationUnset, CartDestinationUnsetDefinition, CartDestinationValue, CartDestinationValueContent, CartDestinationValueDefinition, useCartDestination };
+export { CART_DESTINATION_ERROR_FIELDS, CartDestination, CartDestinationCancel, CartDestinationCancelContent, CartDestinationCancelDefinition, CartDestinationChange, CartDestinationChangeContent, CartDestinationChangeDefinition, CartDestinationError, CartDestinationErrorContent, CartDestinationErrorDefinition, CartDestinationForm, CartDestinationFormDefinition, CartDestinationPostalCodeControl, CartDestinationPostalCodeControlDefinition, CartDestinationRead, CartDestinationReadDefinition, CartDestinationRoot, CartDestinationRootDefinition, CartDestinationSubmit, CartDestinationSubmitContent, CartDestinationSubmitDefinition, CartDestinationUnset, CartDestinationUnsetDefinition, CartDestinationValue, CartDestinationValueContent, CartDestinationValueDefinition, useCartDestination };
 
 //# sourceMappingURL=cart-destination.js.map