@zeniai/web-components 3.17.8 → 3.17.9

package/dist/ZeniAccountListViewPage-BP85nlG_.js

@@ -0,0 +1,1078 @@
+import { j as t, g as De, u as _e, F as Re, m as Fe } from "./vendor-.pnpm-B2klaOGU.js";
+import * as S from "react";
+import { useEffect as Ee, useState as R } from "react";
+import o from "@emotion/styled";
+import { u as X, a as K, S as n, C as i, hW as Ne, j5 as Ge, F as j, B as Ue, E as ee, dB as We, fa as Ye, hv as E, t as b, e as N, R as x, a2 as G, Z as ye, j6 as Oe, aw as Ze, J as He, aq as qe, y as Ve, _ as Je, D as a, ag as ke, j7 as Qe, z as Xe, P as Ke, aD as et, dM as tt, ey as nt, aP as O, fM as ot, aQ as oe, aR as ie, j8 as it, aE as st, V as rt, o as at, ai as ct, K as lt } from "./index-usWkcKCS.js";
+import { hasAnyFinOpRole as dt } from "@zeniai/client-epic-state";
+import { B as pt } from "./BusyIndication-ByEQe-72.js";
+import { S as ut } from "./auto-transfer-rule-mbafm5D3.js";
+import { S as mt } from "./clock-CJkylEKt.js";
+import { S as ht } from "./shield-DOlUxcFf.js";
+import { Z as gt } from "./ZeniAccountNavBarPieces-CwYjLJAA.js";
+import { Z as xt } from "./ZeniTransferAmountSlider-DqHw0eWI.js";
+const $t = (e) => /* @__PURE__ */ S.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ S.createElement("path", { d: "M23.0041 11.8483C23.0373 14.1699 22.335 16.4424 20.9979 18.3405C19.6607 20.2386 17.7572 21.665 15.5599 22.4153C13.3627 23.1656 10.9844 23.2014 8.76551 22.5175C6.54667 21.8337 4.60111 20.4653 3.20741 18.6083C1.81371 16.7513 1.04335 14.5009 1.00664 12.1794C0.969926 9.85784 1.66875 7.58422 3.00303 5.68407C4.33732 3.78392 6.23864 2.3547 8.43475 1.60106C10.6309 0.84741 13.0091 0.807991 15.229 1.48844", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M7.17736 14.8498L12.3225 8.44116C12.431 8.30616 12.5835 8.21419 12.7532 8.1815C12.9228 8.14882 13.0985 8.17753 13.2493 8.26255L16.2512 9.95329C16.4047 10.0398 16.5839 10.0678 16.7561 10.0324C16.9283 9.99691 17.0819 9.90029 17.1889 9.76018L21.3745 4.27979", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M18.4739 4.60986L21.3623 4.13001L21.845 7.03577", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), {
+  spendManagement: {
+    treasury: { promoBanner: m, promoPage: se }
+  }
+} = K.getLocalizedStrings(), ft = ({
+  yieldPercentage: e = 4.35,
+  insuredAmount: c = 5e5,
+  onGetStartedClick: f,
+  style: v
+}) => {
+  const r = X(), B = (l, L) => Object.entries(L).reduce(
+    (I, [C, $]) => I.replace(new RegExp(`__${C}__`, "g"), $),
+    l
+  ), P = (l) => `$${Intl.NumberFormat("en", { notation: "compact" }).format(
+    l
+  )}`, T = `${e}%`, w = P(c), z = [
+    {
+      icon: /* @__PURE__ */ t.jsx(vt, {}),
+      title: B(m.features.yield, {
+        yieldPercentage: T
+      }),
+      id: "yield"
+    },
+    {
+      icon: /* @__PURE__ */ t.jsx(Bt, {}),
+      title: B(m.features.insured, {
+        insuredAmount: w
+      }),
+      id: "insured"
+    },
+    {
+      icon: /* @__PURE__ */ t.jsx(zt, {}),
+      title: m.features.liquidity,
+      showAsterisk: !0,
+      id: "liquidity"
+    },
+    {
+      icon: /* @__PURE__ */ t.jsx(Lt, {}),
+      title: m.features.automation,
+      id: "automation"
+    }
+  ];
+  return /* @__PURE__ */ t.jsxs(wt, { style: v, children: [
+    /* @__PURE__ */ t.jsx(yt, {}),
+    r !== "small" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(kt, {}),
+      /* @__PURE__ */ t.jsx(jt, {})
+    ] }),
+    /* @__PURE__ */ t.jsx(Ct, { windowSize: r, children: r === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsxs(At, { children: [
+        /* @__PURE__ */ t.jsx(re, { windowSize: r, children: /* @__PURE__ */ t.jsx(ae, { windowSize: r }) }),
+        /* @__PURE__ */ t.jsx(ce, { children: m.title })
+      ] }),
+      /* @__PURE__ */ t.jsx(le, { windowSize: r, children: z.map((l) => /* @__PURE__ */ t.jsxs(de, { windowSize: r, children: [
+        /* @__PURE__ */ t.jsx(pe, { children: l.icon }),
+        /* @__PURE__ */ t.jsxs(ue, { children: [
+          l.title,
+          l.showAsterisk === !0 && /* @__PURE__ */ t.jsx(me, { children: "*" })
+        ] })
+      ] }, l.id)) }),
+      /* @__PURE__ */ t.jsx(bt, { children: /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(
+        ge,
+        {
+          variant: "primary",
+          label: m.button,
+          onClick: f,
+          size: "small",
+          style: {
+            padding: `${n.sp1} 12px`
+          }
+        }
+      ) }) }),
+      /* @__PURE__ */ t.jsx(xe, { windowSize: r, children: /* @__PURE__ */ t.jsxs($e, { windowSize: r, children: [
+        m.disclaimer.split("__termsLink__")[0],
+        /* @__PURE__ */ t.jsx(
+          fe,
+          {
+            href: se.zeniTermsOfServiceLink,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: m.termsLink
+          }
+        ),
+        m.disclaimer.split("__termsLink__")[1]
+      ] }) })
+    ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(re, { windowSize: r, children: /* @__PURE__ */ t.jsx(ae, { windowSize: r }) }),
+      /* @__PURE__ */ t.jsxs(St, { windowSize: r, children: [
+        /* @__PURE__ */ t.jsx(ce, { children: m.title }),
+        /* @__PURE__ */ t.jsx(le, { windowSize: r, children: z.map((l) => /* @__PURE__ */ t.jsxs(de, { windowSize: r, children: [
+          /* @__PURE__ */ t.jsx(pe, { children: l.icon }),
+          /* @__PURE__ */ t.jsxs(ue, { children: [
+            l.title,
+            l.showAsterisk === !0 && /* @__PURE__ */ t.jsx(me, { children: "*" })
+          ] })
+        ] }, l.id)) }),
+        /* @__PURE__ */ t.jsx(xe, { windowSize: r, children: /* @__PURE__ */ t.jsxs($e, { windowSize: r, children: [
+          m.disclaimer.split("__termsLink__")[0],
+          /* @__PURE__ */ t.jsx(
+            fe,
+            {
+              href: se.zeniTermsOfServiceLink,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: m.termsLink
+            }
+          ),
+          m.disclaimer.split("__termsLink__")[1]
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(
+        ge,
+        {
+          variant: "primary",
+          label: m.button,
+          onClick: f,
+          size: "small",
+          style: {
+            padding: `${n.sp1} 12px`
+          }
+        }
+      ) })
+    ] }) })
+  ] });
+}, wt = o.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: ${i.neutralGrey5Light};
+  border: 1px solid ${i.brandColorGold};
+  border-radius: ${n.sp2};
+  overflow: hidden;
+  width: 100%;
+`, yt = o.div`
+  position: absolute;
+  top: ${n.sp0};
+  left: ${n.sp0};
+  right: ${n.sp0};
+  bottom: ${n.sp0};
+  background: ${i.brandColorGold};
+  opacity: 0.2;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: ${n.sp0};
+    left: ${n.sp0};
+    right: ${n.sp0};
+    bottom: ${n.sp0};
+    background: ${i.brandColorGoldDark};
+    opacity: 0.45;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent ${n.sp2},
+      rgba(199, 116, 25, 0.1) ${n.sp2},
+      rgba(199, 116, 25, 0.1) ${n.sp3}
+    );
+  }
+`, kt = o.div`
+  position: absolute;
+  top: ${n.sp0};
+  right: ${n.sp0};
+  width: 200px;
+  height: 150px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-right-pattern.png");
+  background-repeat: no-repeat;
+  background-position: top right;
+  background-size: contain;
+`, jt = o.div`
+  position: absolute;
+  bottom: -${n.sp1};
+  left: -${n.sp1};
+  width: 150px;
+  height: 100px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-left-pattern.png");
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: contain;
+`, Ct = o.div`
+  position: relative;
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "stretch" : "center"};
+  gap: ${(e) => e.windowSize === "small" ? n.sp2 : "12px"};
+  padding: ${(e) => e.windowSize === "small" ? n.sp3 : `${n.sp3} ${n.sp4}`};
+  z-index: 1;
+`, re = o.div`
+  display: flex;
+  align-self: flex-start;
+  justify-content: center;
+  width: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
+  height: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
+  flex-shrink: 0;
+`, At = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${n.sp2};
+`, bt = o.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${n.sp2};
+  margin-left: ${n.sp7};
+`, ae = o(Ne)`
+  width: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
+  height: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
+  color: ${i.brandColorGoldDark};
+
+  & path {
+    stroke: ${i.brandColorGoldDark};
+    stroke-width: 1px;
+  }
+`, St = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${n.sp1};
+  flex: 1;
+`, ce = o(Ge)`
+  color: ${i.brandColorGoldDark};
+  margin-bottom: ${n.sp1};
+`, le = o.div`
+  display: ${(e) => e.windowSize === "small" ? "flex" : "grid"};
+  ${(e) => e.windowSize === "small" ? `
+      flex-direction: column;
+      gap: ${n.sp2};
+      margin-left: ${n.sp7};
+    ` : `
+      grid-template-columns: 1fr 1fr;
+      gap: ${n.sp1};
+    `}
+`, de = o.div`
+  display: flex;
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${n.sp1};
+`, pe = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${n.sp3};
+  height: ${n.sp3};
+  flex-shrink: 0;
+`, ue = o(j)`
+  color: ${i.primaryLight};
+`, me = o.span`
+  color: ${i.primaryLight};
+`, he = o.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+`, ge = o(Ue)`
+  background: ${i.brandColorGoldDark};
+  border-color: ${i.brandColorGoldDark};
+  color: ${i.neutralGrey5Light};
+  :hover {
+    background: ${i.brandColorGoldDark};
+    border-color: ${i.brandColorGoldDark};
+    color: ${i.neutralGrey5Light};
+  }
+`, xe = o.div`
+  position: relative;
+  margin-top: ${(e) => e.windowSize === "small" ? n.sp2 : "0"};
+  padding: ${(e) => e.windowSize === "small" ? `0 ${n.sp2}` : "0"};
+`, $e = o(ee)`
+  color: ${i.heroLight};
+  white-space: pre-line;
+  text-align: ${(e) => e.windowSize === "small" ? "center" : "left"};
+`, fe = o.a`
+  color: ${i.heroLight};
+  text-decoration: underline;
+  text-decoration-color: ${i.neutralGrey2Light};
+  cursor: pointer;
+
+  &:hover {
+    color: ${i.primaryLight};
+    text-decoration-color: ${i.primaryLight};
+  }
+`, vt = o($t)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${i.brandColorGoldDark};
+
+  & path {
+    stroke: currentColor;
+  }
+`, Bt = o(ht)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${i.brandColorGoldDark};
+`, zt = o(mt)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${i.brandColorGoldDark};
+`, Lt = o(ut)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${i.brandColorGoldDark};
+`, Pt = (e) => /* @__PURE__ */ S.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ S.createElement("path", { d: "M1.50005 3.41819V11.3868C1.49582 13.9724 2.27853 16.4989 3.74542 18.6344C5.2123 20.77 7.29478 22.4147 9.71941 23.3528L10.8398 23.7848C11.5863 24.0717 12.4137 24.0717 13.1602 23.7848L14.2806 23.3528C16.7052 22.4147 18.7877 20.77 20.2546 18.6344C21.7215 16.4989 22.5042 13.9724 22.4999 11.3868V3.41819C22.5025 3.11029 22.4157 2.80819 22.2499 2.54802C22.0842 2.28785 21.8466 2.08063 21.5655 1.95114C18.5518 0.635546 15.2915 -0.0291648 12 0.000981362C8.70855 -0.0291648 5.44817 0.635546 2.43455 1.95114C2.15343 2.08063 1.91579 2.28785 1.75007 2.54802C1.58435 2.80819 1.49755 3.11029 1.50005 3.41819Z", fill: "#36B37E" }), /* @__PURE__ */ S.createElement("path", { d: "M16.5194 8.42881L11.3671 13.3387C11.3022 13.4007 11.2254 13.4489 11.1414 13.4802C11.0573 13.5116 10.9677 13.5256 10.8781 13.5212C10.7897 13.517 10.703 13.4951 10.6232 13.4568C10.5434 13.4185 10.4721 13.3646 10.4135 13.2982L8.06814 10.6339", stroke: "#FAFAFA", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), g = {
+  bankAccListBottomMargin: new x(a[7], a[6]),
+  iconWidthHeight: new x(a[6], a[4]),
+  containerWidth: new x(96, 67),
+  containerTopMargin: new x(a[4], a[6]),
+  BankAccListTopMargin: new x(a[4], a[8]),
+  containerSidePadding: new x(a[3], a[0]),
+  accountRowLeftRightPadding: new x(a[3], a[4]),
+  accountRowTopBottomPadding: new x(a[3], a[4]),
+  accountRowBottomMargin: new x(a[3], a[5]),
+  totalInsuredAndYieldContainerTopMargin: new x(a[3], a[0]),
+  paymentAccountIconSize: new x(a[6], a[7])
+}, Tt = {
+  bankAccountName: new Ze("standardRegular", "largeMedium")
+}, p = K.getLocalizedStrings(), Z = (e) => /* @__PURE__ */ t.jsx(Ot, { children: e }), It = ({
+  fetchState: e,
+  onReloadTransactions: c
+}) => e === "Error" ? /* @__PURE__ */ t.jsxs(dn, { children: [
+  /* @__PURE__ */ t.jsx(
+    pn,
+    {
+      onClick: c,
+      "data-testid": N("zeni-account-list-reload"),
+      children: /* @__PURE__ */ t.jsx(un, {})
+    }
+  ),
+  /* @__PURE__ */ t.jsx(mn, { children: p.peoplePage.reloadPage.label })
+] }) : /* @__PURE__ */ t.jsx(pt, { fetchState: e, styles: { margin: "auto" } }), Mt = ({
+  zeniAccountListView: e,
+  zeniAccountsConfigDetail: c,
+  maxInsuredAmountString: f,
+  analytics: v,
+  onZeniAccountRowClick: r,
+  onReloadTransactions: B,
+  handleAddInternalAccountClick: P,
+  onAddFundClick: T,
+  onTreasuryGetStartedClick: w,
+  treasuryYieldPercentage: z,
+  treasuryInsuredAmount: l,
+  showTreasuryPromo: L
+}) => {
+  const { depositAccountsSelectorView: I, fetchState: C, summary: $ } = e, u = X(), M = We(), y = M.loggedInUserRoleMap.deposit_accounts_user === !0 || dt(M.loggedInUserRoleMap), D = (s) => {
+    v.trackAccountsListPageClicked(
+      "Add Funds",
+      s.accountName,
+      "active"
+    ), T("transfer", s);
+  }, F = (s) => {
+    switch (s) {
+      case "totalBalance":
+        return "320px";
+      case "insuredBalance":
+        return "320px";
+      case "totalInterest":
+        return "290px";
+      default:
+        return "320px";
+    }
+  }, A = (s) => {
+    let k = /* @__PURE__ */ t.jsx(t.Fragment, {});
+    switch (s) {
+      case "insuredBalance":
+        k = /* @__PURE__ */ t.jsx(q, { style: { width: "300px" }, children: p.spendManagement.zeniAccounts.zeniAccountList.insuranceTooltip.replace(
+          "__amount__",
+          f
+        ) });
+        break;
+      case "totalInterest":
+        k = /* @__PURE__ */ t.jsx(q, { children: p.spendManagement.zeniAccounts.zeniAccountList.yieldTooltip });
+        break;
+      case "totalBalance":
+        k = /* @__PURE__ */ t.jsxs(q, { style: { paddingTop: "12px", paddingBottom: "12px" }, children: [
+          /* @__PURE__ */ t.jsx(fn, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.base }),
+          /* @__PURE__ */ t.jsxs(V, { children: [
+            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.balance }),
+            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.current) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(V, { children: [
+            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.processing }),
+            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.hold) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(V, { children: [
+            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.available }),
+            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.available) })
+          ] })
+        ] });
+        break;
+    }
+    return /* @__PURE__ */ t.jsx(gn, { children: /* @__PURE__ */ t.jsx(
+      ye,
+      {
+        style: {
+          textAlign: "left",
+          padding: n.sp1
+        },
+        maxWidth: F(s),
+        display: "flex",
+        placement: u === "small" ? "bottom" : "top",
+        title: k,
+        children: s === "insuredBalance" ? /* @__PURE__ */ t.jsx($n, {}) : /* @__PURE__ */ t.jsx(xn, {})
+      }
+    ) });
+  }, U = (s) => /* @__PURE__ */ t.jsx(
+    Wt,
+    {
+      color: Oe(s)
+    }
+  );
+  return Ye({
+    componentName: "checking.list",
+    enabled: C === "Completed"
+  }), /* @__PURE__ */ t.jsx(Dt, { children: C === "Completed" ? /* @__PURE__ */ t.jsxs(hn, { windowSize: u, children: [
+    /* @__PURE__ */ t.jsxs(Et, { windowSize: u, children: [
+      /* @__PURE__ */ t.jsxs(Yt, { windowSize: u, children: [
+        /* @__PURE__ */ t.jsxs(H, { children: [
+          Z(
+            p.spendManagement.zeniAccounts.zeniAccountList.totalAvailableBalance
+          ),
+          A("totalBalance")
+        ] }),
+        /* @__PURE__ */ t.jsx(E, { amount: $?.totalBalance.available })
+      ] }),
+      /* @__PURE__ */ t.jsxs(_t, { windowSize: u, children: [
+        /* @__PURE__ */ t.jsxs(Jt, { children: [
+          /* @__PURE__ */ t.jsxs(H, { children: [
+            Z(
+              p.spendManagement.zeniAccounts.zeniAccountList.insuredFund
+            ),
+            A("insuredBalance")
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            E,
+            {
+              amount: $?.insuredBalance.available,
+              integerStyles: b.largeMedium.cssObject,
+              decimalStyles: b.smallMedium.cssObject
+            }
+          ),
+          /* @__PURE__ */ t.jsx(qt, { children: p.spendManagement.zeniAccounts.zeniAccountList.insuranceInfo.replace(
+            "__amount__",
+            f
+          ) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(Qt, { children: [
+          /* @__PURE__ */ t.jsxs(H, { children: [
+            Z(
+              p.spendManagement.zeniAccounts.common.totalYieldEarned
+            ),
+            A("totalInterest")
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            E,
+            {
+              amount: $?.totalInterest.available,
+              integerStyles: b.largeMedium.cssObject,
+              decimalStyles: b.smallMedium.cssObject
+            }
+          ),
+          /* @__PURE__ */ t.jsxs(Zt, { children: [
+            p.spendManagement.zeniAccounts.zeniAccountList.currentAverageYield,
+            /* @__PURE__ */ t.jsx(Ht, { children: c.zeniAccountsConfigDetail.annualPercentageYield })
+          ] })
+        ] })
+      ] })
+    ] }),
+    L === !0 && /* @__PURE__ */ t.jsx(wn, { windowSize: u, children: /* @__PURE__ */ t.jsx(
+      ft,
+      {
+        yieldPercentage: z,
+        insuredAmount: l,
+        onGetStartedClick: () => {
+          v.trackAccountsListPageClicked("Move Money"), w?.();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs(Ut, { windowSize: u, children: [
+      I.depositAccounts.map(
+        (s, k) => /* @__PURE__ */ t.jsxs(
+          Xt,
+          {
+            isClickEnabled: !0,
+            windowSize: u,
+            onClick: () => r?.(
+              s.id,
+              s.accountName
+            ),
+            "data-testid": N(
+              "deposit-account-clicked",
+              s.id
+            ),
+            children: [
+              /* @__PURE__ */ t.jsxs(Vt, { children: [
+                U(k),
+                /* @__PURE__ */ t.jsxs(Kt, { children: [
+                  /* @__PURE__ */ t.jsx(en, { windowSize: u, children: s.accountName }),
+                  /* @__PURE__ */ t.jsxs(tn, { windowSize: u, children: [
+                    /* @__PURE__ */ t.jsx(Nt, { children: /* @__PURE__ */ t.jsx(nn, { children: s.maskedAccountNumber }) }),
+                    /* @__PURE__ */ t.jsxs(Gt, { children: [
+                      u === "small" ? null : /* @__PURE__ */ t.jsx(on, {}),
+                      /* @__PURE__ */ t.jsx(sn, { windowSize: u, children: p.spendManagement.zeniAccounts.zeniAccountList.active })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ t.jsxs(rn, { children: [
+                /* @__PURE__ */ t.jsx(
+                  E,
+                  {
+                    amount: s.accountBalance.available,
+                    integerStyles: b.largeMedium.cssObject,
+                    decimalStyles: b.smallMedium.cssObject
+                  }
+                ),
+                y ? null : /* @__PURE__ */ t.jsx(
+                  Rt,
+                  {
+                    onClick: (_) => {
+                      _.stopPropagation(), D(s);
+                    },
+                    "data-testid": N(
+                      "add-fund",
+                      s.id
+                    ),
+                    children: /* @__PURE__ */ t.jsx(Ft, { children: p.spendManagement.zeniAccounts.zeniAccountList.addFundBtnText })
+                  }
+                )
+              ] })
+            ]
+          },
+          s.id
+        )
+      ),
+      /* @__PURE__ */ t.jsxs(
+        an,
+        {
+          onClick: P,
+          "data-testid": N("add-new-internal-zeni-account"),
+          children: [
+            /* @__PURE__ */ t.jsx(cn, {}),
+            /* @__PURE__ */ t.jsx(ln, { children: p.spendManagement.zeniAccounts.zeniAccountList.addAccountText })
+          ]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ t.jsx(
+    It,
+    {
+      fetchState: C,
+      onReloadTransactions: B
+    }
+  ) });
+}, Dt = o.div`
+  display: block;
+  height: 100%;
+`, _t = o.div`
+  display: flex;
+  justify-content: space-between;
+  gap: ${n.sp5};
+  margin: ${(e) => `${g.totalInsuredAndYieldContainerTopMargin.valuePx(e.windowSize)} ${n.sp0} ${n.sp0} ${n.sp0}`};
+`, Rt = o.button`
+  cursor: pointer;
+  border-radius: ${n.sp1};
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  padding: 1px 6px;
+  :hover {
+    border: 1px solid ${(e) => e.theme.colors.hero};
+  }
+`, Ft = o(qe)`
+  color: ${(e) => e.theme.colors.hero};
+`, Et = o.div`
+  margin: ${(e) => g.containerTopMargin.valuePx(e.windowSize)}
+    ${n.sp0} ${n.sp0} ${n.sp0};
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  padding: ${(e) => `${n.sp0} ${g.containerSidePadding.valuePx(e.windowSize)} ${n.sp0} ${g.containerSidePadding.valuePx(e.windowSize)}`};
+`, Nt = o.div`
+  display: flex;
+`, Gt = o.div`
+  display: flex;
+  align-items: center;
+`, Ut = o.div`
+  margin: ${(e) => `${g.BankAccListTopMargin.valuePx(e.windowSize)} ${n.sp0} 
+    ${g.bankAccListBottomMargin.valuePx(e.windowSize)} ${n.sp0}`};
+  width: 100%;
+  padding: ${(e) => `${n.sp0}  ${g.containerSidePadding.valuePx(e.windowSize)}`};
+`, Wt = o(Qe)`
+  min-width: ${n.sp7};
+  width: ${n.sp7};
+  height: ${n.sp7};
+  margin-right: 12px;
+`, Yt = o.div`
+  ${(e) => e.windowSize !== "small" ? `
+        width: 50%;
+` : null}
+`, H = o.div`
+  display: flex;
+`, Ot = o(j)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-right: ${n.sp1};
+`, Zt = o(ee)`
+  color: ${(e) => e.theme.colors.hero};
+`, Ht = o.span`
+  margin-left: 2px;
+`, qt = o(ee)`
+  color: ${(e) => e.theme.colors.hero};
+`, Vt = o.div`
+  display: flex;
+  align-items: center;
+  width: calc(100% - 96px);
+`, Jt = o.div``, Qt = o.div``, Xt = o.div`
+  padding-left: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
+  padding-top: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
+  background: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal} `};
+  border-radius: ${n.sp2};
+  margin-bottom: ${(e) => g.accountRowBottomMargin.valuePx(e.windowSize)};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: ${(e) => e.isClickEnabled ? "pointer" : "default"};
+  &:hover {
+    border-color: ${(e) => e.theme.colors.primary};
+    color: ${(e) => e.isClickEnabled ? e.theme.colors.champion : e.theme.colors.hero};
+  }
+`, Kt = o.div`
+  max-width: calc(100% - 30px);
+  width: calc(100% - 40px);
+  white-space: nowrap;
+  overflow: hidden;
+`, en = o(He)`
+  ${(e) => `${Tt.bankAccountName.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  max-width: ${`calc(100% - ${n.sp3})`};
+  text-transform: capitalize;
+  overflow: hidden;
+`, tn = o.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "start" : "center"};
+`, nn = o(j)`
+  margin-left: ${n.sp1};
+`, on = o.div`
+  width: ${n.sp1};
+  height: ${n.sp1};
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.grey1};
+  margin-left: ${n.sp2};
+  margin-right: ${n.sp2};
+`, sn = o(j)`
+  color: ${i.success};
+  border-radius: 50px;
+`, rn = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`, an = o.div`
+  padding: ${n.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${(e) => e.theme.colors.hero};
+  border-radius: ${n.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  margin-top: ${n.sp4};
+  pointer-events: ${(e) => e.isLoading === !0 ? "none" : "auto"};
+  &:hover {
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    color: ${(e) => e.theme.colors.primary};
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, cn = o(Ve)`
+  margin-right: ${n.sp2};
+  width: ${n.sp4};
+  height: ${n.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, ln = o(Je)``, dn = o.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, pn = o.div`
+  height: ${n.sp12};
+  width: ${n.sp12};
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${n.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, un = o(Xe)`
+  height: ${n.sp5};
+  width: ${n.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, mn = o(Ke)`
+  margin-top: ${n.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, hn = o.div`
+  max-width: 726px;
+  width: ${(e) => g.containerWidth.valuePercentage(e.windowSize)};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+`, gn = o.div`
+  display: flex;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, xn = o(ke)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, $n = o(Pt)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+`, q = o(j)`
+  padding: ${n.sp2} ${n.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  border-radius: ${n.sp1};
+`, V = o(j)`
+  color: ${(e) => e.theme.colors.brandColorPearl};
+  margin-top: ${n.sp2};
+  display: flex;
+  justify-content: space-between;
+`, fn = o(j)`
+  margin-bottom: ${n.sp2};
+  display: flex;
+`, J = o.div`
+  color: ${(e) => e.theme.colors.hero};
+`, Q = o.div`
+  color: ${i.primaryDark};
+`, wn = o.div`
+  margin-top: ${n.sp4};
+`, {
+  common: yn,
+  spendManagement: { zeniAccounts: d }
+} = K.getLocalizedStrings(), we = "checkingAccountCreation-form", Un = ({
+  zeniAccountListView: e,
+  analytics: c,
+  maxInsuredAmount: f,
+  isBillPayEnabled: v,
+  isExpressPayEnabled: r,
+  onBackClick: B,
+  onZeniAccountClick: P,
+  onSettingsClick: T,
+  handleMoveMoneyOptionSelection: w,
+  onReloadTransactions: z,
+  onCreateCheckingClick: l,
+  onClickMenuIcon: L,
+  onTreasuryGetStartedClick: I,
+  showTreasuryPromo: C,
+  treasuryYieldPercentage: $,
+  treasuryInsuredAmount: u
+}) => {
+  const M = X(), y = De({
+    mode: "all"
+  }), D = e.newCheckingAccount.fetchState, F = et(D);
+  Ee(() => {
+    F === "In-Progress" && D === "Completed" && (s(!1), _(!0), y.reset());
+  }, [F, D, y]);
+  const A = _e(), [U, s] = R(!1), [k, _] = R(!1), [je, W] = R(!1), [Ce, Ae] = R(0), [be, Se] = R(0), ve = (h, Y) => {
+    P(h, Y);
+  }, Be = {
+    pageName: "listPage",
+    onOptionSelection: (h) => {
+      h === "payBill" ? (c.trackAccountsListPageClicked("Pay Someone"), W(!0)) : (h === "sendMoney" ? c.trackSendMoneyClick() : h === "checkDeposit" ? c.trackAccountsListPageClicked("Deposit a Check") : h === "transfer" && c.trackAccountsListPageClicked("Transfer Between Accounts"), w(h));
+    }
+  }, ze = {
+    onOkClick: () => {
+    },
+    onCancelClick: () => {
+      c.trackAccountsListPageClicked("Add Business Account Cancel"), y.reset(), s(!1);
+    }
+  }, Le = {
+    onOkClick: () => {
+      const h = e.depositAccountsSelectorView.depositAccounts.find(
+        (Y) => Y.id === e.newCheckingAccount.accountId
+      );
+      c.trackAccountsListPageClicked("Add Business Account Add Funds"), w("transfer", h), _(!1);
+    },
+    onCancelClick: () => {
+      c.trackAccountsListPageClicked("Add Business Account Not Now"), _(!1);
+    }
+  }, Pe = {
+    onOkClick: () => {
+      c.trackAccountsListPageClicked("Proceed on Bills pop up"), w("payBill"), W(!1);
+    },
+    onCancelClick: () => {
+      c.trackAccountsListPageClicked("Not Now on Bills pop up"), W(!1);
+    }
+  }, Te = y.handleSubmit((h) => {
+    c.trackAccountsListPageClicked("Add Business Account Create"), l?.(h.checkingAccountNickName);
+  }), te = e.zeniAccountsConfig.zeniAccountsConfigDetail.depositProductConfig.depositProducts, Ie = te[te.length - 1].annualPercentageYield.toString(), ne = tt(
+    nt(f),
+    f,
+    yn.currency.currencySymbol
+  ).toUpperCase(), Me = /* @__PURE__ */ t.jsx(
+    gt,
+    {
+      onSettingsClick: T,
+      isBillPayEnabled: v,
+      isExpressPayEnabled: r,
+      zeniBankProps: Be,
+      analytics: c
+    }
+  );
+  return /* @__PURE__ */ t.jsxs(kn, { children: [
+    U ? /* @__PURE__ */ t.jsx(
+      O,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(ie, { children: d.zeniAccountList.createPopUpInfo.title }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(oe, { children: d.zeniAccountList.createPopUpInfo.description }),
+        primaryButtonText: d.zeniAccountList.createPopUpInfo.primaryButtonText,
+        isLoading: e.newCheckingAccount.fetchState === "In-Progress",
+        formId: we,
+        secondaryButtonText: d.zeniAccountList.createPopUpInfo.secondaryButtonText,
+        style: { background: i.overlayLight },
+        action: ze,
+        children: /* @__PURE__ */ t.jsx(Re, { ...y, children: /* @__PURE__ */ t.jsx(
+          "form",
+          {
+            id: we,
+            onSubmit: Te,
+            style: {
+              height: n.sp8,
+              width: "80%",
+              marginBottom: n.sp5
+            },
+            children: /* @__PURE__ */ t.jsx(
+              ot,
+              {
+                type: "text",
+                name: "checkingAccountNickName",
+                placeholder: d.zeniAccountList.createPopUpInfo.placeholder,
+                style: {
+                  display: "flex",
+                  flexGrow: 1,
+                  cursor: "inherit",
+                  height: n.sp7,
+                  textAlign: "left",
+                  width: "100%",
+                  background: Fe(
+                    y.formState.errors,
+                    "checkingAccountNickName"
+                  ) === !0 ? i.importantLight : A.colors.grey5,
+                  border: `1px solid ${A.colors.grey2}`
+                },
+                registerOptions: {
+                  required: !0,
+                  validate: (h) => !!h
+                }
+              }
+            )
+          }
+        ) })
+      }
+    ) : null,
+    k ? /* @__PURE__ */ t.jsx(
+      O,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
+        descriptionComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
+        primaryButtonText: d.zeniAccountList.addFundsPopUpInfo.primaryButtonText,
+        secondaryButtonText: d.zeniAccountList.addFundsPopUpInfo.secondaryButtonText,
+        action: Le,
+        primaryButtonWidth: 130,
+        secondaryButtonWidth: 130,
+        containerStyle: {
+          minWidth: 352,
+          maxWidth: 544,
+          width: "90%"
+        },
+        children: /* @__PURE__ */ t.jsxs(Cn, { children: [
+          /* @__PURE__ */ t.jsx(
+            it,
+            {
+              width: 150,
+              height: 150,
+              shouldDisplay: !0,
+              animationInLoop: 1,
+              styles: { marginBottom: -n.sp4 }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(An, { children: d.zeniAccountList.addFundsPopUpInfo.title }),
+          /* @__PURE__ */ t.jsx(bn, { children: d.zeniAccountList.addFundsPopUpInfo.description.replace("__rate__", Ie).replace("__amount__", ne) }),
+          /* @__PURE__ */ t.jsx(
+            xt,
+            {
+              transferAmount: 5e5,
+              currentAccountBalance: 0,
+              zeniAccountsConfigDetail: e.zeniAccountsConfig,
+              minStep: 0.1,
+              setTotalBalance: Se,
+              setYieldEarned: Ae
+            }
+          ),
+          /* @__PURE__ */ t.jsxs(Sn, { children: [
+            /* @__PURE__ */ t.jsxs(Bn, { children: [
+              d.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarned,
+              /* @__PURE__ */ t.jsx(vn, { children: G("0,0", {
+                amount: Ce,
+                currencySymbol: "$"
+              }) }),
+              /* @__PURE__ */ t.jsx(
+                ye,
+                {
+                  variant: "small-description",
+                  maxWidth: "280px",
+                  data: d.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarnedTooltipText,
+                  display: "flex",
+                  placement: "left",
+                  children: /* @__PURE__ */ t.jsx(Ln, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsxs(zn, { children: [
+              d.zeniAccountList.transferDrawer.calculator.footerText.for,
+              Intl.NumberFormat("en", {
+                currency: "USD",
+                notation: "compact",
+                style: "currency",
+                minimumFractionDigits: 0
+              }).format(be)
+            ] })
+          ] })
+        ] })
+      }
+    ) : null,
+    je ? /* @__PURE__ */ t.jsx(
+      O,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(ie, { children: d.zeniAccountList.billPayupPopUpInfo.title }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(oe, { children: d.zeniAccountList.billPayupPopUpInfo.description }),
+        primaryButtonText: d.zeniAccountList.billPayupPopUpInfo.primaryButtonText,
+        secondaryButtonText: d.zeniAccountList.billPayupPopUpInfo.secondaryButtonText,
+        action: Pe,
+        primaryButtonWidth: 130,
+        secondaryButtonWidth: 130
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      st,
+      {
+        title: d.zeniAccountList.tabsById.zeniAccounts,
+        onBackClick: B,
+        showMenuIcon: M === "medium-compact" || M === "small",
+        backgroundColor: A.colors.grey4,
+        style: { zIndex: 3, ...b.largeSemiBold.cssObject },
+        rightSideComponent: Me,
+        onClickMenuIcon: L,
+        hideSearchBtn: !0,
+        source: "ZeniAccountListViewPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      jn,
+      {
+        isLoading: e.fetchState === "In-Progress",
+        children: /* @__PURE__ */ t.jsx(
+          Mt,
+          {
+            zeniAccountsConfigDetail: e.zeniAccountsConfig,
+            zeniAccountListView: e,
+            onZeniAccountRowClick: ve,
+            onAddFundClick: w,
+            handleAddInternalAccountClick: () => {
+              c.trackAccountsListPageClicked("Add Business Account"), s(!0);
+            },
+            analytics: c,
+            onReloadTransactions: z,
+            maxInsuredAmountString: ne,
+            onTreasuryGetStartedClick: I,
+            treasuryYieldPercentage: $,
+            treasuryInsuredAmount: u,
+            showTreasuryPromo: C
+          }
+        )
+      }
+    )
+  ] });
+}, kn = o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, jn = o.div`
+  display: ${(e) => e.isLoading ? "flex" : "block"};
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  min-height: ${(e) => e.isLoading ? `calc(100vh - ${n.sp10})` : "100vh"};
+  height: ${(e) => e.isLoading ? `calc(100vh - ${n.sp10})` : "100%"};
+`, Cn = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: ${n.sp4};
+`, An = o(rt)`
+  padding-left: ${n.sp8};
+  padding-right: ${n.sp8};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+`, bn = o(at)`
+  color: ${(e) => e.theme.colors.hero};
+  padding-left: ${n.sp6};
+  padding-right: ${n.sp6};
+  margin-bottom: ${n.sp3};
+  margin-top: ${n.sp3};
+  white-space: pre-line;
+`, Sn = o.div`
+  min-height: ${n.sp10};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, vn = o.span`
+  font-weight: ${lt.medium};
+  margin-left: ${n.sp1};
+`, Bn = o(ct)`
+  color: ${i.success};
+  display: flex;
+  align-items: center;
+`, zn = o(j)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: block;
+`, Ln = o(ke)`
+  width: ${n.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  height: ${n.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`;
+export {
+  Un as default
+};