@zeniai/web-components 3.17.3 → 3.17.4

package/dist/SpendManagementListViewPage-B_xULtiu.js

@@ -1,627 +0,0 @@
-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
-};