@vtex/faststore 0.0.4 → 0.0.6

package/dist/matter/save-card/save-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-card.js","names":[],"sources":["../../../src/matter/save-card/save-card.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef } from 'react';\nimport { useState } from 'react';\nimport { Checkbox } from '../../particles/checkbox/checkbox.js';\nimport { Field } from '../../particles/field/field.js';\nimport { Icon } from '../../particles/icon/icon.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 { usePayment } from '../payment/payment.js';\nimport { type SessionContextValue, useSession } from '../session/session.js';\n\n/**\n * The `SaveCard` matter (specs/save-card-control.md, T10 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D5). Composes `Checkbox` + `Field` into an opt-in, off-by-default\n * toggle plus a custom nickname field, visible only to an authenticated shopper.\n *\n * Writes exactly two client-only facts T7 already provisioned on `PaymentDraft`\n * (`setDraftSaveCard` / `setDraftCardLabel`, via `usePayment()`) — this component never registers on\n * the submission channel and never calls `sendPayments`. `CardEntry` (T7) folds both facts into the\n * card object at submit time (`card-entry.tsx:639-640`); the saved-card path does NOT, because it\n * submits `{ kind: 'saved', accountId, bin, securityCode }` (`saved-cards.tsx:355`) and\n * `PaymentGatewaySavedCard` (`sdk/payment/gateway.ts:103-111`) declares no field either fact could\n * occupy. So on that path both draft writes are inert while the consent below is still granted\n * account-wide. Checking the toggle grants the account-level data-storage consent a saved card\n * requires (`$actions.payment.saveCard(true)`); unchecking never revokes it — see specs/save-card-control.md Decision 1 for the rationale and the\n * last-write-wins hazard against `SavePersonalDataOptInControl`, which writes the same field.\n *\n * Self-gates on `useSession()` (never `SessionGuard`) and requires BOTH the `payment` and `session`\n * contexts — the first component in this package to declare `requiresContext` as an array (Decision 4).\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, matching `card-entry.tsx`'s / `payment.tsx`'s convention;\n// the codegen `documents` glob does not scan `src/matter/save-card*`. Deliberately its OWN fragment,\n// never composed under `ClientPreferencesRoot` — that Root's section context is built from a wrapped\n// `$data?.clientPreferences?.savePersonalData` read that is always `false` at runtime for an arity-1\n// fragment (ADR-0015), a live, pre-existing defect this component must not inherit\n// (specs/save-card-control.md Decision 2).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SaveCardData on Query {\n    clientPreferences {\n      __typename\n      id\n      savePersonalData\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The `$data` slice forwarded by the reactive runtime — the unwrapped `ClientPreferences` entity\n * (arity-1 fragment, ADR-0015): the value of the fragment's own `clientPreferences` top-level field,\n * never the wrapping `{ clientPreferences: ... }` shape. Mirrors `card-entry.tsx`'s / `saved-cards.tsx`'s\n * identical arity-1 contract. */\nexport type SaveCardData = {\n  savePersonalData?: boolean | null;\n} | null;\n\nexport type SaveCardProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** The toggle's own accessible label. */\n  label?: string;\n  /** Label for the nickname field. Rendered only while the toggle is checked. */\n  nicknameLabel?: string;\n  nicknamePlaceholder?: string;\n  /** Shown beside the toggle while `savePersonalData !== true` (covers both `false` and `null`). */\n  consentNoticeLabel?: string;\n  /** Disables both the toggle and the nickname field. */\n  disabled?: boolean;\n  /** This component's own `clientPreferences` slice (arity-1 fragment, ADR-0015). */\n  $data?: SaveCardData;\n  /** Compiler-injected action surface; carries `payment.saveCard`. */\n  $actions?: ComponentActions;\n};\n\n/** Legacy's own cap (`CardLabelInputForm.tsx:15`, `fastcheckout@cd09bec3`), carried here as a plain\n * HTML `maxLength` rather than a schema prop — schema entries are authorable copy, not behavior. */\nconst NICKNAME_MAX_LENGTH = 50;\n\n// ---------------------------------------------------------------------------\n// Pure decision functions — exported so the gate and the tri-state collapse are unit-testable\n// independent of any rendering (specs/save-card-control.md § Resolution logic).\n// ---------------------------------------------------------------------------\n\n/**\n * Whether the control should render at all. Requires BOTH `!loading` and `state === 'loggedIn'` —\n * `useSession()` forces `state: 'anonymous'` while loading (the least-privileged default), so this\n * reads correctly today even on `state` alone, but checking `loading` explicitly makes that\n * invariant load-bearing in this component's own code rather than incidental to `session.tsx`'s\n * current implementation. Takes no closure over component state, so it is safe to call fresh on\n * every render — this is what lets the control appear the instant a loading session resolves to a\n * logged-in shopper, with no stuck-hidden state (specs/save-card-control.md § NFR-1).\n */\nexport function isSaveCardVisible({ loading, state }: Pick<SessionContextValue, 'loading' | 'state'>): boolean {\n  return !loading && state === 'loggedIn';\n}\n\n/**\n * Whether the consent notice should render. Collapses `null` (\"the shopper has never chosen\") and\n * `false` (\"explicitly declined at some point\") into the same \"not yet granted\" outcome — checking\n * the toggle is a new grant either way, from this control's point of view\n * (specs/save-card-control.md Decision 2).\n */\nexport function isConsentNoticeVisible(savePersonalData: boolean | null | undefined): boolean {\n  return savePersonalData !== true;\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const SaveCardDefinition = defineComponent<SaveCardProps>({\n  name: 'SaveCard',\n  importPath: '@vtex/faststore/components',\n  component: SaveCard,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: ['payment', 'session'],\n  actions: { payment: ['saveCard'] },\n  editor: { label: 'Save Card', category: 'commerce' },\n  schema: {\n    label: { type: 'string', default: 'Save this card for next time', label: 'Toggle label' },\n    nicknameLabel: { type: 'string', default: 'Card nickname', label: 'Nickname field label' },\n    nicknamePlaceholder: { type: 'string', label: 'Nickname field placeholder' },\n    consentNoticeLabel: {\n      type: 'string',\n      default: 'Checking this also lets us store your personal data for future purchases.',\n      label: 'Consent notice label',\n    },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Opt-in save-card control for authenticated shoppers only: off by default; checking it writes the draft save-card flag/label AND grants the broader save-personal-data consent ($actions.payment.saveCard(true)); unchecking clears only the draft flag and never revokes that consent (see save-card-control.md Decision 1). The nickname field appears only while checked. Must be inside both a PaymentSectionRoot/PaymentSectionController (T5) and a SessionRoot — self-gates to null while the session is loading or the shopper is not logged in. Renders no card data; the flag and label are folded into the card object by CardEntry/SavedCards at submit time.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function SaveCard({\n  label = 'Save this card for next time',\n  nicknameLabel = 'Card nickname',\n  nicknamePlaceholder,\n  consentNoticeLabel = 'Checking this also lets us store your personal data for future purchases.',\n  disabled = false,\n  className,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  ...props\n}: SaveCardProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  // Also enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { state, loading } = useSession();\n  // Also enforces the PaymentSectionRoot/PaymentSectionController ancestor: usePayment() throws\n  // when rendered outside one.\n  const { draft, setDraftSaveCard, setDraftCardLabel, placing, cardPaymentCollapsed } = usePayment();\n\n  const [pending, setPending] = useState(false);\n  const [consentError, setConsentError] = useState<string | null>(null);\n\n  // Both hooks above are called unconditionally, before this early return, so neither context\n  // requirement is skipped depending on the auth state. T191 (FR-7, Decision 3): nothing renders while\n  // the card payment is collapsed either; the flag and label stay on `draft` for when it comes back.\n  if (cardPaymentCollapsed || !isSaveCardVisible({ loading, state })) return null;\n\n  const checked = draft.saveCard ?? false;\n  const fieldDisabled = disabled || pending;\n\n  async function handleCheckedChange(next: boolean) {\n    setDraftSaveCard(next);\n    setConsentError(null);\n    // Decision 1: unchecking withdraws only this transaction's local intent — no dispatch of any\n    // kind, so a standing `savePersonalData` consent an unrelated control granted is never touched.\n    if (!next) return;\n\n    const saveCard = $actions?.payment?.saveCard;\n    // Silent no-op when the action namespace is not injected, mirroring\n    // `usePaymentMethodSelection.selectMethod`'s \"no-op (no error, no throw)\" convention — this is a\n    // soft, consent-adjacent write, not the PCI-critical submission itself.\n    if (!saveCard) return;\n\n    setPending(true);\n    try {\n      const userErrors = await saveCard(true);\n      const [firstError] = userErrors;\n      if (firstError) setConsentError(firstError.message);\n    } finally {\n      setPending(false);\n    }\n  }\n\n  function handleNicknameChange(event: ChangeEvent<HTMLInputElement>) {\n    const raw = event.target.value.slice(0, NICKNAME_MAX_LENGTH);\n    // Normalizes an emptied field to `null`, never `''` — matches `PaymentDraft`'s existing\n    // \"always present, null means absent\" idiom for `bin`/`path`.\n    setDraftCardLabel(raw.length > 0 ? raw : null);\n  }\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-save-card=\"\"\n      {...(placing ? { 'data-fs-save-card-placing': '' } : {})}\n      {...(pending ? { 'data-fs-save-card-pending': '' } : {})}\n    >\n      <div data-fs-save-card-toggle-field=\"\">\n        <Field.Root disabled={fieldDisabled} data-fs-field-root=\"\">\n          <Field.Label>\n            <Checkbox.Root checked={checked} onCheckedChange={handleCheckedChange} disabled={fieldDisabled}>\n              <Checkbox.Indicator>\n                <Icon name=\"checked\" />\n              </Checkbox.Indicator>\n            </Checkbox.Root>\n            {label}\n          </Field.Label>\n        </Field.Root>\n        {isConsentNoticeVisible($data?.savePersonalData) ? (\n          <p data-fs-save-card-consent-notice=\"\">{consentNoticeLabel}</p>\n        ) : null}\n      </div>\n\n      {checked ? (\n        <div data-fs-save-card-nickname-field=\"\">\n          <Field.Root disabled={fieldDisabled} data-fs-field-root=\"\">\n            <Field.Label>{nicknameLabel}</Field.Label>\n            <Field.Control\n              name=\"cardLabel\"\n              placeholder={nicknamePlaceholder}\n              value={draft.cardLabel ?? ''}\n              onChange={handleNicknameChange}\n              disabled={fieldDisabled}\n              maxLength={NICKNAME_MAX_LENGTH}\n            />\n          </Field.Root>\n        </div>\n      ) : null}\n\n      {consentError ? (\n        <div role=\"alert\" data-fs-save-card-error=\"\">\n          {consentError}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/saved-cards/saved-cards.d.ts

@@ -0,0 +1,79 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/matter/saved-cards/saved-cards.d.ts
+/** The minimal per-row identifiers `SavedCards` needs to iterate and to dispatch selection. */
+export type SavedCardsListEntry = Readonly<{
+  id: string;
+  accountId: string;
+  methodId: string;
+  bin: string;
+}>;
+export type SavedCardsData = {
+  savedCards?: readonly SavedCardsListEntry[];
+} | null;
+export type SavedCardsProps = ComponentPropsWithRef<'div'> & {
+  /** Unwrapped `payment` value from the reactive runtime (arity-1 fragment, ADR-0015); `null` until resolved. */
+  $data?: SavedCardsData;
+  /** The per-row template, typically one `SavedCardOption`, repeated once per saved card. */
+  children?: ReactNode;
+  /**
+   * 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 full per-row slice `SavedCardOption` independently resolves via `reactive-list-item`. */
+export type SavedCardOptionSlice = Readonly<{
+  accountId: string;
+  methodId: string;
+  network: string;
+  lastFourDigits: string;
+  bin: string;
+  label: string | null;
+  expired: boolean;
+  cvvRequired: boolean;
+}>;
+export type SavedCardOptionProps = ComponentPropsWithRef<'div'> & {
+  /** Per-row slice from the reactive-list-item runtime; injected/overridden by the wrapper, or passed directly in tests. */
+  $data?: SavedCardOptionSlice | null;
+  /** Typically a `SavedCardCvvField`. */
+  children?: ReactNode;
+};
+export type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & {
+  /** Compiler-injected action surface; carries `payment.sendPayments`. */
+  $actions?: ComponentActions;
+  /**
+   * Accessible name for the CVV input. No visible `<label>` renders (Accessibility Contract), so this
+   * is the input's only accessible name — authorable rather than a hardcoded English string.
+   */
+  securityCodeLabel?: string;
+  /**
+   * Helper copy rendered as a sibling `<p>` and linked to the input via `aria-describedby` (this
+   * component's root is the input itself, so there is no `Field.Root` to host a `Field.Description` —
+   * saved-cards.md Decision 3). An empty string renders nothing. Copy configuration only — never the
+   * security code itself.
+   */
+  securityCodeDescription?: string;
+};
+export declare const SavedCardsDefinition: ComponentDefinition<SavedCardsProps>;
+export declare const SavedCardOptionDefinition: ComponentDefinition<SavedCardOptionProps>;
+export declare const SavedCardCvvFieldDefinition: ComponentDefinition<SavedCardCvvFieldProps>;
+export declare function SavedCards({ $data: $dataProp, legend, className, children, ...props }: SavedCardsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SavedCardOption({ $data: $dataProp, className, children, ...props }: SavedCardOptionProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The saved-card path's own client-synthesized refusal (T27, specs/place-order-preflight-card-
+ * validation.md FR-11/FR-12; Decision 8). Distinct from `card-entry`'s `INVALID_CARD_DATA` (a
+ * different path, a different set of fields, and importing it here would be a matter → matter
+ * dependency) and from the gateway's own codes.
+ *
+ * Never name this constant, or its string value, inside `sdk/payment/use-place-order.ts`: it contains
+ * `security` and would fail `CARD_FIELD_PATTERN`. The pre-flight only ever handles the opaque
+ * `PaymentUserError` (spec NFR-1, Risk R9).
+ */
+export declare const SAVED_CARD_INVALID_SECURITY_CODE = "INVALID_SECURITY_CODE";
+export declare function SavedCardCvvField({ $actions: $actionsProp, securityCodeLabel, securityCodeDescription, className, ...props }: SavedCardCvvFieldProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=saved-cards.d.ts.map

package/dist/matter/saved-cards/saved-cards.js

@@ -0,0 +1,387 @@
+"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 { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { Fieldset } from "../../particles/fieldset/fieldset.js";
+import { RadioGroup, RadioIndicator, RadioRoot } from "../../particles/radio/radio.js";
+import { useRegisterPaymentSubmission } from "../../sdk/payment/submission-registry.js";
+import { PAYMENT_NETWORK_ERROR_CODE } from "../../sdk/payment/operations.js";
+import { usePayment } from "../payment/payment.js";
+import { SECURITY_CODE_MASK_STYLE, isSecurityCodeComplete } from "../../sdk/payment/security-code-mask.js";
+import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
+import { createContext, useCallback, useContext, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/saved-cards/saved-cards.tsx
+/**
+* Pick a saved card and enter only the CVV (specs/saved-cards.md, T12 of the Credit Card epic;
+* docs/features/credit-card/rfc.md § D7). Three components, split by data-fetch role rather than by
+* visual grouping (ADR-0012 Option B, per `SavedCard`'s own schema doc comment):
+*
+* - `SavedCards` — the list root. Owns the minimal `{ id, accountId, methodId }` selection needed to
+*   iterate and to dispatch selection; publishes each row's entity ref via `ListItemRefContext`,
+*   mirroring `CartList`.
+* - `SavedCardOption` — the per-row template. Independently subscribes to its own `SavedCard:<id>`
+*   cache entity through the shipped `reactive-list-item` runtime, mirroring `CartItemRoot`.
+* - `SavedCardCvvField` — the one PCI-bearing, action-dispatching leaf. Declares no `fetchStrategy` of
+*   its own; it reads its row through `SavedCardOption`'s plain context, mirroring `CartItemRemove`'s
+*   split from `CartItemRoot` (spec Decision 1).
+*
+* The submission continuation is the PCI-critical core (epic § "The card-data submission channel"):
+* `SavedCardCvvField` (via its internal `SavedCardCvvInput`) registers the `'saved-card'` continuation
+* on T5's submission registry, closing over the re-entered CVV and the account reference, and calls
+* `$actions.payment.sendPayments` itself. T13's `usePlaceOrder` resolves and invokes it; this module
+* never returns the CVV, only `userErrors`.
+*
+* Selecting a row dispatches `usePayment().selectMethod({ methodId, accountId, bin })` — the
+* `bin` is this row's own projected BIN, never `usePayment().draft.bin`. The epic's and the RFC's
+* own text says the saved-card continuation closes over "the account id and BIN", which conflates
+* two different calls: `paymentMethodSelect` (this dispatch) sends the saved card's own BIN alongside
+* `accountId` — a `bin` that does not match the saved card's own BIN is rejected with
+* `MISMATCHED_BIN_FOR_SAVED_CARD`, verified against
+* `apps/storefront-api-core/src/graphql/modules/checkout/index.ts`. The gateway send (inside
+* `SavedCardCvvInput`, below) legitimately carries both, because it is a different wire contract
+* (spec Decision 2 has the full correction).
+*/
+const fragment = `
+  fragment SavedCardsListData on Query {
+    payment {
+      __typename
+      id
+      savedCards {
+        __typename
+        id
+        accountId
+        methodId
+        bin
+      }
+    }
+  }
+`;
+const optionFragment = `
+  fragment SavedCardOptionData on Query {
+    payment {
+      savedCards {
+        __typename
+        id
+        accountId
+        methodId
+        network
+        lastFourDigits
+        bin
+        label
+        expired
+        cvvRequired
+      }
+    }
+  }
+`;
+const SavedCardDataContext = createContext(null);
+function useSavedCardData() {
+	const data = useContext(SavedCardDataContext);
+	if (!data) throw new Error("SavedCardCvvField must be used inside a <SavedCardOption> subtree.");
+	return data;
+}
+const SavedCardsDefinition = defineComponent({
+	name: "SavedCards",
+	importPath: "@vtex/faststore/components",
+	component: SavedCards,
+	fragment,
+	fetchStrategy: "reactive",
+	requiresContext: "payment",
+	providesContext: "saved-card",
+	editor: {
+		label: "Saved Cards",
+		category: "commerce"
+	},
+	schema: { legend: {
+		type: "string",
+		default: "Saved cards",
+		label: "Legend"
+	} },
+	guideline: "Radio list of the shopper's saved cards (network, last four, label); expired cards render present but disabled, never selectable. Place a SavedCardOption inside as the per-card template, itself wrapping a SavedCardCvvField so the shopper can complete payment with a stored card — omitting the CVV field means a shopper can select a card but never pay with it. Picking a row dispatches the payment method selection by methodId and accountId only, never a card number or BIN, plus the inline selection error (role=\"alert\") if the server rejects it. \"Use a new card\" is CardEntry composed as a sibling, not a control inside this list. Renders one container div and no chrome of its own; always carries a loading/empty/ready state hook. Must be inside a PaymentSectionRoot or PaymentSectionController. See saved-cards.md."
+});
+const SavedCardOptionDefinition = defineComponent({
+	name: "SavedCardOption",
+	importPath: "@vtex/faststore/components",
+	component: SavedCardOption,
+	fragment: optionFragment,
+	fetchStrategy: "reactive-list-item",
+	requiresContext: "saved-card",
+	providesContext: "saved-card-data",
+	editor: {
+		label: "Saved Card Option",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "One saved card as a radio row: network, masked last four, and its label when set; disabled when expired. Place a SavedCardCvvField inside so the CVV appears once this row is selected. Must be inside SavedCards."
+});
+const SavedCardCvvFieldDefinition = defineComponent({
+	name: "SavedCardCvvField",
+	importPath: "@vtex/faststore/components",
+	component: SavedCardCvvField,
+	requiresContext: "saved-card-data",
+	actions: { payment: ["sendPayments"] },
+	editor: {
+		label: "Saved Card CVV Field",
+		category: "commerce"
+	},
+	schema: {
+		securityCodeLabel: {
+			type: "string",
+			default: "Security code",
+			label: "Security code label"
+		},
+		securityCodeDescription: {
+			type: "string",
+			default: "The 3-4 digit number on your card",
+			label: "Security code description"
+		}
+	},
+	guideline: "The CVV re-entry field for its saved card row; renders nothing until that row is selected and requires a CVV. Registers the direct-to-gateway submission for the saved-card path on selection — the CVV never transits our backend, only the gateway leg's userErrors return. Must be inside SavedCardOption."
+});
+/** Mirrors `PaymentMethodList`'s own state hook, so an empty or loading region stays swatch-targetable. */
+function savedCardsState({ loading, count }) {
+	if (loading) return "loading";
+	if (count === 0) return "empty";
+	return "ready";
+}
+/**
+* The account a row should treat as "the current selection." `selectedAccountId` is server state that
+* `selectNewCard()` never clears — only `draft.path` flips to `'new-card'` (`use-payment-method-
+* selection.ts`) — so reading `selectedAccountId` alone leaves the previously picked row wedged
+* checked, with its CVV field still mounted and registered, after the shopper picks "use a new card"
+* instead. Every read site in this module goes through this one function — the radio group's own
+* `value`, a row's `-selected` state, and the CVV field's visibility gate — so the three can never
+* drift out of sync with each other. Reads only `draft.path`, never `draft.bin`: that stays a fully
+* separate concern (Decision 2) that no call site in this module touches.
+*/
+function resolveEffectiveSelectedAccountId(selectedAccountId, draftPath) {
+	return draftPath === "new-card" ? null : selectedAccountId;
+}
+function SavedCards({ $data: $dataProp, legend, className, children, ...props }) {
+	const $data = useDataOverride($dataProp);
+	const { selectedAccountId, selectMethod, selectionError, draft, placing, cardPaymentCollapsed } = usePayment();
+	const loading = $data == null;
+	const savedCards = $data?.savedCards ?? [];
+	const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);
+	const handleValueChange = useCallback((accountId) => {
+		const card = savedCards.find((entry) => entry.accountId === accountId);
+		if (!card) return;
+		selectMethod({
+			methodId: card.methodId,
+			accountId: card.accountId,
+			...card.bin ? { bin: card.bin } : {}
+		});
+	}, [savedCards, selectMethod]);
+	if (cardPaymentCollapsed) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		inert: placing,
+		"aria-disabled": placing || void 0,
+		"data-fs-saved-cards": "",
+		"data-fs-saved-cards-state": savedCardsState({
+			loading,
+			count: savedCards.length
+		}),
+		...placing ? { "data-fs-saved-cards-placing": "" } : {},
+		children: [selectionError ? /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			"data-fs-saved-cards-error": "",
+			children: selectionError
+		}) : null, savedCards.length > 0 ? /* @__PURE__ */ jsxs(Fieldset.Root, {
+			"data-fs-saved-cards-fieldset": "",
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, { children: resolveAuthoredCopy(legend, "Saved cards") }), /* @__PURE__ */ jsx(RadioGroup, {
+				value: effectiveSelectedAccountId ?? "",
+				onValueChange: handleValueChange,
+				children: savedCards.map((card) => /* @__PURE__ */ jsx(ListItemRefContext, {
+					value: {
+						__typename: "SavedCard",
+						id: card.id,
+						fallbackData: void 0
+					},
+					children
+				}, card.id))
+			})]
+		}) : null]
+	});
+}
+function SavedCardOption({ $data: $dataProp, className, children, ...props }) {
+	const slice = useDataOverride($dataProp) ?? null;
+	const { selectedAccountId, draft } = usePayment();
+	if (!slice) return null;
+	const isSelected = slice.accountId === resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);
+	return /* @__PURE__ */ jsx(SavedCardDataContext, {
+		value: slice,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className,
+			"data-fs-saved-card-option": "",
+			...isSelected ? { "data-fs-saved-card-option-selected": "" } : {},
+			...slice.expired ? { "data-fs-saved-card-option-expired": "" } : {},
+			children: [/* @__PURE__ */ jsxs(RadioRoot, {
+				value: slice.accountId,
+				disabled: slice.expired,
+				children: [
+					/* @__PURE__ */ jsx(RadioIndicator, { "data-fs-saved-card-option-indicator": "" }),
+					/* @__PURE__ */ jsx("span", {
+						"data-fs-saved-card-option-network": "",
+						children: slice.network
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-fs-saved-card-option-last-four": "",
+						children: `•••• ${slice.lastFourDigits}`
+					}),
+					slice.label ? /* @__PURE__ */ jsx("span", {
+						"data-fs-saved-card-option-label": "",
+						children: slice.label
+					}) : null
+				]
+			}), children]
+		})
+	});
+}
+const MISSING_ACTION_ERROR = {
+	code: PAYMENT_NETWORK_ERROR_CODE,
+	message: "Unable to complete the request. Please try again."
+};
+/**
+* The saved-card path's own client-synthesized refusal (T27, specs/place-order-preflight-card-
+* validation.md FR-11/FR-12; Decision 8). Distinct from `card-entry`'s `INVALID_CARD_DATA` (a
+* different path, a different set of fields, and importing it here would be a matter → matter
+* dependency) and from the gateway's own codes.
+*
+* Never name this constant, or its string value, inside `sdk/payment/use-place-order.ts`: it contains
+* `security` and would fail `CARD_FIELD_PATTERN`. The pre-flight only ever handles the opaque
+* `PaymentUserError` (spec NFR-1, Risk R9).
+*/
+const SAVED_CARD_INVALID_SECURITY_CODE = "INVALID_SECURITY_CODE";
+const INVALID_SECURITY_CODE_ERROR = {
+	code: SAVED_CARD_INVALID_SECURITY_CODE,
+	message: "Enter a valid security code before placing the order."
+};
+/** VTEX's own CVV upper bound across the networks this codebase's masks cover (Decision 4). */
+const CVV_MAX_LENGTH = 4;
+function sanitizeCvv(value) {
+	return value.replace(/\D/g, "").slice(0, CVV_MAX_LENGTH);
+}
+/**
+* Three or four digits (T27, FR-11). `sanitizeCvv` already strips non-digits and caps at
+* `CVV_MAX_LENGTH`, so the only rule left is the floor — and three-or-four is `card-entry`'s own
+* fallback for a method that declares no `cvvRegex` (its `isValidCvv`, `/^\d{3,4}$/`). Requiredness is
+* not checked here: `SavedCardCvvInput` renders only when the row is selected and `cvvRequired` is
+* true, so its presence *is* the requiredness signal.
+*/
+const SAVED_CARD_CVV_PATTERN = /^\d{3,4}$/;
+/**
+* The length at which this field's security code counts as fully typed, and the mask engages (T173,
+* specs/mask-the-cvv-only-once-it.md, FR-3). Three — the floor of `SAVED_CARD_CVV_PATTERN` above,
+* for the same reason that pattern accepts either length: a saved card carries no per-network CVV
+* length. Its slice exposes a display `network` string, not a `cvvMask`, so nothing here tells a
+* 3-digit network apart from Amex's 4 the way `CardEntry` can, and inferring one from the display
+* name would hardcode a network table this package deliberately does not own.
+*
+* Masking at the floor is the side to err on: a complete code is never left legible on either kind
+* of card, and a 4-digit code is simply already masked when its last digit arrives.
+*/
+const SAVED_CARD_CVV_COMPLETE_LENGTH = 3;
+/** Merges a caller-forwarded `aria-describedby` (from `...props`) with the description `<p>`'s own
+* id, rather than clobbering it — the accessibility wiring `Field.Root` would otherwise provide for
+* free (saved-cards.md Decision 3). */
+function mergeDescribedBy(existing, id) {
+	return existing ? `${existing} ${id}` : id;
+}
+/**
+* The stateful, registering half of the CVV field — split out from `SavedCardCvvField` so this row's
+* conditional visibility never skips a hook call (spec Decision 5). This component mounts wholesale
+* when its row is selected and requires a CVV, and unmounts wholesale otherwise, so its own hooks
+* always run the same number of times across its own lifetime; only its *presence* is conditional,
+* decided by its caller.
+*/
+function SavedCardCvvInput({ accountId, bin, securityCodeLabel, securityCodeDescription, $actions, ref: forwardedRef, ...props }) {
+	const [cvv, setCvv] = useState("");
+	const inputRef = useRef(null);
+	const sendPayments = $actions?.payment?.sendPayments;
+	const descriptionId = useId();
+	const setInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof forwardedRef !== "function") {
+			if (forwardedRef) forwardedRef.current = node;
+			return;
+		}
+		const cleanup = forwardedRef(node);
+		if (typeof cleanup === "function") return () => {
+			inputRef.current = null;
+			cleanup();
+		};
+	}, [forwardedRef]);
+	const checkCvv = useCallback(() => {
+		if (SAVED_CARD_CVV_PATTERN.test(cvv)) return [];
+		inputRef.current?.focus();
+		return [INVALID_SECURITY_CODE_ERROR];
+	}, [cvv]);
+	const submit = useCallback(async (transaction) => {
+		const refusals = checkCvv();
+		if (refusals.length > 0) return refusals;
+		if (!sendPayments) return [MISSING_ACTION_ERROR];
+		return sendPayments({
+			transaction,
+			card: {
+				kind: "saved",
+				accountId,
+				bin,
+				securityCode: cvv
+			}
+		});
+	}, [
+		checkCvv,
+		sendPayments,
+		accountId,
+		bin,
+		cvv
+	]);
+	useRegisterPaymentSubmission("saved-card", submit, checkCvv);
+	const ariaDescribedBy = securityCodeDescription ? mergeDescribedBy(props["aria-describedby"], descriptionId) : props["aria-describedby"];
+	const inputStyle = isSecurityCodeComplete(cvv, SAVED_CARD_CVV_COMPLETE_LENGTH) ? {
+		...props.style,
+		...SECURITY_CODE_MASK_STYLE
+	} : props.style;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		...props,
+		ref: setInputRef,
+		type: "text",
+		inputMode: "numeric",
+		autoComplete: "off",
+		"aria-label": securityCodeLabel,
+		"aria-describedby": ariaDescribedBy,
+		value: cvv,
+		onChange: (event) => setCvv(sanitizeCvv(event.target.value)),
+		"data-fs-saved-card-cvv-field": "",
+		style: inputStyle
+	}), securityCodeDescription ? /* @__PURE__ */ jsx("p", {
+		id: descriptionId,
+		"data-fs-saved-card-cvv-description": "",
+		children: securityCodeDescription
+	}) : null] });
+}
+function SavedCardCvvField({ $actions: $actionsProp, securityCodeLabel = "Security code", securityCodeDescription = "The 3-4 digit number on your card", className, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const { accountId, bin, cvvRequired } = useSavedCardData();
+	const { selectedAccountId, draft } = usePayment();
+	if (accountId !== resolveEffectiveSelectedAccountId(selectedAccountId, draft.path) || !cvvRequired) return null;
+	return /* @__PURE__ */ jsx(SavedCardCvvInput, {
+		...props,
+		className,
+		accountId,
+		bin,
+		securityCodeLabel,
+		securityCodeDescription,
+		$actions
+	});
+}
+//#endregion
+export { SAVED_CARD_INVALID_SECURITY_CODE, SavedCardCvvField, SavedCardCvvFieldDefinition, SavedCardOption, SavedCardOptionDefinition, SavedCards, SavedCardsDefinition };
+
+//# sourceMappingURL=saved-cards.js.map

package/dist/matter/saved-cards/saved-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-cards.js","names":[],"sources":["../../../src/matter/saved-cards/saved-cards.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useId,\n  useRef,\n  useState,\n} 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 { ListItemRefContext } from '../../sdk/data/list-item-ref-context.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { isSecurityCodeComplete, SECURITY_CODE_MASK_STYLE } from '../../sdk/payment/security-code-mask.js';\nimport {\n  type PaymentPreflightCheck,\n  type PaymentSubmission,\n  useRegisterPaymentSubmission,\n} from '../../sdk/payment/submission-registry.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { usePayment } from '../payment/payment.js';\n\n/**\n * Pick a saved card and enter only the CVV (specs/saved-cards.md, T12 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D7). Three components, split by data-fetch role rather than by\n * visual grouping (ADR-0012 Option B, per `SavedCard`'s own schema doc comment):\n *\n * - `SavedCards` — the list root. Owns the minimal `{ id, accountId, methodId }` selection needed to\n *   iterate and to dispatch selection; publishes each row's entity ref via `ListItemRefContext`,\n *   mirroring `CartList`.\n * - `SavedCardOption` — the per-row template. Independently subscribes to its own `SavedCard:<id>`\n *   cache entity through the shipped `reactive-list-item` runtime, mirroring `CartItemRoot`.\n * - `SavedCardCvvField` — the one PCI-bearing, action-dispatching leaf. Declares no `fetchStrategy` of\n *   its own; it reads its row through `SavedCardOption`'s plain context, mirroring `CartItemRemove`'s\n *   split from `CartItemRoot` (spec Decision 1).\n *\n * The submission continuation is the PCI-critical core (epic § \"The card-data submission channel\"):\n * `SavedCardCvvField` (via its internal `SavedCardCvvInput`) registers the `'saved-card'` continuation\n * on T5's submission registry, closing over the re-entered CVV and the account reference, and calls\n * `$actions.payment.sendPayments` itself. T13's `usePlaceOrder` resolves and invokes it; this module\n * never returns the CVV, only `userErrors`.\n *\n * Selecting a row dispatches `usePayment().selectMethod({ methodId, accountId, bin })` — the\n * `bin` is this row's own projected BIN, never `usePayment().draft.bin`. The epic's and the RFC's\n * own text says the saved-card continuation closes over \"the account id and BIN\", which conflates\n * two different calls: `paymentMethodSelect` (this dispatch) sends the saved card's own BIN alongside\n * `accountId` — a `bin` that does not match the saved card's own BIN is rejected with\n * `MISMATCHED_BIN_FOR_SAVED_CARD`, verified against\n * `apps/storefront-api-core/src/graphql/modules/checkout/index.ts`. The gateway send (inside\n * `SavedCardCvvInput`, below) legitimately carries both, because it is a different wire contract\n * (spec Decision 2 has the full correction).\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragments — raw template literals, matching the `payment.tsx` sibling: the codegen\n// `documents` glob does not scan `src/matter/saved-cards*`. Both fragments drill the identical\n// `payment.savedCards` path and merge at compile time (ADR-0011/ADR-0012); `data-component-contract.\n// test.ts` validates each against the real schema.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SavedCardsListData on Query {\n    payment {\n      __typename\n      id\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        bin\n      }\n    }\n  }\n`;\n\nconst optionFragment = /* GraphQL */ `\n  fragment SavedCardOptionData on Query {\n    payment {\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        network\n        lastFourDigits\n        bin\n        label\n        expired\n        cvvRequired\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The minimal per-row identifiers `SavedCards` needs to iterate and to dispatch selection. */\nexport type SavedCardsListEntry = Readonly<{\n  id: string;\n  accountId: string;\n  methodId: string;\n  bin: string;\n}>;\n\nexport type SavedCardsData = {\n  savedCards?: readonly SavedCardsListEntry[];\n} | null;\n\nexport type SavedCardsProps = ComponentPropsWithRef<'div'> & {\n  /** Unwrapped `payment` value from the reactive runtime (arity-1 fragment, ADR-0015); `null` until resolved. */\n  $data?: SavedCardsData;\n  /** The per-row template, typically one `SavedCardOption`, repeated once per saved card. */\n  children?: ReactNode;\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\n/** The full per-row slice `SavedCardOption` independently resolves via `reactive-list-item`. */\nexport type SavedCardOptionSlice = Readonly<{\n  accountId: string;\n  methodId: string;\n  network: string;\n  lastFourDigits: string;\n  bin: string;\n  label: string | null;\n  expired: boolean;\n  cvvRequired: boolean;\n}>;\n\nexport type SavedCardOptionProps = ComponentPropsWithRef<'div'> & {\n  /** Per-row slice from the reactive-list-item runtime; injected/overridden by the wrapper, or passed directly in tests. */\n  $data?: SavedCardOptionSlice | null;\n  /** Typically a `SavedCardCvvField`. */\n  children?: ReactNode;\n};\n\nexport type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & {\n  /** Compiler-injected action surface; carries `payment.sendPayments`. */\n  $actions?: ComponentActions;\n  /**\n   * Accessible name for the CVV input. No visible `<label>` renders (Accessibility Contract), so this\n   * is the input's only accessible name — authorable rather than a hardcoded English string.\n   */\n  securityCodeLabel?: string;\n  /**\n   * Helper copy rendered as a sibling `<p>` and linked to the input via `aria-describedby` (this\n   * component's root is the input itself, so there is no `Field.Root` to host a `Field.Description` —\n   * saved-cards.md Decision 3). An empty string renders nothing. Copy configuration only — never the\n   * security code itself.\n   */\n  securityCodeDescription?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Saved-card-data context — provided by SavedCardOption, read only by SavedCardCvvField. A plain\n// React context, not a data-fetch strategy: SavedCardCvvField has no fragment of its own (Decision 1).\n// ---------------------------------------------------------------------------\n\nconst SavedCardDataContext = createContext<SavedCardOptionSlice | null>(null);\n\nfunction useSavedCardData(): SavedCardOptionSlice {\n  const data = useContext(SavedCardDataContext);\n  if (!data) {\n    throw new Error('SavedCardCvvField must be used inside a <SavedCardOption> subtree.');\n  }\n  return data;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const SavedCardsDefinition = defineComponent<SavedCardsProps>({\n  name: 'SavedCards',\n  importPath: '@vtex/faststore/components',\n  component: SavedCards,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  providesContext: 'saved-card',\n  editor: { label: 'Saved Cards', category: 'commerce' },\n  schema: {\n    // T38: an inline literal, never an identifier — the native catalog builder extracts `schema`\n    // statically and silently drops an identifier-valued default (INV-8).\n    legend: { type: 'string', default: 'Saved cards', label: 'Legend' },\n  },\n  guideline:\n    'Radio list of the shopper\\'s saved cards (network, last four, label); expired cards render present but disabled, never selectable. Place a SavedCardOption inside as the per-card template, itself wrapping a SavedCardCvvField so the shopper can complete payment with a stored card — omitting the CVV field means a shopper can select a card but never pay with it. Picking a row dispatches the payment method selection by methodId and accountId only, never a card number or BIN, plus the inline selection error (role=\"alert\") if the server rejects it. \"Use a new card\" is CardEntry composed as a sibling, not a control inside this list. Renders one container div and no chrome of its own; always carries a loading/empty/ready state hook. Must be inside a PaymentSectionRoot or PaymentSectionController. See saved-cards.md.',\n});\n\nexport const SavedCardOptionDefinition = defineComponent<SavedCardOptionProps>({\n  name: 'SavedCardOption',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardOption,\n  fragment: optionFragment,\n  fetchStrategy: 'reactive-list-item',\n  requiresContext: 'saved-card',\n  providesContext: 'saved-card-data',\n  editor: { label: 'Saved Card Option', category: 'commerce' },\n  schema: {},\n  guideline:\n    'One saved card as a radio row: network, masked last four, and its label when set; disabled when expired. Place a SavedCardCvvField inside so the CVV appears once this row is selected. Must be inside SavedCards.',\n});\n\nexport const SavedCardCvvFieldDefinition = defineComponent<SavedCardCvvFieldProps>({\n  name: 'SavedCardCvvField',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardCvvField,\n  requiresContext: 'saved-card-data',\n  actions: { payment: ['sendPayments'] },\n  editor: { label: 'Saved Card CVV Field', category: 'commerce' },\n  schema: {\n    securityCodeLabel: { type: 'string', default: 'Security code', label: 'Security code label' },\n    // en-US, per requirement 12.27's own quoted copy (spec mask-the-security-code-field-and.md,\n    // OQ-1 Option B) — matches this component's existing en-US securityCodeLabel default.\n    securityCodeDescription: {\n      type: 'string',\n      default: 'The 3-4 digit number on your card',\n      label: 'Security code description',\n    },\n  },\n  guideline:\n    \"The CVV re-entry field for its saved card row; renders nothing until that row is selected and requires a CVV. Registers the direct-to-gateway submission for the saved-card path on selection — the CVV never transits our backend, only the gateway leg's userErrors return. Must be inside SavedCardOption.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** Mirrors `PaymentMethodList`'s own state hook, so an empty or loading region stays swatch-targetable. */\nfunction savedCardsState({ 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 account a row should treat as \"the current selection.\" `selectedAccountId` is server state that\n * `selectNewCard()` never clears — only `draft.path` flips to `'new-card'` (`use-payment-method-\n * selection.ts`) — so reading `selectedAccountId` alone leaves the previously picked row wedged\n * checked, with its CVV field still mounted and registered, after the shopper picks \"use a new card\"\n * instead. Every read site in this module goes through this one function — the radio group's own\n * `value`, a row's `-selected` state, and the CVV field's visibility gate — so the three can never\n * drift out of sync with each other. Reads only `draft.path`, never `draft.bin`: that stays a fully\n * separate concern (Decision 2) that no call site in this module touches.\n */\nfunction resolveEffectiveSelectedAccountId(selectedAccountId: string | null, draftPath: string | null): string | null {\n  return draftPath === 'new-card' ? null : selectedAccountId;\n}\n\nexport function SavedCards({ $data: $dataProp, legend, className, children, ...props }: SavedCardsProps) {\n  const $data = useDataOverride($dataProp);\n  // `draft` here only for `.path`, to resolve the effective selection below — never `.bin`. The\n  // dispatch in handleValueChange still never reads `draft` at all; see its own comment.\n  const { selectedAccountId, selectMethod, selectionError, draft, placing, cardPaymentCollapsed } = usePayment();\n  const loading = $data == null;\n  const savedCards = $data?.savedCards ?? [];\n  const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  const handleValueChange = useCallback(\n    (accountId: string) => {\n      const card = savedCards.find((entry) => entry.accountId === accountId);\n      if (!card) return;\n      // methodId, accountId, and this row's own bin — from this list's own read model, never\n      // usePayment().draft.bin. draft.bin can be non-null on the saved-card path too (e.g.\n      // Installments calling setDraftBin for its own BIN-keyed lookup; use-payment-method-selection.ts\n      // does not clear it on this transition), but the bin sent here must be the saved card's own\n      // so paymentMethodSelect can persist a BIN-precise selection. A bin that does not match the\n      // saved card's own BIN is rejected with MISMATCHED_BIN_FOR_SAVED_CARD (spec Decision 2). The\n      // gateway send (SavedCardCvvInput, below) is the different call that legitimately carries both\n      // bin and accountId, reading bin from this row's own resolved slice, never the draft.\n      selectMethod({\n        methodId: card.methodId,\n        accountId: card.accountId,\n        ...(card.bin ? { bin: card.bin } : {}),\n      });\n    },\n    [savedCards, selectMethod],\n  );\n\n  // T191 (FR-7, Decision 3): nothing renders while the card payment is collapsed — the card option brings\n  // the list back. Returned after the last hook, so this instance stays mounted.\n  if (cardPaymentCollapsed) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-saved-cards=\"\"\n      data-fs-saved-cards-state={savedCardsState({ loading, count: savedCards.length })}\n      {...(placing ? { 'data-fs-saved-cards-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-saved-cards-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {savedCards.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-saved-cards-fieldset=\"\">\n          <Fieldset.Legend>{resolveAuthoredCopy(legend, 'Saved cards')}</Fieldset.Legend>\n          <RadioGroup value={effectiveSelectedAccountId ?? ''} onValueChange={handleValueChange}>\n            {savedCards.map((card) => (\n              <ListItemRefContext\n                key={card.id}\n                // No fallback slice: this list's own fragment selects only { id, accountId, methodId }\n                // (Decision 3), so it has no complete row to fall back to. An incomplete cache slice\n                // should render nothing until it resolves, not a partial, silently-wrong row.\n                value={{ __typename: 'SavedCard', id: card.id, fallbackData: undefined }}\n              >\n                {children}\n              </ListItemRefContext>\n            ))}\n          </RadioGroup>\n        </Fieldset.Root>\n      ) : null}\n    </div>\n  );\n}\n\nexport function SavedCardOption({ $data: $dataProp, className, children, ...props }: SavedCardOptionProps) {\n  // Delivery-agnostic: the slice arrives through the DataOverrideContext seam the reactive-list-item\n  // wrapper publishes (or via $data in tests); this component calls no data hook of its own.\n  const slice = useDataOverride<SavedCardOptionSlice | null | undefined>($dataProp) ?? null;\n  const { selectedAccountId, draft } = usePayment();\n\n  if (!slice) return null;\n\n  // Path-aware, not just account-aware — see resolveEffectiveSelectedAccountId's own comment: without\n  // this, a row that was picked before \"use a new card\" stays marked selected forever.\n  const isSelected = slice.accountId === resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  return (\n    <SavedCardDataContext value={slice}>\n      <div\n        {...props}\n        className={className}\n        data-fs-saved-card-option=\"\"\n        {...(isSelected ? { 'data-fs-saved-card-option-selected': '' } : {})}\n        {...(slice.expired ? { 'data-fs-saved-card-option-expired': '' } : {})}\n      >\n        <RadioRoot value={slice.accountId} disabled={slice.expired}>\n          <RadioIndicator data-fs-saved-card-option-indicator=\"\" />\n          <span data-fs-saved-card-option-network=\"\">{slice.network}</span>\n          <span data-fs-saved-card-option-last-four=\"\">{`•••• ${slice.lastFourDigits}`}</span>\n          {slice.label ? <span data-fs-saved-card-option-label=\"\">{slice.label}</span> : null}\n        </RadioRoot>\n        {children}\n      </div>\n    </SavedCardDataContext>\n  );\n}\n\nconst MISSING_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\n/**\n * The saved-card path's own client-synthesized refusal (T27, specs/place-order-preflight-card-\n * validation.md FR-11/FR-12; Decision 8). Distinct from `card-entry`'s `INVALID_CARD_DATA` (a\n * different path, a different set of fields, and importing it here would be a matter → matter\n * dependency) and from the gateway's own codes.\n *\n * Never name this constant, or its string value, inside `sdk/payment/use-place-order.ts`: it contains\n * `security` and would fail `CARD_FIELD_PATTERN`. The pre-flight only ever handles the opaque\n * `PaymentUserError` (spec NFR-1, Risk R9).\n */\nexport const SAVED_CARD_INVALID_SECURITY_CODE = 'INVALID_SECURITY_CODE';\n\nconst INVALID_SECURITY_CODE_ERROR: PaymentUserError = {\n  code: SAVED_CARD_INVALID_SECURITY_CODE,\n  message: 'Enter a valid security code before placing the order.',\n};\n\n/** VTEX's own CVV upper bound across the networks this codebase's masks cover (Decision 4). */\nconst CVV_MAX_LENGTH = 4;\n\nfunction sanitizeCvv(value: string): string {\n  return value.replace(/\\D/g, '').slice(0, CVV_MAX_LENGTH);\n}\n\n/**\n * Three or four digits (T27, FR-11). `sanitizeCvv` already strips non-digits and caps at\n * `CVV_MAX_LENGTH`, so the only rule left is the floor — and three-or-four is `card-entry`'s own\n * fallback for a method that declares no `cvvRegex` (its `isValidCvv`, `/^\\d{3,4}$/`). Requiredness is\n * not checked here: `SavedCardCvvInput` renders only when the row is selected and `cvvRequired` is\n * true, so its presence *is* the requiredness signal.\n */\nconst SAVED_CARD_CVV_PATTERN = /^\\d{3,4}$/;\n\n/**\n * The length at which this field's security code counts as fully typed, and the mask engages (T173,\n * specs/mask-the-cvv-only-once-it.md, FR-3). Three — the floor of `SAVED_CARD_CVV_PATTERN` above,\n * for the same reason that pattern accepts either length: a saved card carries no per-network CVV\n * length. Its slice exposes a display `network` string, not a `cvvMask`, so nothing here tells a\n * 3-digit network apart from Amex's 4 the way `CardEntry` can, and inferring one from the display\n * name would hardcode a network table this package deliberately does not own.\n *\n * Masking at the floor is the side to err on: a complete code is never left legible on either kind\n * of card, and a 4-digit code is simply already masked when its last digit arrives.\n */\nconst SAVED_CARD_CVV_COMPLETE_LENGTH = 3;\n\ntype SavedCardCvvInputProps = ComponentPropsWithRef<'input'> & {\n  /** `SavedCard.accountId` from this row's own resolved slice — never `usePayment().draft`. */\n  accountId: string;\n  /**\n   * `SavedCard.bin` from this row's own resolved slice — the one this row is actually being paid\n   * with. Deliberately **not** `usePayment().draft.bin`: that field can be populated on the\n   * saved-card path too (e.g. Installments calling `setDraftBin` for its own BIN-keyed lookup;\n   * `use-payment-method-selection.ts` does not clear it on this transition), so it can carry a\n   * different card's BIN, or a stale one, at the moment this continuation runs. Forwarding it here\n   * instead of the row's own field would be the same class of bug Decision 2 already closed for the\n   * `selectMethod` dispatch — undetectable by type-checking, since both are plain `string`.\n   */\n  bin: string;\n  /** Accessible name applied verbatim as `aria-label` — see `SavedCardCvvFieldProps`'s own doc comment. */\n  securityCodeLabel: string;\n  /** Helper copy rendered as a sibling `<p>` — see `SavedCardCvvFieldProps`'s own doc comment. Threaded\n   * through exactly like `securityCodeLabel`. An empty string renders nothing. */\n  securityCodeDescription: string;\n  $actions?: ComponentActions;\n};\n\n/** Merges a caller-forwarded `aria-describedby` (from `...props`) with the description `<p>`'s own\n * id, rather than clobbering it — the accessibility wiring `Field.Root` would otherwise provide for\n * free (saved-cards.md Decision 3). */\nfunction mergeDescribedBy(existing: string | undefined, id: string): string {\n  return existing ? `${existing} ${id}` : id;\n}\n\n/**\n * The stateful, registering half of the CVV field — split out from `SavedCardCvvField` so this row's\n * conditional visibility never skips a hook call (spec Decision 5). This component mounts wholesale\n * when its row is selected and requires a CVV, and unmounts wholesale otherwise, so its own hooks\n * always run the same number of times across its own lifetime; only its *presence* is conditional,\n * decided by its caller.\n */\nfunction SavedCardCvvInput({\n  accountId,\n  bin,\n  securityCodeLabel,\n  securityCodeDescription,\n  $actions,\n  ref: forwardedRef,\n  ...props\n}: SavedCardCvvInputProps) {\n  const [cvv, setCvv] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const sendPayments = $actions?.payment?.sendPayments;\n  const descriptionId = useId();\n\n  // Attaches both this component's own ref (needed to focus the field on refusal, in checkCvv below)\n  // and whatever ref a caller already forwarded onto SavedCardCvvField/SavedCardCvvInput — `props`\n  // spreads onto the element below and `SavedCardCvvInputProps` is `ComponentPropsWithRef<'input'>`, so\n  // writing `ref={inputRef}` after the spread would silently drop a caller-forwarded ref instead.\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n\n      if (typeof forwardedRef !== 'function') {\n        if (forwardedRef) forwardedRef.current = node;\n        return;\n      }\n\n      // React 19: a ref callback may itself return a cleanup function instead of being re-invoked\n      // with `null` on detach. Preserve whichever form the caller used — never call a React-19\n      // cleanup-style ref with `null`, a value that form is documented never to receive (fix pass,\n      // review F2). A caller using the legacy form (no returned cleanup) keeps today's behaviour:\n      // this callback returns nothing either, so React re-invokes it with `null` on detach, which\n      // falls into this same branch and calls `forwardedRef(null)`, exactly as before.\n      const cleanup = forwardedRef(node);\n      if (typeof cleanup === 'function') {\n        return () => {\n          inputRef.current = null;\n          cleanup();\n        };\n      }\n      return;\n    },\n    [forwardedRef],\n  );\n\n  // The saved-card check (T27, FR-11/FR-12; Decision 8). Three-or-four digits — see\n  // SAVED_CARD_CVV_PATTERN's own doc comment for why nothing narrower is checkable and nothing wider\n  // is safe. The only field on this path, so there is no ordering rule and no inline error node to\n  // fill (FR-12) — the message reaches the shopper through PlaceOrder's existing role=\"alert\".\n  const checkCvv = useCallback<PaymentPreflightCheck>(() => {\n    if (SAVED_CARD_CVV_PATTERN.test(cvv)) return [];\n    inputRef.current?.focus();\n    return [INVALID_SECURITY_CODE_ERROR];\n  }, [cvv]);\n\n  const submit = useCallback<PaymentSubmission>(\n    async (transaction) => {\n      // Same function the pre-flight calls (FR-3, applied to this path) — the two moments cannot\n      // diverge here either.\n      const refusals = checkCvv();\n      if (refusals.length > 0) return refusals;\n      if (!sendPayments) return [MISSING_ACTION_ERROR];\n      // `bin` here is always the `accountId`/`bin` pair from this row's own props — see their doc\n      // comments above for why `usePayment().draft.bin` must never substitute for either.\n      return sendPayments({ transaction, card: { kind: 'saved', accountId, bin, securityCode: cvv } });\n    },\n    [checkCvv, sendPayments, accountId, bin, cvv],\n  );\n\n  useRegisterPaymentSubmission('saved-card', submit, checkCvv);\n\n  // Merges with a caller-forwarded aria-describedby rather than clobbering it — mirrors the ref\n  // merge above (setInputRef) for the same \"don't drop what a caller already passed\" reason.\n  const ariaDescribedBy = securityCodeDescription\n    ? mergeDescribedBy(props['aria-describedby'], descriptionId)\n    : props['aria-describedby'];\n\n  // T101 — the mask merges *over* a caller-forwarded style, inverted from this repo's usual\n  // `...props.style`-last idiom (cart-item.tsx, product-list.tsx): deliberately, so a caller can\n  // never remove the security-code mask. See security-code-mask.ts.\n  //\n  // T173 — that merge now happens from the keystroke that completes the code, not from the first\n  // one, so a shopper can read back what they typed while they type it. Below the trigger the\n  // caller's own style passes through untouched, which is the same thing it did before this field\n  // ever had a mask; the guarantee above is about what a caller cannot do once the code is complete.\n  const inputStyle = isSecurityCodeComplete(cvv, SAVED_CARD_CVV_COMPLETE_LENGTH)\n    ? { ...props.style, ...SECURITY_CODE_MASK_STYLE }\n    : props.style;\n\n  return (\n    <>\n      <input\n        {...props}\n        ref={setInputRef}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        aria-label={securityCodeLabel}\n        aria-describedby={ariaDescribedBy}\n        value={cvv}\n        onChange={(event) => setCvv(sanitizeCvv(event.target.value))}\n        data-fs-saved-card-cvv-field=\"\"\n        style={inputStyle}\n      />\n      {securityCodeDescription ? (\n        <p id={descriptionId} data-fs-saved-card-cvv-description=\"\">\n          {securityCodeDescription}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\nexport function SavedCardCvvField({\n  $actions: $actionsProp,\n  securityCodeLabel = 'Security code',\n  securityCodeDescription = 'The 3-4 digit number on your card',\n  className,\n  ...props\n}: SavedCardCvvFieldProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { accountId, bin, cvvRequired } = useSavedCardData();\n  const { selectedAccountId, draft } = usePayment();\n\n  // Path-aware, matching SavedCardOption's own isSelected — otherwise this field stays mounted and\n  // registered after \"use a new card\", with selectedAccountId still equal to this row's own accountId.\n  if (accountId !== resolveEffectiveSelectedAccountId(selectedAccountId, draft.path) || !cvvRequired) {\n    return null;\n  }\n\n  return (\n    <SavedCardCvvInput\n      {...props}\n      className={className}\n      accountId={accountId}\n      bin={bin}\n      securityCodeLabel={securityCodeLabel}\n      securityCodeDescription={securityCodeDescription}\n      $actions={$actions}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/matter/shipping-address/country-descriptors.js

@@ -11,7 +11,8 @@ const countryDescriptors = {
 		fields: [
 			{
 				name: "recipientName",
-				label: "nome do destinatário"
+				label: "nome do destinatário",
+				required: true
 			},
 			{
 				name: "street",
@@ -39,41 +40,50 @@ const countryDescriptors = {
 			},
 			{
 				name: "postalCode",
-				label: "cep"
+				label: "cep",
+				rule: { pattern: {
+					value: /^\d{5}-?\d{3}$/,
+					message: "cep inválido"
+				} }
 			}
 		]
 	},
 	USA: {
 		iso: "USA",
-		label: "Estados Unidos",
+		label: "United States",
 		fields: [
 			{
 				name: "recipientName",
-				label: "nome do destinatário"
+				label: "recipient name",
+				required: true
 			},
 			{
 				name: "street",
-				label: "rua"
+				label: "street"
 			},
 			{
 				name: "number",
-				label: "número"
+				label: "number"
 			},
 			{
 				name: "complement",
-				label: "complemento (opcional)"
+				label: "apartment, suite, etc. (optional)"
 			},
 			{
 				name: "city",
-				label: "cidade"
+				label: "city"
 			},
 			{
 				name: "state",
-				label: "estado"
+				label: "state"
 			},
 			{
 				name: "postalCode",
-				label: "código postal"
+				label: "zip code",
+				rule: { pattern: {
+					value: /^\d{5}(-?\d{4})?$/,
+					message: "invalid zip code"
+				} }
 			}
 		]
 	}