@vtex/faststore 0.0.8 → 0.0.11

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

@@ -1,9 +1,12 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { Checkbox } from "../../particles/checkbox/checkbox.js";
 import { Field } from "../../particles/field/field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { useSession } from "../session/session.js";
 import { Icon } from "../../particles/icon/icon.js";
@@ -39,10 +42,58 @@ const fragment = `
     }
   }
 `;
+const SaveCardContent = defineContentType({
+	id: "save-card",
+	title: "Save Card",
+	description: "Copy for the save-card toggle, its consent notice, the nickname field and a refused consent write.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Toggle label",
+				format: "icu-message",
+				messageSource: "Save this card for next time"
+			},
+			nicknameLabel: {
+				type: "string",
+				title: "Nickname field label",
+				description: "Rendered only while the toggle is checked.",
+				format: "icu-message",
+				messageSource: "Card nickname"
+			},
+			consentNoticeLabel: {
+				type: "string",
+				title: "Consent notice",
+				description: "Shown beside the toggle until the shopper has granted the save-personal-data consent.",
+				format: "icu-message",
+				messageSource: "Checking this also lets us store your personal data for future purchases."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Consent write failure message",
+				description: "Shown when the consent write fails: a network failure or a fault the shopper cannot fix.",
+				format: "icu-message",
+				messageSource: "Unable to save your card preference. Please try again."
+			}
+		}
+	}
+});
 /** Legacy's own cap (`CardLabelInputForm.tsx:15`, `fastcheckout@cd09bec3`), carried here as a plain
 * HTML `maxLength` rather than a schema prop — schema entries are authorable copy, not behavior. */
 const NICKNAME_MAX_LENGTH = 50;
 /**
+* The message for each code the consent write can return. None is one the shopper can act on, so all share
+* one message, as does a code this map does not know.
+*/
+const SAVE_CARD_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NO_PREFERENCE_PROVIDED: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
+/**
 * Whether the control should render at all. Requires BOTH `!loading` and `state === 'loggedIn'` —
 * `useSession()` forces `state: 'anonymous'` while loading (the least-privileged default), so this
 * reads correctly today even on `state` alone, but checking `loading` explicitly makes that
@@ -71,41 +122,28 @@ const SaveCardDefinition = defineComponent({
 	fetchStrategy: "reactive",
 	requiresContext: ["payment", "session"],
 	actions: { payment: ["saveCard"] },
+	content: SaveCardContent,
 	editor: {
 		label: "Save Card",
 		category: "commerce"
 	},
 	schema: {
-		label: {
-			type: "string",
-			default: "Save this card for next time",
-			label: "Toggle label"
-		},
-		nicknameLabel: {
-			type: "string",
-			default: "Card nickname",
-			label: "Nickname field label"
-		},
 		nicknamePlaceholder: {
 			type: "string",
 			label: "Nickname field placeholder"
 		},
-		consentNoticeLabel: {
-			type: "string",
-			default: "Checking this also lets us store your personal data for future purchases.",
-			label: "Consent notice label"
-		},
 		disabled: {
 			type: "boolean",
 			default: false,
 			label: "Disabled"
 		}
 	},
-	guideline: "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."
+	guideline: "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. Its copy comes from the $content fields label, nicknameLabel and consentNoticeLabel; a refused consent write shows genericErrorMessage. 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."
 });
-function SaveCard({ label = "Save this card for next time", nicknameLabel = "Card nickname", nicknamePlaceholder, consentNoticeLabel = "Checking this also lets us store your personal data for future purchases.", disabled = false, className, $data: $dataProp, $actions: $actionsProp, ...props }) {
+function SaveCard({ nicknamePlaceholder, disabled = false, className, $content, $locale, $data: $dataProp, $actions: $actionsProp, ...props }) {
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
+	const { format } = useMessageFormatter(SaveCardContent, $content);
 	const { state, loading } = useSession();
 	const { draft, setDraftSaveCard, setDraftCardLabel, placing, cardPaymentCollapsed } = usePayment();
 	const [pending, setPending] = useState(false);
@@ -125,7 +163,7 @@ function SaveCard({ label = "Save this card for next time", nicknameLabel = "Car
 		setPending(true);
 		try {
 			const [firstError] = await saveCard(true);
-			if (firstError) setConsentError(firstError.message);
+			if (firstError) setConsentError(firstError);
 		} finally {
 			setPending(false);
 		}
@@ -153,10 +191,10 @@ function SaveCard({ label = "Save this card for next time", nicknameLabel = "Car
 						onCheckedChange: handleCheckedChange,
 						disabled: fieldDisabled,
 						children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Icon, { name: "checked" }) })
-					}), label] })
+					}), format("label")] })
 				}), isConsentNoticeVisible($data?.savePersonalData) ? /* @__PURE__ */ jsx("p", {
 					"data-fs-save-card-consent-notice": "",
-					children: consentNoticeLabel
+					children: format("consentNoticeLabel")
 				}) : null]
 			}),
 			checked ? /* @__PURE__ */ jsx("div", {
@@ -164,7 +202,7 @@ function SaveCard({ label = "Save this card for next time", nicknameLabel = "Car
 				children: /* @__PURE__ */ jsxs(Field.Root, {
 					disabled: fieldDisabled,
 					"data-fs-field-root": "",
-					children: [/* @__PURE__ */ jsx(Field.Label, { children: nicknameLabel }), /* @__PURE__ */ jsx(Field.Control, {
+					children: [/* @__PURE__ */ jsx(Field.Label, { children: format("nicknameLabel") }), /* @__PURE__ */ jsx(Field.Control, {
 						name: "cardLabel",
 						placeholder: nicknamePlaceholder,
 						value: draft.cardLabel ?? "",
@@ -177,12 +215,12 @@ function SaveCard({ label = "Save this card for next time", nicknameLabel = "Car
 			consentError ? /* @__PURE__ */ jsx("div", {
 				role: "alert",
 				"data-fs-save-card-error": "",
-				children: consentError
+				children: formatErrorCode(SaveCardContent, SAVE_CARD_ERROR_FIELDS, consentError, format, "genericErrorMessage")
 			}) : null
 		]
 	});
 }
 //#endregion
-export { SaveCard, SaveCardDefinition, isConsentNoticeVisible, isSaveCardVisible };
+export { SAVE_CARD_ERROR_FIELDS, SaveCard, SaveCardContent, SaveCardDefinition, isConsentNoticeVisible, isSaveCardVisible };
 
 //# sourceMappingURL=save-card.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"save-card.js","names":[],"sources":["../../../src/matter/save-card/save-card.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} 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 { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport type { PaymentUserError } from '../../sdk/payment/operations.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 const SaveCardContent = defineContentType({\n  id: 'save-card',\n  title: 'Save Card',\n  description: 'Copy for the save-card toggle, its consent notice, the nickname field and a refused consent write.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: {\n        type: 'string',\n        title: 'Toggle label',\n        format: 'icu-message',\n        messageSource: 'Save this card for next time',\n      },\n      nicknameLabel: {\n        type: 'string',\n        title: 'Nickname field label',\n        description: 'Rendered only while the toggle is checked.',\n        format: 'icu-message',\n        messageSource: 'Card nickname',\n      },\n      consentNoticeLabel: {\n        type: 'string',\n        title: 'Consent notice',\n        description: 'Shown beside the toggle until the shopper has granted the save-personal-data consent.',\n        format: 'icu-message',\n        messageSource: 'Checking this also lets us store your personal data for future purchases.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Consent write failure message',\n        description: 'Shown when the consent write fails: a network failure or a fault the shopper cannot fix.',\n        format: 'icu-message',\n        messageSource: 'Unable to save your card preference. Please try again.',\n      },\n    },\n  },\n});\n\nexport type SaveCardProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &\n  MessageLocaleProp & {\n    nicknamePlaceholder?: string;\n    /** Disables both the toggle and the nickname field. */\n    disabled?: boolean;\n    /** Merchant-authored copy: the toggle label, the nickname field label, the consent notice and the write error. */\n    $content?: ContentValue<typeof SaveCardContent>;\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/** The `ClientPreferencesUpdateErrorCode` values plus the client-minted transport failure. */\ntype SaveCardErrorCode = 'MISSING_CART_CONTEXT' | 'CART_NOT_FOUND' | 'NO_PREFERENCE_PROVIDED' | 'NETWORK_ERROR';\n\n/**\n * The message for each code the consent write can return. None is one the shopper can act on, so all share\n * one message, as does a code this map does not know.\n */\nexport const SAVE_CARD_ERROR_FIELDS = {\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NO_PREFERENCE_PROVIDED: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<SaveCardErrorCode, MessageFieldName<typeof SaveCardContent>>;\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  content: SaveCardContent,\n  editor: { label: 'Save Card', category: 'commerce' },\n  schema: {\n    nicknamePlaceholder: { type: 'string', label: 'Nickname field placeholder' },\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. Its copy comes from the $content fields label, nicknameLabel and consentNoticeLabel; a refused consent write shows genericErrorMessage. 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  nicknamePlaceholder,\n  disabled = false,\n  className,\n  $content,\n  $locale,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  ...props\n}: SaveCardProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const { format } = useMessageFormatter(SaveCardContent, $content);\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<PaymentUserError | 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);\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            {format('label')}\n          </Field.Label>\n        </Field.Root>\n        {isConsentNoticeVisible($data?.savePersonalData) ? (\n          <p data-fs-save-card-consent-notice=\"\">{format('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>{format('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          {formatErrorCode(SaveCardContent, SAVE_CARD_ERROR_FIELDS, consentError, format, 'genericErrorMessage')}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,29 +1,111 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 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. */
+/**
+ * The minimal per-row facts `SavedCards` needs to iterate, to dispatch selection, and to tell whether the
+ * persisted selection is an expired card (which is never the radio group's value).
+ */
 export type SavedCardsListEntry = Readonly<{
   id: string;
   accountId: string;
   methodId: string;
   bin: string;
+  expired: boolean;
 }>;
 export type SavedCardsData = {
   savedCards?: readonly SavedCardsListEntry[];
 } | null;
-export type SavedCardsProps = ComponentPropsWithRef<'div'> & {
+export declare const SavedCardsContent: {
+  readonly id: "saved-cards";
+  readonly title: "Saved Cards";
+  readonly description: "Copy for the saved-card group legend and a refused card selection.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly legend: {
+        readonly type: "string";
+        readonly title: "Legend";
+        readonly description: "The radio group's visible accessible name.";
+        readonly format: "icu-message";
+        readonly messageSource: "Saved cards";
+      };
+      readonly savedCardUnavailableMessage: {
+        readonly type: "string";
+        readonly title: "Saved card unavailable message";
+        readonly description: "Shown when the picked saved card can no longer be used.";
+        readonly format: "icu-message";
+        readonly messageSource: "This saved card is no longer available. Choose another card.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Selection failure message";
+        readonly description: "Shown when a card selection fails: a network failure or a fault the shopper cannot fix.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to select this card. Please try again.";
+      };
+    };
+  };
+};
+export declare const SavedCardCvvFieldContent: {
+  readonly id: "saved-card-cvv-field";
+  readonly title: "Saved Card CVV Field";
+  readonly description: "Copy for the security code input of a saved card.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly securityCodeLabel: {
+        readonly type: "string";
+        readonly title: "Security code label";
+        readonly description: "The input's accessible name; no visible label renders.";
+        readonly format: "icu-message";
+        readonly messageSource: "Security code";
+      };
+      readonly securityCodeDescription: {
+        readonly type: "string";
+        readonly title: "Security code description";
+        readonly description: "Helper text linked to the input; blank renders nothing.";
+        readonly format: "icu-message";
+        readonly messageSource: "The 3-4 digit number on your card";
+      };
+    };
+  };
+};
+export declare const SavedCardRemoveContent: {
+  readonly id: "saved-card-remove";
+  readonly title: "Saved Card Remove";
+  readonly description: "Copy for the remove control of an expired saved card.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Remove card";
+      };
+      readonly failureMessage: {
+        readonly type: "string";
+        readonly title: "Failure message";
+        readonly description: "Rendered when the removal did not complete, never the server's text.";
+        readonly format: "icu-message";
+        readonly messageSource: "The card was not removed. Please try again.";
+      };
+    };
+  };
+};
+export type SavedCardsProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
   /** 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;
+  /** Merchant-authored copy: the radio group's visible legend (T38). */
+  $content?: ContentValue<typeof SavedCardsContent>;
 };
 /** The full per-row slice `SavedCardOption` independently resolves via `reactive-list-item`. */
 export type SavedCardOptionSlice = Readonly<{
@@ -42,26 +124,28 @@ export type SavedCardOptionProps = ComponentPropsWithRef<'div'> & {
   /** Typically a `SavedCardCvvField`. */
   children?: ReactNode;
 };
-export type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & {
+export type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & MessageLocaleProp & {
   /** 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.
+   * Merchant-authored copy. No visible `<label>` renders (Accessibility Contract), so
+   * `securityCodeLabel` is the input's only accessible name. `securityCodeDescription` renders as a
+   * sibling `<p>` linked through `aria-describedby` (the root is the input itself, so there is no
+   * `Field.Root` to host a `Field.Description` — saved-cards.md Decision 3).
    */
-  securityCodeDescription?: string;
+  $content?: ContentValue<typeof SavedCardCvvFieldContent>;
+};
+export type SavedCardRemoveProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & MessageLocaleProp & {
+  /** Compiler-injected action surface; carries `savedCard.remove`. */
+  $actions?: ComponentActions;
+  /** Merchant-authored copy: the control's text and the message when the removal did not complete. */
+  $content?: ContentValue<typeof SavedCardRemoveContent>;
 };
 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 const SavedCardRemoveDefinition: ComponentDefinition<SavedCardRemoveProps>;
+export declare function SavedCards({ $data: $dataProp, $content, $locale, 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-
@@ -74,6 +158,14 @@ export declare function SavedCardOption({ $data: $dataProp, className, children,
  * `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;
+export declare function SavedCardCvvField({ $actions: $actionsProp, $content, $locale, className, ...props }: SavedCardCvvFieldProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Removes an expired saved card (T216). Renders only for a row whose `expired` is the literal `true`. A
+ * success evicts the row's `SavedCard` entity, which is what the checkout list reads; the SDK action only
+ * updates the account's own `CustomerSavedCards` entity. Anything else, including a missing action, leaves
+ * the row and says so with its failureMessage, never the server's message. A caller's `onClick` runs first, and
+ * calling `event.preventDefault()` there cancels the removal.
+ */
+export declare function SavedCardRemove({ $actions: $actionsProp, $content, $locale, className, onClick, ...props }: SavedCardRemoveProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=saved-cards.d.ts.map