@tesouro/embedded-components-react 0.2.234 → 0.2.238

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index438.js

@@ -1,59 +1,220 @@
-import { jsx as t, jsxs as h, Fragment as x } from "@emotion/react/jsx-runtime";
-import { Controller as v } from "react-hook-form";
-import { useRootElements as P } from "./index92.js";
-import { TextField as T, Alert as y } from "@mui/material";
-const j = ({
-  control: l,
-  name: n,
-  SelectProps: s,
-  type: a,
-  ...c
-}) => {
-  const i = (e) => e?.type === "custom", {
-    root: p
-  } = P();
-  return /* @__PURE__ */ t(v, { control: l, name: n, render: ({
-    field: e,
-    fieldState: {
-      error: r,
-      isTouched: d
-    },
-    formState: {
-      isValid: u
-    }
-  }) => {
-    const m = (d || !u) && !i(r), g = (f) => {
-      const o = f.target.value;
-      a === "number" ? e.onChange(o === "" ? void 0 : Number(o)) : e.onChange(o);
-    };
-    return /* @__PURE__ */ h(x, { children: [
-      /* @__PURE__ */ t(
-        T,
-        {
-          ...e,
-          ...c,
-          id: n,
-          variant: "standard",
-          type: a,
-          value: e.value ?? "",
-          onChange: g,
-          error: m && !!r?.message,
-          helperText: m && r?.message,
-          SelectProps: {
-            ...s,
-            MenuProps: {
-              ...s?.MenuProps,
-              container: p
-            }
-          }
-        }
-      ),
-      i(r) && /* @__PURE__ */ t(y, { severity: "error", icon: !1, sx: {
-        marginTop: -2
-      }, children: r?.message })
-    ] });
-  } });
-};
-export {
-  j as RHFTextField
+import { useMoniteContext as e } from "./index47.js";
+import { useCurrencies as t } from "./index63.js";
+import { Button as n } from "./index56.js";
+import { MoniteScopedProviders as r } from "./index209.js";
+import { Skeleton as i } from "./index54.js";
+import { useInvoicesFilter as a } from "./index140.js";
+import { useGetReceivables as o } from "./index156.js";
+import { InvoiceStatusChip as s } from "./index226.js";
+import { GetNoRowsOverlay as c } from "./index234.js";
+import { DataTable as l } from "./index239.js";
+import { DueDateCell as u } from "./index423.js";
+import "./index424.js";
+import { InvoicesCounterpartCell as d } from "./index432.js";
+import { InvoiceRecurrenceStatusChip as f } from "./index434.js";
+import { InvoicesFilterBar as p } from "./index435.js";
+import { InvoiceStatusCardsFilter as m } from "./index436.js";
+import { ReceivableCursorFields as h } from "./index437.js";
+import { useEffect as g, useState as _ } from "react";
+import { ArrowDown as v, ArrowUp as y, ArrowUpDown as b } from "lucide-react";
+import { Fragment as x, jsx as S, jsxs as C } from "@emotion/react/jsx-runtime";
+import { useLingui as w } from "@lingui/react";
+import T from "@mui/icons-material/Sync";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index438.js
+var E = (e) => /* @__PURE__ */ S(r, { children: /* @__PURE__ */ S(D, { ...e }) }), D = ({ initialCounterpartId: r, onRowClick: i, setIsCreateInvoiceDialogOpen: f, query: E }) => {
+	let { locale: D, componentSettings: k } = e(), { i18n: A } = w(), [j, M] = _(void 0), [N, P] = _(k.receivables.pageSizeOptions?.[0] ?? 10), [F, I] = _({
+		field: E?.sort ?? "due_date",
+		sort: E?.order ?? "desc"
+	}), { formatCurrencyToDisplay: L } = t(), R = a({ initialCounterpartId: r }), [z, B] = _("");
+	g(() => {
+		let e = setTimeout(() => B(R.state.search), 300);
+		return () => clearTimeout(e);
+	}, [R.state.search]), g(() => {
+		M(void 0);
+	}, [R.queryParams]);
+	let { data: V, isLoading: H, isError: U, refetch: W } = o({
+		sort: F?.field,
+		order: F?.sort,
+		limit: N,
+		pagination_token: j,
+		type: "invoice",
+		...R.queryParams,
+		search_text: z || R.queryParams.search_text || void 0
+	}), G = F ? [{
+		id: F.field,
+		desc: F.sort === "desc"
+	}] : [], K = (e) => {
+		let t = typeof e == "function" ? e(G) : e;
+		t.length > 0 ? I({
+			field: t[0].id,
+			sort: t[0].desc ? "desc" : "asc"
+		}) : I({
+			field: E?.sort ?? "due_date",
+			sort: E?.order ?? "desc"
+		}), M(void 0);
+	}, q = [
+		{
+			accessorKey: "due_date",
+			header: ({ column: e }) => {
+				let t = e.getIsSorted();
+				return /* @__PURE__ */ C("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-inherit",
+					children: [A._("Due date"), /* @__PURE__ */ S(n, {
+						variant: "ghost",
+						onClick: () => e.toggleSorting(t === "asc"),
+						children: S(t === "asc" ? y : t === "desc" ? v : b, { className: "ttw:size-4" })
+					})]
+				});
+			},
+			cell: ({ row: e }) => /* @__PURE__ */ S(u, { data: e.original }),
+			enableSorting: h.includes("due_date")
+		},
+		{
+			accessorKey: "status",
+			header: A._("Status"),
+			cell: ({ row: e }) => {
+				if (e.original.type === "invoice" && e.original.status !== "recurring") return /* @__PURE__ */ S(s, {
+					status: e.original.status,
+					dotSize: "small"
+				});
+				if (e.original.type === "invoice" && e.original.status === "recurring") return /* @__PURE__ */ S(O, { recurrenceId: e.original.recurrence_id ?? "" });
+			}
+		},
+		{
+			accessorKey: "document_id",
+			header: A._("Number"),
+			cell: ({ row: e }) => {
+				let t = e.original.document_id;
+				return e.original.status === "recurring" ? /* @__PURE__ */ C("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-1 ttw:text-inherit",
+					children: [/* @__PURE__ */ S(T, {
+						sx: { fontSize: "inherit" },
+						color: "inherit"
+					}), A._("Recurring")]
+				}) : t || A._("INV-auto");
+			}
+		},
+		{
+			accessorKey: "counterpart_name",
+			header: A._("Customer"),
+			cell: ({ row: e }) => /* @__PURE__ */ S(d, {
+				counterpartName: e.original.counterpart_name,
+				counterpartId: e.original.counterpart_id
+			})
+		},
+		{
+			accessorKey: "issue_date",
+			header: ({ column: e }) => {
+				let t = e.getIsSorted();
+				return /* @__PURE__ */ C("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-inherit",
+					children: [A._("Issue date"), /* @__PURE__ */ S(n, {
+						variant: "ghost",
+						onClick: () => e.toggleSorting(t === "asc"),
+						children: S(t === "asc" ? y : t === "desc" ? v : b, { className: "ttw:size-4" })
+					})]
+				});
+			},
+			cell: ({ row: e }) => {
+				let t = e.original.issue_date;
+				return t ? A.date(t, D.dateFormat) : "—";
+			},
+			enableSorting: h.includes("issue_date")
+		},
+		{
+			accessorKey: "total_amount",
+			header: () => /* @__PURE__ */ S("div", {
+				className: "ttw:text-right",
+				children: A._("Amount")
+			}),
+			cell: ({ row: e }) => {
+				let t = e.original.total_amount;
+				return /* @__PURE__ */ S("div", {
+					className: "ttw:text-right",
+					children: t ? L(t, e.original.currency) : ""
+				});
+			}
+		}
+	], J = R.activeFilterCount > 0, Y = !!z;
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(m, {
+		selectedStatus: R.state.status.length === 0 ? null : R.state.status[0],
+		onChangeFilter: (e) => R.setState((t) => ({
+			...t,
+			status: e ? [e] : []
+		}))
+	}), /* @__PURE__ */ S(l, {
+		columns: q,
+		data: V?.data ?? [],
+		sorting: G,
+		onSortingChange: K,
+		pageSize: N,
+		onPageSizeChange: P,
+		nextPaginationToken: V?.next_pagination_token ?? void 0,
+		prevPaginationToken: V?.prev_pagination_token ?? void 0,
+		onPaginationTokenChange: M,
+		onRowClick: (e) => i?.(e.id),
+		rowLabel: A._("invoices"),
+		filterComponent: /* @__PURE__ */ S(p, {
+			searchValue: R.state.search,
+			onSearchChange: (e) => R.setState((t) => ({
+				...t,
+				search: e
+			})),
+			activeFilterCount: R.activeFilterCount,
+			activeChips: R.activeChips,
+			onDismissChip: R.clearFilter,
+			onClearAll: R.clearAll,
+			activeDateFields: R.state.activeDateFields,
+			onDateFieldRangeChange: (e, { from: t, to: n }) => R.setDateFieldRange(e, t, n),
+			onDateFieldPresetChange: R.setDateFieldPreset,
+			allPresets: R.datePresets,
+			statusOptions: R.statusOptions,
+			selectedStatus: R.state.status,
+			onStatusChange: (e) => R.setState((t) => ({
+				...t,
+				status: e
+			})),
+			amountMode: R.state.amountMode,
+			onAmountModeChange: (e) => R.setState((t) => ({
+				...t,
+				amountMode: e
+			})),
+			amountMin: R.state.amountMin,
+			amountMax: R.state.amountMax,
+			onAmountMinChange: (e) => R.setState((t) => ({
+				...t,
+				amountMin: e
+			})),
+			onAmountMaxChange: (e) => R.setState((t) => ({
+				...t,
+				amountMax: e
+			})),
+			customerName: R.state.customerName,
+			onCustomerNameChange: (e) => R.setState((t) => ({
+				...t,
+				customerName: e
+			}))
+		}),
+		children: /* @__PURE__ */ S(c, {
+			isLoading: H,
+			dataLength: V?.data.length || 0,
+			isFiltering: J,
+			isSearching: Y,
+			isError: U,
+			onCreate: () => f?.(!0),
+			refetch: W,
+			entityName: A._("Invoices"),
+			actionButtonLabel: A._("Create Invoice"),
+			actionOptions: [A._("Invoice")],
+			type: "no-data"
+		})
+	})] });
+}, O = ({ recurrenceId: t }) => {
+	let { api: n } = e(), { data: r, isLoading: a } = n.finops.getRecurrencesId.useQuery({ path: { recurrence_id: t } });
+	return a ? /* @__PURE__ */ S(i, { className: "ttw:w-full ttw:inline-block" }) : r?.status ? /* @__PURE__ */ S(f, {
+		status: r.status,
+		dotSize: "small"
+	}) : null;
 };
+//#endregion
+export { E as InvoicesTable };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index439.js

@@ -1,43 +1,42 @@
-import { jsx as l, jsxs as f, Fragment as x } from "@emotion/react/jsx-runtime";
-import { Controller as h } from "react-hook-form";
-import { Alert as g } from "@mui/material";
-import { TimeField as T } from "@mui/x-date-pickers";
-const q = ({
-  control: n,
-  name: o,
-  required: a,
-  fullWidth: m,
-  slotProps: s,
-  ...d
-}) => {
-  const i = (r) => r?.type === "custom";
-  return /* @__PURE__ */ l(h, { control: n, name: o, render: ({
-    field: r,
-    fieldState: {
-      error: e,
-      isTouched: u
-    },
-    formState: {
-      isValid: c
-    }
-  }) => {
-    const t = (u || !c) && !i(e), p = r.value !== null ? new Date(r.value) : null;
-    return /* @__PURE__ */ f(x, { children: [
-      /* @__PURE__ */ l(T, { ...r, ...d, variant: "standard", required: a, fullWidth: m, value: p, helperText: t && e?.message, slotProps: {
-        ...s,
-        textField: {
-          ...s?.textField,
-          id: o,
-          error: t && !!e?.message,
-          helperText: t && e?.message
-        }
-      } }),
-      i(e) && /* @__PURE__ */ l(g, { severity: "error", icon: !1, sx: {
-        marginTop: -2
-      }, children: e?.message })
-    ] });
-  } });
-};
-export {
-  q as RHFTimePicker
+import { useDebounceCallback as e } from "./index185.js";
+import { jsx as t, jsxs as n } from "@emotion/react/jsx-runtime";
+import { FormControl as r, Input as i, InputAdornment as a, InputLabel as o } from "@mui/material";
+import s from "@mui/icons-material/Search";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index439.js
+var c = ({ label: c, value: l, placeholder: u, onChange: d }) => {
+	let f = e((e) => d(e), 500);
+	return /* @__PURE__ */ n(r, {
+		"aria-label": "search-by-name",
+		className: "Monite-SearchField Monite-FilterControl",
+		children: [c && /* @__PURE__ */ t(o, {
+			htmlFor: "search-by-name",
+			shrink: !0,
+			children: c
+		}), /* @__PURE__ */ t(i, {
+			id: "search-by-name",
+			name: "search-by-name",
+			"aria-label": "search-by-name",
+			placeholder: u,
+			value: l,
+			onChange: (e) => {
+				f(e.target.value || null);
+			},
+			startAdornment: /* @__PURE__ */ t(a, {
+				position: "end",
+				children: /* @__PURE__ */ t(s, { fontSize: "medium" })
+			}),
+			sx: {
+				"&::placeholder": {
+					opacity: 1,
+					color: "text.primary"
+				},
+				"& input::placeholder": {
+					opacity: 1,
+					color: "text.primary"
+				}
+			}
+		})]
+	});
 };
+//#endregion
+export { c as SearchField };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index44.js

@@ -1,81 +1,59 @@
-import { jsx as e, jsxs as a } from "@emotion/react/jsx-runtime";
-import { MoniteScopedProviders as y } from "./index83.js";
-import { useCurrencies as S } from "./index58.js";
-import { useId as C, useMemo as x, useCallback as P } from "react";
-import "./index92.js";
-import { useLingui as N } from "@lingui/react";
-import "react-dom";
-import "./index57.js";
-import "@mui/x-data-grid";
-import { zodResolver as g } from "@hookform/resolvers/zod";
-import { Button as p } from "./index84.js";
-import { Sheet as U, SheetContent as _, SheetHeader as $, SheetTitle as F, SheetDescription as I, SheetFooter as j, SheetClose as D } from "./index135.js";
-import { LoadingSpinner as L } from "./index136.js";
-import { useForm as M, FormProvider as k } from "react-hook-form";
-import { useCreateProduct as q } from "./index175.js";
-import "react-hot-toast";
-import { getProductValidationSchema as z } from "./index176.js";
-import { ProductFormContent as T } from "./index177.js";
-const ie = (s) => /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(V, { ...s }) }), V = ({
-  onClose: s,
-  open: u,
-  onCreated: h
-}) => {
-  const {
-    i18n: r
-  } = N(), {
-    formatToMinorUnits: m
-  } = S(), c = `product-form-${C()}`, {
-    mutate: l,
-    isPending: o
-  } = q(h), w = x(() => ({
-    name: "",
-    type: "product",
-    measureUnitId: "",
-    pricePerUnit: void 0,
-    currency: "USD",
-    description: void 0
-  }), []), {
-    watch: i,
-    ...n
-  } = M({
-    resolver: g(z(r)),
-    defaultValues: w
-  }), f = i("type"), b = !!i("name")?.trim() && i("pricePerUnit") !== void 0, v = P((d) => {
-    d.preventDefault(), d.stopPropagation(), n.handleSubmit((t) => {
-      l({
-        body: {
-          name: t.name,
-          type: t.type,
-          price: {
-            value: m(t.pricePerUnit, t.currency) ?? 0,
-            currency: t.currency
-          },
-          description: t.description,
-          ...t.measureUnitId ? {
-            measure_unit_id: t.measureUnitId
-          } : {}
-        }
-      });
-    })(d);
-  }, [l, m, n.handleSubmit]);
-  return /* @__PURE__ */ e(U, { open: u, onOpenChange: s, children: /* @__PURE__ */ a(_, { className: "ttw:gap-0", children: [
-    /* @__PURE__ */ a($, { className: "ttw:border-b ttw:border-border", children: [
-      /* @__PURE__ */ e(F, { className: "ttw:text-2xl", children: r._("Add a product or service") }),
-      /* @__PURE__ */ e(I, { className: "ttw:max-w-130", children: r._("Save the products and services you sell so you can quickly add them as line items on invoices.") })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:px-6 ttw:py-8 ttw:overflow-auto", children: /* @__PURE__ */ e(k, { ...n, watch: i, children: /* @__PURE__ */ e("form", { id: c, onSubmit: v, children: /* @__PURE__ */ e(T, { isLoading: o }) }) }) }),
-    /* @__PURE__ */ a(j, { className: "ttw:border-t ttw:border-border ttw:flex-row ttw:justify-end", children: [
-      /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(p, { variant: "outline", disabled: o, className: "ttw:flex-1 ttw:border-border", children: r._("Cancel") }) }),
-      /* @__PURE__ */ a(p, { type: "submit", form: c, className: "ttw:flex-1", title: r._("Complete the form to continue"), disabled: o || !b, children: [
-        o && /* @__PURE__ */ e(L, { className: "ttw:border-white ttw:border-t-transparent ttw:size-4" }),
-        r._("Save {type}", {
-          type: f
-        })
-      ] })
-    ] })
-  ] }) });
-};
-export {
-  ie as CreateProduct
-};
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index44.js
+function e(e) {
+	return /gradient\(/.test(e);
+}
+function t(t, n) {
+	t.background && (e(t.background) ? (n.backgroundImage = t.background, n.background = t.background) : (n.background = t.background, n.backgroundImage = "none"));
+}
+function n(e, t) {
+	e.color && (t.color = e.color);
+}
+function r(e, t) {
+	e.border && (t.border = e.border), e.borderRadius !== void 0 && (t.borderRadius = typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius);
+}
+function i(e, t) {
+	e.fontWeight !== void 0 && (t.fontWeight = e.fontWeight);
+}
+function a(e, t) {
+	e.boxShadow !== void 0 && (t.boxShadow = e.boxShadow);
+}
+function o(e, t) {
+	if (!e.transitionDuration && !e.transitionTimingFunction && !e.transitionProperty) return;
+	let n = [], r = e.transitionProperty || "all";
+	n.push(r), e.transitionDuration && n.push(e.transitionDuration), e.transitionTimingFunction && n.push(e.transitionTimingFunction), t.transition = n.join(" ");
+}
+function s(e) {
+	if (!e) return {};
+	let s = {};
+	return t(e, s), n(e, s), r(e, s), i(e, s), a(e, s), o(e, s), s;
+}
+function c(e, t) {
+	return !t || !t[e] ? {} : s(t[e]);
+}
+function l(e) {
+	if (!e) return {};
+	let t = {};
+	return [
+		"primary",
+		"secondary",
+		"tertiary",
+		"destructive"
+	].forEach((n) => {
+		let r = e[n];
+		if (!r) return;
+		let i = `--ttw-btn-payables-${n}`;
+		r.background && (t[`${i}-bg`] = r.background), r.color && (t[`${i}-color`] = r.color), r.border && (t[`${i}-border`] = r.border), r.borderRadius !== void 0 && (t[`${i}-radius`] = typeof r.borderRadius == "number" ? `${r.borderRadius}px` : r.borderRadius), r.fontWeight !== void 0 && (t[`${i}-weight`] = String(r.fontWeight)), r.boxShadow && (t[`${i}-shadow`] = r.boxShadow), r.transitionProperty && (t[`${i}-transition-property`] = r.transitionProperty), r.transitionDuration && (t[`${i}-transition-duration`] = r.transitionDuration), r.transitionTimingFunction && (t[`${i}-transition-timing`] = r.transitionTimingFunction), [
+			"hover",
+			"active",
+			"focus",
+			"disabled"
+		].forEach((e) => {
+			let n = r[e];
+			if (!n) return;
+			let a = `${i}-${e}`;
+			n.background && (t[`${a}-bg`] = n.background), n.color && (t[`${a}-color`] = n.color), n.border && (t[`${a}-border`] = n.border), n.boxShadow && (t[`${a}-shadow`] = n.boxShadow);
+		});
+	}), t;
+}
+//#endregion
+export { t as applyBackgroundStyles, r as applyBorderStyles, n as applyColorStyles, a as applyShadowStyles, o as applyTransitionStyles, i as applyTypographyStyles, l as generatePayablesButtonCssVars, c as getButtonStateStyles, s as getButtonStyles, e as isGradient };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index440.js

@@ -1,45 +1 @@
-import { jsxs as x, Fragment as b, jsx as r } from "@emotion/react/jsx-runtime";
-import { useState as g } from "react";
-import f from "@mui/icons-material/MoreVert";
-import { IconButton as y, Menu as C, MenuItem as k, ListItemText as M } from "@mui/material";
-const j = ({
-  id: e = "dropdown-menu-button",
-  items: a,
-  iconButtonProps: d,
-  menuProps: s
-}) => {
-  const [t, i] = g(null), n = !!t, m = (o) => {
-    i(o.currentTarget);
-  }, l = () => {
-    i(null);
-  };
-  return /* @__PURE__ */ x(b, { children: [
-    /* @__PURE__ */ r(y, { id: e, onClick: m, sx: {
-      border: "1px solid",
-      borderColor: "divider",
-      borderRadius: 1,
-      width: 40,
-      height: 40
-    }, "aria-expanded": n, "aria-haspopup": "true", ...d, children: /* @__PURE__ */ r(f, {}) }),
-    /* @__PURE__ */ r(C, { anchorEl: t, open: n, onClose: l, container: () => document.body, anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "right"
-    }, transformOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    }, MenuListProps: {
-      "aria-labelledby": e,
-      role: "menu"
-    }, ...s, children: a.map(({
-      key: o,
-      label: p,
-      onClick: u,
-      sx: c
-    }) => /* @__PURE__ */ r(k, { id: o, onClick: (h) => {
-      l(), u?.(h);
-    }, sx: c, children: /* @__PURE__ */ r(M, { primary: p }) }, o)) })
-  ] });
-};
-export {
-  j as DropdownMenu
-};
+import "./index439.js";