@tesouro/embedded-components-react 0.3.6 → 0.3.11

package/dist/index.css

@@ -3342,6 +3342,9 @@
   .ttw\:text-\[\#175CD3\] {
     color: #175CD3;
   }
+  .ttw\:text-\[\#101317\] {
+    color: #101317;
+  }
   .ttw\:text-\[\#344054\] {
     color: #344054;
   }

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

@@ -19,13 +19,14 @@ import { useMemo as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { CreditCardIcon as v, EyeIcon as y, EyeOffIcon as b, PowerIcon as x } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js
-function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, formFactorLabel: D, cardMenu: O, onClose: k, bankLogoSrc: A, bankLogoAlt: j, cardholderName: M, maskedCardNumber: N, programLabel: P, billingAddress: F, allowedCategories: I, onCopy: L, onActivate: R, onViewCard: z, onHideCard: B, isViewCardDisabled: V, revealState: H = "hidden", revealedCardNumber: U, revealedExpirationDate: W, revealedSecurityCode: G, onRetry: K, className: q }) {
-	let J = h(() => f(S), [S]), Y = !!I?.length, X = H === "revealed", Z = X ? B : z, Q = /* @__PURE__ */ g(u, {
+function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, formFactorLabel: D, cardMenu: O, onClose: k, bankLogoSrc: A, bankLogoAlt: j, cardholderName: M, maskedCardNumber: N, programLabel: P, cardFaceStatusLabel: F, billingAddress: I, allowedCategories: L, onCopy: R, onActivate: z, onViewCard: B, onHideCard: V, revealState: H = "hidden", revealedCardNumber: U, revealedExpirationDate: W, revealedSecurityCode: G, onRetry: K, className: q }) {
+	let J = h(() => f(S), [S]), Y = !!L?.length, X = H === "revealed", Z = X ? V : B, Q = /* @__PURE__ */ g(u, {
 		bankLogoSrc: A,
 		bankLogoAlt: j ?? J.cardFace.bankLogoAlt,
 		cardholderName: M ?? "",
 		maskedCardNumber: N ?? "",
-		programLabel: P ?? ""
+		programLabel: P ?? "",
+		statusLabel: F
 	});
 	return /* @__PURE__ */ _("div", {
 		"data-testid": s.panel,
@@ -62,7 +63,7 @@ function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, fo
 					className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5",
 					children: /* @__PURE__ */ _("div", {
 						className: r("ttw:flex ttw:flex-col ttw:gap-4", l),
-						children: [z ? /* @__PURE__ */ g(m, {
+						children: [B ? /* @__PURE__ */ g(m, {
 							isFlipped: X,
 							front: Q,
 							back: /* @__PURE__ */ g(p, {
@@ -70,26 +71,27 @@ function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, fo
 								cardNumber: U,
 								expirationDate: W,
 								securityCode: G,
-								onCopy: L
+								onCopy: R
 							})
-						}) : Q, R || z ? /* @__PURE__ */ _("div", {
+						}) : Q, z || B ? /* @__PURE__ */ _("div", {
 							className: "ttw:flex ttw:flex-col ttw:gap-2",
 							children: [
-								R ? /* @__PURE__ */ _(t, {
+								z ? /* @__PURE__ */ _(t, {
 									type: "button",
-									onClick: R,
+									className: "ttw:self-center",
+									onClick: z,
 									children: [/* @__PURE__ */ g(x, {
 										className: "ttw:size-4",
 										"aria-hidden": "true"
 									}), J.actions.activateCard]
 								}) : null,
-								z ? /* @__PURE__ */ g("div", {
+								B ? /* @__PURE__ */ g("div", {
 									className: "ttw:flex ttw:gap-2",
 									children: /* @__PURE__ */ _(t, {
 										type: "button",
 										variant: "outline",
 										className: "ttw:flex-1",
-										disabled: V || !Z,
+										disabled: !Z,
 										loading: H === "revealing",
 										onClick: Z,
 										children: [g(X ? b : y, {
@@ -107,30 +109,30 @@ function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, fo
 					children: [
 						/* @__PURE__ */ g(d, {
 							label: J.fields.cardholder,
-							copyAriaLabel: M && L ? J.fields.copyCardholderAriaLabel : void 0,
-							onCopy: M && L ? () => L(M) : void 0,
+							copyAriaLabel: M && R ? J.fields.copyCardholderAriaLabel : void 0,
+							onCopy: M && R ? () => R(M) : void 0,
 							children: M ?? J.fields.emptyValue
 						}),
 						/* @__PURE__ */ g(d, {
 							label: J.fields.nickname,
-							copyAriaLabel: w && L ? J.fields.copyNicknameAriaLabel : void 0,
-							onCopy: w && L ? () => L(w) : void 0,
-							isLast: !F && !Y,
+							copyAriaLabel: w && R ? J.fields.copyNicknameAriaLabel : void 0,
+							onCopy: w && R ? () => R(w) : void 0,
+							isLast: !I && !Y,
 							children: w ?? J.fields.emptyValue
 						}),
-						F ? /* @__PURE__ */ g(d, {
+						I ? /* @__PURE__ */ g(d, {
 							label: J.fields.billingAddress,
-							copyAriaLabel: L ? J.fields.copyBillingAddressAriaLabel : void 0,
-							onCopy: L ? () => L(F) : void 0,
+							copyAriaLabel: R ? J.fields.copyBillingAddressAriaLabel : void 0,
+							onCopy: R ? () => R(I) : void 0,
 							isLast: !Y,
-							children: F
+							children: I
 						}) : null,
 						Y ? /* @__PURE__ */ g(d, {
 							label: J.fields.allowedCategories,
 							isLast: !0,
 							children: /* @__PURE__ */ g("div", {
 								className: "ttw:flex ttw:flex-wrap ttw:gap-2",
-								children: I?.map((t) => /* @__PURE__ */ g(e, {
+								children: L?.map((t) => /* @__PURE__ */ g(e, {
 									variant: "secondary",
 									children: t
 								}, t))

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

@@ -1,38 +1,45 @@
 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 { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CARD_FACE_STATUS_PILL_CLASS_NAME as n, CARD_FACE_SURFACE_CLASS_NAME as r } from "./cardFaceSurface.js";
+import { CardFaceGlow as i } from "./CardFaceGlow.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFace.js
-function o({ bankLogoSrc: o, bankLogoAlt: s, cardholderName: c, maskedCardNumber: l, programLabel: u, className: d }) {
-	return /* @__PURE__ */ a("div", {
+function s({ bankLogoSrc: s, bankLogoAlt: c, cardholderName: l, maskedCardNumber: u, programLabel: d, statusLabel: f, className: p }) {
+	return /* @__PURE__ */ o("div", {
 		"data-testid": t.cardFace,
-		className: e(n, "ttw:justify-between", d),
+		className: e(r, "ttw:justify-between", p),
 		children: [
-			/* @__PURE__ */ i(r, {}),
-			o ? /* @__PURE__ */ i("img", {
-				src: o,
-				alt: s,
+			/* @__PURE__ */ a(i, {}),
+			s ? /* @__PURE__ */ a("img", {
+				src: s,
+				alt: c,
 				className: "ttw:relative ttw:h-8 ttw:w-auto ttw:max-w-[60%] ttw:object-contain ttw:object-left"
-			}) : /* @__PURE__ */ i("span", { className: "ttw:relative ttw:h-8" }),
-			/* @__PURE__ */ a("div", {
+			}) : /* @__PURE__ */ a("span", { className: "ttw:relative ttw:h-8" }),
+			f ? /* @__PURE__ */ a("div", {
+				className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:flex ttw:items-center ttw:justify-center",
+				children: /* @__PURE__ */ a("span", {
+					className: n,
+					children: f
+				})
+			}) : null,
+			/* @__PURE__ */ o("div", {
 				className: "ttw:relative ttw:flex ttw:items-end ttw:justify-between ttw:gap-3",
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "ttw:min-w-0",
-					children: [/* @__PURE__ */ i("p", {
+					children: [/* @__PURE__ */ a("p", {
 						className: "ttw:truncate ttw:text-base ttw:font-medium ttw:text-white",
-						children: c
-					}), /* @__PURE__ */ i("p", {
-						className: "ttw:mt-1 ttw:truncate ttw:text-lg ttw:tracking-wide ttw:text-white/90",
 						children: l
+					}), /* @__PURE__ */ a("p", {
+						className: "ttw:mt-1 ttw:truncate ttw:text-lg ttw:tracking-wide ttw:text-white/90",
+						children: u
 					})]
-				}), /* @__PURE__ */ i("p", {
+				}), /* @__PURE__ */ a("p", {
 					className: "ttw:shrink-0 ttw:text-[10px] ttw:font-medium ttw:text-white/90",
-					children: u
+					children: d
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { o as CardFace };
+export { s as CardFace };

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

@@ -1,4 +1,4 @@
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/cardFaceSurface.js
-var e = "ttw:w-[300px]", t = "ttw:h-[190px]", n = `ttw:relative ttw:flex ${t} ${e} ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:bg-[#101317] ttw:p-4`;
+var e = "ttw:w-[300px]", t = "ttw:h-[190px]", n = `ttw:relative ttw:flex ${t} ${e} ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:bg-[#101317] ttw:p-4`, r = "ttw:rounded-full ttw:bg-white/90 ttw:px-4 ttw:py-2 ttw:text-sm ttw:font-medium ttw:text-[#101317]";
 //#endregion
-export { t as CARD_FACE_HEIGHT_CLASS_NAME, n as CARD_FACE_SURFACE_CLASS_NAME, e as CARD_FACE_WIDTH_CLASS_NAME };
+export { t as CARD_FACE_HEIGHT_CLASS_NAME, r as CARD_FACE_STATUS_PILL_CLASS_NAME, n as CARD_FACE_SURFACE_CLASS_NAME, e as CARD_FACE_WIDTH_CLASS_NAME };

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

@@ -96,20 +96,21 @@ function d({ cardProgram: c, pagination: d, defaultPagination: f, onPaginationCh
 		A,
 		k
 	]);
-	let L = A ? Se : ke ? j : E, Ae = L.paginationToken, R = L.pageSize, z = {
+	let L = A ? Se : ke ? j : E, Ae = L.paginationToken, R = L.pageSize, z = I ? x : void 0, B = {
 		limit: R,
-		paginationToken: Ae,
-		userId: I ? x : void 0
-	}, B = ue({
-		...z,
+		paginationToken: Ae
+	}, V = ue({
+		...B,
+		userId: z,
 		enabled: T && c === r.Credit
-	}), V = de({
-		...z,
+	}), H = de({
+		...B,
+		cardholderUserId: z,
 		enabled: T && c === r.Debit
-	}), H = c === r.Credit ? B : V, U = T && w.canReadFundingAccounts, W = e({ enabled: U }), G = o(() => {
+	}), U = c === r.Credit ? V : H, W = T && w.canReadFundingAccounts, G = e({ enabled: W }), K = o(() => {
 		let e = /* @__PURE__ */ new Map();
 		if (!w.canReadFundingAccounts) return e;
-		for (let t of W.data?.data ?? []) {
+		for (let t of G.data?.data ?? []) {
 			let n = t.nickname?.trim();
 			e.set(t.id, n ? {
 				name: n,
@@ -118,28 +119,28 @@ function d({ cardProgram: c, pagination: d, defaultPagination: f, onPaginationCh
 		}
 		return e;
 	}, [
-		W.data?.data,
+		G.data?.data,
 		_.untitledFundingAccount,
 		w.canReadFundingAccounts
-	]), K = U && W.isError, je = U && !K && (W.isLoading || W.isFetchingNextPage || !!W.hasNextPage), q = o(() => T ? c === r.Credit ? ce(B.data?.data ?? []) : le(V.data?.data ?? []) : [], [
+	]), q = W && G.isError, je = W && !q && (G.isLoading || G.isFetchingNextPage || !!G.hasNextPage), J = o(() => T ? c === r.Credit ? ce(V.data?.data ?? []) : le(H.data?.data ?? []) : [], [
 		T,
 		c,
-		B.data?.data,
-		V.data?.data
-	]), Me = o(() => se(q, {
+		V.data?.data,
+		H.data?.data
+	]), Me = o(() => se(J, {
 		labels: _,
-		fundingAccountNames: G,
+		fundingAccountNames: K,
 		canActivate: w.canActivate,
 		onCardSelect: F,
 		onActivateCard: g
 	}), [
-		q,
-		G,
+		J,
+		K,
 		F,
 		_,
 		g,
 		w.canActivate
-	]), J = H.data?.nextPaginationToken ?? void 0, Y = H.data?.prevPaginationToken ?? void 0, Ne = !!H.data, X = T && (H.isError || K), Z = i((e) => {
+	]), Y = U.data?.nextPaginationToken ?? void 0, X = U.data?.prevPaginationToken ?? void 0, Ne = !!U.data, Z = T && (U.isError || q), Q = i((e) => {
 		A || M({
 			resetKey: k,
 			paginationToken: e.paginationToken,
@@ -149,42 +150,42 @@ function d({ cardProgram: c, pagination: d, defaultPagination: f, onPaginationCh
 		A,
 		p,
 		k
-	]), Q = i(() => {
-		Z({
+	]), $ = i(() => {
+		Q({
 			paginationToken: void 0,
 			pageSize: R
 		});
-	}, [Z, R]), Pe = i((e) => {
-		Z({
+	}, [Q, R]), Pe = i((e) => {
+		Q({
 			paginationToken: void 0,
 			pageSize: e
 		});
-	}, [Z]), Fe = i((e) => {
-		Ee(e), Q();
-	}, [Q]), Ie = i(() => {
-		Z({
-			paginationToken: Y,
+	}, [Q]), Fe = i((e) => {
+		Ee(e), $();
+	}, [$]), Ie = i(() => {
+		Q({
+			paginationToken: X,
 			pageSize: R
 		});
 	}, [
-		Z,
+		Q,
 		R,
-		Y
+		X
 	]), Le = i(() => {
-		Z({
-			paginationToken: J,
+		Q({
+			paginationToken: Y,
 			pageSize: R
 		});
 	}, [
-		Z,
-		J,
+		Q,
+		Y,
 		R
-	]), $ = H.refetch, Re = W.refetch, ze = i(() => {
-		$(), U && Re();
+	]), Re = U.refetch, ze = G.refetch, Be = i(() => {
+		Re(), W && ze();
 	}, [
-		U,
-		$,
-		Re
+		W,
+		Re,
+		ze
 	]);
 	return {
 		rows: Me,
@@ -192,19 +193,19 @@ function d({ cardProgram: c, pagination: d, defaultPagination: f, onPaginationCh
 		onSelectCard: F,
 		canReadCards: w.canRead,
 		columns: oe[c],
-		isLoading: !S && (!C || xe && !b || T && (H.isLoading || je)),
-		isError: S || X,
+		isLoading: !S && (!C || xe && !b || T && (U.isLoading || je)),
+		isError: S || Z,
 		canToggleShowMyCards: w.canRead && !!x,
 		isShowingMyCards: I,
 		onShowMyCardsChange: Fe,
 		canCreateCard: w.canCreate && (!!h || !!ye && w.canComposeDebitCreate),
 		onCreateCardClick: h,
-		onRetry: ze,
-		isPaginationVisible: T && Ne && !X,
+		onRetry: Be,
+		isPaginationVisible: T && Ne && !Z,
 		pageSize: R,
 		pageSizeOptions: me,
-		isPreviousPageDisabled: !Y,
-		isNextPageDisabled: !J,
+		isPreviousPageDisabled: !X,
+		isNextPageDisabled: !Y,
 		onPageSizeChange: Pe,
 		onPreviousPageClick: Ie,
 		onNextPageClick: Le