@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/order-placed-payment-summary/order-placed-payment-summary.js

@@ -1,15 +1,17 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
-import { substituteTemplate } from "../../utils/substitute-template.js";
+import { useConfirmationLastFour } from "../../sdk/payment/confirmation-last-four.js";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/order-placed-payment-summary/order-placed-payment-summary.tsx
 /**
 * OrderPlacedPaymentSummary matter (epic `credit-card`, T17 — recap the payment on the order
-* confirmation). Single-file matter per ADR-0001: owns its own `Query.order(orderGroup: $orderGroup)`
+* confirmation). Single-file matter per ADR-0001: owns its own `Query.order(id: $orderId)`
 * fragment and sets no `requiresContext`, so it composes independently on a confirmation surface — no
 * ancestor context needed.
 *
@@ -24,9 +26,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const fragment = `
   fragment OrderPlacedPaymentSummaryData on Query {
-    order(orderGroup: $orderGroup) {
+    order(id: $orderId) {
       __typename
       id
+      reference
       network
       lastFourDigits
       installment {
@@ -39,8 +42,73 @@ const fragment = `
     }
   }
 `;
-const TOTAL_TOKEN = "{total}";
-const COUNT_TOKEN = "{count}";
+const OrderPlacedPaymentSummaryContent = defineContentType({
+	id: "order-placed-payment-summary",
+	title: "Order Placed Payment Summary",
+	description: "Copy of the payment recap on the order confirmation.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			lastFourTemplate: {
+				type: "string",
+				title: "Last four",
+				description: "Rendered only when the last four digits resolve.",
+				format: "icu-message",
+				messageSource: "•••• {lastFour}",
+				messageArguments: {
+					type: "object",
+					properties: { lastFour: { type: "string" } }
+				},
+				messageExample: { lastFour: "4242" }
+			},
+			noPaymentRecordLabel: {
+				type: "string",
+				title: "No payment record",
+				description: "Shown when the order resolves but carries no projectable payment record.",
+				format: "icu-message",
+				messageSource: "Payment method not available"
+			},
+			unresolvedOrderLabel: {
+				type: "string",
+				title: "Unresolved order",
+				description: "Shown when the order group does not resolve to a settled order.",
+				format: "icu-message",
+				messageSource: "Could not load the payment details"
+			},
+			installmentTemplate: {
+				type: "string",
+				title: "Installment",
+				description: "`total` is the formatted settled payment, never a per-installment amount, which is why the source says \"total\" instead of \"of\".",
+				format: "icu-message",
+				messageSource: "{count}x total {total}",
+				messageArguments: {
+					type: "object",
+					properties: {
+						count: { type: "integer" },
+						total: { type: "string" }
+					}
+				},
+				messageExample: {
+					count: 3,
+					total: "R$ 600,00"
+				}
+			},
+			installmentCountTemplate: {
+				type: "string",
+				title: "Installment count",
+				description: "Rendered instead of the installment message when the settled record has no total.",
+				format: "icu-message",
+				messageSource: "{count}x",
+				messageArguments: {
+					type: "object",
+					properties: { count: { type: "integer" } }
+				},
+				messageExample: { count: 3 }
+			}
+		}
+	}
+});
 /**
 * Resolves `$data` plus the reactive root's `loading` into exactly one of four states, in a total,
 * ordered precedence. A split purchase is read whole (docs/features/order-placed/rfc.md, 3.1), so no
@@ -54,14 +122,14 @@ const COUNT_TOKEN = "{count}";
 * line. The order system sends no card label, so the recap reads none
 * (docs/features/order-placed/rfc.md, 4.5).
 */
-function resolveOrderPlacedPayment(data, loading) {
+function resolveOrderPlacedPayment(data, loading, carriedLastFour) {
 	if (loading && data == null) return { kind: "loading" };
 	if (data == null) return { kind: "unresolved" };
 	if (data.network == null && data.lastFourDigits == null) return { kind: "no-record" };
 	return {
 		kind: "recap",
 		network: data.network ?? "",
-		lastFourDigits: data.lastFourDigits ?? null,
+		lastFourDigits: data.lastFourDigits ?? (data.network == null ? null : carriedLastFour),
 		installment: data.installment ?? null
 	};
 }
@@ -89,86 +157,12 @@ function formatMoney(money) {
 		return money.amount;
 	}
 }
-/**
-* Drops the `{total}` placeholder from the RAW template — before `{count}` is substituted — together
-* with the WHOLE run of text between `{count}`'s own glued suffix (if any) and `{total}`, not merely
-* one connector word (Decision 8, T31 — specs/make-the-payment-components-authored-copy.md; this
-* hardens FR-12/T97's original single-run rule, which dropped only one word and left a multi-word
-* connector dangling, e.g. `'{count}x no valor total de {total}'` degrading to "6x no valor total").
-*
-* When `{count}` appears before `{total}`, this scans FORWARD from the end of `{count}` to the first
-* whitespace character: that run (possibly zero-length) is the count's own glued suffix — a unit
-* symbol like "x"/"×"/"回", never a connector — and is kept verbatim; everything from there through
-* `{total}` itself is dropped. When no whitespace separates `{count}` from `{total}` at all, the whole
-* run between them is glued and kept, and only the `{total}` token is dropped. A null total therefore
-* degrades `'{count}x of {total}'` to "6x" (the whitespace-separated run "of" is dropped in full),
-* `'{count}x {total}'` to "6x" (the "x" is glued to `{count}`, so it survives even though `{total}`
-* does not), `'{count}x{total}'` to "6x" too (no whitespace at all between them — the glued run,
-* `{total}` aside, is kept), and `'{count} parcelas de {total}'` — a self-contained unit noun with no
-* glued suffix — to a bare "6": no algorithm can tell "parcelas" apart from a dangling preposition, so
-* the same deterministic rule that kills every dangling phrase also takes a legitimate unit noun with
-* it (OQ-2). This applies wherever `{count}` sits in the template, not only at its start (`'Paid
-* {count}x {total}'` → "Paid 6x").
-*
-* The forward scan is bounded so it can never cross into `{total}`: `{total}` is a fixed literal
-* marker with a known position, unlike the count's own digits once substituted, which could otherwise
-* be mistaken for a connector by shape alone. Running this on the raw template — and only substituting
-* `{count}` afterward — is what keeps the count itself from ever being the thing removed (FR-4: the
-* element must always render when `count` resolves, for any template that contains `{count}`).
-*
-* Two edge cases are deliberate limits of this rule, not bugs to chase. `'{count} x {total}'` still
-* degrades to "6": a whitespace-separated single-character "x" is by construction indistinguishable
-* from a connector word, so it is dropped along with it — that IS the rule's principle, not an
-* exception to it. `'{count}-{total}'` degrades to "6-": the glued "-" is kept verbatim as the
-* author's own template text, whatever character it is. Both outcomes are stable and predictable,
-* which is the point.
-*
-* When `{count}` does not appear before `{total}` at all (a template that never shows the count, e.g.
-* `'Total: {total}'`), there is no boundary to scan forward from, and this path is unchanged from
-* before Decision 8: walk backward from `{total}`, drop one connector run and its surrounding
-* whitespace, and fall back to cutting the bare `{total}` token only when that would leave nothing but
-* whitespace (`installmentTemplate = '{total}'` collapses to `''`). FR-4's "always renders when count
-* resolves" guarantee is therefore scoped to templates that contain `{count}`; a total-only template
-* never had a count to render, and asked for the total alone.
-*/
-function stripTotalToken(template) {
-	const totalIndex = template.indexOf(TOTAL_TOKEN);
-	if (totalIndex === -1) return template;
-	const countIndex = template.indexOf(COUNT_TOKEN);
-	const countEnd = countIndex + 7;
-	const hasCountBoundary = countIndex !== -1 && countEnd <= totalIndex;
-	const isWhitespaceAt = (index) => /\s/.test(template[index] ?? "");
-	if (hasCountBoundary) {
-		let gluedEnd = countEnd;
-		while (gluedEnd < totalIndex && !isWhitespaceAt(gluedEnd)) gluedEnd++;
-		return template.slice(0, gluedEnd) + template.slice(totalIndex + 7);
-	}
-	let cursor = totalIndex;
-	while (cursor > 0 && isWhitespaceAt(cursor - 1)) cursor--;
-	while (cursor > 0 && !isWhitespaceAt(cursor - 1)) cursor--;
-	while (cursor > 0 && isWhitespaceAt(cursor - 1)) cursor--;
-	const withConnectorDropped = template.slice(0, cursor) + template.slice(totalIndex + 7);
-	if (withConnectorDropped.trim() !== "") return withConnectorDropped;
-	return template.slice(0, totalIndex) + template.slice(totalIndex + 7);
-}
-/**
-* Substitutes `{count}` and `{total}` with replacer FUNCTIONS, not replacement strings (FR-5, the
-* same S1 fix `lastFourText` below applies to `lastFourTemplate`): `total.amount`/`total.currencyCode`
-* are server-sourced and unconstrained, so a replacement STRING could let a hostile value rewrite the
-* surrounding template text via `$&`/`` $` ``/`$'`/`$$`.
-*
-* When total is null, `{total}` and its connector word are dropped by `stripTotalToken` — on the raw
-* template, before `{count}` is substituted; see that function's doc comment for the exact rule. A
-* prior version ran an unanchored regex over the ALREADY-substituted string and, for any template
-* where the connector sits right next to `{count}` with only whitespace further out (e.g.
-* `'{count}x {total}'`), matched from the very start of the string and deleted the count along with
-* the connector, silently un-rendering the whole line (T33 fix-round-2 regression).
-*/
-function formatInstallmentLine(template, installment) {
-	const { total } = installment;
-	if (!total) return substituteTemplate(stripTotalToken(template), { count: String(installment.count) }).trim();
-	return substituteTemplate(template, {
-		count: String(installment.count),
+/** A record with a count but no total (never a fabricated amount) renders `installmentCountTemplate` instead. */
+function formatInstallmentLine({ format }, installment) {
+	const { count, total } = installment;
+	if (!total) return format("installmentCountTemplate", { count }).trim();
+	return format("installmentTemplate", {
+		count,
 		total: formatMoney(total)
 	}).trim();
 }
@@ -178,33 +172,13 @@ const OrderPlacedPaymentSummaryDefinition = defineComponent({
 	component: OrderPlacedPaymentSummary,
 	fragment,
 	fetchStrategy: "reactive",
+	content: OrderPlacedPaymentSummaryContent,
 	editor: {
 		label: "Order Placed Payment Summary",
 		category: "commerce"
 	},
-	schema: {
-		lastFourTemplate: {
-			type: "string",
-			default: "•••• {lastFour}",
-			label: "Last-four template"
-		},
-		noPaymentRecordLabel: {
-			type: "string",
-			default: "Payment method not available",
-			label: "No payment record label"
-		},
-		unresolvedOrderLabel: {
-			type: "string",
-			default: "Could not load the payment details",
-			label: "Unresolved order label"
-		},
-		installmentTemplate: {
-			type: "string",
-			default: "{count}x of {total}",
-			label: "Installment template"
-		}
-	},
-	guideline: "Read-only recap, on a post-purchase confirmation surface, of the card the shopper paid with — sourced from the settled order (Query.order), never the live order form. Owns its own fragment; requires no ancestor context, so it composes standalone. Renders exactly one of four states, in strict precedence: nothing while the query is in flight; a role=\"alert\" notice when the order group does not resolve; an informational line when the order resolves with no payment record; or the recap itself (network, plus last four whenever the projection carries one, plus an installment line — count and settled total only, never a per-installment amount or interest rate — whenever the settled record reports one). Never compose it in checkout — the order group it reads does not exist until the order is placed, and no component renders a payment recap there. Never renders a full card number or CVV. See order-placed-payment-summary.md."
+	schema: {},
+	guideline: "Read-only recap, on a post-purchase confirmation surface, of the card the shopper paid with — sourced from the settled order (Query.order), never the live order form. Owns its own fragment; requires no ancestor context, so it composes standalone. Renders exactly one of four states, in strict precedence: nothing while the query is in flight; a role=\"alert\" notice when the order group does not resolve; an informational line when the order resolves with no payment record; or the recap itself (network, plus last four whenever the projection carries one, plus an installment line — count and settled total only, never a per-installment amount or interest rate — whenever the settled record reports one). Never compose it in checkout — the order group it reads does not exist until the order is placed, and no component renders a payment recap there. Its copy is the $content messages lastFourTemplate, noPaymentRecordLabel, unresolvedOrderLabel, installmentTemplate and installmentCountTemplate. Never renders a full card number or CVV. See order-placed-payment-summary.md."
 });
 /**
 * Renders the settled order's payment recap on a confirmation surface. Resolves through
@@ -214,27 +188,29 @@ const OrderPlacedPaymentSummaryDefinition = defineComponent({
 * last four (whenever present) plus the installment line (whenever the settled record reports one,
 * T33). Requires no context — composable standalone.
 */
-function OrderPlacedPaymentSummary({ className, lastFourTemplate = "•••• {lastFour}", noPaymentRecordLabel = "Payment method not available", unresolvedOrderLabel = "Could not load the payment details", installmentTemplate = "{count}x of {total}", $data: $dataProp }) {
+function OrderPlacedPaymentSummary({ className, $content, $locale, $data: $dataProp }) {
 	const $data = useDataOverride($dataProp);
+	const messages = useMessageFormatter(OrderPlacedPaymentSummaryContent, $content);
 	const { loading } = useContext(ReactiveRootContext);
-	const resolved = resolveOrderPlacedPayment($data ?? null, loading);
+	const carriedLastFour = useConfirmationLastFour($data?.reference);
+	const resolved = resolveOrderPlacedPayment($data ?? null, loading, carriedLastFour);
 	if (resolved.kind === "loading") return null;
 	if (resolved.kind === "unresolved") return /* @__PURE__ */ jsx("div", {
 		className,
 		role: "alert",
 		"data-fs-order-placed-payment-summary": "",
 		"data-fs-order-placed-payment-summary-unresolved": "",
-		children: unresolvedOrderLabel
+		children: messages.format("unresolvedOrderLabel")
 	});
 	if (resolved.kind === "no-record") return /* @__PURE__ */ jsx("div", {
 		className,
 		"data-fs-order-placed-payment-summary": "",
 		"data-fs-order-placed-payment-summary-no-record": "",
-		children: noPaymentRecordLabel
+		children: messages.format("noPaymentRecordLabel")
 	});
 	const { network, lastFourDigits, installment } = resolved;
-	const methodText = [network, lastFourDigits ? substituteTemplate(lastFourTemplate, { lastFour: lastFourDigits }) : null].filter(Boolean).join(" ");
-	const installmentText = installment ? formatInstallmentLine(installmentTemplate, installment) : null;
+	const methodText = [network, lastFourDigits ? messages.format("lastFourTemplate", { lastFour: lastFourDigits }) : null].filter(Boolean).join(" ");
+	const installmentText = installment ? formatInstallmentLine(messages, installment) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		"data-fs-order-placed-payment-summary": "",
@@ -248,6 +224,6 @@ function OrderPlacedPaymentSummary({ className, lastFourTemplate = "••••
 	});
 }
 //#endregion
-export { OrderPlacedPaymentSummary, OrderPlacedPaymentSummaryDefinition };
+export { OrderPlacedPaymentSummary, OrderPlacedPaymentSummaryContent, OrderPlacedPaymentSummaryDefinition };
 
 //# sourceMappingURL=order-placed-payment-summary.js.map

package/dist/matter/order-placed-payment-summary/order-placed-payment-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"order-placed-payment-summary.js","names":[],"sources":["../../../src/matter/order-placed-payment-summary/order-placed-payment-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { useContext } from 'react';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ReactiveRootContext } from '../../sdk/data/page-reactive-data-root.js';\nimport { substituteTemplate } from '../../utils/substitute-template.js';\n\n/**\n * OrderPlacedPaymentSummary matter (epic `credit-card`, T17 — recap the payment on the order\n * confirmation). Single-file matter per ADR-0001: owns its own `Query.order(orderGroup: $orderGroup)`\n * fragment and sets no `requiresContext`, so it composes independently on a confirmation surface — no\n * ancestor context needed.\n *\n * This component is sourced from the settled order, never the live order form\n * (specs/order-placed-payment-summary.md, Decision 1): `Query.payment` projects the live order form\n * and stops resolving once the order is placed, so a post-purchase recap needs the settled-order\n * projection (`Query.order`, T16) instead — never compose it in checkout, and never\n * point this component at `Query.payment`.\n *\n * Read-only recap — no write affordance, no internal state; every transition is driven purely by\n * `$data` and `loading`.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment OrderPlacedPaymentSummaryData on Query {\n    order(orderGroup: $orderGroup) {\n      __typename\n      id\n      network\n      lastFourDigits\n      installment {\n        count\n        total {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * The installment plan the order was charged in (T33, specs/settle-and-project-the-placed-\n * order.md). Null when the settled record reports none — never fabricated, never defaulted to\n * `{ count: 1 }`. `total` is null when the source carries the count but not enough to build a\n * Money from (Decision 2: the settled-order source never carries a per-installment amount or an\n * interest rate at all, see US-2).\n */\nexport type OrderPlacedInstallment = {\n  count: number;\n  total?: { amount: string; currencyCode: string } | null;\n} | null;\n\n/**\n * The `$data` slice forwarded by the reactive runtime. `OrderPlacedPaymentSummaryData` selects\n * exactly one top-level field (`order`), so per ADR-0015 the compiler derives a single entity\n * fragment and `$data` is the unwrapped value of that field — never a `{ order: … }` wrapper. `null`\n * when the order group does not resolve to a settled order.\n */\nexport type OrderPlacedPaymentSummaryData = {\n  network?: string | null;\n  lastFourDigits?: string | null;\n  installment?: OrderPlacedInstallment;\n} | null;\n\n/** The four states the recap resolves to, in strict, total precedence order. */\ntype ResolvedOrderPlacedPayment =\n  | { kind: 'loading' }\n  | { kind: 'unresolved' }\n  | { kind: 'no-record' }\n  | {\n      kind: 'recap';\n      network: string;\n      lastFourDigits: string | null;\n      installment: OrderPlacedInstallment;\n    };\n\nexport type OrderPlacedPaymentSummaryProps = {\n  className?: string;\n  /** Rendered only when `lastFourDigits` resolves; `{lastFour}` placeholder. */\n  lastFourTemplate?: string;\n  /** Shown when the order resolves but carries no projectable payment record. */\n  noPaymentRecordLabel?: string;\n  /** Shown when the order group does not resolve to a settled order. */\n  unresolvedOrderLabel?: string;\n  /**\n   * Rendered only when `installment` resolves; `{count}`/`{total}` placeholders. When the source\n   * carries the count but not enough to build a total from (US-2 — never a fabricated per-installment\n   * amount), `{total}` is dropped together with everything between `{count}`'s own glued suffix (if\n   * any) and `{total}` — but a run glued directly to `{count}`, with no whitespace, is a suffix of the\n   * count, not a connector, and is kept. A null total therefore degrades `'{count}x of {total}'` to\n   * \"6x\" — never \"6x of\" or a bare \"6\" (see `stripTotalToken`).\n   */\n  installmentTemplate?: string;\n  /** Unwrapped `Order` slice forwarded by the reactive runtime — never a `{ order: … }` wrapper. */\n  $data?: OrderPlacedPaymentSummaryData;\n};\n\n// ---------------------------------------------------------------------------\n// Resolution\n// ---------------------------------------------------------------------------\n\nconst TOTAL_TOKEN = '{total}';\nconst COUNT_TOKEN = '{count}';\n\n/**\n * Resolves `$data` plus the reactive root's `loading` into exactly one of four states, in a total,\n * ordered precedence. A split purchase is read whole (docs/features/order-placed/rfc.md, 3.1), so no\n * error carries a state of its own: any failed read leaves `$data` null and resolves to `unresolved`.\n * `loading && data == null` separates a transient in-flight window from a genuinely unresolved order\n * group, so the unresolved alert never flashes on first paint of a successful confirmation. `no-record` fires only when network and\n * lastFourDigits are both null — a record carrying either still renders as `recap` (Open Question 5).\n *\n * `no-record`'s gate never reads installment (FR-6, INV-6): an order carrying an installment but\n * neither network nor lastFourDigits still renders `no-record`, not a recap with only an installment\n * line. The order system sends no card label, so the recap reads none\n * (docs/features/order-placed/rfc.md, 4.5).\n */\nfunction resolveOrderPlacedPayment(data: OrderPlacedPaymentSummaryData, loading: boolean): ResolvedOrderPlacedPayment {\n  if (loading && data == null) return { kind: 'loading' };\n  if (data == null) return { kind: 'unresolved' };\n  if (data.network == null && data.lastFourDigits == null) return { kind: 'no-record' };\n  return {\n    kind: 'recap',\n    network: data.network ?? '',\n    lastFourDigits: data.lastFourDigits ?? null,\n    installment: data.installment ?? null,\n  };\n}\n\n/** Locale-formats a settled Money value (e.g. \"R$ 600,00\"). Fixed to pt-BR — not because it matches\n * every other default in this component (T31 moved every copy default here to en-US, which falsifies\n * that reasoning) but because this component has no `locale` prop of its own to read instead: adding\n * one is a formatting change, not a copy change, and is out of this task's scope (see OQ-3 in\n * specs/make-the-payment-components-authored-copy.md).\n *\n * `currencyCode` reaches this function already validated: `Money.currencyCode` is `CurrencyCode!`,\n * a GraphQL enum (`base/schema.graphql:186,206`), so a value outside the declared members fails\n * GraphQL's own enum serialization server-side and nulls `total` before it ever reaches a query\n * result — verified against this app's exact `buildSubgraphSchema` wiring (T33 fix pass: an empty\n * string / \"XX\" / \"BRLL\" each produced a `total: null` field error, never a value reaching here).\n * The try/catch below is defense in depth only, for a caller that bypasses that enum entirely (a\n * Storybook fixture, a `$data` override, a future schema change) — never expected to fire against a\n * real query response. */\nfunction formatMoney(money: { amount: string; currencyCode: string }): string {\n  try {\n    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: money.currencyCode }).format(\n      Number(money.amount),\n    );\n  } catch {\n    return money.amount;\n  }\n}\n\n/**\n * Drops the `{total}` placeholder from the RAW template — before `{count}` is substituted — together\n * with the WHOLE run of text between `{count}`'s own glued suffix (if any) and `{total}`, not merely\n * one connector word (Decision 8, T31 — specs/make-the-payment-components-authored-copy.md; this\n * hardens FR-12/T97's original single-run rule, which dropped only one word and left a multi-word\n * connector dangling, e.g. `'{count}x no valor total de {total}'` degrading to \"6x no valor total\").\n *\n * When `{count}` appears before `{total}`, this scans FORWARD from the end of `{count}` to the first\n * whitespace character: that run (possibly zero-length) is the count's own glued suffix — a unit\n * symbol like \"x\"/\"×\"/\"回\", never a connector — and is kept verbatim; everything from there through\n * `{total}` itself is dropped. When no whitespace separates `{count}` from `{total}` at all, the whole\n * run between them is glued and kept, and only the `{total}` token is dropped. A null total therefore\n * degrades `'{count}x of {total}'` to \"6x\" (the whitespace-separated run \"of\" is dropped in full),\n * `'{count}x {total}'` to \"6x\" (the \"x\" is glued to `{count}`, so it survives even though `{total}`\n * does not), `'{count}x{total}'` to \"6x\" too (no whitespace at all between them — the glued run,\n * `{total}` aside, is kept), and `'{count} parcelas de {total}'` — a self-contained unit noun with no\n * glued suffix — to a bare \"6\": no algorithm can tell \"parcelas\" apart from a dangling preposition, so\n * the same deterministic rule that kills every dangling phrase also takes a legitimate unit noun with\n * it (OQ-2). This applies wherever `{count}` sits in the template, not only at its start (`'Paid\n * {count}x {total}'` → \"Paid 6x\").\n *\n * The forward scan is bounded so it can never cross into `{total}`: `{total}` is a fixed literal\n * marker with a known position, unlike the count's own digits once substituted, which could otherwise\n * be mistaken for a connector by shape alone. Running this on the raw template — and only substituting\n * `{count}` afterward — is what keeps the count itself from ever being the thing removed (FR-4: the\n * element must always render when `count` resolves, for any template that contains `{count}`).\n *\n * Two edge cases are deliberate limits of this rule, not bugs to chase. `'{count} x {total}'` still\n * degrades to \"6\": a whitespace-separated single-character \"x\" is by construction indistinguishable\n * from a connector word, so it is dropped along with it — that IS the rule's principle, not an\n * exception to it. `'{count}-{total}'` degrades to \"6-\": the glued \"-\" is kept verbatim as the\n * author's own template text, whatever character it is. Both outcomes are stable and predictable,\n * which is the point.\n *\n * When `{count}` does not appear before `{total}` at all (a template that never shows the count, e.g.\n * `'Total: {total}'`), there is no boundary to scan forward from, and this path is unchanged from\n * before Decision 8: walk backward from `{total}`, drop one connector run and its surrounding\n * whitespace, and fall back to cutting the bare `{total}` token only when that would leave nothing but\n * whitespace (`installmentTemplate = '{total}'` collapses to `''`). FR-4's \"always renders when count\n * resolves\" guarantee is therefore scoped to templates that contain `{count}`; a total-only template\n * never had a count to render, and asked for the total alone.\n */\nfunction stripTotalToken(template: string): string {\n  const totalIndex = template.indexOf(TOTAL_TOKEN);\n  if (totalIndex === -1) return template;\n\n  const countIndex = template.indexOf(COUNT_TOKEN);\n  const countEnd = countIndex + COUNT_TOKEN.length;\n  const hasCountBoundary = countIndex !== -1 && countEnd <= totalIndex;\n\n  const isWhitespaceAt = (index: number) => /\\s/.test(template[index] ?? '');\n\n  if (hasCountBoundary) {\n    // Forward scan (Decision 8): the count's own glued suffix runs from countEnd up to the first\n    // whitespace, or up to {total} itself when there is no whitespace between them at all.\n    let gluedEnd = countEnd;\n    while (gluedEnd < totalIndex && !isWhitespaceAt(gluedEnd)) gluedEnd++;\n    return template.slice(0, gluedEnd) + template.slice(totalIndex + TOTAL_TOKEN.length);\n  }\n\n  // No {count} precedes {total} (e.g. \"Total: {total}\") — there is no boundary to stop a\n  // connector-removal scan at, so this walks backward from {total} exactly as it did before Decision\n  // 8: drop the whitespace immediately before {total}, then the one connector run before that, falling\n  // back to dropping only the bare {total} token when removing the connector would leave nothing but\n  // whitespace. Unchanged by Decision 8.\n  let cursor = totalIndex;\n  while (cursor > 0 && isWhitespaceAt(cursor - 1)) cursor--; // whitespace right before {total}\n  while (cursor > 0 && !isWhitespaceAt(cursor - 1)) cursor--; // the candidate connector run\n  while (cursor > 0 && isWhitespaceAt(cursor - 1)) cursor--; // whitespace right before the connector\n\n  const withConnectorDropped = template.slice(0, cursor) + template.slice(totalIndex + TOTAL_TOKEN.length);\n  if (withConnectorDropped.trim() !== '') return withConnectorDropped;\n\n  return template.slice(0, totalIndex) + template.slice(totalIndex + TOTAL_TOKEN.length);\n}\n\n/**\n * Substitutes `{count}` and `{total}` with replacer FUNCTIONS, not replacement strings (FR-5, the\n * same S1 fix `lastFourText` below applies to `lastFourTemplate`): `total.amount`/`total.currencyCode`\n * are server-sourced and unconstrained, so a replacement STRING could let a hostile value rewrite the\n * surrounding template text via `$&`/`` $` ``/`$'`/`$$`.\n *\n * When total is null, `{total}` and its connector word are dropped by `stripTotalToken` — on the raw\n * template, before `{count}` is substituted; see that function's doc comment for the exact rule. A\n * prior version ran an unanchored regex over the ALREADY-substituted string and, for any template\n * where the connector sits right next to `{count}` with only whitespace further out (e.g.\n * `'{count}x {total}'`), matched from the very start of the string and deleted the count along with\n * the connector, silently un-rendering the whole line (T33 fix-round-2 regression).\n */\nfunction formatInstallmentLine(\n  template: string,\n  installment: { count: number; total?: { amount: string; currencyCode: string } | null },\n): string {\n  const { total } = installment;\n  if (!total) {\n    return substituteTemplate(stripTotalToken(template), { count: String(installment.count) }).trim();\n  }\n  return substituteTemplate(template, { count: String(installment.count), total: formatMoney(total) }).trim();\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const OrderPlacedPaymentSummaryDefinition = defineComponent<OrderPlacedPaymentSummaryProps>({\n  name: 'OrderPlacedPaymentSummary',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedPaymentSummary,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Order Placed Payment Summary', category: 'commerce' },\n  schema: {\n    lastFourTemplate: { type: 'string', default: '•••• {lastFour}', label: 'Last-four template' },\n    noPaymentRecordLabel: {\n      type: 'string',\n      default: 'Payment method not available',\n      label: 'No payment record label',\n    },\n    unresolvedOrderLabel: {\n      type: 'string',\n      default: 'Could not load the payment details',\n      label: 'Unresolved order label',\n    },\n    installmentTemplate: {\n      type: 'string',\n      default: '{count}x of {total}',\n      label: 'Installment template',\n    },\n  },\n  guideline:\n    'Read-only recap, on a post-purchase confirmation surface, of the card the shopper paid with — sourced from the settled order (Query.order), never the live order form. Owns its own fragment; requires no ancestor context, so it composes standalone. Renders exactly one of four states, in strict precedence: nothing while the query is in flight; a role=\"alert\" notice when the order group does not resolve; an informational line when the order resolves with no payment record; or the recap itself (network, plus last four whenever the projection carries one, plus an installment line — count and settled total only, never a per-installment amount or interest rate — whenever the settled record reports one). Never compose it in checkout — the order group it reads does not exist until the order is placed, and no component renders a payment recap there. Never renders a full card number or CVV. See order-placed-payment-summary.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Renders the settled order's payment recap on a confirmation surface. Resolves through\n * `resolveOrderPlacedPayment`'s fixed precedence and renders exactly one state: the unresolved\n * notice as an inline `role=\"alert\"` element (FR-6); the no-record line as plain\n * informational text; the in-flight state as nothing at all (Decision 6); the recap as network plus\n * last four (whenever present) plus the installment line (whenever the settled record reports one,\n * T33). Requires no context — composable standalone.\n */\nexport function OrderPlacedPaymentSummary({\n  className,\n  lastFourTemplate = '•••• {lastFour}',\n  noPaymentRecordLabel = 'Payment method not available',\n  unresolvedOrderLabel = 'Could not load the payment details',\n  installmentTemplate = '{count}x of {total}',\n  $data: $dataProp,\n}: OrderPlacedPaymentSummaryProps) {\n  const $data = useDataOverride($dataProp);\n  const { loading } = useContext(ReactiveRootContext);\n  const resolved = resolveOrderPlacedPayment($data ?? null, loading);\n\n  if (resolved.kind === 'loading') return null;\n\n  if (resolved.kind === 'unresolved') {\n    return (\n      <div\n        className={className}\n        role=\"alert\"\n        data-fs-order-placed-payment-summary=\"\"\n        data-fs-order-placed-payment-summary-unresolved=\"\"\n      >\n        {unresolvedOrderLabel}\n      </div>\n    );\n  }\n\n  if (resolved.kind === 'no-record') {\n    return (\n      <div\n        className={className}\n        data-fs-order-placed-payment-summary=\"\"\n        data-fs-order-placed-payment-summary-no-record=\"\"\n      >\n        {noPaymentRecordLabel}\n      </div>\n    );\n  }\n\n  const { network, lastFourDigits, installment } = resolved;\n  // `substituteTemplate` inserts every value literally (Decision 7): lastFourDigits is server-sourced\n  // and unconstrained (a plain `String` in the schema, mapped straight from VTEX's payment.lastDigits\n  // with no length/charset check — schema.graphql:2508, mappers.ts:650), so a hostile or buggy\n  // upstream value can never rewrite the surrounding template text (S1).\n  const lastFourText = lastFourDigits ? substituteTemplate(lastFourTemplate, { lastFour: lastFourDigits }) : null;\n  // network and lastFourDigits are each independently nullable (schema.graphql:2496-2516,\n  // mappers.ts:649-651) — the no-record gate above fires only when BOTH are null (FR-5), so a record\n  // carrying just one of them still reaches this branch. Joining only the present parts avoids a\n  // leading space (network null, lastFourDigits set) (R2).\n  const methodText = [network, lastFourText].filter(Boolean).join(' ');\n  // FR-4/FR-6: rendered whenever installment resolves, regardless of the count's value (Open\n  // Question 3 — whether to suppress at count <= 1 — is left to a future product decision; this\n  // component has no such special case today), and only inside this recap branch.\n  const installmentText = installment ? formatInstallmentLine(installmentTemplate, installment) : null;\n\n  return (\n    <div className={className} data-fs-order-placed-payment-summary=\"\">\n      {methodText ? <p data-fs-order-placed-payment-summary-method=\"\">{methodText}</p> : null}\n      {installmentText ? <p data-fs-order-placed-payment-summary-installment=\"\">{installmentText}</p> : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-placed-payment-summary.js","names":[],"sources":["../../../src/matter/order-placed-payment-summary/order-placed-payment-summary.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { useContext } from 'react';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ReactiveRootContext } from '../../sdk/data/page-reactive-data-root.js';\nimport type { MessageFormatter } from '../../sdk/i18n/message-formatter.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { useConfirmationLastFour } from '../../sdk/payment/confirmation-last-four.js';\n\n/**\n * OrderPlacedPaymentSummary matter (epic `credit-card`, T17 — recap the payment on the order\n * confirmation). Single-file matter per ADR-0001: owns its own `Query.order(id: $orderId)`\n * fragment and sets no `requiresContext`, so it composes independently on a confirmation surface — no\n * ancestor context needed.\n *\n * This component is sourced from the settled order, never the live order form\n * (specs/order-placed-payment-summary.md, Decision 1): `Query.payment` projects the live order form\n * and stops resolving once the order is placed, so a post-purchase recap needs the settled-order\n * projection (`Query.order`, T16) instead — never compose it in checkout, and never\n * point this component at `Query.payment`.\n *\n * Read-only recap — no write affordance, no internal state; every transition is driven purely by\n * `$data` and `loading`.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment OrderPlacedPaymentSummaryData on Query {\n    order(id: $orderId) {\n      __typename\n      id\n      reference\n      network\n      lastFourDigits\n      installment {\n        count\n        total {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Content model. A message field is read only from `$content`.\n// ---------------------------------------------------------------------------\n\nexport const OrderPlacedPaymentSummaryContent = defineContentType({\n  id: 'order-placed-payment-summary',\n  title: 'Order Placed Payment Summary',\n  description: 'Copy of the payment recap on the order confirmation.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      lastFourTemplate: {\n        type: 'string',\n        title: 'Last four',\n        description: 'Rendered only when the last four digits resolve.',\n        format: 'icu-message',\n        messageSource: '•••• {lastFour}',\n        messageArguments: { type: 'object', properties: { lastFour: { type: 'string' } } },\n        messageExample: { lastFour: '4242' },\n      },\n      noPaymentRecordLabel: {\n        type: 'string',\n        title: 'No payment record',\n        description: 'Shown when the order resolves but carries no projectable payment record.',\n        format: 'icu-message',\n        messageSource: 'Payment method not available',\n      },\n      unresolvedOrderLabel: {\n        type: 'string',\n        title: 'Unresolved order',\n        description: 'Shown when the order group does not resolve to a settled order.',\n        format: 'icu-message',\n        messageSource: 'Could not load the payment details',\n      },\n      installmentTemplate: {\n        type: 'string',\n        title: 'Installment',\n        description:\n          '`total` is the formatted settled payment, never a per-installment amount, which is why the source says \"total\" instead of \"of\".',\n        format: 'icu-message',\n        messageSource: '{count}x total {total}',\n        messageArguments: {\n          type: 'object',\n          properties: { count: { type: 'integer' }, total: { type: 'string' } },\n        },\n        messageExample: { count: 3, total: 'R$ 600,00' },\n      },\n      installmentCountTemplate: {\n        type: 'string',\n        title: 'Installment count',\n        description: 'Rendered instead of the installment message when the settled record has no total.',\n        format: 'icu-message',\n        messageSource: '{count}x',\n        messageArguments: { type: 'object', properties: { count: { type: 'integer' } } },\n        messageExample: { count: 3 },\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * The installment plan the order was charged in (T33, specs/settle-and-project-the-placed-\n * order.md). Null when the settled record reports none — never fabricated, never defaulted to\n * `{ count: 1 }`. `total` is null when the source carries the count but not enough to build a\n * Money from (Decision 2: the settled-order source never carries a per-installment amount or an\n * interest rate at all, see US-2).\n */\nexport type OrderPlacedInstallment = {\n  count: number;\n  total?: { amount: string; currencyCode: string } | null;\n} | null;\n\n/**\n * The `$data` slice forwarded by the reactive runtime. `OrderPlacedPaymentSummaryData` selects\n * exactly one top-level field (`order`), so per ADR-0015 the compiler derives a single entity\n * fragment and `$data` is the unwrapped value of that field — never a `{ order: … }` wrapper. `null`\n * when the order group does not resolve to a settled order.\n */\nexport type OrderPlacedPaymentSummaryData = {\n  /** The order group. Compared with the carried last four's own order group, never rendered. */\n  reference?: string | null;\n  network?: string | null;\n  lastFourDigits?: string | null;\n  installment?: OrderPlacedInstallment;\n} | null;\n\n/** The four states the recap resolves to, in strict, total precedence order. */\ntype ResolvedOrderPlacedPayment =\n  | { kind: 'loading' }\n  | { kind: 'unresolved' }\n  | { kind: 'no-record' }\n  | {\n      kind: 'recap';\n      network: string;\n      lastFourDigits: string | null;\n      installment: OrderPlacedInstallment;\n    };\n\nexport type OrderPlacedPaymentSummaryProps = MessageLocaleProp & {\n  className?: string;\n  /** The last-four, no-record, unresolved and installment messages. */\n  $content?: ContentValue<typeof OrderPlacedPaymentSummaryContent>;\n  /** Unwrapped `Order` slice forwarded by the reactive runtime — never a `{ order: … }` wrapper. */\n  $data?: OrderPlacedPaymentSummaryData;\n};\n\n// ---------------------------------------------------------------------------\n// Resolution\n// ---------------------------------------------------------------------------\n\n/**\n * Resolves `$data` plus the reactive root's `loading` into exactly one of four states, in a total,\n * ordered precedence. A split purchase is read whole (docs/features/order-placed/rfc.md, 3.1), so no\n * error carries a state of its own: any failed read leaves `$data` null and resolves to `unresolved`.\n * `loading && data == null` separates a transient in-flight window from a genuinely unresolved order\n * group, so the unresolved alert never flashes on first paint of a successful confirmation. `no-record` fires only when network and\n * lastFourDigits are both null — a record carrying either still renders as `recap` (Open Question 5).\n *\n * `no-record`'s gate never reads installment (FR-6, INV-6): an order carrying an installment but\n * neither network nor lastFourDigits still renders `no-record`, not a recap with only an installment\n * line. The order system sends no card label, so the recap reads none\n * (docs/features/order-placed/rfc.md, 4.5).\n */\nfunction resolveOrderPlacedPayment(\n  data: OrderPlacedPaymentSummaryData,\n  loading: boolean,\n  carriedLastFour: string | null,\n): ResolvedOrderPlacedPayment {\n  if (loading && data == null) return { kind: 'loading' };\n  if (data == null) return { kind: 'unresolved' };\n  if (data.network == null && data.lastFourDigits == null) return { kind: 'no-record' };\n  return {\n    kind: 'recap',\n    network: data.network ?? '',\n    // The settled record's own last four always wins; the carried one only fills a gap beside a network.\n    lastFourDigits: data.lastFourDigits ?? (data.network == null ? null : carriedLastFour),\n    installment: data.installment ?? null,\n  };\n}\n\n/** Locale-formats a settled Money value (e.g. \"R$ 600,00\"). Fixed to pt-BR — not because it matches\n * every other default in this component (T31 moved every copy default here to en-US, which falsifies\n * that reasoning) but because this component has no `locale` prop of its own to read instead: adding\n * one is a formatting change, not a copy change, and is out of this task's scope (see OQ-3 in\n * specs/make-the-payment-components-authored-copy.md).\n *\n * `currencyCode` reaches this function already validated: `Money.currencyCode` is `CurrencyCode!`,\n * a GraphQL enum (`base/schema.graphql:186,206`), so a value outside the declared members fails\n * GraphQL's own enum serialization server-side and nulls `total` before it ever reaches a query\n * result — verified against this app's exact `buildSubgraphSchema` wiring (T33 fix pass: an empty\n * string / \"XX\" / \"BRLL\" each produced a `total: null` field error, never a value reaching here).\n * The try/catch below is defense in depth only, for a caller that bypasses that enum entirely (a\n * Storybook fixture, a `$data` override, a future schema change) — never expected to fire against a\n * real query response. */\nfunction formatMoney(money: { amount: string; currencyCode: string }): string {\n  try {\n    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: money.currencyCode }).format(\n      Number(money.amount),\n    );\n  } catch {\n    return money.amount;\n  }\n}\n\n/** A record with a count but no total (never a fabricated amount) renders `installmentCountTemplate` instead. */\nfunction formatInstallmentLine(\n  { format }: MessageFormatter<typeof OrderPlacedPaymentSummaryContent>,\n  installment: { count: number; total?: { amount: string; currencyCode: string } | null },\n): string {\n  const { count, total } = installment;\n  if (!total) {\n    return format('installmentCountTemplate', { count }).trim();\n  }\n  return format('installmentTemplate', { count, total: formatMoney(total) }).trim();\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const OrderPlacedPaymentSummaryDefinition = defineComponent<OrderPlacedPaymentSummaryProps>({\n  name: 'OrderPlacedPaymentSummary',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedPaymentSummary,\n  fragment,\n  fetchStrategy: 'reactive',\n  content: OrderPlacedPaymentSummaryContent,\n  editor: { label: 'Order Placed Payment Summary', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Read-only recap, on a post-purchase confirmation surface, of the card the shopper paid with — sourced from the settled order (Query.order), never the live order form. Owns its own fragment; requires no ancestor context, so it composes standalone. Renders exactly one of four states, in strict precedence: nothing while the query is in flight; a role=\"alert\" notice when the order group does not resolve; an informational line when the order resolves with no payment record; or the recap itself (network, plus last four whenever the projection carries one, plus an installment line — count and settled total only, never a per-installment amount or interest rate — whenever the settled record reports one). Never compose it in checkout — the order group it reads does not exist until the order is placed, and no component renders a payment recap there. Its copy is the $content messages lastFourTemplate, noPaymentRecordLabel, unresolvedOrderLabel, installmentTemplate and installmentCountTemplate. Never renders a full card number or CVV. See order-placed-payment-summary.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Renders the settled order's payment recap on a confirmation surface. Resolves through\n * `resolveOrderPlacedPayment`'s fixed precedence and renders exactly one state: the unresolved\n * notice as an inline `role=\"alert\"` element (FR-6); the no-record line as plain\n * informational text; the in-flight state as nothing at all (Decision 6); the recap as network plus\n * last four (whenever present) plus the installment line (whenever the settled record reports one,\n * T33). Requires no context — composable standalone.\n */\nexport function OrderPlacedPaymentSummary({\n  className,\n  $content,\n  $locale,\n  $data: $dataProp,\n}: Readonly<OrderPlacedPaymentSummaryProps>) {\n  const $data = useDataOverride($dataProp);\n  const messages = useMessageFormatter(OrderPlacedPaymentSummaryContent, $content);\n  const { loading } = useContext(ReactiveRootContext);\n  const carriedLastFour = useConfirmationLastFour($data?.reference);\n  const resolved = resolveOrderPlacedPayment($data ?? null, loading, carriedLastFour);\n\n  if (resolved.kind === 'loading') return null;\n\n  if (resolved.kind === 'unresolved') {\n    return (\n      <div\n        className={className}\n        role=\"alert\"\n        data-fs-order-placed-payment-summary=\"\"\n        data-fs-order-placed-payment-summary-unresolved=\"\"\n      >\n        {messages.format('unresolvedOrderLabel')}\n      </div>\n    );\n  }\n\n  if (resolved.kind === 'no-record') {\n    return (\n      <div\n        className={className}\n        data-fs-order-placed-payment-summary=\"\"\n        data-fs-order-placed-payment-summary-no-record=\"\"\n      >\n        {messages.format('noPaymentRecordLabel')}\n      </div>\n    );\n  }\n\n  const { network, lastFourDigits, installment } = resolved;\n  // An argument value is inserted literally: lastFourDigits is server-sourced and unconstrained, so a\n  // hostile or buggy upstream value can never rewrite the surrounding message text (S1).\n  const lastFourText = lastFourDigits ? messages.format('lastFourTemplate', { lastFour: lastFourDigits }) : null;\n  // network and lastFourDigits are each independently nullable (schema.graphql:2496-2516,\n  // mappers.ts:649-651) — the no-record gate above fires only when BOTH are null (FR-5), so a record\n  // carrying just one of them still reaches this branch. Joining only the present parts avoids a\n  // leading space (network null, lastFourDigits set) (R2).\n  const methodText = [network, lastFourText].filter(Boolean).join(' ');\n  // FR-4/FR-6: rendered whenever installment resolves, regardless of the count's value (Open\n  // Question 3 — whether to suppress at count <= 1 — is left to a future product decision; this\n  // component has no such special case today), and only inside this recap branch.\n  const installmentText = installment ? formatInstallmentLine(messages, installment) : null;\n\n  return (\n    <div className={className} data-fs-order-placed-payment-summary=\"\">\n      {methodText ? <p data-fs-order-placed-payment-summary-method=\"\">{methodText}</p> : null}\n      {installmentText ? <p data-fs-order-placed-payment-summary-installment=\"\">{installmentText}</p> : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-progress/order-progress.d.ts

@@ -1,4 +1,4 @@
-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 { ComponentPropsWithRef, Ref } from "react";
@@ -14,34 +14,50 @@ export declare const OrderProgressContent: {
       readonly label: {
         readonly type: "string";
         readonly title: "Accessible name";
+        readonly format: "icu-message";
+        readonly messageSource: "Order progress";
       };
       readonly placed: {
         readonly type: "string";
         readonly title: "Order placed";
+        readonly format: "icu-message";
+        readonly messageSource: "Order placed";
       };
       readonly payment: {
         readonly type: "string";
         readonly title: "Payment";
+        readonly format: "icu-message";
+        readonly messageSource: "Payment";
       };
       readonly processing: {
         readonly type: "string";
         readonly title: "Processing";
+        readonly format: "icu-message";
+        readonly messageSource: "Processing";
       };
       readonly shipping: {
         readonly type: "string";
         readonly title: "Shipping";
+        readonly format: "icu-message";
+        readonly messageSource: "Shipping";
       };
       readonly stateDone: {
         readonly type: "string";
         readonly title: "Completed";
+        readonly format: "icu-message";
+        readonly messageSource: "Completed";
       };
       readonly stateCurrent: {
         readonly type: "string";
         readonly title: "In progress";
+        readonly format: "icu-message";
+        readonly messageSource: "In progress";
       };
       readonly statePending: {
         readonly type: "string";
         readonly title: "Not started";
+        readonly format: "icu-message";
+        readonly messageSource: "Not started";
       };
     };
   };
@@ -67,18 +83,13 @@ export type OrderProgressOrder = {
  * that field's value, so this is the order itself, or null when the read resolves nothing.
  */
 export type OrderProgressData = OrderProgressOrder | null;
-export type OrderProgressProps = Readonly<{
+export type OrderProgressProps = MessageLocaleProp & Readonly<{
   $data?: OrderProgressData | null;
   $content?: OrderProgressContentValue;
   className?: string;
   ref?: Ref<HTMLOListElement>;
 }>;
-export declare const OrderProgressDefinition: ComponentDefinition<Readonly<{
-  $data?: OrderProgressData | null;
-  $content?: OrderProgressContentValue;
-  className?: string;
-  ref?: Ref<HTMLOListElement>;
-}>>;
+export declare const OrderProgressDefinition: ComponentDefinition<OrderProgressProps>;
 export declare function OrderProgressSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function OrderProgress({ $data, $content, className, ref }: OrderProgressProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion

package/dist/matter/order-progress/order-progress.js

@@ -2,7 +2,7 @@
 import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/order-progress/order-progress.tsx
 const fragment = `
@@ -31,55 +31,66 @@ const OrderProgressContent = defineContentType({
 		properties: {
 			label: {
 				type: "string",
-				title: "Accessible name"
+				title: "Accessible name",
+				format: "icu-message",
+				messageSource: "Order progress"
 			},
 			placed: {
 				type: "string",
-				title: "Order placed"
+				title: "Order placed",
+				format: "icu-message",
+				messageSource: "Order placed"
 			},
 			payment: {
 				type: "string",
-				title: "Payment"
+				title: "Payment",
+				format: "icu-message",
+				messageSource: "Payment"
 			},
 			processing: {
 				type: "string",
-				title: "Processing"
+				title: "Processing",
+				format: "icu-message",
+				messageSource: "Processing"
 			},
 			shipping: {
 				type: "string",
-				title: "Shipping"
+				title: "Shipping",
+				format: "icu-message",
+				messageSource: "Shipping"
 			},
 			stateDone: {
 				type: "string",
-				title: "Completed"
+				title: "Completed",
+				format: "icu-message",
+				messageSource: "Completed"
 			},
 			stateCurrent: {
 				type: "string",
-				title: "In progress"
+				title: "In progress",
+				format: "icu-message",
+				messageSource: "In progress"
 			},
 			statePending: {
 				type: "string",
-				title: "Not started"
+				title: "Not started",
+				format: "icu-message",
+				messageSource: "Not started"
 			}
 		}
 	}
 });
+/** Each stage's name is also the message field that labels it. */
 const STAGES = [
 	"placed",
 	"payment",
 	"processing",
 	"shipping"
 ];
-const STAGE_LABELS = {
-	placed: "fs/order.stage.placed",
-	payment: "fs/order.stage.payment",
-	processing: "fs/order.stage.processing",
-	shipping: "fs/order.stage.shipping"
-};
-const STATE_LABELS = {
-	done: "fs/order.stage-state.done",
-	current: "fs/order.stage-state.current",
-	pending: "fs/order.stage-state.pending"
+const STATE_FIELDS = {
+	done: "stateDone",
+	current: "stateCurrent",
+	pending: "statePending"
 };
 const OrderProgressDefinition = defineComponent({
 	name: "OrderProgress",
@@ -94,11 +105,8 @@ const OrderProgressDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "Four stages of one order on the order page: placed, payment, processing, shipping, with a line up to the current one. Stage names and state sentences are content; a blank field keeps the catalogue. Reads the stage the API resolved; style each stage through its state hook."
+	guideline: "Four stages of one order on the order page: placed, payment, processing, shipping, with a line up to the current one. Stage names and state sentences are content. Reads the stage the API resolved; style each stage through its state hook."
 });
-function authored(value, fallback) {
-	return value?.trim() || fallback;
-}
 function currentStage(value) {
 	switch (value) {
 		case "PAYMENT": return "payment";
@@ -138,36 +146,20 @@ function OrderProgressSkeleton({ className, ...props }) {
 		children: STAGES.map((stage) => /* @__PURE__ */ jsx("span", { "data-fs-order-progress-skeleton-stage": "" }, stage))
 	});
 }
-function stageSentence(stage, content) {
-	switch (stage) {
-		case "placed": return content?.placed;
-		case "payment": return content?.payment;
-		case "processing": return content?.processing;
-		case "shipping": return content?.shipping;
-	}
-}
-function stateSentence(state, content) {
-	switch (state) {
-		case "done": return content?.stateDone;
-		case "current": return content?.stateCurrent;
-		case "pending": return content?.statePending;
-		default: return;
-	}
-}
 function OrderProgress({ $data, $content, className, ref }) {
-	const intl = useIntl();
+	const { format } = useMessageFormatter(OrderProgressContent, $content);
 	const order = $data;
 	if (!order) return null;
 	const stages = stageModels(order);
 	return /* @__PURE__ */ jsx("ol", {
 		ref,
-		"aria-label": authored($content?.label, intl.formatMessage({ id: "fs/order.progress.label" })),
+		"aria-label": format("label"),
 		className,
 		"data-fs-order-progress": "",
 		"data-fs-order-progress-current": currentStage(order.progress.stage),
 		"data-fs-order-progress-cancelled": order.progress.cancelled ? "" : void 0,
 		children: stages.map(({ stage, state, line }) => {
-			const statusLabel = STATE_LABELS[state];
+			const stateField = STATE_FIELDS[state];
 			return /* @__PURE__ */ jsxs("li", {
 				"data-fs-order-progress-stage": stage,
 				"data-fs-order-progress-stage-state": state,
@@ -186,11 +178,11 @@ function OrderProgress({ $data, $content, className, ref }) {
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"data-fs-order-progress-label": "",
-						children: authored(stageSentence(stage, $content), intl.formatMessage({ id: STAGE_LABELS[stage] }))
+						children: format(stage)
 					}),
-					statusLabel ? /* @__PURE__ */ jsx("span", {
+					stateField ? /* @__PURE__ */ jsx("span", {
 						"data-fs-order-progress-status": "",
-						children: authored(stateSentence(state, $content), intl.formatMessage({ id: statusLabel }))
+						children: format(stateField)
 					}) : null
 				]
 			}, stage);