@tesouro/embedded-components-react 0.2.84 → 0.2.86

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

@@ -1,164 +1,191 @@
-import { jsxs as s, jsx as r, Fragment as z } from "@emotion/react/jsx-runtime";
-import { useState as L } from "react";
-import { getCounterpartName as T } from "./index7.js";
-import { PayableStatusChip as h } from "./index145.js";
-import { useCounterpartById as W } from "./index70.js";
-import "@tanstack/react-query";
-import "./index57.js";
-import "react-hot-toast";
-import { useLingui as q } from "@lingui/react";
-import { DropdownMenu as G } from "./index466.js";
-import { FullScreenModalHeader as J } from "./index467.js";
-import { Box as K, Button as C } from "@mui/material";
-import { Wallet as Q } from "lucide-react";
-import { isPayableInOCRProcessing as U } from "./index311.js";
-import { PayableDetailsCancelModal as V } from "./index468.js";
-import { isBillOverdue as X } from "./index150.js";
-const fe = ({
-  payable: o,
-  permissions: a,
-  setEdit: d,
-  isEdit: _,
-  submitInvoice: b,
-  rejectInvoice: y,
-  approveInvoice: I,
-  forceRejectInvoice: j,
-  forceApproveInvoice: k,
-  cancelInvoice: x,
-  reopenInvoice: g,
-  deleteInvoice: R,
-  payInvoice: B,
-  payableDetailsFormId: $,
-  onClose: l,
-  modalComponent: D,
-  showPayButton: P
+import { jsxs as c, jsx as a } from "@emotion/react/jsx-runtime";
+import { useState as x, useRef as te, useCallback as f, useMemo as C, useEffect as ne } from "react";
+import { useMoniteContext as ae } from "./index57.js";
+import { useCurrencies as re } from "./index58.js";
+import "./index92.js";
+import { useLingui as ie } from "@lingui/react";
+import "react-dom";
+import "@mui/x-data-grid";
+import { Combobox as se, ComboboxInput as oe, ComboboxContent as le, ComboboxList as me, ComboboxItem as b, ComboboxSeparator as ue } from "./index90.js";
+import { InputGroupAddon as ce } from "./index101.js";
+import { Loader2 as E, Plus as de } from "lucide-react";
+const y = "__create-new__", u = "custom", Ne = ({
+  fieldName: i,
+  error: F,
+  disabled: z,
+  index: B = 0,
+  defaultCurrency: G,
+  measureUnits: _,
+  container: H,
+  onCreateItem: M,
+  onChange: o
 }) => {
   const {
-    i18n: t
-  } = q(), {
-    data: w
-  } = W(o?.counterpart_id), [A, p] = L(!1), m = T(w), E = X(o?.status ?? "draft", o?.due_date), c = {
-    edit: {
-      variant: "outlined",
-      onClick: () => d(!0),
-      children: t._("Edit")
-    },
-    save: {
-      variant: "contained",
-      form: $,
-      type: "submit",
-      children: t._("Save")
-    },
-    cancelEdit: {
-      variant: "outlined",
-      onClick: () => {
-        d(!1), !o && l && l();
-      },
-      children: t._("Cancel")
-    },
-    submit: {
-      variant: "contained",
-      onClick: () => b(),
-      children: t._("Submit")
-    },
-    reject: {
-      variant: "text",
-      color: "error",
-      onClick: () => y(),
-      children: t._("Reject")
-    },
-    reopen: {
-      variant: "text",
-      color: "error",
-      onClick: () => g(),
-      children: t._("Reopen")
-    },
-    approve: {
-      variant: "contained",
-      onClick: () => I(),
-      children: t._("Approve")
-    },
-    cancel: {
-      variant: "text",
-      color: "error",
-      onClick: () => p(!0),
-      children: t._("Cancel bill")
-    },
-    delete: {
-      variant: "text",
-      color: "error",
-      onClick: () => {
-        R(), l?.();
-      },
-      children: t._("Delete bill")
-    },
-    pay: {
-      variant: "contained",
-      size: "small",
-      onClick: () => B(),
-      disabled: !P,
-      startIcon: /* @__PURE__ */ r(Q, { size: 14 }),
-      children: t._("Pay")
+    i18n: A
+  } = ie(), D = G, [t, h] = x(""), [v, O] = x(!1), [K, N] = x(null), [I, d] = x(!1), w = te(!1), {
+    api: Q
+  } = ae(), {
+    formatCurrencyToDisplay: T
+  } = re(), {
+    data: P,
+    isLoading: R,
+    fetchNextPage: U,
+    hasNextPage: j,
+    isFetchingNextPage: k
+  } = Q.finops.getProducts.useInfiniteQuery({
+    query: {
+      limit: 20,
+      currency: D
+    }
+  }, {
+    initialPageParam: {
+      query: {
+        pagination_token: void 0
+      }
     },
-    forceApprove: {
-      variant: "outlined",
-      onClick: () => k(),
-      children: t._("Force Approve")
+    getNextPageParam: (e) => {
+      if (e.next_pagination_token)
+        return {
+          query: {
+            pagination_token: e.next_pagination_token
+          }
+        };
     },
-    forceReject: {
-      variant: "outlined",
-      color: "error",
-      onClick: () => j(),
-      children: t._("Force Reject")
-    }
-  }, F = "Monite-PayableDetails-Header", S = a.includes("cancel"), M = o?.document_id ? m ? `${t._("Bill")} #${o.document_id} ${t._("from")} ${m}` : _ ? `${t._("Edit bill")} #${o.document_id}` : `${t._("Bill")} #${o.document_id}` : t._("New incoming invoice");
-  let u = null;
-  if (!o || !U(o)) {
-    const f = a.filter((e) => e === "approve" || e === "reject"), N = a.filter((e) => e === "forceApprove" || e === "forceReject"), v = ["forceApprove", "forceReject"].filter((e) => N.includes(e)), O = v.map((e) => {
-      const {
-        children: i,
-        onClick: n
-      } = c[e];
+    enabled: !!D
+  }), W = f((e) => {
+    const {
+      scrollTop: n,
+      scrollHeight: m,
+      clientHeight: $
+    } = e.currentTarget;
+    m - n - $ < 100 && j && !k && U();
+  }, [U, j, k]), l = C(() => P ? P.pages.flatMap((e) => e.data).sort((e, n) => (e.name ?? "").localeCompare(n.name ?? "")) : [], [P]), r = C(() => !l || l.length === 0 ? [] : l.map((e) => {
+    const n = _ ? _.data.find((m) => m.id === e.measure_unit_id) : void 0;
+    return {
+      id: e.id,
+      label: e.name,
+      description: e.description,
+      price: e.price,
+      smallestAmount: e.smallest_amount,
+      measureUnit: n
+    };
+  }), [l, _, i]);
+  ne(() => {
+    !v && i && i.length > 0 && !t.length && (l?.find((e) => e?.name === i) || h(i));
+  }, [i, v, l, t]);
+  const J = f(() => {
+    O(!0), d(!0);
+  }, []), X = f(() => {
+    O(!1), t && t.trim() !== "" && !r.some((e) => e.label === t) && o({
+      id: u,
+      label: t
+    }, !1);
+  }, [t, r, o]);
+  let s = l?.find((e) => e?.id === K);
+  if (!v && i && i.length > 0 && !t.length && !s) {
+    const e = l?.find(
+      (n) => n?.name === i
+      // potentially item?.product.name, double check
+    );
+    e && (s = e);
+  }
+  const Y = s ? s.id : t ? u : null, L = s ? s.name : t, {
+    matchingItems: g,
+    nonMatchingItems: q,
+    showCustomOption: S
+  } = C(() => {
+    const e = L.toLowerCase().trim();
+    if (!e || s && s.name.toLowerCase() === e)
       return {
-        key: e,
-        label: i,
-        onClick: n,
-        sx: {
-          color: e === "forceReject" ? "error.main" : "text.primary"
-        }
+        matchingItems: r,
+        nonMatchingItems: [],
+        showCustomOption: !1
       };
-    }), H = a.filter((e) => !["approve", "reject", "forceApprove", "forceReject"].includes(e));
-    u = /* @__PURE__ */ s(K, { sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: 1
-    }, children: [
-      H.map((e) => {
-        const {
-          children: i,
-          ...n
-        } = c[e];
-        return /* @__PURE__ */ r(C, { ...n, children: i }, e);
-      }),
-      f.length > 0 && f.map((e) => {
-        const {
-          children: i,
-          ...n
-        } = c[e];
-        return /* @__PURE__ */ r(C, { ...n, children: i }, e);
-      }),
-      v.length > 0 && /* @__PURE__ */ r(G, { items: O })
-    ] });
-  }
-  return /* @__PURE__ */ s(z, { children: [
-    /* @__PURE__ */ r(J, { className: F, title: M, statusElement: /* @__PURE__ */ s("div", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
-      /* @__PURE__ */ r(h, { status: o?.status ?? "draft", dueDate: o?.due_date }),
-      E && /* @__PURE__ */ r(h, { status: o?.status ?? "draft", dueDate: o?.due_date, showOverdueBadge: !0 })
-    ] }), actions: u, closeButtonTooltip: t._("Close payable details") }),
-    D,
-    S && /* @__PURE__ */ r(V, { isOpen: A, handleCloseModal: () => p(!1), handleConfirmation: x })
+    const n = [], m = [];
+    for (const p of r)
+      p.label.toLowerCase().includes(e) ? n.push(p) : m.push(p);
+    const $ = n.some((p) => p.label.toLowerCase() === e);
+    return {
+      matchingItems: n,
+      nonMatchingItems: m,
+      showCustomOption: !$ && !!t.trim()
+    };
+  }, [L, r, s, t]), Z = C(() => [
+    y,
+    ...r.map((e) => e.id),
+    // Always include CUSTOM_ID when there's a custom name so Base UI tracks
+    // it as the selected value and shows the clear button. The visible
+    // ComboboxItem is still gated by showCustomOption.
+    ...t ? [u] : []
+  ], [r, t]), V = f((e) => {
+    if (!e) {
+      N(null), h(""), o({
+        id: "",
+        label: ""
+      }, !1);
+      return;
+    }
+    if (e === y) {
+      M();
+      return;
+    }
+    if (e === u) {
+      w.current = !0, o({
+        id: u,
+        label: t
+      }, !1);
+      return;
+    }
+    const n = r.find((m) => m.id === e);
+    n && (N(n.id), h(""), o(n, !0));
+  }, [t, r, o, M]), ee = f((e) => {
+    if (e !== y && e !== u && !r.some((n) => n.id === e)) {
+      if (!e && w.current) {
+        w.current = !1;
+        return;
+      }
+      h(e), N(null), e.trim() && o({
+        id: u,
+        label: e
+      }, !1);
+    }
+  }, [r, o]);
+  return /* @__PURE__ */ c(se, { value: Y, onValueChange: V, inputValue: L, onInputValueChange: ee, items: Z, filter: () => !0, disabled: z, open: I, onOpenChange: d, children: [
+    /* @__PURE__ */ a(oe, { id: `item-selector-${B}`, placeholder: A._("e.g., office supplies"), "aria-invalid": F || void 0, maxLength: 100, onFocus: J, onBlur: X, onClick: () => {
+      I || d(!0);
+    }, onKeyDown: (e) => {
+      e.key === "Enter" ? (e.preventDefault(), t.trim() && (w.current = !0), d(!1)) : e.key === "Tab" && I && g.length === 1 && (V(g[0].id), d(!1));
+    }, showClear: !0, className: "ttw:w-full", children: R && /* @__PURE__ */ a(ce, { align: "inline-start", children: /* @__PURE__ */ a(E, { className: "ttw:size-4 ttw:animate-spin ttw:text-muted-foreground" }) }) }),
+    /* @__PURE__ */ a(le, { container: H, className: "ttw:min-w-138", children: /* @__PURE__ */ c(me, { onScroll: W, children: [
+      /* @__PURE__ */ c(b, { value: y, className: "ttw:text-primary ttw:font-semibold ttw:hover:text-primary ttw:focus:text-primary", children: [
+        /* @__PURE__ */ a(de, {}),
+        A._("Create new item")
+      ] }),
+      g.map((e) => /* @__PURE__ */ c(b, { value: e.id, children: [
+        /* @__PURE__ */ a("span", { className: "ttw:flex-1 ttw:min-w-0 ttw:truncate", children: e.label }),
+        /* @__PURE__ */ c("span", { className: "ttw:shrink-0 ttw:text-right ttw:text-xs ttw:text-muted-foreground", children: [
+          e.smallestAmount,
+          " ",
+          e.measureUnit?.description,
+          e.price && ` / ${T(e.price.value, e.price.currency)}`
+        ] })
+      ] }, e.id)),
+      S && /* @__PURE__ */ a(b, { value: u, children: /* @__PURE__ */ a("span", { className: "ttw:flex-1 ttw:min-w-0 ttw:truncate", children: t }) }),
+      (g.length > 0 || S) && q.length > 0 && /* @__PURE__ */ a(ue, {}),
+      q.map((e) => /* @__PURE__ */ c(b, { value: e.id, children: [
+        /* @__PURE__ */ a("span", { className: "ttw:flex-1 ttw:min-w-0 ttw:truncate", children: e.label }),
+        /* @__PURE__ */ c("span", { className: "ttw:shrink-0 ttw:text-right ttw:text-xs ttw:text-muted-foreground", children: [
+          e.smallestAmount,
+          " ",
+          e.measureUnit?.description,
+          e.price && ` / ${T(e.price.value, e.price.currency)}`
+        ] })
+      ] }, e.id)),
+      k && /* @__PURE__ */ a("div", { className: "ttw:flex ttw:justify-center ttw:py-1", children: /* @__PURE__ */ a(E, { className: "ttw:size-4 ttw:animate-spin ttw:text-muted-foreground" }) })
+    ] }) })
   ] });
 };
 export {
-  fe as PayableDetailsHeader
+  u as CUSTOM_ID,
+  Ne as ItemSelector
 };