@tesouro/embedded-components-react 0.3.36 → 0.3.38

package/README.md

@@ -272,19 +272,19 @@ One page of an organization's credit **or** debit cards, with a scope-gated "Sho
 
 ### CardDetailsWidget
 
-Read-only details for one credit **or** debit card — status, form factor, program, masked card number, and copyable cardholder and nickname rows. It renders panel content rather than its own drawer, so it sits on a page of your own as readily as inside chrome you already have.
+Read-only details for one credit **or** debit card — status, form factor, program, masked card number, and copyable cardholder and nickname rows. A debit card can also reveal its number, expiry and security code on demand. It renders panel content rather than its own drawer, so it sits on a page of your own as readily as inside chrome you already have.
 
 #### Props
 
-| Prop             | Type                                    | Default        | Description                                                                                                                                       |
-| ---------------- | --------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cardId`         | `string`                                | **Required**   | Id of the card to show.                                                                                                                           |
-| `cardProgram`    | `'credit' \| 'debit'`                   | **Required**   | Which issuing program `cardId` belongs to. Selects the endpoint the card is fetched from.                                                         |
-| `onClose`        | `() => void`                            | `undefined`    | Called when the header's close control is pressed. Omit it and no close control is rendered at all.                                               |
-| `labels`         | `PartialDeep<CardDetailsWidgetLabels>`  | English labels | Overrides the panel's own copy — header, card face alt text, row headings, copy-button accessible names, and the loading/error/not-found screens. |
-| `featureLabels`  | `PartialDeep<CardDetailsFeatureLabels>` | English labels | Overrides the copy this widget resolves rather than passes through — status, form-factor and program vocabulary, plus the copy-success toast.     |
-| `bankLogoSrc`    | `string`                                | `undefined`    | Bank logo for the card face. Omit and the face renders without a logo rather than with a placeholder.                                             |
-| `bankLogoAlt`    | `string`                                | `undefined`    | Alt text for `bankLogoSrc`. Falls back to `labels.cardFace.bankLogoAlt`.                                                                          |
+| Prop             | Type                                    | Default        | Description                                                                                                                                                               |
+| ---------------- | --------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cardId`         | `string`                                | **Required**   | Id of the card to show.                                                                                                                                                   |
+| `cardProgram`    | `'credit' \| 'debit'`                   | **Required**   | Which issuing program `cardId` belongs to. Selects the endpoint the card is fetched from.                                                                                 |
+| `onClose`        | `() => void`                            | `undefined`    | Called when the header's close control is pressed. Omit it and no close control is rendered at all.                                                                       |
+| `labels`         | `PartialDeep<CardDetailsWidgetLabels>`  | English labels | Overrides the panel's own copy — header, card face alt text, row headings, copy-button accessible names, and the loading/error/not-found screens.                         |
+| `featureLabels`  | `PartialDeep<CardDetailsFeatureLabels>` | English labels | Overrides the copy this widget resolves rather than passes through — status, form-factor and program vocabulary, the copy-success toast, and the refused-reveal sentence. |
+| `bankLogoSrc`    | `string`                                | `undefined`    | Bank logo for the card face. Omit and the face renders without a logo rather than with a placeholder.                                                                     |
+| `bankLogoAlt`    | `string`                                | `undefined`    | Alt text for `bankLogoSrc`. Falls back to `labels.cardFace.bankLogoAlt`.                                                                                                  |
 
 ### CreateCardWidget
 

package/dist/index.d.ts

@@ -456,6 +456,11 @@ type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
 type DisclosureRequirement = 'NOT_REQUIRED' | 'REQUIRED';
 type OrganizationType = 'BANK' | 'EMBEDDED' | 'PLATFORM' | 'TRANSACTOR' | 'VERTICAL_SOFTWARE_PROVIDER';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 type WidgetInitResponse = {
     bankName?: null | string;
     /**
@@ -2160,7 +2165,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -2235,12 +2244,34 @@ type PartialDeep$3<T> = {
 interface CardDetailsFeatureLabels {
     /** Confirmation toast after a copy affordance writes to the clipboard. */
     copySuccessToast: string;
+    /**
+     * Replaces the panel's generic reveal error when the credentials call was
+     * refused (HTTP 403).
+     *
+     * It lives here rather than on the panel because deciding that a failure was a
+     * refusal means reading the error, which is this layer's job — the panel is
+     * handed one already-chosen sentence either way, and its own
+     * `credentials.errorDescription` still covers every other failure.
+     *
+     * The wording deliberately does not tell the reader to ask for a permission.
+     * Reading a debit card and reading its credentials take the same scope, so a
+     * reader looking at this panel already holds it; a 403 here means the call was
+     * refused for this session, which asking an admin for a role will not fix.
+     */
+    revealNotPermittedDescription: string;
     /** Program wording on the card face, keyed on the widget's `cardProgram`. */
     programLabels: Record<CardProgram, string>;
     /** Status badge wording, keyed on the generated card status. */
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/lib/CardDetailsWidget.d.ts

@@ -21,7 +21,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -396,6 +400,11 @@ type ClientOptions = {
 };
 type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -764,12 +773,34 @@ type PartialDeep<T> = {
 interface CardDetailsFeatureLabels {
     /** Confirmation toast after a copy affordance writes to the clipboard. */
     copySuccessToast: string;
+    /**
+     * Replaces the panel's generic reveal error when the credentials call was
+     * refused (HTTP 403).
+     *
+     * It lives here rather than on the panel because deciding that a failure was a
+     * refusal means reading the error, which is this layer's job — the panel is
+     * handed one already-chosen sentence either way, and its own
+     * `credentials.errorDescription` still covers every other failure.
+     *
+     * The wording deliberately does not tell the reader to ask for a permission.
+     * Reading a debit card and reading its credentials take the same scope, so a
+     * reader looking at this panel already holds it; a 403 here means the call was
+     * refused for this session, which asking an admin for a role will not fix.
+     */
+    revealNotPermittedDescription: string;
     /** Program wording on the card face, keyed on the widget's `cardProgram`. */
     programLabels: Record<CardProgram, string>;
     /** Status badge wording, keyed on the generated card status. */
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/lib/CardsWidget.d.ts

@@ -436,6 +436,11 @@ type ClientOptions = {
 };
 type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -776,7 +781,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -851,12 +860,34 @@ type PartialDeep$2<T> = {
 interface CardDetailsFeatureLabels {
     /** Confirmation toast after a copy affordance writes to the clipboard. */
     copySuccessToast: string;
+    /**
+     * Replaces the panel's generic reveal error when the credentials call was
+     * refused (HTTP 403).
+     *
+     * It lives here rather than on the panel because deciding that a failure was a
+     * refusal means reading the error, which is this layer's job — the panel is
+     * handed one already-chosen sentence either way, and its own
+     * `credentials.errorDescription` still covers every other failure.
+     *
+     * The wording deliberately does not tell the reader to ask for a permission.
+     * Reading a debit card and reading its credentials take the same scope, so a
+     * reader looking at this panel already holds it; a 403 here means the call was
+     * refused for this session, which asking an admin for a role will not fix.
+     */
+    revealNotPermittedDescription: string;
     /** Program wording on the card face, keyed on the widget's `cardProgram`. */
     programLabels: Record<CardProgram, string>;
     /** Status badge wording, keyed on the generated card status. */
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index.js

@@ -1,4 +1,5 @@
 import "./index2.js";
 import { useCreditCardDetailsQuery as e } from "./index4.js";
-import { useDebitCardDetailsQuery as t } from "./index5.js";
-export { e as useCreditCardDetailsQuery, t as useDebitCardDetailsQuery };
+import { useDebitCardCredentialsQuery as t } from "./index5.js";
+import { useDebitCardDetailsQuery as n } from "./index6.js";
+export { e as useCreditCardDetailsQuery, t as useDebitCardCredentialsQuery, n as useDebitCardDetailsQuery };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index5.js

@@ -4,22 +4,29 @@
 "use client";
 import { useEmbedApi as e } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
 import { organizationHeaders as t } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
-import { getDebitCardByIdOptions as n } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { getDebitCardCredentialsOptions as n } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
 import { withAuthEpoch as r } from "../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import { isApiForbiddenError as i } from "../../../shared/data-access/dist/lib/isApiForbiddenError.js";
 import "../../../shared/data-access/dist/index.js";
-import { withNotFoundOutcome as i } from "./index3.js";
 import { useQuery as a } from "@tanstack/react-query";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index5.js
 function o({ cardId: o, enabled: s }) {
-	let { client: c, organizationId: l, widgetToken: u, authEpoch: d } = e(), f = n({
+	let { client: c, organizationId: l, widgetToken: u, authEpoch: d } = e(), f = !!(o && l && u) && s, p = f ? o ?? "" : "", m = n({
 		client: c,
 		headers: t(l),
-		path: { id: o ?? "" }
-	}), p = a({
-		...r(f, d),
-		enabled: !!(o && l && u) && s !== !1
+		path: { id: p }
+	}), h = a({
+		...r(m, d),
+		enabled: f,
+		staleTime: 0,
+		gcTime: 0,
+		retry: !1,
+		placeholderData: void 0
 	});
-	return i(p);
+	return {
+		...h,
+		isForbidden: h.isError && i(h.error)
+	};
 }
 //#endregion
-export { o as useDebitCardDetailsQuery };
+export { o as useDebitCardCredentialsQuery };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index6.js

@@ -0,0 +1,25 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { useEmbedApi as e } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as t } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
+import { getDebitCardByIdOptions as n } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as r } from "../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import "../../../shared/data-access/dist/index.js";
+import { withNotFoundOutcome as i } from "./index3.js";
+import { useQuery as a } from "@tanstack/react-query";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index6.js
+function o({ cardId: o, enabled: s }) {
+	let { client: c, organizationId: l, widgetToken: u, authEpoch: d } = e(), f = n({
+		client: c,
+		headers: t(l),
+		path: { id: o ?? "" }
+	}), p = a({
+		...r(f, d),
+		enabled: !!(o && l && u) && s !== !1
+	});
+	return i(p);
+}
+//#endregion
+export { o as useDebitCardDetailsQuery };

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

@@ -1,10 +1,30 @@
+import { amountOutputToMajorUnits as e } from "../../../shared/util/dist/lib/amountOutputToMajorUnits.js";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index3.js
-var e = "••••";
-function t(t) {
-	let n = t.trim().slice(-4);
-	return n ? `${e} ${e} ${e} ${n}` : "";
+var t = "••••";
+function n(e) {
+	let n = e.trim().slice(-4);
+	return n ? `${t} ${t} ${t} ${n}` : "";
 }
-async function n(e) {
+function r(e) {
+	let t = e.replace(/\s+/g, "");
+	return t ? (t.match(/.{1,4}/g) ?? []).join(" ") : "";
+}
+function i(e) {
+	let t = e.trim();
+	if (!t) return "";
+	let n = /^(\d{4})-(\d{2})(?:\D|$)/.exec(t);
+	if (n) {
+		let [, e, t] = n;
+		return `${t}/${e.slice(-2)}`;
+	}
+	let r = /^(\d{2})\/(\d{2}|\d{4})$/.exec(t);
+	if (r) {
+		let [, e, t] = r;
+		return `${e}/${t.slice(-2)}`;
+	}
+	return t;
+}
+async function a(e) {
 	if (!e.trim()) return !1;
 	try {
 		return await navigator.clipboard.writeText(e), !0;
@@ -12,5 +32,15 @@ async function n(e) {
 		return !1;
 	}
 }
+function o({ amountLimit: t, currencyCode: n }) {
+	let r = e({
+		value: t,
+		currencyCode: n
+	});
+	if (Number.isFinite(r)) return new Intl.NumberFormat(void 0, {
+		style: "currency",
+		currency: n
+	}).format(r);
+}
 //#endregion
-export { n as copyTextToClipboard, t as maskCardNumber };
+export { a as copyTextToClipboard, r as formatCardNumber, i as formatExpirationDate, o as formatVelocityControlAmount, n as maskCardNumber };

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

@@ -1,30 +1,53 @@
 import { CardProgram as e } from "../../../shared/feature/dist/lib/card/cardProgram.js";
 import { CARD_STATUS_TONE as t } from "../../../shared/feature/dist/lib/card/cardPresentation.js";
 import "../../../shared/feature/dist/index.js";
-import { maskCardNumber as n } from "./index3.js";
+import { formatVelocityControlAmount as n, maskCardNumber as r } from "./index3.js";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index4.js
-var r = {
+var i = {
 	Supported: "supported",
 	Missing: "missing",
 	Unsupported: "unsupported"
 };
-function i(t) {
-	return t === e.Credit || t === e.Debit ? r.Supported : t == null ? r.Missing : r.Unsupported;
+function a(t) {
+	return t === e.Credit || t === e.Debit ? i.Supported : t == null ? i.Missing : i.Unsupported;
 }
-function a({ programValidity: e, isNotFound: t, isError: n, hasCard: i }) {
-	return e === r.Supported ? t ? "notFound" : i ? "loaded" : n ? "error" : "loading" : "error";
+function o({ programValidity: e, isNotFound: t, isError: n, hasCard: r }) {
+	return e === i.Supported ? t ? "notFound" : r ? "loaded" : n ? "error" : "loading" : "error";
 }
-function o({ card: e, cardProgram: r, labels: i }) {
+var s = "PENDING_ACTIVATION";
+function c({ panelState: t, cardProgram: n, cardStatus: r }) {
+	return t !== "loaded" || n !== e.Debit || r === void 0 ? !1 : r !== s;
+}
+function l({ isRevealRequested: e, isError: t, hasCredentials: n }) {
+	return e ? t ? "errored" : n ? "revealed" : "revealing" : "hidden";
+}
+function u({ card: e, cardProgram: n, labels: i }) {
 	let a = e.cardholderName.trim(), o = e.nickname?.trim();
 	return {
 		statusLabel: i.statusLabels[e.cardStatus],
 		statusTone: t[e.cardStatus],
 		formFactorLabel: i.formFactorLabels[e.cardType],
-		programLabel: i.programLabels[r],
-		maskedCardNumber: n(e.lastFourDigits),
+		programLabel: i.programLabels[n],
+		maskedCardNumber: r(e.lastFourDigits),
 		cardholderName: a || void 0,
-		nickname: o || void 0
+		nickname: o || void 0,
+		allowedCategories: d(e.mccGroups),
+		...f(e.velocityControls, i)
+	};
+}
+function d(e) {
+	let t = (e ?? []).filter((e) => e.active).map((e) => e.name);
+	return t.length ? t : void 0;
+}
+function f(e, t) {
+	let r = (e ?? []).filter((e) => e.active && !e.mcc && !e.mccGroup), i = r.filter((e) => e.velocityWindow !== "TRANSACTION").map((e) => {
+		let r = n(e);
+		return r ? `${r} / ${t.velocityWindowLabels[e.velocityWindow]}` : void 0;
+	}).filter((e) => !!e), a = r.find((e) => e.velocityWindow === "TRANSACTION");
+	return {
+		spendLimitLabels: i.length ? i : void 0,
+		perTransactionMaxLabel: a ? n(a) : void 0
 	};
 }
 //#endregion
-export { r as CardProgramValidity, a as resolveCardDetailsPanelState, o as resolveCardDetailsPresentation, i as resolveCardProgramValidity };
+export { i as CardProgramValidity, c as resolveCanRevealCredentials, o as resolveCardDetailsPanelState, u as resolveCardDetailsPresentation, l as resolveCardDetailsRevealState, a as resolveCardProgramValidity };

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

@@ -4,12 +4,20 @@ import "../../../shared/feature/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js
 var r = {
 	copySuccessToast: "Copied to clipboard",
+	revealNotPermittedDescription: "This card's details can't be shown for this session.",
 	programLabels: {
 		[e.Credit]: "Business credit",
 		[e.Debit]: "Business debit"
 	},
 	statusLabels: t,
-	formFactorLabels: n
+	formFactorLabels: n,
+	velocityWindowLabels: {
+		DAY: "day",
+		WEEK: "week",
+		MONTH: "month",
+		LIFETIME: "lifetime",
+		TRANSACTION: "transaction"
+	}
 };
 function i(e) {
 	return {
@@ -26,6 +34,10 @@ function i(e) {
 		formFactorLabels: {
 			...r.formFactorLabels,
 			...e?.formFactorLabels
+		},
+		velocityWindowLabels: {
+			...r.velocityWindowLabels,
+			...e?.velocityWindowLabels
 		}
 	};
 }

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

@@ -12,79 +12,138 @@ import { CardProgram as o } from "../../../shared/feature/dist/lib/card/cardProg
 import "../../../shared/feature/dist/index.js";
 import { resolveCardDetailsFeatureLabels as s } from "./index5.js";
 import { CardDetailsWidgetAnalyticsEvent as c, WIDGET_NAME as l } from "./index2.js";
-import { copyTextToClipboard as u } from "./index3.js";
-import { CardProgramValidity as d, resolveCardDetailsPanelState as f, resolveCardDetailsPresentation as p, resolveCardProgramValidity as m } from "./index4.js";
-import { useCreditCardDetailsQuery as h } from "../../data-access/dist/index4.js";
-import { useDebitCardDetailsQuery as g } from "../../data-access/dist/index5.js";
+import { copyTextToClipboard as u, formatCardNumber as d, formatExpirationDate as f } from "./index3.js";
+import { CardProgramValidity as p, resolveCanRevealCredentials as m, resolveCardDetailsPanelState as h, resolveCardDetailsPresentation as ee, resolveCardDetailsRevealState as te, resolveCardProgramValidity as g } from "./index4.js";
+import { useCreditCardDetailsQuery as _ } from "../../data-access/dist/index4.js";
+import { useDebitCardCredentialsQuery as v } from "../../data-access/dist/index5.js";
+import { useDebitCardDetailsQuery as y } from "../../data-access/dist/index6.js";
 import "../../data-access/dist/index.js";
-import { CardDetailsPanel as _ } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
+import { CardDetailsPanel as b } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
 import "../../ui/dist/index.js";
-import { useCallback as v, useEffect as y, useMemo as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useCallback as x, useEffect as S, useMemo as C, useState as ne } from "react";
+import { Fragment as w, jsx as T, jsxs as re } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js
-function w({ cardId: r, cardProgram: l, onClose: w, labels: T, featureLabels: E, bankLogoSrc: D, bankLogoAlt: O }) {
-	let k = n(), A = a(), j = i();
-	y(() => {
-		k(c.Mounted);
-	}, [k]);
-	let M = b(() => s(E), [E]), N = m(l), P = l === o.Credit, F = l === o.Debit, I = h({
+function E({ cardId: r, cardProgram: l, onClose: E, labels: D, featureLabels: O, bankLogoSrc: k, bankLogoAlt: A }) {
+	let j = n(), M = a(), N = i();
+	S(() => {
+		j(c.Mounted);
+	}, [j]);
+	let P = C(() => s(O), [O]), F = g(l), I = l === o.Credit, L = l === o.Debit, R = _({
 		cardId: r,
-		enabled: P
-	}), L = g({
+		enabled: I
+	}), z = y({
 		cardId: r,
-		enabled: F
-	}), { data: R, isError: z, isNotFound: B, refetch: V } = P ? I : L, H = f({
-		programValidity: N,
-		isNotFound: B,
-		isError: !!A || z,
-		hasCard: !!R
+		enabled: L
+	}), { data: B, isError: V, isNotFound: H, refetch: U } = I ? R : z, W = h({
+		programValidity: F,
+		isNotFound: H,
+		isError: !!M || V,
+		hasCard: !!B
 	});
-	y(() => {
-		if (N === d.Supported) return;
+	S(() => {
+		if (F === p.Supported) return;
 		let e = `"${o.Credit}" or "${o.Debit}"`;
-		console.error(N === d.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(l)}. No card was fetched.`);
-	}, [l, N]);
-	let U = b(() => H === "loaded" && R ? p({
-		card: R,
+		console.error(F === p.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(l)}. No card was fetched.`);
+	}, [l, F]);
+	let [G, K] = ne(), q = G === r;
+	S(() => {
+		K(void 0);
+	}, [r]);
+	let J = m({
+		panelState: W,
 		cardProgram: l,
-		labels: M
+		cardStatus: B?.cardStatus
+	});
+	S(() => {
+		q && !J && K(void 0);
+	}, [q, J]);
+	let Y = v({
+		cardId: r,
+		enabled: J && q
+	}), X = te({
+		isRevealRequested: q,
+		isError: Y.isError,
+		hasCredentials: !!Y.data
+	}), Z = C(() => W === "loaded" && B ? ee({
+		card: B,
+		cardProgram: l,
+		labels: P
 	}) : void 0, [
-		R,
+		B,
 		l,
-		M,
-		H
-	]), W = v(async (t) => {
-		await u(t) && (e.success(M.copySuccessToast), k(c.ValueCopied));
-	}, [M.copySuccessToast, k]), G = v(() => {
-		if (A) {
-			j();
+		P,
+		W
+	]), ie = x(async (t) => {
+		await u(t) && (e.success(P.copySuccessToast), j(c.ValueCopied));
+	}, [P.copySuccessToast, j]), { refetch: Q } = Y, ae = x(() => {
+		if (q) {
+			Q();
+			return;
+		}
+		K(r);
+	}, [
+		r,
+		q,
+		Q
+	]), oe = x(() => {
+		K(void 0);
+	}, []), se = x(() => {
+		K(void 0), E?.();
+	}, [E]), ce = C(() => Y.isForbidden ? {
+		...D,
+		credentials: {
+			...D?.credentials,
+			errorDescription: P.revealNotPermittedDescription
+		}
+	} : D, [
+		Y.isForbidden,
+		D,
+		P.revealNotPermittedDescription
+	]), $ = C(() => {
+		if (!(X !== "revealed" || !Y.data)) return {
+			cardNumber: d(Y.data.pan),
+			expirationDate: f(Y.data.expirationDate),
+			securityCode: Y.data.cvv
+		};
+	}, [Y.data, X]), le = x(() => {
+		if (M) {
+			N();
 			return;
 		}
-		V();
+		U();
 	}, [
-		V,
-		j,
-		A
+		U,
+		N,
+		M
 	]);
-	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(t, {}), /* @__PURE__ */ S(_, {
-		labels: T,
-		state: H,
-		nickname: U?.nickname,
-		statusLabel: U?.statusLabel,
-		statusTone: U?.statusTone,
-		formFactorLabel: U?.formFactorLabel,
-		onClose: w,
-		bankLogoSrc: D,
-		bankLogoAlt: O,
-		cardholderName: U?.cardholderName,
-		maskedCardNumber: U?.maskedCardNumber,
-		programLabel: U?.programLabel,
-		onCopy: W,
-		onRetry: N === d.Supported ? G : void 0
+	return /* @__PURE__ */ re(w, { children: [/* @__PURE__ */ T(t, {}), /* @__PURE__ */ T(b, {
+		labels: ce,
+		state: W,
+		nickname: Z?.nickname,
+		statusLabel: Z?.statusLabel,
+		statusTone: Z?.statusTone,
+		formFactorLabel: Z?.formFactorLabel,
+		onClose: E ? se : void 0,
+		bankLogoSrc: k,
+		bankLogoAlt: A,
+		cardholderName: Z?.cardholderName,
+		maskedCardNumber: Z?.maskedCardNumber,
+		programLabel: Z?.programLabel,
+		allowedCategories: Z?.allowedCategories,
+		spendLimitLabels: Z?.spendLimitLabels,
+		perTransactionMaxLabel: Z?.perTransactionMaxLabel,
+		onCopy: ie,
+		onViewCard: J ? ae : void 0,
+		onHideCard: J ? oe : void 0,
+		revealState: X,
+		revealedCardNumber: $?.cardNumber,
+		revealedExpirationDate: $?.expirationDate,
+		revealedSecurityCode: $?.securityCode,
+		onRetry: F === p.Supported ? le : void 0
 	})] });
 }
-function T({ baseUrl: e, widgetToken: t, organizationId: n, configClient: i, gatewayRouting: a, linkComponent: o, implementation: s, uiFramework: c, errorFallback: u, onError: d, analytics: f, disclosuresAcceptance: p, providerLabels: m, ...h }) {
-	return /* @__PURE__ */ S(r, {
+function D({ baseUrl: e, widgetToken: t, organizationId: n, configClient: i, gatewayRouting: a, linkComponent: o, implementation: s, uiFramework: c, errorFallback: u, onError: d, analytics: f, disclosuresAcceptance: p, providerLabels: m, ...h }) {
+	return /* @__PURE__ */ T(r, {
 		widgetName: l,
 		baseUrl: e,
 		widgetToken: t,
@@ -99,8 +158,8 @@ function T({ baseUrl: e, widgetToken: t, organizationId: n, configClient: i, gat
 		analytics: f,
 		disclosuresAcceptance: p,
 		providerLabels: m,
-		children: /* @__PURE__ */ S(w, { ...h })
+		children: /* @__PURE__ */ T(E, { ...h })
 	});
 }
 //#endregion
-export { T as CardDetailsWidget, T as default };
+export { D as CardDetailsWidget, D as default };