@tesouro/embedded-components-react 0.3.35 → 0.3.37

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

@@ -2235,6 +2235,21 @@ 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. */

package/dist/lib/CardDetailsWidget.d.ts

@@ -764,6 +764,21 @@ 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. */

package/dist/lib/CardsWidget.d.ts

@@ -851,6 +851,21 @@ 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. */

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/data-access/dist/index5.js

@@ -12,17 +12,18 @@ import { useEffect as a, useMemo as o } from "react";
 import { useInfiniteQuery as s } from "@tanstack/react-query";
 //#region ../../libs/tesouro-embedded-components-react/bank-accounts-widget/data-access/dist/index5.js
 var c = 100, l = ["ACTIVE", "INVITED"];
-function u(l, u) {
-	let { client: d, organizationId: f, authEpoch: p } = e(), m = t(f), h = r({
-		client: d,
-		headers: m,
+function u(l, u, d) {
+	let { client: f, organizationId: p, authEpoch: m } = e(), h = t(p), g = d?.length ? { Permissions: d } : {}, _ = r({
+		client: f,
+		headers: h,
 		query: {
 			Status: l,
-			Limit: c
+			Limit: c,
+			...g
 		}
-	}), g = s({
+	}), v = s({
 		queryKey: [
-			...i(h, p).queryKey,
+			...i(_, m).queryKey,
 			"all",
 			l
 		],
@@ -30,11 +31,12 @@ function u(l, u) {
 		initialPageParam: void 0,
 		queryFn: async ({ signal: e, pageParam: t }) => {
 			let { data: r } = await n({
-				client: d,
-				headers: m,
+				client: f,
+				headers: h,
 				query: {
 					Status: l,
 					Limit: c,
+					...g,
 					...t ? { PaginationToken: t } : {}
 				},
 				signal: e,
@@ -48,31 +50,31 @@ function u(l, u) {
 		}
 	});
 	a(() => {
-		!u || !g.hasNextPage || g.isFetchingNextPage || g.isError || g.fetchNextPage();
+		!u || !v.hasNextPage || v.isFetchingNextPage || v.isError || v.fetchNextPage();
 	}, [
 		u,
-		g.hasNextPage,
-		g.isFetchingNextPage,
-		g.isError,
-		g.fetchNextPage
+		v.hasNextPage,
+		v.isFetchingNextPage,
+		v.isError,
+		v.fetchNextPage
 	]);
-	let _ = o(() => {
-		if (g.data) return {
-			data: g.data.pages.flatMap((e) => e.data ?? []),
+	let y = o(() => {
+		if (v.data) return {
+			data: v.data.pages.flatMap((e) => e.data ?? []),
 			nextPaginationToken: null,
 			prevPaginationToken: null
 		};
-	}, [g.data]);
+	}, [v.data]);
 	return {
-		...g,
-		data: _
+		...v,
+		data: y
 	};
 }
-function d({ enabled: t } = {}) {
-	let { organizationId: n, widgetToken: r } = e(), i = !!(n && r) && (t === !0 || t === void 0), a = u("ACTIVE", i), s = u("INVITED", i), c = o(() => {
+function d({ enabled: t, permissions: n } = {}) {
+	let { organizationId: r, widgetToken: i } = e(), a = !!(r && i) && (t === !0 || t === void 0), s = u("ACTIVE", a, n), c = u("INVITED", a, n), d = o(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let t of l) {
-			let n = t === "ACTIVE" ? a.data?.data ?? [] : s.data?.data ?? [];
+			let n = t === "ACTIVE" ? s.data?.data ?? [] : c.data?.data ?? [];
 			for (let t of n) e.set(t.id, t);
 		}
 		return {
@@ -80,15 +82,15 @@ function d({ enabled: t } = {}) {
 			nextPaginationToken: null,
 			prevPaginationToken: null
 		};
-	}, [a.data, s.data]), d = a.isLoading || s.isLoading, f = a.isFetchingNextPage || s.isFetchingNextPage, p = a.hasNextPage || s.hasNextPage, m = a.isError || s.isError;
+	}, [s.data, c.data]), f = s.isLoading || c.isLoading, p = s.isFetchingNextPage || c.isFetchingNextPage, m = s.hasNextPage || c.hasNextPage, h = s.isError || c.isError;
 	return {
-		...a,
-		data: c,
-		isLoading: d,
-		isFetchingNextPage: f,
-		hasNextPage: p,
-		isError: m,
-		isSuccess: a.isSuccess && s.isSuccess
+		...s,
+		data: d,
+		isLoading: f,
+		isFetchingNextPage: p,
+		hasNextPage: m,
+		isError: h,
+		isSuccess: s.isSuccess && c.isSuccess
 	};
 }
 //#endregion

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index6.js

@@ -26,25 +26,21 @@ function r(e, n) {
 	if (r) return e.find((e) => e.key.toLowerCase() === r.toLowerCase())?.description;
 }
 function i(e) {
-	let t = e?.trim().toLowerCase() ?? "", n = t.includes(":") ? t.slice(t.lastIndexOf(":") + 1) : t;
-	return n === "admin" || n === "administrator";
-}
-function a(e) {
 	return e.trim() ? e.split("_").filter(Boolean).map((e) => e.length <= 3 && e === e.toUpperCase() ? e.toUpperCase() : e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join(" ") : "";
 }
-function o(e, o) {
+function a(e, a, o) {
 	return e.map((e) => {
-		let s = e.role ?? "", c = t(o, s) || s.trim(), l = n(o, s) || a(c), u = r(o, s) ?? "";
+		let s = e.role ?? "", c = t(a, s) || s.trim(), l = n(a, s) || i(c), u = r(a, s) ?? "";
 		return {
 			id: e.id,
 			name: e.name,
 			role: l,
 			roleDescription: u,
-			locked: i(c) || i(s)
+			locked: o.has(e.id)
 		};
 	});
 }
-function s(e, { selectedUserIds: t, disabled: n, fallbackTooltip: r, onUserToggle: i }) {
+function o(e, { selectedUserIds: t, disabled: n, fallbackTooltip: r, onUserToggle: i }) {
 	return e.map((e) => ({
 		key: e.id,
 		name: e.name,
@@ -58,4 +54,4 @@ function s(e, { selectedUserIds: t, disabled: n, fallbackTooltip: r, onUserToggl
 	}));
 }
 //#endregion
-export { i as isAdminRoleKey, r as resolveOrganizationRoleDescription, n as resolveOrganizationRoleDisplayName, t as resolveOrganizationRoleKey, s as toAccessRows, e as toOrganizationRoleOptions, o as toTeamMembers };
+export { r as resolveOrganizationRoleDescription, n as resolveOrganizationRoleDisplayName, t as resolveOrganizationRoleKey, o as toAccessRows, e as toOrganizationRoleOptions, a as toTeamMembers };

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index7.js

@@ -3,53 +3,55 @@
 "use client";
 "use client";
 import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { useAllBankAccountsQuery as t } from "../../../shared/data-access/dist/lib/bank-account/useAllBankAccountsQuery.js";
-import { useAllOrganizationRolesQuery as n } from "../../../shared/data-access/dist/lib/role/useAllOrganizationRolesQuery.js";
+import { Scope as t } from "../../../shared/data-access/dist/lib/scopes.js";
+import { useAllBankAccountsQuery as n } from "../../../shared/data-access/dist/lib/bank-account/useAllBankAccountsQuery.js";
+import { useAllOrganizationRolesQuery as r } from "../../../shared/data-access/dist/lib/role/useAllOrganizationRolesQuery.js";
+import "../../../shared/data-access/dist/index.js";
 import "../../../shared/ui/dist/index.js";
-import { useAnalyticsTrack as r } from "../../../shared/feature/dist/lib/analytics/hooks.js";
-import { TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT as ee, emitWidgetDomEvent as te } from "../../../shared/util/dist/lib/widgetDomEvents.js";
-import { useWidgetConfig as ne, useWidgetError as re, useWidgetLoading as ie } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { useAnalyticsTrack as ee } from "../../../shared/feature/dist/lib/analytics/hooks.js";
+import { TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT as te, emitWidgetDomEvent as ne } from "../../../shared/util/dist/lib/widgetDomEvents.js";
+import { useWidgetConfig as re, useWidgetError as ie, useWidgetLoading as ae } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
 import "../../../shared/feature/dist/index.js";
 import { BankAccountsWidgetAnalyticsEvent as i } from "./index2.js";
-import { copyTextToClipboard as ae, formatAmountLabel as a, formatTotalAvailableBalanceLabel as oe, maskAccountNumber as o } from "./index3.js";
-import { DEFAULT_FEATURE_LABELS as se } from "./index4.js";
-import { getBankAccountsPermissions as ce } from "./index5.js";
-import { toAccessRows as le, toOrganizationRoleOptions as ue, toTeamMembers as de } from "./index6.js";
-import { DEFAULT_LABELS as fe } from "../../ui/dist/lib/labels.js";
+import { copyTextToClipboard as oe, formatAmountLabel as a, formatTotalAvailableBalanceLabel as se, maskAccountNumber as o } from "./index3.js";
+import { DEFAULT_FEATURE_LABELS as ce } from "./index4.js";
+import { getBankAccountsPermissions as le } from "./index5.js";
+import { toAccessRows as ue, toOrganizationRoleOptions as de, toTeamMembers as fe } from "./index6.js";
+import { DEFAULT_LABELS as pe } from "../../ui/dist/lib/labels.js";
 import "../../ui/dist/index.js";
-import { useCreateBankAccountMutation as pe } from "../../data-access/dist/index3.js";
-import { useGrantBankAccountAccessMutation as me } from "../../data-access/dist/index4.js";
-import { useAllOrganizationUsersQuery as he } from "../../data-access/dist/index5.js";
+import { useCreateBankAccountMutation as me } from "../../data-access/dist/index3.js";
+import { useGrantBankAccountAccessMutation as he } from "../../data-access/dist/index4.js";
+import { useAllOrganizationUsersQuery as s } from "../../data-access/dist/index5.js";
 import "../../data-access/dist/index.js";
 import { filterRolesForOrganization as ge } from "../../../../shared/util-validation/dist/index6.js";
-import { useCallback as _e, useEffect as s, useMemo as c, useRef as ve, useState as l } from "react";
-import { useControllableState as ye } from "@radix-ui/react-use-controllable-state";
+import { useCallback as _e, useEffect as ve, useMemo as c, useRef as ye, useState as l } from "react";
+import { useControllableState as be } from "@radix-ui/react-use-controllable-state";
 //#region ../../libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index7.js
-var u = { nickname: "" };
+var u = { nickname: "" }, xe = t.BankAccountWriteOrg;
 function d(e, t) {
 	return e !== void 0 && t !== void 0 && e !== t;
 }
-function f({ labels: a, featureLabels: o, isBankingTaglineVisible: f = !0, bankLogoSrc: xe, bankLogoAlt: Se, depositAgreementUrl: Ce, selectedAccountId: we, defaultSelectedAccountId: Te, onSelectedAccountIdChange: Ee, "data-testid": De } = {}) {
-	let Oe = {
-		...fe,
-		...a
+function f({ labels: t, featureLabels: a, isBankingTaglineVisible: o = !0, bankLogoSrc: f, bankLogoAlt: Ce, depositAgreementUrl: we, selectedAccountId: Te, defaultSelectedAccountId: Ee, onSelectedAccountIdChange: De, "data-testid": Oe } = {}) {
+	let ke = {
+		...pe,
+		...t
 	}, p = {
-		...se,
-		...o
-	}, m = r(), { organizationId: h, widgetToken: ke, initResponse: g } = ne(), Ae = ie(), _ = !!re(), v = !!(h && ke), y = c(() => ce(g?.scopes), [g?.scopes]), je = v && y.canRead && !!g, b = g?.userId ?? void 0, [x, Me] = l(h);
-	h !== void 0 && h !== x && Me(h);
-	let [S, Ne] = l(b);
-	b !== void 0 && b !== S && Ne(b);
-	let [Pe, C] = ye({
-		prop: we,
-		defaultProp: Te ?? null,
-		onChange: Ee,
+		...ce,
+		...a
+	}, m = ee(), { organizationId: h, widgetToken: Ae, initResponse: g } = re(), je = ae(), _ = !!ie(), v = !!(h && Ae), y = c(() => le(g?.scopes), [g?.scopes]), Me = v && y.canRead && !!g, b = g?.userId ?? void 0, [x, Ne] = l(h);
+	h !== void 0 && h !== x && Ne(h);
+	let [S, Pe] = l(b);
+	b !== void 0 && b !== S && Pe(b);
+	let [Fe, C] = be({
+		prop: Te,
+		defaultProp: Ee ?? null,
+		onChange: De,
 		caller: "BankAccountsWidget"
-	}), w = ve({
+	}), w = ye({
 		organizationId: x,
 		userId: S
-	}), Fe = d(w.current.organizationId, x) || d(w.current.userId, S);
-	s(() => {
+	}), Ie = d(w.current.organizationId, x) || d(w.current.userId, S);
+	ve(() => {
 		let e = w.current;
 		w.current = {
 			organizationId: x,
@@ -60,63 +62,67 @@ function f({ labels: a, featureLabels: o, isBankingTaglineVisible: f = !0, bankL
 		S,
 		C
 	]);
-	let T = Fe ? null : Pe, E = je && !T, D = _e((e) => {
+	let T = Ie ? null : Fe, E = Me && !T, D = _e((e) => {
 		C(e);
-	}, [C]), [O, k] = l(!1), [A, j] = l(u), [M, N] = l([]), [Ie, P] = l(!1), [F, I] = l(), [Le, Re] = l({}), [L, R] = l({});
-	s(() => {
+	}, [C]), [O, k] = l(!1), [A, j] = l(u), [M, N] = l([]), [Le, P] = l(!1), [F, I] = l(), [L, Re] = l({}), [R, z] = l({});
+	ve(() => {
 		m(i.Mounted);
 	}, [m]);
-	let z = t({ enabled: E }), B = pe(), V = me(), H = O, U = he({ enabled: H }), W = n({ enabled: H }), G = c(() => {
-		let e = W.data?.data ?? [], t = h ? ge(e, {
+	let B = n({ enabled: E }), V = me(), H = he(), U = O, W = s({ enabled: U }), G = r({ enabled: U }), K = s({
+		enabled: U,
+		permissions: [xe]
+	}), ze = c(() => new Set((K.data?.data ?? []).filter((e) => e.organizationId === h).map((e) => e.id)), [K.data?.data, h]), q = c(() => {
+		let e = G.data?.data ?? [], t = h ? ge(e, {
 			organizationId: h,
 			organizationTypes: g?.organizationTypes ?? []
 		}) : e;
-		return de(U.data?.data ?? [], ue(t));
+		return fe(W.data?.data ?? [], de(t), ze);
 	}, [
+		ze,
+		G.data?.data,
 		W.data?.data,
-		U.data?.data,
 		h,
 		g?.organizationTypes
-	]), K = U.isLoading || U.isFetchingNextPage || !!U.hasNextPage || W.isResolving, q = !K && !U.isError, J = E ? z.data?.data ?? [] : [], Y = [.../* @__PURE__ */ new Set([...G.filter((e) => e.locked).map((e) => e.id), ...M])], X = g?.bankName?.trim() ?? "", ze = g?.vspName?.trim() ?? "", Be = Ce?.trim() || void 0, Z = v && y.canWrite, Q = !z.hasNextPage && !z.isFetchingNextPage, Ve = c(() => Q ? oe(J) : void 0, [J, Q]), He = J.length > 1 && y.canRead && Q, $ = _e(async (t, n, r) => {
-		await ae(r) && (e.success(n === "account" ? p.copyAccountNumberToast : p.copyRoutingNumberToast), R((e) => ({
+	]), Be = W.isLoading || W.isFetchingNextPage || !!W.hasNextPage || G.isResolving || K.isLoading || K.isFetchingNextPage || !!K.hasNextPage, Ve = !Be && !W.isError && !K.isError, J = E ? B.data?.data ?? [] : [], Y = [.../* @__PURE__ */ new Set([...q.filter((e) => e.locked).map((e) => e.id), ...M])], He = g?.bankName?.trim() ?? "", Ue = g?.vspName?.trim() ?? "", We = we?.trim() || void 0, X = v && y.canWrite, Z = !B.hasNextPage && !B.isFetchingNextPage, Ge = c(() => Z ? se(J) : void 0, [J, Z]), Ke = J.length > 1 && y.canRead && Z, Q = _e(async (t, n, r) => {
+		await oe(r) && (e.success(n === "account" ? p.copyAccountNumberToast : p.copyRoutingNumberToast), z((e) => ({
 			...e,
 			[t]: n
 		})), window.setTimeout(() => {
-			R((e) => ({
+			z((e) => ({
 				...e,
 				[t]: void 0
 			}));
 		}, 2e3));
-	}, [p.copyAccountNumberToast, p.copyRoutingNumberToast]), Ue = c(() => J.map((e) => be(e, p, {
-		isAccountNumberVisible: Le[e.id] ?? !1,
-		isAccountNumberCopied: L[e.id] === "account",
-		isRoutingNumberCopied: L[e.id] === "routing",
+	}, [p.copyAccountNumberToast, p.copyRoutingNumberToast]), qe = c(() => J.map((e) => Se(e, p, {
+		isAccountNumberVisible: L[e.id] ?? !1,
+		isAccountNumberCopied: R[e.id] === "account",
+		isRoutingNumberCopied: R[e.id] === "routing",
 		onToggleAccountNumberVisibility: () => Re((t) => ({
 			...t,
 			[e.id]: !t[e.id]
 		})),
-		onCopyAccountNumber: () => void $(e.id, "account", e.accountNumber),
-		onCopyRoutingNumber: () => void $(e.id, "routing", e.routingNumber),
+		onCopyAccountNumber: () => void Q(e.id, "account", e.accountNumber),
+		onCopyRoutingNumber: () => void Q(e.id, "routing", e.routingNumber),
 		onSelect: () => {
 			D(e.id), m(i.AccountSelected, { accountId: e.id });
 		}
 	})), [
 		J,
-		Le,
 		L,
+		R,
 		p,
-		$,
+		Q,
 		D,
 		m
-	]), We = (t) => {
-		V.mutate({
+	]), Je = (t) => {
+		H.mutate({
 			path: { id: t },
 			body: { userIds: Y }
 		}, { onSuccess: () => {
-			te(ee), e.success(p.createSuccessToast), j(u), N([]), I(void 0), P(!1), k(!1);
+			ne(te), e.success(p.createSuccessToast), j(u), N([]), I(void 0), P(!1), k(!1);
 		} });
-	}, Ge = () => {
-		if (Z && q) {
+	}, Ye = () => {
+		if (X && Ve) {
 			if (A.nickname.trim() === "") {
 				P(!0);
 				return;
@@ -126,61 +132,61 @@ function f({ labels: a, featureLabels: o, isBankingTaglineVisible: f = !0, bankL
 				return;
 			}
 			if (F) {
-				We(F);
+				Je(F);
 				return;
 			}
-			B.mutate({ body: { nickname: A.nickname.trim() } }, { onSuccess: (e) => {
-				m(i.AccountCreated, { accountId: e?.id }), e?.id && (I(e.id), We(e.id));
+			V.mutate({ body: { nickname: A.nickname.trim() } }, { onSuccess: (e) => {
+				m(i.AccountCreated, { accountId: e?.id }), e?.id && (I(e.id), Je(e.id));
 			} });
 		}
-	}, Ke = (e, t) => {
-		G.find((t) => t.id === e)?.locked || N((n) => t ? [.../* @__PURE__ */ new Set([...n, e])] : n.filter((t) => t !== e));
-	}, qe = (e) => {
-		e && !Z || (e && (j(u), N([]), I(void 0), P(!1), B.reset(), V.reset()), k(e));
-	}, Je = B.isPending || V.isPending, Ye = le(G, {
+	}, Xe = (e, t) => {
+		q.find((t) => t.id === e)?.locked || N((n) => t ? [.../* @__PURE__ */ new Set([...n, e])] : n.filter((t) => t !== e));
+	}, Ze = (e) => {
+		e && !X || (e && (j(u), N([]), I(void 0), P(!1), V.reset(), H.reset()), k(e));
+	}, $ = V.isPending || H.isPending, Qe = ue(q, {
 		selectedUserIds: M,
-		disabled: Je || !y.canWrite,
-		fallbackTooltip: Oe.teamMemberAccessTooltip,
-		onUserToggle: Ke
+		disabled: $ || !y.canWrite,
+		fallbackTooltip: ke.teamMemberAccessTooltip,
+		onUserToggle: Xe
 	});
 	return {
-		"data-testid": De,
+		"data-testid": Oe,
 		selectedAccountId: T,
-		bankDisplayName: X,
-		bankLogoSrc: xe,
-		bankLogoAlt: Se,
-		availableBalanceLabel: Ve,
-		shouldDisplayAvailableBalance: He,
-		isBankingTaglineVisible: f,
-		accountCards: Ue,
+		bankDisplayName: He,
+		bankLogoSrc: f,
+		bankLogoAlt: Ce,
+		availableBalanceLabel: Ge,
+		shouldDisplayAvailableBalance: Ke,
+		isBankingTaglineVisible: o,
+		accountCards: qe,
 		shouldDisplayAddAccountCard: y.canWrite,
-		isLoading: !_ && (!v || Ae && !g || E && (z.isLoading || z.isFetchingNextPage || z.hasNextPage)),
-		isError: _ || E && z.isError,
+		isLoading: !_ && (!v || je && !g || E && (B.isLoading || B.isFetchingNextPage || B.hasNextPage)),
+		isError: _ || E && B.isError,
 		isCreateOpen: O,
 		createForm: A,
 		legalCopy: {
-			bankName: X,
-			vspName: ze,
-			agreementUrl: Be
+			bankName: He,
+			vspName: Ue,
+			agreementUrl: We
 		},
-		accessRows: Ye,
-		isTeamMembersLoading: K,
-		isTeamMembersError: U.isError,
-		isCreateSubmitDisabled: !Z || !q || A.nickname.trim() === "" || Y.length === 0,
-		isCreateError: B.isError || V.isError,
-		hasNicknameError: Ie,
-		isSubmitting: Je,
-		isCreateDisabled: !Z,
-		onCreateOpenChange: qe,
+		accessRows: Qe,
+		isTeamMembersLoading: Be,
+		isTeamMembersError: W.isError || K.isError,
+		isCreateSubmitDisabled: !X || !Ve || A.nickname.trim() === "" || Y.length === 0,
+		isCreateError: V.isError || H.isError,
+		hasNicknameError: Le,
+		isSubmitting: $,
+		isCreateDisabled: !X,
+		onCreateOpenChange: Ze,
 		onCreateFormChange: (e) => {
 			P(!1), j(e);
 		},
-		onCreateSubmit: Ge,
-		onAddAccountClick: () => qe(!0),
+		onCreateSubmit: Ye,
+		onAddAccountClick: () => Ze(!0),
 		onSelectAccount: D
 	};
 }
-function be(e, t, n) {
+function Se(e, t, n) {
 	return {
 		id: e.id,
 		name: e.nickname?.trim() || t.accountFallback,

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

@@ -4,7 +4,26 @@ function t(t) {
 	let n = t.trim().slice(-4);
 	return n ? `${e} ${e} ${e} ${n}` : "";
 }
-async function n(e) {
+function n(e) {
+	let t = e.replace(/\s+/g, "");
+	return t ? (t.match(/.{1,4}/g) ?? []).join(" ") : "";
+}
+function r(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 i(e) {
 	if (!e.trim()) return !1;
 	try {
 		return await navigator.clipboard.writeText(e), !0;
@@ -13,4 +32,4 @@ async function n(e) {
 	}
 }
 //#endregion
-export { n as copyTextToClipboard, t as maskCardNumber };
+export { i as copyTextToClipboard, n as formatCardNumber, r as formatExpirationDate, t as maskCardNumber };