@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/installments/installments-select.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
@@ -16,27 +17,108 @@ export type InstallmentsSelectData = {
     count: number;
   } | null;
 } | null;
-export type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
-  /** Placeholders `{count}` / `{value}`, matching `Installments`'/`PaymentSummary`'s convention. */
-  installmentTemplate?: string;
-  /** Appended when a tier's `interestRate` is `0`. */
-  interestFreeLabel?: string;
-  /** Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`. */
-  interestTemplate?: string;
-  /**
-   * Accessible name for the control, rendered as `Select.Label` (Decision 13, always renders).
-   * Resolved through `resolveAuthoredCopy` (T38): an authored empty or whitespace-only string falls
-   * back to the default rather than rendering a nameless combobox.
-   */
-  label?: string;
-  /** Shown on the closed control when the bound count matches no rendered tier (Decision 6/FR-8). */
-  placeholder?: string;
+export declare const InstallmentsSelectContent: {
+  readonly id: "installments-select";
+  readonly title: "Installments Select";
+  readonly description: "Copy for the installment options, the control label, its placeholder and a refused pick.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly installmentTemplate: {
+        readonly type: "string";
+        readonly title: "Installment";
+        readonly description: "`value` is the formatted per-installment value.";
+        readonly format: "icu-message";
+        readonly messageSource: "{count}x of {value}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly count: {
+              readonly type: "integer";
+            };
+            readonly value: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly count: 3;
+          readonly value: "$35.00";
+        };
+      };
+      readonly interestFreeLabel: {
+        readonly type: "string";
+        readonly title: "Interest-free label";
+        readonly description: "Appended when a tier is interest-free.";
+        readonly format: "icu-message";
+        readonly messageSource: "interest-free";
+      };
+      readonly interestTemplate: {
+        readonly type: "string";
+        readonly title: "Interest";
+        readonly description: "Appended when a tier is not interest-free. `rate` is the formatted percentage: an order form rate of 100 is `1`.";
+        readonly format: "icu-message";
+        readonly messageSource: "{rate}% interest";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly rate: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly rate: "1.5";
+        };
+      };
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly description: "The control's visible accessible name.";
+        readonly format: "icu-message";
+        readonly messageSource: "Installments";
+      };
+      readonly placeholder: {
+        readonly type: "string";
+        readonly title: "Placeholder";
+        readonly description: "Shown on the closed control when the bound count matches no rendered tier.";
+        readonly format: "icu-message";
+        readonly messageSource: "Select an installment plan";
+      };
+      readonly invalidInstallmentMessage: {
+        readonly type: "string";
+        readonly title: "Invalid installment message";
+        readonly description: "Shown when the picked installment plan is no longer offered.";
+        readonly format: "icu-message";
+        readonly messageSource: "This installment plan is no longer available. Choose another one.";
+      };
+      readonly missingMethodMessage: {
+        readonly type: "string";
+        readonly title: "Missing payment method message";
+        readonly description: "Shown when an installment plan is picked before a payment method.";
+        readonly format: "icu-message";
+        readonly messageSource: "Choose a payment method before choosing an installment plan.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Selection failure message";
+        readonly description: "Shown when a pick fails: a network failure or a fault the shopper cannot fix.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to select the installment plan. Please try again.";
+      };
+    };
+  };
+};
+export type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
+  /** Merchant-authored copy: the option template, the interest suffixes, the label, the placeholder and the error. */
+  $content?: ContentValue<typeof InstallmentsSelectContent>;
   /** `InstallmentsSelectData` slice forwarded by the reactive runtime. */
   $data?: InstallmentsSelectData;
   /** Compiler-injected action surface; carries `payment.setInstallments`. */
   $actions?: ComponentActions;
 };
 export declare const InstallmentsSelectDefinition: ComponentDefinition<InstallmentsSelectProps>;
-export declare function InstallmentsSelect({ installmentTemplate, interestFreeLabel, interestTemplate, label, placeholder, $data, $actions: $actionsProp, className, ...props }: InstallmentsSelectProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function InstallmentsSelect({ $content, $locale, $data, $actions: $actionsProp, className, ...props }: InstallmentsSelectProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=installments-select.d.ts.map

package/dist/matter/installments/installments-select.js

@@ -1,18 +1,49 @@
 "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 { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { Select } from "../../particles/select/select.js";
 import { useInstallmentsSelection } from "./use-installments-selection.js";
 import { installmentLabel } from "./installments.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const InstallmentsSelectDefinition = defineComponent({
-	name: "InstallmentsSelect",
-	importPath: "@vtex/faststore/components",
-	component: InstallmentsSelect,
-	fragment: `
+//#region src/matter/installments/installments-select.tsx
+/**
+* `InstallmentsSelect` matter (T90, specs/render-installments-as-a-radio-group.md;
+* docs/features/credit-card/rfc.md § D4, "a radio/select"). The collapsed sibling of `Installments`:
+* the same installment tiers, the same server-bound selection, and the same write path, rendered as a
+* single closed Base UI Select control instead of a stacked `RadioGroup` — for a narrow payment
+* column, a drawer, or a mobile checkout where twelve stacked rows do not fit (Decision 1: a second
+* registered component, never a rendering prop on `Installments`).
+*
+* Reads and dispatches through `useInstallmentsSelection()` — the same engine `Installments` uses —
+* so matching, tier resolution, state derivation, the BIN-confirmation pending gate, and the dispatch
+* itself cannot drift between the two surfaces (Decision 3). Formats each option with the same
+* `installmentLabel` function the radio surface uses (FR-5), driven by the same three message fields,
+* so a store moving between surfaces carries its copy across unchanged.
+*
+* Declares its own `fragment InstallmentsSelectData on Query`, selection-set-identical to
+* `InstallmentsData` under a distinct name (Decision 4) — two registered components must not share one
+* fragment *name*, which would collide once both sit on a page.
+*
+* The popup is composed inside `Select.Portal`, teleported to `<body>` (Decision 5, reversing this
+* spec's own first draft): both shipped `Select` consumers (`billing-address.tsx`, `shipping-address.tsx`)
+* do the same, and the payment controller composes this leaf inside overlay popups where the portal's
+* clipping protection matters. The accepted cost — a store's descendant-selector styling and compound
+* swatches cannot reach the popup's internals — is recorded there, not solved here.
+*
+* The closed control's text is resolved locally from this component's own `tiers` (Decision 6), never
+* from Base UI's automatic item-label lookup, so it is correct before the popup has ever been opened;
+* a bound count matching no rendered tier shows the authorable `placeholder` instead of a fabricated
+* label (FR-8). `Select.Label` always renders (Decision 13), giving the control a programmatic
+* accessible name (FR-14) with no mode prop — the FPM forbids a `showX` switch inside one component. No
+* `modal` prop is authored (Decision 14): the particle's own default (`true`) is inherited unchanged,
+* matching both shipped consumers.
+*/
+const fragment = `
   fragment InstallmentsSelectData on Query {
     payment {
       __typename
@@ -29,6 +60,7 @@ const InstallmentsSelectDefinition = defineComponent({
             currencyCode
           }
           interestRate
+          interestFree
         }
       }
       selectedInstallment {
@@ -37,43 +69,117 @@ const InstallmentsSelectDefinition = defineComponent({
       }
     }
   }
-`,
+`;
+const InstallmentsSelectContent = defineContentType({
+	id: "installments-select",
+	title: "Installments Select",
+	description: "Copy for the installment options, the control label, its placeholder and a refused pick.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			installmentTemplate: {
+				type: "string",
+				title: "Installment",
+				description: "`value` is the formatted per-installment value.",
+				format: "icu-message",
+				messageSource: "{count}x of {value}",
+				messageArguments: {
+					type: "object",
+					properties: {
+						count: { type: "integer" },
+						value: { type: "string" }
+					}
+				},
+				messageExample: {
+					count: 3,
+					value: "$35.00"
+				}
+			},
+			interestFreeLabel: {
+				type: "string",
+				title: "Interest-free label",
+				description: "Appended when a tier is interest-free.",
+				format: "icu-message",
+				messageSource: "interest-free"
+			},
+			interestTemplate: {
+				type: "string",
+				title: "Interest",
+				description: "Appended when a tier is not interest-free. `rate` is the formatted percentage: an order form rate of 100 is `1`.",
+				format: "icu-message",
+				messageSource: "{rate}% interest",
+				messageArguments: {
+					type: "object",
+					properties: { rate: { type: "string" } }
+				},
+				messageExample: { rate: "1.5" }
+			},
+			label: {
+				type: "string",
+				title: "Label",
+				description: "The control's visible accessible name.",
+				format: "icu-message",
+				messageSource: "Installments"
+			},
+			placeholder: {
+				type: "string",
+				title: "Placeholder",
+				description: "Shown on the closed control when the bound count matches no rendered tier.",
+				format: "icu-message",
+				messageSource: "Select an installment plan"
+			},
+			invalidInstallmentMessage: {
+				type: "string",
+				title: "Invalid installment message",
+				description: "Shown when the picked installment plan is no longer offered.",
+				format: "icu-message",
+				messageSource: "This installment plan is no longer available. Choose another one."
+			},
+			missingMethodMessage: {
+				type: "string",
+				title: "Missing payment method message",
+				description: "Shown when an installment plan is picked before a payment method.",
+				format: "icu-message",
+				messageSource: "Choose a payment method before choosing an installment plan."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Selection failure message",
+				description: "Shown when a pick fails: a network failure or a fault the shopper cannot fix.",
+				format: "icu-message",
+				messageSource: "Unable to select the installment plan. Please try again."
+			}
+		}
+	}
+});
+/**
+* The message for each code an installment pick can return. Same codes and fields as `INSTALLMENTS_ERROR_FIELDS`. A code this map does not
+* know shows genericErrorMessage.
+*/
+const INSTALLMENTS_SELECT_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	MISSING_PAYMENT_METHOD_SELECTION: "missingMethodMessage",
+	INVALID_INSTALLMENT_COUNT: "invalidInstallmentMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
+const InstallmentsSelectDefinition = defineComponent({
+	name: "InstallmentsSelect",
+	importPath: "@vtex/faststore/components",
+	component: InstallmentsSelect,
+	fragment,
 	fetchStrategy: "reactive",
 	requiresContext: "payment",
 	actions: { payment: ["setInstallments"] },
 	docPath: "./installments.md",
+	content: InstallmentsSelectContent,
 	editor: {
 		label: "Installments Select",
 		category: "commerce"
 	},
-	schema: {
-		installmentTemplate: {
-			type: "string",
-			default: "{count}x of {value}",
-			label: "Installment template"
-		},
-		interestFreeLabel: {
-			type: "string",
-			default: "interest-free",
-			label: "Interest-free label"
-		},
-		interestTemplate: {
-			type: "string",
-			default: "{rate}% interest",
-			label: "Interest template"
-		},
-		label: {
-			type: "string",
-			default: "Installments",
-			label: "Accessible label"
-		},
-		placeholder: {
-			type: "string",
-			default: "Select an installment plan",
-			label: "Placeholder"
-		}
-	},
-	guideline: "Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md."
+	schema: {},
+	guideline: "Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Its copy comes from the $content fields installmentTemplate, interestFreeLabel, interestTemplate, label and placeholder. Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Renders nothing until a new card's entry is valid (length, Luhn, expiration, security code) or a saved card is selected, and nothing when no payment method the store offers carries a tier above 1x. Picking an option dispatches $actions.payment.setInstallments; the mutation returns the cart, whose total is the greater of the order form's value and the selected payment's value, so a CartTotal elsewhere on the page shows the interest-inclusive total from the normalized cache. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md."
 });
 /**
 * Resolves `Select.Root`'s `onValueChange` value into a dispatch, or a no-op. Exported so a test can
@@ -88,14 +194,20 @@ function handleInstallmentSelectValueChange(value, selectInstallment) {
 	if (value === null) return;
 	selectInstallment(Number(value));
 }
-function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", interestFreeLabel = "interest-free", interestTemplate = "{rate}% interest", label, placeholder = "Select an installment plan", $data, $actions: $actionsProp, className, ...props }) {
+function InstallmentsSelect({ $content, $locale, $data, $actions: $actionsProp, className, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
 	const { locale } = useStorefrontContext();
-	const { tiers, selectedCount, state, isPending, selectionError, selectInstallment, placing, cardPaymentCollapsed } = useInstallmentsSelection({
+	const { format } = useMessageFormatter(InstallmentsSelectContent, $content);
+	const messages = {
+		installment: (args) => format("installmentTemplate", args),
+		interestFree: () => format("interestFreeLabel"),
+		interest: (args) => format("interestTemplate", args)
+	};
+	const { tiers, selectedCount, state, isPending, selectionError, selectInstallment, placing, cardPaymentCollapsed, visible } = useInstallmentsSelection({
 		$data,
 		$actions
 	});
-	if (cardPaymentCollapsed) return null;
+	if (cardPaymentCollapsed || !visible) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className,
@@ -109,7 +221,7 @@ function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", inter
 		children: [selectionError ? /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-installments-error": "",
-			children: selectionError
+			children: formatErrorCode(InstallmentsSelectContent, INSTALLMENTS_SELECT_ERROR_FIELDS, selectionError, format, "genericErrorMessage")
 		}) : null, tiers.length > 0 ? /* @__PURE__ */ jsxs(Select.Root, {
 			value: String(selectedCount),
 			onValueChange: (value) => handleInstallmentSelectValueChange(value, selectInstallment),
@@ -117,7 +229,7 @@ function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", inter
 			children: [
 				/* @__PURE__ */ jsx(Select.Label, {
 					"data-fs-installments-label": "",
-					children: resolveAuthoredCopy(label, "Installments")
+					children: format("label")
 				}),
 				/* @__PURE__ */ jsxs(Select.Trigger, {
 					"data-fs-installments-trigger": "",
@@ -129,10 +241,8 @@ function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", inter
 							return tier ? installmentLabel({
 								tier,
 								locale,
-								installmentTemplate,
-								interestFreeLabel,
-								interestTemplate
-							}) : placeholder;
+								messages
+							}) : format("placeholder");
 						}
 					}), /* @__PURE__ */ jsx(Select.Icon, {
 						"data-fs-installments-icon": "",
@@ -143,9 +253,7 @@ function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", inter
 					const text = installmentLabel({
 						tier,
 						locale,
-						installmentTemplate,
-						interestFreeLabel,
-						interestTemplate
+						messages
 					});
 					return /* @__PURE__ */ jsx(Select.Item, {
 						value: String(tier.count),
@@ -162,6 +270,6 @@ function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", inter
 	});
 }
 //#endregion
-export { InstallmentsSelect, InstallmentsSelectDefinition, handleInstallmentSelectValueChange };
+export { INSTALLMENTS_SELECT_ERROR_FIELDS, InstallmentsSelect, InstallmentsSelectContent, InstallmentsSelectDefinition, handleInstallmentSelectValueChange };
 
 //# sourceMappingURL=installments-select.js.map

package/dist/matter/installments/installments-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"installments-select.js","names":[],"sources":["../../../src/matter/installments/installments-select.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Select } from '../../particles/select/select.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { type InstallmentOption, installmentLabel } from './installments.js';\nimport { useInstallmentsSelection } from './use-installments-selection.js';\n\n/**\n * `InstallmentsSelect` matter (T90, specs/render-installments-as-a-radio-group.md;\n * docs/features/credit-card/rfc.md § D4, \"a radio/select\"). The collapsed sibling of `Installments`:\n * the same installment tiers, the same server-bound selection, and the same write path, rendered as a\n * single closed Base UI Select control instead of a stacked `RadioGroup` — for a narrow payment\n * column, a drawer, or a mobile checkout where twelve stacked rows do not fit (Decision 1: a second\n * registered component, never a rendering prop on `Installments`).\n *\n * Reads and dispatches through `useInstallmentsSelection()` — the same engine `Installments` uses —\n * so matching, tier resolution, state derivation, the BIN-confirmation pending gate, and the dispatch\n * itself cannot drift between the two surfaces (Decision 3). Formats each option with the same\n * `installmentLabel` function the radio surface uses (FR-5), driven by the same four authorable copy\n * props with the same shipped pt-BR defaults, so a store moving between surfaces carries its copy\n * across unchanged.\n *\n * Declares its own `fragment InstallmentsSelectData on Query`, selection-set-identical to\n * `InstallmentsData` under a distinct name (Decision 4) — two registered components must not share one\n * fragment *name*, which would collide once both sit on a page.\n *\n * The popup is composed inside `Select.Portal`, teleported to `<body>` (Decision 5, reversing this\n * spec's own first draft): both shipped `Select` consumers (`billing-address.tsx`, `shipping-address.tsx`)\n * do the same, and the payment controller composes this leaf inside overlay popups where the portal's\n * clipping protection matters. The accepted cost — a store's descendant-selector styling and compound\n * swatches cannot reach the popup's internals — is recorded there, not solved here.\n *\n * The closed control's text is resolved locally from this component's own `tiers` (Decision 6), never\n * from Base UI's automatic item-label lookup, so it is correct before the popup has ever been opened;\n * a bound count matching no rendered tier shows the authorable `placeholder` instead of a fabricated\n * label (FR-8). `Select.Label` always renders (Decision 13), giving the control a programmatic\n * accessible name (FR-14) with no mode prop — the FPM forbids a `showX` switch inside one component. No\n * `modal` prop is authored (Decision 14): the particle's own default (`true`) is inherited unchanged,\n * matching both shipped consumers.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, identical selection set to `InstallmentsData`\n// (`installments.tsx`) apart from the name (Decision 4; INV-8 asserts the two stay identical).\n// `total` stays deselected — neither surface renders or computes against it. `payment { id }` is\n// mandatory: it is what lets the action's echoed `payment` re-normalize the entity these fragments\n// read.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment InstallmentsSelectData on Query {\n    payment {\n      __typename\n      id\n      installmentOptions {\n        __typename\n        methodId\n        bin\n        installments {\n          __typename\n          count\n          value {\n            amount\n            currencyCode\n          }\n          interestRate\n        }\n      }\n      selectedInstallment {\n        __typename\n        count\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * `$data` forwarded by the reactive runtime — the unwrapped value of the `payment` top-level field on\n * `InstallmentsSelectData on Query` (arity-1 fragment, ADR-0015), not a `{ payment: … }` wrapper.\n * Every field optional, mirroring `InstallmentsData`: `$data` arrives partial while the entity\n * resolves.\n */\nexport type InstallmentsSelectData = {\n  installmentOptions?: readonly InstallmentOption[];\n  selectedInstallment?: { count: number } | null;\n} | null;\n\nexport type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** Placeholders `{count}` / `{value}`, matching `Installments`'/`PaymentSummary`'s convention. */\n  installmentTemplate?: string;\n  /** Appended when a tier's `interestRate` is `0`. */\n  interestFreeLabel?: string;\n  /** Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`. */\n  interestTemplate?: string;\n  /**\n   * Accessible name for the control, rendered as `Select.Label` (Decision 13, always renders).\n   * Resolved through `resolveAuthoredCopy` (T38): an authored empty or whitespace-only string falls\n   * back to the default rather than rendering a nameless combobox.\n   */\n  label?: string;\n  /** Shown on the closed control when the bound count matches no rendered tier (Decision 6/FR-8). */\n  placeholder?: string;\n  /** `InstallmentsSelectData` slice forwarded by the reactive runtime. */\n  $data?: InstallmentsSelectData;\n  /** Compiler-injected action surface; carries `payment.setInstallments`. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const InstallmentsSelectDefinition = defineComponent<InstallmentsSelectProps>({\n  name: 'InstallmentsSelect',\n  importPath: '@vtex/faststore/components',\n  component: InstallmentsSelect,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  actions: { payment: ['setInstallments'] },\n  // Required: the catalog builder resolves a doc by the `<basename>.md` convention\n  // (`installments-select.md`, which does not exist) and silently drops the key without an explicit\n  // docPath — mirrors `PaymentSectionController`'s identical need (`payment-controller.tsx:113`).\n  docPath: './installments.md',\n  editor: { label: 'Installments Select', category: 'commerce' },\n  schema: {\n    installmentTemplate: { type: 'string', default: '{count}x of {value}', label: 'Installment template' },\n    interestFreeLabel: { type: 'string', default: 'interest-free', label: 'Interest-free label' },\n    interestTemplate: { type: 'string', default: '{rate}% interest', label: 'Interest template' },\n    label: { type: 'string', default: 'Installments', label: 'Accessible label' },\n    placeholder: { type: 'string', default: 'Select an installment plan', label: 'Placeholder' },\n  },\n  guideline:\n    \"Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Resolves `Select.Root`'s `onValueChange` value into a dispatch, or a no-op. Exported so a test can\n * invoke it directly (Decision 7): `SelectRootProps.onValueChange` is `(value: string | null) => void`,\n * unlike `RadioGroupProps`', and `Number(null)` is `0` — `paymentInstallmentSelect` would reject count\n * `0` as `INVALID_INSTALLMENT_COUNT`. Base UI's `Select.Root` never actually calls `onValueChange` with\n * `null` through a user-reachable path once every `Select.Item` carries a non-null `value` (mirrors\n * `billing-address.tsx`'s own `handleCountryChange` reasoning), so this guard has no interaction that\n * could exercise it end-to-end — the direct-invocation test is the only way to cover it.\n */\nexport function handleInstallmentSelectValueChange(\n  value: string | null,\n  selectInstallment: (count: number) => void,\n): void {\n  if (value === null) return;\n  selectInstallment(Number(value));\n}\n\nexport function InstallmentsSelect({\n  installmentTemplate = '{count}x of {value}',\n  interestFreeLabel = 'interest-free',\n  interestTemplate = '{rate}% interest',\n  label,\n  placeholder = 'Select an installment plan',\n  $data,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: InstallmentsSelectProps) {\n  const $actions = useActionsOverride($actionsProp);\n  // T192: the formatting locale is the storefront's, never an authored prop (RFC localization § 10).\n  const { locale } = useStorefrontContext();\n  const { tiers, selectedCount, state, isPending, selectionError, selectInstallment, placing, cardPaymentCollapsed } =\n    useInstallmentsSelection({\n      $data,\n      $actions,\n    });\n\n  // T191 (FR-7): nothing renders while the card payment is collapsed. Returned after the last hook, so\n  // this instance stays mounted and keeps its local state.\n  if (cardPaymentCollapsed) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-installments=\"\"\n      data-fs-installments-control=\"select\"\n      data-fs-installments-state={state}\n      aria-busy={isPending || undefined}\n      {...(placing ? { 'data-fs-installments-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-installments-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {tiers.length > 0 ? (\n        <Select.Root\n          value={String(selectedCount)}\n          onValueChange={(value) => handleInstallmentSelectValueChange(value, selectInstallment)}\n          disabled={isPending}\n        >\n          <Select.Label data-fs-installments-label=\"\">{resolveAuthoredCopy(label, 'Installments')}</Select.Label>\n          <Select.Trigger data-fs-installments-trigger=\"\" disabled={isPending}>\n            <Select.Value data-fs-installments-value=\"\">\n              {(value) => {\n                const tier = tiers.find((candidate) => String(candidate.count) === value);\n                return tier\n                  ? installmentLabel({ tier, locale, installmentTemplate, interestFreeLabel, interestTemplate })\n                  : placeholder;\n              }}\n            </Select.Value>\n            <Select.Icon data-fs-installments-icon=\"\">▾</Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Positioner>\n              <Select.Popup>\n                <Select.List>\n                  {tiers.map((tier) => {\n                    const text = installmentLabel({\n                      tier,\n                      locale,\n                      installmentTemplate,\n                      interestFreeLabel,\n                      interestTemplate,\n                    });\n                    return (\n                      <Select.Item\n                        key={tier.count}\n                        value={String(tier.count)}\n                        label={text}\n                        data-fs-installments-option=\"\"\n                      >\n                        <span data-fs-installments-option-label=\"\">{text}</span>\n                      </Select.Item>\n                    );\n                  })}\n                </Select.List>\n              </Select.Popup>\n            </Select.Positioner>\n          </Select.Portal>\n        </Select.Root>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"installments-select.js","names":[],"sources":["../../../src/matter/installments/installments-select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Select } from '../../particles/select/select.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { type InstallmentLabelMessages, type InstallmentOption, installmentLabel } from './installments.js';\nimport { type PaymentInstallmentSelectErrorCode, useInstallmentsSelection } from './use-installments-selection.js';\n\n/**\n * `InstallmentsSelect` matter (T90, specs/render-installments-as-a-radio-group.md;\n * docs/features/credit-card/rfc.md § D4, \"a radio/select\"). The collapsed sibling of `Installments`:\n * the same installment tiers, the same server-bound selection, and the same write path, rendered as a\n * single closed Base UI Select control instead of a stacked `RadioGroup` — for a narrow payment\n * column, a drawer, or a mobile checkout where twelve stacked rows do not fit (Decision 1: a second\n * registered component, never a rendering prop on `Installments`).\n *\n * Reads and dispatches through `useInstallmentsSelection()` — the same engine `Installments` uses —\n * so matching, tier resolution, state derivation, the BIN-confirmation pending gate, and the dispatch\n * itself cannot drift between the two surfaces (Decision 3). Formats each option with the same\n * `installmentLabel` function the radio surface uses (FR-5), driven by the same three message fields,\n * so a store moving between surfaces carries its copy across unchanged.\n *\n * Declares its own `fragment InstallmentsSelectData on Query`, selection-set-identical to\n * `InstallmentsData` under a distinct name (Decision 4) — two registered components must not share one\n * fragment *name*, which would collide once both sit on a page.\n *\n * The popup is composed inside `Select.Portal`, teleported to `<body>` (Decision 5, reversing this\n * spec's own first draft): both shipped `Select` consumers (`billing-address.tsx`, `shipping-address.tsx`)\n * do the same, and the payment controller composes this leaf inside overlay popups where the portal's\n * clipping protection matters. The accepted cost — a store's descendant-selector styling and compound\n * swatches cannot reach the popup's internals — is recorded there, not solved here.\n *\n * The closed control's text is resolved locally from this component's own `tiers` (Decision 6), never\n * from Base UI's automatic item-label lookup, so it is correct before the popup has ever been opened;\n * a bound count matching no rendered tier shows the authorable `placeholder` instead of a fabricated\n * label (FR-8). `Select.Label` always renders (Decision 13), giving the control a programmatic\n * accessible name (FR-14) with no mode prop — the FPM forbids a `showX` switch inside one component. No\n * `modal` prop is authored (Decision 14): the particle's own default (`true`) is inherited unchanged,\n * matching both shipped consumers.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, identical selection set to `InstallmentsData`\n// (`installments.tsx`) apart from the name (Decision 4; INV-8 asserts the two stay identical).\n// `totalAmount` stays deselected — neither surface renders or computes against it. `payment { id }` is\n// mandatory: it is what lets the action's echoed `payment` re-normalize the entity these fragments\n// read.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment InstallmentsSelectData on Query {\n    payment {\n      __typename\n      id\n      installmentOptions {\n        __typename\n        methodId\n        bin\n        installments {\n          __typename\n          count\n          value {\n            amount\n            currencyCode\n          }\n          interestRate\n          interestFree\n        }\n      }\n      selectedInstallment {\n        __typename\n        count\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * `$data` forwarded by the reactive runtime — the unwrapped value of the `payment` top-level field on\n * `InstallmentsSelectData on Query` (arity-1 fragment, ADR-0015), not a `{ payment: … }` wrapper.\n * Every field optional, mirroring `InstallmentsData`: `$data` arrives partial while the entity\n * resolves.\n */\nexport type InstallmentsSelectData = {\n  installmentOptions?: readonly InstallmentOption[];\n  selectedInstallment?: { count: number } | null;\n} | null;\n\nexport const InstallmentsSelectContent = defineContentType({\n  id: 'installments-select',\n  title: 'Installments Select',\n  description: 'Copy for the installment options, the control label, its placeholder and a refused pick.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      installmentTemplate: {\n        type: 'string',\n        title: 'Installment',\n        description: '`value` is the formatted per-installment value.',\n        format: 'icu-message',\n        messageSource: '{count}x of {value}',\n        messageArguments: {\n          type: 'object',\n          properties: { count: { type: 'integer' }, value: { type: 'string' } },\n        },\n        messageExample: { count: 3, value: '$35.00' },\n      },\n      interestFreeLabel: {\n        type: 'string',\n        title: 'Interest-free label',\n        description: 'Appended when a tier is interest-free.',\n        format: 'icu-message',\n        messageSource: 'interest-free',\n      },\n      interestTemplate: {\n        type: 'string',\n        title: 'Interest',\n        description:\n          'Appended when a tier is not interest-free. `rate` is the formatted percentage: an order form rate of 100 is `1`.',\n        format: 'icu-message',\n        messageSource: '{rate}% interest',\n        messageArguments: { type: 'object', properties: { rate: { type: 'string' } } },\n        messageExample: { rate: '1.5' },\n      },\n      label: {\n        type: 'string',\n        title: 'Label',\n        description: \"The control's visible accessible name.\",\n        format: 'icu-message',\n        messageSource: 'Installments',\n      },\n      placeholder: {\n        type: 'string',\n        title: 'Placeholder',\n        description: 'Shown on the closed control when the bound count matches no rendered tier.',\n        format: 'icu-message',\n        messageSource: 'Select an installment plan',\n      },\n      invalidInstallmentMessage: {\n        type: 'string',\n        title: 'Invalid installment message',\n        description: 'Shown when the picked installment plan is no longer offered.',\n        format: 'icu-message',\n        messageSource: 'This installment plan is no longer available. Choose another one.',\n      },\n      missingMethodMessage: {\n        type: 'string',\n        title: 'Missing payment method message',\n        description: 'Shown when an installment plan is picked before a payment method.',\n        format: 'icu-message',\n        messageSource: 'Choose a payment method before choosing an installment plan.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Selection failure message',\n        description: 'Shown when a pick fails: a network failure or a fault the shopper cannot fix.',\n        format: 'icu-message',\n        messageSource: 'Unable to select the installment plan. Please try again.',\n      },\n    },\n  },\n});\n\n/**\n * The message for each code an installment pick can return. Same codes and fields as `INSTALLMENTS_ERROR_FIELDS`. A code this map does not\n * know shows genericErrorMessage.\n */\nexport const INSTALLMENTS_SELECT_ERROR_FIELDS = {\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  MISSING_PAYMENT_METHOD_SELECTION: 'missingMethodMessage',\n  INVALID_INSTALLMENT_COUNT: 'invalidInstallmentMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<PaymentInstallmentSelectErrorCode, MessageFieldName<typeof InstallmentsSelectContent>>;\n\nexport type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &\n  MessageLocaleProp & {\n    /** Merchant-authored copy: the option template, the interest suffixes, the label, the placeholder and the error. */\n    $content?: ContentValue<typeof InstallmentsSelectContent>;\n    /** `InstallmentsSelectData` slice forwarded by the reactive runtime. */\n    $data?: InstallmentsSelectData;\n    /** Compiler-injected action surface; carries `payment.setInstallments`. */\n    $actions?: ComponentActions;\n  };\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const InstallmentsSelectDefinition = defineComponent<InstallmentsSelectProps>({\n  name: 'InstallmentsSelect',\n  importPath: '@vtex/faststore/components',\n  component: InstallmentsSelect,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  actions: { payment: ['setInstallments'] },\n  // Required: the catalog builder resolves a doc by the `<basename>.md` convention\n  // (`installments-select.md`, which does not exist) and silently drops the key without an explicit\n  // docPath — mirrors `PaymentSectionController`'s identical need (`payment-controller.tsx:113`).\n  docPath: './installments.md',\n  content: InstallmentsSelectContent,\n  editor: { label: 'Installments Select', category: 'commerce' },\n  schema: {},\n  guideline:\n    \"Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Its copy comes from the $content fields installmentTemplate, interestFreeLabel, interestTemplate, label and placeholder. Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Renders nothing until a new card's entry is valid (length, Luhn, expiration, security code) or a saved card is selected, and nothing when no payment method the store offers carries a tier above 1x. Picking an option dispatches $actions.payment.setInstallments; the mutation returns the cart, whose total is the greater of the order form's value and the selected payment's value, so a CartTotal elsewhere on the page shows the interest-inclusive total from the normalized cache. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Resolves `Select.Root`'s `onValueChange` value into a dispatch, or a no-op. Exported so a test can\n * invoke it directly (Decision 7): `SelectRootProps.onValueChange` is `(value: string | null) => void`,\n * unlike `RadioGroupProps`', and `Number(null)` is `0` — `paymentInstallmentSelect` would reject count\n * `0` as `INVALID_INSTALLMENT_COUNT`. Base UI's `Select.Root` never actually calls `onValueChange` with\n * `null` through a user-reachable path once every `Select.Item` carries a non-null `value` (mirrors\n * `billing-address.tsx`'s own `handleCountryChange` reasoning), so this guard has no interaction that\n * could exercise it end-to-end — the direct-invocation test is the only way to cover it.\n */\nexport function handleInstallmentSelectValueChange(\n  value: string | null,\n  selectInstallment: (count: number) => void,\n): void {\n  if (value === null) return;\n  selectInstallment(Number(value));\n}\n\nexport function InstallmentsSelect({\n  $content,\n  $locale,\n  $data,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: InstallmentsSelectProps) {\n  const $actions = useActionsOverride($actionsProp);\n  // T192: the formatting locale is the storefront's, never an authored prop (RFC localization § 10).\n  const { locale } = useStorefrontContext();\n  const { format } = useMessageFormatter(InstallmentsSelectContent, $content);\n  const messages: InstallmentLabelMessages = {\n    installment: (args) => format('installmentTemplate', args),\n    interestFree: () => format('interestFreeLabel'),\n    interest: (args) => format('interestTemplate', args),\n  };\n  const {\n    tiers,\n    selectedCount,\n    state,\n    isPending,\n    selectionError,\n    selectInstallment,\n    placing,\n    cardPaymentCollapsed,\n    visible,\n  } = useInstallmentsSelection({\n    $data,\n    $actions,\n  });\n\n  // T191 (FR-7): nothing renders while the card payment is collapsed. T201: nor while the entry is not\n  // valid, or the store offers no installments — the hook's one `visible` decision, so the two surfaces\n  // cannot drift. Returned after the last hook, so this instance stays mounted and keeps its local state.\n  if (cardPaymentCollapsed || !visible) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-installments=\"\"\n      data-fs-installments-control=\"select\"\n      data-fs-installments-state={state}\n      aria-busy={isPending || undefined}\n      {...(placing ? { 'data-fs-installments-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-installments-error=\"\">\n          {formatErrorCode(\n            InstallmentsSelectContent,\n            INSTALLMENTS_SELECT_ERROR_FIELDS,\n            selectionError,\n            format,\n            'genericErrorMessage',\n          )}\n        </div>\n      ) : null}\n      {tiers.length > 0 ? (\n        <Select.Root\n          value={String(selectedCount)}\n          onValueChange={(value) => handleInstallmentSelectValueChange(value, selectInstallment)}\n          disabled={isPending}\n        >\n          <Select.Label data-fs-installments-label=\"\">{format('label')}</Select.Label>\n          <Select.Trigger data-fs-installments-trigger=\"\" disabled={isPending}>\n            <Select.Value data-fs-installments-value=\"\">\n              {(value) => {\n                const tier = tiers.find((candidate) => String(candidate.count) === value);\n                return tier ? installmentLabel({ tier, locale, messages }) : format('placeholder');\n              }}\n            </Select.Value>\n            <Select.Icon data-fs-installments-icon=\"\">▾</Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Positioner>\n              <Select.Popup>\n                <Select.List>\n                  {tiers.map((tier) => {\n                    const text = installmentLabel({ tier, locale, messages });\n                    return (\n                      <Select.Item\n                        key={tier.count}\n                        value={String(tier.count)}\n                        label={text}\n                        data-fs-installments-option=\"\"\n                      >\n                        <span data-fs-installments-option-label=\"\">{text}</span>\n                      </Select.Item>\n                    );\n                  })}\n                </Select.List>\n              </Select.Popup>\n            </Select.Positioner>\n          </Select.Portal>\n        </Select.Root>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/installments/installments.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
@@ -11,7 +12,10 @@ export type InstallmentMoney = Readonly<{
 export type InstallmentTier = Readonly<{
   count: number;
   value: InstallmentMoney;
-  interestRate: number;
+  /** Hundredths of a percent. `null` when the order form did not say what the rate is (T230). */
+  interestRate: number | null;
+  /** `null` exactly when `interestRate` is `null`. Computed by the API, never by this component. */
+  interestFree: boolean | null;
 }>;
 export type InstallmentOption = Readonly<{
   methodId: string;
@@ -30,29 +34,105 @@ export type InstallmentsData = {
     count: number;
   } | null;
 } | null;
-export type InstallmentsProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
-  /** Placeholders `{count}` / `{value}`, matching `PaymentSummary`'s / `PricingInstallment`'s convention. */
-  installmentTemplate?: string;
-  /** Appended when a tier's `interestRate` is `0`. */
-  interestFreeLabel?: string;
-  /**
-   * Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`.
-   * `{rate}` is the order form's `interestRate` (hundredths of a percent) divided by 100: `100` renders `1`.
-   */
-  interestTemplate?: string;
+export declare const InstallmentsContent: {
+  readonly id: "installments";
+  readonly title: "Installments";
+  readonly description: "Copy for the installment rows, the group legend and a refused pick.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly installmentTemplate: {
+        readonly type: "string";
+        readonly title: "Installment";
+        readonly description: "`value` is the formatted per-installment value.";
+        readonly format: "icu-message";
+        readonly messageSource: "{count}x of {value}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly count: {
+              readonly type: "integer";
+            };
+            readonly value: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly count: 3;
+          readonly value: "$35.00";
+        };
+      };
+      readonly interestFreeLabel: {
+        readonly type: "string";
+        readonly title: "Interest-free label";
+        readonly description: "Appended when a tier is interest-free.";
+        readonly format: "icu-message";
+        readonly messageSource: "interest-free";
+      };
+      readonly interestTemplate: {
+        readonly type: "string";
+        readonly title: "Interest";
+        readonly description: "Appended when a tier is not interest-free. `rate` is the formatted percentage: an order form rate of 100 is `1`.";
+        readonly format: "icu-message";
+        readonly messageSource: "{rate}% interest";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly rate: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly rate: "1.5";
+        };
+      };
+      readonly legend: {
+        readonly type: "string";
+        readonly title: "Legend";
+        readonly description: "The radio group's visible accessible name.";
+        readonly format: "icu-message";
+        readonly messageSource: "Installments";
+      };
+      readonly invalidInstallmentMessage: {
+        readonly type: "string";
+        readonly title: "Invalid installment message";
+        readonly description: "Shown when the picked installment plan is no longer offered.";
+        readonly format: "icu-message";
+        readonly messageSource: "This installment plan is no longer available. Choose another one.";
+      };
+      readonly missingMethodMessage: {
+        readonly type: "string";
+        readonly title: "Missing payment method message";
+        readonly description: "Shown when an installment plan is picked before a payment method.";
+        readonly format: "icu-message";
+        readonly messageSource: "Choose a payment method before choosing an installment plan.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Selection failure message";
+        readonly description: "Shown when a pick fails: a network failure or a fault the shopper cannot fix.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to select the installment plan. Please try again.";
+      };
+    };
+  };
+};
+export type InstallmentsProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
   /**
-   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).
-   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to
-   * the default rather than rendering a nameless group.
+   * Merchant-authored copy: the row template, the interest suffixes, the legend and the error. A tier whose rate
+   * the order form did not state (`interestRate` and `interestFree` both `null`) gets no suffix.
    */
-  legend?: string;
+  $content?: ContentValue<typeof InstallmentsContent>;
   /** `InstallmentsData` slice forwarded by the reactive runtime. */
   $data?: InstallmentsData;
   /** Compiler-injected action surface; carries `payment.setInstallments`. */
   $actions?: ComponentActions;
 };
 export declare const InstallmentsDefinition: ComponentDefinition<InstallmentsProps>;
-export declare function Installments({ installmentTemplate, interestFreeLabel, interestTemplate, legend, $data, $actions: $actionsProp, className, ...props }: InstallmentsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Installments({ $content, $locale, $data, $actions: $actionsProp, className, ...props }: InstallmentsProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { findInstallmentOption, resolveInstallmentTiers };
 //# sourceMappingURL=installments.d.ts.map