@zeniai/web-components 3.16.31 → 3.16.32

package/dist/ChaseOverlay-DY7W-VhR.js

@@ -0,0 +1,402 @@
+import { j as t, C as K } from "./vendor-.pnpm-DxbX2tX4.js";
+import { useState as y, useEffect as Q } from "react";
+import i from "@emotion/styled";
+import { u as Y, fR as Z, hU as ee, a as te, C as h, B as M, j as d, S as s, R as m, V as oe, p as se, y as ie, M as ne, gf as re, D as a, o as W, ba as U, a1 as ae, fX as ce, G as le, w as de, W as pe } from "./index-Cynhe4j_.js";
+const g = {
+  width: new m(350, 624, 624),
+  height: new m(600, 730, 730),
+  paddingLeft: new m(a[4], a[8], a[8]),
+  paddingRight: new m(a[4], a[7], a[7])
+};
+function Ae(e) {
+  const l = Y(), [, V] = Z(), { isMobileOrTabletScreen: x } = ee(), [$, C] = y(!0), [j, b] = y(!0), [k, T] = y(!1), [I, P] = y(!1), n = te.getLocalizedStrings().commonSetUp.chaseOverlay, _ = n.title, E = n.description, F = () => {
+    window.open(n.chaseVideoUrl, "_blank");
+  }, L = [0, 1, 2, 3], z = (o) => o < L.length - 1, D = (o, r) => {
+    V(o ?? ""), r ? C(!1) : b(!1);
+  }, R = (o) => {
+    o ? T(!0) : P(!0);
+  }, B = (o) => {
+    o ? T(!1) : P(!1);
+  };
+  Q(() => {
+    $ === !1 && setTimeout(() => {
+      C(!0);
+    }, 2e3), j === !1 && setTimeout(() => {
+      b(!0);
+    }, 2e3);
+  }, [$, j]);
+  const H = () => {
+    const o = n.step1;
+    return /* @__PURE__ */ t.jsxs(u, { children: [
+      /* @__PURE__ */ t.jsx(
+        Ie,
+        {
+          "data-testid": d("chase-overlay-signin-link"),
+          href: n.chaseSigninUrl,
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: o.text1
+        }
+      ),
+      o.text2,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        o.text3
+      ] }),
+      o.text4,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        o.text5
+      ] }),
+      o.text6
+    ] });
+  }, G = () => {
+    const o = n.step2;
+    return /* @__PURE__ */ t.jsxs(u, { children: [
+      o.text1,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        /* @__PURE__ */ t.jsx(Ce, {}),
+        o.text2
+      ] }),
+      /* @__PURE__ */ t.jsx(be, {}),
+      o.text3
+    ] });
+  }, X = () => {
+    const o = n.step3, r = e.connectedAccountProvider === "stripe" ? o.payeeIdStripe : o.payeeIdUnit;
+    return /* @__PURE__ */ t.jsxs(u, { children: [
+      o.text1,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        o.text2
+      ] }),
+      o.text3,
+      /* @__PURE__ */ t.jsxs(Pe, { children: [
+        /* @__PURE__ */ t.jsxs(
+          f,
+          {
+            onClick: () => D(r, !0),
+            onMouseOver: () => R(!0),
+            onMouseLeave: () => B(!0),
+            "data-testid": d("copy-payee-id", r),
+            children: [
+              /* @__PURE__ */ t.jsx(S, {}),
+              o.payeeIdTitle,
+              /* @__PURE__ */ t.jsx(v, { children: r }),
+              $ ? /* @__PURE__ */ t.jsxs(p, { children: [
+                /* @__PURE__ */ t.jsx(
+                  O,
+                  {
+                    showCopyText: k && !x,
+                    windowSize: l,
+                    children: /* @__PURE__ */ t.jsx(N, {})
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  w,
+                  {
+                    shouldDisplay: k && !x,
+                    children: o.copy
+                  }
+                )
+              ] }) : /* @__PURE__ */ t.jsxs(p, { children: [
+                /* @__PURE__ */ t.jsx(A, {}),
+                /* @__PURE__ */ t.jsx(w, { children: o.copied })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(
+          f,
+          {
+            onClick: () => D(o.payeeName, !1),
+            onMouseOver: () => R(!1),
+            onMouseLeave: () => B(!1),
+            "data-testid": d(
+              "copy-payee-name",
+              o.payeeName
+            ),
+            children: [
+              /* @__PURE__ */ t.jsx(S, {}),
+              o.payeeNameTitle,
+              /* @__PURE__ */ t.jsx(v, { children: o.payeeName }),
+              j ? /* @__PURE__ */ t.jsxs(p, { children: [
+                /* @__PURE__ */ t.jsx(
+                  O,
+                  {
+                    showCopyText: I && !x,
+                    windowSize: l,
+                    children: /* @__PURE__ */ t.jsx(N, {})
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  w,
+                  {
+                    shouldDisplay: I && !x,
+                    children: o.copy
+                  }
+                )
+              ] }) : /* @__PURE__ */ t.jsxs(p, { children: [
+                /* @__PURE__ */ t.jsx(A, {}),
+                /* @__PURE__ */ t.jsx(w, { children: o.copied })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(f, { children: [
+          /* @__PURE__ */ t.jsx(p, { children: /* @__PURE__ */ t.jsx(S, {}) }),
+          /* @__PURE__ */ t.jsxs(Le, { children: [
+            o.amountLimitTitle,
+            o.text4,
+            /* @__PURE__ */ t.jsx(v, { children: o.amountLimit }),
+            o.text5
+          ] })
+        ] })
+      ] })
+    ] });
+  }, q = () => {
+    const o = n.step4;
+    return /* @__PURE__ */ t.jsxs(u, { children: [
+      o.text1,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        o.text2
+      ] }),
+      o.text3,
+      /* @__PURE__ */ t.jsxs(c, { children: [
+        " ",
+        o.text4
+      ] })
+    ] });
+  }, J = (o) => {
+    switch (o) {
+      case 0:
+        return /* @__PURE__ */ t.jsx(H, {});
+      case 1:
+        return /* @__PURE__ */ t.jsx(G, {});
+      case 2:
+        return /* @__PURE__ */ t.jsx(X, {});
+      default:
+        return /* @__PURE__ */ t.jsx(q, {});
+    }
+  };
+  return /* @__PURE__ */ t.jsx(
+    he,
+    {
+      windowSize: l,
+      role: "presentation",
+      style: { background: h.overlayDark, ...e.style },
+      children: /* @__PURE__ */ t.jsx(K, { onClickAway: () => e.action.onBackClick?.(), children: /* @__PURE__ */ t.jsxs(xe, { windowSize: l, isEditPopup: !1, children: [
+        /* @__PURE__ */ t.jsxs(ze, { children: [
+          /* @__PURE__ */ t.jsx(ye, { children: _ }),
+          /* @__PURE__ */ t.jsx(me, { children: E }),
+          /* @__PURE__ */ t.jsx(je, { children: n.stepsTitle }),
+          /* @__PURE__ */ t.jsx(ue, { windowSize: l, children: L.map((o, r) => /* @__PURE__ */ t.jsxs(ge, { children: [
+            /* @__PURE__ */ t.jsx(Se, { children: z(r) ? r + 1 : /* @__PURE__ */ t.jsx(ke, {}) }),
+            /* @__PURE__ */ t.jsx(ve, { children: J(r) }),
+            z(r) && /* @__PURE__ */ t.jsx(fe, {})
+          ] }, `step_${r}`)) })
+        ] }),
+        /* @__PURE__ */ t.jsx(we, {}),
+        /* @__PURE__ */ t.jsxs($e, { children: [
+          /* @__PURE__ */ t.jsx(
+            M,
+            {
+              variant: "secondary",
+              label: n.primaryButtonText,
+              onClick: F,
+              style: { width: 134, whiteSpace: "nowrap" },
+              "data-testid": d(
+                "chase-overlay-watch-video-button"
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Te, {}),
+          /* @__PURE__ */ t.jsx(
+            M,
+            {
+              variant: e.proceedButtonVariant ?? "primary",
+              label: n.secondaryButtonText,
+              onClick: e.action.onBackClick,
+              style: { width: 134, whiteSpace: "nowrap" },
+              "data-testid": d("chase-overlay-proceed-button")
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+const he = i.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${h.overlayDark};
+  overflow: scroll;
+`, xe = i.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${s.sp2};
+  position: relative;
+  top: ${(e) => e.windowSize !== "small" ? "8%" : "0"};
+  width: ${(e) => g.width.valuePx(e.windowSize)};
+  height: ${(e) => e.windowSize !== "small" ? g.height.valuePx(e.windowSize) : "100%"};
+  padding-left: ${(e) => g.paddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => g.paddingRight.valuePx(e.windowSize)};
+`, ye = i(oe)`
+  margin-top: ${s.sp7};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+  text-align: center;
+`, me = i(se)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-bottom: 30px;
+  margin-top: ${s.sp3};
+  white-space: pre-line;
+  text-align: center;
+`, ge = i.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+`, ue = i.div`
+  width: 100%;
+  margin-top: ${s.sp4};
+`, we = i.div`
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: ${s.sp10};
+  background-color: ${(e) => e.theme.colors.grey3};
+`, $e = i.div`
+  display: flex;
+  padding-bottom: ${s.sp3};
+  padding-top: ${s.sp3};
+  position: absolute;
+  bottom: 0;
+  z-index: 2;
+`, je = i(ie)`
+  text-align: left;
+  width: 100%;
+`, fe = i.div`
+  top: ${s.sp2};
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  left: ${s.sp3};
+  width: 2px;
+  background: ${(e) => e.theme.colors.grey2};
+`, Se = i.div`
+  width: ${s.sp5};
+  height: ${s.sp5};
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: 50%;
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${ne.bold};
+  color: ${(e) => e.theme.colors.hero};
+`, f = i.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+`, ve = i.div`
+  padding-bottom: ${s.sp4};
+  margin-left: ${s.sp6};
+`, u = i(W)`
+  color: ${(e) => e.theme.colors.hero};
+`, Ce = i(de)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  vertical-align: middle;
+`, be = i(pe)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  margin-left: ${s.sp1};
+  margin-right: ${s.sp1};
+  vertical-align: middle;
+`, ke = i(re)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+`, S = i(U)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  vertical-align: middle;
+  margin-right: ${s.sp2};
+  color: ${h.success};
+`, N = i(ce)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, A = i(U)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  color: ${h.success};
+`, p = i.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+  align-self: flex-start;
+  margin-top: ${s.sp2};
+`, O = i.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.showCopyText ? e.theme.colors.primary : e.theme.colors.grey1};
+`, w = i(le)`
+  position: absolute;
+  left: ${s.sp4};
+  display: ${(e) => e.shouldDisplay === !1 ? "none" : "inline-flex"};
+  padding: 2px ${s.sp2};
+  justify-content: center;
+  align-items: center;
+  border-radius: ${s.sp1};
+  background: ${h.overlayDark};
+  color: ${(e) => e.theme.colors.grey1};
+`, Te = i.div`
+  width: ${s.sp4};
+`, Ie = i.a`
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: underline;
+  text-decoration-color: ${(e) => e.theme.colors.grey2};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    text-decoration-color: ${(e) => e.theme.colors.primary};
+  }
+`, c = i(W)`
+  color: ${(e) => e.theme.colors.primary};
+  border-radius: ${s.sp1};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background: ${(e) => e.theme.colors.background};
+  padding: 2px ${s.sp1};
+  align-items: center;
+  justify-content: center;
+`, v = i(ae)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-left: ${s.sp1};
+  margin-right: ${s.sp1};
+`, Pe = i.div`
+  display: flex;
+  flex-direction: column;
+`, Le = i.div``, ze = i.div`
+  margin-bottom: 74px;
+  overflow: scroll;
+`;
+export {
+  Ae as C
+};