@vtex/faststore 0.0.7 → 0.0.10

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

@@ -8,6 +8,7 @@ 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 { ownValue } from "../../utils/own-value.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/card-entry/card-entry.tsx
@@ -211,11 +212,11 @@ const NETWORK_ICON_BY_KEY = {
 	americanexpress: "amex",
 	diners: "diners",
 	dinersclub: "diners",
-	elo: "elo-card"
+	elo: "elo-card",
+	discover: "discover"
 };
 function networkIconName(name) {
-	const key = name.toLowerCase().replace(/[^a-z]/g, "");
-	return NETWORK_ICON_BY_KEY[key] ?? null;
+	return ownValue(NETWORK_ICON_BY_KEY, name.toLowerCase().replaceAll(/[^a-z]/g, "")) ?? null;
 }
 /**
 * Standard Luhn checksum. Rejects non-digit strings and anything shorter than 12 digits — no real
@@ -301,24 +302,45 @@ function isValidCvv(value, validator) {
 function isCardShapedMethod(method) {
 	return Boolean(method.validator.numberRegex);
 }
-function validateDraft(draft, validator, methods, messages) {
-	const errors = {};
+/**
+* Whether a typed number is a well-formed card that no configured network accepts (T47, Decision 1): it is
+* Luhn-valid, detection could have run (at least one method carries a `numberRegex`, the N2 rule), no
+* network's exact pattern matches the digits, and no network claims them even as a BIN-level prefix. A prefix
+* a network claims at the wrong length, or one two networks claim, is a malformed number rather than an
+* unaccepted one and stays `false`. Pure: reads nothing but its arguments, and returns a boolean.
+*/
+function matchesNoConfiguredNetwork(methods, digits) {
+	return isValidLuhn(digits) && methods.some(isCardShapedMethod) && exactMatch(methods, digits) === null && relaxedCandidates(methods, digits).length === 0;
+}
+function validateNumber(draft, validator, methods, messages) {
 	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;
+	if (!digits) return { number: messages.numberRequired };
+	if (!isValidLuhn(digits)) return { number: messages.numberInvalid };
+	if (networkDetectionPossible && !(validator.numberRegex && safeTest(validator.numberRegex, digits))) return { number: matchesNoConfiguredNetwork(methods, digits) ? messages.networkNotAccepted : messages.numberInvalid };
+	return {};
+}
+function validateExpiration(draft, validator, messages) {
+	if (!validator.expirationRequired) return {};
+	if (!draft.expiration.trim()) return { expiration: messages.expirationRequired };
+	if (!isExpirationFormatValid(draft.expiration)) return { expiration: messages.expirationInvalid };
+	if (!isExpirationInFuture(draft.expiration)) return { expiration: messages.expirationExpired };
+	return {};
+}
+function validateCvv(draft, validator, messages) {
+	if (!validator.cvvRequired) return {};
+	if (!draft.cvv.trim()) return { cvv: messages.cvvRequired };
+	if (!isValidCvv(draft.cvv, validator)) return { cvv: messages.cvvInvalid };
+	return {};
+}
+function validateDraft(draft, validator, methods, messages) {
+	const holderNameError = validator.holderNameRequired && !draft.holderName.trim() ? { holderName: messages.holderNameRequired } : {};
+	return {
+		...validateNumber(draft, validator, methods, messages),
+		...holderNameError,
+		...validateExpiration(draft, validator, messages),
+		...validateCvv(draft, validator, messages)
+	};
 }
 const CARD_ENTRY_INVALID_DATA_CODE = "INVALID_CARD_DATA";
 const INVALID_CARD_DATA_ERROR = {
@@ -338,6 +360,18 @@ const CARD_ENTRY_COLLAPSED_ERROR = {
 	code: CARD_ENTRY_COLLAPSED_CODE,
 	message: "This card is not available for the currently selected payment method."
 };
+/**
+* The refusal for a well-formed card number no configured network accepts (T47, Decision 2). Minted here,
+* not in `use-place-order.ts`, because `CARD_FIELD_PATTERN` forbids the word "card" anywhere in that file:
+* the hook only passes along whatever refusal a registered explainer names. Fixed copy and a fixed code —
+* nothing derived from the typed number (digits, BIN, last four, length, a guessed network) may ever be
+* added to the message or to a log line.
+*/
+const CARD_ENTRY_UNSUPPORTED_NETWORK_CODE = "UNSUPPORTED_CARD_NETWORK";
+const UNSUPPORTED_NETWORK_ERROR = {
+	code: CARD_ENTRY_UNSUPPORTED_NETWORK_CODE,
+	message: "This card is not from a network the store accepts. Use another card or choose another payment method."
+};
 const CardEntryDefinition = defineComponent({
 	name: "CardEntry",
 	importPath: "@vtex/faststore/components",
@@ -406,6 +440,11 @@ const CardEntryDefinition = defineComponent({
 			default: "Enter a valid card number",
 			label: "Number invalid message"
 		},
+		networkNotAcceptedMessage: {
+			type: "string",
+			default: "This card is not from a network the store accepts",
+			label: "Network not accepted message"
+		},
 		holderNameRequiredMessage: {
 			type: "string",
 			default: "Cardholder name is required",
@@ -444,7 +483,7 @@ const CardEntryDefinition = defineComponent({
 	},
 	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 }) {
+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", networkNotAcceptedMessage = "This card is not from a network the store accepts", 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;
@@ -457,6 +496,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	const validationMessages = useMemo(() => ({
 		numberRequired: numberRequiredMessage,
 		numberInvalid: numberInvalidMessage,
+		networkNotAccepted: networkNotAcceptedMessage,
 		holderNameRequired: holderNameRequiredMessage,
 		expirationRequired: expirationRequiredMessage,
 		expirationInvalid: expirationInvalidMessage,
@@ -466,6 +506,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	}), [
 		numberRequiredMessage,
 		numberInvalidMessage,
+		networkNotAcceptedMessage,
 		holderNameRequiredMessage,
 		expirationRequiredMessage,
 		expirationInvalidMessage,
@@ -641,7 +682,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		setFieldErrors(errors);
 		const firstInvalid = VALIDATION_ORDER.find((key) => errors[key]);
 		if (firstInvalid) focusField(firstInvalid);
-		return [INVALID_CARD_DATA_ERROR];
+		return [matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : INVALID_CARD_DATA_ERROR];
 	}, [
 		collapsed,
 		number,
@@ -650,6 +691,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		cvv,
 		validator,
 		methods,
+		digits,
 		focusField,
 		validationMessages,
 		selectionOutOfScope,
@@ -658,7 +700,10 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	]);
 	const capture = useCallback(async (send) => {
 		const refusals = checkDraft();
-		if (refusals.length > 0) return refusals;
+		if (refusals.length > 0) return {
+			reachedGateway: false,
+			userErrors: refusals
+		};
 		const card = {
 			number,
 			securityCode: cvv,
@@ -667,9 +712,9 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		};
 		let succeeded = false;
 		try {
-			const userErrors = await send(card);
-			succeeded = userErrors.length === 0;
-			return userErrors;
+			const result = await send(card);
+			succeeded = result.userErrors.length === 0;
+			return result;
 		} finally {
 			if (succeeded || clearOn === "any-outcome") {
 				setNumber("");
@@ -686,7 +731,12 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		cvv,
 		clearOn
 	]);
-	useRegisterCardCapture(capture, checkDraft);
+	const explainMissingMethod = useCallback(() => !collapsed && matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : null, [
+		collapsed,
+		methods,
+		digits
+	]);
+	useRegisterCardCapture(capture, checkDraft, explainMissingMethod);
 	return /* @__PURE__ */ jsx("div", {
 		hidden: collapsed,
 		"data-fs-card-entry-collapse-boundary": "",
@@ -828,6 +878,6 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	});
 }
 //#endregion
-export { CARD_ENTRY_COLLAPSED_CODE, CARD_ENTRY_INVALID_DATA_CODE, CardEntry, CardEntryDefinition, NETWORK_ICON_BY_KEY, detectNetworkMethod, isExpirationFormatValid, isExpirationInFuture, isValidLuhn, resolveCompleteBin, resolveNetworkMethod, shouldRedispatchOnReturnToNewCard };
+export { CARD_ENTRY_COLLAPSED_CODE, CARD_ENTRY_INVALID_DATA_CODE, CARD_ENTRY_UNSUPPORTED_NETWORK_CODE, CardEntry, CardEntryDefinition, NETWORK_ICON_BY_KEY, detectNetworkMethod, isExpirationFormatValid, isExpirationInFuture, isValidLuhn, matchesNoConfiguredNetwork, resolveCompleteBin, resolveNetworkMethod, shouldRedispatchOnReturnToNewCard };
 
 //# sourceMappingURL=card-entry.js.map