@vtex/faststore 0.0.8 → 0.0.10

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

@@ -0,0 +1,956 @@
+"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 { useIntl } from "../../sdk/i18n/client.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 { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { useSession } from "../session/session.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
+import { AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } 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 resolves children, then the CMS entry, then the `fs/saved-cards.*` catalog; 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 a remove control rendered by a default, which the
+* compiler cannot wrap, still 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"
+		} }
+	}
+});
+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"
+		} }
+	}
+});
+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"
+		} }
+	}
+});
+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"
+			},
+			sessionExpiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Session expired message"
+			},
+			signInLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Sign-in link label"
+			}
+		}
+	}
+});
+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"
+			},
+			expiredLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Label before an expired card's date"
+			},
+			expiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Expired card with no date"
+			},
+			unusableText: {
+				type: "string",
+				minLength: 1,
+				title: "Unusable card"
+			}
+		}
+	}
+});
+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.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Trigger label"
+		} }
+	}
+});
+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"
+		} }
+	}
+});
+const AccountSavedCardRemoveDescriptionContent = defineContentType({
+	id: "account-saved-card-remove-description",
+	title: "Account Saved Card Remove Description",
+	description: "What removing the card means, shown after the card in the removal prompt.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Consequence"
+		} }
+	}
+});
+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"
+		} }
+	}
+});
+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"
+			},
+			pendingText: {
+				type: "string",
+				minLength: 1,
+				title: "Label while 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"
+			},
+			failureText: {
+				type: "string",
+				minLength: 1,
+				title: "Card not removed"
+			},
+			sessionExpiredText: {
+				type: "string",
+				minLength: 1,
+				title: "Session expired message"
+			},
+			signInLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Sign-in link label"
+			}
+		}
+	}
+});
+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, placed or default, 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.heading). 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. With no children it renders CardSummary (mark, network name, mask, last four digits), AccountSavedCardExpiry, and AccountSavedCardRemove, whose text is then always the catalog wording; compose them as children to rearrange them or to reword them from the CMS, keep AccountSavedCardExpiry in any custom 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 comes from the CMS entry, then the catalog (fs/saved-cards.expires, .expired, .expired-no-date, .unusable); the component always places the MM/YY date after it, and only a placed element reads the CMS entry. 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.empty). 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 (CMS entry, then the catalog fs/saved-cards.loading). 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 comes from the CMS entry, then the catalog (fs/saved-cards.session-expired, .sign-in, .load-failed), 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 that prompt with catalog text; compose the parts to reword them from the CMS. 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.trigger). 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.title). 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 and then the text, which resolves the CMS entry, then the catalog (fs/saved-cards.remove.description); 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.cancel). 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 resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.confirm, .pending). 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 comes from the CMS entry, then the catalog (fs/saved-cards.remove.success, .failed, fs/saved-cards.session-expired, .sign-in), never from the server; 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, className, children, ...props }) {
+	useAccountSavedCards();
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx(Tag, {
+		...props,
+		className,
+		"data-fs-account-saved-cards-heading": "",
+		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.heading" }))
+	});
+}
+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: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(CardSummary, {}),
+					/* @__PURE__ */ jsx(AccountSavedCardExpiry, {}),
+					/* @__PURE__ */ jsx(AccountSavedCardRemove, {})
+				] })
+			})
+		})
+	});
+}
+function AccountSavedCardExpiry({ $content, className, ...props }) {
+	const { status, expiry } = useAccountSavedCard();
+	const intl = useIntl();
+	const state = savedCardState(status);
+	const date = state === "unusable" ? null : validExpiry(expiry);
+	if (state === "usable" && !date) return null;
+	let label;
+	if (state === "unusable") label = resolveAuthoredCopy($content?.unusableText, intl.formatMessage({ id: "fs/saved-cards.unusable" }));
+	else if (!date) label = resolveAuthoredCopy($content?.expiredText, intl.formatMessage({ id: "fs/saved-cards.expired-no-date" }));
+	else if (state === "expired") label = resolveAuthoredCopy($content?.expiredLabel, intl.formatMessage({ id: "fs/saved-cards.expired" }));
+	else label = resolveAuthoredCopy($content?.expiresLabel, intl.formatMessage({ id: "fs/saved-cards.expires" }));
+	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: intl.formatDate(Date.UTC(date.year, date.month - 1, 1), {
+					month: "long",
+					year: "numeric",
+					timeZone: "UTC"
+				})
+			})
+		] }) : null]
+	});
+}
+function AccountSavedCardsEmpty({ $content, className, children, ...props }) {
+	const { state } = useAccountSavedCards();
+	const intl = useIntl();
+	if (state !== "empty") return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className,
+		"data-fs-account-saved-cards-empty": "",
+		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.empty" }))
+	});
+}
+const DEFAULT_SKELETON_COUNT = 2;
+function AccountSavedCardsLoading({ skeletonCount = DEFAULT_SKELETON_COUNT, $content, className, ...props }) {
+	const { state } = useAccountSavedCards();
+	const intl = useIntl();
+	const loading = state === "loading";
+	const label = resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.loading" }));
+	const rows = Number.isFinite(skeletonCount) ? Math.max(1, Math.trunc(skeletonCount)) : DEFAULT_SKELETON_COUNT;
+	const [announcement, setAnnouncement] = useState("");
+	const pendingLabel = loading ? label : "";
+	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, className, children, ...props }) {
+	const { state, errorCode } = useAccountSavedCards();
+	const intl = useIntl();
+	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: [
+			resolveAuthoredCopy($content?.sessionExpiredText, intl.formatMessage({ id: "fs/saved-cards.session-expired" })),
+			" ",
+			/* @__PURE__ */ jsx(NavigationLink, {
+				href: signInTarget(path),
+				prefetch: false,
+				"data-fs-account-saved-cards-sign-in": "",
+				children: resolveAuthoredCopy($content?.signInLabel, intl.formatMessage({ id: "fs/saved-cards.sign-in" }))
+			})
+		] }) : resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.load-failed" })))
+	});
+}
+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
+	]);
+	const prompt = children ?? /* @__PURE__ */ jsx(AccountSavedCardRemoveDefaultPrompt, {});
+	if (!isValidElement(prompt)) return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
+		value,
+		children: prompt
+	});
+	return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
+		value,
+		children: cloneElement(prompt, {
+			open,
+			onOpenChange: (next) => {
+				if (next ? blocked : pending) return;
+				setOpen(next);
+			}
+		})
+	});
+}
+function AccountSavedCardRemoveDefaultPrompt({ open, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(AlertDialogRoot, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(AccountSavedCardRemoveTrigger, {}), /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
+			/* @__PURE__ */ jsx(AccountSavedCardRemoveTitle, {}),
+			/* @__PURE__ */ jsx(AccountSavedCardRemoveDescription, {}),
+			/* @__PURE__ */ jsx(AccountSavedCardRemoveCancel, {}),
+			/* @__PURE__ */ jsx(AccountSavedCardRemoveConfirm, {})
+		] }) })] })]
+	});
+}
+function AccountSavedCardRemoveTrigger({ $content, className, children, disabled, ...props }) {
+	const { blocked } = useAccountSavedCardRemove();
+	const { name, lastFour } = useCardSummary();
+	const intl = useIntl();
+	const card = [name, lastFour ? intl.formatMessage({ id: "fs/card.ending-in" }, { lastDigits: lastFour }) : null].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(AlertDialogTrigger, {
+		...props,
+		className,
+		disabled: blocked || disabled,
+		"data-fs-account-saved-card-remove-trigger": "",
+		children: [children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.trigger" })), card ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
+			"data-fs-sr-only": "",
+			className: "sr-only",
+			children: card
+		})] }) : null]
+	});
+}
+function AccountSavedCardRemoveTitle({ $content, className, children, ...props }) {
+	useAccountSavedCardRemove();
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx(AlertDialogTitle, {
+		...props,
+		className,
+		"data-fs-account-saved-card-remove-title": "",
+		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.title" }))
+	});
+}
+function AccountSavedCardRemoveDescription({ $content, className, children, ...props }) {
+	useAccountSavedCardRemove();
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx(AlertDialogDescription, {
+		...props,
+		className,
+		"data-fs-account-saved-card-remove-description": "",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(CardSummary, {}),
+			" ",
+			resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.description" }))
+		] })
+	});
+}
+function AccountSavedCardRemoveCancel({ $content, className, children, disabled, ...props }) {
+	const { pending } = useAccountSavedCardRemove();
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx(AlertDialogClose, {
+		...props,
+		className,
+		disabled: pending || disabled,
+		"data-fs-account-saved-card-remove-cancel": "",
+		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.cancel" }))
+	});
+}
+function AccountSavedCardRemoveConfirm({ $content, className, children, onClick, ...props }) {
+	const { id, pending, close } = useAccountSavedCardRemove();
+	const { removal } = useAccountSavedCards();
+	const remove = useActionsOverride(void 0)?.savedCard?.remove;
+	const intl = useIntl();
+	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 ? resolveAuthoredCopy($content?.pendingText, intl.formatMessage({ id: "fs/saved-cards.remove.pending" })) : children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.confirm" }))
+	});
+}
+function feedbackOutcome(outcome) {
+	if (!outcome) return void 0;
+	if (outcome.kind === "removed") return "removed";
+	return outcome.code === "UNAUTHORIZED" ? "unauthorized" : "failed";
+}
+function AccountSavedCardsRemoveFeedback({ $content, className, ...props }) {
+	const { removal: { outcome } } = useAccountSavedCards();
+	const intl = useIntl();
+	const { path } = useStorefrontRoute();
+	const statusRef = useRef(null);
+	const kind = feedbackOutcome(outcome);
+	const successText = resolveAuthoredCopy($content?.successText, intl.formatMessage({ id: "fs/saved-cards.remove.success" }));
+	const [announcement, setAnnouncement] = useState("");
+	useEffect(() => {
+		const removed = outcome?.kind === "removed";
+		setAnnouncement(removed ? successText : "");
+		if (removed) statusRef.current?.focus();
+	}, [outcome, 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: [
+					resolveAuthoredCopy($content?.sessionExpiredText, intl.formatMessage({ id: "fs/saved-cards.session-expired" })),
+					" ",
+					/* @__PURE__ */ jsx(NavigationLink, {
+						href: signInTarget(path),
+						prefetch: false,
+						"data-fs-account-saved-cards-remove-feedback-sign-in": "",
+						children: resolveAuthoredCopy($content?.signInLabel, intl.formatMessage({ id: "fs/saved-cards.sign-in" }))
+					})
+				]
+			}) : null,
+			kind === "failed" ? /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				children: resolveAuthoredCopy($content?.failureText, intl.formatMessage({ id: "fs/saved-cards.remove.failed" }))
+			}) : 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