@tesouro/embedded-components-react 0.2.298 → 0.2.300

package/dist/libs/tesouro-embedded-components-react/shared/counterpart-management/ui/dist/index9.js

@@ -1,6 +1,480 @@
-import "../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "./index4.js";
-import "./index5.js";
-import "./index7.js";
-import "react";
-import "react/jsx-runtime";
+import { Button as e, Checkbox as t, Input as n, Label as r, Separator as i, Typography as a } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { COUNTERPART_FORM_SHEET_LABELS_EN as o } from "./index2.js";
+import { FieldError as s } from "./index4.js";
+import { AchFieldGroup as c } from "./index5.js";
+import { AddressFieldGroup as l } from "./index6.js";
+import { CounterpartTypeChooser as u } from "./index7.js";
+import { FormSheet as d } from "./index8.js";
+import { useEffect as f, useId as p, useRef as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Plus as v } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/shared/counterpart-management/ui/dist/index9.js
+var y = {
+	entityType: !0,
+	title: !0,
+	profileHeading: !0,
+	addressHeading: !0,
+	taxId: !0,
+	address: !0,
+	bankAccount: !0
+};
+function b({ show: e, sectionsToExpand: t }) {
+	return {
+		isAddressShown: e.address === !0 || e.address === "collapsible",
+		isAddressExpanded: e.address === !0 || t?.address === !0
+	};
+}
+function x(e) {
+	let t = m(null), n = m(e);
+	return f(() => {
+		e !== n.current && (n.current = e, (t.current?.querySelector("[aria-invalid=\"true\"]"))?.focus());
+	}, [e]), t;
+}
+function S(e) {
+	return {
+		...o,
+		...e,
+		address: {
+			...o.address,
+			...e?.address
+		},
+		ach: {
+			...o.ach,
+			...e?.accountHolderNameLabel !== void 0 && { accountHolderName: e.accountHolderNameLabel },
+			...e?.routingNumberLabel !== void 0 && { routingNumber: e.routingNumberLabel },
+			...e?.accountNumberLabel !== void 0 && { accountNumber: e.accountNumberLabel },
+			...e?.ach
+		}
+	};
+}
+function C({ open: o, onOpenChange: f, mode: m, counterpartMode: C = "customer", values: w, errors: T, stateOptions: E, inProgress: D, submitDisabled: O, onChange: k, onAddressChange: A, onBankAccountChange: j, onSubmit: M, onCancel: N, sections: P, sectionsToExpand: F, onAddressExpand: I, labels: L }) {
+	let R = S(L), z = {
+		...y,
+		...P
+	}, B = p(), V = w.entityType === "organization", H = C === "customer", U = C === "vendor", { isAddressShown: W, isAddressExpanded: G } = b({
+		show: z,
+		sectionsToExpand: F
+	}), K = x(T), q = m === "edit" ? H ? R.editTitleCustomer : R.editTitleVendor : H ? R.createTitleCustomer : R.createTitleVendor, J = m === "create" ? H ? R.createDescriptionCustomer : R.createDescriptionVendor : void 0, Y = H ? R.customerTypeHeading : R.vendorTypeHeading, X = H ? R.customerTaxIdHelp : R.vendorTaxIdHelp;
+	return /* @__PURE__ */ g(d, {
+		open: o,
+		onOpenChange: f,
+		title: q,
+		description: J,
+		formError: T?.form,
+		inProgress: D,
+		submitDisabled: O,
+		submitLabel: m === "edit" ? R.saveButton : R.createButton,
+		cancelLabel: R.cancelButton,
+		onSubmit: M,
+		onCancel: N,
+		children: /* @__PURE__ */ _("div", {
+			ref: K,
+			style: { display: "contents" },
+			children: [
+				m === "create" && /* @__PURE__ */ g(u, {
+					value: w.entityType,
+					onChange: (e) => k({ entityType: e }),
+					variant: "pills",
+					labels: {
+						heading: Y,
+						organization: R.businessTypeOption,
+						organizationHint: R.businessTypeHint,
+						individual: R.personTypeOption,
+						individualHint: R.personTypeHint
+					}
+				}),
+				z.profileHeading && /* @__PURE__ */ g(a, {
+					variant: "body2",
+					className: "ttw:font-semibold",
+					children: R.profileHeading
+				}),
+				V ? /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ g(r, {
+							htmlFor: `${B}-legal-name`,
+							children: R.businessNameLabel
+						}),
+						/* @__PURE__ */ g(n, {
+							id: `${B}-legal-name`,
+							autoFocus: !0,
+							value: w.legalName,
+							"aria-invalid": !!T?.legalName,
+							onChange: (e) => k({ legalName: e.target.value })
+						}),
+						/* @__PURE__ */ g(s, { message: T?.legalName })
+					]
+				}) : /* @__PURE__ */ _("div", {
+					className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+					children: [/* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+						children: [
+							/* @__PURE__ */ g(r, {
+								htmlFor: `${B}-first-name`,
+								children: R.firstNameLabel
+							}),
+							/* @__PURE__ */ g(n, {
+								id: `${B}-first-name`,
+								autoFocus: !0,
+								value: w.firstName,
+								"aria-invalid": !!T?.firstName,
+								onChange: (e) => k({ firstName: e.target.value })
+							}),
+							/* @__PURE__ */ g(s, { message: T?.firstName })
+						]
+					}), /* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+						children: [
+							/* @__PURE__ */ g(r, {
+								htmlFor: `${B}-last-name`,
+								children: R.lastNameLabel
+							}),
+							/* @__PURE__ */ g(n, {
+								id: `${B}-last-name`,
+								value: w.lastName,
+								"aria-invalid": !!T?.lastName,
+								onChange: (e) => k({ lastName: e.target.value })
+							}),
+							/* @__PURE__ */ g(s, { message: T?.lastName })
+						]
+					})]
+				}),
+				!V && z.title && /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [/* @__PURE__ */ g(r, {
+						htmlFor: `${B}-title`,
+						children: R.titleLabel
+					}), /* @__PURE__ */ g(n, {
+						id: `${B}-title`,
+						value: w.title,
+						onChange: (e) => k({ title: e.target.value })
+					})]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+					children: [/* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+						children: [
+							/* @__PURE__ */ g(r, {
+								htmlFor: `${B}-email`,
+								children: R.emailLabel
+							}),
+							/* @__PURE__ */ g(n, {
+								id: `${B}-email`,
+								type: "email",
+								value: w.email,
+								"aria-invalid": !!T?.email,
+								onChange: (e) => k({ email: e.target.value })
+							}),
+							/* @__PURE__ */ g(s, { message: T?.email })
+						]
+					}), /* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+						children: [/* @__PURE__ */ g(r, {
+							htmlFor: `${B}-phone`,
+							children: R.phoneLabel
+						}), /* @__PURE__ */ g(n, {
+							id: `${B}-phone`,
+							value: w.phone,
+							onChange: (e) => k({ phone: e.target.value })
+						})]
+					})]
+				}),
+				z.taxId && /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ g(r, {
+							htmlFor: `${B}-tax-id`,
+							children: R.taxIdLabel
+						}),
+						/* @__PURE__ */ g(n, {
+							id: `${B}-tax-id`,
+							value: w.taxId,
+							onChange: (e) => k({ taxId: e.target.value })
+						}),
+						/* @__PURE__ */ g(a, {
+							variant: "caption",
+							className: "ttw:text-muted-foreground",
+							children: X
+						})
+					]
+				}),
+				H && /* @__PURE__ */ _(r, {
+					htmlFor: `${B}-reminders`,
+					className: "ttw:flex ttw:items-start ttw:gap-3 ttw:rounded-md ttw:border ttw:p-3",
+					children: [/* @__PURE__ */ g(t, {
+						id: `${B}-reminders`,
+						checked: w.remindersEnabled,
+						onCheckedChange: (e) => k({ remindersEnabled: e === !0 })
+					}), /* @__PURE__ */ _("span", {
+						className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+						children: [/* @__PURE__ */ g("span", {
+							className: "ttw:text-sm ttw:font-medium",
+							children: R.paymentRemindersLabel
+						}), /* @__PURE__ */ g("span", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: R.paymentRemindersDescription
+						})]
+					})]
+				}),
+				W && /* @__PURE__ */ _(h, { children: [z.addressHeading && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(i, { className: "ttw:my-1" }), /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1",
+					children: [/* @__PURE__ */ g(a, {
+						variant: "body2",
+						className: "ttw:font-semibold",
+						children: R.addressHeading
+					}), H && /* @__PURE__ */ g(a, {
+						variant: "body2",
+						className: "ttw:text-muted-foreground",
+						children: R.customerAddressDescription
+					})]
+				})] }), G ? /* @__PURE__ */ g(l, {
+					idPrefix: `${B}-address`,
+					values: w.address,
+					errors: T?.address,
+					stateOptions: E,
+					onChange: A,
+					labels: R.address
+				}) : /* @__PURE__ */ _(e, {
+					type: "button",
+					variant: "link",
+					className: "ttw:w-fit ttw:px-0",
+					onClick: I,
+					children: [/* @__PURE__ */ g(v, { className: "ttw:size-4" }), R.addAddress]
+				})] }),
+				U && z.bankAccount && /* @__PURE__ */ _(h, { children: [
+					/* @__PURE__ */ g(i, { className: "ttw:my-1" }),
+					/* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1",
+						children: [/* @__PURE__ */ g(a, {
+							variant: "body2",
+							className: "ttw:font-semibold",
+							children: R.paymentMethodsHeading
+						}), /* @__PURE__ */ g(a, {
+							variant: "body2",
+							className: "ttw:text-muted-foreground",
+							children: R.paymentMethodsDescription
+						})]
+					}),
+					/* @__PURE__ */ g(c, {
+						idPrefix: `${B}-ach`,
+						values: w.bankAccount,
+						errors: T?.bankAccount,
+						onChange: (e) => j?.(e),
+						labels: R.ach
+					})
+				] })
+			]
+		})
+	});
+}
+function w({ mode: o, counterpartMode: d = "customer", values: f, errors: m, stateOptions: C, onChange: w, onAddressChange: T, onBankAccountChange: E, sections: D, sectionsToExpand: O, onAddressExpand: k, labels: A }) {
+	let j = S(A), M = {
+		...y,
+		...D
+	}, N = p(), P = f.entityType === "organization", F = d === "customer", I = d === "vendor", { isAddressShown: L, isAddressExpanded: R } = b({
+		show: M,
+		sectionsToExpand: O
+	}), z = x(m), B = F ? j.customerTypeHeading : j.vendorTypeHeading, V = F ? j.customerTaxIdHelp : j.vendorTaxIdHelp;
+	return /* @__PURE__ */ _("div", {
+		ref: z,
+		style: { display: "contents" },
+		children: [
+			o === "create" && M.entityType && /* @__PURE__ */ g(u, {
+				value: f.entityType,
+				onChange: (e) => w({ entityType: e }),
+				variant: "pills",
+				labels: {
+					heading: B,
+					organization: j.businessTypeOption,
+					organizationHint: j.businessTypeHint,
+					individual: j.personTypeOption,
+					individualHint: j.personTypeHint
+				}
+			}),
+			M.profileHeading && /* @__PURE__ */ g(a, {
+				variant: "body2",
+				className: "ttw:font-semibold",
+				children: j.profileHeading
+			}),
+			P ? /* @__PURE__ */ _("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+				children: [
+					/* @__PURE__ */ g(r, {
+						htmlFor: `${N}-legal-name`,
+						children: j.businessNameLabel
+					}),
+					/* @__PURE__ */ g(n, {
+						id: `${N}-legal-name`,
+						autoFocus: !0,
+						value: f.legalName,
+						"aria-invalid": !!m?.legalName,
+						onChange: (e) => w({ legalName: e.target.value })
+					}),
+					/* @__PURE__ */ g(s, { message: m?.legalName })
+				]
+			}) : /* @__PURE__ */ _("div", {
+				className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+				children: [/* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ g(r, {
+							htmlFor: `${N}-first-name`,
+							children: j.firstNameLabel
+						}),
+						/* @__PURE__ */ g(n, {
+							id: `${N}-first-name`,
+							autoFocus: !0,
+							value: f.firstName,
+							"aria-invalid": !!m?.firstName,
+							onChange: (e) => w({ firstName: e.target.value })
+						}),
+						/* @__PURE__ */ g(s, { message: m?.firstName })
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ g(r, {
+							htmlFor: `${N}-last-name`,
+							children: j.lastNameLabel
+						}),
+						/* @__PURE__ */ g(n, {
+							id: `${N}-last-name`,
+							value: f.lastName,
+							"aria-invalid": !!m?.lastName,
+							onChange: (e) => w({ lastName: e.target.value })
+						}),
+						/* @__PURE__ */ g(s, { message: m?.lastName })
+					]
+				})]
+			}),
+			!P && M.title && /* @__PURE__ */ _("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+				children: [/* @__PURE__ */ g(r, {
+					htmlFor: `${N}-title`,
+					children: j.titleLabel
+				}), /* @__PURE__ */ g(n, {
+					id: `${N}-title`,
+					value: f.title,
+					onChange: (e) => w({ title: e.target.value })
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+				children: [/* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ g(r, {
+							htmlFor: `${N}-email`,
+							children: j.emailLabel
+						}),
+						/* @__PURE__ */ g(n, {
+							id: `${N}-email`,
+							type: "email",
+							value: f.email,
+							"aria-invalid": !!m?.email,
+							onChange: (e) => w({ email: e.target.value })
+						}),
+						/* @__PURE__ */ g(s, { message: m?.email })
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [/* @__PURE__ */ g(r, {
+						htmlFor: `${N}-phone`,
+						children: j.phoneLabel
+					}), /* @__PURE__ */ g(n, {
+						id: `${N}-phone`,
+						value: f.phone,
+						onChange: (e) => w({ phone: e.target.value })
+					})]
+				})]
+			}),
+			M.taxId && /* @__PURE__ */ _("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+				children: [
+					/* @__PURE__ */ g(r, {
+						htmlFor: `${N}-tax-id`,
+						children: j.taxIdLabel
+					}),
+					/* @__PURE__ */ g(n, {
+						id: `${N}-tax-id`,
+						value: f.taxId,
+						onChange: (e) => w({ taxId: e.target.value })
+					}),
+					/* @__PURE__ */ g(a, {
+						variant: "caption",
+						className: "ttw:text-muted-foreground",
+						children: V
+					})
+				]
+			}),
+			F && /* @__PURE__ */ _(r, {
+				htmlFor: `${N}-reminders`,
+				className: "ttw:flex ttw:items-start ttw:gap-3 ttw:rounded-md ttw:border ttw:p-3",
+				children: [/* @__PURE__ */ g(t, {
+					id: `${N}-reminders`,
+					checked: f.remindersEnabled,
+					onCheckedChange: (e) => w({ remindersEnabled: e === !0 })
+				}), /* @__PURE__ */ _("span", {
+					className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+					children: [/* @__PURE__ */ g("span", {
+						className: "ttw:text-sm ttw:font-medium",
+						children: j.paymentRemindersLabel
+					}), /* @__PURE__ */ g("span", {
+						className: "ttw:text-sm ttw:text-muted-foreground",
+						children: j.paymentRemindersDescription
+					})]
+				})]
+			}),
+			L && /* @__PURE__ */ _(h, { children: [M.addressHeading && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(i, { className: "ttw:my-1" }), /* @__PURE__ */ _("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1",
+				children: [/* @__PURE__ */ g(a, {
+					variant: "body2",
+					className: "ttw:font-semibold",
+					children: j.addressHeading
+				}), F && /* @__PURE__ */ g(a, {
+					variant: "body2",
+					className: "ttw:text-muted-foreground",
+					children: j.customerAddressDescription
+				})]
+			})] }), R ? /* @__PURE__ */ g(l, {
+				idPrefix: `${N}-address`,
+				values: f.address,
+				errors: m?.address,
+				stateOptions: C,
+				onChange: T,
+				labels: j.address
+			}) : /* @__PURE__ */ _(e, {
+				type: "button",
+				variant: "link",
+				className: "ttw:w-fit ttw:px-0",
+				onClick: k,
+				children: [/* @__PURE__ */ g(v, { className: "ttw:size-4" }), j.addAddress]
+			})] }),
+			I && M.bankAccount && /* @__PURE__ */ _(h, { children: [
+				/* @__PURE__ */ g(i, { className: "ttw:my-1" }),
+				/* @__PURE__ */ _("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1",
+					children: [/* @__PURE__ */ g(a, {
+						variant: "body2",
+						className: "ttw:font-semibold",
+						children: j.paymentMethodsHeading
+					}), /* @__PURE__ */ g(a, {
+						variant: "body2",
+						className: "ttw:text-muted-foreground",
+						children: j.paymentMethodsDescription
+					})]
+				}),
+				/* @__PURE__ */ g(c, {
+					idPrefix: `${N}-ach`,
+					values: f.bankAccount,
+					errors: m?.bankAccount,
+					onChange: (e) => E?.(e),
+					labels: j.ach
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { w as CounterpartFormFields, C as CounterpartFormSheet, C as default, x as useFocusFirstInvalidField };