@vtex/faststore 0.0.10 → 0.0.11

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

@@ -1,16 +1,22 @@
 "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 { 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 { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
-import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
+import { loggableErrorName } from "../../utils/loggable-error-name.js";
+import { ListItemRefContext, useListItemRef } from "../../sdk/data/list-item-ref-context.js";
+import { Icon } from "../../particles/icon/icon.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 { SECURITY_CODE_MASK_STYLE, isSecurityCodeMasked } from "../../sdk/payment/security-code-mask.js";
+import { NETWORK_ICON_BY_KEY } from "../card-entry/card-entry.js";
+import { useApolloClient } from "@apollo/client/react";
 import { createContext, useCallback, useContext, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/saved-cards/saved-cards.tsx
@@ -34,6 +40,10 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `$actions.payment.sendPayments` itself. T13's `usePlaceOrder` resolves and invokes it; this module
 * never returns the CVV, only `userErrors`.
 *
+* A card whose `cvvRequired` is a literal `false` has no code to enter (T39): `SavedCardOption` registers the
+* `'saved-card'` continuation itself, one that sends nothing and tells `usePlaceOrder` the order is placed by
+* Start Transaction alone. Any other flag value, including an absent one, keeps the field and the coded path.
+*
 * 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
@@ -55,6 +65,7 @@ const fragment = `
         accountId
         methodId
         bin
+        expired
       }
     }
   }
@@ -77,10 +88,105 @@ const optionFragment = `
     }
   }
 `;
+const SavedCardsContent = defineContentType({
+	id: "saved-cards",
+	title: "Saved Cards",
+	description: "Copy for the saved-card group legend and a refused card selection.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			legend: {
+				type: "string",
+				title: "Legend",
+				description: "The radio group's visible accessible name.",
+				format: "icu-message",
+				messageSource: "Saved cards"
+			},
+			savedCardUnavailableMessage: {
+				type: "string",
+				title: "Saved card unavailable message",
+				description: "Shown when the picked saved card can no longer be used.",
+				format: "icu-message",
+				messageSource: "This saved card is no longer available. Choose another card."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Selection failure message",
+				description: "Shown when a card selection fails: a network failure or a fault the shopper cannot fix.",
+				format: "icu-message",
+				messageSource: "Unable to select this card. Please try again."
+			}
+		}
+	}
+});
+/**
+* The message for each code a method selection can return. A saved card the server no longer matches is
+* one the shopper can replace; the rest, and a code this map does not know, share one message.
+*/
+const SAVED_CARDS_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	INVALID_METHOD_ID: "genericErrorMessage",
+	INVALID_SAVED_CARD_ACCOUNT_ID: "savedCardUnavailableMessage",
+	MISMATCHED_BIN_FOR_SAVED_CARD: "savedCardUnavailableMessage",
+	INVALID_BIN_FORMAT: "genericErrorMessage",
+	CONFLICTING_BIN_AND_ACCOUNT_ID: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
+const SavedCardCvvFieldContent = defineContentType({
+	id: "saved-card-cvv-field",
+	title: "Saved Card CVV Field",
+	description: "Copy for the security code input of a saved card.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			securityCodeLabel: {
+				type: "string",
+				title: "Security code label",
+				description: "The input's accessible name; no visible label renders.",
+				format: "icu-message",
+				messageSource: "Security code"
+			},
+			securityCodeDescription: {
+				type: "string",
+				title: "Security code description",
+				description: "Helper text linked to the input; blank renders nothing.",
+				format: "icu-message",
+				messageSource: "The 3-4 digit number on your card"
+			}
+		}
+	}
+});
+const SavedCardRemoveContent = defineContentType({
+	id: "saved-card-remove",
+	title: "Saved Card Remove",
+	description: "Copy for the remove control of an expired saved card.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Remove card"
+			},
+			failureMessage: {
+				type: "string",
+				title: "Failure message",
+				description: "Rendered when the removal did not complete, never the server's text.",
+				format: "icu-message",
+				messageSource: "The card was not removed. Please try again."
+			}
+		}
+	}
+});
 const SavedCardDataContext = createContext(null);
-function useSavedCardData() {
+function useSavedCardData(consumer) {
 	const data = useContext(SavedCardDataContext);
-	if (!data) throw new Error("SavedCardCvvField must be used inside a <SavedCardOption> subtree.");
+	if (!data) throw new Error(`${consumer} must be used inside a <SavedCardOption> subtree.`);
 	return data;
 }
 const SavedCardsDefinition = defineComponent({
@@ -91,16 +197,13 @@ const SavedCardsDefinition = defineComponent({
 	fetchStrategy: "reactive",
 	requiresContext: "payment",
 	providesContext: "saved-card",
+	content: SavedCardsContent,
 	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."
+	schema: {},
+	guideline: "Radio list of the shopper's saved cards (network, last four, label); expired cards render present but disabled, never selectable, and a persisted selection that points at an expired card counts as no selection (no row checked, no security-code field, nothing to submit). Place a SavedCardOption inside as the per-card template, itself wrapping a SavedCardCvvField so the shopper can complete payment with a stored card that needs a security code; a card that needs none is payable through SavedCardOption alone. 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",
@@ -115,7 +218,7 @@ const SavedCardOptionDefinition = defineComponent({
 		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."
+	guideline: "One saved card as a radio row: the network mark (its name as text when the network has no mark), the masked last four, and its label when set, separated by a dot; disabled when expired. An expired card is never the selection and mounts no field. A card that needs no security code shows no field and places the order with one action: this component alone makes it payable. Place a SavedCardCvvField inside so the CVV appears once a card that needs one is selected. Must be inside SavedCards."
 });
 const SavedCardCvvFieldDefinition = defineComponent({
 	name: "SavedCardCvvField",
@@ -124,23 +227,27 @@ const SavedCardCvvFieldDefinition = defineComponent({
 	requiresContext: "saved-card-data",
 	actions: { payment: ["sendPayments"] },
 	hardened: true,
+	content: SavedCardCvvFieldContent,
 	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"
-		}
+	schema: {},
+	guideline: "The CVV re-entry field for its saved card row; renders nothing until that row is selected, is not expired and requires a CVV (only a card flagged as needing none skips it; an unknown flag requires it). 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. Only needed for cards that need a code: a card that needs none is payable without it. Must be inside SavedCardOption."
+});
+const SavedCardRemoveDefinition = defineComponent({
+	name: "SavedCardRemove",
+	importPath: "@vtex/faststore/components",
+	component: SavedCardRemove,
+	requiresContext: "saved-card-data",
+	actions: { savedCard: ["remove"] },
+	content: SavedCardRemoveContent,
+	editor: {
+		label: "Saved Card Remove",
+		category: "commerce"
 	},
-	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."
+	schema: {},
+	guideline: "A button that removes this saved card from the shopper's account, rendered only for an expired card: a card that can still be used shows no control. Place it inside SavedCardOption, beside SavedCardCvvField. If the removal does not complete the card stays listed and an alert (role=\"alert\") says so, in the failureMessage $content field and never the server's text. It never changes the selected payment method or card. Must be inside SavedCardOption."
 });
 /** Mirrors `PaymentMethodList`'s own state hook, so an empty or loading region stays swatch-targetable. */
 function savedCardsState({ loading, count }) {
@@ -153,21 +260,46 @@ function savedCardsState({ loading, count }) {
 * `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.
+* instead. The same goes for a persisted selection whose card has since expired: the row is disabled, so
+* it can never be the choice, and counts as no selection at all (T39). Every read site in this module goes
+* through this one function — the radio group's own `value`, a row's `-selected` state, the CVV field's
+* visibility gate and the no-code submission's — so they 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 resolveEffectiveSelectedAccountId({ selectedAccountId, draftPath, selectedCardExpired }) {
+	return draftPath === "new-card" || selectedCardExpired ? null : selectedAccountId;
 }
-function SavedCards({ $data: $dataProp, legend, className, children, ...props }) {
+/**
+* Fail closed: only a literal `false` on a found list entry means "not expired". An entry that lacks
+* the flag (a cache entry written before the fragment selected it) counts as expired, so it can never
+* hold the radio group's value. No entry at all is not an expired card.
+*/
+function isListEntryExpired(entry) {
+	return entry !== void 0 && entry.expired !== false;
+}
+/**
+* `SavedCard.network` is the upstream `paymentSystemName`, free text. Own-property lookup on the icon
+* table, because a plain-object read lets a name that normalises to `constructor` resolve to the
+* inherited `Object` function, which `Icon` then throws on. Same normalisation as card entry's
+* `networkIconName`.
+*/
+function savedCardNetworkIcon(network) {
+	const key = network.toLowerCase().replaceAll(/[^a-z]/g, "");
+	return Object.hasOwn(NETWORK_ICON_BY_KEY, key) ? NETWORK_ICON_BY_KEY[key] ?? null : null;
+}
+function SavedCards({ $data: $dataProp, $content, $locale, className, children, ...props }) {
 	const $data = useDataOverride($dataProp);
+	const { format } = useMessageFormatter(SavedCardsContent, $content);
 	const { selectedAccountId, selectMethod, selectionError, draft, placing: placingNow, attempt, cardPaymentCollapsed } = usePayment();
 	const placing = placingNow || attempt?.phase === "sent" || attempt?.phase === "unresolved";
 	const loading = $data == null;
 	const savedCards = $data?.savedCards ?? [];
-	const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);
+	const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId({
+		selectedAccountId,
+		draftPath: draft.path,
+		selectedCardExpired: isListEntryExpired(savedCards.find((entry) => entry.accountId === selectedAccountId))
+	});
 	const handleValueChange = useCallback((accountId) => {
 		const card = savedCards.find((entry) => entry.accountId === accountId);
 		if (!card) return;
@@ -192,10 +324,10 @@ function SavedCards({ $data: $dataProp, legend, className, children, ...props })
 		children: [selectionError ? /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-saved-cards-error": "",
-			children: selectionError
+			children: formatErrorCode(SavedCardsContent, SAVED_CARDS_ERROR_FIELDS, selectionError, format, "genericErrorMessage")
 		}) : 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, {
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, { children: format("legend") }), /* @__PURE__ */ jsx(RadioGroup, {
 				value: effectiveSelectedAccountId ?? "",
 				onValueChange: handleValueChange,
 				children: savedCards.map((card) => /* @__PURE__ */ jsx(ListItemRefContext, {
@@ -214,7 +346,12 @@ 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);
+	const isSelected = slice.accountId === resolveEffectiveSelectedAccountId({
+		selectedAccountId,
+		draftPath: draft.path,
+		selectedCardExpired: slice.expired
+	});
+	const networkIcon = savedCardNetworkIcon(slice.network);
 	return /* @__PURE__ */ jsx(SavedCardDataContext, {
 		value: slice,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -223,25 +360,53 @@ function SavedCardOption({ $data: $dataProp, className, children, ...props }) {
 			"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]
+			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: networkIcon ? /* @__PURE__ */ jsx(Icon, {
+								name: networkIcon,
+								"aria-hidden": false,
+								role: "img",
+								"aria-label": slice.network,
+								"data-fs-saved-card-option-network-icon": ""
+							}) : slice.network
+						}),
+						slice.network ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-fs-saved-card-option-separator": "",
+								children: "·"
+							}),
+							" "
+						] }) : null,
+						/* @__PURE__ */ jsx("span", {
+							"data-fs-saved-card-option-last-four": "",
+							children: `•••• ${slice.lastFourDigits}`
+						}),
+						slice.label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-fs-saved-card-option-separator": "",
+								children: "·"
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								"data-fs-saved-card-option-label": "",
+								children: slice.label
+							})
+						] }) : null
+					]
+				}),
+				isSelected && slice.cvvRequired === false ? /* @__PURE__ */ jsx(SavedCardNoCodeSubmission, {}) : null,
+				children
+			]
 		})
 	});
 }
@@ -273,22 +438,10 @@ function sanitizeCvv(value) {
 * 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.
+* not checked here: `SavedCardCvvInput` renders only when the row is selected, not expired and its
+* `cvvRequired` is not a literal `false`, 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). */
@@ -298,12 +451,13 @@ function mergeDescribedBy(existing, 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
+* when its row is selected, is not expired 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 }) {
+function SavedCardCvvInput({ accountId, bin, securityCodeLabel, securityCodeDescription, $actions, ref: forwardedRef, onFocus, onBlur, ...props }) {
 	const [cvv, setCvv] = useState("");
+	const [focused, setFocused] = useState(false);
 	const inputRef = useRef(null);
 	const sendPayments = $actions?.payment?.sendPayments;
 	const descriptionId = useId();
@@ -356,7 +510,7 @@ function SavedCardCvvInput({ accountId, bin, securityCodeLabel, securityCodeDesc
 	]);
 	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) ? {
+	const inputStyle = isSecurityCodeMasked(cvv, focused && !props.disabled) ? {
 		...props.style,
 		...SECURITY_CODE_MASK_STYLE
 	} : props.style;
@@ -370,6 +524,14 @@ function SavedCardCvvInput({ accountId, bin, securityCodeLabel, securityCodeDesc
 		"aria-describedby": ariaDescribedBy,
 		value: cvv,
 		onChange: (event) => setCvv(sanitizeCvv(event.target.value)),
+		onFocus: (event) => {
+			setFocused(true);
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			setFocused(false);
+			onBlur?.(event);
+		},
 		"data-fs-saved-card-cvv-field": "",
 		style: inputStyle
 	}), securityCodeDescription ? /* @__PURE__ */ jsx("p", {
@@ -378,22 +540,132 @@ function SavedCardCvvInput({ accountId, bin, securityCodeLabel, securityCodeDesc
 		children: securityCodeDescription
 	}) : null] });
 }
-function SavedCardCvvField({ $actions: $actionsProp, securityCodeLabel = "Security code", securityCodeDescription = "The 3-4 digit number on your card", className, ...props }) {
+/**
+* The submission of a selected, non-expired card whose flag is a literal `false` (T39): no input mounts, so
+* there is no code and nothing to send. It registers a continuation that issues no request and tells
+* `usePlaceOrder` the order is placed by Start Transaction alone (`completesWithoutGateway`), so
+* `sendPayments` and the gateway callback are never called. Mounted by `SavedCardOption`, never by
+* `SavedCardCvvField`: a composition that leaves the field out still has to make this card payable. No
+* pre-flight is registered (nothing to validate), and it logs nothing.
+*/
+function SavedCardNoCodeSubmission() {
+	const submit = useCallback(async () => ({
+		reachedGateway: false,
+		userErrors: [],
+		completesWithoutGateway: true
+	}), []);
+	useRegisterPaymentSubmission("saved-card", submit);
+	return null;
+}
+function SavedCardCvvField({ $actions: $actionsProp, $content, $locale, className, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
-	const { accountId, bin, cvvRequired } = useSavedCardData();
+	const { format } = useMessageFormatter(SavedCardCvvFieldContent, $content);
+	const { accountId, bin, cvvRequired, expired } = useSavedCardData("SavedCardCvvField");
 	const { selectedAccountId, draft } = usePayment();
-	if (accountId !== resolveEffectiveSelectedAccountId(selectedAccountId, draft.path) || !cvvRequired) return null;
+	if (accountId !== resolveEffectiveSelectedAccountId({
+		selectedAccountId,
+		draftPath: draft.path,
+		selectedCardExpired: expired
+	}) || cvvRequired === false) return null;
 	return /* @__PURE__ */ jsx(SavedCardCvvInput, {
 		...props,
 		className,
 		accountId,
 		bin,
-		securityCodeLabel,
-		securityCodeDescription,
+		securityCodeLabel: format("securityCodeLabel"),
+		securityCodeDescription: format("securityCodeDescription"),
 		$actions
 	});
 }
+/**
+* The `CustomerSavedCard` opaque id the removal API takes. The checkout row's own id is a `SavedCard` id
+* (a different entity set), but both wrap the same platform `accountId`, so the account-side id is derived
+* from it: standard-alphabet, padded base64 of `CustomerSavedCard:<accountId>` (the server's
+* `encodeOpaqueId`). `btoa` over `TextEncoder` bytes, because `Buffer` does not exist in the browser. A
+* drift from the server's encoding is refused there as `CARD_NOT_FOUND`, which lands on the failure path.
+*/
+function toAccountSavedCardId(accountId) {
+	const bytes = new TextEncoder().encode(`CustomerSavedCard:${accountId}`);
+	let binary = "";
+	for (const byte of bytes) binary += String.fromCodePoint(byte);
+	return btoa(binary);
+}
+/**
+* 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.
+*/
+function SavedCardRemove({ $actions: $actionsProp, $content, $locale, className, onClick, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const { format } = useMessageFormatter(SavedCardRemoveContent, $content);
+	const { accountId, network, lastFourDigits, expired } = useSavedCardData("SavedCardRemove");
+	const listItemRef = useListItemRef();
+	const { cache } = useApolloClient();
+	const [pending, setPending] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const inFlight = useRef(false);
+	if (expired !== true) return null;
+	async function handleClick(event) {
+		if (inFlight.current) return;
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		inFlight.current = true;
+		setPending(true);
+		setFailed(false);
+		let removed = false;
+		try {
+			const remove = $actions?.savedCard?.remove;
+			if (typeof remove === "function") {
+				const userErrors = await remove({ id: toAccountSavedCardId(accountId) });
+				removed = Array.isArray(userErrors) && userErrors.length === 0;
+			}
+		} catch (error) {
+			console.error("[SavedCardRemove] remove failed", loggableErrorName(error));
+		} finally {
+			inFlight.current = false;
+			setPending(false);
+		}
+		if (!removed) {
+			setFailed(true);
+			return;
+		}
+		const entityId = listItemRef ? cache.identify({
+			__typename: listItemRef.__typename,
+			id: listItemRef.id
+		}) : void 0;
+		if (entityId) {
+			cache.evict({ id: entityId });
+			cache.gc();
+		}
+	}
+	const resolvedLabel = format("label");
+	const accessibleName = [
+		resolvedLabel,
+		network,
+		lastFourDigits ? `•••• ${lastFourDigits}` : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		"aria-label": accessibleName,
+		onClick: handleClick,
+		"data-fs-saved-card-remove": "",
+		...pending ? {
+			"aria-busy": true,
+			"aria-disabled": true,
+			"data-fs-saved-card-remove-pending": ""
+		} : {},
+		children: resolvedLabel
+	}), failed ? /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		"data-fs-saved-card-remove-error": "",
+		children: format("failureMessage")
+	}) : null] });
+}
 //#endregion
-export { SAVED_CARD_INVALID_SECURITY_CODE, SavedCardCvvField, SavedCardCvvFieldDefinition, SavedCardOption, SavedCardOptionDefinition, SavedCards, SavedCardsDefinition };
+export { SAVED_CARDS_ERROR_FIELDS, SAVED_CARD_INVALID_SECURITY_CODE, SavedCardCvvField, SavedCardCvvFieldContent, SavedCardCvvFieldDefinition, SavedCardOption, SavedCardOptionDefinition, SavedCardRemove, SavedCardRemoveContent, SavedCardRemoveDefinition, SavedCards, SavedCardsContent, SavedCardsDefinition };
 
 //# sourceMappingURL=saved-cards.js.map