@vtex/faststore 0.0.5 → 0.0.6

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

@@ -0,0 +1,305 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.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 { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CombinedGraphQLErrors } from "@apollo/client/errors";
+//#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)`
+* fragment and sets no `requiresContext`, so it composes independently on a confirmation surface — no
+* ancestor context needed.
+*
+* This component is sourced from the settled order, never the live order form
+* (specs/order-placed-payment-summary.md, Decision 1): `Query.payment` projects the live order form
+* and stops resolving once the order is placed, so a post-purchase recap needs the settled-order
+* projection (`Query.order`, T16) instead — never compose it in checkout, and never
+* point this component at `Query.payment`.
+*
+* Read-only recap — no write affordance, no internal state; every transition is driven purely by
+* `$data`, `loading`, and the reactive root's query error (the multi-seller signal — Decision 4).
+*/
+const fragment = `
+  fragment OrderPlacedPaymentSummaryData on Query {
+    order(orderGroup: $orderGroup) {
+      __typename
+      id
+      network
+      lastFourDigits
+      label
+      installment {
+        count
+        total {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+`;
+const MULTI_SELLER_ERROR_CODE = "UNSUPPORTED_MULTI_SELLER_ORDER";
+const TOTAL_TOKEN = "{total}";
+const COUNT_TOKEN = "{count}";
+/**
+* Extracts the multi-seller signal from the reactive root's query error (Decision 4): `Query.order`
+* throws a `GraphQLError` with `extensions.code === 'UNSUPPORTED_MULTI_SELLER_ORDER'` and
+* `extensions.sellerCount` set to the seller count, rather than returning a data field — the count
+* exists only inside the combined GraphQL error's own `errors[].extensions`, never on `$data`.
+* Returns `null` when `error` is absent, is not a `CombinedGraphQLErrors`, or carries no matching
+* entry — a differently-coded failure (e.g. a generic upstream error) falls through to the
+* `unresolved` state instead, matching FR-5's precedence.
+*/
+function resolveMultiSellerSignal(error) {
+	if (!error || !CombinedGraphQLErrors.is(error)) return null;
+	const multiSellerError = error.errors.find((graphQLError) => graphQLError.extensions?.code === MULTI_SELLER_ERROR_CODE);
+	if (!multiSellerError) return null;
+	const sellerCount = multiSellerError.extensions?.sellerCount;
+	return { sellerCount: typeof sellerCount === "number" ? sellerCount : null };
+}
+/**
+* Resolves `$data` plus the reactive root's `loading`/`error` into exactly one of five states, in
+* FR-5's total, ordered precedence: multi-seller wins over everything else — including a resolved
+* `$data` — because in that state the one seller's card that *is* present would otherwise be shown as
+* if it were the whole payment (Decision 4). `loading && data == null` (Decision 6) separates a
+* transient in-flight window from a genuinely unresolved order group, so the unresolved alert never
+* flashes on first paint of a successful confirmation. `no-record` fires only when every recap field
+* is null — a record carrying just one of the three still renders as `recap` (Open Question 5).
+*
+* `no-record`'s gate is unchanged by T33 (FR-6, INV-6): it still checks only network/lastFourDigits/
+* label, never installment — an order carrying an installment but none of the original three fields
+* still renders `no-record`, not a recap with only an installment line.
+*/
+function resolveOrderPlacedPayment(data, loading, error) {
+	const multiSeller = resolveMultiSellerSignal(error);
+	if (multiSeller) return {
+		kind: "multi-seller",
+		sellerCount: multiSeller.sellerCount
+	};
+	if (loading && data == null) return { kind: "loading" };
+	if (data == null) return { kind: "unresolved" };
+	if (data.network == null && data.lastFourDigits == null && data.label == null) return { kind: "no-record" };
+	return {
+		kind: "recap",
+		network: data.network ?? "",
+		lastFourDigits: data.lastFourDigits ?? null,
+		label: data.label ?? null,
+		installment: data.installment ?? null
+	};
+}
+/**
+* Substitutes `{count}` when the seller count is known; otherwise drops the token and collapses the
+* resulting run of spaces, so an unknown count never prints the literal string "undefined" or "NaN".
+*/
+function formatMultiSellerNotice(template, sellerCount) {
+	if (sellerCount == null) return substituteTemplate(template, { count: "" }).replace(/ {2,}/g, " ").trim();
+	return substituteTemplate(template, { count: String(sellerCount) });
+}
+/** Locale-formats a settled Money value (e.g. "R$ 600,00"). Fixed to pt-BR — not because it matches
+* every other default in this component (T31 moved every copy default here to en-US, which falsifies
+* that reasoning) but because this component has no `locale` prop of its own to read instead: adding
+* one is a formatting change, not a copy change, and is out of this task's scope (see OQ-3 in
+* specs/make-the-payment-components-authored-copy.md).
+*
+* `currencyCode` reaches this function already validated: `Money.currencyCode` is `CurrencyCode!`,
+* a GraphQL enum (`base/schema.graphql:186,206`), so a value outside the declared members fails
+* GraphQL's own enum serialization server-side and nulls `total` before it ever reaches a query
+* result — verified against this app's exact `buildSubgraphSchema` wiring (T33 fix pass: an empty
+* string / "XX" / "BRLL" each produced a `total: null` field error, never a value reaching here).
+* The try/catch below is defense in depth only, for a caller that bypasses that enum entirely (a
+* Storybook fixture, a `$data` override, a future schema change) — never expected to fire against a
+* real query response. */
+function formatMoney(money) {
+	try {
+		return new Intl.NumberFormat("pt-BR", {
+			style: "currency",
+			currency: money.currencyCode
+		}).format(Number(money.amount));
+	} catch {
+		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),
+		total: formatMoney(total)
+	}).trim();
+}
+const OrderPlacedPaymentSummaryDefinition = defineComponent({
+	name: "OrderPlacedPaymentSummary",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedPaymentSummary,
+	fragment,
+	fetchStrategy: "reactive",
+	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"
+		},
+		multiSellerNotice: {
+			type: "string",
+			default: "This order was split across {count} sellers; the payment summary does not cover split orders",
+			label: "Multi-seller notice"
+		},
+		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 five states, in strict precedence: a role=\"alert\" notice for a split (multi-seller) order — the projection never covers one; 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 the saved-card label when set, 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."
+});
+/**
+* Renders the settled order's payment recap on a confirmation surface. Resolves through
+* `resolveOrderPlacedPayment`'s fixed precedence and renders exactly one state: the multi-seller and
+* unresolved notices as inline `role="alert"` elements (FR-6); the no-record line as plain
+* informational text; the in-flight state as nothing at all (Decision 6); the recap as network plus
+* last four (whenever present) plus the saved-card label (whenever set) 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", multiSellerNotice = "This order was split across {count} sellers; the payment summary does not cover split orders", installmentTemplate = "{count}x of {total}", $data: $dataProp }) {
+	const $data = useDataOverride($dataProp);
+	const { loading, error } = useContext(ReactiveRootContext);
+	const resolved = resolveOrderPlacedPayment($data ?? null, loading, error);
+	if (resolved.kind === "loading") return null;
+	if (resolved.kind === "multi-seller") return /* @__PURE__ */ jsx("div", {
+		className,
+		role: "alert",
+		"data-fs-order-placed-payment-summary": "",
+		"data-fs-order-placed-payment-summary-multi-seller": "",
+		children: formatMultiSellerNotice(multiSellerNotice, resolved.sellerCount)
+	});
+	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
+	});
+	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
+	});
+	const { network, lastFourDigits, label, installment } = resolved;
+	const methodText = [network, lastFourDigits ? substituteTemplate(lastFourTemplate, { lastFour: lastFourDigits }) : null].filter(Boolean).join(" ");
+	const installmentText = installment ? formatInstallmentLine(installmentTemplate, installment) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-fs-order-placed-payment-summary": "",
+		children: [
+			methodText ? /* @__PURE__ */ jsx("p", {
+				"data-fs-order-placed-payment-summary-method": "",
+				children: methodText
+			}) : null,
+			label ? /* @__PURE__ */ jsx("p", {
+				"data-fs-order-placed-payment-summary-label": "",
+				children: label
+			}) : null,
+			installmentText ? /* @__PURE__ */ jsx("p", {
+				"data-fs-order-placed-payment-summary-installment": "",
+				children: installmentText
+			}) : null
+		]
+	});
+}
+//#endregion
+export { OrderPlacedPaymentSummary, OrderPlacedPaymentSummaryDefinition };
+
+//# sourceMappingURL=order-placed-payment-summary.js.map

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

@@ -0,0 +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 type { ErrorLike } from '@apollo/client';\nimport { CombinedGraphQLErrors } from '@apollo/client/errors';\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`, `loading`, and the reactive root's query error (the multi-seller signal — Decision 4).\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      label\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  label?: string | null;\n  installment?: OrderPlacedInstallment;\n} | null;\n\n/** The five states FR-5 resolves to, in strict, total precedence order. */\ntype ResolvedOrderPlacedPayment =\n  | { kind: 'multi-seller'; sellerCount: number | null }\n  | { kind: 'loading' }\n  | { kind: 'unresolved' }\n  | { kind: 'no-record' }\n  | {\n      kind: 'recap';\n      network: string;\n      lastFourDigits: string | null;\n      label: 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  /** Shown for a split order; `{count}` placeholder, omitted when the count is unknown. */\n  multiSellerNotice?: 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 MULTI_SELLER_ERROR_CODE = 'UNSUPPORTED_MULTI_SELLER_ORDER';\nconst TOTAL_TOKEN = '{total}';\nconst COUNT_TOKEN = '{count}';\n\n/**\n * Extracts the multi-seller signal from the reactive root's query error (Decision 4): `Query.order`\n * throws a `GraphQLError` with `extensions.code === 'UNSUPPORTED_MULTI_SELLER_ORDER'` and\n * `extensions.sellerCount` set to the seller count, rather than returning a data field — the count\n * exists only inside the combined GraphQL error's own `errors[].extensions`, never on `$data`.\n * Returns `null` when `error` is absent, is not a `CombinedGraphQLErrors`, or carries no matching\n * entry — a differently-coded failure (e.g. a generic upstream error) falls through to the\n * `unresolved` state instead, matching FR-5's precedence.\n */\nfunction resolveMultiSellerSignal(error: ErrorLike | undefined): { sellerCount: number | null } | null {\n  if (!error || !CombinedGraphQLErrors.is(error)) return null;\n  const multiSellerError = error.errors.find(\n    (graphQLError) => graphQLError.extensions?.code === MULTI_SELLER_ERROR_CODE,\n  );\n  if (!multiSellerError) return null;\n  const sellerCount = multiSellerError.extensions?.sellerCount;\n  return { sellerCount: typeof sellerCount === 'number' ? sellerCount : null };\n}\n\n/**\n * Resolves `$data` plus the reactive root's `loading`/`error` into exactly one of five states, in\n * FR-5's total, ordered precedence: multi-seller wins over everything else — including a resolved\n * `$data` — because in that state the one seller's card that *is* present would otherwise be shown as\n * if it were the whole payment (Decision 4). `loading && data == null` (Decision 6) separates a\n * transient in-flight window from a genuinely unresolved order group, so the unresolved alert never\n * flashes on first paint of a successful confirmation. `no-record` fires only when every recap field\n * is null — a record carrying just one of the three still renders as `recap` (Open Question 5).\n *\n * `no-record`'s gate is unchanged by T33 (FR-6, INV-6): it still checks only network/lastFourDigits/\n * label, never installment — an order carrying an installment but none of the original three fields\n * still renders `no-record`, not a recap with only an installment line.\n */\nfunction resolveOrderPlacedPayment(\n  data: OrderPlacedPaymentSummaryData,\n  loading: boolean,\n  error: ErrorLike | undefined,\n): ResolvedOrderPlacedPayment {\n  const multiSeller = resolveMultiSellerSignal(error);\n  if (multiSeller) return { kind: 'multi-seller', sellerCount: multiSeller.sellerCount };\n  if (loading && data == null) return { kind: 'loading' };\n  if (data == null) return { kind: 'unresolved' };\n  if (data.network == null && data.lastFourDigits == null && data.label == null) return { kind: 'no-record' };\n  return {\n    kind: 'recap',\n    network: data.network ?? '',\n    lastFourDigits: data.lastFourDigits ?? null,\n    label: data.label ?? null,\n    installment: data.installment ?? null,\n  };\n}\n\n/**\n * Substitutes `{count}` when the seller count is known; otherwise drops the token and collapses the\n * resulting run of spaces, so an unknown count never prints the literal string \"undefined\" or \"NaN\".\n */\nfunction formatMultiSellerNotice(template: string, sellerCount: number | null): string {\n  if (sellerCount == null) return substituteTemplate(template, { count: '' }).replace(/ {2,}/g, ' ').trim();\n  return substituteTemplate(template, { count: String(sellerCount) });\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    multiSellerNotice: {\n      type: 'string',\n      default: 'This order was split across {count} sellers; the payment summary does not cover split orders',\n      label: 'Multi-seller notice',\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 five states, in strict precedence: a role=\"alert\" notice for a split (multi-seller) order — the projection never covers one; 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 the saved-card label when set, 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 multi-seller and\n * unresolved notices as inline `role=\"alert\"` elements (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 saved-card label (whenever set) plus the installment line\n * (whenever the settled record reports one, 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  multiSellerNotice = 'This order was split across {count} sellers; the payment summary does not cover split orders',\n  installmentTemplate = '{count}x of {total}',\n  $data: $dataProp,\n}: OrderPlacedPaymentSummaryProps) {\n  const $data = useDataOverride($dataProp);\n  const { loading, error } = useContext(ReactiveRootContext);\n  const resolved = resolveOrderPlacedPayment($data ?? null, loading, error);\n\n  if (resolved.kind === 'loading') return null;\n\n  if (resolved.kind === 'multi-seller') {\n    return (\n      <div\n        className={className}\n        role=\"alert\"\n        data-fs-order-placed-payment-summary=\"\"\n        data-fs-order-placed-payment-summary-multi-seller=\"\"\n      >\n        {formatMultiSellerNotice(multiSellerNotice, resolved.sellerCount)}\n      </div>\n    );\n  }\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, label, 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/lastFourDigits/label are each independently nullable (schema.graphql:2496-2516,\n  // mappers.ts:649-651) — the no-record gate above fires only when ALL THREE are null (FR-5), so a\n  // record carrying just one or two of them still reaches this branch. Joining only the present parts\n  // avoids a leading space (network null, lastFourDigits set) and avoids rendering an empty <p> above\n  // the label line (network and lastFourDigits both null, label set) — the exact blank US-2 forbids\n  // (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      {label ? <p data-fs-order-placed-payment-summary-label=\"\">{label}</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/payment/payment-card-capture.d.ts

@@ -0,0 +1,19 @@
+import "../../sdk/actions/types.js";
+import "./use-payment-method-selection.js";
+import { ReactNode } from "react";
+//#region src/matter/payment/payment-card-capture.d.ts
+/**
+ * The checkout's `card-capture` provider (specs/sfs-3457-card-entry-card-capture-context.md),
+ * rendered by both payment roots inside their `PaymentSubmissionProvider`. It hands `CardEntry` the
+ * scoped methods and the selection facts, registers its capture as the `new-card` submission, folds
+ * the draft's non-sensitive values into the card, and sends it through `sendPayments`. It also owns
+ * `add_payment_info`, which needs the cart total `CardEntry` no longer reads.
+ */
+export type PaymentCartData = {
+  total?: {
+    amount: number;
+    currencyCode: string;
+  } | null;
+} | null;
+//#endregion
+//# sourceMappingURL=payment-card-capture.d.ts.map

package/dist/matter/payment/payment-card-capture.js

@@ -0,0 +1,129 @@
+"use client";
+import { usePaymentSubmission } from "../../sdk/payment/submission-registry.js";
+import { PAYMENT_NETWORK_ERROR_CODE } from "../../sdk/payment/operations.js";
+import { CardCaptureContext } from "../card-entry/card-capture.js";
+import { isCardMethod } from "./use-payment-method-selection.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/matter/payment/payment-card-capture.tsx
+/** The `add_payment_info` payment type for a card group; `undefined` for any other group (T140). */
+function paymentTypeOf(groupName) {
+	if (groupName === "creditCardPaymentGroup") return "Credit Card";
+	if (groupName === "debitCardPaymentGroup") return "Debit Card";
+}
+/** Mirrors `usePaymentActions`' own infrastructure-failure code for the same underlying meaning. */
+const MISSING_GATEWAY_ACTION_ERROR = {
+	code: PAYMENT_NETWORK_ERROR_CODE,
+	message: "Unable to complete the request. Please try again."
+};
+function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
+	const { register } = usePaymentSubmission();
+	const latest = useRef({
+		selection,
+		$actions
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			selection,
+			$actions
+		};
+	});
+	const total = cart?.total ?? null;
+	const totalRef = useRef(total);
+	const activeCaptures = useRef(0);
+	const analyticsDispatched = useRef(false);
+	const dispatchAddPaymentInfo = useCallback(() => {
+		const currentTotal = totalRef.current;
+		if (analyticsDispatched.current || activeCaptures.current === 0 || !currentTotal) return;
+		const track = latest.current.$actions?.analytics?.track;
+		if (!track) return;
+		const { methods, selectedMethodId } = latest.current.selection;
+		const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.groupName);
+		track({
+			name: "add_payment_info",
+			value: {
+				amount: currentTotal.amount,
+				currencyCode: currentTotal.currencyCode
+			},
+			...paymentType ? { paymentType } : {}
+		});
+		analyticsDispatched.current = true;
+	}, []);
+	useEffect(() => {
+		totalRef.current = total;
+		dispatchAddPaymentInfo();
+	}, [
+		total,
+		$actions,
+		dispatchAddPaymentInfo
+	]);
+	const registerCapture = useCallback((capture, preflight) => {
+		const submit = (transaction) => capture(async (card) => {
+			const sendPayments = latest.current.$actions?.payment?.sendPayments;
+			if (!sendPayments) {
+				console.error("[CardEntry] the payment action namespace is not injected");
+				return [MISSING_GATEWAY_ACTION_ERROR];
+			}
+			const { draft } = latest.current.selection;
+			return sendPayments({
+				transaction,
+				card: {
+					kind: "new",
+					...card,
+					document: draft.document ?? void 0,
+					cardLabel: draft.cardLabel ?? void 0,
+					saveCard: draft.saveCard ?? void 0
+				}
+			});
+		});
+		const unregister = register("new-card", submit, preflight);
+		activeCaptures.current += 1;
+		dispatchAddPaymentInfo();
+		return () => {
+			activeCaptures.current -= 1;
+			unregister();
+		};
+	}, [register, dispatchAddPaymentInfo]);
+	const { methods, placing, selectMethod, selectNewCard, setDraftBin, draft, cardPaymentCollapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectedMethod } = selection;
+	const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);
+	const value = useMemo(() => ({
+		networks: methods,
+		busy: placing,
+		clearOn: "success",
+		registerCapture,
+		selection: {
+			selectMethod,
+			selectNewCard,
+			setDraftBin,
+			path: draft.path,
+			bin: draft.bin,
+			collapsed: cardPaymentCollapsed,
+			cardModeActive,
+			selectedMethodId,
+			selectionOutOfScope,
+			selectionNonCard
+		}
+	}), [
+		methods,
+		placing,
+		registerCapture,
+		selectMethod,
+		selectNewCard,
+		setDraftBin,
+		draft.path,
+		draft.bin,
+		cardPaymentCollapsed,
+		cardModeActive,
+		selectedMethodId,
+		selectionOutOfScope,
+		selectionNonCard
+	]);
+	return /* @__PURE__ */ jsx(CardCaptureContext, {
+		value,
+		children
+	});
+}
+//#endregion
+export { PaymentCardCaptureProvider };
+
+//# sourceMappingURL=payment-card-capture.js.map

package/dist/matter/payment/payment-card-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-card-capture.js","names":[],"sources":["../../../src/matter/payment/payment-card-capture.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { type PaymentSubmission, usePaymentSubmission } from '../../sdk/payment/submission-registry.js';\nimport {\n  type CardCapture,\n  CardCaptureContext,\n  type CardCaptureContextValue,\n  type CardCapturePreflight,\n} from '../card-entry/card-capture.js';\nimport { isCardMethod, type PaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The checkout's `card-capture` provider (specs/sfs-3457-card-entry-card-capture-context.md),\n * rendered by both payment roots inside their `PaymentSubmissionProvider`. It hands `CardEntry` the\n * scoped methods and the selection facts, registers its capture as the `new-card` submission, folds\n * the draft's non-sensitive values into the card, and sends it through `sendPayments`. It also owns\n * `add_payment_info`, which needs the cart total `CardEntry` no longer reads.\n */\n\nexport type PaymentCartData = {\n  total?: { amount: number; currencyCode: string } | null;\n} | null;\n\n/** The `add_payment_info` payment type for a card group; `undefined` for any other group (T140). */\nfunction paymentTypeOf(groupName: string | undefined): 'Credit Card' | 'Debit Card' | undefined {\n  if (groupName === 'creditCardPaymentGroup') return 'Credit Card';\n  if (groupName === 'debitCardPaymentGroup') return 'Debit Card';\n  return undefined;\n}\n\n/** Mirrors `usePaymentActions`' own infrastructure-failure code for the same underlying meaning. */\nconst MISSING_GATEWAY_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\ntype PaymentCardCaptureProviderProps = Readonly<{\n  selection: PaymentMethodSelection;\n  cart: PaymentCartData | undefined;\n  $actions: ComponentActions | undefined;\n  children: ReactNode;\n}>;\n\nexport function PaymentCardCaptureProvider({ selection, cart, $actions, children }: PaymentCardCaptureProviderProps) {\n  const { register } = usePaymentSubmission();\n  // Read at submission and analytics time, never captured by a closure: the place-order sequence must\n  // fold the draft as it stands then, and a keystroke must not re-render the section.\n  const latest = useRef({ selection, $actions });\n  useLayoutEffect(() => {\n    latest.current = { selection, $actions };\n  });\n\n  const total = cart?.total ?? null;\n  const totalRef = useRef(total);\n  const activeCaptures = useRef(0);\n  const analyticsDispatched = useRef(false);\n\n  // `add_payment_info` (T2), once per root, when a card capture is mounted and the cart total has\n  // resolved. T140, Decision 5: `paymentType` comes from whatever is selected when it fires, and the key\n  // is absent otherwise; a later selection never re-fires it.\n  const dispatchAddPaymentInfo = useCallback(() => {\n    const currentTotal = totalRef.current;\n    if (analyticsDispatched.current || activeCaptures.current === 0 || !currentTotal) return;\n    const track = latest.current.$actions?.analytics?.track;\n    if (!track) return;\n    const { methods, selectedMethodId } = latest.current.selection;\n    const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.groupName);\n    track({\n      name: 'add_payment_info',\n      value: { amount: currentTotal.amount, currencyCode: currentTotal.currencyCode },\n      // The key itself must be absent when nothing resolves to a known card kind — never a present\n      // key holding `undefined` (toEcommercePayload's own doc comment carries the rest of this rule).\n      ...(paymentType ? { paymentType } : {}),\n    });\n    analyticsDispatched.current = true;\n  }, []);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `$actions` re-runs the dispatch when the analytics namespace arrives after the total; the dispatch reads it through `latest`.\n  useEffect(() => {\n    totalRef.current = total;\n    dispatchAddPaymentInfo();\n  }, [total, $actions, dispatchAddPaymentInfo]);\n\n  const registerCapture = useCallback(\n    (capture: CardCapture, preflight: CardCapturePreflight) => {\n      const submit: PaymentSubmission = (transaction) =>\n        capture(async (card) => {\n          const sendPayments = latest.current.$actions?.payment?.sendPayments;\n          if (!sendPayments) {\n            console.error('[CardEntry] the payment action namespace is not injected');\n            return [MISSING_GATEWAY_ACTION_ERROR];\n          }\n          const { draft } = latest.current.selection;\n          return sendPayments({\n            transaction,\n            card: {\n              kind: 'new',\n              ...card,\n              document: draft.document ?? undefined,\n              cardLabel: draft.cardLabel ?? undefined,\n              saveCard: draft.saveCard ?? undefined,\n            },\n          });\n        });\n      const unregister = register('new-card', submit, preflight);\n      activeCaptures.current += 1;\n      dispatchAddPaymentInfo();\n      return () => {\n        activeCaptures.current -= 1;\n        unregister();\n      };\n    },\n    [register, dispatchAddPaymentInfo],\n  );\n\n  const {\n    methods,\n    placing,\n    selectMethod,\n    selectNewCard,\n    setDraftBin,\n    draft,\n    cardPaymentCollapsed,\n    cardModeActive,\n    selectedMethodId,\n    selectionOutOfScope,\n    selectedMethod,\n  } = selection;\n  // T191 (FR-13, Decision 8): classified with the engine's own `isCardMethod`, so the card form's\n  // refusal and the collapse can never disagree about a method.\n  const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);\n\n  const value = useMemo<CardCaptureContextValue>(\n    () => ({\n      networks: methods,\n      busy: placing,\n      clearOn: 'success',\n      registerCapture,\n      selection: {\n        selectMethod,\n        selectNewCard,\n        setDraftBin,\n        path: draft.path,\n        bin: draft.bin,\n        collapsed: cardPaymentCollapsed,\n        cardModeActive,\n        selectedMethodId,\n        selectionOutOfScope,\n        selectionNonCard,\n      },\n    }),\n    [\n      methods,\n      placing,\n      registerCapture,\n      selectMethod,\n      selectNewCard,\n      setDraftBin,\n      draft.path,\n      draft.bin,\n      cardPaymentCollapsed,\n      cardModeActive,\n      selectedMethodId,\n      selectionOutOfScope,\n      selectionNonCard,\n    ],\n  );\n\n  return <CardCaptureContext value={value}>{children}</CardCaptureContext>;\n}\n"],"mappings":";;;;;;;;;AA2BA,SAAS,cAAc,WAAyE;CAC9F,IAAI,cAAc,0BAA0B,OAAO;CACnD,IAAI,cAAc,yBAAyB,OAAO;AAEpD;;AAGA,MAAM,+BAAiD;CACrD,MAAM;CACN,SAAS;AACX;AASA,SAAgB,2BAA2B,EAAE,WAAW,MAAM,UAAU,YAA6C;CACnH,MAAM,EAAE,aAAa,qBAAqB;CAG1C,MAAM,SAAS,OAAO;EAAE;EAAW;CAAS,CAAC;CAC7C,sBAAsB;EACpB,OAAO,UAAU;GAAE;GAAW;EAAS;CACzC,CAAC;CAED,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,iBAAiB,OAAO,CAAC;CAC/B,MAAM,sBAAsB,OAAO,KAAK;CAKxC,MAAM,yBAAyB,kBAAkB;EAC/C,MAAM,eAAe,SAAS;EAC9B,IAAI,oBAAoB,WAAW,eAAe,YAAY,KAAK,CAAC,cAAc;EAClF,MAAM,QAAQ,OAAO,QAAQ,UAAU,WAAW;EAClD,IAAI,CAAC,OAAO;EACZ,MAAM,EAAE,SAAS,qBAAqB,OAAO,QAAQ;EACrD,MAAM,cAAc,cAAc,QAAQ,MAAM,WAAW,OAAO,OAAO,gBAAgB,CAAC,EAAE,SAAS;EACrG,MAAM;GACJ,MAAM;GACN,OAAO;IAAE,QAAQ,aAAa;IAAQ,cAAc,aAAa;GAAa;GAG9E,GAAI,cAAc,EAAE,YAAY,IAAI,CAAC;EACvC,CAAC;EACD,oBAAoB,UAAU;CAChC,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,SAAS,UAAU;EACnB,uBAAuB;CACzB,GAAG;EAAC;EAAO;EAAU;CAAsB,CAAC;CAE5C,MAAM,kBAAkB,aACrB,SAAsB,cAAoC;EACzD,MAAM,UAA6B,gBACjC,QAAQ,OAAO,SAAS;GACtB,MAAM,eAAe,OAAO,QAAQ,UAAU,SAAS;GACvD,IAAI,CAAC,cAAc;IACjB,QAAQ,MAAM,0DAA0D;IACxE,OAAO,CAAC,4BAA4B;GACtC;GACA,MAAM,EAAE,UAAU,OAAO,QAAQ;GACjC,OAAO,aAAa;IAClB;IACA,MAAM;KACJ,MAAM;KACN,GAAG;KACH,UAAU,MAAM,YAAY,KAAA;KAC5B,WAAW,MAAM,aAAa,KAAA;KAC9B,UAAU,MAAM,YAAY,KAAA;IAC9B;GACF,CAAC;EACH,CAAC;EACH,MAAM,aAAa,SAAS,YAAY,QAAQ,SAAS;EACzD,eAAe,WAAW;EAC1B,uBAAuB;EACvB,aAAa;GACX,eAAe,WAAW;GAC1B,WAAW;EACb;CACF,GACA,CAAC,UAAU,sBAAsB,CACnC;CAEA,MAAM,EACJ,SACA,SACA,cACA,eACA,aACA,OACA,sBACA,gBACA,kBACA,qBACA,mBACE;CAGJ,MAAM,mBAAmB,mBAAmB,QAAQ,CAAC,aAAa,cAAc;CAEhF,MAAM,QAAQ,eACL;EACL,UAAU;EACV,MAAM;EACN,SAAS;EACT;EACA,WAAW;GACT;GACA;GACA;GACA,MAAM,MAAM;GACZ,KAAK,MAAM;GACX,WAAW;GACX;GACA;GACA;GACA;EACF;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN,MAAM;EACN;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OAAO,oBAAC,oBAAD;EAA2B;EAAQ;CAA6B,CAAA;AACzE"}

package/dist/matter/payment/payment-controller.d.ts

@@ -0,0 +1,24 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { PaymentSectionRootData } from "./payment.js";
+import { ReactNode } from "react";
+//#region src/matter/payment/payment-controller.d.ts
+export type PaymentSectionControllerProps = {
+  /**
+   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope
+   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and
+   * scopes to exactly that one group. An empty string scopes nothing.
+   */
+  group?: string | readonly string[];
+  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */
+  $data?: PaymentSectionRootData;
+  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */
+  $actions?: ComponentActions;
+  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */
+  children?: ReactNode;
+};
+export declare const PaymentSectionControllerDefinition: ComponentDefinition<PaymentSectionControllerProps>;
+export declare function PaymentSectionController({ group, $data: $dataProp, $actions: $actionsProp, children }: Readonly<PaymentSectionControllerProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//#endregion
+//# sourceMappingURL=payment-controller.d.ts.map