@zeniai/web-components 3.16.86 → 3.16.87

package/dist/TransactionList-BrYkFs7L.js

@@ -1,558 +0,0 @@
-import { j as e, aC as mt, aD as xt, aA as pt, aE as ft, A as gt, V as ht } from "./vendor-.pnpm-D5gxGIYo.js";
-import bt, { forwardRef as $t, useMemo as wt, createRef as yt, useState as O, useEffect as W, useRef as vt } from "react";
-import i from "@emotion/styled";
-import { a as w, u as A, A as jt, e as p, R as J, o as y, D as h, g3 as K, S as a, fq as X, a2 as tt, E as St, F as kt, fa as Dt, C as N } from "./index-CHni923I.js";
-import { addPeriod as q, getStartOfAndEndOfTimeframeForFY as G, subtractPeriod as Q, formatZeniDate as k, toTransactionTypeStrict as et, isVendorTransaction as nt, dateNow as Tt } from "@zeniai/client-epic-state";
-import { B as at } from "./BoxItem-ZnOFxLhz.js";
-import { t as P } from "./commonDimensions-D1k9BC56.js";
-const M = (t) => t ? 24 : 125, Ct = {
-  containerPaddingBottom: new J(h[9], h[8])
-}, U = i.div`
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-end;
-  height: ${(t) => M(t.isLoadNextItem)}px;
-  color: ${(t) => t.theme.colors.grey1};
-  &:hover {
-    color: ${(t) => t.theme.colors.champion};
-  }
-  padding-top: ${(t) => t.isLoadNextItem ? 0 : 45}px;
-  padding-bottom: ${(t) => Ct.containerPaddingBottom.valuePx(t.windowSize)};
-`, Lt = i(y)`
-  display: flex;
-  cursor: pointer;
-`;
-function B({
-  firstMonthOfFY: t,
-  isLoadNextItem: r,
-  isLoading: l,
-  timePeriod: o,
-  fixedTimePeriod: n,
-  timeframe: c,
-  doLoadMoreTransactions: x
-}) {
-  let u = o;
-  if (r)
-    if (n != null) {
-      const f = q(
-        o.endDate.startOf("month"),
-        t,
-        n.numberOfPeriods,
-        n.timeframe
-      );
-      u = {
-        startDate: u.endDate.add(1, "day"),
-        endDate: f
-      };
-    } else {
-      const f = q(
-        o.endDate.startOf("month"),
-        t,
-        1,
-        c
-      ), { startOfTimeframeFY: v, endOfTimeframeFY: j } = G(
-        f,
-        t,
-        c
-      );
-      u = {
-        startDate: v,
-        endDate: j
-      };
-    }
-  else if (n != null)
-    u = {
-      startDate: Q(
-        o.startDate.startOf("month"),
-        t,
-        n.numberOfPeriods,
-        n.timeframe
-      ),
-      endDate: o.startDate.subtract(1, "day")
-    };
-  else {
-    const f = Q(
-      o.startDate.startOf("month"),
-      t,
-      1,
-      c
-    ), { startOfTimeframeFY: v, endOfTimeframeFY: j } = G(
-      f,
-      t,
-      c
-    );
-    u = {
-      startDate: v,
-      endDate: j
-    };
-  }
-  const s = w.getLocalizedStrings();
-  let m = "";
-  n == null ? c === "month" ? m = `${r === !0 ? s.transactionList.loadNextMonthPrefix : s.transactionList.loadPreviousMonthPrefix} (${k(
-    u.startDate,
-    s.dateFormat.visual.MMMYYYYFormat,
-    t
-  )})` : c === "quarter" ? m = `${r === !0 ? s.transactionList.loadNextQuarterPrefix : s.transactionList.loadPreviousQuarterPrefix} (${s.transactionList.quarterPrefix}${k(
-    u.startDate,
-    s.dateFormat.visual.QYYYYformat,
-    t
-  )})` : m = `${r === !0 ? s.transactionList.loadNextYearPrefix : s.transactionList.loadPreviousYearPrefix} (${k(u.startDate, s.dateFormat.visual.YYYYformat, t)})` : m = `${r === !0 ? s.transactionList.loadNextMonthPrefix : s.transactionList.loadPreviousPrefix} ${n.numberOfPeriods} ${s.transactionList.monthsSuffix} - (${k(
-    u.startDate,
-    s.dateFormat.visual.MMMYYYYFormat,
-    t
-  )} - ${k(u.endDate, s.dateFormat.visual.MMMYYYYFormat, t)})`;
-  const D = A();
-  return l === !0 ? /* @__PURE__ */ e.jsx(U, { windowSize: D, isLoadNextItem: r, children: /* @__PURE__ */ e.jsx(jt, { size: "Small", start: !0 }) }) : /* @__PURE__ */ e.jsx(U, { windowSize: D, isLoadNextItem: r, children: /* @__PURE__ */ e.jsx(
-    Lt,
-    {
-      "data-testid": p(
-        "load-more-transactions",
-        m
-      ),
-      onClick: () => {
-        x?.(u, c);
-      },
-      children: m
-    }
-  ) });
-}
-B.displayName = "LoadMoreTransactions";
-const {
-  common: {
-    strings: { empty: _ }
-  }
-} = w.getLocalizedStrings(), Mt = i(St)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  margin-left: ${a.sp3};
-  padding: 1px 6px;
-  border: 1px solid ${(t) => t.theme.colors.grey2};
-  border-radius: ${a.sp1};
-  color: ${(t) => t.theme.colors.grey1};
-  min-width: max-content;
-`, Yt = i.div`
-  display: flex;
-  padding: ${a.sp3} ${a.sp4};
-  flex-direction: row;
-  width: 100%;
-`, It = i.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-`, zt = i(y)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  margin-left: ${a.sp3};
-  max-height: ${a.sp11};
-  text-overflow: ellipsis;
-  word-break: break-word;
-  text-align: left;
-  overflow: hidden;
-`, Rt = i(y)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  margin-left: ${a.sp3};
-  text-align: right;
-  width: ${(t) => P.amountWidth.valuePx(t.windowSize)};
-`, Et = i.div`
-  display: flex;
-`;
-function Ft({
-  transaction: t,
-  onItemClick: r
-}) {
-  const { description: l, typeName: o, amount: n, logo: c, vendorId: x } = t, u = nt(t) && x == null;
-  return /* @__PURE__ */ e.jsxs(
-    Yt,
-    {
-      onClick: () => r?.(t),
-      "data-testid": p(
-        "transaction-item-medium",
-        t.id
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx(
-          K,
-          {
-            photoUrl: u === !1 ? c?.toString() ?? _ : _,
-            styles: {
-              width: a.sp4,
-              height: a.sp4,
-              borderRadius: a.sp0
-            },
-            placeholder: {
-              width: h[4],
-              height: h[4]
-            },
-            fallbackAvatar: /* @__PURE__ */ e.jsx(Et, { children: /* @__PURE__ */ e.jsx(X, { name: l, size: a.sp4 }) })
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(It, { children: [
-          /* @__PURE__ */ e.jsx(zt, { children: l }),
-          o != null ? /* @__PURE__ */ e.jsx(Mt, { className: "tag", children: o }) : null
-        ] }),
-        /* @__PURE__ */ e.jsx(Rt, { children: tt("0,0.00", n) })
-      ]
-    }
-  );
-}
-function Bt({
-  data: t,
-  boxType: r,
-  onItemClick: l
-}) {
-  const o = et(t.type) == null, n = /* @__PURE__ */ e.jsx(
-    Ft,
-    {
-      transaction: t,
-      onItemClick: o ? void 0 : l
-    }
-  );
-  return /* @__PURE__ */ e.jsx(at, { content: n, boxType: r, isDisabled: o });
-}
-const {
-  common: {
-    strings: { empty: Z }
-  }
-} = w.getLocalizedStrings(), At = i.div`
-  display: flex;
-  padding: ${a.sp3} ${a.sp4};
-  flex-direction: row;
-  width: 100%;
-`, Pt = i.div`
-  width: 100%;
-`, Ht = i(y)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  margin-left: ${a.sp3};
-  max-height: ${a.sp11};
-  text-overflow: ellipsis;
-  word-break: break-word;
-  text-align: left;
-  overflow: hidden;
-`, Vt = i(y)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  margin-left: ${a.sp3};
-  text-align: right;
-  width: ${(t) => P.amountWidth.valuePx(t.windowSize)};
-`, Ot = i.div`
-  display: flex;
-`;
-function Wt({
-  transaction: t,
-  onItemClick: r
-}) {
-  const { description: l, amount: o, logo: n, vendorId: c } = t, x = nt(t) && c == null;
-  return /* @__PURE__ */ e.jsxs(
-    At,
-    {
-      onClick: () => r?.(t),
-      "data-testid": p(
-        "transaction-item-small",
-        t.id
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx(
-          K,
-          {
-            photoUrl: x === !1 ? n?.toString() ?? Z : Z,
-            styles: {
-              width: a.sp4,
-              height: a.sp4,
-              borderRadius: a.sp0
-            },
-            placeholder: {
-              width: h[4],
-              height: h[4]
-            },
-            fallbackAvatar: /* @__PURE__ */ e.jsx(Ot, { children: /* @__PURE__ */ e.jsx(X, { name: l, size: a.sp4 }) })
-          }
-        ),
-        /* @__PURE__ */ e.jsx(Pt, { children: /* @__PURE__ */ e.jsx(Ht, { children: l }) }),
-        /* @__PURE__ */ e.jsx(Vt, { children: tt("0,0.00", o) })
-      ]
-    }
-  );
-}
-function Nt({
-  data: t,
-  boxType: r,
-  onItemClick: l
-}) {
-  const o = et(t.type) == null, n = /* @__PURE__ */ e.jsx(
-    Wt,
-    {
-      transaction: t,
-      onItemClick: o ? void 0 : l
-    }
-  );
-  return /* @__PURE__ */ e.jsx(at, { content: n, boxType: r, isDisabled: o });
-}
-function qt(t) {
-  return A() === "small" ? /* @__PURE__ */ e.jsx(Nt, { ...t }) : /* @__PURE__ */ e.jsx(Bt, { ...t });
-}
-const Gt = i.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  box-shadow: ${(t) => `${a.sp0} 2px ${a.sp1} ${t.theme.colors.dropShadowNormal}`};
-  border-radius: ${a.sp2};
-  background-color: ${(t) => t.theme.colors.grey5};
-`, Qt = i(kt)`
-  display: flex;
-  height: 21px;
-  margin-bottom: ${a.sp2};
-  margin-top: ${a.sp3};
-  color: ${(t) => t.theme.colors.grey1};
-`, Ut = i.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`, _t = (t, r) => r.length === 1 ? "roundedBox" : t === 0 ? "topRoundedBox" : t === r.length - 1 ? "bottomRoundedBox" : "box", Zt = (t) => t * P.transactionItemHeight + 45;
-function Jt({ date: t, transactions: r, onItemClick: l }) {
-  const { dateFormat: o } = w.getLocalizedStrings();
-  return /* @__PURE__ */ e.jsxs(Ut, { "data-testid": p("transactions-group"), children: [
-    /* @__PURE__ */ e.jsx(Qt, { children: Tt().year() === t.year() ? t.format(o.visual.MMMDFormat) : t.format(o.visual.MMMDCommaYYYYformat) }),
-    /* @__PURE__ */ e.jsx(Gt, { children: r.map((n, c) => /* @__PURE__ */ e.jsx(
-      qt,
-      {
-        data: n,
-        boxType: _t(c, r),
-        onItemClick: (x) => {
-          l?.(x);
-        },
-        "data-testid": p(
-          "transaction-item",
-          n.id
-        )
-      },
-      n.id
-    )) })
-  ] });
-}
-const Kt = bt.memo(Jt), { dateFormat: Xt } = w.getLocalizedStrings();
-function te(t) {
-  const r = mt(
-    t,
-    (n) => n.date.format(Xt.visual.MMMDCommaYYYYformat)
-  ), l = xt(
-    r,
-    (n) => n.length > 0
-  );
-  return pt(
-    l,
-    (n) => ({
-      date: n[0].date,
-      transactions: ft(
-        n,
-        (c) => c.updateTime,
-        "desc"
-      )
-    })
-  );
-}
-const $ = w.getLocalizedStrings(), ee = {
-  listItemMargin: new J(h[3], h[8])
-}, ne = i.div`
-  display: flex;
-  flex: 1 1 auto;
-  width: 99.9%;
-`, L = i.div`
-  margin: ${(t) => `${a.sp0} ${ee.listItemMargin.valuePx(t.windowSize)}`};
-`, ae = i.div`
-  min-height: ${a.sp8};
-`, re = i.div`
-  display: flex;
-  height: 100%;
-  flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-end;
-`, oe = i(y)`
-  display: flex;
-  color: ${(t) => t.theme.colors.grey2};
-`, se = i(ht)`
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  &::-webkit-scrollbar {
-    width: ${a.sp2};
-    height: ${a.sp0};
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 2px ${N.scrollbarBoxShadow};
-    -webkit-box-shadow: inset 0 0 2px ${N.scrollbarBoxShadow};
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  &:hover {
-    scrollbar-color: ${(t) => t.theme.colors.grey1} transparent;
-    &::-webkit-scrollbar {
-      width: ${a.sp2};
-      height: ${a.sp0};
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: ${(t) => t.theme.colors.grey1};
-      border-radius: 2px;
-    }
-  }
-`, fe = $t(function({
-  firstMonthOfFY: r,
-  timeframe: l,
-  timePeriod: o,
-  transactions: n,
-  isFirstLotLoading: c,
-  currentScrollYOffset: x,
-  componentName: u,
-  showLoadNext: s,
-  showLoadPrevious: m,
-  onTransactionItemClick: D,
-  trackPerformance: f = !0,
-  onTransactionListScroll: v,
-  onListInnerElementHeightChanged: j
-}, rt) {
-  const T = wt(
-    () => te(n),
-    [n]
-  ), Y = yt(), [I, ot] = O(!1);
-  W(() => {
-    Y.current?.resetAfterIndex(0);
-  }, [n, Y]);
-  const st = rt, S = vt(null), [it, lt] = O(
-    void 0
-  );
-  W(() => {
-    !I && c === !1 && ot(!0);
-  }, [c, I]), Dt({
-    componentName: u,
-    enabled: f && I
-  });
-  const ct = () => {
-    if (S != null && typeof S == "object" && S.current) {
-      const d = S.current;
-      d != null && d.clientHeight > 0 && d.clientHeight != it && (lt(d.clientHeight), j?.(d.clientHeight));
-    }
-  }, z = T.length === 0, H = m != null, R = s != null, E = T.length + (s != null ? 1 : 0) + (m != null ? 1 : 0) + (z === !0 ? 1 : 0), V = (d) => R === !0 ? d - 1 : d, C = A(), dt = ({ index: d, style: b }) => {
-    if (R === !0 && d === 0)
-      return /* @__PURE__ */ e.jsx("div", { style: { ...b }, children: /* @__PURE__ */ e.jsx(
-        L,
-        {
-          windowSize: C,
-          "data-testid": p(
-            "transaction-list",
-            "list-item-load-more"
-          ),
-          children: /* @__PURE__ */ e.jsx(
-            B,
-            {
-              firstMonthOfFY: r,
-              isLoadNextItem: !0,
-              isLoading: s?.isLoading == !0,
-              timePeriod: o,
-              timeframe: l,
-              fixedTimePeriod: s?.fixedTimePeriod,
-              doLoadMoreTransactions: (g, F) => {
-                s?.onLoadNextClick?.(g, F);
-              }
-            }
-          )
-        }
-      ) });
-    if (H === !0 && d === E - 1)
-      return /* @__PURE__ */ e.jsx("div", { style: { ...b }, children: /* @__PURE__ */ e.jsx(
-        L,
-        {
-          windowSize: C,
-          "data-testid": p(
-            "transaction-list",
-            "list-item-load-previous"
-          ),
-          children: /* @__PURE__ */ e.jsx(
-            B,
-            {
-              firstMonthOfFY: r,
-              isLoadNextItem: !1,
-              isLoading: m?.isLoading == !0,
-              timePeriod: o,
-              fixedTimePeriod: m?.fixedTimePeriod,
-              timeframe: l,
-              doLoadMoreTransactions: (g, F) => {
-                m?.onLoadPreviousClick?.(
-                  g,
-                  F
-                );
-              }
-            }
-          )
-        }
-      ) });
-    if (z === !1) {
-      const g = T[V(d)];
-      return /* @__PURE__ */ e.jsx("div", { style: { ...b }, children: /* @__PURE__ */ e.jsxs(L, { windowSize: C, children: [
-        /* @__PURE__ */ e.jsx(
-          Kt,
-          {
-            date: g.date,
-            transactions: g.transactions,
-            onItemClick: D
-          }
-        ),
-        m == null ? /* @__PURE__ */ e.jsx(ae, {}) : null
-      ] }) });
-    } else
-      return /* @__PURE__ */ e.jsx("div", { style: { ...b }, children: /* @__PURE__ */ e.jsx(re, { children: /* @__PURE__ */ e.jsx(
-        L,
-        {
-          windowSize: C,
-          "data-testid": p(
-            "transaction-list",
-            "transactions-list-empty"
-          ),
-          children: /* @__PURE__ */ e.jsx(oe, { children: ie(
-            o,
-            s?.isLoading == !0 || m?.isLoading == !0
-          ) })
-        }
-      ) }) });
-  }, ut = (d) => R === !0 && d === 0 ? M(!0) : H === !0 && d === E - 1 ? M(!1) : z === !1 ? Zt(
-    T[V(d)].transactions.length
-  ) : M(!1);
-  return /* @__PURE__ */ e.jsx(ne, { children: /* @__PURE__ */ e.jsx(gt, { children: ({ height: d, width: b }) => /* @__PURE__ */ e.jsx(
-    se,
-    {
-      "data-testid": p("transaction-list"),
-      ref: Y,
-      height: d,
-      width: b,
-      innerRef: S,
-      outerRef: st,
-      onItemsRendered: ct,
-      itemCount: E,
-      itemSize: ut,
-      onScroll: ({ scrollOffset: g }) => {
-        v?.(g);
-      },
-      initialScrollOffset: x ?? 0,
-      children: dt
-    }
-  ) }) });
-}), ie = (t, r) => r === !0 ? $.transactionList.fetching : t.startDate.isSame(t.endDate, "month") ? `${$.transactionList.noTransactionsFoundForPrefix} (${t.startDate.format($.dateFormat.visual.MMMYYFormat)})` : `${$.transactionList.noTransactionsFoundForPeriodPrefix} (${t.startDate.format($.dateFormat.visual.MMMYYFormat)} - ${t.endDate.format(
-  $.dateFormat.visual.MMMYYFormat
-)})`;
-export {
-  fe as T
-};