@vtex/faststore 0.0.5 → 0.0.6

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

@@ -0,0 +1,832 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../../particles/field/field.js";
+import { Icon } from "../../particles/icon/icon.js";
+import { Fieldset } from "../../particles/fieldset/fieldset.js";
+import { useCardCapture, useRegisterCardCapture } from "./card-capture.js";
+import { applyMask } from "../../particles/shared/input-mask.js";
+import "../../particles/document-field/document-field.js";
+import { SECURITY_CODE_MASK_STYLE, isSecurityCodeComplete } from "../../sdk/payment/security-code-mask.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/card-entry/card-entry.tsx
+/** Visual/attribute order used for first-invalid focus and the `data-fs-card-entry-field` values. */
+const FIELD_ATTR = {
+	number: "number",
+	holderName: "holder-name",
+	expiration: "expiration",
+	cvv: "cvv"
+};
+const VALIDATION_ORDER = [
+	"number",
+	"holderName",
+	"expiration",
+	"cvv"
+];
+const DEFAULT_VALIDATOR = {
+	numberMask: null,
+	numberRegex: null,
+	cvvMask: null,
+	cvvRegex: null,
+	cvvRequired: true,
+	expirationRequired: true,
+	holderNameRequired: true
+};
+const DEFAULT_NUMBER_MASK = "9999 9999 9999 9999";
+const DEFAULT_EXPIRATION_MASK = "99/99";
+const DEFAULT_CVV_MASK = "999";
+function countDigitSlots(mask) {
+	return mask.split("").filter((char) => char === "9").length;
+}
+/** Slot capacity of a (possibly pipe-delimited) mask — the widest alternative's count (F13). */
+function maskCapacity(mask) {
+	return Math.max(...mask.split("|").map(countDigitSlots));
+}
+/**
+* The narrowest alternative's slot count — `maskCapacity`'s floor, and the length at which a
+* security code counts as fully typed (T173).
+*
+* The ceiling is the right answer for truncation (`maskDigits` must let the widest alternative's
+* digits through) and the wrong one for masking: one method id can cover a 3-and-4-digit family with
+* a single `'999|9999'` mask, and a shopper holding the 3-digit card of that family never reaches a
+* fourth digit — so a ceiling-derived length leaves their complete, valid code legible for the rest
+* of the flow. `SavedCardCvvField` errs on the same side for the same reason. A malformed
+* alternative with no slots (`'999|'`) floors to zero, which masks from the first digit: early,
+* never late.
+*/
+function narrowestMaskCapacity(mask) {
+	return Math.min(...mask.split("|").map(countDigitSlots));
+}
+function toDigits(value) {
+	return value.replace(/\D/g, "");
+}
+/**
+* Strips non-digits, truncates to the mask's slot capacity, then applies it progressively. A
+* pipe-delimited mask (`applyMask` already selects among the alternatives internally) needs the
+* *widest* alternative's capacity here (F13) — counting `9`s across the whole pipe-joined string, as
+* before this fix, sums every alternative's slots instead of taking the largest one, letting far more
+* digits through than any single alternative can hold. Mirrors `document-field.tsx`'s own
+* `Math.max(...mask.split('|').map(countSlots))` for the identical reason.
+*/
+function maskDigits(rawValue, mask) {
+	const digitsOnly = toDigits(rawValue);
+	return applyMask(digitsOnly.slice(0, maskCapacity(mask)), mask);
+}
+/** A malformed store-configured regex is swallowed (treated as no match), never thrown. */
+function safeTest(pattern, value) {
+	try {
+		return new RegExp(pattern).test(value);
+	} catch {
+		return false;
+	}
+}
+/**
+* Relaxes a store's `numberRegex` so it matches on a BIN-length prefix instead of only once the
+* shopper has typed the network's full PAN length (F1, specs/card-entry.md Decision 1). T1's own
+* regexes are full-length anchored — the real Visa validator is `^4[0-9]{12}(?:[0-9]{3})?$` (13 or
+* 16 digits, exactly) — so testing the *whole* typed digit string against it as-is cannot resolve
+* before the last keystroke, and resolves intermittently for lengths in between (13 matches, 14–15
+* don't, 16 matches again): the badge, and every field gated on `detectedMethod`, flicker on, off,
+* and on again while the shopper is still typing. Dropping the trailing `$` and widening every
+* bounded repeat quantifier to also accept fewer repetitions (`{12}` → `{0,12}`, `{n,m}` → `{0,m}`,
+* `{n,}` → `{0,}`) keeps every *fixed* discriminating character exactly as strict as the store
+* configured (Mastercard's `[1-5]` second digit still requires that literal digit once typed), while
+* letting the length-representing tail resolve as soon as it's admissible rather than only once it's
+* complete. Live detection only — the unmodified regex is still what `validateDraft` re-tests at
+* submission time.
+*/
+function relaxForLiveDetection(pattern) {
+	return pattern.replace(/\$$/, "").replace(/\{(\d+)(,)?(\d+)?\}/g, (_match, min, hasComma, max) => hasComma && max === void 0 ? "{0,}" : `{0,${max ?? min}}`);
+}
+/** Every method whose *relaxed* (BIN-prefix) transform of `validator.numberRegex` admits `digits`. */
+function relaxedCandidates(methods, digits) {
+	return methods.filter((method) => method.validator.numberRegex && safeTest(relaxForLiveDetection(method.validator.numberRegex), digits));
+}
+/**
+* First method whose *exact*, unrelaxed `validator.numberRegex` matches `digits` in full — the same
+* test `validateDraft` re-runs at submission time.
+*/
+function exactMatch(methods, digits) {
+	return methods.find((method) => method.validator.numberRegex && safeTest(method.validator.numberRegex, digits)) ?? null;
+}
+/**
+* First method whose `validator.numberRegex` admits `digits` as a BIN-level prefix, or `null`.
+*
+* N1: relaxing every store regex into a pure prefix test (F1, above) means two networks whose fixed
+* prefixes *nest* — one network's whole discriminating prefix is itself a prefix of a different,
+* longer network's real PAN — both keep "relax-matching" once the shorter network's fixed prefix is
+* satisfied, including at the longer network's own full, syntactically valid length, where the exact,
+* unrelaxed regex alone correctly discriminates by length. Left as pure first-match-wins over the
+* relaxed test, the answer at full PAN length silently depends on which order the store's `methods`
+* happen to arrive in — something this component does not control.
+*
+* The fix tries the **exact** regex first, across every method in `methods` order, and only falls back
+* to the relaxed (prefix) match for input too short to satisfy any exact pattern yet. This restores the
+* exact regex's authority the instant a full PAN is present, which resolves the nesting-prefix case
+* above deterministically regardless of order. **It is not, however, order-independent in general**
+* (T22, V2): two configured networks' exact patterns can both match the very same full-length input —
+* e.g. a real Visa regex and an Elo BIN range both match `4011788888888888` (Elo is issued on
+* Visa-range BINs) — and `exactMatch` below is a plain `methods.find(...)`, so **the first exact match
+* in `methods` order wins the tie**. This is pre-existing (pre-N1 code used the same `find` over exact
+* regexes) and is not introduced or fixed by N1; N1 only shrank how much of the input space stays
+* order-dependent. A caller that needs a specific tie winner must order `methods` by specificity itself
+* before calling — this function does not infer specificity from a regex. See also `resolveNumberMask`
+* below: this function alone cannot help if the field's own mask capacity has already been capped
+* narrower than the digit count an exact match needs to resolve, and see `resolveNetworkMethod` below
+* `resolveNumberMask` (T22, V3/V4) for this component's own order-independent wrapper around the
+* *relaxed*-fallback branch, which this component's own call sites use instead of calling this function
+* directly.
+*/
+function detectNetworkMethod(methods, digits) {
+	if (!digits) return null;
+	return exactMatch(methods, digits) ?? relaxedCandidates(methods, digits)[0] ?? null;
+}
+/**
+* The number mask to apply for the currently typed `digits` (N1, part 2 — the mechanism Part 1 alone
+* cannot fix). Masking with only the single method `detectNetworkMethod` currently resolves to can cap
+* the field's capacity below what a *different*, still-relaxed-matching method would need once more
+* digits arrive — e.g. a 14-digit network's own mask, while the shopper is mid-typing a 19-digit
+* network whose fixed prefix nests inside the shorter one's. Once that happens, every keystroke past 14
+* truncates straight back down to 14 digits, forever — the shopper can never reach the length at which
+* the exact regex (Part 1, above) would resolve correctly, trading a cosmetic mis-mask for a hard block.
+*
+* Never resolves narrower than the widest `numberMask` among every method whose *relaxed* regex still
+* matches, so the field's capacity always keeps pace with the longest network still in contention; only
+* once a network drops out of contention (or an exact match resolves) does the mask narrow back down.
+*/
+function resolveNumberMask(methods, digits) {
+	const candidateMasks = relaxedCandidates(methods, digits).map((method) => method.validator.numberMask).filter((mask) => Boolean(mask));
+	if (candidateMasks.length === 0) return DEFAULT_NUMBER_MASK;
+	return candidateMasks.reduce((widest, mask) => maskCapacity(mask) > maskCapacity(widest) ? mask : widest);
+}
+/**
+* The method this component treats as "detected" at the current `digits` — the single source both the
+* render-scoped badge/validator and `handleNumberChange`'s dispatch decision read from, so the two can
+* never disagree (FR-2). See the banner above for why this is not `detectNetworkMethod(methods, digits)`
+* called directly: the exact-match branch here always uses `methods` in the store's own configured
+* order (T22-2 — ties are the store's call, never a derived signal), and the relaxed-fallback branch
+* only resolves when it is unambiguous, rather than silently favoring whichever candidate array order
+* happens to put first (T22-1).
+*/
+function resolveNetworkMethod(methods, digits) {
+	if (!digits) return null;
+	const exact = exactMatch(methods, digits);
+	if (exact) return exact;
+	const candidates = relaxedCandidates(methods, digits);
+	return candidates.length === 1 ? candidates[0] ?? null : null;
+}
+/** The length this component slices its BIN to — the same eight digits `gateway.ts` sends as the
+* payment body's BIN. */
+const BIN_LENGTH = 8;
+/**
+* The BIN a selection carries: the first `BIN_LENGTH` of `digits`, or `null` while `digits` holds
+* fewer — no selection is sent for a partial BIN. Callers pass the masked field's own digits, so "the
+* gate is open" and "the BIN is complete" are one fact. Exported for direct unit testing; the package
+* barrel (`src/components.ts`) does not re-export it.
+*/
+function resolveCompleteBin(digits) {
+	return digits.length >= BIN_LENGTH ? digits.slice(0, BIN_LENGTH) : null;
+}
+/**
+* Whether the N3/V4 effect should re-publish `detectedMethod` now that `draft.path` is `'new-card'`.
+*
+* - `previousPath === 'saved-card'`: only a genuine *return* from the saved-card detour re-dispatches —
+*   the very first activation transitions `null` → `'new-card'` too, and `handleNumberChange`'s own
+*   dispatch already covers that first selection; re-dispatching here as well would double-count it.
+* - `revealedByCardMode` (T191, FR-12): the other return — the card payment was collapsed on the
+*   previous commit and card mode is what brought it back. Omitted means it was not. Both returns share
+*   this one guard and the effect's one send, so they never both send for one commit.
+* - `detectedMethod !== null`: nothing to (re-)publish yet.
+* - `lastDispatched === null`: `handleNumberChange` has not already dispatched this exact commit (V4) —
+*   otherwise this would double-post the identical `{ methodId, bin }` pair.
+*/
+function shouldRedispatchOnReturnToNewCard({ previousPath, revealedByCardMode = false, detectedMethod, lastDispatched }) {
+	return (previousPath === "saved-card" || revealedByCardMode) && detectedMethod !== null && lastDispatched === null;
+}
+const NETWORK_ICON_BY_KEY = {
+	visa: "visa",
+	mastercard: "mastercard",
+	amex: "amex",
+	americanexpress: "amex",
+	diners: "diners",
+	dinersclub: "diners",
+	elo: "elo-card"
+};
+function networkIconName(name) {
+	const key = name.toLowerCase().replace(/[^a-z]/g, "");
+	return NETWORK_ICON_BY_KEY[key] ?? null;
+}
+/**
+* Standard Luhn checksum. Rejects non-digit strings and anything shorter than 12 digits — no real
+* card network issues a PAN shorter than that.
+*/
+function isValidLuhn(digits) {
+	if (digits.length < 12 || !/^\d+$/.test(digits)) return false;
+	let sum = 0;
+	let double = false;
+	for (let i = digits.length - 1; i >= 0; i -= 1) {
+		let digit = Number(digits[i]);
+		if (double) {
+			digit *= 2;
+			if (digit > 9) digit -= 9;
+		}
+		sum += digit;
+		double = !double;
+	}
+	return sum % 10 === 0;
+}
+const EXPIRATION_FORMAT = /^(0[1-9]|1[0-2])\/(\d{2})$/;
+/** `MM/YY` structural check: month 01–12, two-digit year. */
+function isExpirationFormatValid(value) {
+	return EXPIRATION_FORMAT.test(value);
+}
+/**
+* True when the printed `MM/YY` has not yet ended — cards are valid through the end of their
+* printed month. `now` is injectable for deterministic tests.
+*/
+function isExpirationInFuture(value, now = /* @__PURE__ */ new Date()) {
+	const match = EXPIRATION_FORMAT.exec(value);
+	if (!match) return false;
+	const month = Number(match[1]);
+	const year = 2e3 + Number(match[2]);
+	return new Date(year, month, 0, 23, 59, 59, 999).getTime() >= now.getTime();
+}
+/**
+* Normalizes a 4-digit-year expiration (`MM/YYYY`, e.g. from a browser/password-manager `cc-exp`
+* autofill, or the equivalent pasted digits) down to `MM/YY` before masking (F3) — mirrors
+* `gateway.ts`'s own `toDueDate` two-slice scheme (month = first two digits, year = last two).
+* Without this, the mask's blind 4-digit slot cap truncated `122030` (from an autofilled `12/2030`)
+* to `1220` — keeping the *first* two digits of the year instead of the last two — silently turning
+* a card valid through 2030 into one that reads as already expired in 2020.
+*
+* T172, Decision 5: the recombination applies to a genuine six-digit shape **only**. Applied to any
+* count above four — F3's original rule — it also claims the far more common overflow case: the
+* field already holds a complete `MM/YY` and the shopper types one more digit, so the raw value is
+* five digits (`12/25` + `9` → `12259`). Recombining that yields `12` + `59` = `12/59`: the year's
+* first digit is dropped, the second slides down a place, and the new digit takes the tens place — a
+* value the shopper never typed as a sequence, with no keystroke ever visibly refused.
+*
+* Digit count alone still separates the three real input shapes (typed digit-by-digit ≤ 4,
+* autofill/paste of `MM/YYYY` = 6, accidental overflow = anything else). Fix round 1 (review finding
+* #1): every other length refuses the keystroke by returning `previousDigits` — whatever the field
+* already held — rather than `digits.slice(0, 4)`. Slicing the *new* raw string only reconstructs the
+* original value when the intruding digit lands at the very end; caught anywhere else (e.g. the caret
+* placed right after the `/`), the first four characters of the new string mix a surviving old digit
+* with the intruding one, silently producing a date the shopper never typed or saw form (`12/30`,
+* caret after the `/`, types `9` → raw `12930` → `slice(0, 4)` = `1293` → `12/93`). Returning
+* `previousDigits` makes the refusal caret-position independent: the displayed value is provably
+* unchanged, not merely unchanged for the one caret position a naive slice happens to get right. No
+* known browser or password manager delivers `MM/YYYY` in anything but six digits; a future variant is
+* a deliberate, reviewed addition here rather than a silent gap.
+*/
+function normalizeExpirationDigits(digits, previousDigits) {
+	if (digits.length <= 4) return digits;
+	if (digits.length === 6) return `${digits.slice(0, 2)}${digits.slice(-2)}`;
+	return previousDigits;
+}
+function isValidCvv(value, validator) {
+	if (validator.cvvRegex) return safeTest(validator.cvvRegex, value);
+	return /^\d{3,4}$/.test(value);
+}
+/**
+* Whether network detection could ever resolve to `method`. A method with no `numberRegex` never can
+* (`resolveNetworkMethod`/`detectNetworkMethod` both require one): a promissory line of credit, a store
+* credit balance, or a card-group method configured without a pattern. Not the section's card
+* expression, `isCardMethod`, which counts that last one as a card (T191, Decision 1 and FR-14).
+*
+* Its one caller is `validateDraft`'s own `networkDetectionPossible` gate below (the F7/N2
+* validation-message fix) — a single call site reads as dead weight here, and it is not.
+*/
+function isCardShapedMethod(method) {
+	return Boolean(method.validator.numberRegex);
+}
+function validateDraft(draft, validator, methods, messages) {
+	const errors = {};
+	const digits = toDigits(draft.number);
+	const networkDetectionPossible = methods.some(isCardShapedMethod);
+	if (!digits) errors.number = messages.numberRequired;
+	else if (!isValidLuhn(digits)) errors.number = messages.numberInvalid;
+	else if (networkDetectionPossible && !(validator.numberRegex && safeTest(validator.numberRegex, digits))) errors.number = messages.numberInvalid;
+	if (validator.holderNameRequired && !draft.holderName.trim()) errors.holderName = messages.holderNameRequired;
+	if (validator.expirationRequired) {
+		if (!draft.expiration.trim()) errors.expiration = messages.expirationRequired;
+		else if (!isExpirationFormatValid(draft.expiration)) errors.expiration = messages.expirationInvalid;
+		else if (!isExpirationInFuture(draft.expiration)) errors.expiration = messages.expirationExpired;
+	}
+	if (validator.cvvRequired) {
+		if (!draft.cvv.trim()) errors.cvv = messages.cvvRequired;
+		else if (!isValidCvv(draft.cvv, validator)) errors.cvv = messages.cvvInvalid;
+	}
+	return errors;
+}
+const CARD_ENTRY_INVALID_DATA_CODE = "INVALID_CARD_DATA";
+const INVALID_CARD_DATA_ERROR = {
+	code: CARD_ENTRY_INVALID_DATA_CODE,
+	message: "Enter valid card details before placing the order."
+};
+/**
+* The submission and pre-flight refusal for a card form the shopper cannot currently see (T74,
+* Decision 5), and for a visible form's valid card under a persisted method that cannot take it: one
+* this section does not serve, one that is not a card (T191, FR-13), or another card network than the
+* typed number's (T191 fix round 1, finding R1). Distinct from `INVALID_CARD_DATA`: the card may be
+* perfectly valid — the section is simply not on a method this form can pay it with. A fourth
+* client-synthesized `CardCaptureError` in `matter/`, beside `CARD_ENTRY_INVALID_DATA_CODE`.
+*/
+const CARD_ENTRY_COLLAPSED_CODE = "CARD_ENTRY_COLLAPSED";
+const CARD_ENTRY_COLLAPSED_ERROR = {
+	code: CARD_ENTRY_COLLAPSED_CODE,
+	message: "This card is not available for the currently selected payment method."
+};
+const CardEntryDefinition = defineComponent({
+	name: "CardEntry",
+	importPath: "@vtex/faststore/components",
+	component: CardEntry,
+	requiresContext: "card-capture",
+	editor: {
+		label: "Card Entry",
+		category: "commerce"
+	},
+	schema: {
+		legend: {
+			type: "string",
+			default: "Card details",
+			label: "Legend"
+		},
+		numberLabel: {
+			type: "string",
+			default: "Card number",
+			label: "Number label"
+		},
+		numberPlaceholder: {
+			type: "string",
+			label: "Number placeholder"
+		},
+		holderNameLabel: {
+			type: "string",
+			default: "Cardholder name",
+			label: "Holder name label"
+		},
+		holderNamePlaceholder: {
+			type: "string",
+			label: "Holder name placeholder"
+		},
+		expirationLabel: {
+			type: "string",
+			default: "Expiration date",
+			label: "Expiration label"
+		},
+		expirationPlaceholder: {
+			type: "string",
+			default: "MM/YY",
+			label: "Expiration placeholder"
+		},
+		cvvLabel: {
+			type: "string",
+			default: "Security code",
+			label: "CVV label"
+		},
+		cvvPlaceholder: {
+			type: "string",
+			label: "CVV placeholder"
+		},
+		cvvDescription: {
+			type: "string",
+			default: "The 3-4 digit number on your card",
+			label: "CVV description"
+		},
+		numberRequiredMessage: {
+			type: "string",
+			default: "Card number is required",
+			label: "Number required message"
+		},
+		numberInvalidMessage: {
+			type: "string",
+			default: "Enter a valid card number",
+			label: "Number invalid message"
+		},
+		holderNameRequiredMessage: {
+			type: "string",
+			default: "Cardholder name is required",
+			label: "Holder name required message"
+		},
+		expirationRequiredMessage: {
+			type: "string",
+			default: "Expiration date is required",
+			label: "Expiration required message"
+		},
+		expirationInvalidMessage: {
+			type: "string",
+			default: "Enter a valid expiration date",
+			label: "Expiration invalid message"
+		},
+		expirationExpiredMessage: {
+			type: "string",
+			default: "This card has expired",
+			label: "Expiration expired message"
+		},
+		cvvRequiredMessage: {
+			type: "string",
+			default: "Security code is required",
+			label: "CVV required message"
+		},
+		cvvInvalidMessage: {
+			type: "string",
+			default: "Enter a valid security code",
+			label: "CVV invalid message"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "New-card entry: masked number with live network detection, holder name, expiration, and CVV, each shown and required per the detected network's validator config from the 'card-capture' context. Must be placed inside a card-capture provider: PaymentSectionRoot or PaymentSectionController at checkout. Owns the card values itself — it builds the card and hands it only to the submission target its provider supplies; no other component ever needs the card number or CVV. Card number and CVV are never schema props, fragment fields, or action payloads — do not add one. See card-entry.md."
+});
+function CardEntry({ legend = "Card details", numberLabel = "Card number", numberPlaceholder, holderNameLabel = "Cardholder name", holderNamePlaceholder, expirationLabel = "Expiration date", expirationPlaceholder = "MM/YY", cvvLabel = "Security code", cvvPlaceholder, cvvDescription = "The 3-4 digit number on your card", numberRequiredMessage = "Card number is required", numberInvalidMessage = "Enter a valid card number", holderNameRequiredMessage = "Cardholder name is required", expirationRequiredMessage = "Expiration date is required", expirationInvalidMessage = "Enter a valid expiration date", expirationExpiredMessage = "This card has expired", cvvRequiredMessage = "Security code is required", cvvInvalidMessage = "Enter a valid security code", disabled = false, className }) {
+	const { networks: methods, busy: placing, clearOn, onNetworkChange, selection } = useCardCapture();
+	const draftPath = selection?.path ?? null;
+	const draftBin = selection?.bin ?? null;
+	const collapsed = selection?.collapsed ?? false;
+	const cardModeActive = selection?.cardModeActive ?? false;
+	const selectedMethodId = selection?.selectedMethodId ?? null;
+	const selectionOutOfScope = selection?.selectionOutOfScope ?? false;
+	const selectionNonCard = selection?.selectionNonCard ?? false;
+	const selectMethod = selection?.selectMethod;
+	const validationMessages = useMemo(() => ({
+		numberRequired: numberRequiredMessage,
+		numberInvalid: numberInvalidMessage,
+		holderNameRequired: holderNameRequiredMessage,
+		expirationRequired: expirationRequiredMessage,
+		expirationInvalid: expirationInvalidMessage,
+		expirationExpired: expirationExpiredMessage,
+		cvvRequired: cvvRequiredMessage,
+		cvvInvalid: cvvInvalidMessage
+	}), [
+		numberRequiredMessage,
+		numberInvalidMessage,
+		holderNameRequiredMessage,
+		expirationRequiredMessage,
+		expirationInvalidMessage,
+		expirationExpiredMessage,
+		cvvRequiredMessage,
+		cvvInvalidMessage
+	]);
+	const [number, setNumber] = useState("");
+	const [holderName, setHolderName] = useState("");
+	const [expiration, setExpiration] = useState("");
+	const [cvv, setCvv] = useState("");
+	const [fieldErrors, setFieldErrors] = useState({});
+	const rootRef = useRef(null);
+	const lastDispatchedRef = useRef(null);
+	const previousDraftPathRef = useRef(draftPath);
+	const reportedNetworkIdRef = useRef(null);
+	const previousCollapsedRef = useRef(collapsed);
+	const digits = toDigits(number);
+	const detectedMethod = useMemo(() => resolveNetworkMethod(methods, digits), [methods, digits]);
+	const validator = detectedMethod?.validator ?? DEFAULT_VALIDATOR;
+	const selectionOtherNetwork = selectedMethodId !== null && detectedMethod !== null && detectedMethod.id !== selectedMethodId;
+	const detectedNetworkIcon = detectedMethod ? networkIconName(detectedMethod.name) : null;
+	const cvvComplete = isSecurityCodeComplete(cvv, narrowestMaskCapacity(validator.cvvMask ?? DEFAULT_CVV_MASK));
+	const detectedNetworkId = detectedMethod?.id ?? null;
+	useEffect(() => {
+		if (reportedNetworkIdRef.current === detectedNetworkId) return;
+		reportedNetworkIdRef.current = detectedNetworkId;
+		onNetworkChange?.(detectedNetworkId);
+	}, [detectedNetworkId, onNetworkChange]);
+	useEffect(() => {
+		const previousPath = previousDraftPathRef.current;
+		previousDraftPathRef.current = draftPath;
+		const revealedByCardMode = previousCollapsedRef.current && !collapsed && cardModeActive;
+		previousCollapsedRef.current = collapsed;
+		if (draftPath !== "new-card") {
+			lastDispatchedRef.current = null;
+			return;
+		}
+		if (!shouldRedispatchOnReturnToNewCard({
+			previousPath,
+			revealedByCardMode,
+			detectedMethod,
+			lastDispatched: lastDispatchedRef.current
+		}) || !detectedMethod) return;
+		const bin = resolveCompleteBin(digits);
+		if (bin === null) return;
+		lastDispatchedRef.current = {
+			methodId: detectedMethod.id,
+			bin
+		};
+		selectMethod?.({
+			methodId: detectedMethod.id,
+			bin
+		});
+	}, [
+		draftPath,
+		collapsed,
+		cardModeActive,
+		detectedMethod,
+		digits,
+		selectMethod
+	]);
+	useEffect(() => {
+		if (collapsed) {
+			setCvv("");
+			setFieldErrors((prev) => {
+				if (!("cvv" in prev)) return prev;
+				const next = { ...prev };
+				delete next.cvv;
+				return next;
+			});
+			lastDispatchedRef.current = null;
+		}
+	}, [collapsed]);
+	const focusField = useCallback((key) => {
+		(rootRef.current?.querySelector(`[data-fs-card-entry-field="${FIELD_ATTR[key]}"] input`))?.focus();
+	}, []);
+	function clearFieldError(key) {
+		setFieldErrors((prev) => {
+			if (!(key in prev)) return prev;
+			const next = { ...prev };
+			delete next[key];
+			return next;
+		});
+	}
+	function runFieldValidation(key, draftValue) {
+		const errors = validateDraft(draftValue, validator, methods, validationMessages);
+		setFieldErrors((prev) => {
+			const next = { ...prev };
+			if (errors[key]) next[key] = errors[key];
+			else delete next[key];
+			return next;
+		});
+	}
+	function handleNumberChange(event) {
+		const rawDigits = toDigits(event.target.value);
+		const matched = resolveNetworkMethod(methods, rawDigits);
+		const masked = maskDigits(rawDigits, resolveNumberMask(methods, rawDigits));
+		setNumber(masked);
+		clearFieldError("number");
+		const nextDigits = toDigits(masked);
+		if (nextDigits.length > 0 && draftPath !== "new-card") selection?.selectNewCard();
+		const bin = resolveCompleteBin(nextDigits);
+		if (matched) {
+			const last = lastDispatchedRef.current;
+			if (selection && bin !== null && (last?.methodId !== matched.id || last.bin !== bin || draftBin !== last.bin)) {
+				selection.setDraftBin(bin);
+				lastDispatchedRef.current = {
+					methodId: matched.id,
+					bin
+				};
+				selection.selectMethod({
+					methodId: matched.id,
+					bin
+				});
+			}
+		} else selection?.setDraftBin(null);
+	}
+	function handleNumberBlur() {
+		runFieldValidation("number", {
+			number,
+			holderName,
+			expiration,
+			cvv
+		});
+	}
+	function handleHolderNameChange(event) {
+		setHolderName(event.target.value);
+		clearFieldError("holderName");
+	}
+	function handleHolderNameBlur() {
+		runFieldValidation("holderName", {
+			number,
+			holderName,
+			expiration,
+			cvv
+		});
+	}
+	function handleExpirationChange(event) {
+		const digits = normalizeExpirationDigits(toDigits(event.target.value), toDigits(expiration));
+		setExpiration(maskDigits(digits, DEFAULT_EXPIRATION_MASK));
+		clearFieldError("expiration");
+	}
+	function handleExpirationBlur() {
+		runFieldValidation("expiration", {
+			number,
+			holderName,
+			expiration,
+			cvv
+		});
+	}
+	function handleCvvChange(event) {
+		setCvv(maskDigits(event.target.value, validator.cvvMask ?? DEFAULT_CVV_MASK));
+		clearFieldError("cvv");
+	}
+	function handleCvvBlur() {
+		runFieldValidation("cvv", {
+			number,
+			holderName,
+			expiration,
+			cvv
+		});
+	}
+	const checkDraft = useCallback(() => {
+		if (collapsed) return [CARD_ENTRY_COLLAPSED_ERROR];
+		const errors = validateDraft({
+			number,
+			holderName,
+			expiration,
+			cvv
+		}, validator, methods, validationMessages);
+		if (Object.keys(errors).length === 0) return selectionOutOfScope || selectionNonCard || selectionOtherNetwork ? [CARD_ENTRY_COLLAPSED_ERROR] : [];
+		setFieldErrors(errors);
+		const firstInvalid = VALIDATION_ORDER.find((key) => errors[key]);
+		if (firstInvalid) focusField(firstInvalid);
+		return [INVALID_CARD_DATA_ERROR];
+	}, [
+		collapsed,
+		number,
+		holderName,
+		expiration,
+		cvv,
+		validator,
+		methods,
+		focusField,
+		validationMessages,
+		selectionOutOfScope,
+		selectionNonCard,
+		selectionOtherNetwork
+	]);
+	const capture = useCallback(async (send) => {
+		const refusals = checkDraft();
+		if (refusals.length > 0) return refusals;
+		const card = {
+			number,
+			securityCode: cvv,
+			expirationDate: expiration,
+			holderName: holderName.trim()
+		};
+		let succeeded = false;
+		try {
+			const userErrors = await send(card);
+			succeeded = userErrors.length === 0;
+			return userErrors;
+		} finally {
+			if (succeeded || clearOn === "any-outcome") {
+				setNumber("");
+				setHolderName("");
+				setExpiration("");
+				setCvv("");
+			}
+		}
+	}, [
+		checkDraft,
+		number,
+		holderName,
+		expiration,
+		cvv,
+		clearOn
+	]);
+	useRegisterCardCapture(capture, checkDraft);
+	return /* @__PURE__ */ jsx("div", {
+		hidden: collapsed,
+		"data-fs-card-entry-collapse-boundary": "",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			className,
+			...placing || collapsed ? { inert: true } : {},
+			"aria-disabled": placing || void 0,
+			"data-fs-card-entry": "",
+			...placing ? { "data-fs-card-entry-placing": "" } : {},
+			...disabled ? { "data-fs-card-entry-disabled": "" } : {},
+			...collapsed ? { "data-fs-card-entry-collapsed": "" } : {},
+			children: /* @__PURE__ */ jsxs(Fieldset.Root, {
+				disabled: disabled || collapsed,
+				"data-fs-card-entry-fieldset": "",
+				children: [
+					/* @__PURE__ */ jsx(Fieldset.Legend, { children: legend }),
+					/* @__PURE__ */ jsx("div", {
+						"data-fs-card-entry-field": "number",
+						children: /* @__PURE__ */ jsxs(Field.Root, {
+							invalid: Boolean(fieldErrors.number),
+							disabled,
+							"data-fs-card-entry-number": "",
+							children: [
+								/* @__PURE__ */ jsx(Field.Label, { children: numberLabel }),
+								/* @__PURE__ */ jsxs("div", {
+									"data-fs-card-entry-number-control": "",
+									children: [/* @__PURE__ */ jsx(Field.Control, {
+										name: "cardNumber",
+										inputMode: "numeric",
+										autoComplete: "cc-number",
+										placeholder: numberPlaceholder,
+										value: number,
+										onChange: handleNumberChange,
+										onBlur: handleNumberBlur,
+										disabled
+									}), detectedMethod ? /* @__PURE__ */ jsx("div", {
+										"data-fs-card-entry-networks": "",
+										children: /* @__PURE__ */ jsx("span", {
+											"data-fs-card-entry-network": "",
+											"data-fs-card-entry-network-id": detectedMethod.id,
+											children: detectedNetworkIcon ? /* @__PURE__ */ jsx(Icon, {
+												name: detectedNetworkIcon,
+												"data-fs-card-entry-network-icon": ""
+											}) : /* @__PURE__ */ jsx("span", {
+												"data-fs-card-entry-network-fallback": "",
+												children: detectedMethod.name
+											})
+										})
+									}) : null]
+								}),
+								fieldErrors.number ? /* @__PURE__ */ jsx(Field.Error, {
+									match: true,
+									children: fieldErrors.number
+								}) : null
+							]
+						})
+					}),
+					validator.holderNameRequired ? /* @__PURE__ */ jsx("div", {
+						"data-fs-card-entry-field": "holder-name",
+						children: /* @__PURE__ */ jsxs(Field.Root, {
+							invalid: Boolean(fieldErrors.holderName),
+							disabled,
+							children: [
+								/* @__PURE__ */ jsx(Field.Label, { children: holderNameLabel }),
+								/* @__PURE__ */ jsx(Field.Control, {
+									name: "holderName",
+									autoComplete: "cc-name",
+									placeholder: holderNamePlaceholder,
+									value: holderName,
+									onChange: handleHolderNameChange,
+									onBlur: handleHolderNameBlur,
+									disabled
+								}),
+								fieldErrors.holderName ? /* @__PURE__ */ jsx(Field.Error, {
+									match: true,
+									children: fieldErrors.holderName
+								}) : null
+							]
+						})
+					}) : null,
+					validator.expirationRequired ? /* @__PURE__ */ jsx("div", {
+						"data-fs-card-entry-field": "expiration",
+						children: /* @__PURE__ */ jsxs(Field.Root, {
+							invalid: Boolean(fieldErrors.expiration),
+							disabled,
+							children: [
+								/* @__PURE__ */ jsx(Field.Label, { children: expirationLabel }),
+								/* @__PURE__ */ jsx(Field.Control, {
+									name: "expiration",
+									inputMode: "numeric",
+									autoComplete: "cc-exp",
+									placeholder: expirationPlaceholder,
+									value: expiration,
+									onChange: handleExpirationChange,
+									onBlur: handleExpirationBlur,
+									disabled
+								}),
+								fieldErrors.expiration ? /* @__PURE__ */ jsx(Field.Error, {
+									match: true,
+									children: fieldErrors.expiration
+								}) : null
+							]
+						})
+					}) : null,
+					validator.cvvRequired ? /* @__PURE__ */ jsx("div", {
+						"data-fs-card-entry-field": "cvv",
+						children: /* @__PURE__ */ jsxs(Field.Root, {
+							invalid: Boolean(fieldErrors.cvv),
+							disabled,
+							children: [
+								/* @__PURE__ */ jsx(Field.Label, { children: cvvLabel }),
+								/* @__PURE__ */ jsx(Field.Control, {
+									name: "cvv",
+									type: "text",
+									inputMode: "numeric",
+									autoComplete: "cc-csc",
+									placeholder: cvvPlaceholder,
+									value: cvv,
+									onChange: handleCvvChange,
+									onBlur: handleCvvBlur,
+									disabled,
+									style: cvvComplete ? SECURITY_CODE_MASK_STYLE : void 0
+								}),
+								cvvDescription ? /* @__PURE__ */ jsx(Field.Description, {
+									"data-fs-card-entry-cvv-description": "",
+									children: cvvDescription
+								}) : null,
+								fieldErrors.cvv ? /* @__PURE__ */ jsx(Field.Error, {
+									match: true,
+									children: fieldErrors.cvv
+								}) : null
+							]
+						})
+					}) : null
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { CARD_ENTRY_COLLAPSED_CODE, CARD_ENTRY_INVALID_DATA_CODE, CardEntry, CardEntryDefinition, NETWORK_ICON_BY_KEY, detectNetworkMethod, isExpirationFormatValid, isExpirationInFuture, isValidLuhn, resolveCompleteBin, resolveNetworkMethod, shouldRedispatchOnReturnToNewCard };
+
+//# sourceMappingURL=card-entry.js.map