@tesouro/embedded-components-react 0.11.0 → 0.11.1

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

@@ -1,197 +1,199 @@
-import { Badge as e, Button as t, DataTable as n, Skeleton as r, Typography as i, cn as a } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { PaginationFooter as o } from "../../../../../shared/ui/dist/lib/PaginationFooter/PaginationFooter.js";
-import { WidgetTitleWithIconAndChildren as s } from "../../../../../shared/ui/dist/lib/WidgetTitleWithIconAndChildren/WidgetTitleWithIconAndChildren.js";
+import { Badge as e, Button as t, DataTable as n, DescriptionList as r, Skeleton as i, cn as a } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { WidgetFrame as o } from "../../../../../shared/ui/dist/lib/WidgetFrame/WidgetFrame.js";
+import { EmptyState as s } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as c } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { LoadingRegion as l } from "../../../../../shared/ui/dist/lib/LoadingRegion/LoadingRegion.js";
+import { PaginationFooter as u } from "../../../../../shared/ui/dist/lib/PaginationFooter/PaginationFooter.js";
 import "../../../../../shared/ui/dist/index.js";
-import { TRANSFERS_WIDGET_LABELS_EN as c } from "./labels.js";
-import { TransferMoneyModal as l } from "../TransferMoneyModal/TransferMoneyModal.js";
-import { TransferStatusBadge as u } from "./TransferStatusBadge.js";
-import { TransferDetailSheet as d } from "./TransferDetailSheet.js";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { ArrowDownToLine as h, ArrowDownUp as g } from "lucide-react";
+import { TRANSFERS_WIDGET_LABELS_EN as d } from "./labels.js";
+import { maskLabels as f } from "./maskLabels.js";
+import { TransferAccountValue as p } from "./TransferAccountValue.js";
+import { TransferMoneyModal as m } from "../TransferMoneyModal/TransferMoneyModal.js";
+import { TransferDetailSheet as h } from "./TransferDetailSheet.js";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ArrowDownUp as y } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransfersWidget.js
-var _ = [], v = () => void 0;
-function y({ transferRows: e, isLoading: y, isError: x, onRetry: S, showTransferMoneyCta: C, isTransferMoneyCtaDisabled: w = !1, onTransferMoneyClick: T, transferMoneyModal: E, pagination: D, selectedRowKey: O, onRowClick: k, transferDetail: A, onTransferDetailClose: j, onLinkAccountClick: M, labels: N, testIds: P }) {
-	let F = {
-		...c,
-		...N
-	}, I = [
+var b = [], x = () => void 0;
+function S({ transferRows: e, isLoading: r, isError: a, onRetry: f, showTransferMoneyCta: p, isTransferMoneyCtaDisabled: S = !1, onTransferMoneyClick: D, transferMoneyModal: O, pagination: k, selectedRowKey: A, onRowClick: j, transferDetail: M, onTransferDetailClose: N, onLinkAccountClick: P, labels: F, testIds: I }) {
+	let L = {
+		...d,
+		...F
+	}, R = [
 		{
 			id: "date",
-			header: F.tableHeaderDate,
-			cell: ({ row: e }) => /* @__PURE__ */ p("span", {
-				className: "ttw:font-normal ttw:text-muted-foreground",
+			meta: { fitContent: !0 },
+			header: L.tableHeaderDate,
+			cell: ({ row: e }) => /* @__PURE__ */ _("span", {
+				className: "ttw:font-normal ttw:whitespace-nowrap ttw:text-muted-foreground",
 				children: e.original.dateLabel
 			})
 		},
 		{
 			id: "from",
-			header: F.transferFromLabel,
-			cell: ({ row: e }) => /* @__PURE__ */ p(b, { account: e.original.from })
+			header: L.transferFromLabel,
+			cell: ({ row: e }) => /* @__PURE__ */ _(C, {
+				account: e.original.from,
+				labels: L
+			})
 		},
 		{
 			id: "to",
-			header: F.transferToLabel,
-			cell: ({ row: e }) => /* @__PURE__ */ p(b, { account: e.original.to })
+			header: L.transferToLabel,
+			cell: ({ row: e }) => /* @__PURE__ */ _(C, {
+				account: e.original.to,
+				labels: L
+			})
 		},
 		{
 			id: "status",
-			header: F.tableHeaderStatus,
-			cell: ({ row: e }) => /* @__PURE__ */ m("div", {
-				className: "ttw:flex ttw:flex-col ttw:items-start ttw:gap-1",
-				children: [/* @__PURE__ */ p(u, {
-					label: e.original.statusLabel,
-					tone: e.original.statusTone
-				}), e.original.statusReasonLabel ? /* @__PURE__ */ p("span", {
-					className: "ttw:text-xs ttw:font-normal ttw:text-muted-foreground",
-					children: e.original.statusReasonLabel
-				}) : null]
-			})
+			meta: { fitContent: !0 },
+			header: L.tableHeaderStatus,
+			cell: ({ row: e }) => /* @__PURE__ */ _(w, { row: e.original })
 		},
 		{
 			id: "amount",
-			header: () => /* @__PURE__ */ p("span", {
+			meta: { fitContent: !0 },
+			header: () => /* @__PURE__ */ _("span", {
 				className: "ttw:block ttw:text-right",
-				children: F.tableHeaderAmount
+				children: L.tableHeaderAmount
 			}),
-			cell: ({ row: e }) => /* @__PURE__ */ p("span", {
-				className: a("ttw:block ttw:text-right ttw:font-semibold ttw:tabular-nums", e.original.isAmountStruckThrough && "ttw:line-through"),
-				children: e.original.amountLabel
-			})
+			cell: ({ row: e }) => /* @__PURE__ */ _(T, { row: e.original })
 		}
-	], L = k ? {
-		onRowClick: (e) => k(e.rowKey),
+	], z = j ? {
+		onRowClick: (e) => j(e.rowKey),
 		rowAriaLabel: (e) => e.ariaLabel
-	} : {}, R = D ? /* @__PURE__ */ p(o, {
-		...D,
+	} : {}, B = k ? /* @__PURE__ */ _(u, {
+		...k,
 		labels: {
-			rowsPerPageLabel: F.paginationRowsPerPage,
-			previousPageButton: F.paginationPreviousPage,
-			nextPageButton: F.paginationNextPage
+			rowsPerPageLabel: L.paginationRowsPerPage,
+			previousPageButton: L.paginationPreviousPage,
+			nextPageButton: L.paginationNextPage
 		}
-	}) : null, z = C && !y ? /* @__PURE__ */ p("span", {
+	}) : null, V = p && !r ? /* @__PURE__ */ _("span", {
 		className: "ttw:inline-flex ttw:shrink-0",
-		title: w ? F.transferMoneyCtaDisabledTooltip : void 0,
-		children: /* @__PURE__ */ m(t, {
+		title: S ? L.transferMoneyCtaDisabledTooltip : void 0,
+		children: /* @__PURE__ */ _(t, {
 			type: "button",
 			size: "sm",
-			variant: "default",
-			className: "ttw:inline-flex ttw:shrink-0 ttw:gap-2 ttw:whitespace-nowrap",
-			disabled: w,
-			onClick: w ? void 0 : T,
-			"data-testid": P?.transferMoneyButton,
-			children: [/* @__PURE__ */ p(h, {
-				className: "ttw:size-4",
-				"aria-hidden": !0
-			}), F.transferMoneyCta]
+			className: "ttw:whitespace-nowrap",
+			disabled: S,
+			onClick: S ? void 0 : D,
+			"data-testid": I?.transferMoneyButton,
+			children: L.transferMoneyCta
 		})
-	}) : void 0;
-	return /* @__PURE__ */ m(f, { children: [
-		/* @__PURE__ */ p(s, {
-			icon: /* @__PURE__ */ p(g, {
-				className: "ttw:size-[18px] ttw:shrink-0 ttw:text-primary",
-				"aria-hidden": !0
-			}),
-			title: F.widgetTitle,
-			headerActions: z,
-			children: y ? /* @__PURE__ */ p(r, {
-				"data-testid": P?.skeleton,
-				height: 120,
-				width: "100%",
-				className: "ttw:rounded-md"
-			}) : x ? /* @__PURE__ */ m("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-3",
-				"data-testid": P?.error,
-				children: [
-					/* @__PURE__ */ p(i, {
-						component: "p",
-						variant: "body1",
-						className: "ttw:font-semibold",
-						children: F.loadErrorTitle
-					}),
-					/* @__PURE__ */ p(i, {
-						component: "p",
-						variant: "body2",
-						color: "muted",
-						children: F.loadErrorDescription
-					}),
-					S ? /* @__PURE__ */ p(t, {
-						type: "button",
-						variant: "outline",
-						size: "sm",
-						className: "ttw:self-start ttw:cursor-pointer",
-						onClick: S,
-						"data-testid": P?.retry,
-						children: F.loadErrorRetry
-					}) : null
-				]
-			}) : e.length === 0 ? /* @__PURE__ */ m("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-2",
-				"data-testid": P?.empty,
-				children: [
-					/* @__PURE__ */ p(i, {
-						variant: "body1",
-						className: "ttw:font-semibold",
-						children: F.emptyTitle
-					}),
-					/* @__PURE__ */ p(i, {
-						variant: "body2",
-						color: "muted",
-						component: "p",
-						children: F.emptyDescription
-					}),
-					D && !D.isPreviousDisabled ? R : null
-				]
-			}) : /* @__PURE__ */ m("div", {
+	}) : void 0, H = !r && !a && e.length > 0;
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ _(o, {
+			icon: /* @__PURE__ */ _(y, {}),
+			title: L.widgetTitle,
+			action: V,
+			bodyClassName: H ? "ttw:p-0" : void 0,
+			children: r ? /* @__PURE__ */ _(l, {
+				isLoading: !0,
+				loadingLabel: L.loadingLabel,
+				children: /* @__PURE__ */ _(i, {
+					"data-testid": I?.skeleton,
+					height: 120,
+					width: "100%",
+					className: "ttw:rounded-md"
+				})
+			}) : a ? /* @__PURE__ */ _(c, {
+				title: L.loadErrorTitle,
+				description: L.loadErrorDescription,
+				retryLabel: L.loadErrorRetry,
+				onRetry: f,
+				testId: I?.error
+			}) : e.length === 0 ? /* @__PURE__ */ v("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-4",
+				children: [/* @__PURE__ */ _(s, {
+					title: L.emptyTitle,
+					description: L.emptyDescription,
+					testId: I?.empty
+				}), k && !k.isPreviousDisabled ? B : null]
+			}) : /* @__PURE__ */ v("div", {
 				className: "ttw:flex ttw:flex-col",
-				children: [/* @__PURE__ */ p(n, {
-					columns: I,
+				children: [/* @__PURE__ */ _(n, {
+					framed: !1,
+					columns: R,
 					data: e,
 					getRowId: (e) => e.rowKey,
-					rowTestId: P?.transferRow,
-					rowClassName: (e) => e.rowKey === O ? "ttw:bg-muted ttw:shadow-[inset_3px_0_0_var(--color-primary)]" : void 0,
-					...L,
+					rowTestId: I?.transferRow,
+					rowClassName: (e) => e.rowKey === A ? "ttw:bg-muted" : void 0,
+					...z,
+					renderCard: (e) => /* @__PURE__ */ _(E, {
+						row: e,
+						labels: L
+					}),
 					showPagination: !1,
-					sorting: _,
-					onSortingChange: v,
+					sorting: b,
+					onSortingChange: x,
 					pageSize: e.length,
-					pageSizeOptions: D?.pageSizeOptions ?? [],
-					onPageSizeChange: v,
-					onNextPage: v,
-					onPrevPage: v
-				}), R]
+					pageSizeOptions: k?.pageSizeOptions ?? [],
+					onPageSizeChange: x,
+					onNextPage: x,
+					onPrevPage: x
+				}), B]
 			})
 		}),
-		/* @__PURE__ */ p(l, {
-			...E,
-			labels: F
+		/* @__PURE__ */ _(m, {
+			...O,
+			labels: L
 		}),
-		/* @__PURE__ */ p(d, {
-			detail: A,
-			onClose: j,
-			onLinkAccountClick: M,
-			labels: F,
-			testIds: P?.transferDetail
+		/* @__PURE__ */ _(h, {
+			detail: M,
+			onClose: N,
+			onLinkAccountClick: P,
+			labels: L,
+			testIds: I?.transferDetail
 		})
 	] });
 }
-function b({ account: t }) {
-	return /* @__PURE__ */ m("div", {
-		title: t.kindLabel,
-		className: "ttw:flex ttw:min-w-0 ttw:items-center ttw:gap-2",
+function C({ account: e, labels: t }) {
+	return /* @__PURE__ */ _(p, {
+		singleLine: !0,
+		numberLabels: f(t),
+		name: e.name,
+		number: e.number
+	});
+}
+function w({ row: t }) {
+	return /* @__PURE__ */ _(e, {
+		tone: t.statusTone,
+		children: t.statusLabel
+	});
+}
+function T({ row: e }) {
+	return /* @__PURE__ */ _("span", {
+		className: a("ttw:block ttw:text-right ttw:font-semibold ttw:whitespace-nowrap ttw:tabular-nums", e.isAmountStruckThrough && "ttw:line-through"),
+		children: e.amountLabel
+	});
+}
+function E({ row: e, labels: t }) {
+	return /* @__PURE__ */ v("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-2",
 		children: [
-			/* @__PURE__ */ p("span", {
-				className: "ttw:truncate",
-				children: t.name
+			/* @__PURE__ */ v("div", {
+				className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-2",
+				children: [/* @__PURE__ */ _("span", {
+					className: "ttw:text-muted-foreground",
+					children: e.dateLabel
+				}), /* @__PURE__ */ _(T, { row: e })]
 			}),
-			t.maskLabel ? /* @__PURE__ */ p("span", {
-				className: "ttw:shrink-0 ttw:font-normal ttw:text-muted-foreground",
-				children: t.maskLabel
-			}) : null,
-			t.badgeLabel ? /* @__PURE__ */ p(e, {
-				variant: "secondary",
-				children: t.badgeLabel
-			}) : null
+			/* @__PURE__ */ _(r, { items: [{
+				label: t.transferFromLabel,
+				value: /* @__PURE__ */ _(C, {
+					account: e.from,
+					labels: t
+				})
+			}, {
+				label: t.transferToLabel,
+				value: /* @__PURE__ */ _(C, {
+					account: e.to,
+					labels: t
+				})
+			}] }),
+			/* @__PURE__ */ _(w, { row: e })
 		]
 	});
 }
-export { c as TRANSFERS_WIDGET_LABELS_EN, y as TransfersWidget };
+export { d as TRANSFERS_WIDGET_LABELS_EN, S as TransfersWidget };

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

@@ -1,6 +1,6 @@
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/labels.js
 var e = {
-	widgetTitle: "Transfer money",
+	widgetTitle: "Transfers",
 	transferMoneyCta: "Transfer money",
 	transferMoneyCtaDisabledTooltip: "You must have access to at least two accounts to transfer money",
 	accountFallbackName: "Account",
@@ -16,16 +16,19 @@ var e = {
 	accountKindInternal: "Bank account",
 	accountKindExternal: "External account",
 	externalAccountBadge: "External",
+	returnShortReasonAccountClosed: "Account closed",
+	returnShortReasonInvalidAccountDetails: "Account details don't match",
+	returnShortReasonAccountCannotReceive: "Account can't receive transfers",
+	returnShortReasonRefusedByReceiver: "Declined by recipient",
 	externalAccountFallbackName: "External account",
 	accountMaskTemplate: "- {last4}",
+	accountNumberEndingIn: "ending in {last4}",
+	showAccountNumber: "Show number",
+	hideAccountNumber: "Hide number",
 	detailTitle: "Transfer details",
 	detailClose: "Close",
 	detailInitiatedByLabel: "Initiated by",
 	detailInitiatedOnLabel: "Initiated on",
-	returnShortReasonAccountClosed: "Account closed",
-	returnShortReasonInvalidAccountDetails: "Account details don't match",
-	returnShortReasonAccountCannotReceive: "Account can't receive transfers",
-	returnShortReasonRefusedByReceiver: "Declined by recipient",
 	returnedTitleAccountClosed: "Returned: account closed",
 	returnedTitleInvalidAccountDetails: "Returned: account details don't match",
 	returnedTitleAccountCannotReceive: "Returned: account can't receive transfers",
@@ -39,16 +42,18 @@ var e = {
 	returnedRefundSentence: "{amount} has been refunded to {account}.",
 	returnedPausedSentence: "Transfers to {account} are paused. To keep sending money here, link the account again.",
 	returnedLinkAccountCta: "Link a new account",
-	loadErrorTitle: "We could not load transfers",
-	loadErrorDescription: "Check your connection and try again. If the problem continues, contact support.",
+	loadingLabel: "Loading transfers",
+	loadErrorTitle: "Couldn't load transfers",
+	loadErrorDescription: "Check your connection, then try again.",
 	loadErrorRetry: "Try again",
 	emptyTitle: "No transfers yet",
 	emptyDescription: "When you move money between accounts, your transfers will show up here.",
 	paginationRowsPerPage: "Rows per page",
 	paginationPreviousPage: "Previous page",
 	paginationNextPage: "Next page",
-	modalTitle: "Transfer Money",
+	modalTitle: "Transfer money",
 	modalAccountsSubtitle: "ACH transfers take 1–2 business days to settle.",
+	modalStepLabel: "Step {current} of {total}",
 	modalFromAccountPlaceholder: "From Account",
 	modalToAccountPlaceholder: "To Account",
 	modalAccountsConfirm: "Confirm",
@@ -60,11 +65,13 @@ var e = {
 	modalToLabel: "To",
 	modalAmountLabel: "Amount",
 	modalAmountPlaceholder: "0.00",
+	modalFromRequiredError: "Choose an account to send from.",
+	modalToRequiredError: "Choose an account to send to.",
 	modalContinue: "Continue",
 	modalBack: "Back",
 	modalSubmit: "Submit transfer",
 	modalClose: "Close",
-	modalReviewHeading: "Review Transfer",
+	modalReviewHeading: "Review transfer",
 	modalReviewFromAccountLabel: "From Account",
 	modalReviewToAccountLabel: "To Account",
 	modalAvailableBalanceCaption: "Available balance",
@@ -72,7 +79,9 @@ var e = {
 	modalGoBack: "Go back",
 	modalSuccessTitle: "Transfer submitted",
 	modalSuccessDescription: "Your transfer request was submitted successfully. It may take a short time to appear in your transfer list.",
-	modalResultSuccessTitle: "Success!",
+	modalResultSuccessTitle: "Transfer submitted",
+	modalResultDescription: "It can take 1–2 business days to arrive.",
+	modalDone: "Done",
 	modalResultErrorTitle: "Error",
 	modalResultTransferMessagePrefix: "Your transfer of ",
 	modalResultSuccessMessageSuffix: "was sent!",
@@ -90,6 +99,6 @@ var e = {
 	modalInsufficientFundsError: "Insufficient funds for transfer",
 	modalClearSelections: "Clear selections",
 	modalUnsupportedPairError: "Transfers between external accounts are not supported.",
-	modalSubmitFailedError: "We could not submit your transfer. Please try again."
+	modalSubmitFailedError: "Couldn't submit your transfer. Try again."
 };
 export { e as TRANSFERS_WIDGET_LABELS_EN };

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

@@ -0,0 +1,7 @@
+// ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/maskLabels.js
+var e = (e) => ({
+	endingIn: e.accountNumberEndingIn,
+	showNumber: e.showAccountNumber,
+	hideNumber: e.hideAccountNumber
+});
+export { e as maskLabels };