@zeniai/web-components 3.17.11 → 3.17.13

package/dist/SpendManagementListViewPage-D5kajT7q.js

@@ -0,0 +1,631 @@
+import { j as o, C as Ve, u as We, t as Je } from "./vendor-.pnpm-B2klaOGU.js";
+import * as f from "react";
+import { useState as C, useEffect as qe, useContext as Ke } from "react";
+import r from "@emotion/styled";
+import { RoomProvider as Ye } from "@liveblocks/react";
+import { hasOnlyBillPayAccess as Ze, hasBillPayAdminLevelAccess as Qe, hasReimbursementAdminLevelAccess as Xe, hideCreatedByFilter as z, BILL_PAY_FILTER_CATEGORIES as et, REIMBURSEMENT_FILTER_CATEGORIES_RESTRICTED as tt, REIMBURSEMENT_FILTER_CATEGORIES as ot, TASK_LIST_FILTER_CATEGORIES as nt, allTaskPriority as at, allTaskStatus as st } from "@zeniai/client-epic-state";
+import { u as U, fU as it, iL as lt, C as S, a as H, S as t, R as T, b as rt, e_ as ct, o as dt, _ as mt, f_ as pt, bc as ut, E as ht, D as x, dB as bt, T as gt, d as Ct, iF as yt, aE as ft, t as Tt, gk as xt, iM as _, eG as St, i as wt } from "./index-BveTtfdM.js";
+import { S as vt } from "./SpendManagementSection-C0Jpjxsj.js";
+import { T as It } from "./StatusSwitcher-CvuV96vm.js";
+import { keyframes as G } from "@emotion/react";
+const F = (e) => /* @__PURE__ */ f.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...e }, /* @__PURE__ */ f.createElement("path", { d: "M22.781 11.8215C22.7883 14.6988 21.6612 17.4629 19.6441 19.5146C17.627 21.5664 14.8825 22.7404 12.0055 22.7822C10.6005 22.8033 9.20515 22.5453 7.90056 22.023C6.59596 21.5008 5.40804 20.7247 4.40567 19.7399C3.40331 18.755 2.60645 17.5809 2.06132 16.2857C1.51619 14.9905 1.23362 13.6 1.23002 12.1948C1.22199 9.31703 2.34875 6.55215 4.36593 4.49975C6.38312 2.44735 9.1281 1.27292 12.0055 1.23117C13.4108 1.21016 14.8063 1.46837 16.111 1.99085C17.4158 2.51332 18.6038 3.28965 19.6061 4.27481C20.6085 5.25996 21.4053 6.43433 21.9503 7.72981C22.4953 9.02529 22.7777 10.4161 22.781 11.8215Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ f.createElement("path", { d: "M17.1573 10.374H9.83934C9.05979 10.374 8.31216 10.6766 7.76093 11.2151C7.2097 11.7537 6.90002 12.4841 6.90002 13.2457C6.90002 14.0074 7.2097 14.7378 7.76093 15.2764C8.31216 15.8149 9.05979 16.1175 9.83934 16.1175H11.309", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ f.createElement("path", { d: "M14.2151 13.2434L17.1544 10.3717L14.2151 7.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), y = {
+  width: new T(343, 545, 545),
+  containerTop: new T(17, 25, 25),
+  containerPaddingLeftRight: new T(x[4], x[7])
+}, kt = r.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${S.overlayDark};
+  .fade {
+    animation: ${(e) => $t(e)} 0.25s linear;
+  }
+`, Bt = ({ windowSize: e }) => G`
+0% {
+  top: 100%;
+}
+100% {
+  top: ${y.containerTop.valuePercentage(e)};
+}
+`, $t = ({ windowSize: e }) => G`
+0% {
+  top: ${y.containerTop.valuePercentage(e)};
+}
+100% {
+  top: 100%;
+}
+`, Et = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${t.sp2};
+  position: relative;
+  top: ${(e) => e.fade ? "100%" : y.containerTop.valuePercentage(e.windowSize)};
+  padding: ${(e) => `${t.sp7}  ${y.containerPaddingLeftRight.valuePx(
+  e.windowSize
+)}`};
+  width: ${(e) => y.width.valuePx(e.windowSize)};
+  animation: ${(e) => Bt(e)} 0.25s linear;
+  box-shadow: ${S.Elevation2Dark};
+`, Lt = r(ct)`
+  margin-bottom: ${t.sp5};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+`, Rt = r.div`
+  margin-right: ${t.sp3};
+  height: ${t.sp7};
+  width: ${t.sp7};
+  background-color: ${(e) => e.theme.mode === "dark" ? e.theme.colors.brandColorJadeDark : e.theme.colors.brandColorJadeLight};
+  border-radius: ${t.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Pt = r(dt)`
+  width: calc(100% - ${t.sp7});
+  color: ${(e) => e.theme.colors.primary};
+  text-align: start;
+`, jt = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: ${t.sp5};
+`, At = r.div`
+  display: flex;
+  align-items: center;
+  padding: ${t.sp2} ${t.sp3};
+  border-radius: ${t.sp2};
+  cursor: ${(e) => e.showCopyIcon ? "pointer" : "default"};
+  border: 1px solid
+    ${(e) => e.showCopyText ? e.theme.colors.champion : e.theme.colors.primary};
+`, Ot = r(pt)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Dt = r.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.showCopyText ? e.theme.colors.primary : e.theme.colors.grey1};
+`, Mt = r(mt)`
+  margin-right: ${t.sp2};
+  color: ${(e) => e.showCopyText ? e.theme.colors.champion : e.theme.colors.primary};
+`, _t = r(ut)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${S.success};
+`, Ft = r(rt)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  position: fixed;
+  top: ${t.sp3};
+  right: ${t.sp4};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Nt = r.div`
+  width: 100%;
+`, zt = r(ht)`
+  color: ${(e) => e.theme.colors.primary};
+  position: absolute;
+  bottom: 22px;
+`, N = H.getLocalizedStrings().common.copyToClipBoard;
+function Ut(e) {
+  const p = U(), [, u] = it(), [c, d] = C(!0), [b, s] = C(!1), [n, i] = C(!1), { isMobileOrTabletScreen: a } = lt(), w = () => {
+    if (c) {
+      const g = e.botEmail;
+      u(g), d(!1);
+    }
+  }, v = () => {
+    s(!0);
+  }, I = () => {
+    s(!1);
+  };
+  return qe(() => {
+    c === !1 && setTimeout(() => {
+      d(!0);
+    }, 2e3);
+  }, [c]), /* @__PURE__ */ o.jsx(
+    kt,
+    {
+      windowSize: p,
+      role: "presentation",
+      style: { background: S.overlayDark, ...e.style },
+      children: /* @__PURE__ */ o.jsx(
+        Ve,
+        {
+          onClickAway: () => {
+            i(!0), setTimeout(() => e.onCancelClick?.(), 250);
+          },
+          children: /* @__PURE__ */ o.jsxs(
+            Et,
+            {
+              windowSize: p,
+              className: n ? "fade" : "",
+              fade: n,
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  Ft,
+                  {
+                    onClick: () => {
+                      i(!0), setTimeout(() => e.onCancelClick?.(), 250);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o.jsx(Lt, { children: e.title }),
+                /* @__PURE__ */ o.jsx(Nt, { children: e.descriptionLines.map((g, l) => /* @__PURE__ */ o.jsxs(jt, { children: [
+                  /* @__PURE__ */ o.jsx(Rt, { children: g.icon }),
+                  /* @__PURE__ */ o.jsx(Pt, { windowSize: p, children: g.text })
+                ] }, l)) }),
+                /* @__PURE__ */ o.jsxs(
+                  At,
+                  {
+                    onClick: w,
+                    onMouseOver: v,
+                    onMouseLeave: I,
+                    showCopyIcon: c,
+                    showCopyText: b,
+                    children: [
+                      /* @__PURE__ */ o.jsx(Mt, { showCopyText: b, children: e.botEmail }),
+                      c ? /* @__PURE__ */ o.jsx(
+                        Dt,
+                        {
+                          windowSize: p,
+                          showCopyText: b && !a,
+                          children: /* @__PURE__ */ o.jsx(Ot, {})
+                        }
+                      ) : /* @__PURE__ */ o.jsx(_t, {})
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o.jsx(zt, { children: c ? b && !a ? N.copy : null : N.copied })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const V = H.getLocalizedStrings(), m = V.spendManagement, {
+  common: {
+    texts: { comments: Ht }
+  },
+  collaboration: {
+    threads: {
+      placeholder: { addANewComment: Gt, replyAComment: Vt },
+      tooltip: { resolveComment: Wt, unResolveComment: Jt }
+    }
+  }
+} = V, qt = {
+  drawerSectionPaddingLeftRight: new T(x[4], x[5])
+}, Kt = Je(
+  () => import("./SpendManagementPerTabPage-C4ypbF14.js")
+), po = (e) => {
+  const p = We(), u = bt(), c = U(), {
+    transactionList: d,
+    allSubTabs: b,
+    isAdmin: s,
+    botEmail: n,
+    isEmployee: i = !1,
+    currentTab: a,
+    currentSubTab: w,
+    approvalCount: v,
+    fetchState: I,
+    analytics: g,
+    entity: l,
+    uiState: W,
+    searchText: $,
+    filters: J,
+    vendorSearchAutoCompleteData: q,
+    vendorSearchAutoCompleteActions: K,
+    createdByUserList: Y,
+    createdByUserListFetchState: E,
+    downloadParams: Z,
+    downloadState: Q,
+    isDownloadEnabled: X,
+    isShowDeletedBillsEnabled: ee,
+    isShowDeletedReimbursementEnabled: te,
+    isListeningToPusherEventForBillPayApprovalRules: oe,
+    isListeningToPusherEventForReimbursementApprovalRules: ne,
+    isBillPayCommentingEnabled: L,
+    isReimbursementCommentingEnabled: R,
+    isDetectInsufficientFundsEnabled: ae = !1,
+    updateTabToState: se,
+    onSubtabChange: P,
+    onReloadTransactions: ie,
+    onTransactionClick: j,
+    onClickSetupIcon: A,
+    onBackClick: le,
+    onAddTransactionClick: re,
+    onColumnSortConfigChanged: ce,
+    onSearchTextChanged: de,
+    onClickMenuIcon: me,
+    onFiltersChange: pe,
+    updateDownloadStateHandler: ue,
+    bulkSubmissionLimit: he = 10,
+    isBulkActionAllowed: be = !1,
+    isRecurringBillInBulkActionList: ge = !1,
+    transactionsSelectedForBulkAction: Ce = [],
+    allowedBulkActions: ye = [],
+    bulkSubmissionFetchState: fe,
+    updateBulkActionList: Te,
+    removeAllTransactionsFromBulkActionList: xe,
+    onProceedForBulkActionClick: Se
+  } = e, we = [
+    "draft",
+    "pending_approval",
+    "scheduled",
+    "paid"
+  ], ve = (h) => {
+    j(h, a);
+  }, Ie = /* @__PURE__ */ o.jsx(
+    Kt,
+    {
+      botEmail: n,
+      transactionList: d,
+      allSubTabs: b,
+      isAdmin: s,
+      selectedTab: a,
+      selectedSubTab: w,
+      fetchState: I,
+      onSubtabChange: P,
+      onTransactionRowClick: ve,
+      onReloadTransactions: ie,
+      onColumnSortConfigChanged: ce,
+      analytics: g,
+      entity: l,
+      uiState: W,
+      searchText: $,
+      isShowDeletedBillsEnabled: ee,
+      isShowDeletedReimbursementEnabled: te,
+      isListeningToPusherEventForBillPayApprovalRules: oe,
+      isListeningToPusherEventForReimbursementApprovalRules: ne,
+      isBillPayCommentingEnabled: L,
+      isReimbursementCommentingEnabled: R,
+      bulkSubmissionLimit: he,
+      isBulkActionAllowed: be,
+      isRecurringBillInBulkActionList: ge,
+      transactionsSelectedForBulkAction: Ce,
+      isDetectInsufficientFundsEnabled: ae,
+      allowedBulkActions: ye,
+      bulkSubmissionFetchState: fe,
+      updateBulkActionList: Te,
+      removeAllTransactionsFromBulkActionList: xe,
+      onProceedForBulkActionClick: Se
+    }
+  ), ke = (h) => {
+    se(h), P("all");
+  }, Be = Ze(
+    u.loggedInUserRoleMap
+  ), [O, $e] = C(!1), [Ee, D] = C(!1), Le = (h) => {
+    $e(h);
+  }, Re = l === "bill_pay" ? Qe(u.loggedInUserRoleMap) : Xe(u.loggedInUserRoleMap), Pe = {
+    entity: l,
+    showNewButtonOnNavbar: !0,
+    showEntityEmailInfoIconOnNavbar: !0,
+    newButtonLabel: "New",
+    isSearchOpen: O,
+    searchPlaceHolder: l === "bill_pay" ? m.billPay.billsByTabs.searchPlaceHolder : m.reimbursement.reimbursementByTabs.searchPlaceHolder,
+    searchText: $,
+    searchTextBoxStyle: { right: "204px" },
+    showSettingsIconOnNavbar: Re,
+    showStatementButtonOnNavbar: !1,
+    showDownloadButtonOnNavbar: !0,
+    disableDownloadButton: X === !1,
+    downloadParams: Z,
+    downloadState: Q,
+    filters: J,
+    vendorSearchAutoCompleteData: q,
+    vendorSearchAutoCompleteActions: K,
+    createdByUserListLoaded: l === "bill_pay" || z(u.loggedInUserRole ?? []) ? !0 : E === "Completed" || E === "Error",
+    analytics: g,
+    onNewButtonClick: re,
+    onSearchOpen: Le,
+    onSearchTextChanged: de,
+    onClickSetupIcon: A,
+    onClickEmailInfoIcon: () => D(!0),
+    onFiltersChange: pe,
+    getFilterOptions: l === "bill_pay" || l === "reimbursement" ? () => Yt(
+      l,
+      Y ?? [],
+      u.loggedInUserRole ?? [],
+      []
+    ) : void 0,
+    updateDownloadStateHandler: ue
+  }, je = /* @__PURE__ */ o.jsx(
+    vt,
+    {
+      spendManagementSectionProps: Pe
+    }
+  ), [Ae, Oe] = C(
+    null
+  ), [De, k] = C(!1), { setRequestToOpenThread: Me } = Ke(gt), _e = `dashboard_${u.currentTenant?.companyId}`, M = l === "bill_pay" ? "bill" : "reimbursement", { threads: Fe } = Ct(
+    {
+      application: "dashboard",
+      companyId: u.currentTenant?.companyId,
+      tab: M,
+      entityId: Ae?.entityId,
+      isGlobalComment: !1
+    },
+    "both",
+    !1
+  ), Ne = {
+    openAllThreadsDrawer: (h) => {
+      Oe({ ...h }), k(!0);
+    }
+  }, ze = (h, B) => {
+    const { companyId: Ue, entityId: He, entityType: Ge } = h;
+    k(!1), Me({ threadId: B, companyId: Ue, entityType: Ge }), j(He, a);
+  };
+  return /* @__PURE__ */ o.jsx(
+    yt,
+    {
+      sharedItems: {
+        sharedFunctions: { subtreeFunctions: Ne },
+        sharedRef: void 0
+      },
+      children: /* @__PURE__ */ o.jsxs(Zt, { children: [
+        /* @__PURE__ */ o.jsx(
+          ft,
+          {
+            source: "SpendManagementListViewPage",
+            title: l === "bill_pay" ? m.billPay.billsByTabs.pageTitle : m.reimbursement.reimbursementByTabs.pageTitle,
+            showBackButton: !i && !Be,
+            showMenuIcon: c === "medium-compact" || c === "small",
+            backgroundColor: p.colors.grey4,
+            style: { zIndex: 3, ...Tt.largeSemiBold.cssObject },
+            onBackClick: le,
+            rightSideComponent: je,
+            onClickMenuIcon: me,
+            isSearchOpen: O
+          }
+        ),
+        /* @__PURE__ */ o.jsxs(Qt, { children: [
+          /* @__PURE__ */ o.jsx(Xt, { children: /* @__PURE__ */ o.jsx(
+            It,
+            {
+              tabIds: we,
+              approvalCount: v,
+              selectedTab: a,
+              entity: l,
+              enablePerformanceTracking: !1,
+              onTabSelectedChange: ke,
+              onClickSetupIcon: A
+            }
+          ) }),
+          Ie
+        ] }),
+        Ee ? /* @__PURE__ */ o.jsx(
+          Ut,
+          {
+            botEmail: n,
+            onCancelClick: () => D(!1),
+            title: l === "bill_pay" ? m.billPay.billsByTabs.emailInfoTitle : m.reimbursement.reimbursementByTabs.emailInfoTitle,
+            descriptionLines: l === "bill_pay" ? [
+              {
+                icon: /* @__PURE__ */ o.jsx(F, { width: t.sp4, height: t.sp4 }),
+                text: m.billPay.billsByTabs.emailInfoDescription1
+              },
+              {
+                icon: /* @__PURE__ */ o.jsx(xt, { width: t.sp4, height: t.sp4 }),
+                text: m.billPay.billsByTabs.emailInfoDescription2
+              },
+              {
+                icon: /* @__PURE__ */ o.jsx(_, { width: t.sp4, height: t.sp4 }),
+                text: m.billPay.billsByTabs.emailInfoDescription3
+              }
+            ] : [
+              {
+                icon: /* @__PURE__ */ o.jsx(F, { width: t.sp4, height: t.sp4 }),
+                text: m.reimbursement.reimbursementByTabs.emailInfoDescription1
+              },
+              {
+                icon: /* @__PURE__ */ o.jsx(St, { width: t.sp4, height: t.sp4 }),
+                text: m.reimbursement.reimbursementByTabs.emailInfoDescription2
+              },
+              {
+                icon: /* @__PURE__ */ o.jsx(_, { width: t.sp4, height: t.sp4 }),
+                text: m.reimbursement.reimbursementByTabs.emailInfoDescription3
+              }
+            ]
+          }
+        ) : null,
+        l === "bill_pay" && L || l === "reimbursement" && R ? /* @__PURE__ */ o.jsx(Ye, { id: _e, children: /* @__PURE__ */ o.jsx(
+          wt,
+          {
+            isDrawerOpen: De,
+            allowComposer: !1,
+            drawerTitle: Ht,
+            threads: Fe,
+            autoExpand: !0,
+            autoFocus: !1,
+            filter: {
+              application: "dashboard",
+              companyId: u.currentTenant?.companyId,
+              isGlobalComment: !1,
+              tab: M
+            },
+            isLoading: !1,
+            textOverrides: {
+              composerPlaceholder: Gt,
+              replyComposerPlaceholder: Vt,
+              threadResolve: Wt,
+              threadUnResolve: Jt
+            },
+            onThreadClick: (h, B) => ze(h, B),
+            onCloseAllThreadsDrawer: () => k(!1),
+            drawerSectionStyle: {
+              width: c === "small" ? "100%" : "400px",
+              boxSizing: c === "small" ? "border-box" : "content-box",
+              padding: `${t.sp0} ${qt.drawerSectionPaddingLeftRight.valuePx(c)}`,
+              backgroundColor: p.colors.background
+            },
+            collapsibleThreadStyle: {
+              width: c === "small" ? "100%" : "360px"
+            }
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}, Yt = (e, p, u, c) => {
+  const d = m.filters.filterOptions;
+  return e === "bill_pay" ? et.reduce((s, n) => {
+    switch (n.value) {
+      case "amount":
+        return {
+          ...s,
+          [n.value]: d.billAmountOptions
+        };
+      case "paymentMethod":
+        return {
+          ...s,
+          [n.value]: d.paymentMethodOptions
+        };
+      case "status":
+        return {
+          ...s,
+          [n.value]: [
+            ...d.commonStatusOptions,
+            ...d.billStatusOptions
+          ]
+        };
+      case "paymentType":
+        return {
+          ...s,
+          [n.value]: d.billPaymentTypeOptions
+        };
+      default:
+        return {
+          ...s,
+          [n.value]: []
+        };
+    }
+  }, {}) : e === "reimbursement" ? (z(u) ? tt : ot).reduce((s, n) => {
+    switch (n.value) {
+      case "createdBy": {
+        if (p?.length === 0)
+          return {
+            ...s,
+            [n.value]: []
+          };
+        const i = p.map((a) => ({
+          label: a?.firstName || a?.lastName ? `${a?.firstName} ${a?.lastName}` : a?.email ?? "",
+          value: a.userId,
+          photo: a?.photo,
+          email: a?.email
+        }));
+        return {
+          ...s,
+          [n.value]: i
+        };
+      }
+      case "paymentMethod":
+        return {
+          ...s,
+          [n.value]: d.paymentMethodOptions
+        };
+      case "status":
+        return {
+          ...s,
+          [n.value]: d.commonStatusOptions
+        };
+      case "amount":
+        return {
+          ...s,
+          [n.value]: d.reimbursementAmountOptions
+        };
+      default:
+        return {
+          ...s,
+          [n.value]: []
+        };
+    }
+  }, {}) : nt.reduce((s, n) => {
+    switch (n.value) {
+      case "assignee": {
+        if (p?.length === 0)
+          return {
+            ...s,
+            [n.value]: []
+          };
+        const i = p.map((a) => ({
+          label: a?.firstName || a?.lastName ? `${a?.firstName} ${a?.lastName}` : a?.email ?? "",
+          value: a.userId,
+          photo: a?.photo,
+          email: a?.email
+        }));
+        return {
+          ...s,
+          [n.value]: i
+        };
+      }
+      case "status":
+        return {
+          ...s,
+          [n.value]: [
+            ...st.map((i) => ({
+              label: i.name,
+              value: i.code
+            }))
+          ]
+        };
+      case "priority":
+        return {
+          ...s,
+          [n.value]: [
+            ...at.map((i) => ({
+              label: i.name,
+              value: i.code
+            }))
+          ]
+        };
+      case "tag":
+        return {
+          ...s,
+          [n.value]: [
+            ...c.map((i) => ({
+              label: i.name,
+              value: i.tagId
+            }))
+          ]
+        };
+      default:
+        return {
+          ...s,
+          [n.value]: []
+        };
+    }
+  }, {});
+}, Zt = r.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, Qt = r.div`
+  display: block;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: calc(100vh - ${t.sp10});
+`, Xt = r.div`
+  display: flex;
+  margin-top: ${t.sp3};
+  justify-content: center;
+`;
+export {
+  po as default,
+  Yt as getDashboardFilterCategoryValues
+};