@vtex/faststore 0.0.6 → 0.0.8

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

@@ -0,0 +1 @@
+{"version":3,"file":"order-progress.js","names":[],"sources":["../../../src/matter/order-progress/order-progress.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderProgressData on Query {\n    customerOrder(id: $orderId) {\n      id\n      completion {\n        view\n        label\n      }\n      progress {\n        stage\n        paymentFailed\n        cancelled\n      }\n    }\n  }\n`;\n\nexport const OrderProgressContent = defineContentType({\n  id: 'order-progress',\n  title: 'Order Progress',\n  description: 'The stage names, the state sentences, and the accessible name of the progress list.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name' },\n      placed: { type: 'string', title: 'Order placed' },\n      payment: { type: 'string', title: 'Payment' },\n      processing: { type: 'string', title: 'Processing' },\n      shipping: { type: 'string', title: 'Shipping' },\n      stateDone: { type: 'string', title: 'Completed' },\n      stateCurrent: { type: 'string', title: 'In progress' },\n      statePending: { type: 'string', title: 'Not started' },\n    },\n  },\n});\n\nexport type OrderProgressContentValue = ContentValue<typeof OrderProgressContent>;\n\nexport type OrderProgressStage = 'placed' | 'payment' | 'processing' | 'shipping';\n\nexport type OrderProgressStageState = 'done' | 'current' | 'failed' | 'not-applicable' | 'pending';\n\nexport type OrderProgressLineState = 'done' | 'pending' | 'not-applicable';\n\nexport type OrderProgressOrder = {\n  id: string;\n  completion: { view: string; label: string };\n  progress: { stage: string; paymentFailed: boolean; cancelled: boolean };\n};\n\n/**\n * The `customerOrder` root the generator passes as `$data`. A single-root fragment is bound to\n * that field's value, so this is the order itself, or null when the read resolves nothing.\n */\nexport type OrderProgressData = OrderProgressOrder | null;\n\nexport type OrderProgressProps = Readonly<{\n  $data?: OrderProgressData | null;\n  $content?: OrderProgressContentValue;\n  className?: string;\n  ref?: Ref<HTMLOListElement>;\n}>;\n\nconst STAGES = ['placed', 'payment', 'processing', 'shipping'] as const satisfies readonly OrderProgressStage[];\n\nconst STAGE_LABELS: Record<OrderProgressStage, MessageId> = {\n  placed: 'fs/order.stage.placed',\n  payment: 'fs/order.stage.payment',\n  processing: 'fs/order.stage.processing',\n  shipping: 'fs/order.stage.shipping',\n};\n\nconst STATE_LABELS: Partial<Record<OrderProgressStageState, MessageId>> = {\n  done: 'fs/order.stage-state.done',\n  current: 'fs/order.stage-state.current',\n  pending: 'fs/order.stage-state.pending',\n};\n\nexport const OrderProgressDefinition = defineComponent<OrderProgressProps>({\n  name: 'OrderProgress',\n  importPath: '@vtex/faststore/components',\n  component: OrderProgress,\n  content: OrderProgressContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderProgressSkeleton,\n  editor: { label: 'Order Progress', category: 'content' },\n  schema: {},\n  guideline:\n    '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.',\n});\n\nfunction authored(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction currentStage(value: string): OrderProgressStage {\n  switch (value) {\n    case 'PAYMENT':\n      return 'payment';\n    case 'PROCESSING':\n      return 'processing';\n    case 'SHIPPING':\n      return 'shipping';\n    default:\n      return 'placed';\n  }\n}\n\ntype StageModel = {\n  stage: OrderProgressStage;\n  state: OrderProgressStageState;\n  line: OrderProgressLineState | null;\n};\n\nfunction stageState(index: number, current: number, order: OrderProgressOrder): OrderProgressStageState {\n  if (order.progress.cancelled) {\n    return STAGES[index] === 'payment' ? 'failed' : 'not-applicable';\n  }\n  if (index < current) {\n    return 'done';\n  }\n  if (index > current) {\n    return 'pending';\n  }\n  if (order.progress.paymentFailed) {\n    return 'failed';\n  }\n  return order.completion.view === 'COMPLETED' ? 'done' : 'current';\n}\n\nfunction lineState(state: OrderProgressStageState, cancelled: boolean): OrderProgressLineState {\n  if (cancelled) {\n    return 'not-applicable';\n  }\n  return state === 'pending' ? 'pending' : 'done';\n}\n\nfunction stageModels(order: OrderProgressOrder): StageModel[] {\n  const current = STAGES.indexOf(currentStage(order.progress.stage));\n  return STAGES.map((stage, index) => {\n    const state = stageState(index, current, order);\n    return { stage, state, line: index === 0 ? null : lineState(state, order.progress.cancelled) };\n  });\n}\n\nexport function OrderProgressSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-progress-skeleton=\"\" aria-hidden=\"true\">\n      {STAGES.map((stage) => (\n        <span key={stage} data-fs-order-progress-skeleton-stage=\"\" />\n      ))}\n    </div>\n  );\n}\n\nfunction stageSentence(stage: OrderProgressStage, content: OrderProgressContentValue | undefined): string | undefined {\n  switch (stage) {\n    case 'placed':\n      return content?.placed;\n    case 'payment':\n      return content?.payment;\n    case 'processing':\n      return content?.processing;\n    case 'shipping':\n      return content?.shipping;\n  }\n}\n\nfunction stateSentence(\n  state: OrderProgressStageState,\n  content: OrderProgressContentValue | undefined,\n): string | undefined {\n  switch (state) {\n    case 'done':\n      return content?.stateDone;\n    case 'current':\n      return content?.stateCurrent;\n    case 'pending':\n      return content?.statePending;\n    default:\n      return undefined;\n  }\n}\n\nexport function OrderProgress({ $data, $content, className, ref }: OrderProgressProps) {\n  const intl = useIntl();\n  const order = $data;\n  if (!order) {\n    return null;\n  }\n\n  const stages = stageModels(order);\n\n  return (\n    <ol\n      ref={ref}\n      aria-label={authored($content?.label, intl.formatMessage({ id: 'fs/order.progress.label' }))}\n      className={className}\n      data-fs-order-progress=\"\"\n      data-fs-order-progress-current={currentStage(order.progress.stage)}\n      data-fs-order-progress-cancelled={order.progress.cancelled ? '' : undefined}\n    >\n      {stages.map(({ stage, state, line }) => {\n        const statusLabel = STATE_LABELS[state];\n        return (\n          <li\n            key={stage}\n            data-fs-order-progress-stage={stage}\n            data-fs-order-progress-stage-state={state}\n            aria-current={state === 'current' ? 'step' : undefined}\n          >\n            <span data-fs-order-progress-track=\"\">\n              {line ? (\n                <span data-fs-order-progress-line=\"\" data-fs-order-progress-line-state={line} aria-hidden=\"true\" />\n              ) : null}\n              <span data-fs-order-progress-marker=\"\" aria-hidden=\"true\" />\n            </span>\n            <span data-fs-order-progress-label=\"\">\n              {authored(stageSentence(stage, $content), intl.formatMessage({ id: STAGE_LABELS[stage] }))}\n            </span>\n            {statusLabel ? (\n              <span data-fs-order-progress-status=\"\">\n                {authored(stateSentence(state, $content), intl.formatMessage({ id: statusLabel }))}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+import { ContentValue } 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";
+//#region src/matter/order-summary/order-summary.d.ts
+export declare const OrderSummaryContent: {
+  readonly id: "order-summary";
+  readonly title: "Order Summary";
+  readonly description: "The heading and the labels of the known total lines. An unknown total id keeps the name the API sent.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly heading: {
+        readonly type: "string";
+        readonly title: "Heading";
+      };
+      readonly items: {
+        readonly type: "string";
+        readonly title: "Items";
+      };
+      readonly shipping: {
+        readonly type: "string";
+        readonly title: "Shipping";
+      };
+      readonly discounts: {
+        readonly type: "string";
+        readonly title: "Discounts";
+      };
+      readonly tax: {
+        readonly type: "string";
+        readonly title: "Tax";
+      };
+      readonly change: {
+        readonly type: "string";
+        readonly title: "Change";
+      };
+      readonly interest: {
+        readonly type: "string";
+        readonly title: "Interest";
+      };
+      readonly grandTotal: {
+        readonly type: "string";
+        readonly title: "Total";
+      };
+    };
+  };
+};
+export type OrderSummaryContentValue = ContentValue<typeof OrderSummaryContent>;
+export type OrderSummaryMoney = {
+  amount: string | number;
+  currencyCode: string;
+};
+export type OrderSummaryTotal = {
+  id: string;
+  name: string;
+  value: OrderSummaryMoney;
+};
+export type OrderSummaryData = {
+  id: string;
+  total: OrderSummaryMoney;
+  totals: OrderSummaryTotal[];
+};
+export type OrderSummaryProps = Readonly<{
+  /** The `customerOrder` value of the page query. `null` when the read returned no order. */
+  $data?: OrderSummaryData | null;
+  $content?: OrderSummaryContentValue;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+}>;
+export declare const OrderSummaryDefinition: ComponentDefinition<Readonly<{
+  /** The `customerOrder` value of the page query. `null` when the read returned no order. */
+  $data?: OrderSummaryData | null;
+  $content?: OrderSummaryContentValue;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+}>>;
+export declare function OrderSummarySkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderSummary({ $data, $content, className, ref }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-summary.d.ts.map

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

@@ -0,0 +1,192 @@
+"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 { useStorefrontFormatters } from "../../sdk/format/client.js";
+import { useIntl } from "../../sdk/i18n/client.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/order-summary/order-summary.tsx
+const fragment = `
+  fragment OrderSummaryData on Query {
+    customerOrder(id: $orderId) {
+      id
+      total {
+        amount
+        currencyCode
+      }
+      totals {
+        id
+        name
+        value {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+`;
+const OrderSummaryContent = defineContentType({
+	id: "order-summary",
+	title: "Order Summary",
+	description: "The heading and the labels of the known total lines. An unknown total id keeps the name the API sent.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			heading: {
+				type: "string",
+				title: "Heading"
+			},
+			items: {
+				type: "string",
+				title: "Items"
+			},
+			shipping: {
+				type: "string",
+				title: "Shipping"
+			},
+			discounts: {
+				type: "string",
+				title: "Discounts"
+			},
+			tax: {
+				type: "string",
+				title: "Tax"
+			},
+			change: {
+				type: "string",
+				title: "Change"
+			},
+			interest: {
+				type: "string",
+				title: "Interest"
+			},
+			grandTotal: {
+				type: "string",
+				title: "Total"
+			}
+		}
+	}
+});
+/** Catalogue labels for the total ids this page knows. Any other id keeps its upstream name. */
+const KNOWN_TOTAL_LABELS = {
+	Items: {
+		message: "fs/order.totals.items",
+		field: "items"
+	},
+	Shipping: {
+		message: "fs/order.totals.shipping",
+		field: "shipping"
+	},
+	Discounts: {
+		message: "fs/order.totals.discounts",
+		field: "discounts"
+	},
+	Tax: {
+		message: "fs/order.totals.tax",
+		field: "tax"
+	},
+	Change: {
+		message: "fs/order.totals.change",
+		field: "change"
+	},
+	Interest: {
+		message: "fs/order.totals.interest",
+		field: "interest"
+	}
+};
+const OrderSummaryDefinition = defineComponent({
+	name: "OrderSummary",
+	importPath: "@vtex/faststore/components",
+	component: OrderSummary,
+	content: OrderSummaryContent,
+	fragment,
+	fetchStrategy: "static",
+	skeleton: OrderSummarySkeleton,
+	editor: {
+		label: "Order Summary",
+		category: "content"
+	},
+	schema: {},
+	guideline: "The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; a blank field keeps the catalogue, and an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself."
+});
+function authored(value, fallback) {
+	return value?.trim() || fallback;
+}
+function moneyAmount(amount) {
+	if (typeof amount === "string" && amount.trim() === "") return null;
+	const value = typeof amount === "number" ? amount : Number(amount);
+	return Number.isFinite(value) ? value : null;
+}
+function lineSign(amount) {
+	if (amount == null) return;
+	if (amount < 0) return "negative";
+	return amount === 0 ? "zero" : "positive";
+}
+function OrderSummarySkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-order-summary-skeleton": "",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", { "data-fs-order-summary-skeleton-line": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-order-summary-skeleton-line": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-order-summary-skeleton-line": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-order-summary-skeleton-total": "" })
+		]
+	});
+}
+function OrderSummary({ $data, $content, className, ref }) {
+	const intl = useIntl();
+	const headingId = useId();
+	const { formatMoney } = useStorefrontFormatters();
+	if (!$data) return null;
+	const totalAmount = moneyAmount($data.total.amount);
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"aria-labelledby": headingId,
+		className,
+		"data-fs-order-summary": "",
+		children: [/* @__PURE__ */ jsx("h2", {
+			id: headingId,
+			"data-fs-order-summary-heading": "",
+			children: authored($content?.heading, intl.formatMessage({ id: "fs/order.totals.heading" }))
+		}), /* @__PURE__ */ jsxs("dl", {
+			"data-fs-order-summary-lines": "",
+			children: [$data.totals.map((total, index) => {
+				const amount = moneyAmount(total.value.amount);
+				const known = KNOWN_TOTAL_LABELS[total.id];
+				const label = known ? authored($content?.[known.field], intl.formatMessage({ id: known.message })) : total.name;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-fs-order-summary-line": "",
+					"data-fs-order-summary-line-id": total.id,
+					"data-fs-order-summary-line-sign": lineSign(amount),
+					children: [/* @__PURE__ */ jsx("dt", {
+						"data-fs-order-summary-label": "",
+						children: label
+					}), /* @__PURE__ */ jsx("dd", {
+						"data-fs-order-summary-value": "",
+						children: amount == null ? null : formatMoney(amount, { currency: total.value.currencyCode })
+					})]
+				}, `${total.id}-${index}`);
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-fs-order-summary-total": "",
+				children: [/* @__PURE__ */ jsx("dt", {
+					"data-fs-order-summary-label": "",
+					"data-fs-order-summary-total-label": "",
+					children: authored($content?.grandTotal, intl.formatMessage({ id: "fs/order.totals.grand-total" }))
+				}), /* @__PURE__ */ jsx("dd", {
+					"data-fs-order-summary-value": "",
+					"data-fs-order-summary-total-value": "",
+					children: totalAmount == null ? null : formatMoney(totalAmount, { currency: $data.total.currencyCode })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { OrderSummary, OrderSummaryContent, OrderSummaryDefinition, OrderSummarySkeleton };
+
+//# sourceMappingURL=order-summary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"order-summary.js","names":[],"sources":["../../../src/matter/order-summary/order-summary.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, type Ref, useId } from 'react';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderSummaryData on Query {\n    customerOrder(id: $orderId) {\n      id\n      total {\n        amount\n        currencyCode\n      }\n      totals {\n        id\n        name\n        value {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\nexport const OrderSummaryContent = defineContentType({\n  id: 'order-summary',\n  title: 'Order Summary',\n  description: 'The heading and the labels of the known total lines. An unknown total id keeps the name the API sent.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      items: { type: 'string', title: 'Items' },\n      shipping: { type: 'string', title: 'Shipping' },\n      discounts: { type: 'string', title: 'Discounts' },\n      tax: { type: 'string', title: 'Tax' },\n      change: { type: 'string', title: 'Change' },\n      interest: { type: 'string', title: 'Interest' },\n      grandTotal: { type: 'string', title: 'Total' },\n    },\n  },\n});\n\nexport type OrderSummaryContentValue = ContentValue<typeof OrderSummaryContent>;\n\nexport type OrderSummaryMoney = { amount: string | number; currencyCode: string };\n\nexport type OrderSummaryTotal = {\n  id: string;\n  name: string;\n  value: OrderSummaryMoney;\n};\n\nexport type OrderSummaryData = {\n  id: string;\n  total: OrderSummaryMoney;\n  totals: OrderSummaryTotal[];\n};\n\nexport type OrderSummaryProps = Readonly<{\n  /** The `customerOrder` value of the page query. `null` when the read returned no order. */\n  $data?: OrderSummaryData | null;\n  $content?: OrderSummaryContentValue;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\ntype LineSign = 'negative' | 'zero' | 'positive';\n\n/** Catalogue labels for the total ids this page knows. Any other id keeps its upstream name. */\nconst KNOWN_TOTAL_LABELS = {\n  Items: { message: 'fs/order.totals.items', field: 'items' },\n  Shipping: { message: 'fs/order.totals.shipping', field: 'shipping' },\n  Discounts: { message: 'fs/order.totals.discounts', field: 'discounts' },\n  Tax: { message: 'fs/order.totals.tax', field: 'tax' },\n  Change: { message: 'fs/order.totals.change', field: 'change' },\n  Interest: { message: 'fs/order.totals.interest', field: 'interest' },\n} as const satisfies Record<string, { message: MessageId; field: keyof OrderSummaryContentValue }>;\n\nexport const OrderSummaryDefinition = defineComponent<OrderSummaryProps>({\n  name: 'OrderSummary',\n  importPath: '@vtex/faststore/components',\n  component: OrderSummary,\n  content: OrderSummaryContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderSummarySkeleton,\n  editor: { label: 'Order Summary', category: 'content' },\n  schema: {},\n  guideline:\n    'The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; a blank field keeps the catalogue, and an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself.',\n});\n\nfunction authored(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction moneyAmount(amount: string | number): number | null {\n  // Number('') and Number('  ') are 0, which would print a blank upstream amount as a real zero.\n  if (typeof amount === 'string' && amount.trim() === '') {\n    return null;\n  }\n  const value = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(value) ? value : null;\n}\n\nfunction lineSign(amount: number | null): LineSign | undefined {\n  if (amount == null) {\n    return undefined;\n  }\n  if (amount < 0) {\n    return 'negative';\n  }\n  return amount === 0 ? 'zero' : 'positive';\n}\n\nexport function OrderSummarySkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-summary-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-total=\"\" />\n    </div>\n  );\n}\n\nexport function OrderSummary({ $data, $content, className, ref }: OrderSummaryProps) {\n  const intl = useIntl();\n  const headingId = useId();\n  const { formatMoney } = useStorefrontFormatters();\n\n  if (!$data) {\n    return null;\n  }\n\n  const totalAmount = moneyAmount($data.total.amount);\n\n  return (\n    <section ref={ref} aria-labelledby={headingId} className={className} data-fs-order-summary=\"\">\n      <h2 id={headingId} data-fs-order-summary-heading=\"\">\n        {authored($content?.heading, intl.formatMessage({ id: 'fs/order.totals.heading' }))}\n      </h2>\n      <dl data-fs-order-summary-lines=\"\">\n        {$data.totals.map((total, index) => {\n          const amount = moneyAmount(total.value.amount);\n          const known = KNOWN_TOTAL_LABELS[total.id as keyof typeof KNOWN_TOTAL_LABELS];\n          const label = known\n            ? authored($content?.[known.field], intl.formatMessage({ id: known.message }))\n            : total.name;\n          return (\n            <div\n              key={`${total.id}-${index}`}\n              data-fs-order-summary-line=\"\"\n              data-fs-order-summary-line-id={total.id}\n              data-fs-order-summary-line-sign={lineSign(amount)}\n            >\n              <dt data-fs-order-summary-label=\"\">{label}</dt>\n              <dd data-fs-order-summary-value=\"\">\n                {amount == null ? null : formatMoney(amount, { currency: total.value.currencyCode })}\n              </dd>\n            </div>\n          );\n        })}\n        <div data-fs-order-summary-total=\"\">\n          <dt data-fs-order-summary-label=\"\" data-fs-order-summary-total-label=\"\">\n            {authored($content?.grandTotal, intl.formatMessage({ id: 'fs/order.totals.grand-total' }))}\n          </dt>\n          <dd data-fs-order-summary-value=\"\" data-fs-order-summary-total-value=\"\">\n            {totalAmount == null ? null : formatMoney(totalAmount, { currency: $data.total.currencyCode })}\n          </dd>\n        </div>\n      </dl>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/payment/cardholder-document-rule.d.ts

@@ -0,0 +1,35 @@
+import { DocumentType } from "../../particles/document-field/document-field.js";
+import { PaymentSectionCountry, PaymentSectionMethod } from "./use-payment-method-selection.js";
+//#region src/matter/payment/cardholder-document-rule.d.ts
+/**
+ * Which cardholder document applies (T42, docs/features/credit-card-r2/rfc.md § D17). Two sources, one
+ * rule: the *country* decides which document type exists (`resolveCountryDocumentType`), the selected
+ * *method* decides whether the shopper is asked and whether the answer is mandatory
+ * (`resolveCardholderDocument`). The field, the submit gate and the card capture all read the rule
+ * through these two functions, so they cannot disagree. Pure and total.
+ */
+export type CardholderDocumentRule = Readonly<{
+  type: DocumentType;
+  required: boolean;
+}>;
+/**
+ * The document type the store's country asks for, or `null`. Matches `storeCountryCode` against the
+ * rows by array search (never an index or `in`, so a prototype key such as `constructor` matches
+ * nothing) and returns the first displayable document type this build knows. The table's `required`
+ * is read by no one: the method's `documentRequired` owns that half.
+ */
+export declare function resolveCountryDocumentType({ storeCountryCode, countries }: Readonly<{
+  storeCountryCode?: string | null;
+  countries?: readonly PaymentSectionCountry[] | null;
+}>): DocumentType | null;
+/**
+ * The rule for the selected method under the store's country. `null` (no field, no refusal, nothing
+ * sent) when no method is selected, when the method does not ask for a document, or when the country
+ * has no document type.
+ */
+export declare function resolveCardholderDocument({ method, countryDocumentType }: Readonly<{
+  method: PaymentSectionMethod | null;
+  countryDocumentType: DocumentType | null;
+}>): CardholderDocumentRule | null;
+//#endregion
+//# sourceMappingURL=cardholder-document-rule.d.ts.map

package/dist/matter/payment/cardholder-document-rule.js

@@ -0,0 +1,35 @@
+import { documentTypeFromId } from "../../particles/document-field/document-field.js";
+//#region src/matter/payment/cardholder-document-rule.ts
+/**
+* The document type the store's country asks for, or `null`. Matches `storeCountryCode` against the
+* rows by array search (never an index or `in`, so a prototype key such as `constructor` matches
+* nothing) and returns the first displayable document type this build knows. The table's `required`
+* is read by no one: the method's `documentRequired` owns that half.
+*/
+function resolveCountryDocumentType({ storeCountryCode, countries }) {
+	if (!storeCountryCode || !countries) return null;
+	const row = countries.find((country) => country.countryCode === storeCountryCode);
+	if (!row) return null;
+	for (const document of row.documents) {
+		if (!document.displayable) continue;
+		const type = documentTypeFromId(document.type);
+		if (type) return type;
+	}
+	return null;
+}
+/**
+* The rule for the selected method under the store's country. `null` (no field, no refusal, nothing
+* sent) when no method is selected, when the method does not ask for a document, or when the country
+* has no document type.
+*/
+function resolveCardholderDocument({ method, countryDocumentType }) {
+	if (!method?.validator.documentDisplayable || countryDocumentType === null) return null;
+	return {
+		type: countryDocumentType,
+		required: method.validator.documentRequired
+	};
+}
+//#endregion
+export { resolveCardholderDocument, resolveCountryDocumentType };
+
+//# sourceMappingURL=cardholder-document-rule.js.map

package/dist/matter/payment/cardholder-document-rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardholder-document-rule.js","names":[],"sources":["../../../src/matter/payment/cardholder-document-rule.ts"],"sourcesContent":["import { type DocumentType, documentTypeFromId } from '../../particles/document-field/document-field.js';\nimport type { PaymentSectionCountry, PaymentSectionMethod } from './use-payment-method-selection.js';\n\n/**\n * Which cardholder document applies (T42, docs/features/credit-card-r2/rfc.md § D17). Two sources, one\n * rule: the *country* decides which document type exists (`resolveCountryDocumentType`), the selected\n * *method* decides whether the shopper is asked and whether the answer is mandatory\n * (`resolveCardholderDocument`). The field, the submit gate and the card capture all read the rule\n * through these two functions, so they cannot disagree. Pure and total.\n */\n\nexport type CardholderDocumentRule = Readonly<{ type: DocumentType; required: boolean }>;\n\n/**\n * The document type the store's country asks for, or `null`. Matches `storeCountryCode` against the\n * rows by array search (never an index or `in`, so a prototype key such as `constructor` matches\n * nothing) and returns the first displayable document type this build knows. The table's `required`\n * is read by no one: the method's `documentRequired` owns that half.\n */\nexport function resolveCountryDocumentType({\n  storeCountryCode,\n  countries,\n}: Readonly<{\n  storeCountryCode?: string | null;\n  countries?: readonly PaymentSectionCountry[] | null;\n}>): DocumentType | null {\n  if (!storeCountryCode || !countries) return null;\n  const row = countries.find((country) => country.countryCode === storeCountryCode);\n  if (!row) return null;\n  for (const document of row.documents) {\n    if (!document.displayable) continue;\n    const type = documentTypeFromId(document.type);\n    if (type) return type;\n  }\n  return null;\n}\n\n/**\n * The rule for the selected method under the store's country. `null` (no field, no refusal, nothing\n * sent) when no method is selected, when the method does not ask for a document, or when the country\n * has no document type.\n */\nexport function resolveCardholderDocument({\n  method,\n  countryDocumentType,\n}: Readonly<{\n  method: PaymentSectionMethod | null;\n  countryDocumentType: DocumentType | null;\n}>): CardholderDocumentRule | null {\n  if (!method?.validator.documentDisplayable || countryDocumentType === null) return null;\n  return { type: countryDocumentType, required: method.validator.documentRequired };\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,2BAA2B,EACzC,kBACA,aAIuB;CACvB,IAAI,CAAC,oBAAoB,CAAC,WAAW,OAAO;CAC5C,MAAM,MAAM,UAAU,MAAM,YAAY,QAAQ,gBAAgB,gBAAgB;CAChF,IAAI,CAAC,KAAK,OAAO;CACjB,KAAK,MAAM,YAAY,IAAI,WAAW;EACpC,IAAI,CAAC,SAAS,aAAa;EAC3B,MAAM,OAAO,mBAAmB,SAAS,IAAI;EAC7C,IAAI,MAAM,OAAO;CACnB;CACA,OAAO;AACT;;;;;;AAOA,SAAgB,0BAA0B,EACxC,QACA,uBAIiC;CACjC,IAAI,CAAC,QAAQ,UAAU,uBAAuB,wBAAwB,MAAM,OAAO;CACnF,OAAO;EAAE,MAAM;EAAqB,UAAU,OAAO,UAAU;CAAiB;AAClF"}

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

@@ -2,6 +2,7 @@
 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 { resolveCardholderDocument } from "./cardholder-document-rule.js";
 import { isCardMethod } from "./use-payment-method-selection.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -16,6 +17,35 @@ const MISSING_GATEWAY_ACTION_ERROR = {
 	code: PAYMENT_NETWORK_ERROR_CODE,
 	message: "Unable to complete the request. Please try again."
 };
+/**
+* Folds the draft's non-sensitive values into the captured card and sends it through `sendPayments`.
+* `facts` is `latest.current` read at submission time, never a value a closure captured earlier.
+*/
+async function sendNewCard({ selection, $actions }, transaction, card) {
+	const sendPayments = $actions?.payment?.sendPayments;
+	if (!sendPayments) {
+		console.error("[CardEntry] the payment action namespace is not injected");
+		return {
+			reachedGateway: false,
+			userErrors: [MISSING_GATEWAY_ACTION_ERROR]
+		};
+	}
+	const { draft, allMethods, persistedMethodId, countryDocumentType } = selection;
+	const documentRule = resolveCardholderDocument({
+		method: allMethods.find((method) => method.id === persistedMethodId) ?? null,
+		countryDocumentType
+	});
+	return sendPayments({
+		transaction,
+		card: {
+			kind: "new",
+			...card,
+			document: documentRule ? draft.document ?? void 0 : void 0,
+			cardLabel: draft.cardLabel ?? void 0,
+			saveCard: draft.saveCard ?? void 0
+		}
+	});
+}
 function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 	const { register } = usePaymentSubmission();
 	const latest = useRef({
@@ -57,26 +87,9 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 		$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);
+	const registerCapture = useCallback((capture, preflight, explainMissingMethod) => {
+		const submit = (transaction) => capture((card) => sendNewCard(latest.current, transaction, card));
+		const unregister = register("new-card", submit, preflight, explainMissingMethod);
 		activeCaptures.current += 1;
 		dispatchAddPaymentInfo();
 		return () => {
@@ -84,12 +97,13 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 			unregister();
 		};
 	}, [register, dispatchAddPaymentInfo]);
-	const { methods, placing, selectMethod, selectNewCard, setDraftBin, draft, cardPaymentCollapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectedMethod } = selection;
+	const { methods, placing, attempt, selectMethod, selectNewCard, setDraftBin, draft, cardPaymentCollapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectedMethod } = selection;
+	const locked = attempt?.phase === "sent" || attempt?.phase === "unresolved";
 	const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);
 	const value = useMemo(() => ({
 		networks: methods,
-		busy: placing,
-		clearOn: "success",
+		busy: placing || locked,
+		clearOn: "any-outcome",
 		registerCapture,
 		selection: {
 			selectMethod,
@@ -106,6 +120,7 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 	}), [
 		methods,
 		placing,
+		locked,
 		registerCapture,
 		selectMethod,
 		selectNewCard,

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

@@ -1 +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"}
+{"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 type { PaymentGatewayTransaction } from '../../sdk/payment/gateway.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 CapturedCard,\n  type CardCapture,\n  CardCaptureContext,\n  type CardCaptureContextValue,\n  type CardCaptureMissingMethodExplainer,\n  type CardCapturePreflight,\n  type CardCaptureResult,\n} from '../card-entry/card-capture.js';\nimport { resolveCardholderDocument } from './cardholder-document-rule.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 LatestCaptureFacts = Readonly<{ selection: PaymentMethodSelection; $actions: ComponentActions | undefined }>;\n\n/**\n * Folds the draft's non-sensitive values into the captured card and sends it through `sendPayments`.\n * `facts` is `latest.current` read at submission time, never a value a closure captured earlier.\n */\nasync function sendNewCard(\n  { selection, $actions }: LatestCaptureFacts,\n  transaction: PaymentGatewayTransaction,\n  card: CapturedCard,\n): Promise<CardCaptureResult> {\n  const sendPayments = $actions?.payment?.sendPayments;\n  if (!sendPayments) {\n    console.error('[CardEntry] the payment action namespace is not injected');\n    // Nothing was sent: no action to send it with (T112).\n    return { reachedGateway: false, userErrors: [MISSING_GATEWAY_ACTION_ERROR] };\n  }\n  const { draft, allMethods, persistedMethodId, countryDocumentType } = selection;\n  // T42 (Decision 4): the draft document is posted only while the rule applies — the same unscoped\n  // persisted method the submit gate reads, under the store's country — never a stale value.\n  const documentRule = resolveCardholderDocument({\n    method: allMethods.find((method) => method.id === persistedMethodId) ?? null,\n    countryDocumentType,\n  });\n  return sendPayments({\n    transaction,\n    card: {\n      kind: 'new',\n      ...card,\n      document: documentRule ? (draft.document ?? undefined) : undefined,\n      cardLabel: draft.cardLabel ?? undefined,\n      saveCard: draft.saveCard ?? undefined,\n    },\n  });\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    (\n      capture: CardCapture,\n      preflight: CardCapturePreflight,\n      explainMissingMethod?: CardCaptureMissingMethodExplainer,\n    ) => {\n      const submit: PaymentSubmission = (transaction) =>\n        capture((card) => sendNewCard(latest.current, transaction, card));\n      const unregister = register('new-card', submit, preflight, explainMissingMethod);\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    attempt,\n    selectMethod,\n    selectNewCard,\n    setDraftBin,\n    draft,\n    cardPaymentCollapsed,\n    cardModeActive,\n    selectedMethodId,\n    selectionOutOfScope,\n    selectedMethod,\n  } = selection;\n  // T202: `sent` and `unresolved` are the two phases in which `placeOrder` only resumes (the callback leg), so\n  // a card typed there would never be submitted and never cleared. The form takes no input until the attempt\n  // is freed. Read from the attempt on every render; nothing here writes it.\n  const locked = attempt?.phase === 'sent' || attempt?.phase === 'unresolved';\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 || locked,\n      // T202: the card POST has settled by any route once `send` returns, so nothing the form holds is needed\n      // again (a refusal raised before `send` never reaches the clear).\n      clearOn: 'any-outcome',\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      locked,\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":"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"}

package/dist/matter/payment/payment-controller.js

@@ -40,6 +40,17 @@ const PaymentSectionControllerDefinition = defineComponent({
       selectedMethodId
       selectedAccountId
       selectedBin
+      storeCountryCode
+      countries {
+        __typename
+        countryCode
+        documents {
+          __typename
+          type
+          displayable
+          required
+        }
+      }
     }
     cart {
       __typename
@@ -58,6 +69,7 @@ const PaymentSectionControllerDefinition = defineComponent({
 		analytics: ["track"]
 	},
 	providesContext: ["payment", "card-capture"],
+	hardened: true,
 	editor: {
 		label: "Payment Section Controller",
 		category: "commerce"

package/dist/matter/payment/payment-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-controller.js","names":[],"sources":["../../../src/matter/payment/payment-controller.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { cloneElement, isValidElement, type ReactNode, useMemo, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { PaymentSubmissionProvider } from '../../sdk/payment/submission-registry.js';\nimport {\n  DEFAULT_METHOD_GROUP,\n  PaymentContext,\n  type PaymentContextValue,\n  type PaymentSectionRootData,\n} from './payment.js';\nimport { PaymentCardCaptureProvider } from './payment-card-capture.js';\nimport { usePaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The collapsed payment section (centered modal / slide-in panel) as a state-only controller\n * (specs/payment-section-root.md, T5; docs/features/credit-card/rfc.md § D1). The page composes a raw\n * `DialogRoot` or `DrawerRoot` and each of its particles (`DialogTrigger` / `DialogBackdrop` /\n * `DialogPopup` …) directly as `page.json` nodes, so every part — including the portaled backdrop and\n * popup a descendant selector could not reach — is a swatch-addressable node with zero Tailwind baked\n * into the package, exactly as `DeliveryOptionsController` established.\n *\n * `PaymentSectionController` renders no markup: it runs the shared `usePaymentMethodSelection` engine,\n * holds the open state, provides the same `payment` context `PaymentSectionRoot` does (ADR-0009 matches\n * by contract identifier, so every leaf composes under either with no edit), then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`.\n *\n * It diverges from `DeliveryOptionsController` in one deliberate way: a successful method selection\n * does **not** close the surface. Picking a delivery option completes that interaction; picking a\n * payment method is the first step of several — the shopper still types a card, picks an installment,\n * and places the order. Closing is therefore the composition's call, through the context's `setOpen`\n * (T14 on a placed order) or a `DrawerClose` / `DialogClose` particle.\n *\n * The trigger holds a static label (`Text`): no component echoes the current choice there, and none is\n * shipped here — `payment.md` documents the same composition.\n */\n\n// Repeats `PaymentSectionData`'s selection set verbatim under its own name. Two definitions cannot\n// share one fragment name in a page query, and the native catalog builder resolves\n// `defineComponent({ fragment })` statically — a value imported from another module is silently\n// dropped from the built catalog. `delivery-options` duplicates for the same reason;\n// `payment.test.tsx` asserts the two sets stay field-for-field identical.\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionControllerData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n        groupName\n        validator {\n          __typename\n          numberMask\n          numberRegex\n          cvvMask\n          cvvRegex\n          cvvRequired\n          expirationRequired\n          holderNameRequired\n          billingAddressRequired\n          documentDisplayable\n          documentRequired\n        }\n      }\n      selectedMethodId\n      selectedAccountId\n      selectedBin\n    }\n    cart {\n      __typename\n      id\n      total {\n        __typename\n        amount\n        currencyCode\n      }\n    }\n  }\n`;\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both `DialogRoot`\n// and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionControllerProps = {\n  /**\n   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope\n   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and\n   * scopes to exactly that one group. An empty string scopes nothing.\n   */\n  group?: string | readonly string[];\n  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */\n  $data?: PaymentSectionRootData;\n  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */\n  $actions?: ComponentActions;\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionControllerDefinition = defineComponent<PaymentSectionControllerProps>({\n  name: 'PaymentSectionController',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { payment: ['setMethod', 'sendPayments'], analytics: ['track'] },\n  providesContext: ['payment', 'card-capture'],\n  editor: { label: 'Payment Section Controller', category: 'commerce' },\n  schema: {\n    // Literal, not `DEFAULT_METHOD_GROUP` — see the same note on `PaymentSectionRootDefinition`.\n    // T140, Decision 2/OQ-6: same widened shape as `PaymentSectionRootDefinition` — see its own note.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n  },\n  guideline:\n    \"State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.\",\n  // The convention-based `<file-stem>.md` (`payment-controller.md`) does not exist — this component's\n  // doc is `payment.md`, shared with PaymentSectionRoot/PaymentMethodList (T25/FR-8).\n  docPath: './payment.md',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionController({\n  group = DEFAULT_METHOD_GROUP,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  children,\n}: Readonly<PaymentSectionControllerProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, $data: $data?.payment ?? null, $actions });\n  const [open, setOpen] = useState(false);\n  const payment = useMemo<PaymentContextValue>(() => ({ ...selection, open, setOpen }), [selection, open]);\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <PaymentContext value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          {cloneElement(children, { open, onOpenChange: setOpen })}\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoHA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACA,eAAe;CACf,SAAS;EAAE,SAAS,CAAC,aAAa,cAAc;EAAG,WAAW,CAAC,OAAO;CAAE;CACxE,iBAAiB,CAAC,WAAW,cAAc;CAC3C,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ,EAGN,OAAO;EACL,MAAM;EACN,SAAS,CAAC,0BAA0B,uBAAuB;EAC3D,OAAO;CACT,EACF;CACA,WACE;CAGF,SAAS;AACX,CAAC;AAMD,SAAgB,yBAAyB,EACvC,QAAQ,sBACR,OAAO,WACP,UAAU,cACV,YAC0C;CAC1C,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,YAAY,0BAA0B;EAAE;EAAO,OAAO,OAAO,WAAW;EAAM;CAAS,CAAC;CAC9F,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,eAAoC;EAAE,GAAG;EAAW;EAAM;CAAQ,IAAI,CAAC,WAAW,IAAI,CAAC;CAEvG,IAAI,CAAC,eAAiC,QAAQ,GAC5C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,oBAAC,2BAAD;GAA2B,MAAM,UAAU,MAAM;GAC/C,UAAA,oBAAC,4BAAD;IAAuC;IAAW,MAAM,OAAO;IAAgB;IAC5E,UAAA,aAAa,UAAU;KAAE;KAAM,cAAc;IAAQ,CAAC;GAC7B,CAAA;EACH,CAAA;CACb,CAAA;AAEpB"}
+{"version":3,"file":"payment-controller.js","names":[],"sources":["../../../src/matter/payment/payment-controller.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { cloneElement, isValidElement, type ReactNode, useMemo, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { PaymentSubmissionProvider } from '../../sdk/payment/submission-registry.js';\nimport {\n  DEFAULT_METHOD_GROUP,\n  PaymentContext,\n  type PaymentContextValue,\n  type PaymentSectionRootData,\n} from './payment.js';\nimport { PaymentCardCaptureProvider } from './payment-card-capture.js';\nimport { usePaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The collapsed payment section (centered modal / slide-in panel) as a state-only controller\n * (specs/payment-section-root.md, T5; docs/features/credit-card/rfc.md § D1). The page composes a raw\n * `DialogRoot` or `DrawerRoot` and each of its particles (`DialogTrigger` / `DialogBackdrop` /\n * `DialogPopup` …) directly as `page.json` nodes, so every part — including the portaled backdrop and\n * popup a descendant selector could not reach — is a swatch-addressable node with zero Tailwind baked\n * into the package, exactly as `DeliveryOptionsController` established.\n *\n * `PaymentSectionController` renders no markup: it runs the shared `usePaymentMethodSelection` engine,\n * holds the open state, provides the same `payment` context `PaymentSectionRoot` does (ADR-0009 matches\n * by contract identifier, so every leaf composes under either with no edit), then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`.\n *\n * It diverges from `DeliveryOptionsController` in one deliberate way: a successful method selection\n * does **not** close the surface. Picking a delivery option completes that interaction; picking a\n * payment method is the first step of several — the shopper still types a card, picks an installment,\n * and places the order. Closing is therefore the composition's call, through the context's `setOpen`\n * (T14 on a placed order) or a `DrawerClose` / `DialogClose` particle.\n *\n * The trigger holds a static label (`Text`): no component echoes the current choice there, and none is\n * shipped here — `payment.md` documents the same composition.\n */\n\n// Repeats `PaymentSectionData`'s selection set verbatim under its own name. Two definitions cannot\n// share one fragment name in a page query, and the native catalog builder resolves\n// `defineComponent({ fragment })` statically — a value imported from another module is silently\n// dropped from the built catalog. `delivery-options` duplicates for the same reason;\n// `payment.test.tsx` asserts the two sets stay field-for-field identical.\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionControllerData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n        groupName\n        validator {\n          __typename\n          numberMask\n          numberRegex\n          cvvMask\n          cvvRegex\n          cvvRequired\n          expirationRequired\n          holderNameRequired\n          billingAddressRequired\n          documentDisplayable\n          documentRequired\n        }\n      }\n      selectedMethodId\n      selectedAccountId\n      selectedBin\n      storeCountryCode\n      countries {\n        __typename\n        countryCode\n        documents {\n          __typename\n          type\n          displayable\n          required\n        }\n      }\n    }\n    cart {\n      __typename\n      id\n      total {\n        __typename\n        amount\n        currencyCode\n      }\n    }\n  }\n`;\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both `DialogRoot`\n// and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionControllerProps = {\n  /**\n   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope\n   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and\n   * scopes to exactly that one group. An empty string scopes nothing.\n   */\n  group?: string | readonly string[];\n  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */\n  $data?: PaymentSectionRootData;\n  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */\n  $actions?: ComponentActions;\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionControllerDefinition = defineComponent<PaymentSectionControllerProps>({\n  name: 'PaymentSectionController',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { payment: ['setMethod', 'sendPayments'], analytics: ['track'] },\n  providesContext: ['payment', 'card-capture'],\n  hardened: true,\n  editor: { label: 'Payment Section Controller', category: 'commerce' },\n  schema: {\n    // Literal, not `DEFAULT_METHOD_GROUP` — see the same note on `PaymentSectionRootDefinition`.\n    // T140, Decision 2/OQ-6: same widened shape as `PaymentSectionRootDefinition` — see its own note.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n  },\n  guideline:\n    \"State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.\",\n  // The convention-based `<file-stem>.md` (`payment-controller.md`) does not exist — this component's\n  // doc is `payment.md`, shared with PaymentSectionRoot/PaymentMethodList (T25/FR-8).\n  docPath: './payment.md',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionController({\n  group = DEFAULT_METHOD_GROUP,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  children,\n}: Readonly<PaymentSectionControllerProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, $data: $data?.payment ?? null, $actions });\n  const [open, setOpen] = useState(false);\n  const payment = useMemo<PaymentContextValue>(() => ({ ...selection, open, setOpen }), [selection, open]);\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <PaymentContext value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          {cloneElement(children, { open, onOpenChange: setOpen })}\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA+HA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACA,eAAe;CACf,SAAS;EAAE,SAAS,CAAC,aAAa,cAAc;EAAG,WAAW,CAAC,OAAO;CAAE;CACxE,iBAAiB,CAAC,WAAW,cAAc;CAC3C,UAAU;CACV,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ,EAGN,OAAO;EACL,MAAM;EACN,SAAS,CAAC,0BAA0B,uBAAuB;EAC3D,OAAO;CACT,EACF;CACA,WACE;CAGF,SAAS;AACX,CAAC;AAMD,SAAgB,yBAAyB,EACvC,QAAQ,sBACR,OAAO,WACP,UAAU,cACV,YAC0C;CAC1C,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,YAAY,0BAA0B;EAAE;EAAO,OAAO,OAAO,WAAW;EAAM;CAAS,CAAC;CAC9F,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,eAAoC;EAAE,GAAG;EAAW;EAAM;CAAQ,IAAI,CAAC,WAAW,IAAI,CAAC;CAEvG,IAAI,CAAC,eAAiC,QAAQ,GAC5C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,oBAAC,2BAAD;GAA2B,MAAM,UAAU,MAAM;GAC/C,UAAA,oBAAC,4BAAD;IAAuC;IAAW,MAAM,OAAO;IAAgB;IAC5E,UAAA,aAAa,UAAU;KAAE;KAAM,cAAc;IAAQ,CAAC;GAC7B,CAAA;EACH,CAAA;CACb,CAAA;AAEpB"}