@zeniai/web-components 3.17.8 → 3.17.9

package/dist/AccountsPromoCardStack-4CqI_l4C.js

@@ -0,0 +1,664 @@
+import { j as o, u as Y, L as re } from "./vendor-.pnpm-B2klaOGU.js";
+import P, { useState as G, 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, ai as ue, r as pe, o as he, n as ge, dB as xe, e as Z, ez as fe, eu as Ce, ev as ye, F as K, dM as w, ey as _, et as $e } from "./index-usWkcKCS.js";
+import { S as Ae } from "./SummaryCard-B1931b9k.js";
+import n from "@emotion/styled";
+import { hasZeniAccountsAdminLevelAccess as je } from "@zeniai/client-epic-state";
+import { N as E } from "./NavigationArrow-DMbZ_gHM.js";
+import { N as ve } from "./NavigationDots-CclndcxJ.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};
+`, Me = n.div`
+  height: 100%;
+  width: 1px;
+  background-color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
+  margin-right: 2px;
+`, Re = 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;
+`, M = 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};
+`, Ye = n(le)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.zeniAccountsPromoCardHighlightText};
+  path {
+    stroke-width: 2px;
+  }
+`, Ge = (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(Me, {}),
+        /* @__PURE__ */ o.jsxs(Re, { 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(Ye, {}) }) }),
+        /* @__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(M, { src: Se }) }),
+        /* @__PURE__ */ o.jsx(z, { style: { animationDelay: "0.4s", zIndex: 1 }, children: /* @__PURE__ */ o.jsx(M, { src: be }) }),
+        /* @__PURE__ */ o.jsx(z, { style: { animationDelay: "0.6s", zIndex: 2 }, children: /* @__PURE__ */ o.jsx(M, { 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 = Y(), [a, m] = G(!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 ? Ge(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};
+`, R = 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 = Y(), 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(R, { 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(
+          R,
+          {
+            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(R, { 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
+  ] = G(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,
+  Ge as g
+};