@zeniai/web-components 3.16.80 → 3.16.81

package/dist/ChargeCardListPage-C4ITCZwO.js

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