@zeniai/web-components 3.16.64 → 3.16.65

package/dist/AccountsPromoCardStack-D714hXWL.js

@@ -1,664 +0,0 @@
-import { j as o, u as G, L as re } from "./vendor-.pnpm-DtFedGku.js";
-import P, { useState as Y, useEffect as se } from "react";
-import { a as L, S as t, C as j, V as ie, t as ae, eO as ce, W as le, eP as de, eQ as me, eR as J, aj as ue, r as pe, p as he, o as ge, dz as xe, j as Z, ez as fe, eu as Ce, ev as ye, G as K, dK as w, ey as _, et as $e } from "./index-lPBSSV1q.js";
-import { S as Ae } from "./SummaryCard-Bno9Ov_m.js";
-import n from "@emotion/styled";
-import { hasZeniAccountsAdminLevelAccess as je } from "@zeniai/client-epic-state";
-import { N as E } from "./NavigationArrow-C3WskeTi.js";
-import { N as ve } from "./NavigationDots-D_mAWOOU.js";
-import { keyframes as V, css as Q } from "@emotion/react";
-const Se = "https://storage.googleapis.com/zeni-apis.appspot.com/images/face-1.png", be = "https://storage.googleapis.com/zeni-apis.appspot.com/images/face-2.png", ke = "https://storage.googleapis.com/zeni-apis.appspot.com/images/face-3.png", B = (e, r) => {
-  const i = e === "right" ? `-${r}%` : `${r}%`;
-  return V`
-0% {
-  opacity: 0;
-  transform: translateX(${i});
-}
-100%{
-  opacity: 1;
-  transform: translateX(0%);
-}
-`;
-}, Te = V`
-0% {
-  height: 0;
-}
-100%{
-  height: ${t.sp10};
-}
-`, De = (e, r) => {
-  const i = r * 100, s = e === "up" ? "0%" : `-${r * 100}%`, a = e === "up" ? `-${i}%` : "0%";
-  return V`
-    0% {
-      transform: translateY(${s});
-    }
-    100%{
-      transform: translateY(${a});
-    }
-  `;
-}, Pe = (e, r) => {
-  const i = e === "down" ? `-${r * 100}%` : "0%";
-  return Q`
-    transform: translateY(${i});
-  `;
-}, q = Q`
-  width: ${t.sp7};
-  height: ${t.sp7};
-  border-radius: 50%;
-  border: 2px solid ${j.neutralGrey5Light};
-`, we = n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  max-height: 225px;
-  gap: ${t.sp2};
-  margin-bottom: ${t.sp4};
-  padding: ${t.sp0} ${t.sp2};
-`, ze = n(ge)`
-  text-align: center;
-  max-width: 222px;
-  white-space: pre-line;
-  color: ${(e) => e.theme.colors.zeniAccountsPromoDetailTextColor};
-`, Be = n.div`
-  min-height: 95px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: ${t.sp2};
-`, ee = n.div`
-  overflow: hidden;
-  display: flex;
-`, k = n(ce)`
-  ${ae.accountsPromoHighlightText.css};
-  color: ${(e) => e.theme.colors.zeniAccountsPromoCardHighlightText};
-`, Ie = n(he)`
-  color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
-`, He = n(me)`
-  color: ${j.brandColorJade};
-  height: ${t.sp4};
-  width: ${t.sp4};
-`, Fe = n(de)`
-  height: ${t.sp4};
-  width: ${t.sp4};
-  color: ${(e) => e.theme.colors.grey1};
-`, Ze = n.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 20px;
-  margin-right: ${t.sp2};
-`, Re = n.div`
-  height: 100%;
-  width: 1px;
-  background-color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
-  margin-right: 2px;
-`, Me = n.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: ${t.sp2};
-  overflow: hidden;
-`, Oe = n.div`
-  display: flex;
-  align-items: center;
-  gap: ${t.sp1};
-  animation: ${B("right", 100)} normal 0.3s 1
-    forwards;
-`, Le = n.div`
-  height: 34px;
-  width: ${t.sp5};
-  border-radius: ${t.sp0} ${t.sp1} ${t.sp1} ${t.sp0};
-  background-color: ${j.brandColorGold};
-`, Ve = n.div`
-  display: flex;
-  align-items: center;
-  height: 34px;
-  width: 168px;
-  border-radius: ${t.sp0} ${t.sp1} ${t.sp1} ${t.sp0};
-  background-color: ${j.brandColorJade};
-  opacity: 0;
-  animation: ${B("right", 100)} normal 0.5s 1
-    forwards;
-  animation-delay: 0.5s;
-`, Ne = n(ue)`
-  color: ${(e) => e.theme.colors.brandColorOnyx};
-  margin-left: ${t.sp3};
-  margin-right: ${t.sp1};
-`, W = n(J)`
-  color: ${(e) => e.isZeniProgressBar ? e.theme.colors.brandColorOnyx : e.theme.colors.primary};
-`, _e = n.div`
-  width: 2px;
-  height: ${t.sp0};
-  background-color: ${j.important};
-  transform: rotate(64deg);
-  position: absolute;
-  top: ${t.sp1};
-  right: ${t.sp0};
-  transform-origin: top;
-  animation: ${Te} normal 0.6s 1 forwards;
-  animation-delay: 0.6s;
-`, U = n.div`
-  opacity: 0;
-  transform: translateX(-50%);
-  animation: ${B("right", 50)} normal 0.6s 1
-    forwards;
-  animation-delay: 1.2s;
-`, Ee = n.div`
-  max-height: ${t.sp6};
-  animation: 1s normal 0.5s 1
-    ${(e) => De(e.direction, e.stepCount)};
-  animation-fill-mode: forwards;
-  ${(e) => Pe(e.direction, e.stepCount)}
-`, We = n.div`
-  display: flex;
-`, z = n.div`
-  margin-right: -${t.sp3};
-  opacity: 0;
-  transform: translateX(50%);
-  animation: ${B("left", 75)} ease-out 0.3s 1
-    forwards;
-`, R = n.img`
-  ${q}
-`, Ue = n(z)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${t.sp3};
-  ${q}
-  background-color:${j.brandColorGold};
-`, Xe = n(ie)`
-  color: ${(e) => e.theme.colors.brandColorOnyx};
-`, Ge = n(le)`
-  width: ${t.sp4};
-  height: ${t.sp4};
-  color: ${(e) => e.theme.colors.zeniAccountsPromoCardHighlightText};
-  path {
-    stroke-width: 2px;
-  }
-`, Ye = (e, r) => {
-  const { common: i } = L.getLocalizedStrings();
-  switch (e) {
-    case "keepInterest":
-    case "noHiddenFees":
-      return /* @__PURE__ */ o.jsx(o.Fragment, { children: r.map((s, a) => /* @__PURE__ */ o.jsx(
-        Ee,
-        {
-          className: "card-highlight-text-stack",
-          direction: s.direction,
-          stepCount: s.stepCount,
-          children: s.values.map((m, h) => /* @__PURE__ */ o.jsx(
-            k,
-            {
-              className: "card-highlight-text",
-              children: m
-            },
-            `${m}_${h}`
-          ))
-        },
-        `${s.direction}_${a}`
-      )) });
-    case "protectCash":
-      return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-        /* @__PURE__ */ o.jsxs(Ze, { children: [
-          /* @__PURE__ */ o.jsx(Fe, {}),
-          /* @__PURE__ */ o.jsx(He, {})
-        ] }),
-        /* @__PURE__ */ o.jsx(Re, {}),
-        /* @__PURE__ */ o.jsxs(Me, { children: [
-          /* @__PURE__ */ o.jsxs(Oe, { children: [
-            /* @__PURE__ */ o.jsx(Le, {}),
-            /* @__PURE__ */ o.jsxs(W, { isZeniProgressBar: !1, children: [
-              r[0].values[0],
-              " ",
-              i.texts.insured
-            ] })
-          ] }),
-          /* @__PURE__ */ o.jsxs(Ve, { children: [
-            /* @__PURE__ */ o.jsx(Ne, { children: r[0].values[1] }),
-            /* @__PURE__ */ o.jsx(
-              W,
-              {
-                isZeniProgressBar: !0,
-                style: { marginTop: "6px" },
-                children: i.texts.insured
-              }
-            )
-          ] })
-        ] })
-      ] });
-    case "freeWire":
-      return /* @__PURE__ */ o.jsxs(ee, { style: { gap: t.sp2 }, children: [
-        /* @__PURE__ */ o.jsxs(k, { style: { position: "relative" }, children: [
-          r[0].values[0],
-          /* @__PURE__ */ o.jsx(_e, {})
-        ] }),
-        /* @__PURE__ */ o.jsx(k, { children: /* @__PURE__ */ o.jsx(U, { children: /* @__PURE__ */ o.jsx(Ge, {}) }) }),
-        /* @__PURE__ */ o.jsx(k, { children: /* @__PURE__ */ o.jsx(U, { style: { animationDelay: "1.5s" }, children: r[0].values[1] }) })
-      ] });
-    case "expertSupport":
-      return /* @__PURE__ */ o.jsxs(We, { children: [
-        /* @__PURE__ */ o.jsx(z, { style: { animationDelay: "0.2s" }, children: /* @__PURE__ */ o.jsx(R, { src: Se }) }),
-        /* @__PURE__ */ o.jsx(z, { style: { animationDelay: "0.4s", zIndex: 1 }, children: /* @__PURE__ */ o.jsx(R, { src: be }) }),
-        /* @__PURE__ */ o.jsx(z, { style: { animationDelay: "0.6s", zIndex: 2 }, children: /* @__PURE__ */ o.jsx(R, { src: ke }) }),
-        /* @__PURE__ */ o.jsx(Ue, { style: { animationDelay: "0.8s", zIndex: 3 }, children: /* @__PURE__ */ o.jsxs(Xe, { children: [
-          " ",
-          r[0].values[0]
-        ] }) })
-      ] });
-  }
-};
-let X;
-function Je({
-  zeniAccountsPromoCardContent: e,
-  showConfetti: r
-}) {
-  const [i] = pe("Confetti"), s = G(), [a, m] = Y(!1);
-  se(() => (r && (X = setTimeout(() => {
-    m(!0);
-  }, 2e3)), () => {
-    clearTimeout(X), m(!1);
-  }), [r]);
-  const { prefix: h, header: d, headerAnimationData: u, showAnimation: f, key: g } = e;
-  return /* @__PURE__ */ o.jsxs(we, { children: [
-    r && a && i != null ? /* @__PURE__ */ o.jsx(
-      re,
-      {
-        loop: !1,
-        play: !0,
-        onComplete: () => {
-          m(!1);
-        },
-        segments: [100, 299],
-        animationData: i,
-        style: { position: "absolute", top: `-${t.sp8}`, left: t.sp0 },
-        rendererSettings: {
-          preserveAspectRatio: "xMidYMid slice"
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ o.jsxs(Be, { children: [
-      d != null ? /* @__PURE__ */ o.jsx(Ie, { children: d }) : null,
-      /* @__PURE__ */ o.jsx(ee, { children: f ? Ye(g, u) : null })
-    ] }),
-    /* @__PURE__ */ o.jsx(ze, { themeContext: s, children: h })
-  ] });
-}
-const Ke = n(Ce)`
-  flex-wrap: wrap;
-  overflow: hidden;
-  & .styledNav {
-    margin-left: -${t.sp1};
-    margin-right: -${t.sp1};
-    background-color: ${(e) => e.theme.colors.zeniAccountsPromoNavigationArrowColor};
-  }
-`, Qe = n(ye)`
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 2px;
-  background-color: ${(e) => e.theme.colors.zeniAccountsPromoBackgroundColor};
-  border-radius: ${t.sp2};
-`, M = n.div`
-  display: flex;
-  flex-direction: column;
-`, qe = n.div`
-  border: 1px solid
-    ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
-  border-radius: ${t.sp2};
-  background: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
-  cursor: pointer;
-  display: flex;
-  padding: 6px ${t.sp3};
-  justify-content: space-around;
-  align-items: center;
-  &:hover {
-    background: ${(e) => e.theme.colors.zeniAccountsPromoButtonHoverColor};
-    border: 1px solid
-      ${(e) => e.theme.colors.zeniAccountsPromoButtonHoverColor};
-  }
-`, eo = n(K)`
-  color: ${(e) => e.theme.colors.zeniAccountsPromoButtonTextColor};
-`, oo = n.div`
-  margin-top: ${t.sp4};
-  margin-bottom: ${t.sp3};
-`, to = n(K)`
-  color: ${(e) => e.theme.colors.zeniAccountsPromoCardTitle};
-  text-align: center;
-`, no = n.div`
-  width: 100%;
-  position: absolute;
-  bottom: 6px;
-`, ro = n(J)`
-  color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
-`, T = L.getLocalizedStrings().zeniAccountsPromoCard;
-function so({
-  analytics: e,
-  cardPosition: r,
-  card: i,
-  data: s,
-  activeCardIndex: a,
-  isZeniAccountsSetUp: m,
-  handleLearnMoreClick: h,
-  handleCardNavigation: d
-}) {
-  const u = G(), f = xe(), [g, x] = P.useState(0), [C, y] = P.useState(0), [I, v] = P.useState("left"), S = (l, $) => {
-    l.stopPropagation(), v($);
-    const ne = $ == "left" ? a + 1 : a - 1;
-    e.trackZeniAccountsPromoCardClick(
-      r,
-      $ === "left" ? "Next" : "Back"
-    ), d(b(ne), $);
-  }, H = (l) => {
-    d(b(l), "left");
-  };
-  function p(l) {
-    x(l.targetTouches[0].clientX);
-  }
-  function oe(l) {
-    y(l.targetTouches[0].clientX);
-  }
-  function b(l) {
-    return l < 0 ? s.length + l : l % s.length;
-  }
-  function te() {
-    g - C > 50 && C !== 0 ? (d(b(a + 1), "left"), v("left"), x(0), y(0)) : g - C < -50 && C !== 0 && (d(b(a - 1), "right"), v("right"), x(0), y(0));
-  }
-  const F = s.length > 1, N = je(
-    f.loggedInUserRoleMap
-  );
-  return /* @__PURE__ */ o.jsx(
-    Ke,
-    {
-      "data-testid": Z("dashboard", i.cardType),
-      style: { cursor: "default" },
-      dimension: i.dimension,
-      onTouchStart: (l) => F ? p(l) : null,
-      onTouchMove: (l) => F ? oe(l) : null,
-      onTouchEnd: () => F ? te() : null,
-      children: /* @__PURE__ */ o.jsxs(Qe, { children: [
-        /* @__PURE__ */ o.jsx(M, { children: /* @__PURE__ */ o.jsx(
-          E,
-          {
-            "data-testid": Z(
-              "dashboard-navigation-arrow-left",
-              i.cardType
-            ),
-            isSpendManagementPromoCard: !0,
-            navType: "left",
-            handleClick: S,
-            promoColor: u.colors.zeniAccountsPromoButtonColor,
-            promoBorderColor: u.colors.zeniAccountsPromoButtonColor
-          }
-        ) }),
-        /* @__PURE__ */ o.jsxs(
-          M,
-          {
-            style: {
-              height: "100%",
-              position: "relative",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ o.jsx(oo, { children: /* @__PURE__ */ o.jsx(to, { children: T.title }) }),
-              s.map(
-                (l, $) => /* @__PURE__ */ o.jsx(
-                  fe,
-                  {
-                    activeCardIndex: a,
-                    currentIndex: $,
-                    which: I,
-                    children: /* @__PURE__ */ o.jsx(
-                      Je,
-                      {
-                        zeniAccountsPromoCardContent: l,
-                        showConfetti: a === 2
-                      }
-                    )
-                  },
-                  l.key
-                )
-              ),
-              /* @__PURE__ */ o.jsx(
-                qe,
-                {
-                  onClick: () => h(
-                    N ? m ? "Move Money" : "Sign Up for Free" : "Learn More"
-                  ),
-                  children: /* @__PURE__ */ o.jsx(eo, { children: N ? m ? T.button : T.signUp : T.learnMore })
-                }
-              ),
-              /* @__PURE__ */ o.jsx(
-                ve,
-                {
-                  spendManagementPromoCardActive: !0,
-                  numberOfDots: s.length,
-                  activeIndex: a,
-                  handleClick: H,
-                  promoColor: u.colors.zeniAccountsPromoButtonColor,
-                  promoColorHover: u.colors.zeniAccountsPromoNavigationDotHoverColor,
-                  style: {
-                    cursor: "default",
-                    position: "absolute",
-                    bottom: t.sp5
-                  }
-                }
-              ),
-              a === 0 ? /* @__PURE__ */ o.jsx(no, { children: /* @__PURE__ */ o.jsx(ro, { children: s[0].footer }) }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ o.jsx(M, { children: /* @__PURE__ */ o.jsx(
-          E,
-          {
-            "data-testid": Z(
-              "dashboard-navigation-arrow-right",
-              i.cardType
-            ),
-            isSpendManagementPromoCard: !0,
-            navType: "right",
-            handleClick: S,
-            promoColor: u.colors.zeniAccountsPromoButtonColor,
-            promoBorderColor: u.colors.zeniAccountsPromoButtonColor
-          }
-        ) })
-      ] })
-    }
-  );
-}
-const { zeniAccountsPromoCard: c, common: A } = L.getLocalizedStrings(), D = {
-  key: "keepInterest",
-  title: c.title,
-  prefix: c.keepInterest.prefixDashboard,
-  header: c.keepInterest.header,
-  headerAnimationData: [],
-  footer: c.keepInterest.footer,
-  showAnimation: !0
-}, O = {
-  key: "protectCash",
-  title: c.title,
-  prefix: c.protectCash.prefix,
-  headerAnimationData: [],
-  showAnimation: !0
-}, io = [
-  {
-    key: "noHiddenFees",
-    title: c.title,
-    prefix: c.noHiddenFees.prefix,
-    headerAnimationData: [
-      {
-        direction: "down",
-        stepCount: 6,
-        values: c.noHiddenFees.headerAnimationData
-      }
-    ],
-    showAnimation: !0
-  },
-  {
-    key: "freeWire",
-    title: c.title,
-    prefix: c.freeWire.prefix,
-    headerAnimationData: [
-      {
-        direction: "right",
-        stepCount: 1,
-        values: c.freeWire.headerAnimationData
-      }
-    ],
-    showAnimation: !0
-  },
-  {
-    key: "expertSupport",
-    title: c.title,
-    prefix: c.expertSupport.prefix,
-    header: c.expertSupport.header,
-    headerAnimationData: [
-      {
-        direction: "left",
-        stepCount: 1,
-        values: c.expertSupport.headerAnimationData
-      }
-    ],
-    showAnimation: !0
-  }
-];
-function ao({
-  card: e,
-  data: r,
-  analytics: i,
-  actions: s,
-  isZeniAccountsEnabled: a,
-  columnKey: m,
-  index: h,
-  dndProps: d
-}) {
-  const [
-    u,
-    f
-  ] = Y(0), g = (p) => {
-    f(p);
-  }, x = (m + 1) * (h + 1), C = (p) => {
-    i.trackZeniAccountsPromoCardClick(x, p), r.depositAccountId != null ? s.onCardBtnClick?.(
-      "zeni_accounts_promo_card",
-      r.depositAccountId
-    ) : s.onCardBtnClick?.("zeni_accounts_promo_card");
-  }, {
-    maxInsuredAmount: y,
-    maxPossibleInterest: I,
-    maxAnnualPercentageYield: v,
-    maxCashBalanceAvailable: S = 0
-  } = r;
-  D.headerAnimationData = co(
-    I ?? 25e4
-  ), D.prefix = c.keepInterest.prefixDashboard.replace(
-    /<amount>/,
-    w(
-      "0,0",
-      S,
-      A.currency.currencySymbol
-    ).toUpperCase()
-  ), D.footer = c.keepInterest.footer.replace(
-    /<interest>/,
-    v.toString()
-  ), O.headerAnimationData = [
-    {
-      direction: "right",
-      stepCount: 1,
-      values: [
-        ...c.protectCash.headerAnimationData,
-        w(
-          _(y),
-          y,
-          A.currency.currencySymbol
-        ).toUpperCase()
-      ]
-    }
-  ], O.prefix = c.protectCash.prefix.replace(
-    /<amount>/,
-    w(
-      _(y),
-      y,
-      A.currency.currencySymbol
-    ).toUpperCase()
-  );
-  const H = [
-    D,
-    O,
-    ...io
-  ];
-  return /* @__PURE__ */ o.jsx(
-    $e,
-    {
-      isDragging: d?.draggedCardType != null,
-      isDragOver: d?.dragOverCard === e.cardType,
-      draggable: !0,
-      onDragStart: (p) => d?.onDragStart(e.cardType, p),
-      onDragOver: (p) => d?.onDragOver(p, e.cardType),
-      onDragLeave: (p) => d?.onDragLeave(p),
-      onDrop: (p) => d?.onDrop(p, e.cardType),
-      dimension: e.dimension,
-      children: /* @__PURE__ */ o.jsx(
-        Ae,
-        {
-          card: e,
-          actions: {
-            onCardClick: () => {
-            },
-            onReloadData: () => {
-            }
-          },
-          children: /* @__PURE__ */ o.jsx(
-            so,
-            {
-              card: e,
-              data: H,
-              handleCardNavigation: g,
-              activeCardIndex: u,
-              handleLearnMoreClick: C,
-              isZeniAccountsSetUp: a && r.depositAccountId != null,
-              analytics: i,
-              cardPosition: x
-            }
-          )
-        }
-      )
-    },
-    e.cardIndex
-  );
-}
-P.memo(
-  ao
-);
-function co(e) {
-  const r = [], i = w(
-    "0,0",
-    Math.floor(e),
-    A.currency.currencySymbol
-  );
-  for (let s = 0; s < i.length; s++) {
-    const a = i[s], m = {
-      direction: "up",
-      stepCount: 0,
-      values: [a]
-    };
-    if (a === A.currency.currencySymbol || a === A.strings.comma)
-      r.push(m);
-    else {
-      const h = parseInt(i[s]), d = s === 1 && h <= 1 ? 1 : Math.floor(h / 2), u = s % 2 === 0 ? "down" : "up", f = h - d, g = [];
-      for (let x = 0; x <= f; x++) {
-        const C = d + x;
-        g.push(C.toString());
-      }
-      u === "down" && g.reverse(), r.push({
-        direction: u,
-        stepCount: f,
-        values: g
-      });
-    }
-  }
-  return r;
-}
-export {
-  ao as Z,
-  co as a,
-  Ye as g
-};