@tesouro/embedded-components-react 0.2.151 → 0.2.153

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

@@ -1,27 +1,120 @@
-import { jsx as e, jsxs as o } from "@emotion/react/jsx-runtime";
-import { useLingui as r } from "@lingui/react";
-import a from "@mui/icons-material/AttachFile";
-import { Box as t, Typography as n } from "@mui/material";
-const h = () => {
+import { jsxs as l, jsx as i } from "@emotion/react/jsx-runtime";
+import { useFormErrors as M, FormErrorDisplay as D } from "./index403.js";
+import { InvoiceItemRow as k } from "./index404.js";
+import { InvoiceTotals as q } from "./index405.js";
+import { CUSTOM_ID as z } from "./index406.js";
+import { useLineItemManagement as B } from "./index381.js";
+import { useLingui as W } from "@lingui/react";
+import { Button as O } from "./index84.js";
+import { Field as Q, FieldContent as Y, FieldLabel as H } from "./index159.js";
+import { Typography as m } from "./index85.js";
+import { Plus as J } from "lucide-react";
+import { useCallback as h, useEffect as K, useRef as X } from "react";
+import { useFormContext as Z, Controller as tt } from "react-hook-form";
+import { LoadingSpinner as et } from "./index136.js";
+import { useGetMeasureUnits as it } from "./index309.js";
+import { InputGroup as rt, InputGroupInput as nt, InputGroupAddon as at } from "./index101.js";
+import { sanitizeTaxRateInput as ot } from "./index382.js";
+import { Separator as st } from "./index140.js";
+const Ct = ({
+  defaultCurrency: d = "USD",
+  registerLineItemCleanupFn: u
+}) => {
   const {
-    i18n: i
-  } = r();
-  return /* @__PURE__ */ e(t, { className: "Monite-PayableDetailsNoAttachedFile", sx: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    textAlign: "center"
-  }, children: /* @__PURE__ */ o(t, { sx: {
-    margin: "auto"
-  }, children: [
-    /* @__PURE__ */ e(a, { color: "primary", fontSize: "large", sx: {
-      marginBottom: 2
-    } }),
-    /* @__PURE__ */ e(n, { color: "secondary", children: i._("This invoice doesn’t have a file attached.") })
-  ] }) });
+    i18n: n
+  } = W(), {
+    control: _,
+    formState: g,
+    getValues: c,
+    watch: N,
+    trigger: v,
+    clearErrors: x
+  } = Z(), b = N("tax_mode") === "inclusive", {
+    data: C,
+    isLoading: L
+  } = it(), {
+    fields: w,
+    subtotalPrice: E,
+    totalPrice: F,
+    totalTaxes: U,
+    lineItemErrors: P,
+    handleAddRow: R,
+    handleRemoveItem: T,
+    setValueWithValidationLocal: p,
+    cleanUpLineItemsForSubmission: y
+  } = B({
+    defaultCurrency: d,
+    isInclusivePricing: b
+  }), r = h((t, e) => {
+    p(t, e, {
+      shouldValidate: !1
+    });
+  }, [p]);
+  K(() => (u?.(y), () => u?.(null)), [u, y]);
+  const $ = X(null), {
+    generalError: S,
+    fieldErrors: A
+  } = M(P), I = h((t, e, a) => {
+    const s = e.measureUnit?.id, o = e.measureUnit?.name;
+    o && !s ? (r(`line_items.${t}.product.measure_unit_id`, ""), r(`line_items.${t}.product.measure_unit_name`, o), r(`line_items.${t}.measure_unit`, {
+      name: o,
+      id: null
+    })) : (s || a) && (r(`line_items.${t}.product.measure_unit_id`, s || a), r(`line_items.${t}.product.measure_unit_name`, void 0), r(`line_items.${t}.measure_unit`, void 0));
+  }, [r]), V = h((t, e, a) => {
+    const s = e.label ?? "";
+    r(`line_items.${t}.product.name`, s), s.trim() && x(`line_items.${t}.product.name`);
+    const o = e.id !== "" && e.id !== z && a;
+    if (r(`line_items.${t}.product_id`, o ? e.id : ""), o) {
+      r(`line_items.${t}.product.price.value`, e.price?.value ?? 0), r(`line_items.${t}.product.price.currency`, d);
+      const f = c(`line_items.${t}.product.measure_unit_id`);
+      I(t, e, f), r(`line_items.${t}.quantity`, e.smallestAmount ?? 1), r(`line_items.${t}.product.smallest_amount`, e.smallestAmount), r(`line_items.${t}.product.type`, "product"), r(`line_items.${t}.product.description`, e.description ?? ""), v(`line_items.${t}`);
+    }
+  }, [d, c, r, I, v, x]);
+  return /* @__PURE__ */ l("div", { ref: $, className: "ttw:flex ttw:flex-col ttw:p-6 ttw:gap-2.5 ttw:border ttw:border-border ttw:rounded-xl", children: [
+    /* @__PURE__ */ l("div", { className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4", children: [
+      /* @__PURE__ */ i(m, { variant: "h4", children: n._("Products and services") }),
+      /* @__PURE__ */ i(m, { variant: "body2", color: "muted", className: "ttw:font-medium", children: n._("Add the products and services on this invoice. You'll have the option to save new items to your inventory.") })
+    ] }),
+    /* @__PURE__ */ i(D, { generalError: g?.errors?.line_items?.root?.message ?? S, fieldErrors: A }),
+    /* @__PURE__ */ l("ul", { className: "ttw:flex ttw:flex-col ttw:gap-2.5", children: [
+      /* @__PURE__ */ l("li", { className: "ttw:flex ttw:items-center ttw:gap-2.5 ttw:h-5", children: [
+        /* @__PURE__ */ i(m, { variant: "body2", className: "ttw:font-medium ttw:leading-5 ttw:min-w-30 ttw:whitespace-nowrap ttw:inline-flex ttw:flex-1", children: n._("Item name") }),
+        /* @__PURE__ */ i(m, { variant: "body2", className: "ttw:font-medium ttw:leading-5 ttw:w-24 ttw:min-w-24", children: n._("Quantity") }),
+        /* @__PURE__ */ i(m, { variant: "body2", className: "ttw:font-medium ttw:leading-5 ttw:w-20.5 ttw:min-w-20.5", children: n._("Units") }),
+        /* @__PURE__ */ i(m, { variant: "body2", className: "ttw:font-medium ttw:leading-5 ttw:max-w-41 ttw:w-full ttw:min-w-29", children: n._("Price") }),
+        /* @__PURE__ */ i(m, { variant: "body2", className: "ttw:font-medium ttw:leading-5 ttw:w-12 ttw:min-w-12", children: n._("Taxable") }),
+        w.length > 1 && /* @__PURE__ */ i("div", { className: "ttw:w-10 ttw:min-w-10" })
+      ] }),
+      L ? /* @__PURE__ */ i("li", { className: "ttw:flex ttw:items-center ttw:justify-center ttw:h-9", children: /* @__PURE__ */ i(et, { className: "ttw:w-5 ttw:h-5" }) }) : w.map((t, e) => {
+        const a = (o) => c(`line_items.${e}.${o}`), s = (o, f, j) => {
+          const G = `line_items.${e}.${o}`;
+          p(G, f, j);
+        };
+        return /* @__PURE__ */ i(k, { field: t, index: e, control: _, errors: g.errors, defaultCurrency: d, measureUnitsData: C, onRequestLineItemValue: a, onLineItemValueChange: s, canRemove: w.length > 1, onUpdateItem: V, onRemoveItem: T, container: $ }, t.id);
+      })
+    ] }),
+    /* @__PURE__ */ l(O, { type: "button", variant: "ghost", onClick: R, className: "ttw:text-primary ttw:hover:text-primary ttw:w-fit", children: [
+      /* @__PURE__ */ i(J, { className: "ttw:size-5 ttw:text-primary" }),
+      n._("Add item")
+    ] }),
+    /* @__PURE__ */ i(tt, { name: "tax_rate", control: _, render: ({
+      field: t
+    }) => /* @__PURE__ */ i(Q, { children: /* @__PURE__ */ l(Y, { className: "ttw:flex-row ttw:justify-end", children: [
+      /* @__PURE__ */ i(H, { htmlFor: t.name, children: n._("Tax rate") }),
+      /* @__PURE__ */ l(rt, { className: "ttw:w-28 ttw:has-[>[data-align=inline-end]]:[&>input]:pr-0", children: [
+        /* @__PURE__ */ i(nt, { ...t, value: t.value ?? "", id: t.name, className: "ttw:text-right", placeholder: n._("e.g. 6.25"), type: "text", inputMode: "decimal", onChange: (e) => {
+          t.onChange(ot(e.target.value));
+        }, onBlur: (e) => {
+          const a = e.target.value;
+          t.onChange(a.endsWith(".") ? a.slice(0, -1) : a), t.onBlur();
+        } }),
+        /* @__PURE__ */ i(at, { align: "inline-end", children: "%" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ i(st, {}),
+    /* @__PURE__ */ i(q, { subtotalPrice: E, totalTaxes: U, totalPrice: F })
+  ] });
 };
 export {
-  h as PayableDetailsNoAttachedFile
+  Ct as ItemsSection
 };

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

@@ -1,22 +1,113 @@
-import { jsx as e } from "@emotion/react/jsx-runtime";
-import { lazy as r, useState as i, useEffect as a, Suspense as u } from "react";
-const m = r(() => import("./index472.js")), C = ({
-  url: o,
-  mimetype: l,
-  name: t,
-  showCloseButton: s,
-  onClose: n
-}) => l === "application/pdf" ? /* @__PURE__ */ e(c, { url: o, showCloseButton: s, onClose: n }) : /* @__PURE__ */ e("img", { className: "Monite-ImageFileViewer", src: o, alt: t, loading: "lazy", style: {
-  width: "100%",
-  objectFit: "contain"
-} }), c = ({
-  url: o,
-  showCloseButton: l,
-  onClose: t
+import { jsxs as a, jsx as t, Fragment as k } from "@emotion/react/jsx-runtime";
+import { useRef as B, useState as T, useEffect as $ } from "react";
+import { useFormContext as F, Controller as L } from "react-hook-form";
+import { useUserPermissions as j } from "./index146.js";
+import "../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../shared/data-access/dist/lib/rest/zod.gen.js";
+import { Scope as E } from "../../shared/data-access/dist/lib/scopes.js";
+import { useLingui as D } from "@lingui/react";
+import { Plus as P, TriangleAlert as V } from "lucide-react";
+import "react-hot-toast";
+import "./index57.js";
+import { useSelectableBankAccounts as I } from "./index317.js";
+import "date-fns";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-dropdown-menu";
+import "./index84.js";
+import "./index92.js";
+import "react-dom";
+import "@mui/x-data-grid";
+import { Badge as W } from "./index221.js";
+import { Field as q, FieldContent as z, FieldError as K } from "./index159.js";
+import { Select as O, SelectTrigger as R, SelectValue as U, SelectContent as G, SelectItem as y, SelectSeparator as H } from "./index271.js";
+import { Typography as d } from "./index85.js";
+import { BankAccountSectionForm as J } from "./index407.js";
+import { Alert as M, AlertTitle as Q, AlertDescription as X } from "./index158.js";
+import { Skeleton as Y } from "./index137.js";
+import { getSourceLabel as g, getLineLabel as x } from "./index372.js";
+const $t = ({
+  disabled: v,
+  embeddedBankName: p
 }) => {
-  const [s, n] = i(!1);
-  return a(() => n(!0), []), s ? /* @__PURE__ */ e(u, { fallback: null, children: /* @__PURE__ */ e(m, { url: o, showCloseButton: l, onClose: t }) }) : null;
+  const {
+    i18n: e
+  } = D(), w = B(!1), {
+    control: N,
+    setValue: i,
+    getFieldState: S,
+    clearErrors: f
+  } = F(), [A, m] = T(!1), h = j().has(E.BankAccountWriteOrg), {
+    bankAccounts: o,
+    isLoading: l
+  } = I(), b = S("bank_account_id");
+  return $(() => {
+    if (o.length === 1 && !l && !w.current) {
+      const r = o[0];
+      i("bank_account_id", r.id), i("bank_account_type", r.bank_account_type), w.current = !0;
+    }
+  }, [i, o, l]), /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:p-6 ttw:gap-2.5 ttw:border ttw:border-border ttw:rounded-xl", children: [
+    /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4", children: [
+      /* @__PURE__ */ t(d, { variant: "h4", children: e._("Payment instructions") }),
+      /* @__PURE__ */ t(d, { variant: "body2", color: "muted", className: "ttw:font-medium", children: e._("Tells the customer how they can pay you. We'll include the selected info on the invoice") })
+    ] }),
+    l || o.length > 0 && !A ? /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:p-3 ttw:gap-4 ttw:border ttw:border-border ttw:rounded-xl", children: [
+      /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-1", children: [
+        /* @__PURE__ */ t(d, { variant: "body2", children: e._("Bank account") }),
+        /* @__PURE__ */ t(d, { variant: "caption", color: "muted", children: e._("Display your bank account number and routing number") })
+      ] }),
+      l ? /* @__PURE__ */ t(Y, { className: "ttw:w-full ttw:h-9 ttw:rounded-md" }) : /* @__PURE__ */ t(L, { name: "bank_account_id", control: N, render: ({
+        field: r,
+        fieldState: {
+          error: u
+        }
+      }) => {
+        const s = o.find((n) => n.id === r.value), _ = s ? g(s.bank_account_type, p, e) : null;
+        return /* @__PURE__ */ t(q, { children: /* @__PURE__ */ a(z, { children: [
+          /* @__PURE__ */ t("div", { className: "ttw:relative", children: /* @__PURE__ */ a(O, { ...r, disabled: v, value: r.value, onValueChange: (n) => {
+            if (n === "add_new")
+              m(!0);
+            else {
+              r.onChange(n);
+              const c = o.find((C) => C.id === n);
+              c && i("bank_account_type", c.bank_account_type), b?.invalid && f("bank_account_id");
+            }
+          }, children: [
+            /* @__PURE__ */ t(R, { id: "bank_account_id", className: "ttw:w-full", "aria-label": e._("Bank account selector"), "aria-invalid": !!u, children: /* @__PURE__ */ t(U, { placeholder: e._("Select bank account"), children: s && /* @__PURE__ */ a("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:justify-between ttw:gap-2", children: [
+              /* @__PURE__ */ t("span", { className: "ttw:truncate", children: x(s, e) }),
+              _ && /* @__PURE__ */ t(W, { variant: "secondary", className: "ttw:shrink-0", children: _ })
+            ] }) }) }),
+            /* @__PURE__ */ a(G, { children: [
+              o.map((n) => {
+                const c = g(n.bank_account_type, p, e);
+                return /* @__PURE__ */ t(y, { value: n.id, children: /* @__PURE__ */ a("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:justify-between ttw:gap-2", children: [
+                  /* @__PURE__ */ t("span", { className: "ttw:truncate", children: x(n, e) }),
+                  c && /* @__PURE__ */ t("span", { className: "ttw:shrink-0 ttw:text-muted-foreground", children: c })
+                ] }) }, n.id);
+              }),
+              h && /* @__PURE__ */ a(k, { children: [
+                /* @__PURE__ */ t(H, {}),
+                /* @__PURE__ */ a(y, { value: "add_new", className: "ttw:text-primary ttw:hover:text-primary ttw:font-semibold ttw:focus:text-primary", children: [
+                  /* @__PURE__ */ t(P, { className: "ttw:text-primary ttw:hover:text-primary ttw:font-semibold ttw:focus:text-primary" }),
+                  e._("Add a new account")
+                ] })
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ t(K, { errors: u ? [u] : [] })
+        ] }) });
+      } })
+    ] }) : /* @__PURE__ */ t(k, { children: h ? /* @__PURE__ */ t(J, { bankAccountsLength: o.length, onCreate: (r) => {
+      m(!1), i("bank_account_id", r), i("bank_account_type", "BANK_DETAILS"), b?.invalid && f("bank_account_id");
+    }, onCancel: () => m(!1) }) : /* @__PURE__ */ a(M, { enableClose: !1, variant: "warning", icon: /* @__PURE__ */ t(V, {}), children: [
+      /* @__PURE__ */ t(Q, { children: e._("There are no bank accounts on file for this account") }),
+      /* @__PURE__ */ t(X, { children: e._("A bank account is required in order to issue invoices. Contact your company admin to set one up.") })
+    ] }) })
+  ] });
 };
 export {
-  C as FileViewer
+  $t as BankAccountSection
 };

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

@@ -1,4 +1,52 @@
-const s = (o) => o.source_of_payable_data === "ocr" && o.ocr_status === "processing";
+import { jsxs as a, jsx as e } from "@emotion/react/jsx-runtime";
+import { Typography as i } from "./index85.js";
+import { useLingui as w } from "@lingui/react";
+import { useFormContext as f, Controller as s } from "react-hook-form";
+import { Field as d, FieldContent as c, FieldLabel as m, FieldDescription as h, FieldError as p } from "./index159.js";
+import { Textarea as u } from "./index121.js";
+const _ = ({
+  disabled: n
+}) => {
+  const {
+    i18n: t
+  } = w(), {
+    control: l
+  } = f();
+  return /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:p-6 ttw:gap-2.5 ttw:border ttw:border-border ttw:rounded-xl", children: [
+    /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4", children: [
+      /* @__PURE__ */ e(i, { variant: "h4", children: t._("Notes") }),
+      /* @__PURE__ */ e(i, { variant: "body2", color: "muted", className: "ttw:font-medium", children: t._("Provide additional information for your customer.") })
+    ] }),
+    /* @__PURE__ */ e(s, { name: "memo", control: l, render: ({
+      field: r,
+      fieldState: {
+        error: o
+      }
+    }) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ a(m, { htmlFor: r.name, className: "ttw:text-nowrap", children: [
+        t._("Opening note to the customer"),
+        /* @__PURE__ */ e(i, { variant: "body2", color: "muted", className: "ttw:leading-snug", children: t._("(optional)") })
+      ] }),
+      /* @__PURE__ */ e(u, { ...r, id: r.name, disabled: n, placeholder: t._("e.g., As discussed on our call, please find the attached invoice."), className: "ttw:h-26 ttw:resize-none", "aria-invalid": !!o }),
+      /* @__PURE__ */ e(h, { children: t._("Appears above your line items. Use it to reference a discussion, agreement, or project.") }),
+      /* @__PURE__ */ e(p, { errors: o ? [o] : [] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { name: "footer", control: l, render: ({
+      field: r,
+      fieldState: {
+        error: o
+      }
+    }) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ a(m, { htmlFor: r.name, className: "ttw:text-nowrap", children: [
+        t._("Closing note to the customer"),
+        /* @__PURE__ */ e(i, { variant: "body2", color: "muted", className: "ttw:leading-snug", children: t._("(optional)") })
+      ] }),
+      /* @__PURE__ */ e(u, { ...r, id: r.name, disabled: n, placeholder: t._("e.g., Thank you for your business!"), className: "ttw:h-26 ttw:resize-none", "aria-invalid": !!o }),
+      /* @__PURE__ */ e(h, { children: t._("Appears below your line items. Commonly used for thank you messages or payment instructions.") }),
+      /* @__PURE__ */ e(p, { errors: o ? [o] : [] })
+    ] }) }) })
+  ] });
+};
 export {
-  s as isPayableInOCRProcessing
+  _ as NotesSection
 };

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

@@ -1,98 +1,207 @@
-import { jsx as i } from "@emotion/react/jsx-runtime";
-import { useDragScroll as b } from "./index404.js";
-import { PayableStatusChip as C } from "./index154.js";
-import { useMoniteContext as M } from "./index57.js";
-import { useCurrencies as x } from "./index58.js";
-import { Skeleton as A } from "./index142.js";
-import { StatusCard as D } from "./index365.js";
-import { useLingui as j } from "@lingui/react";
-import { useRef as L, useEffect as P } from "react";
-import { getPayablesAnalyticsSnapshot as U } from "./index405.js";
-const c = [{
-  groupStatus: "all",
-  apiStatuses: [],
-  representativeStatus: null
-}, {
-  groupStatus: "draft",
-  apiStatuses: ["draft", "new"],
-  representativeStatus: "draft"
-}, {
-  groupStatus: "pending_approval",
-  apiStatuses: ["approve_in_progress"],
-  representativeStatus: "approve_in_progress"
-}, {
-  groupStatus: "rejected",
-  apiStatuses: ["rejected"],
-  representativeStatus: "rejected"
-}, {
-  groupStatus: "ready_to_pay",
-  apiStatuses: ["waiting_to_be_paid", "partially_paid"],
-  representativeStatus: "waiting_to_be_paid"
-}, {
-  groupStatus: "paid",
-  apiStatuses: ["paid"],
-  representativeStatus: "paid"
-}, {
-  groupStatus: "cancelled",
-  apiStatuses: ["canceled"],
-  representativeStatus: "canceled"
-}], O = ({
-  onChangeFilter: o,
-  selectedStatus: s
+import { jsxs as l, jsx as e, Fragment as Q } from "@emotion/react/jsx-runtime";
+import { useState as v, useRef as y, useEffect as N } from "react";
+import { useFormContext as W } from "react-hook-form";
+import { useLingui as tt } from "@lingui/react";
+import { Trash2 as et, Loader2 as at, FileText as rt, X as it, ImageIcon as lt } from "lucide-react";
+import { Typography as n } from "./index85.js";
+import { Button as S } from "./index84.js";
+import { Checkbox as nt } from "./index350.js";
+import { Separator as st } from "./index140.js";
+import { cn as ot } from "./index100.js";
+import "./index57.js";
+import "react-hot-toast";
+import "./index92.js";
+import { useFileInput as ct } from "./index61.js";
+import "react-dom";
+import "@mui/x-data-grid";
+import { ATTACHMENT_ACCEPTED_FORMATS as k, ATTACHMENT_MAX_FILE_SIZE_MB as P, ATTACHMENT_MAX_FILE_COUNT as dt, ATTACHMENT_ACCEPTED_EXTENSIONS as mt } from "./index224.js";
+import { useDeleteFile as ut } from "./index385.js";
+import { useUploadReceivableAttachment as wt } from "./index384.js";
+import { validateAttachmentFile as pt } from "./index408.js";
+import { formatFileSize as ft } from "./index362.js";
+import { toFileArray as B } from "./index409.js";
+const Ot = ({
+  disabled: c,
+  onUploadingChange: u
 }) => {
   const {
-    i18n: l
-  } = j(), {
-    data: r,
-    isLoading: n
-  } = k(), {
-    formatCurrencyToDisplay: m
-  } = x(), {
-    containerRef: S,
-    handleMouseDown: f,
-    handleMouseLeave: v,
-    handleMouseUp: _,
-    handleMouseMove: g
-  } = b();
-  if (n)
-    return /* @__PURE__ */ i("div", { className: "ttw:flex ttw:gap-2", children: Array.from({
-      length: 6
-    }).map((t, u) => /* @__PURE__ */ i(A, { className: "ttw:h-16.5 ttw:w-42 ttw:rounded-xl ttw:animate-pulse" }, u)) });
-  const d = r?.data ?? [], w = c.map(({
-    groupStatus: t,
-    apiStatuses: u
-  }) => {
-    if (t === "all")
-      return {
-        status: "all",
-        count: d.reduce((e, a) => e + a.count, 0),
-        sum_total_amount: d.reduce((e, a) => e + (a.sum_total_amount ?? 0), 0)
-      };
-    const p = d.filter((e) => u.includes(e.status));
-    return {
-      status: t,
-      count: p.reduce((e, a) => e + a.count, 0),
-      sum_total_amount: p.reduce((e, a) => e + (a.sum_total_amount ?? 0), 0)
-    };
-  }).filter((t) => t.status === "all" || t.count > 0), h = (t) => {
-    o("status", t === "all" ? null : t);
-  }, y = (t) => m(t, "USD") ?? "—";
-  return /* @__PURE__ */ i("div", { ref: S, className: "ttw:flex ttw:gap-2 ttw:mb-6 ttw:overflow-x-auto ttw:[scrollbar-width:none] ttw:[&::-webkit-scrollbar]:hidden ttw:cursor-grab ttw:select-none", onMouseDown: f, onMouseLeave: v, onMouseUp: _, onMouseMove: g, children: w.map((t) => {
-    const u = c.find((p) => p.groupStatus === t.status);
-    return /* @__PURE__ */ i(D, { allItemsText: l._("All bills"), isAllStatus: t.status === "all", data: t.status === "all" ? t.count ?? 0 : t.sum_total_amount ?? 0, amountOfItems: t.status !== "all" ? t.count ?? 0 : void 0, selected: s === t.status, onClick: () => h(t.status), formatAmount: y, statusChip: u?.representativeStatus ? /* @__PURE__ */ i(C, { status: u.representativeStatus }) : void 0 }, t.status);
-  }) });
-}, k = () => {
-  const {
-    api: o,
-    queryClient: s
-  } = M(), l = o.finops.getPayablesAnalytics.useQuery({}, {
-    enabled: !!s,
-    refetchInterval: 3e3
-  }), r = U(l.data?.data), n = L(void 0);
-  return P(() => {
-    r !== void 0 && n.current !== void 0 && r !== n.current && s && o.finops.getPayables.invalidateQueries(s), n.current = r;
-  }, [r, o, s]), l;
+    i18n: r
+  } = tt(), {
+    watch: F,
+    setValue: h,
+    getValues: w
+  } = W(), {
+    mutateAsync: O
+  } = wt(), {
+    mutate: I
+  } = ut(), {
+    FileInput: U,
+    openFileInput: L,
+    resetInput: R
+  } = ct({
+    acceptedFormats: k,
+    maxFileSizeInMB: P
+  }), g = F("attachments") ?? [], T = F("frequency"), G = !!T && T !== "once", [m, p] = v([]), [H, b] = v(!1), [X, x] = v(!1), A = y(0), f = y(!1);
+  N(() => (f.current = !1, () => {
+    f.current = !0;
+  }), []);
+  const _ = y(/* @__PURE__ */ new Set()), C = m.some((t) => t.status === "uploading");
+  N(() => {
+    u?.(C);
+  }, [C, u]), N(() => () => u?.(!1), [u]);
+  const z = () => (A.current += 1, `attachment-${A.current}`), j = (t) => t === "too_large" ? r._("File too large (max 3 MB)") : r._("File type not supported. Use PDF, DOC, JPG or PNG"), J = async (t, i) => {
+    try {
+      const a = await O({
+        file: i,
+        file_type: "attachments"
+      });
+      if (f.current || _.current.delete(t)) {
+        I({
+          path: {
+            file_id: a.id
+          }
+        });
+        return;
+      }
+      p((d) => d.filter((s) => s.localId !== t)), h("attachments", [...w("attachments") ?? [], {
+        id: a.id,
+        include_in_email: !0,
+        name: a.name,
+        size: a.size
+      }], {
+        shouldDirty: !0
+      });
+    } catch {
+      const a = _.current.delete(t);
+      if (f.current || a) return;
+      p((d) => d.map((s) => s.localId === t ? {
+        ...s,
+        status: "error",
+        errorMessage: r._("Upload failed. Please try again.")
+      } : s));
+    }
+  }, D = (t) => {
+    if (t.length === 0) return;
+    const i = w("attachments") ?? [], a = m.filter((o) => o.status === "uploading").length;
+    let d = dt - i.length - a;
+    const s = [];
+    let E = !1;
+    for (const o of t) {
+      const M = pt(o, {
+        acceptedFormats: k,
+        acceptedExtensions: mt,
+        maxFileSizeInMB: P
+      });
+      if (M) {
+        s.push({
+          localId: z(),
+          name: o.name,
+          size: o.size,
+          status: "error",
+          errorMessage: j(M)
+        });
+        continue;
+      }
+      if (d <= 0) {
+        E = !0;
+        continue;
+      }
+      d -= 1;
+      const $ = z();
+      s.push({
+        localId: $,
+        name: o.name,
+        size: o.size,
+        status: "uploading"
+      }), J($, o);
+    }
+    s.length > 0 && p((o) => [...o, ...s]), b(E);
+  }, V = (t, i) => {
+    h("attachments", (w("attachments") ?? []).map((a) => a.id === t ? {
+      ...a,
+      include_in_email: i
+    } : a), {
+      shouldDirty: !0
+    });
+  }, q = (t) => {
+    h("attachments", (w("attachments") ?? []).filter((i) => i.id !== t), {
+      shouldDirty: !0
+    }), b(!1), I({
+      path: {
+        file_id: t
+      }
+    });
+  }, Y = (t) => {
+    m.some((i) => i.localId === t && i.status === "uploading") && _.current.add(t), p((i) => i.filter((a) => a.localId !== t)), b(!1);
+  }, Z = (t) => {
+    t.preventDefault(), x(!1), !c && D(B(t.dataTransfer.files));
+  }, K = g.length > 0 || m.length > 0;
+  return /* @__PURE__ */ l("div", { className: "ttw:flex ttw:flex-col ttw:p-6 ttw:gap-2.5 ttw:border ttw:border-border ttw:rounded-xl", children: [
+    /* @__PURE__ */ l("div", { className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4", children: [
+      /* @__PURE__ */ e(n, { variant: "h4", children: r._("Attachments") }),
+      /* @__PURE__ */ e(n, { variant: "body2", color: "muted", className: "ttw:font-medium", children: r._("Associate additional documents with this invoice for your own reference or to share with the customer. e.g. contracts, photos, terms and conditions, etc.") })
+    ] }),
+    K && /* @__PURE__ */ l("div", { className: "ttw:flex ttw:flex-col ttw:gap-2", children: [
+      g.length > 0 && /* @__PURE__ */ l(Q, { children: [
+        /* @__PURE__ */ e(n, { variant: "caption", color: "muted", children: G ? r._("Selected files will be attached to every invoice email in the recurring series.") : r._("Selected files will be attached to the invoice email sent to the customer.") }),
+        /* @__PURE__ */ e(st, {})
+      ] }),
+      /* @__PURE__ */ l("ul", { className: "ttw:flex ttw:flex-col ttw:gap-2", children: [
+        g.map((t) => {
+          const i = `attachment-include-${t.id}`;
+          return /* @__PURE__ */ l("li", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
+            /* @__PURE__ */ e(
+              nt,
+              {
+                id: i,
+                checked: t.include_in_email,
+                disabled: c,
+                "aria-label": `${r._("Include in email:")} ${t.name}`,
+                onCheckedChange: (a) => V(t.id, a === !0)
+              }
+            ),
+            /* @__PURE__ */ l("div", { className: "ttw:flex ttw:w-full ttw:items-center ttw:rounded-lg ttw:gap-3 ttw:bg-muted ttw:px-2 ttw:py-1", children: [
+              /* @__PURE__ */ l("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:gap-1", children: [
+                /* @__PURE__ */ e(n, { variant: "body2", className: "ttw:truncate", children: t.name }),
+                /* @__PURE__ */ l(n, { variant: "body2", color: "muted", className: "ttw:shrink-0", children: [
+                  "(",
+                  ft(t.size),
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ e(S, { type: "button", variant: "ghost", size: "icon", className: "ttw:size-4", disabled: c, "aria-label": `${r._("Remove")} ${t.name}`, onClick: () => q(t.id), children: /* @__PURE__ */ e(et, { className: "ttw:size-4" }) })
+            ] })
+          ] }, t.id);
+        }),
+        m.map((t) => /* @__PURE__ */ l("li", { className: "ttw:flex ttw:w-full ttw:items-center ttw:rounded-lg ttw:gap-3 ttw:bg-muted ttw:px-2 ttw:py-1", children: [
+          t.status === "uploading" ? /* @__PURE__ */ e(at, { className: "ttw:size-5 ttw:shrink-0 ttw:animate-spin ttw:text-muted-foreground" }) : /* @__PURE__ */ e(rt, { className: "ttw:size-5 ttw:shrink-0 ttw:text-destructive" }),
+          /* @__PURE__ */ l("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col", children: [
+            /* @__PURE__ */ e(n, { variant: "body2", className: "ttw:truncate", children: t.name }),
+            t.status === "uploading" ? /* @__PURE__ */ e(n, { variant: "caption", color: "muted", children: r._("Uploading…") }) : /* @__PURE__ */ e(n, { variant: "caption", role: "alert", className: "ttw:text-destructive", children: t.errorMessage })
+          ] }),
+          /* @__PURE__ */ e(S, { type: "button", variant: "ghost", size: "icon", disabled: c, "aria-label": `${r._("Remove")} ${t.name}`, onClick: () => Y(t.localId), children: /* @__PURE__ */ e(it, { className: "ttw:size-4" }) })
+        ] }, t.localId))
+      ] })
+    ] }),
+    /* @__PURE__ */ l("button", { type: "button", disabled: c, onClick: L, onDragOver: (t) => {
+      t.preventDefault(), c || x(!0);
+    }, onDragLeave: (t) => {
+      t.preventDefault(), x(!1);
+    }, onDrop: Z, className: ot("ttw:flex ttw:w-full ttw:flex-col ttw:items-center ttw:gap-2 ttw:rounded-xl ttw:border ttw:border-dashed ttw:p-6 ttw:text-center ttw:disabled:cursor-not-allowed ttw:disabled:opacity-50", X ? "ttw:border-primary ttw:bg-primary/5" : "ttw:border-border ttw:bg-muted"), children: [
+      /* @__PURE__ */ e("span", { className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-full ttw:border ttw:border-border", children: /* @__PURE__ */ e(lt, { className: "ttw:size-5 ttw:text-muted-foreground" }) }),
+      /* @__PURE__ */ l(n, { variant: "body2", children: [
+        r._("Drop your files here, or"),
+        " ",
+        /* @__PURE__ */ e("span", { className: "ttw:text-primary ttw:underline", children: r._("browse to upload") })
+      ] }),
+      /* @__PURE__ */ e(n, { variant: "caption", color: "muted", children: r._("PDF, DOC, JPG, PNG (max. 3MB)") })
+    ] }),
+    H && /* @__PURE__ */ e(n, { variant: "body2", role: "alert", className: "ttw:text-destructive", children: r._("You can attach up to 10 files.") }),
+    /* @__PURE__ */ e(U, { multiple: !0, onChange: (t) => {
+      D(B(t.target.files)), R();
+    } })
+  ] });
 };
 export {
-  O as SummaryCardsFilters
+  Ot as AttachmentSection
 };