@vtex/faststore 0.0.8 → 0.0.11

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

@@ -0,0 +1,1011 @@
+"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 { signInTarget } from "../../utils/safe-href.js";
+import { useStorefrontFormatters } from "../../sdk/format/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
+import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { ActionsOverrideContext, useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { useSession } from "../session/session.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
+import { AlertDialogClose, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger } from "../../particles/alert-dialog/alert-dialog.js";
+import { CardSummary, CardSummaryRoot, useCardSummary } from "../../particles/card-summary/card-summary.js";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CombinedGraphQLErrors } from "@apollo/client/errors";
+//#region src/matter/account-saved-cards/account-saved-cards.tsx
+/**
+* The signed-in shopper's saved cards in the account.
+* The Root reads card ids only; each AccountSavedCardItem subscribes to its own CustomerSavedCard
+* (ADR-0012) and provides `card-summary` and the row itself, so the schema arranges the CardSummary
+* parts and AccountSavedCardExpiry in the row.
+* Every text is children or else the part's own `$content` message; the expiry line, repeated per row,
+* takes no children.
+* Removal state lives in the Root, because a successful removal unmounts the row it started from. The
+* Root also declares the `savedCard.remove` write, so every remove control in the section reaches the
+* provider.
+*/
+const fragment = graphql(`
+  fragment AccountSavedCardsData on Query {
+    customerSavedCards {
+      __typename
+      id
+      cards {
+        __typename
+        id
+      }
+    }
+  }
+`);
+const itemFragment = graphql(`
+  fragment AccountSavedCardItemData on Query {
+    customerSavedCards {
+      cards {
+        __typename
+        id
+        network {
+          name
+        }
+        lastDigits
+        expiry {
+          month
+          year
+        }
+        status
+      }
+    }
+  }
+`);
+const AccountSavedCardsHeadingContent = defineContentType({
+	id: "account-saved-cards-heading",
+	title: "Account Saved Cards Heading",
+	description: "Heading of the account's saved-cards section.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Heading",
+			format: "icu-message",
+			messageSource: "Saved cards"
+		} }
+	}
+});
+const AccountSavedCardsEmptyContent = defineContentType({
+	id: "account-saved-cards-empty",
+	title: "Account Saved Cards Empty",
+	description: "Statement shown when the shopper has no saved cards.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Empty statement",
+			format: "icu-message",
+			messageSource: "You have no saved cards yet."
+		} }
+	}
+});
+const AccountSavedCardsLoadingContent = defineContentType({
+	id: "account-saved-cards-loading",
+	title: "Account Saved Cards Loading",
+	description: "Announcement read to assistive technology while the saved cards load.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Loading announcement",
+			format: "icu-message",
+			messageSource: "Loading your saved cards…"
+		} }
+	}
+});
+const AccountSavedCardsErrorContent = defineContentType({
+	id: "account-saved-cards-error",
+	title: "Account Saved Cards Error",
+	description: "Messages shown when the saved cards cannot be read.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Load failure message",
+				format: "icu-message",
+				messageSource: "We couldn't load your saved cards. Please try again later."
+			},
+			sessionExpiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Session expired message",
+				format: "icu-message",
+				messageSource: "Your session has expired."
+			},
+			signInLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Sign-in link label",
+				format: "icu-message",
+				messageSource: "Sign in again"
+			}
+		}
+	}
+});
+const AccountSavedCardExpiryContent = defineContentType({
+	id: "account-saved-card-expiry",
+	title: "Account Saved Card Expiry",
+	description: "A saved card's expiry line. The date follows the label and is never authored.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			expiresLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Label before a working card's date",
+				format: "icu-message",
+				messageSource: "Expires"
+			},
+			expiredLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Label before an expired card's date",
+				format: "icu-message",
+				messageSource: "Expired"
+			},
+			expiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Expired card with no date",
+				format: "icu-message",
+				messageSource: "Expired"
+			},
+			unusableText: {
+				type: "string",
+				minLength: 1,
+				title: "Unusable card",
+				format: "icu-message",
+				messageSource: "This card can't be used"
+			}
+		}
+	}
+});
+const AccountSavedCardRemoveTriggerContent = defineContentType({
+	id: "account-saved-card-remove-trigger",
+	title: "Account Saved Card Remove Trigger",
+	description: "Label of the control that opens a saved card's removal prompt, and the card's last digits read to assistive technology.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Trigger label",
+				format: "icu-message",
+				messageSource: "Remove"
+			},
+			cardEndingIn: {
+				type: "string",
+				minLength: 1,
+				title: "Card last digits",
+				description: "Read to assistive technology after the card name.",
+				format: "icu-message",
+				messageSource: "ending in {lastDigits}",
+				messageArguments: {
+					type: "object",
+					properties: { lastDigits: { type: "string" } }
+				},
+				messageExample: { lastDigits: "4242" }
+			}
+		}
+	}
+});
+const AccountSavedCardRemoveTitleContent = defineContentType({
+	id: "account-saved-card-remove-title",
+	title: "Account Saved Card Remove Title",
+	description: "Question that titles the removal prompt.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Prompt title",
+			format: "icu-message",
+			messageSource: "Remove this card?"
+		} }
+	}
+});
+const AccountSavedCardRemoveDescriptionContent = defineContentType({
+	id: "account-saved-card-remove-body",
+	title: "Account Saved Card Remove Description",
+	description: "What removing the card means, shown after the card in the removal prompt, and the card's last digits read to assistive technology.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Consequence",
+				format: "icu-message",
+				messageSource: "It will no longer be offered when you pay. This can't be undone."
+			},
+			cardEndingIn: {
+				type: "string",
+				minLength: 1,
+				title: "Card last digits",
+				description: "Read to assistive technology after the card name.",
+				format: "icu-message",
+				messageSource: "ending in {lastDigits}",
+				messageArguments: {
+					type: "object",
+					properties: { lastDigits: { type: "string" } }
+				},
+				messageExample: { lastDigits: "4242" }
+			}
+		}
+	}
+});
+const AccountSavedCardRemoveCancelContent = defineContentType({
+	id: "account-saved-card-remove-cancel",
+	title: "Account Saved Card Remove Cancel",
+	description: "Label of the control that keeps the card.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Cancel label",
+			format: "icu-message",
+			messageSource: "Cancel"
+		} }
+	}
+});
+const AccountSavedCardRemoveConfirmContent = defineContentType({
+	id: "account-saved-card-remove-confirm",
+	title: "Account Saved Card Remove Confirm",
+	description: "Label of the control that removes the card, and its label while the removal runs.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Confirm label",
+				format: "icu-message",
+				messageSource: "Remove card"
+			},
+			pendingText: {
+				type: "string",
+				minLength: 1,
+				title: "Label while removing",
+				format: "icu-message",
+				messageSource: "Removing…"
+			}
+		}
+	}
+});
+const AccountSavedCardsRemoveFeedbackContent = defineContentType({
+	id: "account-saved-cards-remove-feedback",
+	title: "Account Saved Cards Remove Feedback",
+	description: "Messages that tell the shopper how a card removal ended.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			successText: {
+				type: "string",
+				minLength: 1,
+				title: "Card removed",
+				format: "icu-message",
+				messageSource: "The card was removed."
+			},
+			failureText: {
+				type: "string",
+				minLength: 1,
+				title: "Card not removed",
+				format: "icu-message",
+				messageSource: "We couldn't remove the card. Please try again."
+			},
+			sessionExpiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Session expired message",
+				format: "icu-message",
+				messageSource: "Your session has expired."
+			},
+			signInLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Sign-in link label",
+				format: "icu-message",
+				messageSource: "Sign in again"
+			}
+		}
+	}
+});
+const AccountSavedCardsContext = createContext(null);
+/** The section state the nearest AccountSavedCardsRoot publishes. Throws outside one. */
+function useAccountSavedCards() {
+	const ctx = useContext(AccountSavedCardsContext);
+	if (!ctx) throw new Error("AccountSavedCards parts must be used inside AccountSavedCardsRoot.");
+	return ctx;
+}
+const AccountSavedCardContext = createContext(null);
+/** The card the nearest AccountSavedCardItem provides. Throws outside one. */
+function useAccountSavedCard() {
+	const ctx = useContext(AccountSavedCardContext);
+	if (!ctx) throw new Error("AccountSavedCard parts must be used inside AccountSavedCardItem.");
+	return ctx;
+}
+const AccountSavedCardRemoveContext = createContext(null);
+/** The remove controller the nearest AccountSavedCardRemove provides. Throws outside one. */
+function useAccountSavedCardRemove() {
+	const ctx = useContext(AccountSavedCardRemoveContext);
+	if (!ctx) throw new Error("AccountSavedCardRemove parts must be used inside AccountSavedCardRemove.");
+	return ctx;
+}
+/** Only an explicit USABLE reads as usable, so a status this client does not know never looks usable. */
+function savedCardState(status) {
+	if (status === "USABLE") return "usable";
+	if (status === "EXPIRED") return "expired";
+	return "unusable";
+}
+function validExpiry(expiry) {
+	if (!expiry) return null;
+	const { month, year } = expiry;
+	if (!Number.isInteger(month) || month < 1 || month > 12) return null;
+	if (!Number.isInteger(year) || year < 1e3 || year > 9999) return null;
+	return {
+		month,
+		year
+	};
+}
+const EMPTY_CARDS = Object.freeze([]);
+/**
+* The read's own error code. The root error is page-wide, so an error whose path names another field
+* does not count; with no path at all, the first code stands.
+*/
+function readErrorCode(error) {
+	if (!CombinedGraphQLErrors.is(error)) return null;
+	const code = (error.errors.find((entry) => entry.path?.[0] === "customerSavedCards") ?? error.errors.find((entry) => entry.path == null))?.extensions?.code;
+	return typeof code === "string" ? code : null;
+}
+/**
+* One state for the whole section. A null slice plus an error is a failed read; an error beside a
+* resolved slice belongs to another field of the page query and changes nothing here.
+*/
+function resolveSectionState(data, loading, error) {
+	if (data == null) {
+		if (error) return {
+			state: "error",
+			cards: EMPTY_CARDS,
+			errorCode: readErrorCode(error)
+		};
+		return {
+			state: loading ? "loading" : "idle",
+			cards: EMPTY_CARDS,
+			errorCode: null
+		};
+	}
+	const cards = data.cards ?? EMPTY_CARDS;
+	return {
+		state: cards.length === 0 ? "empty" : "ready",
+		cards,
+		errorCode: null
+	};
+}
+const AccountSavedCardsRootDefinition = defineComponent({
+	name: "AccountSavedCardsRoot",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	requiresContext: "session",
+	providesContext: "account-saved-cards",
+	actions: { savedCard: ["remove"] },
+	editor: {
+		label: "Account Saved Cards Root",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "The signed-in shopper's saved cards, read with no cart. Renders nothing unless the session is loggedIn, and no chrome of its own: compose AccountSavedCardsHeading, AccountSavedCardsRemoveFeedback, AccountSavedCardsLoading, AccountSavedCardsError, AccountSavedCardsEmpty, and AccountSavedCardsList (with an AccountSavedCardItem inside) as children. Exactly one of Loading, Error, Empty, or List renders at a time; the state is on data-fs-account-saved-cards-state. It owns the removal state and supplies the savedCard.remove write to every AccountSavedCardRemove inside, so the write sits here rather than on the control that dispatches it; with no remove control composed the write is never called. Must be inside a SessionRoot, normally the my-account layout's. See account-saved-cards.md."
+});
+const AccountSavedCardsHeadingDefinition = defineComponent({
+	name: "AccountSavedCardsHeading",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsHeading,
+	content: AccountSavedCardsHeadingContent,
+	requiresContext: "account-saved-cards",
+	editor: {
+		label: "Account Saved Cards Heading",
+		category: "identity"
+	},
+	schema: { as: {
+		type: [
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6"
+		],
+		default: "h2",
+		label: "Heading level"
+	} },
+	guideline: "The section heading, rendered in every state. `as` sets the level from h2 to h6 (default h2); there is no h1, because the page title belongs to the page shell — pick the level that fits where the section is nested, or omit the heading. Text is children, or else the text message. Must be inside AccountSavedCardsRoot."
+});
+const AccountSavedCardsListDefinition = defineComponent({
+	name: "AccountSavedCardsList",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsList,
+	requiresContext: "account-saved-cards",
+	providesContext: "account-saved-card",
+	editor: {
+		label: "Account Saved Cards List",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "The list of saved cards, one row per card in the platform order, rendered only when the shopper has at least one. Place one AccountSavedCardItem inside as the row template. Must be inside AccountSavedCardsRoot."
+});
+const AccountSavedCardItemDefinition = defineComponent({
+	name: "AccountSavedCardItem",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardItem,
+	fragment: itemFragment,
+	fetchStrategy: "reactive-list-item",
+	requiresContext: "account-saved-card",
+	providesContext: ["card-summary", "account-saved-card-data"],
+	editor: {
+		label: "Account Saved Card Item",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "One saved card as a list row. It provides the card to the CardSummary parts, AccountSavedCardExpiry, and AccountSavedCardRemove. It renders only its children, so compose CardSummary, AccountSavedCardExpiry and AccountSavedCardRemove in it; keep AccountSavedCardExpiry in any row, and leave AccountSavedCardRemove out only for a read-only list. An expired row carries data-fs-account-saved-card-expired, an unusable one data-fs-account-saved-card-unusable, and a row whose removal is pending data-fs-account-saved-card-removing, for a swatch to dim. Never shows more than the last four digits. Must be inside AccountSavedCardsList."
+});
+const AccountSavedCardExpiryDefinition = defineComponent({
+	name: "AccountSavedCardExpiry",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardExpiry,
+	content: AccountSavedCardExpiryContent,
+	requiresContext: "account-saved-card-data",
+	editor: {
+		label: "Account Saved Card Expiry",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "When a saved card expires: \"Expires 05/28\" for a working card, \"Expired 05/24\" (or \"Expired\" with no date) for an expired one, and \"This card can't be used\", with no date, for an unusable one. Renders nothing for a working card with no date. The label is the expiresLabel, expiredLabel, expiredText or unusableText message; the component always places the MM/YY date after it. The state is on data-fs-account-saved-card-expiry-status (usable, expired, unusable). Must be inside AccountSavedCardItem."
+});
+const AccountSavedCardsEmptyDefinition = defineComponent({
+	name: "AccountSavedCardsEmpty",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsEmpty,
+	content: AccountSavedCardsEmptyContent,
+	requiresContext: "account-saved-cards",
+	editor: {
+		label: "Account Saved Cards Empty",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "States that the shopper has no saved cards. Renders only once the read resolved with none — never while loading or after a failure. Text is children, or else the text message. Must be inside AccountSavedCardsRoot."
+});
+const AccountSavedCardsLoadingDefinition = defineComponent({
+	name: "AccountSavedCardsLoading",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsLoading,
+	content: AccountSavedCardsLoadingContent,
+	requiresContext: "account-saved-cards",
+	editor: {
+		label: "Account Saved Cards Loading",
+		category: "identity"
+	},
+	schema: { skeletonCount: {
+		type: "number",
+		default: 2,
+		label: "Placeholder rows"
+	} },
+	guideline: "Placeholder rows while the saved cards load, plus one polite live region that announces the wait (the text message). The rows are hidden from assistive technology; style them through data-fs-account-saved-cards-loading-row. Without this part the section shows no loading look. Must be inside AccountSavedCardsRoot."
+});
+const AccountSavedCardsErrorDefinition = defineComponent({
+	name: "AccountSavedCardsError",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsError,
+	content: AccountSavedCardsErrorContent,
+	requiresContext: "account-saved-cards",
+	editor: {
+		label: "Account Saved Cards Error",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "An alert shown when the saved cards cannot be read. An expired session says so and links to sign-in, returning the shopper to this page; any other failure says the cards could not be loaded. The wording is the sessionExpiredText, signInLabel and text messages, never from the server; children replace it for every failure and drop the link. Must be inside AccountSavedCardsRoot."
+});
+const AccountSavedCardRemoveDefinition = defineComponent({
+	name: "AccountSavedCardRemove",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemove,
+	requiresContext: "account-saved-card-data",
+	providesContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Lets the shopper remove the row's card after confirming. State-only controller: wrap one AlertDialogRoot and it becomes controlled, so never set open or onOpenChange on it. Compose AlertDialogRoot > (AccountSavedCardRemoveTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AccountSavedCardRemoveTitle + AccountSavedCardRemoveDescription + AccountSavedCardRemoveCancel + AccountSavedCardRemoveConfirm))), Cancel before Confirm so the safe action takes focus. With no children it renders nothing. The prompt stays open while the removal runs and closes when it fails; on success the row leaves the list. AccountSavedCardsRoot supplies the savedCard.remove write, and the outcome goes unreported unless the section composes AccountSavedCardsRemoveFeedback. Must be inside AccountSavedCardItem."
+});
+const AccountSavedCardRemoveTriggerDefinition = defineComponent({
+	name: "AccountSavedCardRemoveTrigger",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemoveTrigger,
+	content: AccountSavedCardRemoveTriggerContent,
+	requiresContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove Trigger",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Opens the removal prompt. Its accessible name is its text followed by the card, e.g. \"Remove Visa ending in 1234\"; the card part is visually hidden. Disabled while any removal in the section is pending. Text is children, or else the text message; the card part is the cardEndingIn message. Direct child of the AlertDialogRoot inside AccountSavedCardRemove."
+});
+const AccountSavedCardRemoveTitleDefinition = defineComponent({
+	name: "AccountSavedCardRemoveTitle",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemoveTitle,
+	content: AccountSavedCardRemoveTitleContent,
+	requiresContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove Title",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "The removal prompt's question and its accessible name. Required inside AlertDialogPopup. Text is children, or else the text message. Must be inside AccountSavedCardRemove."
+});
+const AccountSavedCardRemoveDescriptionDefinition = defineComponent({
+	name: "AccountSavedCardRemoveDescription",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemoveDescription,
+	content: AccountSavedCardRemoveDescriptionContent,
+	requiresContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove Description",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Names the card and states the consequence; screen readers announce it with the prompt. With no children it renders CardSummary, which reads the cardEndingIn message of this part as its endingIn, and then the text message; children replace both, so keep a CardSummary in them for the prompt to name the card. Inside AlertDialogPopup, after AccountSavedCardRemoveTitle. Must be inside AccountSavedCardRemove."
+});
+const AccountSavedCardRemoveCancelDefinition = defineComponent({
+	name: "AccountSavedCardRemoveCancel",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemoveCancel,
+	content: AccountSavedCardRemoveCancelContent,
+	requiresContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove Cancel",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Closes the removal prompt and keeps the card. Disabled while the removal runs. Place it before AccountSavedCardRemoveConfirm so it takes focus when the prompt opens. Text is children, or else the text message. Must be inside AccountSavedCardRemove."
+});
+const AccountSavedCardRemoveConfirmDefinition = defineComponent({
+	name: "AccountSavedCardRemoveConfirm",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardRemoveConfirm,
+	content: AccountSavedCardRemoveConfirmContent,
+	requiresContext: "account-saved-card-remove",
+	editor: {
+		label: "Account Saved Card Remove Confirm",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Removes the card. It dispatches savedCard.remove through the write AccountSavedCardsRoot supplies and declares none of its own. While the removal runs it is busy and shows its pending text; one removal runs at a time in the section. Text is children, or else the text message; the pendingText message while removing. Must be inside AccountSavedCardRemove."
+});
+const AccountSavedCardsRemoveFeedbackDefinition = defineComponent({
+	name: "AccountSavedCardsRemoveFeedback",
+	importPath: "@vtex/faststore/components",
+	component: AccountSavedCardsRemoveFeedback,
+	content: AccountSavedCardsRemoveFeedbackContent,
+	requiresContext: "account-saved-cards",
+	editor: {
+		label: "Account Saved Cards Remove Feedback",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Tells the shopper how a card removal ended: a status message that takes focus when the card was removed, or an alert when it was not, with a sign-in link back to this page when the session expired. Renders in every state of the section, so the message outlives the removed row and an emptied list; it stays until the next removal starts. Without this part a removal's outcome goes unreported. The wording is the successText, failureText, sessionExpiredText and signInLabel messages, never the server's; the outcome is on data-fs-account-saved-cards-remove-feedback-outcome. Must be inside AccountSavedCardsRoot."
+});
+/**
+* One removal at a time: each success replaces the whole cached list, so two in flight could land out
+* of order and restore a card the later one removed.
+*/
+function useRemovalState() {
+	const [pendingId, setPendingId] = useState(null);
+	const [outcome, setOutcome] = useState(null);
+	const pendingRef = useRef(null);
+	const begin = useCallback((id) => {
+		if (pendingRef.current !== null) return false;
+		pendingRef.current = id;
+		setPendingId(id);
+		setOutcome(null);
+		return true;
+	}, []);
+	const settle = useCallback((id, userErrors) => {
+		if (pendingRef.current !== id) return;
+		pendingRef.current = null;
+		setPendingId(null);
+		const [first] = userErrors;
+		setOutcome(first ? {
+			kind: "failed",
+			code: first.code
+		} : { kind: "removed" });
+	}, []);
+	return useMemo(() => ({
+		pendingId,
+		outcome,
+		begin,
+		settle
+	}), [
+		pendingId,
+		outcome,
+		begin,
+		settle
+	]);
+}
+function AccountSavedCardsRoot({ $data: $dataProp, $actions: $actionsProp, className, children, ...props }) {
+	const { state: sessionState } = useSession();
+	const data = useDataOverride($dataProp) ?? null;
+	const $actions = useActionsOverride($actionsProp);
+	const { loading, error } = useContext(ReactiveRootContext);
+	const section = useMemo(() => resolveSectionState(data, loading, error), [
+		data,
+		loading,
+		error
+	]);
+	const removal = useRemovalState();
+	const value = useMemo(() => ({
+		...section,
+		removal
+	}), [section, removal]);
+	if (sessionState !== "loggedIn") return null;
+	return /* @__PURE__ */ jsx(AccountSavedCardsContext, {
+		value,
+		children: /* @__PURE__ */ jsx(ActionsOverrideContext, {
+			value: $actions,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				className,
+				"data-fs-account-saved-cards": "",
+				"data-fs-account-saved-cards-state": value.state,
+				children
+			})
+		})
+	});
+}
+function AccountSavedCardsHeading({ as: Tag = "h2", $content, $locale, className, children, ...props }) {
+	useAccountSavedCards();
+	const { format } = useMessageFormatter(AccountSavedCardsHeadingContent, $content);
+	return /* @__PURE__ */ jsx(Tag, {
+		...props,
+		className,
+		"data-fs-account-saved-cards-heading": "",
+		children: children ?? format("text")
+	});
+}
+function AccountSavedCardsList({ className, children, ...props }) {
+	const { state, cards } = useAccountSavedCards();
+	if (state !== "ready") return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		className,
+		"data-fs-account-saved-cards-list": "",
+		children: cards.map((card) => /* @__PURE__ */ jsx(ListItemRefContext, {
+			value: {
+				__typename: "CustomerSavedCard",
+				id: card.id,
+				fallbackData: void 0
+			},
+			children
+		}, card.id))
+	});
+}
+function AccountSavedCardItem({ $data: $dataProp, className, children, ...props }) {
+	const card = useDataOverride($dataProp) ?? null;
+	const pendingId = useContext(AccountSavedCardsContext)?.removal.pendingId ?? null;
+	if (!card) return null;
+	const state = savedCardState(card.status);
+	return /* @__PURE__ */ jsx(AccountSavedCardContext, {
+		value: card,
+		children: /* @__PURE__ */ jsx("li", {
+			...props,
+			className,
+			"data-fs-account-saved-card": "",
+			...state === "expired" ? { "data-fs-account-saved-card-expired": "" } : {},
+			...state === "unusable" ? { "data-fs-account-saved-card-unusable": "" } : {},
+			...pendingId === card.id ? { "data-fs-account-saved-card-removing": "" } : {},
+			children: /* @__PURE__ */ jsx(CardSummaryRoot, {
+				network: card.network.name,
+				lastDigits: card.lastDigits,
+				children
+			})
+		})
+	});
+}
+function AccountSavedCardExpiry({ $content, $locale, className, ...props }) {
+	const { status, expiry } = useAccountSavedCard();
+	const { format } = useMessageFormatter(AccountSavedCardExpiryContent, $content);
+	const { formatDate } = useStorefrontFormatters();
+	const state = savedCardState(status);
+	const date = state === "unusable" ? null : validExpiry(expiry);
+	if (state === "usable" && !date) return null;
+	let label;
+	if (state === "unusable") label = format("unusableText");
+	else if (!date) label = format("expiredText");
+	else if (state === "expired") label = format("expiredLabel");
+	else label = format("expiresLabel");
+	const month = date ? String(date.month).padStart(2, "0") : "";
+	return /* @__PURE__ */ jsxs("p", {
+		...props,
+		className,
+		"data-fs-account-saved-card-expiry": "",
+		"data-fs-account-saved-card-expiry-status": state,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-fs-account-saved-card-expiry-label": "",
+			children: label
+		}), date ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			" ",
+			/* @__PURE__ */ jsx("time", {
+				"data-fs-account-saved-card-expiry-date": "",
+				dateTime: `${date.year}-${month}`,
+				"aria-hidden": "true",
+				children: `${month}/${String(date.year % 100).padStart(2, "0")}`
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				"data-fs-sr-only": "",
+				className: "sr-only",
+				children: formatDate(Date.UTC(date.year, date.month - 1, 1), {
+					month: "long",
+					year: "numeric",
+					timeZone: "UTC"
+				})
+			})
+		] }) : null]
+	});
+}
+function AccountSavedCardsEmpty({ $content, $locale, className, children, ...props }) {
+	const { state } = useAccountSavedCards();
+	const { format } = useMessageFormatter(AccountSavedCardsEmptyContent, $content);
+	if (state !== "empty") return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className,
+		"data-fs-account-saved-cards-empty": "",
+		children: children ?? format("text")
+	});
+}
+const DEFAULT_SKELETON_COUNT = 2;
+function AccountSavedCardsLoading({ skeletonCount = DEFAULT_SKELETON_COUNT, $content, $locale, className, ...props }) {
+	const { state } = useAccountSavedCards();
+	const { format } = useMessageFormatter(AccountSavedCardsLoadingContent, $content);
+	const loading = state === "loading";
+	const rows = Number.isFinite(skeletonCount) ? Math.max(1, Math.trunc(skeletonCount)) : DEFAULT_SKELETON_COUNT;
+	const [announcement, setAnnouncement] = useState("");
+	const pendingLabel = loading ? format("text") : "";
+	useEffect(() => {
+		setAnnouncement(pendingLabel);
+	}, [pendingLabel]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [loading ? /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"aria-hidden": "true",
+		"data-fs-account-saved-cards-loading": "",
+		children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsx("span", { "data-fs-account-saved-cards-loading-row": "" }, index))
+	}) : null, /* @__PURE__ */ jsx("output", {
+		"aria-live": "polite",
+		"data-fs-account-saved-cards-loading-announcement": "",
+		children: announcement
+	})] });
+}
+function AccountSavedCardsError({ $content, $locale, className, children, ...props }) {
+	const { state, errorCode } = useAccountSavedCards();
+	const { format } = useMessageFormatter(AccountSavedCardsErrorContent, $content);
+	const { path } = useStorefrontRoute();
+	if (state !== "error") return null;
+	const sessionExpired = errorCode === "UNAUTHORIZED";
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "alert",
+		className,
+		"data-fs-account-saved-cards-error": "",
+		"data-fs-account-saved-cards-error-code": sessionExpired ? "unauthorized" : "failed",
+		children: children ?? (sessionExpired ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			format("sessionExpiredText"),
+			" ",
+			/* @__PURE__ */ jsx(NavigationLink, {
+				href: signInTarget(path),
+				prefetch: false,
+				"data-fs-account-saved-cards-sign-in": "",
+				children: format("signInLabel")
+			})
+		] }) : format("text"))
+	});
+}
+function AccountSavedCardRemove({ children }) {
+	const { id } = useAccountSavedCard();
+	const { removal } = useAccountSavedCards();
+	const [open, setOpen] = useState(false);
+	const pending = removal.pendingId === id;
+	const blocked = removal.pendingId !== null;
+	const close = useCallback(() => setOpen(false), []);
+	const value = useMemo(() => ({
+		id,
+		pending,
+		blocked,
+		close
+	}), [
+		id,
+		pending,
+		blocked,
+		close
+	]);
+	if (!isValidElement(children)) return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
+		value,
+		children
+	});
+	return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
+		value,
+		children: cloneElement(children, {
+			open,
+			onOpenChange: (next) => {
+				if (next ? blocked : pending) return;
+				setOpen(next);
+			}
+		})
+	});
+}
+function AccountSavedCardRemoveTrigger({ $content, $locale, className, children, disabled, ...props }) {
+	const { blocked } = useAccountSavedCardRemove();
+	const { name, lastFour } = useCardSummary();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveTriggerContent, $content);
+	const card = [name, lastFour ? format("cardEndingIn", { lastDigits: lastFour }) : null].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(AlertDialogTrigger, {
+		...props,
+		className,
+		disabled: blocked || disabled,
+		"data-fs-account-saved-card-remove-trigger": "",
+		children: [children ?? format("text"), card ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
+			"data-fs-sr-only": "",
+			className: "sr-only",
+			children: card
+		})] }) : null]
+	});
+}
+function AccountSavedCardRemoveTitle({ $content, $locale, className, children, ...props }) {
+	useAccountSavedCardRemove();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveTitleContent, $content);
+	return /* @__PURE__ */ jsx(AlertDialogTitle, {
+		...props,
+		className,
+		"data-fs-account-saved-card-remove-title": "",
+		children: children ?? format("text")
+	});
+}
+function AccountSavedCardRemoveDescription({ $content, $locale, className, children, ...props }) {
+	useAccountSavedCardRemove();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveDescriptionContent, $content);
+	const cardEndingIn = $content?.cardEndingIn;
+	const cardSummaryContent = useMemo(() => ({ endingIn: cardEndingIn }), [cardEndingIn]);
+	return /* @__PURE__ */ jsx(AlertDialogDescription, {
+		...props,
+		className,
+		"data-fs-account-saved-card-remove-description": "",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(CardSummary, { $content: cardSummaryContent }),
+			" ",
+			format("text")
+		] })
+	});
+}
+function AccountSavedCardRemoveCancel({ $content, $locale, className, children, disabled, ...props }) {
+	const { pending } = useAccountSavedCardRemove();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveCancelContent, $content);
+	return /* @__PURE__ */ jsx(AlertDialogClose, {
+		...props,
+		className,
+		disabled: pending || disabled,
+		"data-fs-account-saved-card-remove-cancel": "",
+		children: children ?? format("text")
+	});
+}
+function AccountSavedCardRemoveConfirm({ $content, $locale, className, children, onClick, ...props }) {
+	const { id, pending, close } = useAccountSavedCardRemove();
+	const { removal } = useAccountSavedCards();
+	const remove = useActionsOverride(void 0)?.savedCard?.remove;
+	const { format } = useMessageFormatter(AccountSavedCardRemoveConfirmContent, $content);
+	async function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented || !remove || !removal.begin(id)) return;
+		let userErrors;
+		try {
+			userErrors = await remove({ id });
+		} catch {
+			userErrors = [{ code: "NETWORK_ERROR" }];
+		}
+		removal.settle(id, userErrors);
+		close();
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		"aria-disabled": pending || void 0,
+		"aria-busy": pending || void 0,
+		"data-fs-account-saved-card-remove-confirm": "",
+		...pending ? { "data-fs-account-saved-card-remove-confirm-pending": "" } : {},
+		onClick: handleClick,
+		children: pending ? format("pendingText") : children ?? format("text")
+	});
+}
+function feedbackOutcome(outcome) {
+	if (!outcome) return void 0;
+	if (outcome.kind === "removed") return "removed";
+	return outcome.code === "UNAUTHORIZED" ? "unauthorized" : "failed";
+}
+function AccountSavedCardsRemoveFeedback({ $content, $locale, className, ...props }) {
+	const { removal: { outcome } } = useAccountSavedCards();
+	const { format } = useMessageFormatter(AccountSavedCardsRemoveFeedbackContent, $content);
+	const { path } = useStorefrontRoute();
+	const statusRef = useRef(null);
+	const kind = feedbackOutcome(outcome);
+	const [announcement, setAnnouncement] = useState("");
+	const removed = outcome?.kind === "removed";
+	const successText = removed ? format("successText") : "";
+	useEffect(() => {
+		setAnnouncement(successText);
+		if (removed) statusRef.current?.focus();
+	}, [removed, successText]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-account-saved-cards-remove-feedback": "",
+		"data-fs-account-saved-cards-remove-feedback-outcome": kind,
+		children: [
+			/* @__PURE__ */ jsx("output", {
+				ref: statusRef,
+				"aria-live": "polite",
+				tabIndex: -1,
+				children: announcement
+			}),
+			kind === "unauthorized" ? /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				children: [
+					format("sessionExpiredText"),
+					" ",
+					/* @__PURE__ */ jsx(NavigationLink, {
+						href: signInTarget(path),
+						prefetch: false,
+						"data-fs-account-saved-cards-remove-feedback-sign-in": "",
+						children: format("signInLabel")
+					})
+				]
+			}) : null,
+			kind === "failed" ? /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				children: format("failureText")
+			}) : null
+		]
+	});
+}
+//#endregion
+export { AccountSavedCardExpiry, AccountSavedCardExpiryContent, AccountSavedCardExpiryDefinition, AccountSavedCardItem, AccountSavedCardItemDefinition, AccountSavedCardRemove, AccountSavedCardRemoveCancel, AccountSavedCardRemoveCancelContent, AccountSavedCardRemoveCancelDefinition, AccountSavedCardRemoveConfirm, AccountSavedCardRemoveConfirmContent, AccountSavedCardRemoveConfirmDefinition, AccountSavedCardRemoveDefinition, AccountSavedCardRemoveDescription, AccountSavedCardRemoveDescriptionContent, AccountSavedCardRemoveDescriptionDefinition, AccountSavedCardRemoveTitle, AccountSavedCardRemoveTitleContent, AccountSavedCardRemoveTitleDefinition, AccountSavedCardRemoveTrigger, AccountSavedCardRemoveTriggerContent, AccountSavedCardRemoveTriggerDefinition, AccountSavedCardsEmpty, AccountSavedCardsEmptyContent, AccountSavedCardsEmptyDefinition, AccountSavedCardsError, AccountSavedCardsErrorContent, AccountSavedCardsErrorDefinition, AccountSavedCardsHeading, AccountSavedCardsHeadingContent, AccountSavedCardsHeadingDefinition, AccountSavedCardsList, AccountSavedCardsListDefinition, AccountSavedCardsLoading, AccountSavedCardsLoadingContent, AccountSavedCardsLoadingDefinition, AccountSavedCardsRemoveFeedback, AccountSavedCardsRemoveFeedbackContent, AccountSavedCardsRemoveFeedbackDefinition, AccountSavedCardsRoot, AccountSavedCardsRootDefinition, useAccountSavedCard, useAccountSavedCardRemove, useAccountSavedCards };
+
+//# sourceMappingURL=account-saved-cards.js.map