@tesouro/embedded-components-react 0.3.24 → 0.3.25

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index26.js

@@ -1,49 +1,277 @@
-import { Input as e, Label as t } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { BILL_FORM_FIELDS_LABELS_EN as n } from "./index25.js";
-import { useId as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Badge as e, Button as t, Skeleton as n, cn as r } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ErrorState as i } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { ApprovalPolicyCard as a } from "./index13.js";
+import "./index14.js";
+import { BillOverflowMenu as o } from "./index16.js";
+import "./index17.js";
+import { BillStatusBadge as s } from "./index20.js";
+import "./index21.js";
+import { DueDateValue as c } from "./index23.js";
+import "./index24.js";
+import { mergeBillDetailBodyLabels as l } from "./index25.js";
+import { BillActionButtons as u, NO_BILL_ACTIONS as d, hasBillActions as f } from "./index15.js";
+import { AchFieldGroup as p } from "../../../shared/counterpart-management/ui/dist/index5.js";
+import "../../../shared/counterpart-management/ui/dist/index.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { AlertTriangle as g, ChevronRight as _ } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index26.js
-function o({ values: o, errors: s, onChange: c, disabled: l, testId: u, labels: d }) {
-	let f = {
-		...n,
-		...d
-	}, p = r(), m = (n, r, u) => {
-		let d = `${p}-${n}`, f = `${d}-error`, m = s?.[n];
-		return /* @__PURE__ */ a("div", {
-			className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-			children: [
-				/* @__PURE__ */ i(t, {
-					htmlFor: d,
-					children: r
-				}),
-				/* @__PURE__ */ i(e, {
-					id: d,
-					type: u,
-					value: o[n],
-					disabled: l,
-					"aria-invalid": m ? !0 : void 0,
-					"aria-describedby": m ? f : void 0,
-					onChange: (e) => c({ [n]: e.target.value })
-				}),
-				m ? /* @__PURE__ */ i("p", {
-					id: f,
-					className: "ttw:text-sm ttw:text-destructive",
-					children: m
-				}) : null
-			]
-		});
-	};
-	return /* @__PURE__ */ a("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-4",
-		"data-testid": u,
-		children: [/* @__PURE__ */ a("div", {
-			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [m("invoiceDate", f.invoiceDate, "date"), m("dueDate", f.dueDate, "date")]
-		}), /* @__PURE__ */ a("div", {
-			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [m("invoiceNumber", f.invoiceNumber), m("poNumber", f.poNumber)]
-		})]
+var v = "ttw:text-base ttw:font-semibold", y = "ttw:px-3 ttw:py-2", b = "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:border-b ttw:border-border ttw:py-3 ttw:last:border-b-0";
+function x({ view: x, actions: S = d, scheduledSummary: C, paymentInstructionsForm: w, isLoading: T, isError: E, labels: D }) {
+	let O = l(D);
+	if (E) return /* @__PURE__ */ m(i, {
+		title: O.errorTitle,
+		description: O.errorDescription
+	});
+	if (T || !x) return /* @__PURE__ */ h("div", {
+		"aria-hidden": !0,
+		className: "ttw:flex ttw:flex-col ttw:gap-6",
+		children: [
+			/* @__PURE__ */ m(n, { className: "ttw:h-40 ttw:w-full" }),
+			/* @__PURE__ */ m(n, { className: "ttw:h-32 ttw:w-full" }),
+			/* @__PURE__ */ m(n, { className: "ttw:h-24 ttw:w-full" })
+		]
+	});
+	let k = !x.payTo.paymentInstructionsLabel && w;
+	return /* @__PURE__ */ h("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-6",
+		children: [
+			k ? /* @__PURE__ */ h("div", {
+				className: "ttw:flex ttw:items-center ttw:gap-3 ttw:rounded-md ttw:border ttw:border-amber-200 ttw:bg-amber-50 ttw:px-3 ttw:py-2.5",
+				children: [
+					/* @__PURE__ */ m(g, { className: "ttw:size-4 ttw:shrink-0 ttw:text-amber-800" }),
+					/* @__PURE__ */ m("p", {
+						className: "ttw:flex-1 ttw:text-sm ttw:text-foreground",
+						children: O.missingPaymentInstructionsBanner
+					}),
+					/* @__PURE__ */ m(t, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: w.onOpen,
+						children: O.addPaymentInstructions
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ h("section", {
+				className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:rounded-lg ttw:bg-muted/50 ttw:p-4",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1",
+						children: [/* @__PURE__ */ m("span", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: O.amountDueHeading
+						}), /* @__PURE__ */ m("span", {
+							className: "ttw:text-3xl ttw:font-semibold",
+							children: x.amountDue
+						})]
+					}),
+					/* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(s, {
+						status: x.status,
+						tone: x.statusTone,
+						labels: O.statusBadge
+					}) }),
+					/* @__PURE__ */ h("div", {
+						className: "ttw:grid ttw:grid-cols-2 ttw:gap-x-6",
+						children: [/* @__PURE__ */ h("div", {
+							className: "ttw:flex ttw:flex-col",
+							children: [/* @__PURE__ */ m("span", {
+								className: "ttw:text-xs ttw:text-muted-foreground",
+								children: O.invoiceDateLabel
+							}), /* @__PURE__ */ m("span", {
+								className: "ttw:text-sm ttw:font-medium",
+								children: x.invoiceDateLabel
+							})]
+						}), /* @__PURE__ */ h("div", {
+							className: "ttw:flex ttw:flex-col",
+							children: [/* @__PURE__ */ m("span", {
+								className: "ttw:text-xs ttw:text-muted-foreground",
+								children: O.dueDateLabel
+							}), /* @__PURE__ */ m(c, {
+								className: "ttw:text-sm ttw:font-medium",
+								value: x.dueDateLabel,
+								tone: x.dueDateTone,
+								labels: O.dueDate
+							})]
+						})]
+					}),
+					C ? /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(e, {
+						variant: "outline",
+						className: "ttw:border-emerald-200 ttw:bg-emerald-50 ttw:text-emerald-700",
+						children: C
+					}) }) : f(S) ? /* @__PURE__ */ h("div", {
+						className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-2",
+						children: [/* @__PURE__ */ m(u, { actions: S.row }), /* @__PURE__ */ m(o, {
+							actions: S.menu,
+							triggerLabel: O.overflowMenuTriggerLabel
+						})]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ h("section", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1",
+				children: [
+					/* @__PURE__ */ m("h3", {
+						className: v,
+						children: O.payToHeading
+					}),
+					/* @__PURE__ */ h("div", {
+						className: b,
+						children: [/* @__PURE__ */ m("span", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: O.vendorRow
+						}), /* @__PURE__ */ h("div", {
+							className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-right",
+							children: [/* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:flex-col",
+								children: [/* @__PURE__ */ m("span", {
+									className: "ttw:text-sm ttw:font-medium ttw:text-primary",
+									children: x.payTo.name
+								}), x.payTo.email ? /* @__PURE__ */ m("span", {
+									className: "ttw:text-xs ttw:text-muted-foreground",
+									children: x.payTo.email
+								}) : null]
+							}), /* @__PURE__ */ m(_, {
+								"aria-hidden": !0,
+								className: "ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: b,
+						children: [/* @__PURE__ */ m("span", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: O.paymentInstructionsRow
+						}), /* @__PURE__ */ h("div", {
+							className: "ttw:flex ttw:items-center ttw:gap-2",
+							children: [x.payTo.paymentInstructionsLabel ? /* @__PURE__ */ m("span", {
+								className: "ttw:text-sm ttw:font-medium",
+								children: x.payTo.paymentInstructionsLabel
+							}) : w ? /* @__PURE__ */ m("button", {
+								type: "button",
+								onClick: w.onOpen,
+								className: "ttw:text-sm ttw:font-medium ttw:text-destructive",
+								children: O.addPaymentInstructions
+							}) : /* @__PURE__ */ m("span", {
+								className: "ttw:text-sm ttw:font-medium ttw:text-destructive",
+								children: O.addPaymentInstructions
+							}), /* @__PURE__ */ m(_, {
+								"aria-hidden": !0,
+								className: "ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground"
+							})]
+						})]
+					}),
+					w?.isOpen ? /* @__PURE__ */ h("div", {
+						className: "ttw:mt-2 ttw:rounded-lg ttw:border ttw:border-border ttw:p-4",
+						children: [/* @__PURE__ */ m(p, {
+							idPrefix: "bill-detail-payment-instructions",
+							values: w.values,
+							errors: w.errors,
+							onChange: w.onChange
+						}), /* @__PURE__ */ h("div", {
+							className: "ttw:mt-4 ttw:flex ttw:justify-end ttw:gap-2",
+							children: [/* @__PURE__ */ m(t, {
+								type: "button",
+								variant: "ghost",
+								onClick: w.onCancel,
+								children: O.paymentInstructionsCancel
+							}), /* @__PURE__ */ m(t, {
+								type: "button",
+								loading: w.isSaving,
+								onClick: w.onSave,
+								children: O.paymentInstructionsSave
+							})]
+						})]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ m("dl", {
+				className: "ttw:flex ttw:flex-col",
+				children: x.invoiceFields.map((e) => /* @__PURE__ */ h("div", {
+					className: b,
+					children: [/* @__PURE__ */ m("dt", {
+						className: "ttw:text-sm ttw:text-muted-foreground",
+						children: e.label
+					}), /* @__PURE__ */ m("dd", {
+						className: "ttw:text-right ttw:text-sm ttw:font-medium",
+						children: e.value
+					})]
+				}, e.label))
+			}),
+			/* @__PURE__ */ m("section", { children: /* @__PURE__ */ h("table", {
+				className: "ttw:w-full ttw:text-sm",
+				children: [/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", {
+					className: "ttw:bg-muted/50 ttw:text-xs ttw:text-muted-foreground",
+					children: [
+						/* @__PURE__ */ m("th", {
+							className: r(y, "ttw:text-left ttw:font-normal"),
+							children: O.descriptionAndGlCodeColumn
+						}),
+						/* @__PURE__ */ m("th", {
+							className: r(y, "ttw:text-right ttw:font-normal"),
+							children: O.qtyPriceColumn
+						}),
+						/* @__PURE__ */ m("th", {
+							className: r(y, "ttw:text-right ttw:font-normal"),
+							children: O.amountColumn
+						})
+					]
+				}) }), /* @__PURE__ */ h("tbody", { children: [x.lineItems.map((e) => /* @__PURE__ */ h("tr", {
+					className: "ttw:border-b ttw:border-border",
+					children: [
+						/* @__PURE__ */ m("td", {
+							className: y,
+							children: /* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:flex-col",
+								children: [/* @__PURE__ */ m("span", { children: e.description }), /* @__PURE__ */ m("span", {
+									className: "ttw:text-xs ttw:text-muted-foreground",
+									children: e.glCodeLabel
+								})]
+							})
+						}),
+						/* @__PURE__ */ m("td", {
+							className: r(y, "ttw:text-right ttw:whitespace-nowrap ttw:text-muted-foreground"),
+							children: e.qtyPriceLabel
+						}),
+						/* @__PURE__ */ m("td", {
+							className: r(y, "ttw:text-right ttw:whitespace-nowrap"),
+							children: e.amount
+						})
+					]
+				}, e.id)), x.amountRows.map((e) => /* @__PURE__ */ h("tr", {
+					className: r(e.emphasis ? "ttw:font-semibold" : "ttw:text-muted-foreground"),
+					children: [/* @__PURE__ */ m("td", {
+						colSpan: 2,
+						className: y,
+						children: e.label
+					}), /* @__PURE__ */ m("td", {
+						className: r(y, "ttw:text-right ttw:whitespace-nowrap", e.emphasis && "ttw:text-foreground"),
+						children: e.value
+					})]
+				}, e.label))] })]
+			}) }),
+			x.approvalPolicy ? /* @__PURE__ */ m(a, {
+				view: x.approvalPolicy,
+				labels: O.approvalPolicy
+			}) : null,
+			x.history.length ? /* @__PURE__ */ h("section", {
+				className: "ttw:flex ttw:flex-col ttw:gap-3",
+				children: [/* @__PURE__ */ m("h3", {
+					className: v,
+					children: O.historyHeading
+				}), /* @__PURE__ */ m("ul", {
+					className: "ttw:flex ttw:flex-col",
+					children: x.history.map((e) => /* @__PURE__ */ h("li", {
+						className: "ttw:flex ttw:gap-6 ttw:border-b ttw:border-border ttw:py-3 ttw:text-sm ttw:last:border-b-0",
+						children: [/* @__PURE__ */ m("span", {
+							className: "ttw:w-28 ttw:shrink-0 ttw:text-muted-foreground",
+							children: e.dateLabel
+						}), /* @__PURE__ */ m("span", { children: e.description })]
+					}, e.id))
+				})]
+			}) : null
+		]
 	});
 }
 //#endregion
-export { o as BillFormFields, o as default };
+export { x as BillDetailBody, x as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index28.js

@@ -1,22 +1,9 @@
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index28.js
 var e = {
-	heading: "Line items",
-	helpText: "Enter a single amount for this payment, or split it into line items to assign a GL code to each one.",
-	description: "Description",
-	descriptionPlaceholder: "e.g., Office supplies",
-	glCode: "GL code (optional)",
-	glCodePlaceholder: "Select",
-	quantity: "Quantity",
-	price: "Price",
-	amount: "Amount",
-	currencySymbol: "$",
-	discount: "Discounts",
-	tax: "Tax",
-	totalAmount: "Total amount",
-	addLineItem: "+ Add line item",
-	increaseQuantity: (e) => `Increase quantity — line item ${e}`,
-	decreaseQuantity: (e) => `Decrease quantity — line item ${e}`,
-	removeLineItem: (e) => `Remove line item ${e}`
+	invoiceNumber: "Invoice number",
+	invoiceDate: "Invoice date",
+	dueDate: "Due date",
+	poNumber: "PO number (optional)"
 };
 //#endregion
-export { e as LINE_ITEMS_SECTION_LABELS_EN };
+export { e as BILL_FORM_FIELDS_LABELS_EN };