@zeniai/web-components 3.16.91 → 3.16.92

package/dist/TransactionList-X-6-ohWo.js

@@ -0,0 +1,558 @@
+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-B2klaOGU.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, g4 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-B_vMG-7O.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-i_X_8QxH.js";
+import { t as P } from "./commonDimensions-jC1Pd3Ai.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
+};