@tesouro/embedded-components-react 0.3.61 → 0.3.62

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index8.js

@@ -2,187 +2,20 @@
 "use client";
 "use client";
 "use client";
-import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { EmbeddedToaster as t } from "../../../shared/ui/dist/lib/EmbeddedToaster.js";
-import "../../../shared/ui/dist/index.js";
-import { useAnalyticsTrack as n } from "../../../shared/feature/dist/lib/analytics/hooks.js";
-import { WidgetProvider as r } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
-import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
-import { CardProgram as s } from "../../../shared/feature/dist/lib/card/cardProgram.js";
-import "../../../shared/feature/dist/index.js";
-import { resolveCardDetailsFeatureLabels as c } from "./index5.js";
-import { CardDetailsWidgetAnalyticsEvent as l, WIDGET_NAME as u } from "./index2.js";
-import { copyTextToClipboard as d, formatCardNumber as f, formatExpirationDate as p } from "./index3.js";
-import { CardProgramValidity as m, resolveCanRevealCredentials as h, resolveCardDetailsPanelState as ee, resolveCardDetailsPresentation as te, resolveCardDetailsRevealState as ne, resolveCardProgramValidity as re } from "./index4.js";
-import { useCreditCardDetailsQuery as ie } from "../../data-access/dist/index6.js";
-import { useDebitCardCredentialsQuery as g } from "../../data-access/dist/index7.js";
-import { useDebitCardDetailsQuery as _ } from "../../data-access/dist/index8.js";
-import "../../data-access/dist/index.js";
-import { CardDetailsPanel as ae } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
-import { ActivateCardPanel as v } from "../../ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js";
-import "../../ui/dist/index.js";
-import { useActivateCard as y } from "./index7.js";
-import { useCallback as b, useEffect as x, useMemo as S, useState as C } from "react";
-import { Fragment as w, jsx as T, jsxs as oe } from "react/jsx-runtime";
+import { useCallback as e, useRef as t, useState as n } from "react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index8.js
-function E({ cardId: r, cardProgram: u, onClose: E, labels: D, activateLabels: se, featureLabels: O, bankLogoSrc: k, bankLogoAlt: A }) {
-	let j = n(), M = o(), N = i(), { initResponse: ce } = a();
-	x(() => {
-		j(l.Mounted);
-	}, [j]);
-	let P = S(() => c(O), [O]), F = re(u), I = u === s.Credit, L = u === s.Debit, R = ie({
-		cardId: r,
-		enabled: I
-	}), z = _({
-		cardId: r,
-		enabled: L
-	}), { data: B, isError: V, isNotFound: H, refetch: U } = I ? R : z, W = ee({
-		programValidity: F,
-		isNotFound: H,
-		isError: !!M || V,
-		hasCard: !!B
-	});
-	x(() => {
-		if (F === m.Supported) return;
-		let e = `"${s.Credit}" or "${s.Debit}"`;
-		console.error(F === m.Missing ? `[CardDetailsWidget] cardProgram is required and was not set. Pass ${e} — it selects which card program to read, so there is no default. No card was fetched.` : `[CardDetailsWidget] cardProgram must be ${e}, received ${JSON.stringify(u)}. No card was fetched.`);
-	}, [u, F]);
-	let [le, G] = C(), K = le === r;
-	x(() => {
-		G(void 0);
-	}, [r]);
-	let q = h({
-		panelState: W,
-		cardProgram: u,
-		cardStatus: B?.cardStatus
-	});
-	x(() => {
-		K && !q && G(void 0);
-	}, [K, q]);
-	let J = g({
-		cardId: r,
-		enabled: q && K
-	}), Y = ne({
-		isRevealRequested: K,
-		isError: J.isError,
-		hasCredentials: !!J.data
-	}), X = S(() => W === "loaded" && B ? te({
-		card: B,
-		cardProgram: u,
-		labels: P
-	}) : void 0, [
-		B,
-		u,
-		P,
-		W
-	]), ue = b(async (t) => {
-		await d(t) && (e.success(P.copySuccessToast), j(l.ValueCopied));
-	}, [P.copySuccessToast, j]), Z = y({
-		cardId: r,
-		cardProgram: u,
-		card: W === "loaded" ? B : void 0,
-		scopes: ce?.scopes,
-		conflictToast: P.activationConflictToast
-	}), { refetch: Q } = J, de = b(() => {
-		if (K) {
-			Q();
-			return;
-		}
-		G(r);
-	}, [
-		r,
-		K,
-		Q
-	]), fe = b(() => {
-		G(void 0);
-	}, []), pe = b(() => {
-		G(void 0), E?.();
-	}, [E]), me = S(() => J.isForbidden ? {
-		...D,
-		credentials: {
-			...D?.credentials,
-			errorDescription: P.revealNotPermittedDescription
-		}
-	} : D, [
-		J.isForbidden,
-		D,
-		P.revealNotPermittedDescription
-	]), $ = S(() => {
-		if (!(Y !== "revealed" || !J.data)) return {
-			cardNumber: f(J.data.pan),
-			expirationDate: p(J.data.expirationDate),
-			securityCode: J.data.cvv
-		};
-	}, [J.data, Y]), he = b(() => {
-		if (M) {
-			N();
-			return;
-		}
-		U();
-	}, [
-		U,
-		N,
-		M
-	]);
-	return /* @__PURE__ */ oe(w, { children: [/* @__PURE__ */ T(t, {}), Z.isOpen ? /* @__PURE__ */ T(v, {
-		labels: se,
-		state: Z.state,
-		values: Z.values,
-		errors: Z.errors,
-		isSubmitDisabled: Z.isSubmitDisabled,
-		onValuesChange: Z.onValuesChange,
-		onSubmit: Z.onSubmit,
-		onClose: Z.close,
-		bankLogoSrc: k,
-		bankLogoAlt: A,
-		cardholderName: X?.cardholderName,
-		maskedCardNumber: X?.maskedCardNumber,
-		programLabel: X?.programLabel
-	}) : /* @__PURE__ */ T(ae, {
-		labels: me,
-		state: W,
-		nickname: X?.nickname,
-		statusLabel: X?.statusLabel,
-		statusTone: X?.statusTone,
-		formFactorLabel: X?.formFactorLabel,
-		onClose: E ? pe : void 0,
-		bankLogoSrc: k,
-		bankLogoAlt: A,
-		cardholderName: X?.cardholderName,
-		maskedCardNumber: X?.maskedCardNumber,
-		programLabel: X?.programLabel,
-		allowedCategories: X?.allowedCategories,
-		spendLimitLabels: X?.spendLimitLabels,
-		perTransactionMaxLabel: X?.perTransactionMaxLabel,
-		onCopy: ue,
-		onActivate: Z.canActivate ? Z.open : void 0,
-		onViewCard: q ? de : void 0,
-		onHideCard: q ? fe : void 0,
-		revealState: Y,
-		revealedCardNumber: $?.cardNumber,
-		revealedExpirationDate: $?.expirationDate,
-		revealedSecurityCode: $?.securityCode,
-		onRetry: F === m.Supported ? he : void 0
-	})] });
-}
-function D({ baseUrl: e, widgetToken: t, organizationId: n, configClient: i, gatewayRouting: a, linkComponent: o, implementation: s, uiFramework: c, errorFallback: l, onError: d, analytics: f, disclosuresAcceptance: p, providerLabels: m, ...h }) {
-	return /* @__PURE__ */ T(r, {
-		widgetName: u,
-		baseUrl: e,
-		widgetToken: t,
-		organizationId: n,
-		configClient: i,
-		gatewayRouting: a,
-		linkComponent: o,
-		implementation: s,
-		uiFramework: c,
-		errorFallback: l,
-		onError: d,
-		analytics: f,
-		disclosuresAcceptance: p,
-		providerLabels: m,
-		children: /* @__PURE__ */ T(E, { ...h })
-	});
+function r({ id: r, reset: i }) {
+	let a = t(null), [o, s] = n(r);
+	return r !== o && (s(r), a.current = null, i()), {
+		claim: e(() => {
+			let e = Symbol("card request");
+			return a.current = e, e;
+		}, []),
+		release: e(() => {
+			a.current = null;
+		}, []),
+		isStale: e((e) => a.current !== e, [])
+	};
 }
 //#endregion
-export { D as CardDetailsWidget, D as default };
+export { r as useIdScopedRequest };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index9.js

@@ -0,0 +1,113 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { isApiConflictError as t } from "../../../shared/data-access/dist/lib/isApiConflictError.js";
+import { isApiUnprocessableError as n } from "../../../shared/data-access/dist/lib/isApiUnprocessableError.js";
+import "../../../shared/data-access/dist/index.js";
+import "../../../shared/ui/dist/index.js";
+import { CardProgram as r } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import "../../../shared/feature/dist/index.js";
+import { canActivateCard as i, toCardFaceExpirationDate as a } from "./index7.js";
+import { useIdScopedRequest as o } from "./index8.js";
+import { useActivateCreditCardMutation as s, useActivateDebitCardMutation as c } from "../../data-access/dist/index4.js";
+import { useVerifyDebitCardMutation as l } from "../../data-access/dist/index11.js";
+import "../../data-access/dist/index.js";
+import { ActivateCardFormError as u, EMPTY_ACTIVATE_CARD_FORM_VALUES as d, validateActivateCardForm as f } from "../../ui/dist/lib/ActivateCardPanel/validation.js";
+import "../../ui/dist/index.js";
+import { useCallback as p, useEffect as m, useMemo as h, useState as g } from "react";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index9.js
+function _({ cardId: _, cardProgram: v, card: y, scopes: b, conflictToast: x }) {
+	let [S, C] = g(!1), [w, T] = g(d), [E, D] = g("idle"), [O, k] = g(!1), { claim: A, release: j, isStale: M } = o({
+		id: _,
+		reset: () => {
+			C(!1), T(d), D("idle"), k(!1);
+		}
+	}), { mutateAsync: N } = l(), { mutateAsync: P } = s(), { mutateAsync: F } = c(), I = i({
+		card: y,
+		cardProgram: v,
+		scopes: b
+	}), L = h(() => f(w), [w]), R = h(() => ({
+		...L.errors,
+		...O ? { form: u.VerificationRejected } : {}
+	}), [O, L.errors]), z = p(() => {
+		C(!0);
+	}, []), B = p(() => {
+		C(!1), j(), T(d), D("idle"), k(!1);
+	}, [j]), V = p((e) => {
+		T((t) => ({
+			...t,
+			...e
+		}));
+	}, []);
+	m(() => {
+		!S || I || E !== "succeeded" && E !== "submitting" && (e.error(x), B());
+	}, [
+		I,
+		B,
+		x,
+		S,
+		E
+	]);
+	let H = p(async () => {
+		if (!I || !f(w).isValid) return;
+		let i = v === r.Credit, o = v === r.Debit;
+		if (!i && !o) return;
+		D("submitting"), k(!1);
+		let s = A();
+		try {
+			if (o) {
+				let e = a(w.expirationDate);
+				if (!e) {
+					D("errored");
+					return;
+				}
+				await N({
+					path: { id: _ },
+					body: {
+						expirationDate: e,
+						cvv: w.securityCode
+					}
+				});
+			}
+			if (M(s) || (i ? await P({ path: { id: _ } }) : await F({ path: { id: _ } }), M(s))) return;
+			D("succeeded");
+		} catch (r) {
+			if (M(s)) return;
+			if (t(r)) {
+				e.error(x), B();
+				return;
+			}
+			n(r) && k(!0), D("errored");
+		}
+	}, [
+		P,
+		F,
+		I,
+		_,
+		v,
+		A,
+		B,
+		x,
+		M,
+		w,
+		N
+	]), U = p(() => {
+		H();
+	}, [H]);
+	return {
+		canActivate: I,
+		isOpen: S,
+		open: z,
+		close: B,
+		values: w,
+		errors: R,
+		state: E,
+		isSubmitDisabled: !I || !L.isValid || E === "submitting",
+		onValuesChange: V,
+		onSubmit: U
+	};
+}
+//#endregion
+export { _ as useActivateCard };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js

@@ -5,133 +5,136 @@
 import { Button as e, Input as t, Label as n, Separator as r, Spinner as i, Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c, cn as l } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { InlineErrorAlert as u } from "../../../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
 import "../../../../../shared/ui/dist/index.js";
-import { cardDetailsWidgetUiTestIds as d } from "../CardDetailsPanel/testIds.js";
-import { CardFace as f } from "../CardDetailsPanel/CardFace.js";
-import { resolveActivateCardPanelLabels as p } from "./labels.js";
-import { ActivateCardFieldError as m, ActivateCardFormError as h, EMPTY_ACTIVATE_CARD_FORM_VALUES as g, formatDigitsInput as _, formatExpirationDateInput as v } from "./validation.js";
-import { ActivateCardSuccessView as y } from "./ActivateCardSuccessView.js";
-import { FieldError as b } from "./FieldError.js";
-import { useId as x, useMemo as S } from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { ChevronRightIcon as T, HelpCircleIcon as E, XIcon as D } from "lucide-react";
+import { CardFace as d } from "../CardDetailsPanel/CardFace.js";
+import { resolveActivateCardPanelLabels as f } from "./labels.js";
+import { ActivateCardFieldError as p, ActivateCardFormError as m, EMPTY_ACTIVATE_CARD_FORM_VALUES as h, formatDigitsInput as g, formatExpirationDateInput as _ } from "./validation.js";
+import { ActivateCardSuccessView as v } from "./ActivateCardSuccessView.js";
+import { FieldError as y } from "./FieldError.js";
+import { useId as b, useMemo as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { ChevronRightIcon as w, HelpCircleIcon as T, XIcon as E } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js
-var O = {};
-function k(e, t) {
+var D = {};
+function O(e, t) {
 	switch (e) {
-		case m.ImpossibleMonth: return t.impossibleMonth;
-		case m.PastExpiration: return t.pastExpiration;
-		case h.VerificationRejected: return t.verificationRejected;
+		case p.ImpossibleMonth: return t.impossibleMonth;
+		case p.PastExpiration: return t.pastExpiration;
+		case m.VerificationRejected: return t.verificationRejected;
 		default: return;
 	}
 }
-function A({ labels: m, state: h = "idle", values: A = g, onValuesChange: j, errors: M = O, isSubmitDisabled: N = !0, onSubmit: P, onClose: F, bankLogoSrc: I, bankLogoAlt: L, cardholderName: R, maskedCardNumber: z, programLabel: B, className: V }) {
-	let H = S(() => p(m), [m]), U = x(), W = x(), G = x(), K = x(), q = h === "submitting", J = k(M.expirationDate, H.validation), Y = k(M.form, H.validation);
-	return /* @__PURE__ */ w("div", {
-		"data-testid": d.activatePanel,
+function k({ labels: p, state: m = "idle", values: k = h, onValuesChange: A, errors: j = D, isSubmitDisabled: M = !0, onSubmit: N, onClose: P, bankLogoSrc: F, bankLogoAlt: I, cardholderName: L, maskedCardNumber: R, programLabel: z, testIds: B, className: V }) {
+	let H = x(() => f(p), [p]), U = b(), W = b(), G = b(), K = b(), q = m === "submitting", J = O(j.expirationDate, H.validation), Y = O(j.form, H.validation);
+	return /* @__PURE__ */ C("div", {
+		"data-testid": B?.root,
 		className: l("ttw:flex ttw:w-full ttw:flex-col", V),
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C("div", {
 			className: "ttw:flex ttw:items-start ttw:gap-1.5 ttw:px-4 ttw:pt-4 ttw:pb-3",
-			children: [/* @__PURE__ */ C("h2", {
+			children: [/* @__PURE__ */ S("h2", {
 				className: "ttw:min-w-0 ttw:flex-1 ttw:text-2xl ttw:font-semibold ttw:tracking-[-0.6px] ttw:text-foreground",
 				children: H.header.title
-			}), F ? /* @__PURE__ */ C(e, {
+			}), P ? /* @__PURE__ */ S(e, {
 				type: "button",
 				variant: "ghost",
 				size: "icon",
 				className: "ttw:size-8 ttw:shrink-0",
 				"aria-label": H.header.closeAriaLabel,
-				onClick: F,
-				children: /* @__PURE__ */ C(D, { className: "ttw:size-4" })
+				onClick: P,
+				children: /* @__PURE__ */ S(E, { className: "ttw:size-4" })
 			}) : null]
-		}), h === "succeeded" ? /* @__PURE__ */ C(y, { labels: H.status }) : /* @__PURE__ */ w("form", {
+		}), m === "succeeded" ? /* @__PURE__ */ S(v, {
+			labels: H.status,
+			testIds: B?.successView
+		}) : /* @__PURE__ */ C("form", {
 			noValidate: !0,
 			onSubmit: (e) => {
-				e.preventDefault(), !(N || q) && P?.();
+				e.preventDefault(), !(M || q) && N?.();
 			},
 			className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:px-4 ttw:pb-4",
 			children: [
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ S("div", {
 					className: "ttw:flex ttw:justify-center",
-					children: /* @__PURE__ */ C(f, {
-						bankLogoSrc: I,
-						bankLogoAlt: L ?? H.cardFace.bankLogoAlt,
-						cardholderName: R ?? "",
-						maskedCardNumber: z ?? "",
-						programLabel: B ?? ""
+					children: /* @__PURE__ */ S(d, {
+						bankLogoSrc: F,
+						bankLogoAlt: I ?? H.cardFace.bankLogoAlt,
+						cardholderName: L ?? "",
+						maskedCardNumber: R ?? "",
+						programLabel: z ?? "",
+						testIds: B?.cardFace
 					})
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ C("div", {
 					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
 					children: [
-						/* @__PURE__ */ C(n, {
+						/* @__PURE__ */ S(n, {
 							htmlFor: U,
 							className: "ttw:text-sm ttw:font-medium",
 							children: H.fields.expirationDate
 						}),
-						/* @__PURE__ */ C(t, {
+						/* @__PURE__ */ S(t, {
 							id: U,
-							value: A.expirationDate,
+							value: k.expirationDate,
 							placeholder: H.fields.expirationDatePlaceholder,
 							disabled: q,
 							inputMode: "numeric",
 							autoComplete: "off",
 							"aria-invalid": J ? !0 : void 0,
 							"aria-describedby": J ? W : void 0,
-							onChange: (e) => j?.({ expirationDate: v(e.target.value) })
+							onChange: (e) => A?.({ expirationDate: _(e.target.value) })
 						}),
-						/* @__PURE__ */ C(b, {
+						/* @__PURE__ */ S(y, {
 							id: W,
 							message: J
 						})
 					]
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ C("div", {
 					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
 					children: [
-						/* @__PURE__ */ w("div", {
+						/* @__PURE__ */ C("div", {
 							className: "ttw:flex ttw:items-center ttw:gap-1.5",
-							children: [/* @__PURE__ */ C(n, {
+							children: [/* @__PURE__ */ S(n, {
 								htmlFor: G,
 								className: "ttw:text-sm ttw:font-medium",
 								children: H.fields.securityCode
-							}), /* @__PURE__ */ C(s, { children: /* @__PURE__ */ w(a, { children: [/* @__PURE__ */ C(c, {
+							}), /* @__PURE__ */ S(s, { children: /* @__PURE__ */ C(a, { children: [/* @__PURE__ */ S(c, {
 								type: "button",
 								className: "ttw:inline-flex ttw:shrink-0 ttw:cursor-help ttw:text-muted-foreground",
 								"aria-label": H.fields.securityCodeInfoAriaLabel,
-								children: /* @__PURE__ */ C(E, { className: "ttw:size-4" })
-							}), /* @__PURE__ */ C(o, {
+								children: /* @__PURE__ */ S(T, { className: "ttw:size-4" })
+							}), /* @__PURE__ */ S(o, {
 								className: "ttw:max-w-xs",
 								children: H.fields.securityCodeInfo
 							})] }) })]
 						}),
-						/* @__PURE__ */ C(t, {
+						/* @__PURE__ */ S(t, {
 							id: G,
-							value: A.securityCode,
+							value: k.securityCode,
 							placeholder: H.fields.securityCodePlaceholder,
 							"aria-describedby": K,
 							disabled: q,
 							inputMode: "numeric",
 							autoComplete: "off",
 							maxLength: 4,
-							onChange: (e) => j?.({ securityCode: _(e.target.value, 4) })
+							onChange: (e) => A?.({ securityCode: g(e.target.value, 4) })
 						}),
-						/* @__PURE__ */ C("span", {
+						/* @__PURE__ */ S("span", {
 							id: K,
 							className: "ttw:sr-only",
 							children: H.fields.securityCodeInfo
 						})
 					]
 				}),
-				/* @__PURE__ */ C(r, {}),
-				h === "errored" || Y ? /* @__PURE__ */ C(u, { children: Y ?? H.status.errorDescription }) : null,
-				/* @__PURE__ */ w(e, {
+				/* @__PURE__ */ S(r, {}),
+				m === "errored" || Y ? /* @__PURE__ */ S(u, { children: Y ?? H.status.errorDescription }) : null,
+				/* @__PURE__ */ C(e, {
 					type: "submit",
 					className: "ttw:w-full",
-					disabled: N || q,
+					disabled: M || q,
 					children: [
-						q ? /* @__PURE__ */ C(i, { "aria-label": H.status.submittingAriaLabel }) : null,
+						q ? /* @__PURE__ */ S(i, { "aria-label": H.status.submittingAriaLabel }) : null,
 						H.status.submit,
-						/* @__PURE__ */ C(T, { className: "ttw:size-4" })
+						/* @__PURE__ */ S(w, { className: "ttw:size-4" })
 					]
 				})
 			]
@@ -139,4 +142,4 @@ function A({ labels: m, state: h = "idle", values: A = g, onValuesChange: j, err
 	});
 }
 //#endregion
-export { A as ActivateCardPanel };
+export { k as ActivateCardPanel };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardSuccessView.js

@@ -1,27 +1,26 @@
-import { cardDetailsWidgetUiTestIds as e } from "../CardDetailsPanel/testIds.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { CheckIcon as r } from "lucide-react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { CheckIcon as n } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardSuccessView.js
-function i({ labels: i }) {
-	return /* @__PURE__ */ n("div", {
-		"data-testid": e.activateSuccess,
+function r({ labels: r, testIds: i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-testid": i?.root,
 		className: "ttw:flex ttw:flex-col ttw:items-center ttw:gap-3 ttw:px-4 ttw:py-10 ttw:text-center",
 		children: [
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ e("div", {
 				"aria-hidden": "true",
 				className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-lg ttw:bg-emerald-700 ttw:text-white",
-				children: /* @__PURE__ */ t(r, { className: "ttw:size-5" })
+				children: /* @__PURE__ */ e(n, { className: "ttw:size-5" })
 			}),
-			/* @__PURE__ */ t("h3", {
+			/* @__PURE__ */ e("h3", {
 				className: "ttw:text-lg ttw:font-semibold ttw:text-foreground",
-				children: i.successTitle
+				children: r.successTitle
 			}),
-			/* @__PURE__ */ t("p", {
+			/* @__PURE__ */ e("p", {
 				className: "ttw:max-w-sm ttw:text-sm ttw:text-muted-foreground",
-				children: i.successDescription
+				children: r.successDescription
 			})
 		]
 	});
 }
 //#endregion
-export { i as ActivateCardSuccessView };
+export { r as ActivateCardSuccessView };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardCredentialsFace.js

@@ -1,33 +1,36 @@
 import { cn as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { cardDetailsWidgetUiTestIds as t } from "./testIds.js";
-import { CARD_FACE_SURFACE_CLASS_NAME as n } from "./cardFaceSurface.js";
-import { CardFaceGlow as r } from "./CardFaceGlow.js";
-import { CardCredentialRow as i } from "./CardCredentialRow.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { CARD_FACE_SURFACE_CLASS_NAME as t } from "./cardFaceSurface.js";
+import { CardFaceGlow as n } from "./CardFaceGlow.js";
+import { CardCredentialRow as r } from "./CardCredentialRow.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardCredentialsFace.js
-function s({ labels: s, cardNumber: c, expirationDate: l, securityCode: u, onCopy: d, className: f }) {
-	return /* @__PURE__ */ o("div", {
-		"data-testid": t.credentialsFace,
-		className: e(n, "ttw:justify-center ttw:gap-4", f),
+function o({ labels: o, cardNumber: s, expirationDate: c, securityCode: l, isLocked: u, onCopy: d, testIds: f, className: p }) {
+	return /* @__PURE__ */ a("div", {
+		"data-testid": f?.root,
+		className: e(t, "ttw:justify-center ttw:gap-4", p),
 		children: [
-			/* @__PURE__ */ a(r, {}),
-			/* @__PURE__ */ a(i, {
-				label: s.cardNumber,
-				value: c,
-				copyAriaLabel: s.copyCardNumberAriaLabel,
+			/* @__PURE__ */ i(n, {}),
+			u ? /* @__PURE__ */ i("div", {
+				"data-testid": f?.lockedOverlay,
+				className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:bg-black/55"
+			}) : null,
+			/* @__PURE__ */ i(r, {
+				label: o.cardNumber,
+				value: s,
+				copyAriaLabel: o.copyCardNumberAriaLabel,
 				onCopy: d
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ a("div", {
 				className: "ttw:relative ttw:grid ttw:grid-cols-2 ttw:gap-3",
-				children: [/* @__PURE__ */ a(i, {
-					label: s.expirationDate,
-					value: l,
-					copyAriaLabel: s.copyExpirationDateAriaLabel,
+				children: [/* @__PURE__ */ i(r, {
+					label: o.expirationDate,
+					value: c,
+					copyAriaLabel: o.copyExpirationDateAriaLabel,
 					onCopy: d
-				}), /* @__PURE__ */ a(i, {
-					label: s.securityCode,
-					value: u,
-					copyAriaLabel: s.copySecurityCodeAriaLabel,
+				}), /* @__PURE__ */ i(r, {
+					label: o.securityCode,
+					value: l,
+					copyAriaLabel: o.copySecurityCodeAriaLabel,
 					onCopy: d
 				})]
 			})
@@ -35,4 +38,4 @@ function s({ labels: s, cardNumber: c, expirationDate: l, securityCode: u, onCop
 	});
 }
 //#endregion
-export { s as CardCredentialsFace };
+export { o as CardCredentialsFace };