@tesouro/embedded-components-react 0.2.161 → 0.2.164

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/feature/dist/lib/useApprovalPolicyRules.js

@@ -0,0 +1,327 @@
+"use client";
+import { useState as F, useRef as Y, useCallback as y, useMemo as f, useEffect as Q } from "react";
+import { useGetApprovalPoliciesQuery as X, usePostApprovalPoliciesMutation as Z, usePatchApprovalPoliciesIdMutation as oo, useDeleteApprovalPoliciesIdMutation as eo } from "../../../data-access/dist/lib/approvalPoliciesApi.js";
+import { APPROVAL_POLICY_OBJECT_TYPE as to } from "../../../data-access/dist/lib/queryKeys.js";
+import "../../../../data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as io } from "../../../../data-access/dist/lib/EmbedApiContext.js";
+import "../../../../data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../../data-access/dist/lib/rest/zod.gen.js";
+import "react/jsx-runtime";
+import "@radix-ui/react-use-controllable-state";
+import "lucide-react";
+import "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../../ui/dist/lib/UIContext/UIContext.js";
+import "../../../../ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import { computeUncoveredAmountRanges as ro } from "../../../util/dist/lib/amountCoverage.js";
+import { nextPolicyPriority as no } from "../../../util/dist/lib/policyPriority.js";
+import { buildApprovalPolicyScript as so, parseApprovalPolicyScript as po } from "../../../util/dist/lib/policyScript.js";
+import { buildApprovalPolicyTrigger as ao, parseApprovalPolicyTrigger as lo, POLICY_DEFAULT_CURRENCY as uo } from "../../../util/dist/lib/policyTrigger.js";
+import { validatePolicyDraft as co } from "../../../util/dist/lib/validatePolicyDraft.js";
+import { toApproverSteps as mo, gapId as vo, toAmountConditionValue as L, toApproverGroupRefs as yo, buildPolicyTitle as V, toAmountConditionErrors as K, toApproverErrors as fo, toGapRanges as Ao, lockMixedApproverSections as go, buildPolicySentence as Co } from "./policyViewModel.js";
+import { useApproverOptions as ho } from "./useApproverOptions.js";
+import { toast as h } from "sonner";
+const N = "draft", Po = { lower: "", upper: "" }, j = { lower: !1, upper: !1 };
+function Io(r) {
+  return r.map((d) => {
+    const a = lo(d.trigger), A = po(d.script), g = a.currency === void 0 || a.currency === uo, v = d.status === "active", s = a.hasKnownAmountBounds && g;
+    return {
+      id: d.id,
+      priority: d.priority,
+      condition: a.condition,
+      groups: A.groups,
+      /**
+       * Both halves must round-trip or the rule is not safe to re-save.
+       * `hasWrittenGuards` is separate from `isSupported`: a trigger without
+       * the event or currency guard is understood, but re-serializing it would
+       * add guards it never had and narrow which bills it catches.
+       */
+      isRepresentable: a.isSupported && a.hasWrittenGuards && A.isSupported && g && v,
+      /**
+       * The amount range this rule claims, whether or not it is editable — an
+       * unrepresentable script half, a trigger predicate this model cannot show,
+       * or a schedule that has not started. A counterpart-filtered rule still
+       * claims its range, so leaving it out would call that range free and let
+       * the user add an amount-only rule that stacks a second approval workflow
+       * on the same bill. `hasKnownAmountBounds` is what says the range itself is
+       * trustworthy.
+       *
+       * A scheduled rule counts here too: it is not in effect yet, but it will
+       * be, and a new rule overlapping it would collide the moment it starts.
+       */
+      hasKnownCondition: s,
+      /**
+       * The range this rule covers *right now*, which is what the gap warning
+       * is about. A scheduled rule covers nothing yet, so calling its range
+       * covered would hide a gap that bills are falling through today.
+       */
+      coversNow: s && v
+    };
+  });
+}
+function bo(r) {
+  return [...r].sort(
+    (d, a) => (d.condition.min ?? 0) - (a.condition.min ?? 0)
+  );
+}
+function zo({
+  labels: r,
+  componentLabels: d
+}) {
+  const a = X(), A = Z(), g = oo(), v = eo(), s = ho(), { organizationId: P } = io(), [e, l] = F(null), [I, C] = F(null), S = Y(P);
+  P && P !== S.current && (S.current = P, l(null), C(null));
+  const x = Y(0), b = y(() => (x.current += 1, { id: `group-new-${x.current}`, selectedItems: [] }), []), m = f(
+    () => Io(a.data?.data ?? []),
+    [a.data]
+  ), E = f(() => {
+    if (s.isResolving)
+      return [];
+    const o = m.flatMap((n) => {
+      if (!n.isRepresentable)
+        return [];
+      const u = mo(n.groups, s.lookup);
+      return u === void 0 ? [] : [
+        {
+          id: n.id,
+          priority: n.priority,
+          condition: n.condition,
+          steps: u
+        }
+      ];
+    });
+    return bo(o);
+  }, [m, s.isResolving, s.lookup]), $ = e ? e.policyId ?? N : null, w = !P && S.current != null || a.isResolving || s.isResolving, G = e?.policyId != null && e.policyId !== I && !w && !E.some((o) => o.id === e.policyId);
+  Q(() => {
+    G && (l(null), h.error(r.approverUnavailable));
+  }, [G, r.approverUnavailable]);
+  const p = f(() => {
+    if (e)
+      return co({
+        amount: e.amount,
+        groups: e.steps.map((o) => ({
+          id: o.id,
+          approverIds: o.selectedItems.map((n) => n.id)
+        })),
+        otherConditions: m.filter(
+          (o) => o.hasKnownCondition && o.id !== e.policyId
+        ).map((o) => o.condition)
+      });
+  }, [e, m]), D = f(
+    () => ro(
+      m.filter((o) => o.coversNow).map((o) => o.condition)
+    ),
+    [m]
+  ), R = y(
+    (o) => {
+      l({
+        policyId: null,
+        amount: o,
+        steps: [b()],
+        touchedAmount: j
+      });
+    },
+    [b]
+  ), z = y(() => {
+    R(Po);
+  }, [R]), J = y(
+    (o) => {
+      const n = D.find((u) => vo(u) === o);
+      n && R(
+        L({
+          min: n.min,
+          max: n.max
+        })
+      );
+    },
+    [D, R]
+  ), M = y(() => {
+    l(null);
+  }, []), _ = A.isPending || g.isPending || v.isPending, T = y(async () => {
+    if (!e || !p || !p.isValid)
+      return;
+    const o = p.condition, n = yo(
+      e.steps,
+      s.lookup
+    );
+    if (!n) {
+      h.error(r.approverUnavailable);
+      return;
+    }
+    const u = ao(o), i = so(n), t = V(o, r);
+    try {
+      e.policyId === null ? await A.mutateAsync({
+        body: {
+          object_type: to,
+          name: t,
+          trigger: u,
+          script: i,
+          priority: no(
+            m.map((c) => c.priority)
+          )
+        }
+      }) : await g.mutateAsync({
+        path: { approval_policy_id: e.policyId },
+        body: { name: t, trigger: u, script: i }
+      }), l(null), h.success(r.ruleSaved);
+    } catch {
+      h.error(r.ruleSaveFailed);
+    }
+  }, [
+    e,
+    p,
+    s.lookup,
+    r,
+    m,
+    A,
+    g
+  ]), W = y(async () => {
+    if (I)
+      try {
+        await v.mutateAsync({
+          path: { approval_policy_id: I }
+        }), C(null), l(null), h.success(r.ruleDeleted);
+      } catch {
+        C(null), h.error(r.ruleDeleteFailed);
+      }
+  }, [I, v, r]), q = w || _, U = f(() => {
+    if (!e || !p || _)
+      return;
+    const o = K(p.amountErrors, r);
+    if (o)
+      return {
+        lower: e.touchedAmount.lower ? o.lower : void 0,
+        upper: e.touchedAmount.upper ? o.upper : void 0
+      };
+  }, [e, p, _, r]), B = f(() => {
+    if (!p || p.isValid)
+      return;
+    const o = fo(p.groupErrors, r), n = K(p.amountErrors, r), u = [
+      ...Object.values(o?.steps ?? {}),
+      n?.lower,
+      n?.upper
+    ].filter((t) => !!t), i = [...new Set(u)];
+    return i.length > 0 ? i : void 0;
+  }, [p, r]);
+  return {
+    items: f(() => {
+      const o = {
+        onAmountConditionChange: (i) => l((t) => t && { ...t, amount: i }),
+        onAmountFieldBlur: (i) => l(
+          (t) => t && {
+            ...t,
+            touchedAmount: { ...t.touchedAmount, [i]: !0 }
+          }
+        ),
+        onApproverStepsChange: (i) => l((t) => t && { ...t, steps: i }),
+        onAddApproverStep: () => l(
+          (i) => i && { ...i, steps: [...i.steps, b()] }
+        ),
+        onRemoveApproverStep: (i) => l(
+          (t) => t && {
+            ...t,
+            steps: t.steps.filter((c) => c.id !== i)
+          }
+        )
+      }, n = (i, t, c, O, H) => ({
+        id: i,
+        title: V(t, r),
+        sentence: Co(t, r),
+        // Decorated here rather than where the steps are created, so both an
+        // in-progress draft and a saved policy's chips go through the same rule.
+        approverSteps: c.map(
+          (k) => go(k, s.lookup, r)
+        ),
+        // A second approval step is only meaningful once the one above it names an
+        // approver: an empty step saves nothing and already fails validation.
+        addApproverStepDisabled: c.some(
+          (k) => k.selectedItems.length === 0
+        ),
+        approverOptions: s.options,
+        amountCondition: L(t),
+        amountConditionErrors: O ? U : void 0,
+        onEdit: () => {
+          l({
+            policyId: i,
+            amount: L(t),
+            steps: c,
+            touchedAmount: j
+          });
+        },
+        onCancel: M,
+        onSave: () => {
+          T();
+        },
+        onDelete: H,
+        // Not `isBusy`: that rides the card's own `disabled`, which disables Save
+        // as well. This is the "not valid yet" half, and the reasons below are
+        // what a disabled Save says when the user reaches for it.
+        saveDisabled: O && p ? !p.isValid : !1,
+        saveDisabledReasons: O ? B : void 0,
+        labels: d?.policyCard,
+        ...o
+      }), u = E.map((i) => {
+        const t = $ === i.id, c = n(
+          i.id,
+          i.condition,
+          t && e ? e.steps : i.steps,
+          t,
+          () => C(i.id)
+        );
+        return t && e ? { ...c, amountCondition: e.amount } : c;
+      });
+      return e?.policyId === null && u.unshift({
+        ...n(
+          N,
+          // A brand-new rule has no saved condition; the heading falls back to
+          // the "any amount" copy until bounds are typed.
+          {},
+          e.steps,
+          !0,
+          // No Delete at all: nothing exists server-side to delete, and Cancel
+          // already discards the rule being written.
+          void 0
+        ),
+        amountCondition: e.amount
+      }), u;
+    }, [
+      E,
+      e,
+      $,
+      U,
+      B,
+      p,
+      r,
+      d?.policyCard,
+      s.options,
+      s.lookup,
+      M,
+      b,
+      T
+    ]),
+    editingId: $,
+    gaps: Ao(D, r),
+    onAddRule: z,
+    onSelectGap: J,
+    isBusy: q,
+    isLoading: w,
+    isError: a.isError || s.isError,
+    onRetry: () => {
+      a.refetch(), s.refetch();
+    },
+    deleteDialog: {
+      open: I !== null,
+      isDeleting: v.isPending,
+      onOpenChange: (o) => {
+        o || C(null);
+      },
+      onConfirm: () => {
+        W();
+      },
+      onCancel: () => C(null)
+    }
+  };
+}
+export {
+  N as DRAFT_POLICY_ID,
+  zo as useApprovalPolicyRules
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/feature/dist/lib/useApproverOptions.js

@@ -0,0 +1,58 @@
+"use client";
+import { useCallback as f, useMemo as d } from "react";
+import "../../../../data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../../data-access/dist/lib/EmbedApiContext.js";
+import "../../../../data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../../data-access/dist/lib/rest/zod.gen.js";
+import { useAllOrganizationRolesQuery as g } from "../../../../data-access/dist/lib/role/useAllOrganizationRolesQuery.js";
+import { useAllOrganizationUsersQuery as b } from "../../../../data-access/dist/lib/user/useAllOrganizationUsersQuery.js";
+import { sortRolesBySortOrdinal as k } from "../../../../../../shared/util-validation/dist/index22.js";
+function C(r) {
+  const o = r.status?.trim().toUpperCase() ?? "";
+  return !!r.key?.trim() && (o === "ACTIVE" || o === "");
+}
+function O() {
+  const r = g(), o = b(), t = r.data?.data, a = o.data?.data, n = r.refetch, l = o.refetch, m = f(() => {
+    n(), l();
+  }, [n, l]);
+  return d(() => {
+    const s = [], i = /* @__PURE__ */ new Map();
+    for (const e of k(
+      (t ?? []).filter(C)
+    ))
+      s.push({ id: e.id, label: e.name, section: "roles" }), i.set(e.id, { label: e.name, kind: "role" });
+    const p = new Map(
+      (t ?? []).filter((e) => e.key?.trim()).map((e) => [e.key.trim().toLowerCase(), e.name])
+    ), u = [...a ?? []].sort(
+      (e, c) => e.name.localeCompare(c.name)
+    );
+    for (const e of u)
+      s.push({
+        id: e.id,
+        label: e.name,
+        // No sublabel rather than a raw role key when the role is unknown to
+        // the roster: `embedded:finance_admin` is worse than nothing.
+        sublabel: p.get(e.role?.trim().toLowerCase() ?? ""),
+        section: "teamMembers"
+      }), i.set(e.id, { label: e.name, kind: "user" });
+    return {
+      options: s,
+      lookup: i,
+      isResolving: r.isResolving || o.isResolving,
+      isError: r.isError || o.isError,
+      refetch: m
+    };
+  }, [
+    t,
+    a,
+    m,
+    r.isResolving,
+    r.isError,
+    o.isResolving,
+    o.isError
+  ]);
+}
+export {
+  O as useApproverOptions
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index10.js

@@ -0,0 +1,130 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useMemo as N } from "react";
+import { Trash2 as y, Plus as S } from "lucide-react";
+import { Skeleton as c, Alert as A, AlertDescription as R, Typography as l, Button as m } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ApproverPicker as k } from "./index18.js";
+import { APPROVER_GROUPS_BUILDER_LABELS_EN as G } from "./index11.js";
+const D = ({
+  steps: i,
+  options: u,
+  onStepsChange: g,
+  onAddStep: v,
+  onRemoveStep: h,
+  errors: w,
+  addStepDisabled: b,
+  disabled: s,
+  isLoading: f,
+  error: p,
+  labels: n
+}) => {
+  const r = N(
+    () => ({ ...G, ...n }),
+    [n]
+  );
+  if (f)
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        "data-testid": "approver-groups-builder-loading",
+        className: "ttw:flex ttw:flex-col ttw:gap-3",
+        children: [
+          /* @__PURE__ */ t("span", { className: "ttw:sr-only", children: r.LoadingMessage }),
+          [0, 1].map((e) => /* @__PURE__ */ o("div", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
+            /* @__PURE__ */ t(c, { width: 36, height: 16 }),
+            /* @__PURE__ */ t(c, { height: 36, className: "ttw:flex-1" })
+          ] }, e))
+        ]
+      }
+    );
+  if (p)
+    return /* @__PURE__ */ t(A, { variant: "destructive", "data-testid": "approver-groups-builder-error", children: /* @__PURE__ */ t(R, { children: p }) });
+  const x = (e, d) => {
+    g(
+      i.map(
+        (a) => a.id === e ? { ...a, selectedItems: d } : a
+      )
+    );
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-testid": "approver-groups-builder",
+      className: "ttw:flex ttw:flex-col ttw:gap-3",
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            "data-testid": "approver-groups-builder-description",
+            variant: "body2",
+            color: "muted",
+            className: "ttw:font-medium",
+            children: r.Description
+          }
+        ),
+        i.length === 0 ? /* @__PURE__ */ t(
+          l,
+          {
+            "data-testid": "approver-groups-builder-empty",
+            variant: "body2",
+            color: "muted",
+            children: r.EmptyStateMessage
+          }
+        ) : i.map((e, d) => /* @__PURE__ */ o(
+          "div",
+          {
+            "data-testid": `approver-group-${e.id}`,
+            className: "ttw:grid ttw:grid-cols-[3rem_minmax(0,1fr)_auto] ttw:items-center ttw:gap-2",
+            children: [
+              /* @__PURE__ */ t(l, { variant: "body2", className: "ttw:font-medium", children: d === 0 ? r.FirstGroupConnector : r.GroupConnector }),
+              /* @__PURE__ */ t("div", { className: "ttw:min-w-0", children: /* @__PURE__ */ t(
+                k,
+                {
+                  value: e.selectedItems,
+                  options: u,
+                  lockedSections: e.lockedSections,
+                  onChange: (a) => x(e.id, a),
+                  disabled: s,
+                  error: w?.steps?.[e.id],
+                  labels: r,
+                  testId: `approver-group-picker-${e.id}`
+                }
+              ) }),
+              i.length > 1 ? /* @__PURE__ */ t(
+                m,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  "aria-label": r.RemoveGroupAriaLabel,
+                  onClick: () => h(e.id),
+                  disabled: s,
+                  "data-testid": `approver-group-remove-${e.id}`,
+                  children: /* @__PURE__ */ t(y, {})
+                }
+              ) : null
+            ]
+          },
+          e.id
+        )),
+        /* @__PURE__ */ o(
+          m,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: v,
+            disabled: s || b,
+            "data-testid": "approver-groups-add-button",
+            className: "ttw:w-fit ttw:px-0",
+            children: [
+              /* @__PURE__ */ t(S, {}),
+              r.AddGroupButton
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  D as ApproverGroupsBuilder
+};

package/dist/libs/tesouro-embedded-components-react/shared/approval-policy/ui/dist/index11.js

@@ -0,0 +1,20 @@
+const e = {
+  FirstGroupConnector: "From",
+  GroupConnector: "And",
+  Description: "Then require approval…",
+  ApproverConnector: "or",
+  AddGroupButton: "Add approval",
+  RemoveGroupAriaLabel: "Remove approval step",
+  RemoveApproverAriaLabel: "Remove {name}",
+  ChoosePlaceholder: "Type to search or click to select team members",
+  RolesSectionHeading: "Roles",
+  TeamMembersSectionHeading: "Team members",
+  OrDividerLabel: "Or",
+  NoOptionsMessage: "No approvers available.",
+  NoResultsMessage: "No matches found.",
+  EmptyStateMessage: "No approval steps yet.",
+  LoadingMessage: "Loading approvers…"
+};
+export {
+  e as APPROVER_GROUPS_BUILDER_LABELS_EN
+};