@vtex/faststore 0.0.5 → 0.0.6

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

@@ -0,0 +1,107 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { PaymentSubmissionProvider } from "../../sdk/payment/submission-registry.js";
+import { usePaymentMethodSelection } from "./use-payment-method-selection.js";
+import { PaymentCardCaptureProvider } from "./payment-card-capture.js";
+import { DEFAULT_METHOD_GROUP, PaymentContext } from "./payment.js";
+import { cloneElement, isValidElement, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const PaymentSectionControllerDefinition = defineComponent({
+	name: "PaymentSectionController",
+	importPath: "@vtex/faststore/components",
+	component: PaymentSectionController,
+	fragment: `
+  fragment PaymentSectionControllerData on Query {
+    payment {
+      __typename
+      id
+      methods {
+        __typename
+        id
+        name
+        groupName
+        validator {
+          __typename
+          numberMask
+          numberRegex
+          cvvMask
+          cvvRegex
+          cvvRequired
+          expirationRequired
+          holderNameRequired
+          billingAddressRequired
+          documentDisplayable
+          documentRequired
+        }
+      }
+      selectedMethodId
+      selectedAccountId
+      selectedBin
+    }
+    cart {
+      __typename
+      id
+      total {
+        __typename
+        amount
+        currencyCode
+      }
+    }
+  }
+`,
+	fetchStrategy: "reactive",
+	actions: {
+		payment: ["setMethod", "sendPayments"],
+		analytics: ["track"]
+	},
+	providesContext: ["payment", "card-capture"],
+	editor: {
+		label: "Payment Section Controller",
+		category: "commerce"
+	},
+	schema: { group: {
+		type: "array",
+		default: ["creditCardPaymentGroup", "debitCardPaymentGroup"],
+		label: "Payment method group"
+	} },
+	guideline: "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.",
+	docPath: "./payment.md"
+});
+function PaymentSectionController({ group = DEFAULT_METHOD_GROUP, $data: $dataProp, $actions: $actionsProp, children }) {
+	const $data = useDataOverride($dataProp);
+	const $actions = useActionsOverride($actionsProp);
+	const selection = usePaymentMethodSelection({
+		group,
+		$data: $data?.payment ?? null,
+		$actions
+	});
+	const [open, setOpen] = useState(false);
+	const payment = useMemo(() => ({
+		...selection,
+		open,
+		setOpen
+	}), [selection, open]);
+	if (!isValidElement(children)) return children;
+	return /* @__PURE__ */ jsx(PaymentContext, {
+		value: payment,
+		children: /* @__PURE__ */ jsx(PaymentSubmissionProvider, {
+			path: selection.draft.path,
+			children: /* @__PURE__ */ jsx(PaymentCardCaptureProvider, {
+				selection,
+				cart: $data?.cart,
+				$actions,
+				children: cloneElement(children, {
+					open,
+					onOpenChange: setOpen
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { PaymentSectionController, PaymentSectionControllerDefinition };
+
+//# sourceMappingURL=payment-controller.js.map

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

@@ -0,0 +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"}

package/dist/matter/payment/payment-method-badges.d.ts

@@ -0,0 +1,57 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/payment/payment-method-badges.d.ts
+/**
+ * `PaymentMethodBadges` (specs/render-the-accepted-payment-method-badges.md, T75 of the Credit Card
+ * epic). Requirement 12.19's payment-step half: a section-level, data-driven, non-interactive strip —
+ * one badge per payment method the store currently accepts, read off `usePayment()` on every render.
+ * Never a prop, never local state, never CMS content.
+ *
+ * Three components render something visually similar and are not this (Decision 1):
+ * - `CardEntry`'s own detected-network mark (T71/T172) — a single mark (0 or 1), shown only once a
+ *   network is recognized from typed digits — lives inside the card-number field's own box, scoped
+ *   to the card group. It cannot be placed independently and cannot carry a wallet method.
+ * - The `PaymentMethods` particle (`particles/payment-methods/`) renders the same look from CMS
+ *   content. It serves store footers and does not react to a method being enabled or disabled in the
+ *   payment configuration.
+ * - `PaymentMethodList` is the selectable radio picker, not reassurance.
+ *
+ * Reads `allMethods` — the section's unfiltered list — rather than the group-scoped `methods` every
+ * picker and rendering leaf otherwise reads (Decision 3): the wallet methods this requirement names
+ * (PayPal, Google Pay) arrive under a different `groupName` and would never reach a `methods`-scoped
+ * leaf. See `allMethods`'s own doc comment in `use-payment-method-selection.ts` for the exception this
+ * strip is recorded as. Apple Pay itself carries no key in the map below: it is not a payment system in
+ * this read model at all (T133 tracks it as its own, separately blocked task).
+ */
+export declare const PAYMENT_METHOD_ICON_BY_KEY: Record<string, string>;
+export type PaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {
+  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-5) — no invented default. */
+  heading?: string;
+};
+export declare const PaymentMethodBadgesDefinition: ComponentDefinition<PaymentMethodBadgesProps>;
+export declare function PaymentMethodBadges({ heading, className, ...props }: PaymentMethodBadgesProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The unwrapped value of the fragment's single top-level `payment` field (arity-1, ADR-0015) — never
+ * a `{ payment: … }` wrapper. `methods` is optional: a resolved-but-partial slice is legal and
+ * collapses to the `empty` state, mirroring `usePaymentMethodSelection`'s R1 note. Nullable, matching
+ * every sibling slice type in this package (`PaymentSummaryData`, `CardEntryData`,
+ * `InstallmentsSelectData`, `PaymentSectionData`, …): `null`/absent until the entity resolves, which
+ * is exactly the `$data == null` branch below.
+ */
+export type AcceptedPaymentMethodBadgesData = {
+  methods?: Array<{
+    id: string;
+    name: string;
+  }>;
+} | null;
+export type AcceptedPaymentMethodBadgesProps = ComponentPropsWithRef<'div'> & {
+  /** Names the strip. Absent or blank renders no heading and leaves the list unnamed (FR-6) — no invented default. */
+  heading?: string;
+  /** Slice forwarded by the reactive runtime. `null`/absent until the entity resolves. */
+  $data?: AcceptedPaymentMethodBadgesData;
+};
+export declare const AcceptedPaymentMethodBadgesDefinition: ComponentDefinition<AcceptedPaymentMethodBadgesProps>;
+export declare function AcceptedPaymentMethodBadges({ heading, className, $data: $dataProp, ...props }: AcceptedPaymentMethodBadgesProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=payment-method-badges.d.ts.map

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

@@ -0,0 +1,192 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { Icon } from "../../particles/icon/icon.js";
+import { usePayment } from "./payment.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
+/**
+* `PaymentMethodBadges` (specs/render-the-accepted-payment-method-badges.md, T75 of the Credit Card
+* epic). Requirement 12.19's payment-step half: a section-level, data-driven, non-interactive strip —
+* one badge per payment method the store currently accepts, read off `usePayment()` on every render.
+* Never a prop, never local state, never CMS content.
+*
+* Three components render something visually similar and are not this (Decision 1):
+* - `CardEntry`'s own detected-network mark (T71/T172) — a single mark (0 or 1), shown only once a
+*   network is recognized from typed digits — lives inside the card-number field's own box, scoped
+*   to the card group. It cannot be placed independently and cannot carry a wallet method.
+* - The `PaymentMethods` particle (`particles/payment-methods/`) renders the same look from CMS
+*   content. It serves store footers and does not react to a method being enabled or disabled in the
+*   payment configuration.
+* - `PaymentMethodList` is the selectable radio picker, not reassurance.
+*
+* Reads `allMethods` — the section's unfiltered list — rather than the group-scoped `methods` every
+* picker and rendering leaf otherwise reads (Decision 3): the wallet methods this requirement names
+* (PayPal, Google Pay) arrive under a different `groupName` and would never reach a `methods`-scoped
+* leaf. See `allMethods`'s own doc comment in `use-payment-method-selection.ts` for the exception this
+* strip is recorded as. Apple Pay itself carries no key in the map below: it is not a payment system in
+* this read model at all (T133 tracks it as its own, separately blocked task).
+*/
+const PAYMENT_METHOD_ICON_BY_KEY = Object.freeze({
+	...NETWORK_ICON_BY_KEY,
+	paypal: "paypal",
+	googlepay: "google-pay",
+	pix: "pix",
+	stripe: "stripe"
+});
+/**
+* Splits a store-configured name into lowercase a-z-only words. Every run of characters outside
+* a-z — spaces, punctuation, digits, accents — is a word *boundary*, never a character silently
+* stripped in place: `"WH Google Pay"` → `["wh", "google", "pay"]`; `"Boleto Bancário"` →
+* `["boleto", "banc", "rio"]` (the "á" splits the word instead of vanishing from inside it).
+*/
+function paymentMethodNameTokens(name) {
+	return name.toLowerCase().split(/[^a-z]+/).filter(Boolean);
+}
+/**
+* Resolves a store-configured method name to a base-dialect icon name by matching a key against one
+* token, or a run of adjacent tokens joined back together — never a raw substring of the whole name
+* (review fix, 2026-08-26). The previous implementation normalised the whole name to one string and
+* checked `String.includes`, which matched `elo` inside real, unrelated Brazilian payment-system and
+* acquirer names — "Cielo" and "Visanet" resolved to a network they are not, "Pague pelo Pix" and
+* "Nubank pelo Pix" resolved to Elo instead of Pix, and "Alelo Refeição" (a real meal-voucher brand)
+* resolved to Elo too — because the key's letters simply occur in that order somewhere in the name.
+* Token equality cannot do that: `"cielo"` is one token, and it is never *equal* to `"elo"`, only
+* spelled with it in the middle.
+*
+* This still resolves `"WH Google Pay"` → `googlepay`, the false negative containment was introduced
+* to fix: joining tokens 1 and 2 (`google` + `pay`) produces a string equal to that key, even though
+* neither token alone is. For each start position the longest run of adjacent tokens is tried first,
+* falling back to shorter ones only when the longer run matches no key — "Mastercard Debit" needs
+* exactly that fallback (`mastercarddebit` is not a key; `mastercard` alone is) — which is also what
+* disambiguates a shorter key from a longer one built out of the same tokens (`diners` vs
+* `dinersclub`) without a separate sort step whose removal a test cannot observe.
+*/
+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("")];
+		if (icon) return icon;
+	}
+	return null;
+}
+function badgesState({ loading, count }) {
+	if (loading) return "loading";
+	if (count === 0) return "empty";
+	return "ready";
+}
+const PaymentMethodBadgesDefinition = defineComponent({
+	name: "PaymentMethodBadges",
+	importPath: "@vtex/faststore/components",
+	component: PaymentMethodBadges,
+	requiresContext: "payment",
+	editor: {
+		label: "Payment Method Badges",
+		category: "commerce"
+	},
+	schema: { heading: {
+		type: "string",
+		label: "Heading"
+	} },
+	guideline: "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."
+});
+/**
+* Shared render path (Decision 3, T121): both `PaymentMethodBadges` and `AcceptedPaymentMethodBadges`
+* below call this one function, so the DOM contract cannot drift between the payment-step and the
+* cart-order-summary surface (FR-9). Takes the raw method list rather than either caller's own
+* already-resolved badge array, because icon resolution (`paymentMethodIconName`) belongs to this one
+* path, never duplicated per caller.
+*/
+function renderPaymentMethodBadges({ methods, loading, heading, className, rest }) {
+	const badges = methods.map((method) => ({
+		id: method.id,
+		name: method.name,
+		icon: paymentMethodIconName(method.name)
+	}));
+	const named = Boolean(heading?.trim());
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className,
+		"data-fs-payment-method-badges": "",
+		"data-fs-payment-method-badges-state": badgesState({
+			loading,
+			count: methods.length
+		}),
+		children: [named ? /* @__PURE__ */ jsx("h3", {
+			"data-fs-text": "",
+			"data-fs-payment-method-badges-heading": "",
+			children: heading
+		}) : null, badges.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			"data-fs-payment-method-badges-list": "",
+			"aria-label": named ? heading : void 0,
+			children: badges.map((badge) => /* @__PURE__ */ jsx("li", {
+				"data-fs-payment-method-badge": "",
+				"data-fs-payment-method-badge-id": badge.id,
+				"aria-hidden": badge.icon || badge.name ? void 0 : true,
+				children: badge.icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+					name: badge.icon,
+					"data-fs-payment-method-badge-icon": ""
+				}), /* @__PURE__ */ jsx("span", {
+					"data-fs-sr-only": "",
+					className: "sr-only",
+					children: badge.name
+				})] }) : badge.name
+			}, badge.id))
+		}) : null]
+	});
+}
+function PaymentMethodBadges({ heading, className, ...props }) {
+	const { allMethods, loading } = usePayment();
+	return renderPaymentMethodBadges({
+		methods: allMethods,
+		loading,
+		heading,
+		className,
+		rest: props
+	});
+}
+const AcceptedPaymentMethodBadgesDefinition = defineComponent({
+	name: "AcceptedPaymentMethodBadges",
+	importPath: "@vtex/faststore/components",
+	component: AcceptedPaymentMethodBadges,
+	fragment: `
+  fragment AcceptedPaymentMethodBadgesData on Query {
+    payment {
+      __typename
+      id
+      methods {
+        __typename
+        id
+        name
+      }
+    }
+  }
+`,
+	fetchStrategy: "reactive",
+	editor: {
+		label: "Accepted Payment Method Badges",
+		category: "commerce"
+	},
+	schema: { heading: {
+		type: "string",
+		label: "Heading"
+	} },
+	guideline: "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."
+});
+function AcceptedPaymentMethodBadges({ heading, className, $data: $dataProp, ...props }) {
+	const $data = useDataOverride($dataProp);
+	return renderPaymentMethodBadges({
+		methods: $data?.methods ?? [],
+		loading: $data == null,
+		heading,
+		className,
+		rest: props
+	});
+}
+//#endregion
+export { AcceptedPaymentMethodBadges, AcceptedPaymentMethodBadgesDefinition, PAYMENT_METHOD_ICON_BY_KEY, PaymentMethodBadges, PaymentMethodBadgesDefinition };
+
+//# sourceMappingURL=payment-method-badges.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,89 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { PaymentMethodSelection, PaymentSectionData } from "./use-payment-method-selection.js";
+import { PaymentCartData } from "./payment-card-capture.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/payment/payment.d.ts
+/**
+ * The default payment-group scope: credit and debit (T140, FR-2, Decision 2). Both strings are
+ * store-configured, so a store whose groups differ must set `group` explicitly; `group: ''` scopes
+ * nothing (specs/payment-section-root.md § Documentation Gaps item 1). Widened from a single string to
+ * a set (Decision 1) — a public API break for any consumer importing it directly (Interfaces).
+ */
+/**
+ * The roots' keyed `$data` (ADR-0015, arity 2): the `Payment` slice the selection engine reads, and the
+ * cart total `add_payment_info` needs (moved here from `CardEntry`, which reads no cart).
+ */
+export type PaymentSectionRootData = {
+  payment?: PaymentSectionData;
+  cart?: PaymentCartData;
+} | null;
+export declare const DEFAULT_METHOD_GROUP: readonly string[];
+/**
+ * The `payment` context contract, normative for T7–T12 and T14. Everything the selection engine
+ * resolves, plus the overlay disclosure. What is deliberately absent is part of the contract too: no
+ * card number, CVV, expiration, or holder name (RFC D13 — they live only in the card entry's local
+ * state); no submission channel for the place-order sequence, which is the separate, narrow
+ * `PaymentSubmissionProvider` below (T13) precisely so no card-shaped value ever joins this contract;
+ * no `installmentOptions` / `savedCards` / `selectedInstallment` (their owners' fragments); and no
+ * optimistic mirror of the persisted selection.
+ */
+export type PaymentContextValue = Readonly<PaymentMethodSelection & {
+  /** The collapsed surface's disclosure state. Always `true` under `PaymentSectionRoot`. */
+  open: boolean;
+  /**
+   * Drives the collapsed surface. A no-op under `PaymentSectionRoot`, so a leaf written for the
+   * overlay composes unchanged inline. Selecting a method never closes the surface on its own — the
+   * shopper still has a card to type — so closing is the composition's call (Decision 5).
+   */
+  setOpen: (open: boolean) => void;
+}>;
+/** The provider both section roots render. Exported for `PaymentSectionController`. */
+export declare const PaymentContext: React.Context<PaymentContextValue>;
+/**
+ * Read the payment section's selection state, draft, and overlay disclosure from the nearest
+ * `PaymentSectionRoot` or `PaymentSectionController`. Throws outside either subtree — a misplaced
+ * consumer is a composition bug the author should see immediately, not a silent degrade to an empty
+ * selection — mirroring `useSession()` / `useDeliveryOptions()`. ADR-0009's compiler check catches the
+ * same mistake before emission for schema-authored pages; this is the defense-in-depth layer for
+ * Storybook, tests, and hand-written JSX.
+ */
+export declare function usePayment(): PaymentContextValue;
+export type PaymentSectionRootProps = ComponentPropsWithRef<'div'> & {
+  /**
+   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope
+   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and
+   * scopes to exactly that one group (FR-4, US-3). T1's read model is method-agnostic and assigns the
+   * narrowing to the consumer; this prop supplies no method, label, or ordering — the list itself is
+   * fragment data. An empty string scopes nothing.
+   */
+  group?: string | readonly string[];
+  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */
+  $data?: PaymentSectionRootData;
+  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */
+  $actions?: ComponentActions;
+};
+/** Renders its own controls from the context's method list — `children` would have nothing to template. */
+export type PaymentMethodListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /**
+   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).
+   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to
+   * the default rather than rendering a nameless group.
+   */
+  legend?: string;
+  /**
+   * The single card control's name (T171, Decision 8). The control stands for every in-scope
+   * credit/debit method at once, so it cannot take its name from one of their `method.name` values the
+   * way a per-network row did — it is authored copy instead, defaulting to the PRD's own string.
+   * Resolved through `resolveAuthoredCopy` exactly as `legend` is, so an authored empty or
+   * whitespace-only string falls back rather than rendering a nameless control.
+   */
+  cardLabel?: string;
+};
+export declare const PaymentSectionRootDefinition: ComponentDefinition<PaymentSectionRootProps>;
+export declare const PaymentMethodListDefinition: ComponentDefinition<PaymentMethodListProps>;
+export declare function PaymentSectionRoot({ group, $data: $dataProp, $actions: $actionsProp, className, children, ...props }: PaymentSectionRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentMethodList({ legend, cardLabel, className, ...props }: PaymentMethodListProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=payment.d.ts.map