@zeniai/web-components 3.17.3 → 3.17.4

package/dist/ZeniAccountPromoPage-Ca-HA5RA.js

@@ -0,0 +1,522 @@
+import { u as ce, j as o } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as de, useEffect as ae } from "react";
+import n from "@emotion/styled";
+import { u as T, aD as xe, dB as me, i8 as ue, aE as pe, a as k, hH as he, ai as ge, S as t, fi as je, V as N, B as L, e as B, er as S, H as Se, dM as C, ey as v, P as V, eR as we, R as x, C as R, ad as ye, a7 as $e, n as fe, D, aw as w, J as z, E as I, j as be } from "./index-CR2Dmphx.js";
+import { S as A } from "./usp-line-BBd1wKwW.js";
+const h = {
+  amountColumnHeight: new x(240, 340),
+  bankRectBoxHeight: new x(240, 340),
+  bankRectBoxMinWidth: new x(130, 180),
+  iconInnerColumnGap: new x(D[5], 50),
+  iconInnerRowMaxWidth: new x(291, 414),
+  midContainerGap: new x(0, 0, 0, D[11]),
+  styledLogoHeight: new x(13, 21),
+  styledLogoWidth: new x(54, 87)
+}, P = {
+  insuredAmountStr: new w(
+    "extraSmallRegular",
+    "smallRegular"
+  ),
+  title: new w("smallRegular", "largeRegular"),
+  uninsuredAmountStr: new w("largeRegular", "h6Regular"),
+  yAxisAmount: new w("h6Regular", "extraSmallRegular")
+}, Ce = n.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+`, ve = n.div`
+  padding: ${(e) => e.windowSize === "small" ? `${t.sp0} ${t.sp3}` : `${t.sp0} ${t.sp8}`};
+  text-align: center;
+`, Te = n.div`
+  max-width: 517px;
+  margin: auto;
+  padding: ${t.sp7} ${t.sp0};
+  color: ${(e) => e.theme.colors.primary};
+  display: flex;
+  flex-direction: column;
+`, Re = n(Se)`
+  max-width: 600px;
+  margin: auto;
+  padding: ${t.sp5} ${t.sp0};
+  color: ${(e) => e.theme.colors.primary};
+`, O = n.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" || e.windowSize === "medium-compact" || e.windowSize === "medium-regular" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+  gap: ${(e) => h.midContainerGap.valuePx(e.windowSize)};
+  margin-bottom: ${t.sp5};
+`, ze = n.div`
+  display: flex;
+  flex-direction: column;
+`, Ie = n.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column-reverse" : "row"};
+  align-items: center;
+  justify-content: center;
+`, q = n.div`
+  width: ${(e) => e.windowSize === "small" ? "auto" : "330px"};
+  display: flex;
+  flex-direction: column;
+`, Ae = n.div`
+  width: ${(e) => e.windowSize === "small" ? "100%" : "unset"};
+  overflow: hidden;
+  display: flex;
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${t.sp4};
+`, m = n.div`
+  border-radius: ${t.sp12};
+  min-height: ${(e) => e.windowSize !== "small" ? "76px" : t.sp0};
+  border: ${(e) => `1px solid ${e.theme.colors.grey2}`};
+  padding: ${(e) => e.windowSize === "small" ? `${t.sp2} ${t.sp4} ${t.sp2} ${t.sp0}` : `${t.sp3} ${t.sp5} ${t.sp3} ${t.sp0}`};
+  background: ${(e) => e.theme.colors.grey5};
+  position: relative;
+  margin-bottom: ${t.sp3};
+  display: flex;
+  align-items: center;
+  text-align: start;
+  box-sizing: border-box;
+`, y = n(fe)`
+  color: ${(e) => e.theme.colors.champion};
+`, $ = n($e)`
+  color: ${(e) => e.theme.colors.champion};
+`, f = n(V)`
+  color: ${(e) => e.theme.colors.champion};
+`, b = n(ye)`
+  color: ${(e) => e.theme.colors.champion};
+`, u = n.div``, p = n.div`
+  padding-left: ${t.sp3};
+`, K = n(A)`
+  color: ${R.graphColor16Dark};
+`, Q = n(A)`
+  color: ${R.graphColor19Dark};
+`, X = n(A)`
+  color: ${R.graphColor11};
+`, Y = n(A)`
+  color: ${R.success};
+`, Pe = n(V)`
+  margin: ${(e) => e.windowSize === "small" ? t.sp1 : `auto ${t.sp5}`};
+  color: ${(e) => e.theme.colors.grey1};
+`, Ue = n.div`
+  display: flex;
+  padding-top: ${t.sp4};
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`, ke = n.div`
+  display: inline-block;
+`, W = n(we)`
+  display: inline;
+  margin: ${t.sp3} auto ${t.sp0} auto;
+  max-width: 731px;
+  color: ${(e) => e.theme.colors.hero};
+`, Me = n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${(e) => h.iconInnerRowMaxWidth.valuePx(e.windowSize)};
+`, He = n.div`
+  display: flex;
+  justify-content: flex-end;
+`, _e = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  gap: ${(e) => h.iconInnerColumnGap.valuePx(e.windowSize)};
+  align-items: flex-end;
+`, E = n.div``, Fe = n.div`
+  height: ${(e) => h.amountColumnHeight.valuePx(e.windowSize)};
+  border-left: 1px solid ${(e) => e.theme.colors.grey2};
+  margin-left: 12px;
+  margin-top: 43px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-left: ${t.sp2};
+`, G = n.div`
+  width: 100%;
+  min-width: ${(e) => h.bankRectBoxMinWidth.valuePx(e.windowSize)};
+  height: ${(e) => h.bankRectBoxHeight.valuePx(e.windowSize)};
+  background: ${(e) => e.isBankRect ? e.theme.colors.grey5 : e.theme.colors.brandColorJade};
+  border: 1px
+    ${(e) => e.isBankRect ? `dashed ${e.theme.colors.hero}` : `solid ${e.theme.colors.brandColorJade}`};
+  border-radius: ${t.sp2};
+  display: flex;
+  flex-direction: column;
+`, Le = n(I)`
+  padding: ${t.sp2};
+  margin-top: ${t.sp2};
+  border-top: 1px solid ${(e) => e.theme.colors.grey2};
+  color: ${(e) => e.theme.colors.primary};
+`, Z = n.div`
+  width: 100%;
+  height: 298px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Be = n.div`
+  width: 100%;
+  height: 42px;
+  background: ${(e) => e.theme.colors.brandColorRuby};
+  border-bottom-right-radius: ${t.sp2};
+  border-bottom-left-radius: ${t.sp2};
+  outline: 1px solid ${(e) => e.theme.colors.brandColorRuby};
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-end;
+`, De = n(z)`
+  color: ${(e) => e.theme.colors.grey5};
+  padding-right: 12px;
+  ${(e) => `${P.insuredAmountStr.style(e.windowSize)}`};
+`, We = n(I)`
+  color: ${(e) => e.theme.colors.grey5};
+  padding-right: 12px;
+`, Ee = n(z)`
+  color: ${(e) => e.theme.colors.brandColorRuby};
+  padding-right: 12px;
+  padding-top: 20px;
+  ${(e) => `${P.uninsuredAmountStr.style(e.windowSize)}`};
+`, Ge = n(I)`
+  color: ${(e) => e.theme.colors.brandColorRuby};
+  padding-right: 12px;
+`, Ze = n(N)`
+  color: ${(e) => e.theme.colors.grey5};
+  padding-right: 12px;
+  padding-top: 20px;
+`, Je = n(I)`
+  color: ${(e) => e.theme.colors.grey5};
+  padding-right: 12px;
+`, Ne = n(z)`
+  ${(e) => `${P.yAxisAmount.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+`, J = n(z)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp3};
+  ${(e) => `${P.title.style(e.windowSize)}`};
+`, Ve = n(be)`
+  width: ${(e) => h.styledLogoWidth.valuePx(e.windowSize)};
+  height: ${(e) => h.styledLogoHeight.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, s = k.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountsPromo, j = k.getLocalizedStrings().common, c = k.getLocalizedStrings().commonSetUp.businessVerification.terms, ee = ({
+  maxInsuredAmountString: e
+}) => {
+  const r = T();
+  return /* @__PURE__ */ o.jsxs(Ae, { windowSize: r, children: [
+    /* @__PURE__ */ o.jsxs(Me, { windowSize: r, children: [
+      /* @__PURE__ */ o.jsx(He, { children: /* @__PURE__ */ o.jsxs(_e, { windowSize: r, children: [
+        /* @__PURE__ */ o.jsxs(E, { children: [
+          /* @__PURE__ */ o.jsx(J, { windowSize: r, children: s.iconTexts.title }),
+          /* @__PURE__ */ o.jsxs(G, { windowSize: r, isBankRect: !0, children: [
+            /* @__PURE__ */ o.jsxs(Z, { children: [
+              /* @__PURE__ */ o.jsx(Ee, { windowSize: r, children: s.iconTexts.unInsuredAmount }),
+              /* @__PURE__ */ o.jsx(Ge, { children: s.iconTexts.unInsured })
+            ] }),
+            /* @__PURE__ */ o.jsxs(Be, { children: [
+              /* @__PURE__ */ o.jsx(De, { windowSize: r, children: s.iconTexts.insuredAmount }),
+              /* @__PURE__ */ o.jsx(We, { children: s.iconTexts.insured })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ o.jsxs(E, { children: [
+          /* @__PURE__ */ o.jsx(J, { windowSize: r, children: /* @__PURE__ */ o.jsx(Ve, { windowSize: r }) }),
+          /* @__PURE__ */ o.jsx(G, { windowSize: r, isBankRect: !1, children: /* @__PURE__ */ o.jsxs(Z, { children: [
+            /* @__PURE__ */ o.jsx(Ze, { children: e }),
+            /* @__PURE__ */ o.jsx(Je, { children: s.iconTexts.fdicCovered })
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ o.jsx(Le, { children: s.iconTexts.footNote })
+    ] }),
+    /* @__PURE__ */ o.jsx(Fe, { windowSize: r, children: s.iconTexts.yAxisAmounts.map((l, i) => /* @__PURE__ */ o.jsx(Ne, { windowSize: r, children: l }, i)) })
+  ] });
+}, Oe = ({
+  maxAnnualPercentageYield: e,
+  maxInsuredAmount: r,
+  exampleBankBalance: l
+}) => {
+  const i = T(), g = C(
+    v(r),
+    r,
+    j.currency.currencySymbol
+  ).toUpperCase();
+  let a = g;
+  return r > l && (a = C(
+    v(l),
+    l,
+    j.currency.currencySymbol
+  ).toUpperCase()), /* @__PURE__ */ o.jsxs(O, { windowSize: i, children: [
+    /* @__PURE__ */ o.jsx(ee, { maxInsuredAmountString: a }),
+    /* @__PURE__ */ o.jsxs(q, { windowSize: i, children: [
+      /* @__PURE__ */ o.jsxs(m, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(X, {}) }),
+        /* @__PURE__ */ o.jsxs(p, { children: [
+          /* @__PURE__ */ o.jsx(b, { children: s.earnUptoText.bold.replace(
+            "__rate__",
+            e.toString()
+          ) }),
+          /* @__PURE__ */ o.jsx(f, { children: s.earnUptoText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ o.jsxs(m, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(K, {}) }),
+        /* @__PURE__ */ o.jsxs(p, { children: [
+          /* @__PURE__ */ o.jsx(b, { children: s.insuranceText.bold.replace(
+            "__amount__",
+            g
+          ) }),
+          /* @__PURE__ */ o.jsx(f, { children: s.insuranceText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ o.jsxs(m, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(Y, {}) }),
+        /* @__PURE__ */ o.jsxs(p, { children: [
+          /* @__PURE__ */ o.jsx(b, { children: s.noHiddenFee.bold }),
+          /* @__PURE__ */ o.jsx(f, { children: s.noHiddenFee.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ o.jsxs(m, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(Q, {}) }),
+        /* @__PURE__ */ o.jsxs(p, { children: [
+          /* @__PURE__ */ o.jsx(b, { children: s.expertSupport.bold }),
+          /* @__PURE__ */ o.jsx(f, { children: s.expertSupport.regular })
+        ] })
+      ] })
+    ] })
+  ] });
+}, qe = ({
+  maxAnnualPercentageYield: e,
+  maxInsuredAmount: r,
+  exampleBankBalance: l
+}) => {
+  const i = T(), g = C(
+    v(r),
+    r,
+    j.currency.currencySymbol
+  ).toUpperCase();
+  let a = g;
+  return r > l && (a = C(
+    v(l),
+    l,
+    j.currency.currencySymbol
+  ).toUpperCase()), /* @__PURE__ */ o.jsxs(O, { windowSize: i, children: [
+    /* @__PURE__ */ o.jsxs(q, { windowSize: i, children: [
+      /* @__PURE__ */ o.jsxs(
+        m,
+        {
+          windowSize: i,
+          style: { width: "330px", minHeight: "83px" },
+          children: [
+            /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(X, {}) }),
+            /* @__PURE__ */ o.jsxs(p, { children: [
+              /* @__PURE__ */ o.jsx($, { children: s.earnUptoText.bold.replace(
+                "__rate__",
+                e.toString()
+              ) }),
+              /* @__PURE__ */ o.jsx(y, { children: s.earnUptoText.regular })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o.jsxs(
+        m,
+        {
+          windowSize: i,
+          style: { width: "330px", minHeight: "83px" },
+          children: [
+            /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(K, {}) }),
+            /* @__PURE__ */ o.jsxs(p, { children: [
+              /* @__PURE__ */ o.jsx($, { children: s.insuranceText.bold.replace(
+                "__amount__",
+                g
+              ) }),
+              /* @__PURE__ */ o.jsx(y, { children: s.insuranceText.regular })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o.jsxs(
+        m,
+        {
+          windowSize: i,
+          style: { width: "330px", minHeight: "83px" },
+          children: [
+            /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(Y, {}) }),
+            /* @__PURE__ */ o.jsxs(p, { children: [
+              /* @__PURE__ */ o.jsx($, { children: s.noHiddenFee.bold }),
+              /* @__PURE__ */ o.jsx(y, { children: s.noHiddenFee.regular })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o.jsxs(
+        m,
+        {
+          windowSize: i,
+          style: { width: "330px", minHeight: "83px" },
+          children: [
+            /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(Q, {}) }),
+            /* @__PURE__ */ o.jsxs(p, { children: [
+              /* @__PURE__ */ o.jsx($, { children: s.expertSupport.bold }),
+              /* @__PURE__ */ o.jsx(y, { children: s.expertSupport.regular })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o.jsx(ee, { maxInsuredAmountString: a })
+  ] });
+}, oo = ({
+  meetingUrl: e,
+  maxAnnualPercentageYield: r,
+  maxInsuredAmount: l,
+  analytics: i,
+  zeniAccountSetupView: g,
+  exampleBankBalance: a,
+  onSetupButtonClick: oe,
+  onBackClick: ne,
+  onClickMenuIcon: te,
+  onSetupZeniAccountSuccess: M
+}) => {
+  const se = ce(), d = T(), { zeniAccountTermsDetails: U } = g, H = xe(
+    U?.fetchStatus.fetchState
+  ), [re, _] = de(!1), ie = () => {
+    i.trackAccountsPromoPageClicked("Schedule Demo"), _(!0);
+  };
+  ae(() => {
+    H === "In-Progress" && U?.fetchStatus.fetchState === "Completed" && M?.();
+  }, [
+    H,
+    M,
+    U?.fetchStatus
+  ]);
+  const F = me(), le = F.loggedInUserRoleMap.deposit_accounts_user === !0 || ue(F);
+  return /* @__PURE__ */ o.jsxs(Ce, { children: [
+    /* @__PURE__ */ o.jsx(
+      pe,
+      {
+        title: s.title,
+        backgroundColor: se.colors.grey5,
+        onBackClick: ne,
+        showBackButton: !0,
+        showMenuIcon: d === "small" || d === "medium-compact",
+        onClickMenuIcon: te,
+        source: "ZeniAccountPromoPage"
+      }
+    ),
+    re === !0 ? /* @__PURE__ */ o.jsx(
+      he,
+      {
+        onCancelClick: () => {
+          _(!1);
+        },
+        meetingUrl: e
+      }
+    ) : null,
+    /* @__PURE__ */ o.jsxs(ve, { windowSize: d, children: [
+      d === "small" ? /* @__PURE__ */ o.jsxs(Re, { children: [
+        s.promoText1,
+        j.strings.colon,
+        /* @__PURE__ */ o.jsx(
+          ge,
+          {
+            style: {
+              marginTop: t.sp2
+            },
+            children: s.promoText2
+          }
+        )
+      ] }) : /* @__PURE__ */ o.jsxs(Te, { children: [
+        /* @__PURE__ */ o.jsxs(je, { children: [
+          s.promoText1,
+          j.strings.colon
+        ] }),
+        /* @__PURE__ */ o.jsx(
+          N,
+          {
+            style: {
+              marginTop: t.sp2
+            },
+            children: s.promoText2
+          }
+        )
+      ] }),
+      d === "small" || d === "medium-compact" || d === "medium-regular" ? /* @__PURE__ */ o.jsx(
+        Oe,
+        {
+          maxAnnualPercentageYield: r,
+          maxInsuredAmount: l,
+          exampleBankBalance: a
+        }
+      ) : /* @__PURE__ */ o.jsx(
+        qe,
+        {
+          maxAnnualPercentageYield: r,
+          maxInsuredAmount: l,
+          exampleBankBalance: a
+        }
+      ),
+      le ? null : /* @__PURE__ */ o.jsxs(ze, { children: [
+        /* @__PURE__ */ o.jsxs(Ie, { windowSize: d, children: [
+          /* @__PURE__ */ o.jsx(
+            L,
+            {
+              variant: "secondary",
+              label: s.scheduleDemoButton,
+              onClick: ie,
+              "data-testid": B(
+                "accounts-promo-schedule-demo-button"
+              )
+            }
+          ),
+          /* @__PURE__ */ o.jsx(Pe, { windowSize: d, children: s.orText }),
+          /* @__PURE__ */ o.jsx(
+            L,
+            {
+              variant: "primary",
+              label: s.setupAccountsButton,
+              loading: !1,
+              onClick: oe,
+              "data-testid": B(
+                "accounts-promo-setup-accounts-button"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o.jsx(Ue, { children: /* @__PURE__ */ o.jsxs(W, { children: [
+          s.terms.terms1,
+          /* @__PURE__ */ o.jsx(S, { href: c.consentUrl, linkText: c.consent }),
+          c.term2,
+          /* @__PURE__ */ o.jsx(
+            S,
+            {
+              href: c.depositUrl,
+              linkText: c.depositTerms
+            }
+          ),
+          c.term3,
+          /* @__PURE__ */ o.jsx(
+            S,
+            {
+              href: c.privacyPolicyUrl,
+              linkText: c.privacy
+            }
+          ),
+          c.term4,
+          /* @__PURE__ */ o.jsx(S, { href: c.tosUrl, linkText: c.tos }),
+          c.term5,
+          s.terms.terms3
+        ] }) }),
+        /* @__PURE__ */ o.jsx(ke, { children: /* @__PURE__ */ o.jsx(W, { children: s.disclaimer }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  oo as default
+};