@tesouro/embedded-components-react 0.11.0 → 0.11.1

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferResultStep.js

@@ -1,65 +1,50 @@
-import { Button as e, Typography as t } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ResultScreen as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { TransferAccountValue as t } from "../TransfersWidget/TransferAccountValue.js";
 import { DEFAULT_TRANSFER_RESULT_STEP_LABELS as n } from "./transferResultStepLabels.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { ArrowLeft as a, CheckCircle2 as o, X as s } from "lucide-react";
+import { jsx as r } from "react/jsx-runtime";
+import { CircleCheck as i } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferResultStep.js
-function c({ amountLabel: c, isSuccess: l, onBackToTransfers: u, labels: d, testIds: f }) {
-	let p = {
+function a({ fromAccount: a, toAccount: o, amountLabel: s, onDone: c, labels: l, testIds: u }) {
+	let d = {
 		...n,
-		...d
+		...l
 	};
-	return /* @__PURE__ */ i("div", {
-		className: "ttw:flex ttw:flex-col ttw:items-center ttw:px-2 ttw:py-8",
-		children: [
-			/* @__PURE__ */ r("div", {
-				className: l ? "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-emerald-50" : "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-red-50",
-				children: l ? /* @__PURE__ */ r("div", {
-					className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-emerald-100",
-					children: /* @__PURE__ */ r(o, {
-						className: "ttw:size-7 ttw:text-emerald-600",
-						"aria-hidden": !0
-					})
-				}) : /* @__PURE__ */ r("div", {
-					className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-destructive",
-					children: /* @__PURE__ */ r(s, {
-						className: "ttw:size-6 ttw:text-destructive-foreground",
-						"aria-hidden": !0
-					})
+	return /* @__PURE__ */ r(e, {
+		icon: /* @__PURE__ */ r(i, {}),
+		tone: "success",
+		title: /* @__PURE__ */ r("span", {
+			"data-testid": u?.title,
+			children: d.title
+		}),
+		description: d.description,
+		details: [
+			{
+				label: d.from,
+				value: /* @__PURE__ */ r(t, {
+					name: a.name,
+					number: a.number && { last4: a.number.last4 },
+					numberLabels: { endingIn: d.endingIn }
 				})
-			}),
-			/* @__PURE__ */ r(t, {
-				component: "h2",
-				className: "ttw:mb-2 ttw:text-center ttw:text-lg ttw:font-bold ttw:text-foreground",
-				"data-testid": l ? "embedded-banking-transfer-money-result-success-title" : "embedded-banking-transfer-money-result-error-title",
-				children: l ? p.successTitle : p.errorTitle
-			}),
-			/* @__PURE__ */ i(t, {
-				variant: "body2",
-				color: "muted",
-				component: "p",
-				className: "ttw:mb-8 ttw:max-w-sm ttw:text-center",
-				children: [
-					p.transferMessagePrefix,
-					/* @__PURE__ */ r("span", {
-						className: "ttw:font-semibold ttw:text-foreground",
-						children: c
-					}),
-					" ",
-					l ? p.successMessageSuffix : p.errorMessageSuffix
-				]
-			}),
-			/* @__PURE__ */ i(e, {
-				type: "button",
-				variant: "outline",
-				className: "ttw:h-11 ttw:w-full ttw:cursor-pointer ttw:gap-2 ttw:rounded-lg ttw:font-semibold",
-				onClick: u,
-				"data-testid": f?.backToTransfers,
-				children: [/* @__PURE__ */ r(a, {
-					className: "ttw:size-4",
-					"aria-hidden": !0
-				}), p.backToTransfers]
-			})
-		]
+			},
+			{
+				label: d.to,
+				value: /* @__PURE__ */ r(t, {
+					name: o.name,
+					number: o.number && { last4: o.number.last4 },
+					numberLabels: { endingIn: d.endingIn }
+				})
+			},
+			{
+				label: d.amount,
+				value: /* @__PURE__ */ r("span", {
+					className: "ttw:tabular-nums",
+					children: s
+				})
+			}
+		],
+		onDone: c,
+		labels: { done: d.done },
+		testIds: { done: u?.done }
 	});
 }
-export { c as TransferResultStep };
+export { a as TransferResultStep };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/reviewTransferStepLabels.js

@@ -1,9 +1,10 @@
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/reviewTransferStepLabels.js
 var e = {
-	fromAccountSection: "From Account",
-	toAccountSection: "To Account",
-	amountSection: "Amount",
-	confirmTransfer: "Confirm transfer",
-	goBack: "Go back"
+	from: "From",
+	to: "To",
+	amount: "Amount",
+	endingIn: "ending in {last4}",
+	showNumber: "Show number",
+	hideNumber: "Hide number"
 };
 export { e as DEFAULT_REVIEW_TRANSFER_STEP_LABELS };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/transferResultStepLabels.js

@@ -1,10 +1,11 @@
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/transferResultStepLabels.js
 var e = {
-	successTitle: "Success!",
-	errorTitle: "Error",
-	transferMessagePrefix: "Your transfer of ",
-	successMessageSuffix: "was sent!",
-	errorMessageSuffix: "was not sent.",
-	backToTransfers: "Back to Transfers"
+	title: "Transfer submitted",
+	description: "It can take 1–2 business days to arrive.",
+	from: "From",
+	to: "To",
+	amount: "Amount",
+	endingIn: "ending in {last4}",
+	done: "Done"
 };
 export { e as DEFAULT_TRANSFER_RESULT_STEP_LABELS };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/useFocusFirstInvalidField.js

@@ -0,0 +1,9 @@
+import { useEffect as e, useRef as t } from "react";
+// ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/useFocusFirstInvalidField.js
+function n(n) {
+	let r = t(null), i = t(n);
+	return e(() => {
+		n !== i.current && (i.current = n, r.current?.querySelector("[aria-invalid=\"true\"]")?.focus());
+	}, [n]), r;
+}
+export { n as useFocusFirstInvalidField };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferAccountValue.js

@@ -0,0 +1,32 @@
+import { MaskedAccountNumber as e } from "../../../../../shared/ui/dist/lib/MaskedAccountNumber/MaskedAccountNumber.js";
+import "../../../../../shared/ui/dist/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+// ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferAccountValue.js
+function r({ name: r, number: i, secondaryLabel: a, numberLabels: o, singleLine: s = !1 }) {
+	return /* @__PURE__ */ n("div", {
+		className: "ttw:flex ttw:min-w-0 ttw:flex-col",
+		children: [
+			s ? /* @__PURE__ */ t("span", {
+				className: "ttw:block ttw:max-w-50 ttw:truncate",
+				title: r,
+				children: r
+			}) : /* @__PURE__ */ t("span", {
+				className: "ttw:min-w-0 ttw:break-words",
+				children: r
+			}),
+			i ? /* @__PURE__ */ t("span", {
+				className: "ttw:font-normal ttw:text-muted-foreground",
+				children: /* @__PURE__ */ t(e, {
+					last4: i.last4,
+					fullNumber: i.fullNumber,
+					labels: o
+				})
+			}) : null,
+			a ? /* @__PURE__ */ t("span", {
+				className: "ttw:text-sm ttw:font-normal ttw:text-muted-foreground",
+				children: a
+			}) : null
+		]
+	});
+}
+export { r as TransferAccountValue };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferDetailSheet.js

@@ -1,110 +1,77 @@
-import { Alert as e, AlertDescription as t, AlertTitle as n, Button as r, Separator as i, Sheet as a, SheetContent as o, SheetHeader as s, SheetTitle as c, Typography as l, cn as u } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { TransferStatusBadge as d } from "./TransferStatusBadge.js";
-import { TransferAccountTile as f } from "./TransferAccountTile.js";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Alert as e, AlertDescription as t, AlertTitle as n, Badge as r, Button as i, DescriptionList as a, DisplayAmount as o, FormSheet as s, cn as c } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { maskLabels as l } from "./maskLabels.js";
+import { TransferAccountValue as u } from "./TransferAccountValue.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { CircleAlert as p } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferDetailSheet.js
-function h({ label: e, account: t }) {
-	return /* @__PURE__ */ m("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-2",
-		children: [/* @__PURE__ */ p(l, {
-			variant: "body2",
-			color: "muted",
-			component: "p",
-			children: e
-		}), /* @__PURE__ */ m("div", {
-			className: "ttw:flex ttw:items-center ttw:gap-3",
-			children: [/* @__PURE__ */ p(f, { kind: t.kind }), /* @__PURE__ */ m("div", {
-				className: "ttw:min-w-0",
-				children: [/* @__PURE__ */ m("p", {
-					className: "ttw:m-0 ttw:flex ttw:gap-1 ttw:text-sm ttw:font-medium",
-					children: [/* @__PURE__ */ p("span", {
-						className: "ttw:truncate",
-						children: t.name
-					}), t.maskLabel ? /* @__PURE__ */ p("span", {
-						className: "ttw:shrink-0",
-						children: t.maskLabel
-					}) : null]
-				}), /* @__PURE__ */ p(l, {
-					variant: "body2",
-					color: "muted",
-					component: "p",
-					children: t.kindLabel
-				})]
-			})]
-		})]
-	});
-}
-function g({ detail: f, onClose: g, onLinkAccountClick: _, labels: v, testIds: y }) {
-	let b = f?.returnedBanner;
-	return /* @__PURE__ */ p(a, {
-		open: !!f,
+var m = (e, t) => /* @__PURE__ */ d(u, {
+	numberLabels: l(t),
+	name: e.name,
+	number: e.number,
+	secondaryLabel: e.kindLabel
+});
+function h({ detail: l, onClose: u, onLinkAccountClick: h, labels: g, testIds: _ }) {
+	let v = l?.returnedBanner;
+	return /* @__PURE__ */ d(s, {
+		open: !!l,
 		onOpenChange: (e) => {
-			e || g?.();
+			e || u?.();
 		},
-		children: /* @__PURE__ */ m(o, {
-			labels: { close: v.detailClose },
-			"data-testid": y?.root,
-			"aria-describedby": void 0,
-			children: [/* @__PURE__ */ p(s, { children: /* @__PURE__ */ p(c, { children: v.detailTitle }) }), f ? /* @__PURE__ */ m("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-6 ttw:overflow-y-auto ttw:px-4 ttw:pb-4",
-				children: [
-					/* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-3",
-						children: [/* @__PURE__ */ p(l, {
-							variant: "h4",
-							component: "p",
-							className: u("ttw:font-semibold ttw:tabular-nums", f.isAmountStruckThrough && "ttw:line-through"),
-							children: f.amountLabel
-						}), /* @__PURE__ */ p(d, {
-							label: f.statusLabel,
-							tone: f.statusTone
-						})]
-					}),
-					b ? /* @__PURE__ */ m(e, {
-						variant: "destructive",
-						"data-testid": y?.returnedBanner,
-						children: [/* @__PURE__ */ p(n, { children: b.title }), /* @__PURE__ */ m(t, { children: [
-							/* @__PURE__ */ p("p", { children: b.description }),
-							/* @__PURE__ */ p("p", { children: b.nextStep }),
-							_ ? /* @__PURE__ */ p(r, {
+		title: g.detailTitle,
+		labels: { close: g.detailClose },
+		testIds: { content: _?.root },
+		children: l ? /* @__PURE__ */ f("div", {
+			className: "ttw:flex ttw:flex-col ttw:gap-6 ttw:pb-6",
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-3",
+					children: [/* @__PURE__ */ d(o, {
+						className: c(l.isAmountStruckThrough && "ttw:line-through"),
+						children: l.amountLabel
+					}), /* @__PURE__ */ d(r, {
+						tone: l.statusTone,
+						children: l.statusLabel
+					})]
+				}),
+				v ? /* @__PURE__ */ f(e, {
+					variant: "destructive",
+					"data-testid": _?.returnedBanner,
+					children: [
+						/* @__PURE__ */ d(p, { "aria-hidden": !0 }),
+						/* @__PURE__ */ d(n, { children: v.title }),
+						/* @__PURE__ */ f(t, { children: [
+							/* @__PURE__ */ d("p", { children: v.description }),
+							/* @__PURE__ */ d("p", { children: v.nextStep }),
+							h ? /* @__PURE__ */ d(i, {
 								type: "button",
 								size: "sm",
 								className: "ttw:mt-2",
-								onClick: _,
-								children: v.returnedLinkAccountCta
+								onClick: h,
+								children: g.returnedLinkAccountCta
 							}) : null
-						] })]
-					}) : null,
-					/* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-4",
-						children: [
-							/* @__PURE__ */ p(h, {
-								label: v.transferFromLabel,
-								account: f.from
-							}),
-							/* @__PURE__ */ p(i, {}),
-							/* @__PURE__ */ p(h, {
-								label: v.transferToLabel,
-								account: f.to
-							})
-						]
-					}),
-					[[v.detailInitiatedByLabel, f.initiatedByLabel], [v.detailInitiatedOnLabel, f.initiatedOnLabel]].map(([e, t]) => /* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1",
-						children: [/* @__PURE__ */ p(l, {
-							variant: "body2",
-							color: "muted",
-							component: "p",
-							children: e
-						}), /* @__PURE__ */ p(l, {
-							variant: "body2",
-							component: "p",
-							children: t
-						})]
-					}, e))
-				]
-			}) : null]
-		})
+						] })
+					]
+				}) : null,
+				/* @__PURE__ */ d(a, { items: [
+					{
+						label: g.transferFromLabel,
+						value: m(l.from, g)
+					},
+					{
+						label: g.transferToLabel,
+						value: m(l.to, g)
+					},
+					{
+						label: g.detailInitiatedByLabel,
+						value: l.initiatedByLabel
+					},
+					{
+						label: g.detailInitiatedOnLabel,
+						value: l.initiatedOnLabel
+					}
+				] })
+			]
+		}) : null
 	});
 }
-export { g as TransferDetailSheet };
+export { h as TransferDetailSheet };