@zeniai/web-components 3.17.12 → 3.17.13

package/dist/SpendManagementListViewPage-DsZD1PFZ.js

@@ -1,631 +0,0 @@
-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-HuMzFv1o.js";
-import { S as vt } from "./SpendManagementSection-C1u09bWA.js";
-import { T as It } from "./StatusSwitcher-DwKQCBy2.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-BIgapYDM.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
-};