@tesouro/embedded-components-react 0.2.306 → 0.2.307

package/dist/index.css

@@ -216,6 +216,9 @@
   .ttw\:end-0 {
     inset-inline-end: calc(var(--ttw-spacing) * 0);
   }
+  .ttw\:end-1 {
+    inset-inline-end: calc(var(--ttw-spacing) * 1);
+  }
   .ttw\:\!top-2 {
     top: calc(var(--ttw-spacing) * 2) !important;
   }
@@ -225,6 +228,9 @@
   .ttw\:top-0 {
     top: 0px;
   }
+  .ttw\:top-1 {
+    top: var(--ttw-spacing);
+  }
   .ttw\:top-1\.5 {
     top: calc(var(--ttw-spacing) * 1.5);
   }
@@ -1214,6 +1220,9 @@
   .ttw\:w-\[600px\] {
     width: 600px;
   }
+  .ttw\:w-\[616px\] {
+    width: 616px;
+  }
   .ttw\:w-\[672px\] {
     width: 672px;
   }
@@ -2823,6 +2832,9 @@
   .ttw\:py-\[7px\] {
     padding-block: 7px;
   }
+  .ttw\:pe-10 {
+    padding-inline-end: calc(var(--ttw-spacing) * 10);
+  }
   .ttw\:pt-0 {
     padding-top: 0px;
   }

package/dist/index.d.ts

@@ -2060,6 +2060,11 @@ interface CardDetailsFieldLabels {
     copyNicknameAriaLabel: string;
     copyBillingAddressAriaLabel: string;
 }
+/** Copy for the controls the owner can switch on alongside the details. */
+interface CardDetailsActionLabels {
+    /** Primary control that opens the Activate Card form. */
+    activateCard: string;
+}
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
     /** Accessible name announced while the panel is loading. */
@@ -2074,6 +2079,7 @@ interface CardDetailsPanelLabels {
     header: CardDetailsHeaderLabels;
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
+    actions: CardDetailsActionLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

package/dist/lib/CardDetailsWidget.d.ts

@@ -28,6 +28,11 @@ interface CardDetailsFieldLabels {
     copyNicknameAriaLabel: string;
     copyBillingAddressAriaLabel: string;
 }
+/** Copy for the controls the owner can switch on alongside the details. */
+interface CardDetailsActionLabels {
+    /** Primary control that opens the Activate Card form. */
+    activateCard: string;
+}
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
     /** Accessible name announced while the panel is loading. */
@@ -42,6 +47,7 @@ interface CardDetailsPanelLabels {
     header: CardDetailsHeaderLabels;
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
+    actions: CardDetailsActionLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

package/dist/lib/CardsWidget.d.ts

@@ -754,6 +754,11 @@ interface CardDetailsFieldLabels {
     copyNicknameAriaLabel: string;
     copyBillingAddressAriaLabel: string;
 }
+/** Copy for the controls the owner can switch on alongside the details. */
+interface CardDetailsActionLabels {
+    /** Primary control that opens the Activate Card form. */
+    activateCard: string;
+}
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
     /** Accessible name announced while the panel is loading. */
@@ -768,6 +773,7 @@ interface CardDetailsPanelLabels {
     header: CardDetailsHeaderLabels;
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
+    actions: CardDetailsActionLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

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

@@ -5,4 +5,5 @@ import "./lib/CardDetailsPanel/CardFace.js";
 import "./lib/CardDetailsPanel/DetailCopyRow.js";
 import "./lib/CardDetailsPanel/labels.js";
 import { CardDetailsPanel as e } from "./lib/CardDetailsPanel/CardDetailsPanel.js";
+import "./lib/ActivateCardPanel/ActivateCardPanel.js";
 export { e as CardDetailsPanel };

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

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../../../shared/ui/dist/index.js";
+import "../CardDetailsPanel/CardFace.js";
+import "./ActivateCardSuccessView.js";
+import "./FieldError.js";
+import "./PinField.js";
+import "react";
+import "react/jsx-runtime";
+import "lucide-react";

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

@@ -0,0 +1,2 @@
+import "react/jsx-runtime";
+import "lucide-react";

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

@@ -0,0 +1 @@
+import "react/jsx-runtime";

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

@@ -0,0 +1,5 @@
+import "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "./FieldError.js";
+import "react";
+import "react/jsx-runtime";
+import "lucide-react";

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

@@ -2,90 +2,100 @@
 "use client";
 "use client";
 "use client";
-import { Badge as e, Skeleton as t, cn as n } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { EmptyState as r } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
-import { ErrorState as i } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { Badge as e, Button as t, Skeleton as n, cn as r } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { EmptyState as i } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as a } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
 import "../../../../../shared/ui/dist/index.js";
-import { cardDetailsWidgetUiTestIds as a } from "./testIds.js";
-import { CardDetailsHeader as o } from "./CardDetailsHeader.js";
-import { CardFace as s } from "./CardFace.js";
-import { DetailCopyRow as c } from "./DetailCopyRow.js";
-import { resolveCardDetailsPanelLabels as l } from "./labels.js";
-import { useMemo as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { CreditCardIcon as p } from "lucide-react";
+import { cardDetailsWidgetUiTestIds as o } from "./testIds.js";
+import { CardDetailsHeader as s } from "./CardDetailsHeader.js";
+import { CardFace as c } from "./CardFace.js";
+import { DetailCopyRow as l } from "./DetailCopyRow.js";
+import { resolveCardDetailsPanelLabels as u } from "./labels.js";
+import { useMemo as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { CreditCardIcon as m, PowerIcon as h } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js
-function m({ labels: m, state: h, nickname: g, statusLabel: _, statusTone: v, formFactorLabel: y, cardMenu: b, onClose: x, bankLogoSrc: S, bankLogoAlt: C, cardholderName: w, maskedCardNumber: T, programLabel: E, billingAddress: D, allowedCategories: O, onCopy: k, onRetry: A, className: j }) {
-	let M = u(() => l(m), [m]), N = !!O?.length;
-	return /* @__PURE__ */ f("div", {
-		"data-testid": a.panel,
-		className: n("ttw:flex ttw:w-full ttw:flex-col", j),
-		children: [/* @__PURE__ */ d(o, {
-			labels: M.header,
-			title: h === "loaded" ? g ?? M.header.untitledCard : void 0,
-			isTitlePending: h === "loading",
-			statusLabel: h === "loaded" ? _ : void 0,
-			statusTone: v,
-			formFactorLabel: h === "loaded" ? y : void 0,
-			cardMenu: h === "loaded" ? b : void 0,
-			onClose: x
-		}), /* @__PURE__ */ d("div", {
+function g({ labels: g, state: _, nickname: v, statusLabel: y, statusTone: b, formFactorLabel: x, cardMenu: S, onClose: C, bankLogoSrc: w, bankLogoAlt: T, cardholderName: E, maskedCardNumber: D, programLabel: O, billingAddress: k, allowedCategories: A, onCopy: j, onActivate: M, onRetry: N, className: P }) {
+	let F = d(() => u(g), [g]), I = !!A?.length;
+	return /* @__PURE__ */ p("div", {
+		"data-testid": o.panel,
+		className: r("ttw:flex ttw:w-full ttw:flex-col", P),
+		children: [/* @__PURE__ */ f(s, {
+			labels: F.header,
+			title: _ === "loaded" ? v ?? F.header.untitledCard : void 0,
+			isTitlePending: _ === "loading",
+			statusLabel: _ === "loaded" ? y : void 0,
+			statusTone: b,
+			formFactorLabel: _ === "loaded" ? x : void 0,
+			cardMenu: _ === "loaded" ? S : void 0,
+			onClose: C
+		}), /* @__PURE__ */ f("div", {
 			className: "ttw:px-4 ttw:pb-4",
-			children: h === "loading" ? /* @__PURE__ */ f("div", {
-				"data-testid": a.loading,
+			children: _ === "loading" ? /* @__PURE__ */ p("div", {
+				"data-testid": o.loading,
 				role: "status",
-				"aria-label": M.status.loadingAriaLabel,
+				"aria-label": F.status.loadingAriaLabel,
 				className: "ttw:space-y-4",
-				children: [/* @__PURE__ */ d(t, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ d(t, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
-			}) : h === "error" ? /* @__PURE__ */ d(i, {
-				title: M.status.errorTitle,
-				description: M.status.errorDescription,
-				retryLabel: M.status.errorRetry,
-				onRetry: A
-			}) : h === "notFound" ? /* @__PURE__ */ d(r, {
-				icon: /* @__PURE__ */ d(p, { className: "ttw:size-6 ttw:text-muted-foreground" }),
-				title: M.status.notFoundTitle,
-				description: M.status.notFoundDescription
-			}) : /* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ f(n, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ f(n, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
+			}) : _ === "error" ? /* @__PURE__ */ f(a, {
+				title: F.status.errorTitle,
+				description: F.status.errorDescription,
+				retryLabel: F.status.errorRetry,
+				onRetry: N
+			}) : _ === "notFound" ? /* @__PURE__ */ f(i, {
+				icon: /* @__PURE__ */ f(m, { className: "ttw:size-6 ttw:text-muted-foreground" }),
+				title: F.status.notFoundTitle,
+				description: F.status.notFoundDescription
+			}) : /* @__PURE__ */ p("div", {
 				className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border ttw:sm:flex-row",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5",
-					children: /* @__PURE__ */ d(s, {
-						bankLogoSrc: S,
-						bankLogoAlt: C ?? M.cardFace.bankLogoAlt,
-						cardholderName: w ?? "",
-						maskedCardNumber: T ?? "",
-						programLabel: E ?? ""
+					children: /* @__PURE__ */ p("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-4",
+						children: [/* @__PURE__ */ f(c, {
+							bankLogoSrc: w,
+							bankLogoAlt: T ?? F.cardFace.bankLogoAlt,
+							cardholderName: E ?? "",
+							maskedCardNumber: D ?? "",
+							programLabel: O ?? ""
+						}), M ? /* @__PURE__ */ p(t, {
+							type: "button",
+							onClick: M,
+							children: [/* @__PURE__ */ f(h, {
+								className: "ttw:size-4",
+								"aria-hidden": "true"
+							}), F.actions.activateCard]
+						}) : null]
 					})
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ p("div", {
 					className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:border-t ttw:border-border ttw:sm:border-t-0 ttw:sm:border-l",
 					children: [
-						/* @__PURE__ */ d(c, {
-							label: M.fields.cardholder,
-							copyAriaLabel: w && k ? M.fields.copyCardholderAriaLabel : void 0,
-							onCopy: w && k ? () => k(w) : void 0,
-							children: w ?? M.fields.emptyValue
+						/* @__PURE__ */ f(l, {
+							label: F.fields.cardholder,
+							copyAriaLabel: E && j ? F.fields.copyCardholderAriaLabel : void 0,
+							onCopy: E && j ? () => j(E) : void 0,
+							children: E ?? F.fields.emptyValue
 						}),
-						/* @__PURE__ */ d(c, {
-							label: M.fields.nickname,
-							copyAriaLabel: g && k ? M.fields.copyNicknameAriaLabel : void 0,
-							onCopy: g && k ? () => k(g) : void 0,
-							isLast: !D && !N,
-							children: g ?? M.fields.emptyValue
+						/* @__PURE__ */ f(l, {
+							label: F.fields.nickname,
+							copyAriaLabel: v && j ? F.fields.copyNicknameAriaLabel : void 0,
+							onCopy: v && j ? () => j(v) : void 0,
+							isLast: !k && !I,
+							children: v ?? F.fields.emptyValue
 						}),
-						D ? /* @__PURE__ */ d(c, {
-							label: M.fields.billingAddress,
-							copyAriaLabel: k ? M.fields.copyBillingAddressAriaLabel : void 0,
-							onCopy: k ? () => k(D) : void 0,
-							isLast: !N,
-							children: D
+						k ? /* @__PURE__ */ f(l, {
+							label: F.fields.billingAddress,
+							copyAriaLabel: j ? F.fields.copyBillingAddressAriaLabel : void 0,
+							onCopy: j ? () => j(k) : void 0,
+							isLast: !I,
+							children: k
 						}) : null,
-						N ? /* @__PURE__ */ d(c, {
-							label: M.fields.allowedCategories,
+						I ? /* @__PURE__ */ f(l, {
+							label: F.fields.allowedCategories,
 							isLast: !0,
-							children: /* @__PURE__ */ d("div", {
+							children: /* @__PURE__ */ f("div", {
 								className: "ttw:flex ttw:flex-wrap ttw:gap-2",
-								children: O?.map((t) => /* @__PURE__ */ d(e, {
+								children: A?.map((t) => /* @__PURE__ */ f(e, {
 									variant: "secondary",
 									children: t
 								}, t))
@@ -98,4 +108,4 @@ function m({ labels: m, state: h, nickname: g, statusLabel: _, statusTone: v, fo
 	});
 }
 //#endregion
-export { m as CardDetailsPanel };
+export { g as CardDetailsPanel };

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

@@ -16,6 +16,7 @@ var e = {
 		copyNicknameAriaLabel: "Copy nickname",
 		copyBillingAddressAriaLabel: "Copy billing address"
 	},
+	actions: { activateCard: "Activate Card" },
 	status: {
 		loadingAriaLabel: "Loading card details",
 		errorTitle: "We couldn't load this card",
@@ -39,6 +40,10 @@ function t(t) {
 			...e.fields,
 			...t?.fields
 		},
+		actions: {
+			...e.actions,
+			...t?.actions
+		},
 		status: {
 			...e.status,
 			...t?.status

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

@@ -4,7 +4,9 @@ var e = {
 	cardFace: "card-details-widget-card-face",
 	loading: "card-details-widget-loading",
 	menuTrigger: "card-details-widget-menu-trigger",
-	closeButton: "card-details-widget-close-button"
+	closeButton: "card-details-widget-close-button",
+	activatePanel: "card-details-widget-activate-panel",
+	activateSuccess: "card-details-widget-activate-success"
 };
 //#endregion
 export { e as cardDetailsWidgetUiTestIds };

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.2.306", n = "845e8eed4263c4d7b4b94e2f39f1d4a9edf82fc5", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.2.307", n = "e6190e49468ca4e80ee98046dc93a991cb03537c", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.2.306",
+  "version": "0.2.307",
   "license": "Apache-2.0",
   "type": "module",
   "packageDepSync": {