@vtex/faststore 0.0.7 → 0.0.10

package/dist/matter/payment/payment-method-badges.js

@@ -4,6 +4,7 @@ import "../../core/dist/index.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { usePayment } from "./payment.js";
+import { ownValue } from "../../utils/own-value.js";
 import { NETWORK_ICON_BY_KEY } from "../card-entry/card-entry.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/payment/payment-method-badges.tsx
@@ -67,7 +68,8 @@ function paymentMethodNameTokens(name) {
 function paymentMethodIconName(name) {
 	const tokens = paymentMethodNameTokens(name);
 	for (let start = 0; start < tokens.length; start += 1) for (let end = tokens.length; end > start; end -= 1) {
-		const icon = PAYMENT_METHOD_ICON_BY_KEY[tokens.slice(start, end).join("")];
+		const key = tokens.slice(start, end).join("");
+		const icon = ownValue(PAYMENT_METHOD_ICON_BY_KEY, key);
 		if (icon) return icon;
 	}
 	return null;
@@ -187,6 +189,6 @@ function AcceptedPaymentMethodBadges({ heading, className, $data: $dataProp, ...
 	});
 }
 //#endregion
-export { AcceptedPaymentMethodBadges, AcceptedPaymentMethodBadgesDefinition, PAYMENT_METHOD_ICON_BY_KEY, PaymentMethodBadges, PaymentMethodBadgesDefinition };
+export { AcceptedPaymentMethodBadges, AcceptedPaymentMethodBadgesDefinition, PAYMENT_METHOD_ICON_BY_KEY, PaymentMethodBadges, PaymentMethodBadgesDefinition, paymentMethodIconName };
 
 //# sourceMappingURL=payment-method-badges.js.map

package/dist/matter/payment/payment-method-badges.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-method-badges.js","names":[],"sources":["../../../src/matter/payment/payment-method-badges.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { NETWORK_ICON_BY_KEY } from '../card-entry/card-entry.js';\nimport { usePayment } from './payment.js';\n\n/**\n * `PaymentMethodBadges` (specs/render-the-accepted-payment-method-badges.md, T75 of the Credit Card\n * epic). Requirement 12.19's payment-step half: a section-level, data-driven, non-interactive strip —\n * one badge per payment method the store currently accepts, read off `usePayment()` on every render.\n * Never a prop, never local state, never CMS content.\n *\n * Three components render something visually similar and are not this (Decision 1):\n * - `CardEntry`'s own detected-network mark (T71/T172) — a single mark (0 or 1), shown only once a\n *   network is recognized from typed digits — lives inside the card-number field's own box, scoped\n *   to the card group. It cannot be placed independently and cannot carry a wallet method.\n * - The `PaymentMethods` particle (`particles/payment-methods/`) renders the same look from CMS\n *   content. It serves store footers and does not react to a method being enabled or disabled in the\n *   payment configuration.\n * - `PaymentMethodList` is the selectable radio picker, not reassurance.\n *\n * Reads `allMethods` — the section's unfiltered list — rather than the group-scoped `methods` every\n * picker and rendering leaf otherwise reads (Decision 3): the wallet methods this requirement names\n * (PayPal, Google Pay) arrive under a different `groupName` and would never reach a `methods`-scoped\n * leaf. See `allMethods`'s own doc comment in `use-payment-method-selection.ts` for the exception this\n * strip is recorded as. Apple Pay itself carries no key in the map below: it is not a payment system in\n * this read model at all (T133 tracks it as its own, separately blocked task).\n */\n\n// ---------------------------------------------------------------------------\n// Icon resolution (Decision 4, engineer gate + spike, 2026-08-26; matching redesigned in the review\n// pass that followed, same day). `PAYMENT_METHOD_ICON_BY_KEY` supersets T71's `NETWORK_ICON_BY_KEY`\n// (imported, never duplicated or mutated — INV-4) with the wallet glyphs this strip also needs.\n// Frozen: this map renders a brand mark for whatever the store called the method, so a value\n// silently overwritten at runtime would spoof that mark for every shopper who sees the strip.\n// ---------------------------------------------------------------------------\n\nexport const PAYMENT_METHOD_ICON_BY_KEY: Record<string, string> = Object.freeze({\n  ...NETWORK_ICON_BY_KEY,\n  paypal: 'paypal',\n  googlepay: 'google-pay',\n  pix: 'pix',\n  stripe: 'stripe',\n});\n\n/**\n * Splits a store-configured name into lowercase a-z-only words. Every run of characters outside\n * a-z — spaces, punctuation, digits, accents — is a word *boundary*, never a character silently\n * stripped in place: `\"WH Google Pay\"` → `[\"wh\", \"google\", \"pay\"]`; `\"Boleto Bancário\"` →\n * `[\"boleto\", \"banc\", \"rio\"]` (the \"á\" splits the word instead of vanishing from inside it).\n */\nfunction paymentMethodNameTokens(name: string): string[] {\n  return name\n    .toLowerCase()\n    .split(/[^a-z]+/)\n    .filter(Boolean);\n}\n\n/**\n * Resolves a store-configured method name to a base-dialect icon name by matching a key against one\n * token, or a run of adjacent tokens joined back together — never a raw substring of the whole name\n * (review fix, 2026-08-26). The previous implementation normalised the whole name to one string and\n * checked `String.includes`, which matched `elo` inside real, unrelated Brazilian payment-system and\n * acquirer names — \"Cielo\" and \"Visanet\" resolved to a network they are not, \"Pague pelo Pix\" and\n * \"Nubank pelo Pix\" resolved to Elo instead of Pix, and \"Alelo Refeição\" (a real meal-voucher brand)\n * resolved to Elo too — because the key's letters simply occur in that order somewhere in the name.\n * Token equality cannot do that: `\"cielo\"` is one token, and it is never *equal* to `\"elo\"`, only\n * spelled with it in the middle.\n *\n * This still resolves `\"WH Google Pay\"` → `googlepay`, the false negative containment was introduced\n * to fix: joining tokens 1 and 2 (`google` + `pay`) produces a string equal to that key, even though\n * neither token alone is. For each start position the longest run of adjacent tokens is tried first,\n * falling back to shorter ones only when the longer run matches no key — \"Mastercard Debit\" needs\n * exactly that fallback (`mastercarddebit` is not a key; `mastercard` alone is) — which is also what\n * disambiguates a shorter key from a longer one built out of the same tokens (`diners` vs\n * `dinersclub`) without a separate sort step whose removal a test cannot observe.\n */\nfunction paymentMethodIconName(name: string): string | null {\n  const tokens = paymentMethodNameTokens(name);\n  for (let start = 0; start < tokens.length; start += 1) {\n    for (let end = tokens.length; end > start; end -= 1) {\n      const icon = PAYMENT_METHOD_ICON_BY_KEY[tokens.slice(start, end).join('')];\n      if (icon) return icon;\n    }\n  }\n  return null;\n}\n\n// ---------------------------------------------------------------------------\n// The strip's own presence state (FR-4), resolved the same way `methodListState` (payment.tsx) is.\n// ---------------------------------------------------------------------------\n\nfunction badgesState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/** One badge. Derived on every render; never stored, never a prop. */\ntype PaymentMethodBadge = {\n  /** `PaymentSectionMethod.id` — the value of `data-fs-payment-method-badge-id`. */\n  id: string;\n  /** `PaymentSectionMethod.name`, store-configured free text. The visible text when `icon` is null. */\n  name: string;\n  /** A `BASE_ICON_DIALECT` name, or `null` when the name maps to none (FR-3). */\n  icon: string | null;\n};\n\nexport type PaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {\n  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-5) — no invented default. */\n  heading?: string;\n};\n\nexport const PaymentMethodBadgesDefinition = defineComponent<PaymentMethodBadgesProps>({\n  name: 'PaymentMethodBadges',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethodBadges,\n  requiresContext: 'payment',\n  editor: { label: 'Payment Method Badges', category: 'commerce' },\n  schema: { heading: { type: 'string', label: 'Heading' } },\n  guideline:\n    \"A read-only strip of one badge per payment method the store currently accepts, derived from the live order form on every render — never authored, never CMS content — so it updates the moment a method is enabled or disabled in the payment configuration. Place it inside a PaymentSectionRoot or PaymentSectionController, alongside PaymentMethodList and CardEntry; it renders nothing selectable and dispatches no action. Not PaymentMethods, which is the CMS-authored footer strip that cannot reflect the store's live configuration. See payment-method-badges.md.\",\n});\n\n/**\n * Shared render path (Decision 3, T121): both `PaymentMethodBadges` and `AcceptedPaymentMethodBadges`\n * below call this one function, so the DOM contract cannot drift between the payment-step and the\n * cart-order-summary surface (FR-9). Takes the raw method list rather than either caller's own\n * already-resolved badge array, because icon resolution (`paymentMethodIconName`) belongs to this one\n * path, never duplicated per caller.\n */\nfunction renderPaymentMethodBadges({\n  methods,\n  loading,\n  heading,\n  className,\n  rest,\n}: {\n  methods: ReadonlyArray<{ id: string; name: string }>;\n  loading: boolean;\n  heading?: string;\n  className?: string;\n  rest: ComponentPropsWithRef<'div'>;\n}) {\n  const badges: PaymentMethodBadge[] = methods.map((method) => ({\n    id: method.id,\n    name: method.name,\n    icon: paymentMethodIconName(method.name),\n  }));\n\n  const named = Boolean(heading?.trim());\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-fs-payment-method-badges=\"\"\n      data-fs-payment-method-badges-state={badgesState({ loading, count: methods.length })}\n    >\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-payment-method-badges-heading=\"\">\n          {heading}\n        </h3>\n      ) : null}\n      {badges.length > 0 ? (\n        // biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit role is what holds the semantics the named list was chosen for.\n        <ul role=\"list\" data-fs-payment-method-badges-list=\"\" aria-label={named ? heading : undefined}>\n          {badges.map((badge) => (\n            <li\n              key={badge.id}\n              data-fs-payment-method-badge=\"\"\n              data-fs-payment-method-badge-id={badge.id}\n              // A method whose `name` is blank has nothing to show (no glyph, no text) — hide the\n              // otherwise-empty item from assistive tech rather than exposing a nameless list entry.\n              aria-hidden={badge.icon || badge.name ? undefined : true}\n            >\n              {badge.icon ? (\n                <>\n                  <Icon name={badge.icon} data-fs-payment-method-badge-icon=\"\" />\n                  <span data-fs-sr-only=\"\" className=\"sr-only\">\n                    {badge.name}\n                  </span>\n                </>\n              ) : (\n                badge.name\n              )}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport function PaymentMethodBadges({ heading, className, ...props }: PaymentMethodBadgesProps) {\n  const { allMethods, loading } = usePayment();\n  return renderPaymentMethodBadges({ methods: allMethods, loading, heading, className, rest: props });\n}\n\n// ---------------------------------------------------------------------------\n// AcceptedPaymentMethodBadges (credit-card epic, T121 — the cart-order-summary half of requirement\n// 12.19; specs/render-the-accepted-payment-method-badges-cart-summary.md). Same render contract as\n// `PaymentMethodBadges` above — both call `renderPaymentMethodBadges` — but a different data source:\n// this component owns its own `Query.payment` fragment and declares no `requiresContext`, so it\n// composes on any surface outside a payment section, a cart order summary above all, with no\n// `PaymentSectionRoot` / `PaymentSectionController` ancestor. This is the settled ruling recorded at\n// `docs/features/credit-card/decisions.md:2575` — reuse the render contract, swap the data source —\n// mechanically expressed the way `PaymentSummary` already composes standalone off its own fragment.\n//\n// Reads `Payment.methods` unfiltered (Decision 2): the read model has one field, and `allMethods` vs\n// `methods` is a client-side `groupName` filter, not two sources — so this strip and T75's both show\n// every method the store accepts, wallets included, with no `group` prop to scope either one.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment AcceptedPaymentMethodBadgesData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n      }\n    }\n  }\n`;\n\n/**\n * The unwrapped value of the fragment's single top-level `payment` field (arity-1, ADR-0015) — never\n * a `{ payment: … }` wrapper. `methods` is optional: a resolved-but-partial slice is legal and\n * collapses to the `empty` state, mirroring `usePaymentMethodSelection`'s R1 note. Nullable, matching\n * every sibling slice type in this package (`PaymentSummaryData`, `CardEntryData`,\n * `InstallmentsSelectData`, `PaymentSectionData`, …): `null`/absent until the entity resolves, which\n * is exactly the `$data == null` branch below.\n */\nexport type AcceptedPaymentMethodBadgesData = {\n  methods?: Array<{ id: string; name: string }>;\n} | null;\n\nexport type AcceptedPaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {\n  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-6) — no invented default. */\n  heading?: string;\n  /** Slice forwarded by the reactive runtime. `null`/absent until the entity resolves. */\n  $data?: AcceptedPaymentMethodBadgesData;\n};\n\nexport const AcceptedPaymentMethodBadgesDefinition = defineComponent<AcceptedPaymentMethodBadgesProps>({\n  name: 'AcceptedPaymentMethodBadges',\n  importPath: '@vtex/faststore/components',\n  component: AcceptedPaymentMethodBadges,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Accepted Payment Method Badges', category: 'commerce' },\n  schema: { heading: { type: 'string', label: 'Heading' } },\n  guideline:\n    \"A read-only strip of one badge per payment method the store currently accepts, derived from the live order form on every render — never authored, never CMS content. Owns its own Query.payment fragment — no PaymentSectionRoot or PaymentSectionController ancestor required — so place it on the cart order summary or another checkout-adjacent surface that already has a live cart. Placing it on a page with no cart context (a footer, home, or PDP) still resolves Query.payment on every server render, which mints a fresh upstream order form each time — a real cost in logs and upstream state, not a correctness error. Use PaymentMethodBadges instead for the strip inside a payment section; the two share one render contract and differ only in where their data comes from. Not PaymentMethods, the CMS-authored footer strip that cannot reflect the store's live configuration; not PaymentMethodList, the selectable picker; not CardEntry's own in-field network row. See payment-method-badges.md.\",\n});\n\nexport function AcceptedPaymentMethodBadges({\n  heading,\n  className,\n  $data: $dataProp,\n  ...props\n}: AcceptedPaymentMethodBadgesProps) {\n  const $data = useDataOverride($dataProp);\n  return renderPaymentMethodBadges({\n    methods: $data?.methods ?? [],\n    loading: $data == null,\n    heading,\n    className,\n    rest: props,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAa,6BAAqD,OAAO,OAAO;CAC9E,GAAG;CACH,QAAQ;CACR,WAAW;CACX,KAAK;CACL,QAAQ;AACV,CAAC;;;;;;;AAQD,SAAS,wBAAwB,MAAwB;CACvD,OAAO,KACJ,YAAY,CAAC,CACb,MAAM,SAAS,CAAC,CAChB,OAAO,OAAO;AACnB;;;;;;;;;;;;;;;;;;;;AAqBA,SAAS,sBAAsB,MAA6B;CAC1D,MAAM,SAAS,wBAAwB,IAAI;CAC3C,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS,GAClD,KAAK,IAAI,MAAM,OAAO,QAAQ,MAAM,OAAO,OAAO,GAAG;EACnD,MAAM,OAAO,2BAA2B,OAAO,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE;EACxE,IAAI,MAAM,OAAO;CACnB;CAEF,OAAO;AACT;AAMA,SAAS,YAAY,EAAE,SAAS,SAA6E;CAC3G,IAAI,SAAS,OAAO;CACpB,IAAI,UAAU,GAAG,OAAO;CACxB,OAAO;AACT;AAiBA,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,QAAQ,EAAE,SAAS;EAAE,MAAM;EAAU,OAAO;CAAU,EAAE;CACxD,WACE;AACJ,CAAC;;;;;;;;AASD,SAAS,0BAA0B,EACjC,SACA,SACA,SACA,WACA,QAOC;CACD,MAAM,SAA+B,QAAQ,KAAK,YAAY;EAC5D,IAAI,OAAO;EACX,MAAM,OAAO;EACb,MAAM,sBAAsB,OAAO,IAAI;CACzC,EAAE;CAEF,MAAM,QAAQ,QAAQ,SAAS,KAAK,CAAC;CAErC,OACE,qBAAC,OAAD;EACE,GAAI;EACO;EACX,iCAA8B;EAC9B,uCAAqC,YAAY;GAAE;GAAS,OAAO,QAAQ;EAAO,CAAC;EAJrF,UAAA,CAMG,QACC,oBAAC,MAAD;GAAI,gBAAa;GAAG,yCAAsC;GACvD,UAAA;EACC,CAAA,IACF,MACH,OAAO,SAAS,IAEf,oBAAC,MAAD;GAAI,MAAK;GAAO,sCAAmC;GAAG,cAAY,QAAQ,UAAU,KAAA;GACjF,UAAA,OAAO,KAAK,UACX,oBAAC,MAAD;IAEE,gCAA6B;IAC7B,mCAAiC,MAAM;IAGvC,eAAa,MAAM,QAAQ,MAAM,OAAO,KAAA,IAAY;IAEnD,UAAA,MAAM,OACL,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,MAAM,MAAM;KAAM,qCAAkC;IAAI,CAAA,GAC9D,oBAAC,QAAD;KAAM,mBAAgB;KAAG,WAAU;KAChC,UAAA,MAAM;IACH,CAAA,CACN,EAAA,CAAA,IAEF,MAAM;GAEN,GAjBG,MAAM,EAiBT,CACL;EACC,CAAA,IACF,IACD;;AAET;AAEA,SAAgB,oBAAoB,EAAE,SAAS,WAAW,GAAG,SAAmC;CAC9F,MAAM,EAAE,YAAY,YAAY,WAAW;CAC3C,OAAO,0BAA0B;EAAE,SAAS;EAAY;EAAS;EAAS;EAAW,MAAM;CAAM,CAAC;AACpG;AAkDA,MAAa,wCAAwC,gBAAkD;CACrG,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;CACA,eAAe;CACf,QAAQ;EAAE,OAAO;EAAkC,UAAU;CAAW;CACxE,QAAQ,EAAE,SAAS;EAAE,MAAM;EAAU,OAAO;CAAU,EAAE;CACxD,WACE;AACJ,CAAC;AAED,SAAgB,4BAA4B,EAC1C,SACA,WACA,OAAO,WACP,GAAG,SACgC;CACnC,MAAM,QAAQ,gBAAgB,SAAS;CACvC,OAAO,0BAA0B;EAC/B,SAAS,OAAO,WAAW,CAAC;EAC5B,SAAS,SAAS;EAClB;EACA;EACA,MAAM;CACR,CAAC;AACH"}
+{"version":3,"file":"payment-method-badges.js","names":[],"sources":["../../../src/matter/payment/payment-method-badges.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ownValue } from '../../utils/own-value.js';\nimport { NETWORK_ICON_BY_KEY } from '../card-entry/card-entry.js';\nimport { usePayment } from './payment.js';\n\n/**\n * `PaymentMethodBadges` (specs/render-the-accepted-payment-method-badges.md, T75 of the Credit Card\n * epic). Requirement 12.19's payment-step half: a section-level, data-driven, non-interactive strip —\n * one badge per payment method the store currently accepts, read off `usePayment()` on every render.\n * Never a prop, never local state, never CMS content.\n *\n * Three components render something visually similar and are not this (Decision 1):\n * - `CardEntry`'s own detected-network mark (T71/T172) — a single mark (0 or 1), shown only once a\n *   network is recognized from typed digits — lives inside the card-number field's own box, scoped\n *   to the card group. It cannot be placed independently and cannot carry a wallet method.\n * - The `PaymentMethods` particle (`particles/payment-methods/`) renders the same look from CMS\n *   content. It serves store footers and does not react to a method being enabled or disabled in the\n *   payment configuration.\n * - `PaymentMethodList` is the selectable radio picker, not reassurance.\n *\n * Reads `allMethods` — the section's unfiltered list — rather than the group-scoped `methods` every\n * picker and rendering leaf otherwise reads (Decision 3): the wallet methods this requirement names\n * (PayPal, Google Pay) arrive under a different `groupName` and would never reach a `methods`-scoped\n * leaf. See `allMethods`'s own doc comment in `use-payment-method-selection.ts` for the exception this\n * strip is recorded as. Apple Pay itself carries no key in the map below: it is not a payment system in\n * this read model at all (T133 tracks it as its own, separately blocked task).\n */\n\n// ---------------------------------------------------------------------------\n// Icon resolution (Decision 4, engineer gate + spike, 2026-08-26; matching redesigned in the review\n// pass that followed, same day). `PAYMENT_METHOD_ICON_BY_KEY` supersets T71's `NETWORK_ICON_BY_KEY`\n// (imported, never duplicated or mutated — INV-4) with the wallet glyphs this strip also needs.\n// Frozen: this map renders a brand mark for whatever the store called the method, so a value\n// silently overwritten at runtime would spoof that mark for every shopper who sees the strip.\n// ---------------------------------------------------------------------------\n\nexport const PAYMENT_METHOD_ICON_BY_KEY: Record<string, string> = Object.freeze({\n  ...NETWORK_ICON_BY_KEY,\n  paypal: 'paypal',\n  googlepay: 'google-pay',\n  pix: 'pix',\n  stripe: 'stripe',\n});\n\n/**\n * Splits a store-configured name into lowercase a-z-only words. Every run of characters outside\n * a-z — spaces, punctuation, digits, accents — is a word *boundary*, never a character silently\n * stripped in place: `\"WH Google Pay\"` → `[\"wh\", \"google\", \"pay\"]`; `\"Boleto Bancário\"` →\n * `[\"boleto\", \"banc\", \"rio\"]` (the \"á\" splits the word instead of vanishing from inside it).\n */\nfunction paymentMethodNameTokens(name: string): string[] {\n  return name\n    .toLowerCase()\n    .split(/[^a-z]+/)\n    .filter(Boolean);\n}\n\n/**\n * Resolves a store-configured method name to a base-dialect icon name by matching a key against one\n * token, or a run of adjacent tokens joined back together — never a raw substring of the whole name\n * (review fix, 2026-08-26). The previous implementation normalised the whole name to one string and\n * checked `String.includes`, which matched `elo` inside real, unrelated Brazilian payment-system and\n * acquirer names — \"Cielo\" and \"Visanet\" resolved to a network they are not, \"Pague pelo Pix\" and\n * \"Nubank pelo Pix\" resolved to Elo instead of Pix, and \"Alelo Refeição\" (a real meal-voucher brand)\n * resolved to Elo too — because the key's letters simply occur in that order somewhere in the name.\n * Token equality cannot do that: `\"cielo\"` is one token, and it is never *equal* to `\"elo\"`, only\n * spelled with it in the middle.\n *\n * This still resolves `\"WH Google Pay\"` → `googlepay`, the false negative containment was introduced\n * to fix: joining tokens 1 and 2 (`google` + `pay`) produces a string equal to that key, even though\n * neither token alone is. For each start position the longest run of adjacent tokens is tried first,\n * falling back to shorter ones only when the longer run matches no key — \"Mastercard Debit\" needs\n * exactly that fallback (`mastercarddebit` is not a key; `mastercard` alone is) — which is also what\n * disambiguates a shorter key from a longer one built out of the same tokens (`diners` vs\n * `dinersclub`) without a separate sort step whose removal a test cannot observe.\n */\nexport function paymentMethodIconName(name: string): string | null {\n  const tokens = paymentMethodNameTokens(name);\n  for (let start = 0; start < tokens.length; start += 1) {\n    for (let end = tokens.length; end > start; end -= 1) {\n      const key = tokens.slice(start, end).join('');\n      const icon = ownValue(PAYMENT_METHOD_ICON_BY_KEY, key);\n      if (icon) return icon;\n    }\n  }\n  return null;\n}\n\n// ---------------------------------------------------------------------------\n// The strip's own presence state (FR-4), resolved the same way `methodListState` (payment.tsx) is.\n// ---------------------------------------------------------------------------\n\nfunction badgesState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/** One badge. Derived on every render; never stored, never a prop. */\ntype PaymentMethodBadge = {\n  /** `PaymentSectionMethod.id` — the value of `data-fs-payment-method-badge-id`. */\n  id: string;\n  /** `PaymentSectionMethod.name`, store-configured free text. The visible text when `icon` is null. */\n  name: string;\n  /** A `BASE_ICON_DIALECT` name, or `null` when the name maps to none (FR-3). */\n  icon: string | null;\n};\n\nexport type PaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {\n  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-5) — no invented default. */\n  heading?: string;\n};\n\nexport const PaymentMethodBadgesDefinition = defineComponent<PaymentMethodBadgesProps>({\n  name: 'PaymentMethodBadges',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethodBadges,\n  requiresContext: 'payment',\n  editor: { label: 'Payment Method Badges', category: 'commerce' },\n  schema: { heading: { type: 'string', label: 'Heading' } },\n  guideline:\n    \"A read-only strip of one badge per payment method the store currently accepts, derived from the live order form on every render — never authored, never CMS content — so it updates the moment a method is enabled or disabled in the payment configuration. Place it inside a PaymentSectionRoot or PaymentSectionController, alongside PaymentMethodList and CardEntry; it renders nothing selectable and dispatches no action. Not PaymentMethods, which is the CMS-authored footer strip that cannot reflect the store's live configuration. See payment-method-badges.md.\",\n});\n\n/**\n * Shared render path (Decision 3, T121): both `PaymentMethodBadges` and `AcceptedPaymentMethodBadges`\n * below call this one function, so the DOM contract cannot drift between the payment-step and the\n * cart-order-summary surface (FR-9). Takes the raw method list rather than either caller's own\n * already-resolved badge array, because icon resolution (`paymentMethodIconName`) belongs to this one\n * path, never duplicated per caller.\n */\nfunction renderPaymentMethodBadges({\n  methods,\n  loading,\n  heading,\n  className,\n  rest,\n}: {\n  methods: ReadonlyArray<{ id: string; name: string }>;\n  loading: boolean;\n  heading?: string;\n  className?: string;\n  rest: ComponentPropsWithRef<'div'>;\n}) {\n  const badges: PaymentMethodBadge[] = methods.map((method) => ({\n    id: method.id,\n    name: method.name,\n    icon: paymentMethodIconName(method.name),\n  }));\n\n  const named = Boolean(heading?.trim());\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-fs-payment-method-badges=\"\"\n      data-fs-payment-method-badges-state={badgesState({ loading, count: methods.length })}\n    >\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-payment-method-badges-heading=\"\">\n          {heading}\n        </h3>\n      ) : null}\n      {badges.length > 0 ? (\n        // biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit role is what holds the semantics the named list was chosen for.\n        <ul role=\"list\" data-fs-payment-method-badges-list=\"\" aria-label={named ? heading : undefined}>\n          {badges.map((badge) => (\n            <li\n              key={badge.id}\n              data-fs-payment-method-badge=\"\"\n              data-fs-payment-method-badge-id={badge.id}\n              // A method whose `name` is blank has nothing to show (no glyph, no text) — hide the\n              // otherwise-empty item from assistive tech rather than exposing a nameless list entry.\n              aria-hidden={badge.icon || badge.name ? undefined : true}\n            >\n              {badge.icon ? (\n                <>\n                  <Icon name={badge.icon} data-fs-payment-method-badge-icon=\"\" />\n                  <span data-fs-sr-only=\"\" className=\"sr-only\">\n                    {badge.name}\n                  </span>\n                </>\n              ) : (\n                badge.name\n              )}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport function PaymentMethodBadges({ heading, className, ...props }: PaymentMethodBadgesProps) {\n  const { allMethods, loading } = usePayment();\n  return renderPaymentMethodBadges({ methods: allMethods, loading, heading, className, rest: props });\n}\n\n// ---------------------------------------------------------------------------\n// AcceptedPaymentMethodBadges (credit-card epic, T121 — the cart-order-summary half of requirement\n// 12.19; specs/render-the-accepted-payment-method-badges-cart-summary.md). Same render contract as\n// `PaymentMethodBadges` above — both call `renderPaymentMethodBadges` — but a different data source:\n// this component owns its own `Query.payment` fragment and declares no `requiresContext`, so it\n// composes on any surface outside a payment section, a cart order summary above all, with no\n// `PaymentSectionRoot` / `PaymentSectionController` ancestor. This is the settled ruling recorded at\n// `docs/features/credit-card/decisions.md:2575` — reuse the render contract, swap the data source —\n// mechanically expressed the way `PaymentSummary` already composes standalone off its own fragment.\n//\n// Reads `Payment.methods` unfiltered (Decision 2): the read model has one field, and `allMethods` vs\n// `methods` is a client-side `groupName` filter, not two sources — so this strip and T75's both show\n// every method the store accepts, wallets included, with no `group` prop to scope either one.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment AcceptedPaymentMethodBadgesData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n      }\n    }\n  }\n`;\n\n/**\n * The unwrapped value of the fragment's single top-level `payment` field (arity-1, ADR-0015) — never\n * a `{ payment: … }` wrapper. `methods` is optional: a resolved-but-partial slice is legal and\n * collapses to the `empty` state, mirroring `usePaymentMethodSelection`'s R1 note. Nullable, matching\n * every sibling slice type in this package (`PaymentSummaryData`, `CardEntryData`,\n * `InstallmentsSelectData`, `PaymentSectionData`, …): `null`/absent until the entity resolves, which\n * is exactly the `$data == null` branch below.\n */\nexport type AcceptedPaymentMethodBadgesData = {\n  methods?: Array<{ id: string; name: string }>;\n} | null;\n\nexport type AcceptedPaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {\n  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-6) — no invented default. */\n  heading?: string;\n  /** Slice forwarded by the reactive runtime. `null`/absent until the entity resolves. */\n  $data?: AcceptedPaymentMethodBadgesData;\n};\n\nexport const AcceptedPaymentMethodBadgesDefinition = defineComponent<AcceptedPaymentMethodBadgesProps>({\n  name: 'AcceptedPaymentMethodBadges',\n  importPath: '@vtex/faststore/components',\n  component: AcceptedPaymentMethodBadges,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Accepted Payment Method Badges', category: 'commerce' },\n  schema: { heading: { type: 'string', label: 'Heading' } },\n  guideline:\n    \"A read-only strip of one badge per payment method the store currently accepts, derived from the live order form on every render — never authored, never CMS content. Owns its own Query.payment fragment — no PaymentSectionRoot or PaymentSectionController ancestor required — so place it on the cart order summary or another checkout-adjacent surface that already has a live cart. Placing it on a page with no cart context (a footer, home, or PDP) still resolves Query.payment on every server render, which mints a fresh upstream order form each time — a real cost in logs and upstream state, not a correctness error. Use PaymentMethodBadges instead for the strip inside a payment section; the two share one render contract and differ only in where their data comes from. Not PaymentMethods, the CMS-authored footer strip that cannot reflect the store's live configuration; not PaymentMethodList, the selectable picker; not CardEntry's own in-field network row. See payment-method-badges.md.\",\n});\n\nexport function AcceptedPaymentMethodBadges({\n  heading,\n  className,\n  $data: $dataProp,\n  ...props\n}: AcceptedPaymentMethodBadgesProps) {\n  const $data = useDataOverride($dataProp);\n  return renderPaymentMethodBadges({\n    methods: $data?.methods ?? [],\n    loading: $data == null,\n    heading,\n    className,\n    rest: props,\n  });\n}\n"],"mappings":"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"}

package/dist/matter/payment/payment.js

@@ -59,6 +59,17 @@ const fragment = `
       selectedMethodId
       selectedAccountId
       selectedBin
+      storeCountryCode
+      countries {
+        __typename
+        countryCode
+        documents {
+          __typename
+          type
+          displayable
+          required
+        }
+      }
     }
     cart {
       __typename

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

@@ -1 +1 @@
-{"version":3,"file":"payment.js","names":[],"sources":["../../../src/matter/payment/payment.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext, useId, useLayoutEffect, useMemo } from 'react';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { RadioGroup, RadioIndicator, RadioRoot } from '../../particles/radio/radio.js';\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 { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { PaymentCardCaptureProvider, type PaymentCartData } from './payment-card-capture.js';\nimport {\n  type PaymentMethodSelection,\n  type PaymentSectionData,\n  resolveCanRevealCardPayment,\n  resolvePreselectionCandidateId,\n  splitCardMethods,\n  usePaymentMethodSelection,\n} from './use-payment-method-selection.js';\n\n/**\n * The `PaymentSection` matter root (specs/payment-section-root.md, T5 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D1). `PaymentSectionRoot` is the always-visible presentation\n * variant over the `Payment` entity T1 projects: it owns a thin `fragment` (the method list with its\n * server-driven validator config, plus the current selection), runs the shared\n * `usePaymentMethodSelection` engine, and provides the `payment` context its leaves read — the card\n * entry (T7), cardholder document (T8), installments (T9), save-card (T10), billing address (T11),\n * saved cards (T12), and place-order CTA (T14) — through the guarded `usePayment()` hook rather than\n * drilled props (ADR-0009). `PaymentSectionController` (payment-controller.tsx) is the second provider\n * of the same context for a collapsed overlay surface; ADR-0009 matches by contract identifier, so the\n * two substitute for one another with zero edits to any consumer.\n *\n * \"Thin\" means no `installmentOptions` (T9's own fragment), no `savedCards` (T12's), and no\n * `selectedInstallment` (T6's) — the heavy, optional, and iterated subtrees ADR-0011/ADR-0012 split out.\n * `methods[].validator` *is* selected here: it is a non-normalized value object off `Payment.methods`\n * that cannot be subscribed separately, and T7 tests every method's `numberRegex` to detect a network.\n *\n * `children` is the section composition, not a per-method template — the method picker is\n * `PaymentMethodList`, an independently placeable part with its own hooks.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, matching the merged `payment-summary` sibling. The codegen\n// `documents` glob does not scan `src/matter/payment*`, so the typed `graphql()` factory is\n// unavailable here; `data-component-contract.test.ts` validates this fragment against the real schema.\n//\n// Selects `payment { id }` so Apollo's InMemoryCache normalizes `Payment` by id — required for the\n// `Payment` entity that `paymentMethodSelect` echoes back to update the same cache entity this\n// fragment reads. `fetchStrategy: 'reactive'`'s no-refetch guarantee holds only if both sides\n// normalize to one entity.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionData 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/**\n * The default payment-group scope: credit and debit (T140, FR-2, Decision 2). Both strings are\n * store-configured, so a store whose groups differ must set `group` explicitly; `group: ''` scopes\n * nothing (specs/payment-section-root.md § Documentation Gaps item 1). Widened from a single string to\n * a set (Decision 1) — a public API break for any consumer importing it directly (Interfaces).\n */\n/**\n * The roots' keyed `$data` (ADR-0015, arity 2): the `Payment` slice the selection engine reads, and the\n * cart total `add_payment_info` needs (moved here from `CardEntry`, which reads no cart).\n */\nexport type PaymentSectionRootData = {\n  payment?: PaymentSectionData;\n  cart?: PaymentCartData;\n} | null;\n\nexport const DEFAULT_METHOD_GROUP: readonly string[] = ['creditCardPaymentGroup', 'debitCardPaymentGroup'];\n\n// ---------------------------------------------------------------------------\n// Payment context — provided by both section roots, read by every leaf\n// ---------------------------------------------------------------------------\n\n/**\n * The `payment` context contract, normative for T7–T12 and T14. Everything the selection engine\n * resolves, plus the overlay disclosure. What is deliberately absent is part of the contract too: no\n * card number, CVV, expiration, or holder name (RFC D13 — they live only in the card entry's local\n * state); no submission channel for the place-order sequence, which is the separate, narrow\n * `PaymentSubmissionProvider` below (T13) precisely so no card-shaped value ever joins this contract;\n * no `installmentOptions` / `savedCards` / `selectedInstallment` (their owners' fragments); and no\n * optimistic mirror of the persisted selection.\n */\nexport type PaymentContextValue = Readonly<\n  PaymentMethodSelection & {\n    /** The collapsed surface's disclosure state. Always `true` under `PaymentSectionRoot`. */\n    open: boolean;\n    /**\n     * Drives the collapsed surface. A no-op under `PaymentSectionRoot`, so a leaf written for the\n     * overlay composes unchanged inline. Selecting a method never closes the surface on its own — the\n     * shopper still has a card to type — so closing is the composition's call (Decision 5).\n     */\n    setOpen: (open: boolean) => void;\n  }\n>;\n\nconst PAYMENT_CONTEXT_UNSET = Symbol('PaymentContextUnset');\n\nconst PaymentContextInternal = createContext<PaymentContextValue | typeof PAYMENT_CONTEXT_UNSET>(PAYMENT_CONTEXT_UNSET);\n\n/** The provider both section roots render. Exported for `PaymentSectionController`. */\nexport const PaymentContext = PaymentContextInternal as React.Context<PaymentContextValue>;\n\n/**\n * Read the payment section's selection state, draft, and overlay disclosure from the nearest\n * `PaymentSectionRoot` or `PaymentSectionController`. Throws outside either subtree — a misplaced\n * consumer is a composition bug the author should see immediately, not a silent degrade to an empty\n * selection — mirroring `useSession()` / `useDeliveryOptions()`. ADR-0009's compiler check catches the\n * same mistake before emission for schema-authored pages; this is the defense-in-depth layer for\n * Storybook, tests, and hand-written JSX.\n */\nexport function usePayment(): PaymentContextValue {\n  const ctx = useContext(PaymentContextInternal);\n  if (ctx === PAYMENT_CONTEXT_UNSET) {\n    throw new Error('usePayment() must be used inside a <PaymentSectionRoot> or <PaymentSectionController> subtree.');\n  }\n  return ctx;\n}\n\nconst NO_DISCLOSURE = () => {};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionRootProps = ComponentPropsWithRef<'div'> & {\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 (FR-4, US-3). T1's read model is method-agnostic and assigns the\n   * narrowing to the consumer; this prop supplies no method, label, or ordering — the list itself is\n   * fragment data. 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};\n\n/** Renders its own controls from the context's method list — `children` would have nothing to template. */\nexport type PaymentMethodListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /**\n   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).\n   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to\n   * the default rather than rendering a nameless group.\n   */\n  legend?: string;\n  /**\n   * The single card control's name (T171, Decision 8). The control stands for every in-scope\n   * credit/debit method at once, so it cannot take its name from one of their `method.name` values the\n   * way a per-network row did — it is authored copy instead, defaulting to the PRD's own string.\n   * Resolved through `resolveAuthoredCopy` exactly as `legend` is, so an authored empty or\n   * whitespace-only string falls back rather than rendering a nameless control.\n   */\n  cardLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionRootDefinition = defineComponent<PaymentSectionRootProps>({\n  name: 'PaymentSectionRoot',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionRoot,\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', category: 'commerce' },\n  schema: {\n    // A literal, not `DEFAULT_METHOD_GROUP`: the native catalog builder extracts `schema` statically\n    // and silently drops an identifier-valued default, so the built entry would carry no default and\n    // the compiler would emit the section unscoped. `payment.test.tsx` asserts the literal matches the\n    // constant, and that the built catalog kept the default.\n    // T140, Decision 2/OQ-6: `type: 'array'` — no code path in packages/sukima/crates/sukima-core/\n    // validates an authored prop's JSON value against this declared type, so a store's existing bare\n    // string keeps compiling. No `items`: an enum would validate against a closed set of group names,\n    // which is wrong for a store that renamed its group (OQ-3) — the exact fragility Decision 1 closes.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n  },\n  guideline:\n    \"Root of the checkout payment section: reads the payment methods and the current selection from the order form and provides the 'payment' context every payment leaf needs and the 'card-capture' context CardEntry needs, so place CardEntry, CardholderDocument, Installments, SaveCard, BillingAddress, SavedCards, PlaceOrder, and PaymentMethodList as its children — none of them render without a payment root ancestor. Renders one container div and no chrome or copy of its own; headings and layout belong to the composition. Selecting a payment option dispatches $actions.payment.setMethod and every subscriber re-renders from the cache with no refetch — and for a card it is the number the shopper types that decides the network, not an option they pick, so PaymentMethodList shows every in-scope credit and debit method as ONE card option. Which methods exist is always real data — never author them as props; group only scopes the list by the store's payment group(s) — defaults to credit and debit together, accepts one group name or a set of them, and set it to \\\"\\\" to show every method, one option each, with no card option. Use PaymentSectionController instead when the section should live in a drawer or modal. See payment.md.\",\n});\n\nexport const PaymentMethodListDefinition = defineComponent<PaymentMethodListProps>({\n  name: 'PaymentMethodList',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethodList,\n  requiresContext: 'payment',\n  editor: { label: 'Payment Method List', category: 'commerce' },\n  schema: {\n    // T38/T171: inline literals, never identifiers — the native catalog builder extracts `schema`\n    // statically and silently drops an identifier-valued default (INV-8).\n    legend: { type: 'string', default: 'Payment method', label: 'Legend' },\n    cardLabel: { type: 'string', default: 'Pay with Credit / Debit Card', label: 'Card option label' },\n  },\n  guideline:\n    'The payment-method picker: a radio group of the payment options the order form offers, plus the inline selection error (role=\"alert\"). Every in-scope credit and debit method is ONE option — the network comes from the card number the shopper types, never from a row they pick — and any other in-scope method (e.g. Pix) keeps a row of its own; set group to \"\" on the root to switch that off and get one row per method. Selecting an option dispatches the method selection. Selecting a non-card option hides the card form, and the card option brings it back. Place it inside a PaymentSectionRoot, or inside the DialogPopup/DrawerPopup of a PaymentSectionController. It renders its own options from real data, so it takes no children and no method props; author the card option\\'s wording with cardLabel. Keep it composed: it is the only element that surfaces a rejected selection, and the only control that can recover a selection this section does not serve — omit it and a shopper whose persisted method sits outside group has no reachable way back. Must be inside a payment root.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionRoot({\n  group = DEFAULT_METHOD_GROUP,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  className,\n  children,\n  ...props\n}: PaymentSectionRootProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, $data: $data?.payment ?? null, $actions });\n  const payment = useMemo<PaymentContextValue>(\n    () => ({ ...selection, open: true, setOpen: NO_DISCLOSURE }),\n    [selection],\n  );\n\n  return (\n    <PaymentContextInternal value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          <div\n            {...props}\n            className={className}\n            data-fs-payment-section=\"\"\n            {...(selection.draft.path ? { 'data-fs-payment-section-path': selection.draft.path } : {})}\n            // T28, Decision 5: presence attribute only, deliberately never `inert` — `PlaceOrder` composes\n            // as a child of this same container (FR-6), so making it inert here would swallow the CTA's\n            // own role=\"alert\"/role=\"status\" regions, the shopper's only channel for the outcome.\n            {...(selection.placing ? { 'data-fs-payment-section-placing': '' } : {})}\n          >\n            {children}\n          </div>\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContextInternal>\n  );\n}\n\n/**\n * The picker's presence state, always emitted so a swatch can surface a row-less container — otherwise\n * a zero-height element under any stacking swatch, and the \"visible empty region\" the section's\n * group-default risk is accepted on. `loading` (still resolving) and `empty` (resolved, nothing in\n * scope) stay distinct: one is a wait, the other a misconfiguration.\n */\nfunction methodListState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/**\n * The DOM value the collapsed card control carries inside the `RadioGroup`. Base UI requires every\n * radio root to have one, and this control stands for N methods, so there is no `method.id` it could\n * use.\n *\n * It is a radio-group value and nothing else — **never a method id** (INV-1, ADR-0023). It is never\n * dispatched: `handleValueChange` below maps it back to `resolvePreselectionCandidateId`'s answer\n * before calling `selectMethod`, and records card mode through `selectNewCard()`, which dispatches\n * nothing, when there is no candidate (T191, FR-6). The prefix keeps it from ever colliding with a\n * `PaymentMethod.id` a standalone row is bound to.\n */\nconst CARD_CONTROL_VALUE = '__fs-card-control';\n\nexport function PaymentMethodList({ legend, cardLabel, className, ...props }: PaymentMethodListProps) {\n  const {\n    methods,\n    allMethods,\n    persistedMethodId,\n    selectedMethodId,\n    selectionError,\n    selectMethod,\n    selectNewCard,\n    cardModeActive,\n    loading,\n    placing,\n    setMethodListMounted,\n  } = usePayment();\n\n  // T171, FR-1/FR-2: one control for the in-scope card methods, one row for every other in-scope\n  // method. Memoized off the two lists only (NFR-5) — nothing here may widen what re-creates the\n  // `payment` context value, which a keystroke already churns enough.\n  const { collapsedCardMethods, standaloneMethods } = useMemo(\n    () => splitCardMethods({ methods, allMethods }),\n    [methods, allMethods],\n  );\n  // Decision 3: the collapsed control dispatches the *shared* preselection candidate, so the escape\n  // hatch and the preselection can never disagree about whether an id is available.\n  const cardCandidateId = useMemo(() => resolvePreselectionCandidateId(methods), [methods]);\n  const canRevealCardPayment = resolveCanRevealCardPayment({ collapsedCardMethods, standaloneMethods });\n\n  // Decision 2: derived, never bound to one `method.id` — a control standing for N methods has none.\n  // Checked when the persisted selection resolves inside the collapsed set, and when nothing is\n  // persisted at all (PRD REQ-02's \"the card payment option is selected by default\"). The second arm\n  // is a deliberate divergence from the pre-T171 bound-to-`$data` behaviour: the control can read\n  // checked while `$data.selectedMethodId` is still null, having dispatched nothing. `persistedMethodId`\n  // is the raw, unscoped fact on purpose — a persisted method this section does not serve must leave the\n  // control unchecked, which is what keeps it activatable as US-5's way back. T191 (FR-6): card mode is\n  // the third arm, the card option chosen over such a selection or over a non-card one.\n  const cardControlChecked =\n    collapsedCardMethods.length > 0 &&\n    (persistedMethodId === null ||\n      collapsedCardMethods.some((method) => method.id === selectedMethodId) ||\n      cardModeActive);\n\n  // Fix pass, finding R2: registers this instance with the shared engine so the card leaves know an\n  // escape hatch exists before they ever collapse — a section composed with no `PaymentMethodList` at\n  // all must never hide the only remaining way to change the method (typing a new card number).\n  // Retracted unconditionally on unmount, unlike `setPlacing`'s own \"leave it if still placing\"\n  // carve-out: there is no in-flight sequence here for an abandoned instance to still be part of.\n  //\n  // T191, Decision 5 (after T171's Decision 4): what is registered is `canRevealCardPayment`, not the\n  // bare fact of being mounted — whether this list can bring the card form back. A rendered card\n  // option always can, since card mode needs no method id; without one, only a row bound to a card\n  // method can. See `resolveCanRevealCardPayment`'s own doc comment. The dependency list carries it,\n  // so the registration re-runs when the method list resolves.\n  //\n  // Fix pass round 2 (flash regression): `useLayoutEffect`, not `useEffect` — mirroring\n  // `place-order.tsx`'s own `setPlacing` registration, the structurally identical precedent for\n  // publishing a ref-counted fact to this shared engine from a leaf's mount. A passive effect runs\n  // after the browser has already painted, so a root whose persisted selection is genuinely out of\n  // scope committed one real frame with `methodListMounted` still `false` — the collapse (then\n  // `selectionOutOfScope && methodListMounted`, now `cardPaymentCollapsed`) computed `false` for that\n  // frame, painting the card form visible, focusable, and with its security code not yet cleared,\n  // before the registration ever landed and a second commit hid it. A layout effect's own state update\n  // is guaranteed to flush synchronously before the browser paints, so the very first frame a shopper\n  // can ever see already reflects `methodListMounted`. The card leaves read it purely at render time,\n  // not from an effect of their own, so this reorders nothing on that side: whichever commit this\n  // layout effect's own update produces is the one their next render (still pre-paint) sees.\n  const instanceKey = useId();\n  useLayoutEffect(() => {\n    setMethodListMounted(instanceKey, canRevealCardPayment);\n    return () => setMethodListMounted(instanceKey, false);\n  }, [instanceKey, setMethodListMounted, canRevealCardPayment]);\n\n  // INV-1: only an id the read model supplied is ever dispatched. A standalone row's value *is* its own\n  // `method.id`; the collapsed control's value is a DOM value with no method behind it, so it routes\n  // through the shared candidate instead (FR-4). With no candidate to name it records card mode, which\n  // brings the card form back and sends nothing (T191, FR-6, Decision 6).\n  function handleValueChange(value: string) {\n    if (value === CARD_CONTROL_VALUE) {\n      if (cardCandidateId !== null) {\n        selectMethod({ methodId: cardCandidateId });\n      } else {\n        selectNewCard();\n      }\n      return;\n    }\n    selectMethod({ methodId: value });\n  }\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-payment-method-list=\"\"\n      data-fs-payment-method-list-state={methodListState({ loading, count: methods.length })}\n      {...(placing ? { 'data-fs-payment-method-list-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-payment-method-list-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {methods.length > 0 ? (\n        // T38, Decision 1: Fieldset.Root + Fieldset.Legend, exactly what card-entry.tsx:1101-1112\n        // already ships — Base UI propagates the legend's id as aria-labelledby onto the descendant\n        // RadioGroup, so this one wrapper names both the fieldset and the radiogroup (measured).\n        <Fieldset.Root data-fs-payment-method-list-fieldset=\"\">\n          <Fieldset.Legend>{resolveAuthoredCopy(legend, 'Payment method')}</Fieldset.Legend>\n          <RadioGroup\n            value={cardControlChecked ? CARD_CONTROL_VALUE : (selectedMethodId ?? '')}\n            onValueChange={handleValueChange}\n          >\n            {collapsedCardMethods.length > 0 ? (\n              // One control for every in-scope credit and debit method (FR-1, Decision 1). Both\n              // styling hooks stay exactly where a per-network row carried them — `payment.md`'s\n              // styling table documents them, so a store's swatch keeps its selectors.\n              <RadioRoot value={CARD_CONTROL_VALUE}>\n                <RadioIndicator data-fs-payment-method-indicator=\"\" />\n                <span data-fs-payment-method-name=\"\">\n                  {resolveAuthoredCopy(cardLabel, 'Pay with Credit / Debit Card')}\n                </span>\n              </RadioRoot>\n            ) : null}\n            {standaloneMethods.map((method) => (\n              <RadioRoot key={method.id} value={method.id}>\n                <RadioIndicator data-fs-payment-method-indicator=\"\" />\n                <span data-fs-payment-method-name=\"\">{method.name}</span>\n              </RadioRoot>\n            ))}\n          </RadioGroup>\n        </Fieldset.Root>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"payment.js","names":[],"sources":["../../../src/matter/payment/payment.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext, useId, useLayoutEffect, useMemo } from 'react';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { RadioGroup, RadioIndicator, RadioRoot } from '../../particles/radio/radio.js';\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 { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { PaymentCardCaptureProvider, type PaymentCartData } from './payment-card-capture.js';\nimport {\n  type PaymentMethodSelection,\n  type PaymentSectionData,\n  resolveCanRevealCardPayment,\n  resolvePreselectionCandidateId,\n  splitCardMethods,\n  usePaymentMethodSelection,\n} from './use-payment-method-selection.js';\n\n/**\n * The `PaymentSection` matter root (specs/payment-section-root.md, T5 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D1). `PaymentSectionRoot` is the always-visible presentation\n * variant over the `Payment` entity T1 projects: it owns a thin `fragment` (the method list with its\n * server-driven validator config, plus the current selection), runs the shared\n * `usePaymentMethodSelection` engine, and provides the `payment` context its leaves read — the card\n * entry (T7), cardholder document (T8), installments (T9), save-card (T10), billing address (T11),\n * saved cards (T12), and place-order CTA (T14) — through the guarded `usePayment()` hook rather than\n * drilled props (ADR-0009). `PaymentSectionController` (payment-controller.tsx) is the second provider\n * of the same context for a collapsed overlay surface; ADR-0009 matches by contract identifier, so the\n * two substitute for one another with zero edits to any consumer.\n *\n * \"Thin\" means no `installmentOptions` (T9's own fragment), no `savedCards` (T12's), and no\n * `selectedInstallment` (T6's) — the heavy, optional, and iterated subtrees ADR-0011/ADR-0012 split out.\n * `methods[].validator` *is* selected here: it is a non-normalized value object off `Payment.methods`\n * that cannot be subscribed separately, and T7 tests every method's `numberRegex` to detect a network.\n *\n * `children` is the section composition, not a per-method template — the method picker is\n * `PaymentMethodList`, an independently placeable part with its own hooks.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, matching the merged `payment-summary` sibling. The codegen\n// `documents` glob does not scan `src/matter/payment*`, so the typed `graphql()` factory is\n// unavailable here; `data-component-contract.test.ts` validates this fragment against the real schema.\n//\n// Selects `payment { id }` so Apollo's InMemoryCache normalizes `Payment` by id — required for the\n// `Payment` entity that `paymentMethodSelect` echoes back to update the same cache entity this\n// fragment reads. `fetchStrategy: 'reactive'`'s no-refetch guarantee holds only if both sides\n// normalize to one entity.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionData 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/**\n * The default payment-group scope: credit and debit (T140, FR-2, Decision 2). Both strings are\n * store-configured, so a store whose groups differ must set `group` explicitly; `group: ''` scopes\n * nothing (specs/payment-section-root.md § Documentation Gaps item 1). Widened from a single string to\n * a set (Decision 1) — a public API break for any consumer importing it directly (Interfaces).\n */\n/**\n * The roots' keyed `$data` (ADR-0015, arity 2): the `Payment` slice the selection engine reads, and the\n * cart total `add_payment_info` needs (moved here from `CardEntry`, which reads no cart).\n */\nexport type PaymentSectionRootData = {\n  payment?: PaymentSectionData;\n  cart?: PaymentCartData;\n} | null;\n\nexport const DEFAULT_METHOD_GROUP: readonly string[] = ['creditCardPaymentGroup', 'debitCardPaymentGroup'];\n\n// ---------------------------------------------------------------------------\n// Payment context — provided by both section roots, read by every leaf\n// ---------------------------------------------------------------------------\n\n/**\n * The `payment` context contract, normative for T7–T12 and T14. Everything the selection engine\n * resolves, plus the overlay disclosure. What is deliberately absent is part of the contract too: no\n * card number, CVV, expiration, or holder name (RFC D13 — they live only in the card entry's local\n * state); no submission channel for the place-order sequence, which is the separate, narrow\n * `PaymentSubmissionProvider` below (T13) precisely so no card-shaped value ever joins this contract;\n * no `installmentOptions` / `savedCards` / `selectedInstallment` (their owners' fragments); and no\n * optimistic mirror of the persisted selection.\n */\nexport type PaymentContextValue = Readonly<\n  PaymentMethodSelection & {\n    /** The collapsed surface's disclosure state. Always `true` under `PaymentSectionRoot`. */\n    open: boolean;\n    /**\n     * Drives the collapsed surface. A no-op under `PaymentSectionRoot`, so a leaf written for the\n     * overlay composes unchanged inline. Selecting a method never closes the surface on its own — the\n     * shopper still has a card to type — so closing is the composition's call (Decision 5).\n     */\n    setOpen: (open: boolean) => void;\n  }\n>;\n\nconst PAYMENT_CONTEXT_UNSET = Symbol('PaymentContextUnset');\n\nconst PaymentContextInternal = createContext<PaymentContextValue | typeof PAYMENT_CONTEXT_UNSET>(PAYMENT_CONTEXT_UNSET);\n\n/** The provider both section roots render. Exported for `PaymentSectionController`. */\nexport const PaymentContext = PaymentContextInternal as React.Context<PaymentContextValue>;\n\n/**\n * Read the payment section's selection state, draft, and overlay disclosure from the nearest\n * `PaymentSectionRoot` or `PaymentSectionController`. Throws outside either subtree — a misplaced\n * consumer is a composition bug the author should see immediately, not a silent degrade to an empty\n * selection — mirroring `useSession()` / `useDeliveryOptions()`. ADR-0009's compiler check catches the\n * same mistake before emission for schema-authored pages; this is the defense-in-depth layer for\n * Storybook, tests, and hand-written JSX.\n */\nexport function usePayment(): PaymentContextValue {\n  const ctx = useContext(PaymentContextInternal);\n  if (ctx === PAYMENT_CONTEXT_UNSET) {\n    throw new Error('usePayment() must be used inside a <PaymentSectionRoot> or <PaymentSectionController> subtree.');\n  }\n  return ctx;\n}\n\nconst NO_DISCLOSURE = () => {};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionRootProps = ComponentPropsWithRef<'div'> & {\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 (FR-4, US-3). T1's read model is method-agnostic and assigns the\n   * narrowing to the consumer; this prop supplies no method, label, or ordering — the list itself is\n   * fragment data. 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};\n\n/** Renders its own controls from the context's method list — `children` would have nothing to template. */\nexport type PaymentMethodListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /**\n   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).\n   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to\n   * the default rather than rendering a nameless group.\n   */\n  legend?: string;\n  /**\n   * The single card control's name (T171, Decision 8). The control stands for every in-scope\n   * credit/debit method at once, so it cannot take its name from one of their `method.name` values the\n   * way a per-network row did — it is authored copy instead, defaulting to the PRD's own string.\n   * Resolved through `resolveAuthoredCopy` exactly as `legend` is, so an authored empty or\n   * whitespace-only string falls back rather than rendering a nameless control.\n   */\n  cardLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionRootDefinition = defineComponent<PaymentSectionRootProps>({\n  name: 'PaymentSectionRoot',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionRoot,\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', category: 'commerce' },\n  schema: {\n    // A literal, not `DEFAULT_METHOD_GROUP`: the native catalog builder extracts `schema` statically\n    // and silently drops an identifier-valued default, so the built entry would carry no default and\n    // the compiler would emit the section unscoped. `payment.test.tsx` asserts the literal matches the\n    // constant, and that the built catalog kept the default.\n    // T140, Decision 2/OQ-6: `type: 'array'` — no code path in packages/sukima/crates/sukima-core/\n    // validates an authored prop's JSON value against this declared type, so a store's existing bare\n    // string keeps compiling. No `items`: an enum would validate against a closed set of group names,\n    // which is wrong for a store that renamed its group (OQ-3) — the exact fragility Decision 1 closes.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n  },\n  guideline:\n    \"Root of the checkout payment section: reads the payment methods and the current selection from the order form and provides the 'payment' context every payment leaf needs and the 'card-capture' context CardEntry needs, so place CardEntry, CardholderDocument, Installments, SaveCard, BillingAddress, SavedCards, PlaceOrder, and PaymentMethodList as its children — none of them render without a payment root ancestor. Renders one container div and no chrome or copy of its own; headings and layout belong to the composition. Selecting a payment option dispatches $actions.payment.setMethod and every subscriber re-renders from the cache with no refetch — and for a card it is the number the shopper types that decides the network, not an option they pick, so PaymentMethodList shows every in-scope credit and debit method as ONE card option. Which methods exist is always real data — never author them as props; group only scopes the list by the store's payment group(s) — defaults to credit and debit together, accepts one group name or a set of them, and set it to \\\"\\\" to show every method, one option each, with no card option. Use PaymentSectionController instead when the section should live in a drawer or modal. See payment.md.\",\n});\n\nexport const PaymentMethodListDefinition = defineComponent<PaymentMethodListProps>({\n  name: 'PaymentMethodList',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethodList,\n  requiresContext: 'payment',\n  editor: { label: 'Payment Method List', category: 'commerce' },\n  schema: {\n    // T38/T171: inline literals, never identifiers — the native catalog builder extracts `schema`\n    // statically and silently drops an identifier-valued default (INV-8).\n    legend: { type: 'string', default: 'Payment method', label: 'Legend' },\n    cardLabel: { type: 'string', default: 'Pay with Credit / Debit Card', label: 'Card option label' },\n  },\n  guideline:\n    'The payment-method picker: a radio group of the payment options the order form offers, plus the inline selection error (role=\"alert\"). Every in-scope credit and debit method is ONE option — the network comes from the card number the shopper types, never from a row they pick — and any other in-scope method (e.g. Pix) keeps a row of its own; set group to \"\" on the root to switch that off and get one row per method. Selecting an option dispatches the method selection. Selecting a non-card option hides the card form, and the card option brings it back. Place it inside a PaymentSectionRoot, or inside the DialogPopup/DrawerPopup of a PaymentSectionController. It renders its own options from real data, so it takes no children and no method props; author the card option\\'s wording with cardLabel. Keep it composed: it is the only element that surfaces a rejected selection, and the only control that can recover a selection this section does not serve — omit it and a shopper whose persisted method sits outside group has no reachable way back. Must be inside a payment root.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionRoot({\n  group = DEFAULT_METHOD_GROUP,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  className,\n  children,\n  ...props\n}: PaymentSectionRootProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, $data: $data?.payment ?? null, $actions });\n  const payment = useMemo<PaymentContextValue>(\n    () => ({ ...selection, open: true, setOpen: NO_DISCLOSURE }),\n    [selection],\n  );\n\n  return (\n    <PaymentContextInternal value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          <div\n            {...props}\n            className={className}\n            data-fs-payment-section=\"\"\n            {...(selection.draft.path ? { 'data-fs-payment-section-path': selection.draft.path } : {})}\n            // T28, Decision 5: presence attribute only, deliberately never `inert` — `PlaceOrder` composes\n            // as a child of this same container (FR-6), so making it inert here would swallow the CTA's\n            // own role=\"alert\"/role=\"status\" regions, the shopper's only channel for the outcome.\n            {...(selection.placing ? { 'data-fs-payment-section-placing': '' } : {})}\n          >\n            {children}\n          </div>\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContextInternal>\n  );\n}\n\n/**\n * The picker's presence state, always emitted so a swatch can surface a row-less container — otherwise\n * a zero-height element under any stacking swatch, and the \"visible empty region\" the section's\n * group-default risk is accepted on. `loading` (still resolving) and `empty` (resolved, nothing in\n * scope) stay distinct: one is a wait, the other a misconfiguration.\n */\nfunction methodListState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/**\n * The DOM value the collapsed card control carries inside the `RadioGroup`. Base UI requires every\n * radio root to have one, and this control stands for N methods, so there is no `method.id` it could\n * use.\n *\n * It is a radio-group value and nothing else — **never a method id** (INV-1, ADR-0023). It is never\n * dispatched: `handleValueChange` below maps it back to `resolvePreselectionCandidateId`'s answer\n * before calling `selectMethod`, and records card mode through `selectNewCard()`, which dispatches\n * nothing, when there is no candidate (T191, FR-6). The prefix keeps it from ever colliding with a\n * `PaymentMethod.id` a standalone row is bound to.\n */\nconst CARD_CONTROL_VALUE = '__fs-card-control';\n\nexport function PaymentMethodList({ legend, cardLabel, className, ...props }: PaymentMethodListProps) {\n  const {\n    methods,\n    allMethods,\n    persistedMethodId,\n    selectedMethodId,\n    selectionError,\n    selectMethod,\n    selectNewCard,\n    cardModeActive,\n    loading,\n    placing,\n    setMethodListMounted,\n  } = usePayment();\n\n  // T171, FR-1/FR-2: one control for the in-scope card methods, one row for every other in-scope\n  // method. Memoized off the two lists only (NFR-5) — nothing here may widen what re-creates the\n  // `payment` context value, which a keystroke already churns enough.\n  const { collapsedCardMethods, standaloneMethods } = useMemo(\n    () => splitCardMethods({ methods, allMethods }),\n    [methods, allMethods],\n  );\n  // Decision 3: the collapsed control dispatches the *shared* preselection candidate, so the escape\n  // hatch and the preselection can never disagree about whether an id is available.\n  const cardCandidateId = useMemo(() => resolvePreselectionCandidateId(methods), [methods]);\n  const canRevealCardPayment = resolveCanRevealCardPayment({ collapsedCardMethods, standaloneMethods });\n\n  // Decision 2: derived, never bound to one `method.id` — a control standing for N methods has none.\n  // Checked when the persisted selection resolves inside the collapsed set, and when nothing is\n  // persisted at all (PRD REQ-02's \"the card payment option is selected by default\"). The second arm\n  // is a deliberate divergence from the pre-T171 bound-to-`$data` behaviour: the control can read\n  // checked while `$data.selectedMethodId` is still null, having dispatched nothing. `persistedMethodId`\n  // is the raw, unscoped fact on purpose — a persisted method this section does not serve must leave the\n  // control unchecked, which is what keeps it activatable as US-5's way back. T191 (FR-6): card mode is\n  // the third arm, the card option chosen over such a selection or over a non-card one.\n  const cardControlChecked =\n    collapsedCardMethods.length > 0 &&\n    (persistedMethodId === null ||\n      collapsedCardMethods.some((method) => method.id === selectedMethodId) ||\n      cardModeActive);\n\n  // Fix pass, finding R2: registers this instance with the shared engine so the card leaves know an\n  // escape hatch exists before they ever collapse — a section composed with no `PaymentMethodList` at\n  // all must never hide the only remaining way to change the method (typing a new card number).\n  // Retracted unconditionally on unmount, unlike `setPlacing`'s own \"leave it if still placing\"\n  // carve-out: there is no in-flight sequence here for an abandoned instance to still be part of.\n  //\n  // T191, Decision 5 (after T171's Decision 4): what is registered is `canRevealCardPayment`, not the\n  // bare fact of being mounted — whether this list can bring the card form back. A rendered card\n  // option always can, since card mode needs no method id; without one, only a row bound to a card\n  // method can. See `resolveCanRevealCardPayment`'s own doc comment. The dependency list carries it,\n  // so the registration re-runs when the method list resolves.\n  //\n  // Fix pass round 2 (flash regression): `useLayoutEffect`, not `useEffect` — mirroring\n  // `place-order.tsx`'s own `setPlacing` registration, the structurally identical precedent for\n  // publishing a ref-counted fact to this shared engine from a leaf's mount. A passive effect runs\n  // after the browser has already painted, so a root whose persisted selection is genuinely out of\n  // scope committed one real frame with `methodListMounted` still `false` — the collapse (then\n  // `selectionOutOfScope && methodListMounted`, now `cardPaymentCollapsed`) computed `false` for that\n  // frame, painting the card form visible, focusable, and with its security code not yet cleared,\n  // before the registration ever landed and a second commit hid it. A layout effect's own state update\n  // is guaranteed to flush synchronously before the browser paints, so the very first frame a shopper\n  // can ever see already reflects `methodListMounted`. The card leaves read it purely at render time,\n  // not from an effect of their own, so this reorders nothing on that side: whichever commit this\n  // layout effect's own update produces is the one their next render (still pre-paint) sees.\n  const instanceKey = useId();\n  useLayoutEffect(() => {\n    setMethodListMounted(instanceKey, canRevealCardPayment);\n    return () => setMethodListMounted(instanceKey, false);\n  }, [instanceKey, setMethodListMounted, canRevealCardPayment]);\n\n  // INV-1: only an id the read model supplied is ever dispatched. A standalone row's value *is* its own\n  // `method.id`; the collapsed control's value is a DOM value with no method behind it, so it routes\n  // through the shared candidate instead (FR-4). With no candidate to name it records card mode, which\n  // brings the card form back and sends nothing (T191, FR-6, Decision 6).\n  function handleValueChange(value: string) {\n    if (value === CARD_CONTROL_VALUE) {\n      if (cardCandidateId !== null) {\n        selectMethod({ methodId: cardCandidateId });\n      } else {\n        selectNewCard();\n      }\n      return;\n    }\n    selectMethod({ methodId: value });\n  }\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-payment-method-list=\"\"\n      data-fs-payment-method-list-state={methodListState({ loading, count: methods.length })}\n      {...(placing ? { 'data-fs-payment-method-list-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-payment-method-list-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {methods.length > 0 ? (\n        // T38, Decision 1: Fieldset.Root + Fieldset.Legend, exactly what card-entry.tsx:1101-1112\n        // already ships — Base UI propagates the legend's id as aria-labelledby onto the descendant\n        // RadioGroup, so this one wrapper names both the fieldset and the radiogroup (measured).\n        <Fieldset.Root data-fs-payment-method-list-fieldset=\"\">\n          <Fieldset.Legend>{resolveAuthoredCopy(legend, 'Payment method')}</Fieldset.Legend>\n          <RadioGroup\n            value={cardControlChecked ? CARD_CONTROL_VALUE : (selectedMethodId ?? '')}\n            onValueChange={handleValueChange}\n          >\n            {collapsedCardMethods.length > 0 ? (\n              // One control for every in-scope credit and debit method (FR-1, Decision 1). Both\n              // styling hooks stay exactly where a per-network row carried them — `payment.md`'s\n              // styling table documents them, so a store's swatch keeps its selectors.\n              <RadioRoot value={CARD_CONTROL_VALUE}>\n                <RadioIndicator data-fs-payment-method-indicator=\"\" />\n                <span data-fs-payment-method-name=\"\">\n                  {resolveAuthoredCopy(cardLabel, 'Pay with Credit / Debit Card')}\n                </span>\n              </RadioRoot>\n            ) : null}\n            {standaloneMethods.map((method) => (\n              <RadioRoot key={method.id} value={method.id}>\n                <RadioIndicator data-fs-payment-method-indicator=\"\" />\n                <span data-fs-payment-method-name=\"\">{method.name}</span>\n              </RadioRoot>\n            ))}\n          </RadioGroup>\n        </Fieldset.Root>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/payment/use-payment-method-selection.d.ts

@@ -1,7 +1,9 @@
 import { PaymentMethodSelectInput } from "../../sdk/payment/operations.js";
 import "../../sdk/actions/types.js";
 import { PaymentSubmissionPath } from "../../sdk/payment/submission-registry.js";
+import { DocumentType } from "../../particles/document-field/document-field.js";
 import { PlaceOrderAttempt, SetPlaceOrderAttempt } from "../../sdk/payment/use-place-order.js";
+import { PaymentRefusalTarget } from "./use-payment-submit-gate.js";
 //#region src/matter/payment/use-payment-method-selection.d.ts
 /**
  * The payment section's selection engine (specs/payment-section-root.md, T5 of the Credit Card epic).
@@ -34,12 +36,27 @@ export type PaymentSectionMethod = Readonly<{
   groupName: string;
   validator: PaymentSectionValidator;
 }>;
+/** One document type a country's table lists. `type` is the API's lower-case id (`ssn`, `cpf`, `sin`, `rfc`). */
+export type PaymentSectionCountryDocument = Readonly<{
+  type: string;
+  displayable: boolean;
+  required: boolean;
+}>;
+/** One row of `Payment.countries` (T213). */
+export type PaymentSectionCountry = Readonly<{
+  countryCode: string;
+  documents: readonly PaymentSectionCountryDocument[];
+}>;
 export type PaymentSectionData = {
   methods?: readonly PaymentSectionMethod[];
   selectedMethodId?: string | null;
   selectedAccountId?: string | null;
   /** Persisted BIN off `payments[0]`. `undefined` while the entity resolves or when a hand-written slice omits it. */
   selectedBin?: string | null;
+  /** The store's ISO 3166-1 alpha-3 country (`USA`), or `null` when the order form carries none (T213). */
+  storeCountryCode?: string | null;
+  /** The per-country document table (T213). `undefined` when a hand-written slice omits it. */
+  countries?: readonly PaymentSectionCountry[];
 } | null;
 /**
  * Which entry path the shopper is on. Aliases the submission channel's key type (T13), which the
@@ -138,6 +155,12 @@ export type PaymentMethodSelection = {
    * `selectedMethodId` (T74, Decision 4/7).
    */
   persistedMethodId: string | null;
+  /**
+   * The document type the store's country asks for (`resolveCountryDocumentType`, T42), or `null` when
+   * the country is unlisted, absent or has no displayable type this build knows. The country half of the
+   * cardholder-document rule; the selected method supplies the other half (`resolveCardholderDocument`).
+   */
+  countryDocumentType: DocumentType | null;
   /**
    * The persisted selection **as this section serves it** — `selectedMethod?.id ?? null`. `null` both
    * when nothing is persisted and when what is persisted sits outside `group`; `persistedMethodId`
@@ -297,6 +320,22 @@ export type PaymentMethodSelection = {
    * clobbering a newer outcome.
    */
   setAttempt: SetPlaceOrderAttempt;
+  /**
+   * Registers how one leaf takes focus when a refusal names it (T212, docs/features/credit-card-r2/rfc.md
+   * § D21). `focus` returns `true` only when the element took focus. Returns a function that removes
+   * exactly this entry; calling it twice is a no-op. Backed by a ref, so registering or unregistering
+   * never changes this object's identity or re-renders the section (NFR-2); identity is stable for the
+   * root's lifetime.
+   */
+  registerRefusalFocus: (target: PaymentRefusalTarget, focus: () => boolean) => () => void;
+  /**
+   * Calls the target's registered functions in registration order and stops at the first that returns
+   * `true`. `false` when none did, including when none is registered. A function that throws counts as
+   * having declined: the error is contained here so a third-party leaf's `focus` can never become an
+   * unhandled rejection in the click that called this, and the next entry is still tried. Identity is
+   * stable for the root's lifetime.
+   */
+  focusRefusal: (target: PaymentRefusalTarget) => boolean;
 };
 //#endregion
 //# sourceMappingURL=use-payment-method-selection.d.ts.map

package/dist/matter/payment/use-payment-method-selection.js

@@ -1,4 +1,5 @@
 "use client";
+import { resolveCountryDocumentType } from "./cardholder-document-rule.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/matter/payment/use-payment-method-selection.ts
 const EMPTY_METHODS = [];
@@ -200,6 +201,12 @@ function usePaymentMethodSelection({ group, $data, $actions }) {
 	const allMethods = $data?.methods ?? EMPTY_METHODS;
 	const persistedMethodId = $data?.selectedMethodId ?? null;
 	const selectedAccountId = $data?.selectedAccountId ?? null;
+	const storeCountryCode = $data?.storeCountryCode;
+	const countries = $data?.countries;
+	const countryDocumentType = useMemo(() => resolveCountryDocumentType({
+		storeCountryCode,
+		countries
+	}), [storeCountryCode, countries]);
 	const methods = useMemo(() => {
 		if (group === "") return allMethods;
 		const groups = typeof group === "string" ? [group] : group;
@@ -344,6 +351,21 @@ function usePaymentMethodSelection({ group, $data, $actions }) {
 			return { mountedKeys: nextKeys };
 		});
 	}, []);
+	const refusalFocusRef = useRef(/* @__PURE__ */ new Map());
+	const registerRefusalFocus = useCallback((target, focus) => {
+		const entry = { focus };
+		refusalFocusRef.current.set(target, [...refusalFocusRef.current.get(target) ?? [], entry]);
+		return () => {
+			const entries = refusalFocusRef.current.get(target);
+			if (entries) refusalFocusRef.current.set(target, entries.filter((candidate) => candidate !== entry));
+		};
+	}, []);
+	const focusRefusal = useCallback((target) => {
+		for (const { focus } of refusalFocusRef.current.get(target) ?? []) try {
+			if (focus()) return true;
+		} catch {}
+		return false;
+	}, []);
 	const attemptResolved = attempt !== null && (attempt.phase === "refused" || attempt.phase === "settled");
 	const placing = placingState.placingKeys.size > 0 && !attemptResolved;
 	const attemptedPreselectionIdsRef = useRef(/* @__PURE__ */ new Set());
@@ -401,6 +423,7 @@ function usePaymentMethodSelection({ group, $data, $actions }) {
 		methods,
 		allMethods,
 		persistedMethodId,
+		countryDocumentType,
 		selectedMethodId,
 		selectionOutOfScope,
 		methodListMounted,
@@ -425,11 +448,14 @@ function usePaymentMethodSelection({ group, $data, $actions }) {
 		placing,
 		setPlacing,
 		attempt,
-		setAttempt
+		setAttempt,
+		registerRefusalFocus,
+		focusRefusal
 	}), [
 		methods,
 		allMethods,
 		persistedMethodId,
+		countryDocumentType,
 		selectedMethodId,
 		selectionOutOfScope,
 		methodListMounted,
@@ -449,7 +475,9 @@ function usePaymentMethodSelection({ group, $data, $actions }) {
 		setDraftBillingAddressUnsaved,
 		placing,
 		setPlacing,
-		attempt
+		attempt,
+		registerRefusalFocus,
+		focusRefusal
 	]);
 }
 //#endregion