@zeniai/web-components 3.17.1 → 3.17.2

package/dist/SpendManagementListViewPage-B_xULtiu.js

@@ -0,0 +1,627 @@
+import { j as o, C as He, u as Ge, t as Ve } from "./vendor-.pnpm-B2klaOGU.js";
+import * as f from "react";
+import { useState as C, useEffect as We, useContext as Je } from "react";
+import r from "@emotion/styled";
+import { RoomProvider as qe } from "@liveblocks/react";
+import { hasOnlyBillPayAccess as Ke, hasBillPayAdminLevelAccess as Ye, hasReimbursementAdminLevelAccess as Ze, hideCreatedByFilter as z, BILL_PAY_FILTER_CATEGORIES as Qe, REIMBURSEMENT_FILTER_CATEGORIES_RESTRICTED as Xe, REIMBURSEMENT_FILTER_CATEGORIES as et, TASK_LIST_FILTER_CATEGORIES as tt, allTaskPriority as ot, allTaskStatus as nt } from "@zeniai/client-epic-state";
+import { u as U, fU as at, iL as st, C as S, a as H, S as t, R as T, b as it, e_ as lt, o as rt, _ as ct, f_ as dt, bc as mt, E as pt, D as x, dB as ut, T as ht, d as bt, iF as gt, aE as Ct, t as yt, gk as ft, iM as _, eG as Tt, i as xt } from "./index-BEMjPEfs.js";
+import { S as St } from "./SpendManagementSection-By2AW99t.js";
+import { T as wt } from "./StatusSwitcher-BzgKpMtG.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])
+}, vt = 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) => kt(e)} 0.25s linear;
+  }
+`, It = ({ windowSize: e }) => G`
+0% {
+  top: 100%;
+}
+100% {
+  top: ${y.containerTop.valuePercentage(e)};
+}
+`, kt = ({ windowSize: e }) => G`
+0% {
+  top: ${y.containerTop.valuePercentage(e)};
+}
+100% {
+  top: 100%;
+}
+`, Bt = 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) => It(e)} 0.25s linear;
+  box-shadow: ${S.Elevation2Dark};
+`, $t = r(lt)`
+  margin-bottom: ${t.sp5};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+`, Et = 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;
+`, Lt = r(rt)`
+  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};
+`, Rt = 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};
+`, Pt = r(dt)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, At = r.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.showCopyText ? e.theme.colors.primary : e.theme.colors.grey1};
+`, Ot = r(ct)`
+  margin-right: ${t.sp2};
+  color: ${(e) => e.showCopyText ? e.theme.colors.champion : e.theme.colors.primary};
+`, Dt = r(mt)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${S.success};
+`, Mt = r(it)`
+  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};
+  }
+`, _t = r.div`
+  width: 100%;
+`, Ft = r(pt)`
+  color: ${(e) => e.theme.colors.primary};
+  position: absolute;
+  bottom: 22px;
+`, N = H.getLocalizedStrings().common.copyToClipBoard;
+function Nt(e) {
+  const p = U(), [, u] = at(), [c, d] = C(!0), [b, s] = C(!1), [n, i] = C(!1), { isMobileOrTabletScreen: a } = st(), w = () => {
+    if (c) {
+      const g = e.botEmail;
+      u(g), d(!1);
+    }
+  }, v = () => {
+    s(!0);
+  }, I = () => {
+    s(!1);
+  };
+  return We(() => {
+    c === !1 && setTimeout(() => {
+      d(!0);
+    }, 2e3);
+  }, [c]), /* @__PURE__ */ o.jsx(
+    vt,
+    {
+      windowSize: p,
+      role: "presentation",
+      style: { background: S.overlayDark, ...e.style },
+      children: /* @__PURE__ */ o.jsx(
+        He,
+        {
+          onClickAway: () => {
+            i(!0), setTimeout(() => e.onCancelClick?.(), 250);
+          },
+          children: /* @__PURE__ */ o.jsxs(
+            Bt,
+            {
+              windowSize: p,
+              className: n ? "fade" : "",
+              fade: n,
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  Mt,
+                  {
+                    onClick: () => {
+                      i(!0), setTimeout(() => e.onCancelClick?.(), 250);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o.jsx($t, { children: e.title }),
+                /* @__PURE__ */ o.jsx(_t, { children: e.descriptionLines.map((g, l) => /* @__PURE__ */ o.jsxs(jt, { children: [
+                  /* @__PURE__ */ o.jsx(Et, { children: g.icon }),
+                  /* @__PURE__ */ o.jsx(Lt, { windowSize: p, children: g.text })
+                ] }, l)) }),
+                /* @__PURE__ */ o.jsxs(
+                  Rt,
+                  {
+                    onClick: w,
+                    onMouseOver: v,
+                    onMouseLeave: I,
+                    showCopyIcon: c,
+                    showCopyText: b,
+                    children: [
+                      /* @__PURE__ */ o.jsx(Ot, { showCopyText: b, children: e.botEmail }),
+                      c ? /* @__PURE__ */ o.jsx(
+                        At,
+                        {
+                          windowSize: p,
+                          showCopyText: b && !a,
+                          children: /* @__PURE__ */ o.jsx(Pt, {})
+                        }
+                      ) : /* @__PURE__ */ o.jsx(Dt, {})
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o.jsx(Ft, { children: c ? b && !a ? N.copy : null : N.copied })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const V = H.getLocalizedStrings(), m = V.spendManagement, {
+  common: {
+    texts: { comments: zt }
+  },
+  collaboration: {
+    threads: {
+      placeholder: { addANewComment: Ut, replyAComment: Ht },
+      tooltip: { resolveComment: Gt, unResolveComment: Vt }
+    }
+  }
+} = V, Wt = {
+  drawerSectionPaddingLeftRight: new T(x[4], x[5])
+}, Jt = Ve(
+  () => import("./SpendManagementPerTabPage-DObRTT7_.js")
+), co = (e) => {
+  const p = Ge(), u = ut(), 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,
+    isBillPayCommentingEnabled: L,
+    isReimbursementCommentingEnabled: j,
+    isDetectInsufficientFundsEnabled: oe = !1,
+    updateTabToState: ne,
+    onSubtabChange: R,
+    onReloadTransactions: ae,
+    onTransactionClick: P,
+    onClickSetupIcon: A,
+    onBackClick: se,
+    onAddTransactionClick: ie,
+    onColumnSortConfigChanged: le,
+    onSearchTextChanged: re,
+    onClickMenuIcon: ce,
+    onFiltersChange: de,
+    updateDownloadStateHandler: me,
+    bulkSubmissionLimit: pe = 10,
+    isBulkActionAllowed: ue = !1,
+    isRecurringBillInBulkActionList: he = !1,
+    transactionsSelectedForBulkAction: be = [],
+    allowedBulkActions: ge = [],
+    bulkSubmissionFetchState: Ce,
+    updateBulkActionList: ye,
+    removeAllTransactionsFromBulkActionList: fe,
+    onProceedForBulkActionClick: Te
+  } = e, xe = [
+    "draft",
+    "pending_approval",
+    "scheduled",
+    "paid"
+  ], Se = (h) => {
+    P(h, a);
+  }, we = /* @__PURE__ */ o.jsx(
+    Jt,
+    {
+      botEmail: n,
+      transactionList: d,
+      allSubTabs: b,
+      isAdmin: s,
+      selectedTab: a,
+      selectedSubTab: w,
+      fetchState: I,
+      onSubtabChange: R,
+      onTransactionRowClick: Se,
+      onReloadTransactions: ae,
+      onColumnSortConfigChanged: le,
+      analytics: g,
+      entity: l,
+      uiState: W,
+      searchText: $,
+      isShowDeletedBillsEnabled: ee,
+      isShowDeletedReimbursementEnabled: te,
+      isBillPayCommentingEnabled: L,
+      isReimbursementCommentingEnabled: j,
+      bulkSubmissionLimit: pe,
+      isBulkActionAllowed: ue,
+      isRecurringBillInBulkActionList: he,
+      transactionsSelectedForBulkAction: be,
+      isDetectInsufficientFundsEnabled: oe,
+      allowedBulkActions: ge,
+      bulkSubmissionFetchState: Ce,
+      updateBulkActionList: ye,
+      removeAllTransactionsFromBulkActionList: fe,
+      onProceedForBulkActionClick: Te
+    }
+  ), ve = (h) => {
+    ne(h), R("all");
+  }, Ie = Ke(
+    u.loggedInUserRoleMap
+  ), [O, ke] = C(!1), [Be, D] = C(!1), $e = (h) => {
+    ke(h);
+  }, Ee = l === "bill_pay" ? Ye(u.loggedInUserRoleMap) : Ze(u.loggedInUserRoleMap), Le = {
+    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: Ee,
+    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: ie,
+    onSearchOpen: $e,
+    onSearchTextChanged: re,
+    onClickSetupIcon: A,
+    onClickEmailInfoIcon: () => D(!0),
+    onFiltersChange: de,
+    getFilterOptions: l === "bill_pay" || l === "reimbursement" ? () => qt(
+      l,
+      Y ?? [],
+      u.loggedInUserRole ?? [],
+      []
+    ) : void 0,
+    updateDownloadStateHandler: me
+  }, je = /* @__PURE__ */ o.jsx(
+    St,
+    {
+      spendManagementSectionProps: Le
+    }
+  ), [Re, Pe] = C(
+    null
+  ), [Ae, k] = C(!1), { setRequestToOpenThread: Oe } = Je(ht), De = `dashboard_${u.currentTenant?.companyId}`, M = l === "bill_pay" ? "bill" : "reimbursement", { threads: Me } = bt(
+    {
+      application: "dashboard",
+      companyId: u.currentTenant?.companyId,
+      tab: M,
+      entityId: Re?.entityId,
+      isGlobalComment: !1
+    },
+    "both",
+    !1
+  ), _e = {
+    openAllThreadsDrawer: (h) => {
+      Pe({ ...h }), k(!0);
+    }
+  }, Fe = (h, B) => {
+    const { companyId: Ne, entityId: ze, entityType: Ue } = h;
+    k(!1), Oe({ threadId: B, companyId: Ne, entityType: Ue }), P(ze, a);
+  };
+  return /* @__PURE__ */ o.jsx(
+    gt,
+    {
+      sharedItems: {
+        sharedFunctions: { subtreeFunctions: _e },
+        sharedRef: void 0
+      },
+      children: /* @__PURE__ */ o.jsxs(Kt, { children: [
+        /* @__PURE__ */ o.jsx(
+          Ct,
+          {
+            source: "SpendManagementListViewPage",
+            title: l === "bill_pay" ? m.billPay.billsByTabs.pageTitle : m.reimbursement.reimbursementByTabs.pageTitle,
+            showBackButton: !i && !Ie,
+            showMenuIcon: c === "medium-compact" || c === "small",
+            backgroundColor: p.colors.grey4,
+            style: { zIndex: 3, ...yt.largeSemiBold.cssObject },
+            onBackClick: se,
+            rightSideComponent: je,
+            onClickMenuIcon: ce,
+            isSearchOpen: O
+          }
+        ),
+        /* @__PURE__ */ o.jsxs(Yt, { children: [
+          /* @__PURE__ */ o.jsx(Zt, { children: /* @__PURE__ */ o.jsx(
+            wt,
+            {
+              tabIds: xe,
+              approvalCount: v,
+              selectedTab: a,
+              entity: l,
+              enablePerformanceTracking: !1,
+              onTabSelectedChange: ve,
+              onClickSetupIcon: A
+            }
+          ) }),
+          we
+        ] }),
+        Be ? /* @__PURE__ */ o.jsx(
+          Nt,
+          {
+            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(ft, { 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(Tt, { 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" && j ? /* @__PURE__ */ o.jsx(qe, { id: De, children: /* @__PURE__ */ o.jsx(
+          xt,
+          {
+            isDrawerOpen: Ae,
+            allowComposer: !1,
+            drawerTitle: zt,
+            threads: Me,
+            autoExpand: !0,
+            autoFocus: !1,
+            filter: {
+              application: "dashboard",
+              companyId: u.currentTenant?.companyId,
+              isGlobalComment: !1,
+              tab: M
+            },
+            isLoading: !1,
+            textOverrides: {
+              composerPlaceholder: Ut,
+              replyComposerPlaceholder: Ht,
+              threadResolve: Gt,
+              threadUnResolve: Vt
+            },
+            onThreadClick: (h, B) => Fe(h, B),
+            onCloseAllThreadsDrawer: () => k(!1),
+            drawerSectionStyle: {
+              width: c === "small" ? "100%" : "400px",
+              boxSizing: c === "small" ? "border-box" : "content-box",
+              padding: `${t.sp0} ${Wt.drawerSectionPaddingLeftRight.valuePx(c)}`,
+              backgroundColor: p.colors.background
+            },
+            collapsibleThreadStyle: {
+              width: c === "small" ? "100%" : "360px"
+            }
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}, qt = (e, p, u, c) => {
+  const d = m.filters.filterOptions;
+  return e === "bill_pay" ? Qe.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) ? Xe : et).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]: []
+        };
+    }
+  }, {}) : tt.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]: [
+            ...nt.map((i) => ({
+              label: i.name,
+              value: i.code
+            }))
+          ]
+        };
+      case "priority":
+        return {
+          ...s,
+          [n.value]: [
+            ...ot.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]: []
+        };
+    }
+  }, {});
+}, Kt = r.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, Yt = r.div`
+  display: block;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: calc(100vh - ${t.sp10});
+`, Zt = r.div`
+  display: flex;
+  margin-top: ${t.sp3};
+  justify-content: center;
+`;
+export {
+  co as default,
+  qt as getDashboardFilterCategoryValues
+};