@zeniai/web-components 3.16.66 → 3.16.68

package/dist/CustomerOnboardingActivationPage-DfJ_qIi2.js

@@ -0,0 +1,143 @@
+import { j as t } from "./vendor-.pnpm-DtFedGku.js";
+import { a as l, aD as d, j as g, A as p, S as i, d as x, H as u, aj as m, u as $ } from "./index-SJFqjz6R.js";
+import { useEffect as h } from "react";
+import o from "@emotion/styled";
+const f = o.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, b = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: ${i.sp0} 20px;
+  width: 240px;
+  box-sizing: border-box;
+  position: fixed;
+  justify-content: space-between;
+  height: 100%;
+  z-index: 4;
+  background: ${(e) => e.theme.colors.background};
+`, j = o(x)`
+  margin: 20px 12px ${i.sp0} ${i.sp0};
+  height: ${i.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, v = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding-right: 240px;
+  width: calc(100% - 240px);
+  box-sizing: border-box;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  left: 240px;
+  background: ${(e) => e.theme.colors.background};
+`, y = o(u)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${i.sp1};
+  padding: ${i.sp0} ${i.sp3};
+  text-align: center;
+`, w = o(m)`
+  color: ${(e) => e.theme.colors.hero};
+  padding: ${i.sp0} ${i.sp3};
+  text-align: center;
+`, k = o.div`
+  margin-top: ${i.sp3};
+`, z = ({
+  dashboardFetchState: e,
+  onZeniLogoClick: s,
+  onDashboardFetchDone: n
+}) => {
+  const { title: a, subTitle: c } = l.getLocalizedStrings().customerOnboardingPage.thankYou, r = d(e);
+  return h(() => {
+    r === "In-Progress" && e !== "In-Progress" && n();
+  }, [e, r, n]), /* @__PURE__ */ t.jsxs(f, { children: [
+    /* @__PURE__ */ t.jsx(b, { children: /* @__PURE__ */ t.jsx(
+      j,
+      {
+        "data-testid": g(
+          "zeni-logo-customer-onboarding-activation-page"
+        ),
+        onClick: s
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs(v, { children: [
+      /* @__PURE__ */ t.jsx(y, { children: a }),
+      /* @__PURE__ */ t.jsx(w, { children: c }),
+      /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(p, { size: "Large", start: !0 }) })
+    ] })
+  ] });
+}, C = o.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+`, S = o.div`
+  width: 100%;
+  position: absolute;
+`, P = o.div`
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  justify-content: center;
+  padding: ${i.sp0} ${i.sp3};
+  min-height: ${i.sp8};
+`, T = o(x)`
+  height: ${i.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, L = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  padding: ${i.sp0} ${i.sp3};
+`, A = o(u)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${i.sp1};
+  text-align: center;
+  width: 100%;
+`, I = o(m)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+  width: 100%;
+`, O = o.div`
+  margin-top: ${i.sp3};
+`, Y = ({
+  dashboardFetchState: e,
+  onZeniLogoClick: s,
+  onDashboardFetchDone: n
+}) => {
+  const { title: a, subTitle: c } = l.getLocalizedStrings().customerOnboardingPage.thankYou, r = d(e);
+  return h(() => {
+    r === "In-Progress" && e !== "In-Progress" && n();
+  }, [e, r, n]), /* @__PURE__ */ t.jsxs(C, { children: [
+    /* @__PURE__ */ t.jsx(S, { children: /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsx(
+      T,
+      {
+        "data-testid": g(
+          "zeni-logo-customer-onboarding-activation-page"
+        ),
+        onClick: s
+      }
+    ) }) }),
+    /* @__PURE__ */ t.jsxs(L, { children: [
+      /* @__PURE__ */ t.jsx(A, { children: a }),
+      /* @__PURE__ */ t.jsx(I, { children: c }),
+      /* @__PURE__ */ t.jsx(O, { children: /* @__PURE__ */ t.jsx(p, { size: "Large", start: !0 }) })
+    ] })
+  ] });
+}, D = (e) => $() === "small" ? /* @__PURE__ */ t.jsx(Y, { ...e }) : /* @__PURE__ */ t.jsx(z, { ...e });
+export {
+  D as default
+};

package/dist/CustomerOnboardingContainerPage-CGGqCdyA.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-CT-Z_-kn.cjs"),r=require("./CustomerOnboardingNoStepsPage-Dio5_XxX.cjs"),n=require("./CustomerOnboardingPage-B0_m3T9x.cjs"),o=e=>e.currentTenant?.productSettings.isOtherProductsEnabled===!0?t.jsxRuntimeExports.jsx(r.default,{...e}):t.jsxRuntimeExports.jsx(n.default,{...e});exports.default=o;

package/dist/CustomerOnboardingContainerPage-_WCQErEk.js

@@ -0,0 +1,7 @@
+import { j as r } from "./vendor-.pnpm-DtFedGku.js";
+import e from "./CustomerOnboardingNoStepsPage-CNsqlVBJ.js";
+import o from "./CustomerOnboardingPage-CpE0YXvi.js";
+const i = (t) => t.currentTenant?.productSettings.isOtherProductsEnabled === !0 ? /* @__PURE__ */ r.jsx(e, { ...t }) : /* @__PURE__ */ r.jsx(o, { ...t });
+export {
+  i as default
+};

package/dist/CustomerOnboardingDetailPageSkeleton-BEzdg7FT.js

@@ -0,0 +1,434 @@
+import { u as f, j as i, r as P, q as T } from "./vendor-.pnpm-DtFedGku.js";
+import r from "@emotion/styled";
+import { S as t, C as x, j as v, ai as I, hQ as L, ax as H, E as W, a as N, aJ as m, l as B, d as E, u as O, D as F, R as $ } from "./index-SJFqjz6R.js";
+import C from "react";
+const _ = r(T)`
+  /* Size is controlled by styles.root prop */
+`, J = r.div`
+  position: relative;
+  width: ${t.sp3};
+  height: ${t.sp3};
+  border-radius: 50%;
+  background-color: ${x.brandColorJadeLight};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    border: 2px solid ${({ theme: e }) => e.colors.grey2};
+    pointer-events: none;
+    z-index: 1;
+  }
+`, U = ({
+  valueEnd: e,
+  valueStart: s,
+  children: o
+}) => {
+  const [n, l] = C.useState(s);
+  return C.useEffect(() => {
+    const a = setTimeout(() => {
+      l(e);
+    }, 100);
+    return () => clearTimeout(a);
+  }, [e]), /* @__PURE__ */ i.jsx(i.Fragment, { children: o(n) });
+}, Z = ({ valueEnd: e = 50 }) => {
+  const s = f();
+  return /* @__PURE__ */ i.jsx(U, { valueStart: 0, valueEnd: e, children: (o) => /* @__PURE__ */ i.jsx(J, { theme: s, children: /* @__PURE__ */ i.jsx(
+    _,
+    {
+      value: o,
+      strokeWidth: 50,
+      circleRatio: 1,
+      styles: {
+        ...P({
+          pathColor: x.success,
+          trailColor: "transparent",
+          pathTransitionDuration: 1.5,
+          rotation: 1,
+          strokeLinecap: "butt"
+        }),
+        root: {
+          width: t.sp3,
+          height: t.sp3,
+          position: "relative",
+          zIndex: 2,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      }
+    }
+  ) }) });
+}, w = ({
+  isActive: e,
+  isCompleted: s,
+  isDisabled: o,
+  isError: n,
+  isHalfCompleted: l,
+  theme: a
+}) => e || s || l || n ? n ? x.runwayRed : a.colors.primary : o ? a.colors.grey1 : a.colors.hero, j = ({
+  isActive: e,
+  isCompleted: s,
+  isDisabled: o,
+  isHalfCompleted: n,
+  theme: l
+}) => e || s || n ? l.colors.primary : o ? l.colors.grey1 : l.colors.hero, q = r.div`
+  width: 100%;
+  display: flex;
+  background: ${(e) => e.isActive ? e.theme.colors.grey5 : null};
+  transition: background-color 0.2s ease-in;
+  box-shadow: ${(e) => e.isActive ? `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}` : null};
+  border-radius: ${t.sp2};
+  padding: ${t.sp3};
+  cursor: ${(e) => e.isDisabled ? "no-drop" : "pointer"};
+  box-sizing: border-box;
+  &:hover {
+    background: ${(e) => {
+  const s = e.isCompleted || e.isHalfCompleted;
+  return e.isActive ? e.theme.colors.grey3 : s && e.isDisabled === !1 ? e.theme.colors.grey5 : "initial";
+}};
+    .step-content-title {
+      color: ${(e) => w({
+  isActive: e.isActive,
+  isCompleted: e.isCompleted,
+  isDisabled: e.isDisabled,
+  isError: e.isError,
+  isHalfCompleted: e.isHalfCompleted,
+  theme: e.theme
+})};
+    }
+    .step-content-subtitle {
+      color: ${(e) => j({
+  isActive: e.isActive,
+  isCompleted: e.isCompleted,
+  isDisabled: e.isDisabled,
+  isHalfCompleted: e.isHalfCompleted,
+  theme: e.theme
+})};
+    }
+  }
+`, M = r.div`
+  margin-right: ${t.sp2};
+  margin-top: 2px;
+`, Q = r(L)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${x.success};
+`, V = r(I)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${x.runwayRed};
+`, G = r.div`
+  height: ${t.sp3};
+  width: ${t.sp3};
+  border: 1px solid
+    ${(e) => e.isActive ? e.theme.colors.primary : e.disabledStep ? e.theme.colors.grey2 : e.theme.colors.hero};
+  border-radius: 50%;
+`, K = r.div`
+  display: flex;
+  flex-direction: column;
+`, X = r(H)`
+  color: ${(e) => w({
+  isActive: e.isActive,
+  isCompleted: e.isCompleted,
+  isDisabled: e.disabledStep,
+  isError: e.isError,
+  isHalfCompleted: e.isHalfCompleted,
+  theme: e.theme
+})};
+`, Y = r(W)`
+  color: ${(e) => j({
+  isActive: e.isActive,
+  isCompleted: e.isCompleted,
+  isDisabled: e.disabledStep,
+  isHalfCompleted: e.isHalfCompleted,
+  theme: e.theme
+})};
+`;
+function ee({
+  onboardingStep: e,
+  isActive: s,
+  isCompleted: o,
+  isHalfCompleted: n,
+  isDisabled: l,
+  isError: a,
+  stepText: h,
+  stepSubText: g,
+  onUpdateStep: p,
+  setIsStepClicked: c,
+  disabledSteps: d
+}) {
+  const u = l || d.includes(e) && s === !1;
+  return /* @__PURE__ */ i.jsxs(
+    q,
+    {
+      isActive: s,
+      isDisabled: u,
+      isCompleted: o,
+      isHalfCompleted: n,
+      isError: a,
+      onClick: l === !1 ? () => {
+        d.includes(e) && s === !1 || (c(!0), p(e));
+      } : void 0,
+      "data-testid": v("step-box", e),
+      children: [
+        /* @__PURE__ */ i.jsx(M, { children: a ? /* @__PURE__ */ i.jsx(V, {}) : n ? /* @__PURE__ */ i.jsx(Z, {}) : o ? /* @__PURE__ */ i.jsx(Q, {}) : /* @__PURE__ */ i.jsx(
+          G,
+          {
+            isActive: s,
+            disabledStep: u
+          }
+        ) }),
+        /* @__PURE__ */ i.jsxs(K, { children: [
+          /* @__PURE__ */ i.jsx(
+            X,
+            {
+              className: "step-content-title",
+              isActive: s,
+              isCompleted: o,
+              isHalfCompleted: n,
+              disabledStep: u,
+              isError: a,
+              children: h
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            Y,
+            {
+              className: "step-content-subtitle",
+              isActive: s,
+              isCompleted: o,
+              isHalfCompleted: n,
+              disabledStep: u,
+              children: g
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const te = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  margin-top: 84px;
+  flex-direction: column;
+  justify-content: start;
+  gap: ${t.sp6};
+  width: 198px;
+`, ie = r.div`
+  width: 100%;
+`;
+function se({
+  allSteps: e,
+  completedSteps: s,
+  halfCompletedSteps: o,
+  errorSteps: n,
+  currentStep: l,
+  isDisabled: a,
+  onUpdateStep: h,
+  setIsStepClicked: g,
+  disabledSteps: p
+}) {
+  const c = N.getLocalizedStrings().customerOnboardingPage.steps;
+  return /* @__PURE__ */ i.jsx(te, { children: e.map((d) => /* @__PURE__ */ i.jsx(ie, { children: /* @__PURE__ */ i.jsx(
+    ee,
+    {
+      isActive: d === l,
+      isCompleted: s.includes(d),
+      isHalfCompleted: o.includes(d),
+      isError: n.includes(d),
+      isDisabled: a,
+      onboardingStep: d,
+      stepText: c[d].stepText,
+      stepSubText: c[d].stepSubText,
+      onUpdateStep: h,
+      setIsStepClicked: g,
+      disabledSteps: p
+    }
+  ) }, d)) });
+}
+const oe = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  margin-top: 84px;
+  flex-direction: column;
+  justify-content: start;
+  gap: ${t.sp6};
+  width: 198px;
+`, re = r.div`
+  height: 89px; // As per figma specs
+  border-radius: ${t.sp2};
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+`, ne = () => {
+  const e = f();
+  return /* @__PURE__ */ i.jsx(oe, { children: [...Array(2)].map((s, o) => /* @__PURE__ */ i.jsx(re, { children: /* @__PURE__ */ i.jsx(
+    m,
+    {
+      width: 198,
+      height: 89,
+      backgroundColor: e.colors.grey3,
+      style: { borderRadius: t.sp2 }
+    }
+  ) }, o)) });
+}, b = 240, le = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: ${t.sp0} 20px;
+  width: ${b}px;
+  box-sizing: border-box;
+  position: fixed;
+  height: 100%;
+  z-index: 4;
+  background: ${(e) => e.theme.colors.background};
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  ${(e) => e.theme.breakpoints.down("md")} {
+    display: none;
+  }
+  border-right: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+`, ae = r.div`
+  margin: ${t.sp0} ${t.sp0} ${t.sp3} ${t.sp0};
+  width: fit-content;
+`, de = r(E)`
+  margin: 20px 12px ${t.sp0} 12px;
+  height: ${t.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+  flex-shrink: 0;
+`, be = (e) => {
+  const {
+    isOnAddressPage: s,
+    allSteps: o,
+    completedSteps: n,
+    halfCompletedSteps: l,
+    errorSteps: a,
+    currentStep: h,
+    signedInUser: g,
+    currentTenant: p,
+    fetchStatus: c,
+    onUpdateStep: d,
+    onZeniLogoClick: u,
+    handleLogOutClick: k,
+    handleCockpitClick: A,
+    setIsStepClicked: D
+  } = e, R = c.fetchState === "In-Progress" || c.fetchState === "Not-Started", z = [];
+  return /* @__PURE__ */ i.jsxs(le, { children: [
+    /* @__PURE__ */ i.jsx(
+      de,
+      {
+        "data-testid": v("zeni-logo-customer-onboarding-drawer"),
+        onClick: u
+      }
+    ),
+    R ? /* @__PURE__ */ i.jsx(ne, {}) : /* @__PURE__ */ i.jsx(
+      se,
+      {
+        allSteps: o,
+        isDisabled: s,
+        disabledSteps: z,
+        completedSteps: n,
+        halfCompletedSteps: l,
+        errorSteps: a,
+        currentStep: h,
+        onUpdateStep: d,
+        setIsStepClicked: D
+      }
+    ),
+    /* @__PURE__ */ i.jsx(ae, { children: /* @__PURE__ */ i.jsx(
+      B,
+      {
+        signedInUser: g,
+        currentTenant: p,
+        onLogOutClick: k,
+        onCockpitClick: A
+      }
+    ) })
+  ] });
+}, S = {
+  titleRectangleWidth: new $(250, 500, 550, 600),
+  subTitleRectangleWidth: new $(343, 600, 700, 800)
+}, ce = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  min-width: ${(e) => e.isNoStepsPage ? "100%" : `calc(100% - ${b}px)`};
+  padding-left: ${(e) => e.isNoStepsPage ? t.sp0 : `${b}px`};
+  flex: 1;
+
+  ${(e) => e.theme.breakpoints.down("md")} {
+    width: 100%;
+    padding-left: ${t.sp0};
+  }
+`, he = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  min-height: 100vh;
+  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/signin-background-${e.windowSize === "small" ? "m" : "w"}-${e.theme.mode === "dark" ? "d" : "l"}.svg)`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  background-size: inherit;
+  background-attachment: fixed;
+  background-position: ${(e) => e.windowSize === "small" ? "center center" : "right center"};
+  background-repeat: no-repeat;
+
+  ${(e) => e.theme.breakpoints.down("lg")} {
+    background-size: cover;
+  }
+`, ue = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${t.sp3};
+  margin-top: 94px; // As per Figma Specs - Nav Bar Height + 32 px
+`, y = r.div`
+  border-radius: ${t.sp2};
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+`, fe = ({
+  isNoStepsPage: e = !1
+}) => {
+  const s = f(), o = O();
+  return /* @__PURE__ */ i.jsx(ce, { isNoStepsPage: e, children: /* @__PURE__ */ i.jsx(he, { windowSize: o, children: /* @__PURE__ */ i.jsxs(ue, { children: [
+    /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(
+      m,
+      {
+        width: S.titleRectangleWidth.value(o),
+        height: F[6],
+        backgroundColor: s.colors.grey3,
+        style: { borderRadius: t.sp2 }
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(
+      m,
+      {
+        width: S.subTitleRectangleWidth.value(o),
+        height: 27,
+        backgroundColor: s.colors.grey3,
+        style: { borderRadius: t.sp2 }
+      }
+    ) })
+  ] }) }) });
+};
+export {
+  be as C,
+  b as D,
+  fe as a
+};