@zeniai/web-components 3.16.58 → 3.16.59

package/dist/ChargeCardListPage-CiLjIfsk.js

@@ -0,0 +1,1775 @@
+import { j as t, g as Xn, aJ as Qn, m as Vn, C as eo, F as to, u as tn } from "./vendor-.pnpm-Q8NJHkXi.js";
+import { useState as U, useEffect as ue, useCallback as pe, useMemo as te, useRef as Ot } from "react";
+import { css as lt, keyframes as no } from "@emotion/react";
+import o from "@emotion/styled";
+import { hasChargeCardAdminLevelAccess as oo, anyCardOnHold as so, dateNow as _t, zeniDate as ao, getNextNthWorkingDay as ro } from "@zeniai/client-epic-state";
+import { G as se, u as we, j as dt, a as Fe, S as n, R as W, fZ as co, C as m, V as io, E as pt, J as mt, p as lo, H as po, b5 as mo, W as uo, D, ia as ho, B as zt, a5 as he, eY as fo, dB as go, aD as z, dz as xo, i1 as So, ea as G, aE as yo, hs as ne, t as F, Z as rt, dK as ct, av as Co, K as bo, X as $o, ax as nn, ag as vo, P as ko } from "./index-CkG1pP2v.js";
+import { B as jo } from "./BusyIndication-DE9NSMoT.js";
+import { S as Io } from "./SpendManagementSection-DTeMqeYV.js";
+import { A as oe, C as Ro, a as Bo } from "./ChargeCardListTable-7Lojy4cl.js";
+import { ChargeCardPromoUserContent as Po } from "./ChargeCardPromoPage-DqIn9Bf_.js";
+import { P as To, M as Mo } from "./PromoBaseCards-DxDHh6Sf.js";
+import { C as Ut, L as Ht, R as wo, U as Fo } from "./LockCardPage-CJkV6ysY.js";
+import { S as Lo, a as No } from "./graphic-no-data-net-burn-l-CzmycA0m.js";
+import { S as Oo, a as _o } from "./arrow-south-east-round-PEovUgvH.js";
+const ut = {
+  infoSubheadingTextMarginTop: new W(D[0], D[0]),
+  cardsMinWidth: new W(343, 353)
+}, Dt = Fe.getLocalizedStrings().spendManagement.chargeCard.chargeCardsPromo.listPage, At = ({
+  cardPromoType: e,
+  cardText: l,
+  header: p,
+  title: i,
+  subTitle: r,
+  slidingTextList: u,
+  onClick: P
+}) => {
+  const N = we();
+  return /* @__PURE__ */ t.jsxs(
+    Uo,
+    {
+      windowSize: N,
+      cardPromoType: e,
+      "data-testid": dt("list-page-promo-card", e),
+      onClick: () => P(e),
+      children: [
+        /* @__PURE__ */ t.jsxs(on, { children: [
+          /* @__PURE__ */ t.jsxs(an, { children: [
+            /* @__PURE__ */ t.jsx(sn, { children: p }),
+            /* @__PURE__ */ t.jsx(Ao, { children: i }),
+            /* @__PURE__ */ t.jsx(Yo, { children: r })
+          ] }),
+          /* @__PURE__ */ t.jsxs(Eo, { children: [
+            /* @__PURE__ */ t.jsx(Ko, {}),
+            u.length > 0 && /* @__PURE__ */ t.jsx(it, { slideUpCount: u.length, children: u.map((A, O) => /* @__PURE__ */ t.jsx(rn, { children: A }, `card-promo-${O.toString()}`)) }),
+            /* @__PURE__ */ t.jsx(Jo, {})
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx(qo, { children: /* @__PURE__ */ t.jsx(
+          To,
+          {
+            cardPromoType: e,
+            cardText: l,
+            shouldAnimate: !1,
+            forDashboard: !1,
+            showChip: !1,
+            forListPage: !0
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(Zo, { children: /* @__PURE__ */ t.jsx(
+          Mo,
+          {
+            cardPromoType: e,
+            cardText: l,
+            shouldAnimate: !1,
+            forDashboard: !1,
+            showChip: !1,
+            forListPage: !0
+          }
+        ) })
+      ]
+    }
+  );
+}, Gt = ({
+  cardType: e,
+  header: l,
+  title: p,
+  creditLimit: i,
+  onCreateNowClick: r
+}) => {
+  const u = we();
+  return /* @__PURE__ */ t.jsx(Ho, { windowSize: u, cardType: e, children: /* @__PURE__ */ t.jsxs(Do, { children: [
+    /* @__PURE__ */ t.jsxs(an, { children: [
+      /* @__PURE__ */ t.jsx(sn, { children: l }),
+      /* @__PURE__ */ t.jsx(Wo, { children: /* @__PURE__ */ t.jsx(Go, { children: p }) }),
+      /* @__PURE__ */ t.jsx(Xo, { windowSize: u, children: /* @__PURE__ */ t.jsxs(
+        Qo,
+        {
+          windowSize: u,
+          onClick: () => r(e),
+          "data-testid": dt("total-cashback-info"),
+          children: [
+            /* @__PURE__ */ t.jsx(rn, { children: Dt.createNow }),
+            /* @__PURE__ */ t.jsx(Vo, {})
+          ]
+        }
+      ) })
+    ] }),
+    e === "creditCard" ? /* @__PURE__ */ t.jsxs(es, { children: [
+      /* @__PURE__ */ t.jsx(ts, { children: Dt.creditLimit }),
+      /* @__PURE__ */ t.jsx(ns, { children: i })
+    ] }) : null
+  ] }) });
+}, zo = (e) => {
+  const l = e - 1;
+  let p = `
+    0% {
+      transform: translateY(0);
+    }
+  `;
+  const i = l * 3.5, r = 0.5, u = 3;
+  for (let P = 1; P < l; P++) {
+    const N = P * (u + r) * 100 / i, A = N - r * 100 / i, O = -21 * P;
+    p += `
+    ${A}% {
+      transform: translateY(${O + 21}px); 
+    }
+    ${N}% {
+      transform: translateY(${O}px);
+    }
+    `;
+  }
+  return p += `
+  ${((l - 1) * (u + r) + u) * 100 / i}% {
+    transform: translateY(${-21 * (l - 1)}px);
+  }
+  99.99% {
+    transform: translateY(${-21 * l}px);
+  }
+  100% {
+      transform: translateY(0);
+  }
+  `, no`${p}`;
+}, Uo = o.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  gap: ${n.sp3};
+  background-color: ${(e) => e.cardPromoType === "debit" ? e.theme.colors.brandColorOnyx : e.theme.colors.brandColorSapphireDark};
+  border-radius: 12px;
+  padding: ${n.sp4};
+  color: white;
+  min-width: ${(e) => ut.cardsMinWidth.valuePx(e.windowSize)};
+  height: 188px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  flex-grow: 1;
+  flex-basis: 33.33%;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => e.theme.colors.elevation1};
+  ${(e) => e.cardPromoType === "debit" ? lt`
+          background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/MetalCardPattern.svg);
+          background-repeat: no-repeat;
+          background-position-x: -120px;
+          background-position-y: -54px;
+        ` : null}
+`, Ho = o.div`
+  background-color: ${(e) => e.cardType === "debitCard" ? e.theme.colors.brandColorOnyx : e.theme.colors.brandColorSapphire};
+  border-radius: 12px;
+  padding: ${n.sp4};
+  color: white;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  min-width: ${(e) => ut.cardsMinWidth.valuePx(e.windowSize)};
+  height: 188px;
+  box-sizing: border-box;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/promo-list-pattern.svg);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  align-self: stretch;
+  flex-grow: 1;
+  flex-basis: 33.33%;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => e.theme.colors.elevation1};
+`, on = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${n.sp5};
+`, Do = o(on)`
+  flex-direction: row;
+  justify-content: space-between;
+`, sn = o(co)`
+  color: ${(e) => e.theme.colors.brandColorGold};
+`, Ao = o(po)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+`, Go = o(io)`
+  color: ${m.neutralGrey5Light};
+  white-space: pre-line;
+`, Wo = o.div`
+  width: auto;
+  text-align: left;
+`, Yo = o(se)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+`, Eo = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${n.sp2};
+  height: 21px;
+  overflow: hidden;
+`, it = o(se)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  overflow: hidden;
+  align-self: baseline;
+  width: 224px;
+  ${(e) => lt`
+    animation: ${zo(e.slideUpCount)}
+      ${(e.slideUpCount - 1) * 3.5}s ease-out infinite;
+  `}
+`, an = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`, Ko = o(mo)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${m.success};
+  border-radius: 50%;
+`, Jo = o(uo)`
+  width: ${n.sp4};
+  height: ${n.sp4};
+  color: ${(e) => e.theme.colors.brandColorJade};
+  margin-left: ${n.sp3};
+`, qo = o.div`
+  position: absolute;
+  top: ${n.sp2};
+  right: -29px;
+`, Zo = o.div`
+  position: absolute;
+  top: 37px;
+  right: -46px;
+`, rn = o.div``, Xo = o.div`
+  border: 1px solid ${m.neutralGrey5Light};
+  border-radius: ${n.sp12};
+  width: fit-content;
+  justify-self: ${(e) => e.windowSize === "small" ? "flex-start" : "flex-end"};
+  margin-top: ${n.sp1};
+  padding: ${n.sp0} ${n.sp2};
+`, Qo = o(pt)`
+  color: ${m.neutralGrey5Light};
+  margin-top: ${(e) => ut.infoSubheadingTextMarginTop.valuePx(e.windowSize)};
+  gap: ${n.sp1};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`, Vo = o(mt)`
+  color: ${m.neutralGrey5Light};
+  width: ${n.sp2};
+  height: ${n.sp2};
+`, es = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, ts = o(pt)`
+  color: ${m.neutralGrey5Light};
+`, ns = o(lo)`
+  color: ${m.neutralGrey5Light};
+`, me = "spendLimit", Y = Fe.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup;
+function os({
+  currentSpentAmount: e,
+  hasCreditCard: l,
+  hasDebitCard: p,
+  maxLimitAmountForCreditCard: i,
+  maxLimitAmountForDebitCard: r,
+  isDisabled: u,
+  updateLimitFetchState: P,
+  onCancelClick: N,
+  onSubmitClick: A
+}) {
+  const O = we(), ae = "SpendLimitForm", E = Xn({
+    mode: "onBlur",
+    reValidateMode: "onBlur",
+    defaultValues: { [me]: void 0 }
+  }), {
+    control: Le,
+    formState: { errors: Ne }
+  } = E, [Oe, _e] = U(
+    void 0
+  ), g = Qn({
+    control: Le,
+    name: me
+  }), y = () => {
+    N();
+  }, k = E.handleSubmit(() => {
+    const C = E.getValues(me);
+    C != null && A(C);
+  }), j = Vn(Ne, me), ge = Fe.getLocalizedStrings().common, K = Me.largeLabelWidth.value(O);
+  return ue(() => {
+    _e(
+      ss(
+        e,
+        l,
+        p,
+        i,
+        r,
+        g
+      )
+    );
+  }, [
+    g,
+    e,
+    i,
+    r,
+    l,
+    p
+  ]), /* @__PURE__ */ t.jsx(as, { windowSize: O, role: "presentation", children: /* @__PURE__ */ t.jsx(eo, { onClickAway: () => N(), children: /* @__PURE__ */ t.jsxs(rs, { windowSize: O, children: [
+    /* @__PURE__ */ t.jsx(to, { ...E, children: /* @__PURE__ */ t.jsxs(
+      ms,
+      {
+        id: ae,
+        onSubmit: (C) => {
+          C.preventDefault(), k();
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(cs, { windowSize: O, children: Y.heading }),
+          /* @__PURE__ */ t.jsx(ps, { hasError: j, children: /* @__PURE__ */ t.jsx(
+            ho,
+            {
+              label: {
+                label: Y.newLimit,
+                width: K
+              },
+              showAdditionalInfoLabel: j,
+              additionalInfoLabel: Oe,
+              formattedTextField: {
+                type: "number",
+                name: me,
+                defaultValue: void 0,
+                placeholder: Y.placeholder,
+                returnValueType: "floatValue",
+                prefix: "$",
+                allowNegative: !0,
+                isNumericString: !1,
+                registerOptions: {
+                  required: !0,
+                  validate: (C) => {
+                    if (!C || C <= 0 || C <= e.amount)
+                      return !1;
+                    if (p && l && r != null && i != null) {
+                      const I = Math.min(
+                        r.amount,
+                        i.amount
+                      );
+                      if (C > I)
+                        return !1;
+                    } else {
+                      if (p && r != null && C > r.amount)
+                        return !1;
+                      if (l && i != null && C > i.amount)
+                        return !1;
+                    }
+                    return !0;
+                  }
+                },
+                autoComplete: "off",
+                decimalSeparator: ".",
+                decimalScale: 2,
+                fixedDecimalScale: !1,
+                thousandSeparator: !0
+              },
+              style: {
+                width: "auto"
+              },
+              showOutlineOnFocus: !1
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t.jsx(ds, { children: /* @__PURE__ */ t.jsxs(is, { children: [
+      /* @__PURE__ */ t.jsx(
+        zt,
+        {
+          label: ge.cancel,
+          onClick: y,
+          style: { width: 84 }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(ls, {}),
+      /* @__PURE__ */ t.jsx(
+        zt,
+        {
+          variant: "primary",
+          label: ge.texts.update,
+          style: { width: 84, whiteSpace: "nowrap" },
+          loading: P === "In-Progress",
+          type: "submit",
+          form: ae,
+          disabled: u
+        }
+      )
+    ] }) })
+  ] }) }) });
+}
+const ss = (e, l, p, i, r, u) => {
+  if (u != null) {
+    if (u <= e.amount)
+      return Y.amountBelowErrorBulk;
+    if (p && l && r != null && i != null) {
+      const P = Math.min(
+        r.amount,
+        i.amount
+      );
+      if (u > P) {
+        const N = r.amount < i.amount ? "debit" : "credit", A = r.amount < i.amount ? r : i;
+        return Y.maxLimitForCardTypeError.replace("_card_type_", N).replace("_amount_", he("0,0.[00]", A));
+      }
+    } else {
+      if (p && r != null && u > r.amount)
+        return Y.maxLimitForCardTypeError.replace("_card_type_", "debit").replace(
+          "_amount_",
+          he("0,0.[00]", r)
+        );
+      if (l && i != null && u > i.amount)
+        return Y.maxLimitForCardTypeError.replace("_card_type_", "credit").replace(
+          "_amount_",
+          he("0,0.[00]", i)
+        );
+    }
+  }
+}, Me = {
+  width: new W(343, 500, 500),
+  largeLabelWidth: new W(108, 108, 108),
+  popupLeftRightPadding: new W(D[5], D[6]),
+  popupTopBottomPadding: new W(D[5], D[5])
+}, as = o.div`
+  position: fixed;
+  top: ${n.sp0};
+  left: ${n.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${m.overlayDark};
+`, rs = o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${n.sp2};
+  position: relative;
+  margin: auto;
+  width: ${(e) => Me.width.valuePx(e.windowSize)};
+  padding: ${(e) => `${Me.popupTopBottomPadding.valuePx(e.windowSize)} ${Me.popupLeftRightPadding.valuePx(e.windowSize)}`};
+  box-sizing: border-box;
+`, cs = o(fo)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${n.sp3};
+`, is = o.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${n.sp4};
+`, ls = o.div`
+  width: ${n.sp3};
+`, ds = o.div`
+  display: flex;
+  flex-direction: column;
+`, ps = o.div`
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => `${n.sp0} 1px 2px ${n.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${n.sp2};
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${(e) => `1px solid ${e.theme.colors.primary}`};
+    input {
+      background-color: ${(e) => e.hasError ? m.importantLight : e.theme.colors.background} !important;
+    }
+  }
+`, ms = o.form`
+  display: contents;
+`, fe = {
+  contentContainerMargin: new W(D[3], D[4], D[8]),
+  infoSubheadingTextMarginTop: new W(D[0], D[0]),
+  cardsMinWidth: new W(343, 353)
+}, us = {
+  remainingText: new Co("largeRegular", "largeRegular")
+}, {
+  spendManagement: {
+    chargeCard: {
+      payEarly: S,
+      cardList: H,
+      chargeCardsPromo: x
+    }
+  },
+  common: L,
+  dateFormat: Pe
+} = Fe.getLocalizedStrings(), sa = ({
+  chargeCardListView: e,
+  searchText: l,
+  admins: p,
+  companyLegalName: i,
+  onFetchChargeCardsRecurringExpenses: r,
+  onFetchDepositAccountLimit: u,
+  onCloseChargeCard: P,
+  onCloseChargeCardList: N,
+  onLockChargeCard: A,
+  onLockChargeCardList: O,
+  onUnlockChargeCardList: ae,
+  updateChargeCardListSpendLimit: E,
+  onUpdateSpendLimit: Le,
+  isCardControlsEnabled: Ne,
+  isCashbackFeatureEnabled: Oe,
+  creditCardPayNowThreshold: _e,
+  isChargeCardFeatureEnabled: g,
+  isDebitCardFeatureEnabled: y,
+  isDebitCardSetupEnabled: k,
+  isChargeCardSetupEnabled: j,
+  companyChargeCardInfoCreditAccountLimit: ge,
+  controllerEmails: K,
+  onRevokeChargeCardList: C,
+  depositAccountListWithDebitCardIssued: I,
+  chargeCardCashbackDetailState: b,
+  uiState: dn,
+  signedInUser: ze,
+  creditLimit: xe,
+  cashbackRate: Ue,
+  onSearchTextChanged: pn,
+  onClickSetupIcon: mn,
+  isEarlyPayEnabled: re,
+  onClickStatementsIcon: un,
+  onChargeCardRowClick: hn,
+  updateChargeCardName: fn,
+  onChargeCardResendInviteClick: gn,
+  onChargeCardRevokeInviteClick: ht,
+  onUnlockChargeCard: ft,
+  onIssueCardClick: xn,
+  onBackClick: Sn,
+  onReloadCards: yn,
+  onTotalCashbackClick: Cn,
+  onColumnSortConfigChanged: bn,
+  onClickMenuIcon: $n,
+  onPromoCardClick: gt,
+  onCreateNowClick: xt,
+  showPayNowInfoTooltip: vn,
+  navigateToCreditCardPaymentPage: Se,
+  shouldShowPayNowInfoTooltip: He,
+  rowActionView: s,
+  bulkActionView: d,
+  onSetRowActionCardId: De,
+  onSetBulkActionCardIds: $
+}) => {
+  const ye = go().analytics, [St, kn] = U(!1), [Ae, Ce] = U(!1), [Ge, be] = U(!1), [jn, J] = U(!1), [In, q] = U(!1), [Rn, $e] = U(!1), [We, Ye] = U(!1), [Ee, Ke] = U(!1), [Je, yt] = U(void 0), Bn = d.chargeCards[0]?.status.code, { creditAccount: f, creditAccountRepayment: R } = e, B = pe(() => {
+    De(void 0), yt(void 0);
+  }, [De]), T = d.chargeCards, Pn = te(() => T.length === 0 ? void 0 : T.reduce(
+    (c, w) => w.balance.amount > c.balance.amount ? w : c,
+    T[0]
+  ).balance, [T]), Tn = te(() => {
+    const a = T.filter(
+      (_) => _.type.code.includes("debit")
+    );
+    if (a.length === 0)
+      return;
+    const c = a.map((_) => I.depositAccounts.find(
+      (Zn) => Zn.id === _.connectedAccountId
+    )?.cardLimits.dailyCardTransactionLimit).filter((_) => _ !== void 0);
+    return c.length === 0 ? void 0 : c.reduce(
+      (_, de) => de.amount < _.amount ? de : _
+    );
+  }, [
+    T,
+    I.depositAccounts
+  ]), Ct = z(
+    e.unlockChargeCardsFetchState.fetchState
+  ), bt = z(
+    e.revokeChargeCardsInviteFetchState.fetchState
+  ), $t = z(
+    e.lockChargeCardsFetchState.fetchState
+  ), vt = z(
+    e.closeChargeCardsFetchState.fetchState
+  ), kt = z(
+    e.updateChargeCardsSpendLimitFetchState.fetchState
+  );
+  ue(() => {
+    const a = Ct === "In-Progress" && e.unlockChargeCardsFetchState.fetchState === "Completed", c = bt === "In-Progress" && e.revokeChargeCardsInviteFetchState.fetchState === "Completed", w = $t === "In-Progress" && e.lockChargeCardsFetchState.fetchState === "Completed", _ = vt === "In-Progress" && e.closeChargeCardsFetchState.fetchState === "Completed", de = kt === "In-Progress" && e.updateChargeCardsSpendLimitFetchState.fetchState === "Completed";
+    (a || c) && $([]), w && (J(!1), $([])), _ && (q(!1), $([])), de && ($e(!1), $([]));
+  }, [
+    e.unlockChargeCardsFetchState.fetchState,
+    e.revokeChargeCardsInviteFetchState.fetchState,
+    e.lockChargeCardsFetchState.fetchState,
+    e.closeChargeCardsFetchState.fetchState,
+    e.updateChargeCardsSpendLimitFetchState.fetchState,
+    Ct,
+    bt,
+    $t,
+    vt,
+    kt,
+    $
+  ]);
+  const Z = s.cardId != null ? s.unlockChargeCardsFetchState.fetchState : void 0, jt = z(
+    Z
+  ), qe = s.cardId != null ? s.updateChargeCardLimitFetchState.fetchState : void 0, It = z(
+    qe
+  ), Ze = s.cardId != null ? s.updateChargeCardNameFetchState.fetchState : void 0, Rt = z(
+    Ze
+  ), Xe = s.cardId != null ? s.lockChargeCardsFetchState.fetchState : void 0, Bt = z(
+    Xe
+  ), Qe = s.cardId != null ? s.closeChargeCardsFetchState.fetchState : void 0, Pt = z(
+    Qe
+  ), X = s.cardId != null ? s.revokeChargeCardFetchState.fetchState : void 0, Tt = z(
+    X
+  );
+  ue(() => {
+    s.cardId != null && jt === "In-Progress" && Z === "Completed" ? B() : s.cardId != null && It === "In-Progress" && qe === "Completed" ? (Ke(!1), B()) : s.cardId != null && Rt === "In-Progress" && Ze === "Completed" ? (Ye(!1), B()) : s.cardId != null && Bt === "In-Progress" && Xe === "Completed" ? (Ce(!1), B()) : s.cardId != null && Pt === "In-Progress" && Qe === "Completed" ? (be(!1), B()) : s.cardId != null && Tt === "In-Progress" && X === "Completed" && B();
+  }, [
+    s.cardId,
+    Z,
+    qe,
+    Ze,
+    Xe,
+    Qe,
+    X,
+    jt,
+    Rt,
+    It,
+    Bt,
+    Pt,
+    Tt,
+    B
+  ]);
+  const Mn = pe(
+    (a) => {
+      switch (a) {
+        case "close":
+          r(d.bulkActionCardIds), q(!0);
+          break;
+        case "lock":
+          r(d.bulkActionCardIds), J(!0);
+          break;
+        case "unlock":
+          ae(d.bulkActionCardIds);
+          break;
+        case "update_limit":
+          $e(!0);
+          break;
+        case "revoke_invite":
+          C(d.bulkActionCardIds);
+          break;
+      }
+    },
+    [
+      d.bulkActionCardIds,
+      r,
+      C,
+      ae
+    ]
+  ), h = s.chargeCard;
+  ue(() => {
+    if (!(Je === void 0 || s.cardId === void 0 || h === void 0))
+      switch (Je) {
+        case oe.CLOSE:
+          Ge || (r([s.cardId]), be(!0));
+          break;
+        case oe.LOCK:
+          Ae || (r([s.cardId]), Ce(!0));
+          break;
+        case oe.UNLOCK:
+          Z !== "In-Progress" && Z !== "Completed" && ft(s.cardId);
+          break;
+        case oe.REVOKE_INVITE:
+          X !== "In-Progress" && X !== "Completed" && ht(s.cardId);
+          break;
+        case oe.RENAME:
+          We || Ye(!0);
+          break;
+        case oe.UPDATE_SPEND_LIMIT:
+          Ee || (h.type.code.includes("debit") && s.depositAccountLimitFetchState.fetchState !== "Completed" && u(
+            h.connectedAccountId,
+            s.cardId
+          ), Ke(!0));
+          break;
+      }
+  }, [
+    Je,
+    s.cardId,
+    // selectedCardForRowAction is intentionally excluded from dependencies
+    // to prevent re-triggering when cards list updates after operations complete
+    // showChangeSpendLimitPopup, showRenamePopup, showCloseDrawer, showLockDrawer are used as guards to prevent reopening
+    Ee,
+    We,
+    Ge,
+    Ae,
+    Z,
+    X,
+    r,
+    u,
+    ft,
+    ht
+  ]);
+  const Ve = xo(), Q = !!Ve.loggedInUserRole.includes("charge_card_user"), ve = So(Ve), v = oo(
+    Ve.loggedInUserRoleMap
+  ), V = te(
+    () => v === !0 ? {
+      creditCardCashbackOffer: `${b.cashbackAnalytics.creditCardCashbackOffer}%`,
+      debitCardCashbackOffer: `${b.cashbackAnalytics.debitCardCashbackOffer}%`,
+      totalEarnedCashback: G(
+        b.cashbackSummary.cashbackEarned.amount
+      ),
+      redeemedCashback: G(
+        b.cashbackSummary.cashbackRedeemed.amount
+      ),
+      availableCashback: G(
+        b.cashbackSummary.cashbackAvailable.amount
+      ),
+      creditCardCashbackRedemptionMode: b.cashbackAnalytics.creditCardCashbackRedemptionMode,
+      debitCardCashbackRedemptionMode: b.cashbackAnalytics.debitCardCashbackRedemptionMode
+    } : void 0,
+    [
+      v,
+      b.cashbackAnalytics.creditCardCashbackOffer,
+      b.cashbackAnalytics.debitCardCashbackOffer,
+      b.cashbackSummary.cashbackEarned.amount,
+      b.cashbackSummary.cashbackRedeemed.amount,
+      b.cashbackSummary.cashbackAvailable.amount,
+      b.cashbackAnalytics.creditCardCashbackRedemptionMode,
+      b.cashbackAnalytics.debitCardCashbackRedemptionMode
+    ]
+  ), ke = te(
+    () => g && j && v === !0 ? {
+      creditAccountId: f.id,
+      creditAccountLimit: G(
+        f.limit.amount
+      ),
+      creditAccountAvailableAmount: G(
+        f.available.amount
+      ),
+      creditAccountSpentAmount: G(
+        f.balance.amount + f.hold.amount
+      ),
+      creditAccountStatus: f.status,
+      outstandingBalance: G(
+        R.remainingAmountDue.amount
+      )
+    } : void 0,
+    [
+      g,
+      j,
+      v,
+      f.id,
+      f.limit.amount,
+      f.available.amount,
+      f.balance.amount,
+      f.hold.amount,
+      f.status,
+      R.remainingAmountDue.amount
+    ]
+  ), je = te(
+    () => y && k ? {
+      debitAccountId: I.depositAccounts.map(
+        (a) => a.id
+      ),
+      debitAccountName: I.depositAccounts.map(
+        (a) => a.accountName
+      ),
+      debitAccountBalance: I.depositAccounts.map(
+        (a) => G(a.accountBalance.available.amount)
+      ),
+      debitCardsSpend: G(
+        e.debitCardSummary?.currentMonthSpends?.amount ?? 0
+      ),
+      debitAccountStatus: I.depositAccounts.map(
+        (a) => a.accountStatus
+      )
+    } : void 0,
+    [
+      y,
+      k,
+      I.depositAccounts,
+      e.debitCardSummary?.currentMonthSpends?.amount
+    ]
+  ), Ie = {
+    isCreditCardOffered: g,
+    isDebitCardOffered: y,
+    isDebitCardEnabled: k,
+    isCreditCardEnabled: j
+  }, wn = (a) => {
+    kn(a), a === !0 && (ye.trackCardsListPageClicked("search"), (!g || f.fetchState === "Completed" && R.fetchState === "Completed") && (!(y && k) || I.fetchState === "Completed") && V != null && ye.trackCardsCardListSearchClick(
+      K,
+      Ie,
+      V,
+      ke,
+      je
+    ));
+  }, M = we(), Mt = ve && !v, wt = e.creditAccount.balance.amount + e.creditAccount.hold.amount, ce = {
+    amount: wt,
+    currencyCode: e.creditAccount.balance.currencyCode,
+    currencySymbol: e.creditAccount.balance.currencySymbol
+  }, et = Math.round(
+    ce.amount * 100 / e.creditAccount.limit.amount
+  ), Fn = isNaN(et) ? 0 : wt !== 0 && et === 0 ? 1 : et, ie = e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate, tt = v && ce.amount > _e * e.creditAccount.limit.amount / 100, le = ie != null && R.initiatedRepayments.amount > 0, Ln = {
+    entity: "charge_cards",
+    showNewButtonOnNavbar: v,
+    showEntityEmailInfoIconOnNavbar: !1,
+    newButtonLabel: v ? H.newBtnLabel : L.strings.empty,
+    hideSearchBtn: Q,
+    searchTextBoxStyle: {
+      right: Mt ? n.sp4 : "96px"
+    },
+    moreIconContainerStyle: {
+      paddingRight: Mt ? n.sp0 : n.sp4
+    },
+    isSearchOpen: St,
+    searchPlaceHolder: H.searchPlaceHolder,
+    searchText: l,
+    //show more button in navbar only when user is not charge card user
+    showSettingsIcon: !Q,
+    //show settings icon in more button only when user is charge card admin
+    showSettingsIconOnNavbar: v,
+    showStatementButtonOnNavbar: g && j,
+    showPayEarlyButtonOnNavbar: re && v && ce.amount > 0 && !le && !tt,
+    showDownloadButtonOnNavbar: !1,
+    disableDownloadButton: !0,
+    analytics: ye,
+    onSearchOpen: wn,
+    onSearchTextChanged: pn,
+    onClickSetupIcon: mn,
+    onClickStatementsIcon: un,
+    downloadState: "Not-Started",
+    onNewButtonClick: xn,
+    onClickPayEarlyIcon: () => Se("More Button", "Pay Early"),
+    onMenuOpen: () => {
+      (!g || f.fetchState === "Completed" && R.fetchState === "Completed") && (!(y && k) || I.fetchState === "Completed") && V != null && ye.trackCardsCardListMoreMenuClick(
+        K,
+        Ie,
+        V,
+        ke,
+        je
+      );
+    },
+    filters: {
+      categoryCombinationOperator: "AND",
+      categories: []
+    }
+  }, Nn = /* @__PURE__ */ t.jsx(
+    Io,
+    {
+      spendManagementSectionProps: Ln
+    }
+  ), On = e.cards.length === 0 ? !1 : Q && so(e.cards), _n = e.fetchState === "Completed" ? bs({
+    isChargeCardFeatureEnabled: g,
+    isChargeCardSetupEnabled: j,
+    isDebitCardFeatureEnabled: y,
+    isDebitCardSetupEnabled: k
+  }) : "", Re = e.debitCardSummary != null ? e.debitCardSummary.currentMonthSpends.amount - e.debitCardSummary.lastCompletedMonthSpends.amount : 0, zn = g && j && e.hasCreditCard, Un = y && k && e.hasDebitCard, Hn = g && j && ve && !v, Dn = y && k && ve && !v, Be = e.chargeCardConfig.rePaymentInfo?.rePaymentDueDate?.diff(
+    _t(),
+    "days"
+  ) ?? 0, nt = [
+    S.payNow,
+    Be > 0 && Be < 11 ? `${S.billDueIn} ${Be} ${Be === 1 ? L.timeStrings.day : L.timeStrings.days}` : S.creditLimitLow,
+    S.payNow
+  ], Ft = R.initiatedRepayments.amount === f.balance.amount + f.hold.amount, ot = [
+    S.paymentInitiated,
+    `${H.header.limit} ${Ft ? L.resets : L.updates} ${L.by} ${ao(
+      ro(
+        R.initiatedRepaymentDate?.toDate() ?? _t().toDate(),
+        [0, 6],
+        3
+      ).toDateString()
+    ).format(Pe.visual.MMMDFormat)}`,
+    S.paymentInitiated
+  ], st = Ot(null), at = Ot(null), An = tn(), [
+    Gn,
+    Lt
+  ] = U(!0);
+  ue(() => {
+    const a = () => {
+      at.current && (at.current.getBoundingClientRect().top < (M === "small" ? 68 : 40) ? Lt(!1) : Lt(!0));
+    };
+    a();
+    const c = () => {
+      a();
+    }, w = st.current;
+    return w && w.addEventListener("scroll", c), window.addEventListener("scroll", c), () => {
+      w && w.removeEventListener("scroll", c), window.removeEventListener("scroll", c);
+    };
+  }, [M]);
+  const Wn = (a) => {
+    const c = a.reasonType === "other" ? a.reason : a.reasonType;
+    s.cardId != null && P(s.cardId, c);
+  }, Yn = (a) => {
+    const c = a.reasonType === "other" ? a.reason : a.reasonType;
+    s.cardId != null && A(s.cardId, c);
+  }, En = (a) => {
+    const c = a.reasonType === "other" ? a.reason : a.reasonType;
+    N(d.bulkActionCardIds, c);
+  }, Kn = (a) => {
+    const c = a.reasonType === "other" ? a.reason : a.reasonType;
+    O(d.bulkActionCardIds, c);
+  }, ee = te(() => {
+    const a = {};
+    return d.chargeCards.forEach((c) => {
+      a[c.id] = c;
+    }), {
+      chargeCardsByCardId: a,
+      cardRecurringExpensesByCardId: d.recurringExpensesByCardId,
+      fetchState: d.recurringExpensesFetchState.fetchState
+    };
+  }, [d]), Jn = pe(() => {
+    r(d.bulkActionCardIds), J(!0);
+  }, [d.bulkActionCardIds, r]), qn = pe(() => {
+    r(d.bulkActionCardIds), q(!0);
+  }, [d.bulkActionCardIds, r]), Nt = pe(
+    (a) => {
+      const c = d.bulkActionCardIds.filter(
+        (w) => w !== a
+      );
+      $(c), c.length === 0 && (J(!1), q(!1));
+    },
+    [d.bulkActionCardIds, $]
+  );
+  return /* @__PURE__ */ t.jsxs(Ps, { ref: st, children: [
+    /* @__PURE__ */ t.jsx(
+      yo,
+      {
+        title: _n,
+        showBackButton: !0,
+        showMenuIcon: M === "medium-compact" || M === "small",
+        onClickMenuIcon: $n,
+        style: { zIndex: 3 },
+        onBackClick: Sn,
+        rightSideComponent: Nn,
+        isSearchOpen: St,
+        hideSearchBtn: Q,
+        scrollableContent: st,
+        source: "ChargeCardListPage",
+        backgroundColor: An.colors.grey4
+      }
+    ),
+    e.fetchState === "Not-Started" || e.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(
+      jo,
+      {
+        fetchState: e.fetchState,
+        styles: { margin: "auto" }
+      }
+    ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      Q ? null : /* @__PURE__ */ t.jsxs(Ts, { windowSize: M, children: [
+        zn || Hn ? /* @__PURE__ */ t.jsxs(Jt, { windowSize: M, children: [
+          /* @__PURE__ */ t.jsxs(Qt, { children: [
+            /* @__PURE__ */ t.jsxs(Vt, { children: [
+              /* @__PURE__ */ t.jsxs(en, { children: [
+                /* @__PURE__ */ t.jsx(Zt, { children: H.creditCardBalance }),
+                /* @__PURE__ */ t.jsx(
+                  ne,
+                  {
+                    amount: ce,
+                    integerStyles: {
+                      ...F.h5Regular.cssObject
+                    },
+                    decimalStyles: {
+                      ...F.largeSemiBold.cssObject
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t.jsxs(js, { children: [
+                /* @__PURE__ */ t.jsx(Te, { style: { textAlign: "end" }, children: L.texts.limit }),
+                /* @__PURE__ */ t.jsx(
+                  ne,
+                  {
+                    amount: e.creditAccount.limit,
+                    style: {
+                      justifyContent: "end"
+                    },
+                    integerStyles: F.largeRegular.cssObject,
+                    decimalStyles: F.smallRegular.cssObject
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ t.jsx(_s, { children: /* @__PURE__ */ t.jsx(
+              zs,
+              {
+                style: {
+                  width: `${Fn}%`,
+                  borderRadius: n.sp1
+                }
+              }
+            ) }),
+            tt && !le && re ? /* @__PURE__ */ t.jsx(
+              rt,
+              {
+                placement: "bottom",
+                style: {
+                  color: m.heroDark,
+                  padding: `12px ${n.sp3}`
+                },
+                title: /* @__PURE__ */ t.jsx(ys, { children: S.creditLimitIsRunningLow }),
+                children: /* @__PURE__ */ t.jsxs(qt, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    ne,
+                    {
+                      amount: e.creditAccount.available,
+                      integerStyles: F.largeMedium.cssObject,
+                      decimalStyles: F.smallMedium.cssObject
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(Xt, { windowSize: M, children: L.texts.remaining }),
+                  /* @__PURE__ */ t.jsx(Cs, { children: /* @__PURE__ */ t.jsx(Ss, {}) })
+                ] })
+              }
+            ) : /* @__PURE__ */ t.jsxs(qt, { children: [
+              /* @__PURE__ */ t.jsx(
+                ne,
+                {
+                  amount: e.creditAccount.available,
+                  integerStyles: F.largeMedium.cssObject,
+                  decimalStyles: F.smallMedium.cssObject
+                }
+              ),
+              /* @__PURE__ */ t.jsx(Xt, { windowSize: M, children: L.texts.remaining })
+            ] })
+          ] }),
+          /* @__PURE__ */ t.jsxs(
+            Is,
+            {
+              showPaymentInitiatedInfo: le,
+              isEarlyPayEnabled: re,
+              children: [
+                le && re ? null : /* @__PURE__ */ t.jsx(Te, { children: `${L.texts.limitReset} ${ie != null ? ie.format(
+                  Pe.visual.MMMDFormat
+                ) : null}` }),
+                v && re && (le ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+                  rt,
+                  {
+                    maxWidth: "242px",
+                    style: {
+                      padding: `12px ${n.sp3}`
+                    },
+                    title: /* @__PURE__ */ t.jsxs($s, { children: [
+                      /* @__PURE__ */ t.jsx(Kt, { children: `${S.paymentOf} ${he(
+                        "0,0.[00]",
+                        {
+                          amount: R.initiatedRepayments.amount,
+                          currencyCode: R.initiatedRepayments.currencyCode,
+                          currencySymbol: R.initiatedRepayments.currencySymbol
+                        }
+                      )} ${S.madeOn} ` }),
+                      /* @__PURE__ */ t.jsx(vs, { children: R.initiatedRepaymentDate?.format(
+                        Pe.visual.MMMDFormat
+                      ) }),
+                      L.strings.space,
+                      /* @__PURE__ */ t.jsx(Kt, { children: Ft ? S.isProcessingAndWillResetTheCreditLimitIn23BusinessDays : S.isProcessingAndWillUpdateTheCreditLimitIn23BusinessDays })
+                    ] }),
+                    placement: "bottom",
+                    children: /* @__PURE__ */ t.jsxs(Wt, { hasPointer: !1, children: [
+                      ot.length > 0 && /* @__PURE__ */ t.jsx(
+                        it,
+                        {
+                          slideUpCount: ot.length,
+                          style: {
+                            alignItems: "flex-end",
+                            width: "auto"
+                          },
+                          children: ot.map(
+                            (a, c) => /* @__PURE__ */ t.jsx(
+                              fs,
+                              {
+                                children: a
+                              },
+                              `card-payment-initiated-${c.toString()}`
+                            )
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ t.jsx(xs, {})
+                    ] })
+                  }
+                ) }) : tt ? /* @__PURE__ */ t.jsx(
+                  rt,
+                  {
+                    variant: "informative",
+                    arrow: !0,
+                    style: {
+                      top: n.sp2,
+                      left: "22px",
+                      position: "relative"
+                    },
+                    data: {
+                      preHeading: "URGENT",
+                      heading: S.creditLimitIsLow,
+                      description: S.transactionsMayBeDeclinedBecauseTheCreditLimitIsRunningLow,
+                      buttonText: S.payNow,
+                      tooltipContentStyle: {
+                        width: "240px",
+                        boxSizing: "content-box",
+                        gap: n.sp0
+                      },
+                      tooltipIntroductionStyle: {
+                        color: m.important
+                      },
+                      buttonStyle: {
+                        width: "31%"
+                      },
+                      onButtonClick: () => {
+                        He(!1), Se(
+                          "Toast Button",
+                          "Pay Now"
+                        );
+                      },
+                      showCloseButton: !0,
+                      onClose: (a) => {
+                        a.preventDefault(), a.stopPropagation(), He(!1);
+                      }
+                    },
+                    title: "informative",
+                    placement: "bottom-end",
+                    open: vn && // only show the tooltip if the Pay Now SlidingTextContainer is visible
+                    // this is to avoid the tooltip from being shown when the container is scrolled and positioned below the navbar
+                    Gn,
+                    children: /* @__PURE__ */ t.jsxs(
+                      Wt,
+                      {
+                        ref: at,
+                        onClick: () => {
+                          He(!1), Se(
+                            "Text Button",
+                            "Pay Now"
+                          );
+                        },
+                        hasPointer: !0,
+                        children: [
+                          nt.length > 0 && /* @__PURE__ */ t.jsx(
+                            it,
+                            {
+                              slideUpCount: nt.length,
+                              style: {
+                                alignItems: "flex-end",
+                                width: "auto"
+                              },
+                              children: nt.map((a, c) => /* @__PURE__ */ t.jsx(
+                                hs,
+                                {
+                                  isImportant: c === 1,
+                                  children: a
+                                },
+                                `card-pay-now-${c.toString()}`
+                              ))
+                            }
+                          ),
+                          /* @__PURE__ */ t.jsx(Yt, {})
+                        ]
+                      }
+                    )
+                  }
+                ) : ce.amount > 0 ? /* @__PURE__ */ t.jsxs(
+                  gs,
+                  {
+                    onClick: () => Se(
+                      "Text Button",
+                      "Pay Early"
+                    ),
+                    children: [
+                      S.payEarly,
+                      /* @__PURE__ */ t.jsx(Yt, {})
+                    ]
+                  }
+                ) : null)
+              ]
+            }
+          )
+        ] }) : g && j ? /* @__PURE__ */ t.jsx(
+          Gt,
+          {
+            cardType: "creditCard",
+            header: x.listPage.spendSmarter,
+            title: x.listPage.setUpText.replace(
+              "__cardType__",
+              x.listPage.credit
+            ),
+            creditLimit: ct(
+              "0,0",
+              xe.amount,
+              xe.currencySymbol
+            ),
+            onCreateNowClick: xt
+          }
+        ) : g ? /* @__PURE__ */ t.jsx(
+          At,
+          {
+            cardPromoType: "credit",
+            cardText: x.listPage.creditCards,
+            header: x.listPage.getAccessTo,
+            title: x.listPage.creditCards,
+            subTitle: x.listPage.promoSubText.credit,
+            slidingTextList: Et(
+              "credit",
+              Ue,
+              {
+                amount: ge,
+                currencyCode: xe.currencyCode,
+                currencySymbol: xe.currencySymbol
+              }
+            ),
+            onClick: gt
+          }
+        ) : null,
+        Un || Dn ? /* @__PURE__ */ t.jsxs(Jt, { windowSize: M, children: [
+          /* @__PURE__ */ t.jsxs(Qt, { children: [
+            /* @__PURE__ */ t.jsx(Vt, { children: /* @__PURE__ */ t.jsxs(en, { children: [
+              /* @__PURE__ */ t.jsx(Zt, { children: H.debitCardSpend }),
+              /* @__PURE__ */ t.jsx(
+                ne,
+                {
+                  amount: e.debitCardSummary?.currentMonthSpends,
+                  integerStyles: {
+                    ...F.h5Regular.cssObject
+                  },
+                  decimalStyles: {
+                    ...F.largeSemiBold.cssObject
+                  }
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ t.jsx(ws, { children: Re !== 0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              Re < 0 ? /* @__PURE__ */ t.jsx(Ls, {}) : /* @__PURE__ */ t.jsx(Ns, {}),
+              /* @__PURE__ */ t.jsx(
+                Fs,
+                {
+                  hasNegativeValue: Re < 0,
+                  children: ct(
+                    "0,0.00",
+                    Re,
+                    e.debitCardSummary?.currentMonthSpends.currencySymbol
+                  )
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ln, { children: H.compareToLastMonth })
+            ] }) : null })
+          ] }),
+          /* @__PURE__ */ t.jsx(cn, { children: /* @__PURE__ */ t.jsx(Te, { children: `${L.texts.limitReset} ${ie != null ? ie.format(
+            Pe.visual.MMMDFormat
+          ) : null}` }) })
+        ] }) : y && k ? /* @__PURE__ */ t.jsx(
+          Gt,
+          {
+            cardType: "debitCard",
+            header: x.listPage.spendSmarter,
+            title: x.listPage.setUpText.replace(
+              "__cardType__",
+              x.listPage.debit
+            ),
+            onCreateNowClick: xt
+          }
+        ) : y ? /* @__PURE__ */ t.jsx(
+          At,
+          {
+            cardPromoType: "debit",
+            cardText: x.listPage.debitCards,
+            header: x.listPage.getAccessTo,
+            title: x.listPage.debitCards,
+            subTitle: x.listPage.promoSubText.debit,
+            slidingTextList: Et(
+              "debit",
+              Ue
+            ),
+            onClick: gt
+          }
+        ) : null,
+        /* @__PURE__ */ t.jsxs(Ms, { windowSize: M, children: [
+          Oe ? /* @__PURE__ */ t.jsxs(ks, { children: [
+            /* @__PURE__ */ t.jsx(Te, { style: { textAlign: "start" }, children: H.totalCashback }),
+            /* @__PURE__ */ t.jsx(
+              ne,
+              {
+                amount: e.totalCashback,
+                style: {
+                  justifyContent: "flex-start"
+                },
+                integerStyles: F.h5Regular.cssObject,
+                decimalStyles: F.smallSemiBold.cssObject
+              }
+            ),
+            e.totalCashback.amount > 0 ? /* @__PURE__ */ t.jsx(Bs, { windowSize: M, children: /* @__PURE__ */ t.jsxs(
+              Os,
+              {
+                windowSize: M,
+                onClick: Cn,
+                "data-testid": dt(
+                  "total-cashback-info"
+                ),
+                children: [
+                  /* @__PURE__ */ t.jsx(Rs, { children: H.overview }),
+                  /* @__PURE__ */ t.jsx(Us, {})
+                ]
+              }
+            ) }) : null
+          ] }) : null,
+          /* @__PURE__ */ t.jsx(Ds, { children: /* @__PURE__ */ t.jsx(As, {}) })
+        ] })
+      ] }),
+      e.cards.length === 0 && Q === !0 || On ? /* @__PURE__ */ t.jsx(Hs, { children: /* @__PURE__ */ t.jsx(
+        Po,
+        {
+          companyLegalName: i,
+          cards: e.cards,
+          admins: p,
+          hasZeniFinopsRoles: ve,
+          cashbackRate: Ue
+        }
+      ) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        Ge && s.cardId != null && h && /* @__PURE__ */ t.jsx(
+          Ut,
+          {
+            showCloseCardDrawer: !0,
+            onCloseCloseCardDrawer: () => {
+              be(!1), B();
+            },
+            isChargeCardAdmin: !0,
+            chargeCardsByCardId: {
+              [s.cardId]: h
+            },
+            cardRecurringExpensesByCardId: {
+              [s.cardId]: s.recurringExpenses
+            },
+            cardRecurringExpenseFetchState: s.recurringExpensesFetchState.fetchState,
+            closeCardFetchState: s.closeChargeCardsFetchState.fetchState,
+            onConfirmClick: Wn,
+            onDismissClick: () => {
+              be(!1), B();
+            },
+            onRemoveCardClick: () => {
+            }
+          }
+        ),
+        Ae && s.cardId != null && h && /* @__PURE__ */ t.jsx(
+          Ht,
+          {
+            showLockCardDrawer: !0,
+            onCloseLockCardDrawer: () => {
+              Ce(!1), B();
+            },
+            isChargeCardAdmin: !0,
+            chargeCardsByCardId: {
+              [s.cardId]: h
+            },
+            cardRecurringExpensesByCardId: {
+              [s.cardId]: s.recurringExpenses
+            },
+            cardRecurringExpenseFetchState: s.recurringExpensesFetchState.fetchState,
+            lockCardFetchState: s.lockChargeCardsFetchState.fetchState,
+            onConfirmClick: Yn,
+            onDismissClick: () => {
+              Ce(!1), B();
+            },
+            onRemoveCardClick: () => {
+            }
+          }
+        ),
+        In && d.bulkActionCardIds.length > 0 && /* @__PURE__ */ t.jsx(
+          Ut,
+          {
+            showCloseCardDrawer: !0,
+            onCloseCloseCardDrawer: () => {
+              q(!1), $([]);
+            },
+            isChargeCardAdmin: !0,
+            chargeCardsByCardId: ee.chargeCardsByCardId,
+            cardRecurringExpensesByCardId: ee.cardRecurringExpensesByCardId,
+            cardRecurringExpenseFetchState: ee.fetchState,
+            closeCardFetchState: e.closeChargeCardsFetchState.fetchState,
+            onConfirmClick: En,
+            onDismissClick: () => {
+              q(!1), $([]);
+            },
+            onRemoveCardClick: Nt
+          }
+        ),
+        jn && d.bulkActionCardIds.length > 0 && /* @__PURE__ */ t.jsx(
+          Ht,
+          {
+            showLockCardDrawer: !0,
+            onCloseLockCardDrawer: () => {
+              J(!1), $([]);
+            },
+            isChargeCardAdmin: !0,
+            chargeCardsByCardId: ee.chargeCardsByCardId,
+            cardRecurringExpensesByCardId: ee.cardRecurringExpensesByCardId,
+            cardRecurringExpenseFetchState: ee.fetchState,
+            lockCardFetchState: e.lockChargeCardsFetchState.fetchState,
+            onConfirmClick: Kn,
+            onDismissClick: () => {
+              J(!1), $([]);
+            },
+            onRemoveCardClick: Nt
+          }
+        ),
+        We && s.cardId != null && h && /* @__PURE__ */ t.jsx(
+          wo,
+          {
+            currentCardName: h.cardName,
+            renameFetchState: s.updateChargeCardNameFetchState.fetchState,
+            onCancelClick: () => {
+              Ye(!1), B();
+            },
+            onSubmitClick: (a) => {
+              s.cardId != null && fn(s.cardId, a);
+            }
+          }
+        ),
+        Ee && s.cardId != null && h && /* @__PURE__ */ t.jsx(
+          Fo,
+          {
+            controllerEmails: K,
+            isChargeCardFeatureEnabled: g,
+            isDebitCardFeatureEnabled: y,
+            isDebitCardSetupEnabled: k,
+            isChargeCardSetupEnabled: j,
+            productInformation: Ie,
+            cashbackInformation: V,
+            creditAccountInformation: ke,
+            debitAccountInformation: je,
+            cardDetail: h,
+            depositAccountLimitFetchState: s.depositAccountLimitFetchState.fetchState,
+            creditAccount: f,
+            creditAccountRepayment: R,
+            signedInUser: ze,
+            isDebitCard: h.type.code.includes(
+              "debit"
+            ),
+            classListFetchState: "Not-Started",
+            currentLimitAmount: h.limit,
+            currentSpentAmount: h.balance,
+            maxLimitAmount: h.type.code.includes("debit") ? s.depositAccountLimit?.cardLimits.dailyCardTransactionLimit : f.limit,
+            isDisabled: h.type.code.includes("debit") && s.depositAccountLimitFetchState.fetchState !== "Completed",
+            updateLimitFetchState: s.updateChargeCardLimitFetchState.fetchState,
+            onCancelClick: () => {
+              Ke(!1), B();
+            },
+            onSubmitClick: (a) => {
+              if (s.cardId != null) {
+                const c = {
+                  amount: a,
+                  currencyCode: h.limit.currencyCode,
+                  currencySymbol: h.limit.currencySymbol
+                };
+                Le(
+                  s.cardId,
+                  c,
+                  h.creditLimitFrequency,
+                  he("0,0.[00]", c)
+                );
+              }
+            },
+            recommendations: h.recommendations
+          }
+        ),
+        Rn && T.length > 0 && /* @__PURE__ */ t.jsx(
+          os,
+          {
+            currentSpentAmount: Pn ?? {
+              amount: 0,
+              currencyCode: T[0].limit.currencyCode,
+              currencySymbol: T[0].limit.currencySymbol
+            },
+            maxLimitAmountForCreditCard: e.creditAccount.limit,
+            maxLimitAmountForDebitCard: Tn,
+            hasCreditCard: d.hasCreditCards,
+            hasDebitCard: d.hasDebitCards,
+            signedInUser: ze,
+            isDisabled: d.hasDebitCards && I.fetchState !== "Completed",
+            updateLimitFetchState: e.updateChargeCardsSpendLimitFetchState.fetchState,
+            onCancelClick: () => {
+              $e(!1), $([]);
+            },
+            onSubmitClick: (a) => {
+              const c = {
+                amount: a,
+                currencyCode: T[0].limit.currencyCode,
+                currencySymbol: T[0].limit.currencySymbol
+              };
+              E(
+                d.bulkActionCardIds,
+                c,
+                T[0].creditLimitFrequency
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          Ro,
+          {
+            cardsSelectedForBulkAction: d.bulkActionCardIds,
+            isBulkActionAllowed: v,
+            firstSelectedCardStatus: Bn,
+            bulkSubmissionLimit: Bo,
+            removeAllCardsFromBulkActionList: () => $([]),
+            updateBulkActionList: $,
+            onProceedForBulkActionClick: Mn,
+            onBulkLockClick: Jn,
+            onBulkCloseClick: qn,
+            setShowBulkChangeSpendLimitPopup: $e,
+            depositAccountListWithDebitCardIssued: I,
+            setCardIdForRowAction: De,
+            setActionTypeForRowAction: yt,
+            cashbackInformation: V,
+            creditAccountInformation: ke,
+            debitAccountInformation: je,
+            productInformation: Ie,
+            controllerEmails: K,
+            isChargeCardFeatureEnabled: g,
+            isCardControlsEnabled: Ne,
+            isDebitCardFeatureEnabled: y,
+            isDebitCardSetupEnabled: k,
+            isChargeCardSetupEnabled: j,
+            creditAccount: f,
+            creditAccountRepayment: R,
+            cardList: e.cards,
+            showViewForCardUser: !1,
+            signedInUser: ze,
+            fetchState: e.fetchState,
+            revokeChargeCardsInviteFetchState: e.revokeChargeCardsInviteFetchState.fetchState,
+            unlockChargeCardsFetchState: e.unlockChargeCardsFetchState.fetchState,
+            onReloadCards: yn,
+            onChargeCardRowClick: hn,
+            searchText: l,
+            receiptBotEmail: e.chargeCardConfig.receiptBotEmail,
+            uiState: dn,
+            resendInviteId: e?.resendCardInvite?.cardId,
+            onColumnSortConfigChanged: bn,
+            onChargeCardResendInviteClick: gn,
+            rowActionView: s
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, hs = o(nn)`
+  color: ${(e) => e.isImportant ? m.important : e.theme.colors.primary};
+  text-align: end;
+`, fs = o(nn)`
+  color: ${m.brandColorGoldDark};
+  text-align: end;
+`, Wt = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${n.sp1};
+  height: 21px;
+  overflow: hidden;
+  cursor: ${(e) => e.hasPointer ? "pointer" : "default"};
+`, gs = o(se)`
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`, Yt = o(mt)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 12px;
+  height: 12px;
+`, xs = o(vo)`
+  color: ${m.brandColorGoldDark};
+  width: ${n.sp3};
+  height: ${n.sp3};
+`, Ss = o($o)`
+  color: ${m.important};
+  width: ${n.sp3};
+  height: ${n.sp3};
+`, ys = o(se)`
+  color: ${m.heroDark};
+  white-space: pre-line;
+  text-align: left;
+`, Cs = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Et = (e, l, p) => {
+  const i = (l * 100).toFixed(2);
+  if (e === "credit") {
+    const r = x.listPage.promoMultiText.credit;
+    return p && (r[0] = r[0].replace(
+      "__creditLimit__",
+      ct(
+        "0,0",
+        p.amount,
+        p.currencySymbol
+      )
+    )), r[1] = r[1].replace("__cashBack__", i), [...r, r[0]];
+  } else if (e === "debit") {
+    const r = x.listPage.promoMultiText.debit;
+    return r[0] = r[0].replace("__cashBack__", i), [...r, r[0]];
+  }
+  return [];
+}, bs = ({
+  isChargeCardFeatureEnabled: e,
+  isChargeCardSetupEnabled: l,
+  isDebitCardFeatureEnabled: p,
+  isDebitCardSetupEnabled: i
+}) => e && l && p && i ? H.title.cards : e && l ? H.title.credit : p && i ? H.title.debit : "", $s = o.div`
+  text-align: left;
+`, Kt = o.span``, vs = o.span`
+  white-space: nowrap;
+`, ks = o.div`
+  min-width: 137px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+`, js = o.div`
+  min-width: ${n.sp12};
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`, cn = o.div`
+  min-width: ${n.sp11};
+  padding: ${n.sp2} ${n.sp4};
+  background-color: ${(e) => e.theme.colors.grey4};
+  border-bottom-left-radius: ${n.sp2};
+  border-bottom-right-radius: ${n.sp2};
+  border-top: 1px solid ${(e) => e.theme.colors.grey3};
+  display: flex;
+`, Is = o(cn)`
+  justify-content: ${(e) => e.showPaymentInitiatedInfo && e.isEarlyPayEnabled ? "flex-end" : "space-between"};
+`, Rs = o.div``, Bs = o.div`
+  border: 1px solid ${(e) => e.theme.colors.hero};
+  border-radius: ${n.sp12};
+  width: fit-content;
+  justify-self: ${(e) => e.windowSize === "small" ? "flex-start" : "flex-end"};
+  margin-top: ${n.sp1};
+  padding: ${n.sp0} ${n.sp2};
+`, Ps = o.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+`, Ts = o.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: ${n.sp3};
+  margin-right: ${(e) => fe.contentContainerMargin.valuePx(e.windowSize)};
+  margin-bottom: ${n.sp4};
+  margin-left: ${(e) => fe.contentContainerMargin.valuePx(e.windowSize)};
+  align-items: center;
+  gap: ${n.sp3};
+  ${(e) => e.windowSize === "small" && lt`
+      overflow-x: scroll;
+      gap: ${n.sp2};
+      min-height: 190px;
+      /* Hide scrollbar for Chrome, Safari and Opera */
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      /* Hide scrollbar for IE, Edge and Firefox */
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    `}
+`, Jt = o.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${m.Elevation1Light};
+  border-radius: ${n.sp2};
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-width: ${(e) => fe.cardsMinWidth.valuePx(e.windowSize)};
+  height: 188px;
+  justify-content: space-between;
+  flex-basis: 33.33%;
+`, Ms = o.div`
+  display: flex;
+  justify-content: space-between;
+  align-self: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  text-align: ${(e) => e.windowSize === "small" ? "start" : "end"};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${m.Elevation1Light};
+  border-radius: ${n.sp2};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding: ${n.sp4};
+  align-self: stretch;
+  position: relative;
+  overflow: hidden;
+  min-width: ${(e) => fe.cardsMinWidth.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/promo-list-pattern.svg);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  height: 188px;
+  flex-grow: 1;
+  flex-basis: 33.33%;
+`, qt = o.div`
+  display: flex;
+  align-items: baseline;
+  gap: ${n.sp2};
+  align-items: center;
+`, Zt = o(se)`
+  color: ${(e) => e.theme.colors.hero};
+`, Xt = o(bo)`
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${us.remainingText.style(e.windowSize)}`};
+`, Te = o(se)`
+  color: ${(e) => e.theme.colors.hero};
+  white-space: nowrap;
+`, ws = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${n.sp1};
+  padding: 3px ${n.sp0};
+  margin-top: 20px;
+`, ln = o(ko)`
+  color: ${(e) => e.theme.colors.hero};
+`, Fs = o(ln)`
+  color: ${(e) => e.hasNegativeValue ? m.success : m.important};
+`, Ls = o(Oo)`
+  color: ${m.success};
+  width: ${n.sp3};
+  height: ${n.sp3};
+`, Ns = o(_o)`
+  color: ${m.important};
+  width: ${n.sp3};
+  height: ${n.sp3};
+`, Os = o(pt)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-top: ${(e) => fe.infoSubheadingTextMarginTop.valuePx(e.windowSize)};
+  gap: ${n.sp1};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: min-content;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, _s = o.div`
+  width: 100%;
+  height: ${n.sp1};
+  display: flex;
+  margin: ${n.sp2} ${n.sp0};
+  background: ${(e) => e.theme.colors.grey3};
+`, zs = o.div`
+  background: ${m.success};
+  width: 0%;
+  height: ${n.sp1};
+
+  transition: width 4s ease;
+`, Us = o(mt)`
+  color: inherit;
+  width: ${n.sp2};
+  height: ${n.sp2};
+`, Hs = o.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${n.sp0} ${n.sp2} ${n.sp7} ${n.sp2};
+`, Qt = o.div`
+  padding: ${n.sp4};
+  padding-bottom: ${n.sp2};
+`, Vt = o.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, en = o.div``, Ds = o.div`
+  height: ${n.sp10};
+  width: ${n.sp10};
+`;
+function As() {
+  switch (tn().mode) {
+    case "light":
+      return /* @__PURE__ */ t.jsx(No, {});
+    case "dark":
+    default:
+      return /* @__PURE__ */ t.jsx(Lo, {});
+  }
+}
+export {
+  sa as default,
+  Et as getPromoSlidingTextList
+};