@zeniai/web-components 3.17.6 → 3.17.7

package/dist/CustomerOnboardingDetailPageSkeleton-B2RZCaMW.js

@@ -0,0 +1,434 @@
+import { u as f, j as i, r as P, q as T } from "./vendor-.pnpm-B2klaOGU.js";
+import r from "@emotion/styled";
+import { S as t, C as m, e as v, ap as I, i0 as L, ay as H, E as W, a as N, aI as x, L as B, j as E, u as O, D as F, R as $ } from "./index-CH2cBxe4.js";
+import C from "react";
+const _ = r(T)`
+  /* Size is controlled by styles.root prop */
+`, U = r.div`
+  position: relative;
+  width: ${t.sp3};
+  height: ${t.sp3};
+  border-radius: 50%;
+  background-color: ${m.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;
+  }
+`, Z = ({
+  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) });
+}, q = ({ valueEnd: e = 50 }) => {
+  const s = f();
+  return /* @__PURE__ */ i.jsx(Z, { valueStart: 0, valueEnd: e, children: (o) => /* @__PURE__ */ i.jsx(U, { theme: s, children: /* @__PURE__ */ i.jsx(
+    _,
+    {
+      value: o,
+      strokeWidth: 50,
+      circleRatio: 1,
+      styles: {
+        ...P({
+          pathColor: m.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 ? m.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, J = 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;
+`, V = r(L)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${m.success};
+`, G = r(I)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${m.runwayRed};
+`, K = 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%;
+`, Q = 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(
+    J,
+    {
+      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(G, {}) : n ? /* @__PURE__ */ i.jsx(q, {}) : o ? /* @__PURE__ */ i.jsx(V, {}) : /* @__PURE__ */ i.jsx(
+          K,
+          {
+            isActive: s,
+            disabledStep: u
+          }
+        ) }),
+        /* @__PURE__ */ i.jsxs(Q, { 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(
+    x,
+    {
+      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(
+      x,
+      {
+        width: S.titleRectangleWidth.value(o),
+        height: F[6],
+        backgroundColor: s.colors.grey3,
+        style: { borderRadius: t.sp2 }
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(
+      x,
+      {
+        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
+};

package/dist/CustomerOnboardingDetailPageSkeleton-Bre8sOgU.cjs

@@ -0,0 +1,162 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),r=require("@emotion/styled"),t=require("./index-DxfP_W_n.cjs"),h=require("react"),w=r(s.CircularProgressbar)`
+  /* Size is controlled by styles.root prop */
+`,E=r.div`
+  position: relative;
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  border-radius: 50%;
+  background-color: ${t.Colors.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;
+  }
+`,k=({valueEnd:e,valueStart:o,children:i})=>{const[n,a]=h.useState(o);return h.useEffect(()=>{const c=setTimeout(()=>{a(e)},100);return()=>clearTimeout(c)},[e]),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:i(n)})},A=({valueEnd:e=50})=>{const o=s.useTheme();return s.jsxRuntimeExports.jsx(k,{valueStart:0,valueEnd:e,children:i=>s.jsxRuntimeExports.jsx(E,{theme:o,children:s.jsxRuntimeExports.jsx(w,{value:i,strokeWidth:50,circleRatio:1,styles:{...s.buildStyles({pathColor:t.Colors.success,trailColor:"transparent",pathTransitionDuration:1.5,rotation:1,strokeLinecap:"butt"}),root:{width:t.Space.sp3,height:t.Space.sp3,position:"relative",zIndex:2,display:"flex",alignItems:"center",justifyContent:"center"}}})})})},j=({isActive:e,isCompleted:o,isDisabled:i,isError:n,isHalfCompleted:a,theme:c})=>e||o||a||n?n?t.Colors.runwayRed:c.colors.primary:i?c.colors.grey1:c.colors.hero,C=({isActive:e,isCompleted:o,isDisabled:i,isHalfCompleted:n,theme:a})=>e||o||n?a.colors.primary:i?a.colors.grey1:a.colors.hero,D=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.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`:null};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp3};
+  cursor: ${e=>e.isDisabled?"no-drop":"pointer"};
+  box-sizing: border-box;
+  &:hover {
+    background: ${e=>{const o=e.isCompleted||e.isHalfCompleted;return e.isActive?e.theme.colors.grey3:o&&e.isDisabled===!1?e.theme.colors.grey5:"initial"}};
+    .step-content-title {
+      color: ${e=>j({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.isDisabled,isError:e.isError,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
+    }
+    .step-content-subtitle {
+      color: ${e=>C({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.isDisabled,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
+    }
+  }
+`,z=r.div`
+  margin-right: ${t.Space.sp2};
+  margin-top: 2px;
+`,T=r(t.SvgSuccessRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`,P=r(t.SvgHighImportanceFilled)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.runwayRed};
+`,I=r.div`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  border: 1px solid
+    ${e=>e.isActive?e.theme.colors.primary:e.disabledStep?e.theme.colors.grey2:e.theme.colors.hero};
+  border-radius: 50%;
+`,L=r.div`
+  display: flex;
+  flex-direction: column;
+`,H=r(t.SmallMedium)`
+  color: ${e=>j({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.disabledStep,isError:e.isError,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
+`,W=r(t.ExtraSmallRegular)`
+  color: ${e=>C({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.disabledStep,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
+`;function N({onboardingStep:e,isActive:o,isCompleted:i,isHalfCompleted:n,isDisabled:a,isError:c,stepText:p,stepSubText:u,onUpdateStep:m,setIsStepClicked:d,disabledSteps:l}){const x=a||l.includes(e)&&o===!1;return s.jsxRuntimeExports.jsxs(D,{isActive:o,isDisabled:x,isCompleted:i,isHalfCompleted:n,isError:c,onClick:a===!1?()=>{l.includes(e)&&o===!1||(d(!0),m(e))}:void 0,"data-testid":t.generateDataTestId("step-box",e),children:[s.jsxRuntimeExports.jsx(z,{children:c?s.jsxRuntimeExports.jsx(P,{}):n?s.jsxRuntimeExports.jsx(A,{}):i?s.jsxRuntimeExports.jsx(T,{}):s.jsxRuntimeExports.jsx(I,{isActive:o,disabledStep:x})}),s.jsxRuntimeExports.jsxs(L,{children:[s.jsxRuntimeExports.jsx(H,{className:"step-content-title",isActive:o,isCompleted:i,isHalfCompleted:n,disabledStep:x,isError:c,children:p}),s.jsxRuntimeExports.jsx(W,{className:"step-content-subtitle",isActive:o,isCompleted:i,isHalfCompleted:n,disabledStep:x,children:u})]})]})}const O=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  margin-top: 84px;
+  flex-direction: column;
+  justify-content: start;
+  gap: ${t.Space.sp6};
+  width: 198px;
+`,B=r.div`
+  width: 100%;
+`;function _({allSteps:e,completedSteps:o,halfCompletedSteps:i,errorSteps:n,currentStep:a,isDisabled:c,onUpdateStep:p,setIsStepClicked:u,disabledSteps:m}){const d=t.appLocale.getLocalizedStrings().customerOnboardingPage.steps;return s.jsxRuntimeExports.jsx(O,{children:e.map(l=>s.jsxRuntimeExports.jsx(B,{children:s.jsxRuntimeExports.jsx(N,{isActive:l===a,isCompleted:o.includes(l),isHalfCompleted:i.includes(l),isError:n.includes(l),isDisabled:c,onboardingStep:l,stepText:d[l].stepText,stepSubText:d[l].stepSubText,onUpdateStep:p,setIsStepClicked:u,disabledSteps:m})},l))})}const q=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  margin-top: 84px;
+  flex-direction: column;
+  justify-content: start;
+  gap: ${t.Space.sp6};
+  width: 198px;
+`,F=r.div`
+  height: 89px; // As per figma specs
+  border-radius: ${t.Space.sp2};
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+`,U=()=>{const e=s.useTheme();return s.jsxRuntimeExports.jsx(q,{children:[...Array(2)].map((o,i)=>s.jsxRuntimeExports.jsx(F,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:198,height:89,backgroundColor:e.colors.grey3,style:{borderRadius:t.Space.sp2}})},i))})},g=240,Z=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: ${t.Space.sp0} 20px;
+  width: ${g}px;
+  box-sizing: border-box;
+  position: fixed;
+  height: 100%;
+  z-index: 4;
+  background: ${e=>e.theme.colors.background};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  ${e=>e.theme.breakpoints.down("md")} {
+    display: none;
+  }
+  border-right: ${e=>`1px solid ${e.theme.colors.grey3}`};
+`,J=r.div`
+  margin: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp3} ${t.Space.sp0};
+  width: fit-content;
+`,M=r(t.SvgZeniLogoFull)`
+  margin: 20px 12px ${t.Space.sp0} 12px;
+  height: ${t.Space.sp4};
+  width: 102px;
+  color: ${e=>e.theme.colors.primary};
+  cursor: pointer;
+  flex-shrink: 0;
+`,V=e=>{const{isOnAddressPage:o,allSteps:i,completedSteps:n,halfCompletedSteps:a,errorSteps:c,currentStep:p,signedInUser:u,currentTenant:m,fetchStatus:d,onUpdateStep:l,onZeniLogoClick:x,handleLogOutClick:$,handleCockpitClick:f,setIsStepClicked:y}=e,R=d.fetchState==="In-Progress"||d.fetchState==="Not-Started",v=[];return s.jsxRuntimeExports.jsxs(Z,{children:[s.jsxRuntimeExports.jsx(M,{"data-testid":t.generateDataTestId("zeni-logo-customer-onboarding-drawer"),onClick:x}),R?s.jsxRuntimeExports.jsx(U,{}):s.jsxRuntimeExports.jsx(_,{allSteps:i,isDisabled:o,disabledSteps:v,completedSteps:n,halfCompletedSteps:a,errorSteps:c,currentStep:p,onUpdateStep:l,setIsStepClicked:y}),s.jsxRuntimeExports.jsx(J,{children:s.jsxRuntimeExports.jsx(t.LogoutButton,{signedInUser:u,currentTenant:m,onLogOutClick:$,onCockpitClick:f})})]})},S={titleRectangleWidth:new t.ResponsiveSized(250,500,550,600),subTitleRectangleWidth:new t.ResponsiveSized(343,600,700,800)},G=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  min-width: ${e=>e.isNoStepsPage?"100%":`calc(100% - ${g}px)`};
+  padding-left: ${e=>e.isNoStepsPage?t.Space.sp0:`${g}px`};
+  flex: 1;
+
+  ${e=>e.theme.breakpoints.down("md")} {
+    width: 100%;
+    padding-left: ${t.Space.sp0};
+  }
+`,K=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;
+  }
+`,Q=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${t.Space.sp3};
+  margin-top: 94px; // As per Figma Specs - Nav Bar Height + 32 px
+`,b=r.div`
+  border-radius: ${t.Space.sp2};
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+`,X=({isNoStepsPage:e=!1})=>{const o=s.useTheme(),i=t.useWindowSizeContext();return s.jsxRuntimeExports.jsx(G,{isNoStepsPage:e,children:s.jsxRuntimeExports.jsx(K,{windowSize:i,children:s.jsxRuntimeExports.jsxs(Q,{children:[s.jsxRuntimeExports.jsx(b,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:S.titleRectangleWidth.value(i),height:t.sp[6],backgroundColor:o.colors.grey3,style:{borderRadius:t.Space.sp2}})}),s.jsxRuntimeExports.jsx(b,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:S.subTitleRectangleWidth.value(i),height:27,backgroundColor:o.colors.grey3,style:{borderRadius:t.Space.sp2}})})]})})})};exports.CustomerOnboardingDetailPageSkeleton=X;exports.CustomerOnboardingDrawer=V;exports.DRAWER_WIDTH=g;

package/dist/CustomerOnboardingNoStepsPage-ByvUXg5c.cjs

@@ -0,0 +1,66 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),d=require("@emotion/styled"),e=require("./index-DxfP_W_n.cjs"),v=require("react"),ne=require("./PaymentAccountSetupBillingAddressSection-CX6brWwR.cjs"),ye=require("./CustomerOnboardingDetailPageSkeleton-Bre8sOgU.cjs"),K="onboardingPaymentAccountSetupSection",se="customerOnboardingNoStepsDetailPage",o="onboardingSubscriptionBillingAddress",Z={titleWidth:new e.ResponsiveSized(343,580,726,826),subTitlePaddingTop:new e.ResponsiveSized(e.sp[3],e.sp[3]),subTitlePaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[3]),termsPaddingLeftRight:new e.ResponsiveSized(e.sp[0],e.sp[3])},xe=t=>`${t}_form`,he=e.appLocale.getLocalizedStrings(),Ce=({onboardingCustomerView:t,connectedAccountProvider:h,cardPaymentView:f,stripeKey:O,googleAPIKey:$,signedInUser:C,currentTenant:E,onUpdateStep:B,handleCreateCardSetupIntent:R,handleConfirmCardSetupIntent:I,updateCardPaymentModalState:b,handleAddCardPaymentSource:L,resetCardPaymentViewState:T,handleResetCardPaymentErrorStatuses:z,redirectToProductSuitePage:P,onUpdateCustomerView:V,...F})=>{const u=e.useWindowSizeContext(),_=e.useToolkitContext(),{analytics:y}=_,{onFetchLinkTokenClick:D,onUpdatePaymentAccountStatus:N,onUpdatePaymentAccountLoginStatus:q,onEstablishConnectionClick:x,onEstablishConnectionSuccess:U,handleLogOutClick:W,onZeniLogoClick:M,onAddressEditHandler:k}=F,G=n.useTheme(),a=n.useForm({mode:"onSubmit",reValidateMode:"onSubmit",defaultValues:w(t),values:w(t),shouldFocusError:!0,resetOptions:{keepDirtyValues:!0}}),{companyOfficerLocalData:oe,saveStatus:p,paymentAccount:j,paymentAccountStatus:ie,plaidConnectionDetails:J,uiState:re,allNationalityCountries:Q,subscriptionBillingAddress:g}=t,{customerOnboardingPage:ae,common:m}=he,{footer:ce,steps:le}=ae,{buttons:H}=ce,X=le.link_payment_account,A=e.usePrevious(p.fetchState),Y=Object.values(oe).findIndex(s=>s?.isSelectedForVerification===!0)??0,de=`Officer_${Y<0?1:Y+1}`,ue=async(s,i)=>{if(s.includes(o)&&i[o]!=null){const r=a.getValues(`${o}`).country;let c=i[o];if(s.includes(`${o}.street`)&&i[o].street!=null){const{addressValue:l}=i[o].street,S=e.getCountryOptions(l?.country);c={street:i[o].street??m.strings.empty,city:l?.locality??m.strings.empty,state:l?.administrativeAreaLevel1??m.strings.empty,country:S,countryCode:l?.countryCode??m.strings.empty,postalCode:l?.postalCode??m.strings.empty,secondaryInfo:i[o].secondaryInfo,suite:i[o].suite},r.selectedOption!==S.selectedOption&&(c={...c,country:S})}else s===`${o}.country`&&r.selectedOption!=null?c={...c,countryCode:e.getAlpha2(r.selectedOption)}:r.selectedOption!=null&&s.includes(`${o}.street`)===!1&&(c={...c,countryCode:e.getAlpha2(r.selectedOption)});k(c)}};v.useEffect(()=>{const s=a.watch((i,{name:r})=>{r!=null&&i!=null&&n.defer(()=>ue(r,i))});return()=>{s.unsubscribe()}}),v.useEffect(()=>{A==="In-Progress"&&p.fetchState==="Completed"&&a.reset(w(t),{keepDirtyValues:!1})},[a,t,A,p.fetchState,Q]);const pe=()=>{const s=a.getValues(o),i={street:s.street.addressString,suite:s.suite,city:s.city,state:s.state,postalCode:s.postalCode,country:s.country.selectedOption??m.strings.empty,secondaryInfo:s.secondaryInfo};y.trackOnboardingBillingAddressSave(i)},ee=()=>{const s=Object.values(J).some(S=>S.fetchStatus.fetchState==="Completed"),i=j?.providerVerificationStatus?.code?.includes("verified")??!1,r=f.cardsList.length>0,l=f.bankAccountsList[0]?.providerVerificationStatus?.code?.includes("verified")??!1;return s&&i||!i&&!j&&r||!r&&!j&&l};function ge(){if(a.getFieldState(o).error)return!1;const i=a.getValues(o),r=g?.street.join("").trim(),c=g?.city,l=g?.state,S=g?.country,fe=g?.postalCode!=null&&g.postalCode||i.postalCode||m.strings.empty;return!!r&&!!c&&!!l&&!!S&&!!fe}const me=async()=>{const s=await a.trigger(o),i=await a.trigger(K);s&&i&&(pe(),B("link_payment_account"),V(de,!1,!0))};v.useEffect(()=>{A==="In-Progress"&&p.fetchState==="Completed"&&(a.reset(w(t),{keepDirtyValues:!1}),P())},[a,t,A,p.fetchState,Q,P]);const[te,Se]=v.useState(!1);return n.jsxRuntimeExports.jsxs(be,{children:[n.jsxRuntimeExports.jsxs(Pe,{windowSize:u,children:[n.jsxRuntimeExports.jsx(e.NavBar,{title:X.sectionTitle,showBackButton:!1,backgroundColor:G.colors.grey4,style:{zIndex:4},source:"CustomerOnboardingPaymentAddressDetailPage",showLeftSection:u!=="small",titleStyle:{display:"flex",alignItems:"center"},navBarContainerStyles:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},leftSideComponent:n.jsxRuntimeExports.jsx(ve,{children:n.jsxRuntimeExports.jsx(we,{"data-testid":e.generateDataTestId("zeni-logo-customer-onboarding-payment-address-detail-page"),onClick:M})})}),n.jsxRuntimeExports.jsx(n.FormProvider,{...a,children:n.jsxRuntimeExports.jsx(je,{id:xe(se),children:n.jsxRuntimeExports.jsxs(ke,{children:[n.jsxRuntimeExports.jsx(Oe,{windowSize:u,children:X.sectionSubTitle}),n.jsxRuntimeExports.jsx(ne.PaymentAccountSetupBillingAddressSection,{connectedAccountProvider:h,paymentAccount:j,accountStatus:ie,plaidConnectionDetails:J,subscriptionBillingAddressSectionId:o,sectionId:K,analytics:y,isValid:ee(),onFetchLinkTokenClick:D,onEstablishConnectionClick:x,onUpdatePaymentAccountStatus:N,onUpdatePaymentAccountLoginStatus:q,onEstablishConnectionSuccess:U,updateCardPaymentModalState:b,cardPaymentView:f,resetCardPaymentViewState:T,cardSetupInProgress:te,googleAPIKey:$,subscriptionBillingAddress:g})]},"link_payment_account")})}),n.jsxRuntimeExports.jsx(e.Footer,{formId:`${se}`,leftSideComponent:n.jsxRuntimeExports.jsx(Ae,{windowSize:u,children:n.jsxRuntimeExports.jsx(e.LogoutButton,{signedInUser:C,currentTenant:E,onLogOutClick:W})}),style:{width:u==="small"?"auto":"100%",padding:e.Space.sp0,rowGap:e.Space.sp1},helperContainerStyle:{width:"100%",rowGap:e.Space.sp1,marginTop:"12px",marginBottom:e.Space.sp2},primaryBtn:{onClick:me,label:H.submit,isLoading:p.fetchState==="In-Progress",isDisabled:p.fetchState==="In-Progress"||!(ge()&&ee())},containerStyle:{width:"auto",justifyContent:"center"},helperText:H.submitText.replace("__action__",H.submit),helperStyle:{width:"auto",padding:e.Space.sp0,rowGap:e.Space.sp0,textAlign:"center"}})]}),n.jsxRuntimeExports.jsx(ne.CardPaymentModal,{handleConfirmCardSetupIntent:I,updateCardPaymentModalState:b,handleCreateCardSetupIntent:R,handleAddCardPaymentSource:L,cardPaymentView:f,stripeKey:O,isCardPaymentOpen:re.isCardPaymentPopupOpen,handleResetCardPaymentErrorStatuses:z,cardSetupInProgress:te,setCardSetupInProgress:Se})]})},be=d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 100% ${t=>t.theme.breakpoints.down("md")} {
+    width: 100%;
+    padding-left: ${e.Space.sp0};
+  }
+`,Pe=d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background-image: ${t=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/signin-background-${t.windowSize==="small"?"m":"w"}-${t.theme.mode==="dark"?"d":"l"}.svg)`};
+  background-color: ${t=>t.theme.colors.grey4};
+  background-size: inherit;
+  background-attachment: fixed;
+  background-position: ${t=>t.windowSize==="small"?"center center":"right center"};
+  background-repeat: no-repeat;
+
+  ${t=>t.theme.breakpoints.down("lg")} {
+    background-size: cover;
+  }
+`,ke=d.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: ${e.Space.sp0};
+`,je=d.form`
+  padding-top: ${e.Space.sp0};
+  flex: 1;
+`,Ae=d.div`
+  display: flex;
+  height: ${e.Space.sp7};
+  left: ${e.Space.sp4};
+  bottom: ${e.Space.sp3};
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+`,ve=d.div`
+  display: flex;
+`,we=d(e.SvgZeniLogoFull)`
+  height: ${e.Space.sp4};
+  width: 102px;
+  color: ${t=>t.theme.colors.primary};
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: -${e.Space.sp4};
+`,Oe=d(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${t=>Z.titleWidth.valuePx(t.windowSize)};
+  padding-top: ${t=>Z.subTitlePaddingTop.valuePx(t.windowSize)};
+  padding-bottom: ${t=>Z.subTitlePaddingBottom.valuePx(t.windowSize)};
+  text-align: ${t=>t.windowSize==="small"?"initial":"center"};
+  width: 100%;
+`,w=t=>({[K]:{account:{allOptions:[],selectedOption:void 0}},[o]:e.getAddressDefaultValues(o,t?.subscriptionBillingAddress)[o]}),$e=t=>{const{onboardingCustomerView:h,cardPaymentView:f,signedInUser:O,currentTenant:$,isOnAddressPage:C,stripeKey:E,googleAPIKey:B,meetingUrl:R,onUpdateStep:I,onZeniLogoClick:b,handleLogOutClick:L,handleCockpitClick:T,handleCreateCardSetupIntent:z,handleConfirmCardSetupIntent:P,handleFetchPaymentSources:V,updateCardPaymentModalState:F,resetCardPaymentViewState:u,handleResetCardPaymentErrorStatuses:_,redirectToProductSuitePage:y,...D}=t,{allSteps:N,currentStep:q,fetchStatus:x}=h,U=e.useToolkitContext(),{analytics:W}=U,M={allSteps:N,isOnAddressPage:C,currentStep:q,fetchStatus:x,signedInUser:O,currentTenant:$,onUpdateStep:G=>{I(G)},onZeniLogoClick:b,handleLogOutClick:L,handleCockpitClick:T,redirectToProductSuitePage:y},k=x.fetchState==="In-Progress"||x.fetchState==="Not-Started";return n.jsxRuntimeExports.jsxs(Ee,{isOnAddressPage:C,children:[k?n.jsxRuntimeExports.jsx(ye.CustomerOnboardingDetailPageSkeleton,{isNoStepsPage:!0}):n.jsxRuntimeExports.jsx(Ce,{...M,onboardingCustomerView:h,handleCreateCardSetupIntent:z,handleConfirmCardSetupIntent:P,updateCardPaymentModalState:F,handleFetchPaymentSources:V,cardPaymentView:f,resetCardPaymentViewState:u,stripeKey:E,googleAPIKey:B,handleResetCardPaymentErrorStatuses:_,redirectToProductSuitePage:y,...D}),k?null:n.jsxRuntimeExports.jsx(e.HelpButton,{isFooterRendered:!0,meetingUrl:R,analytics:W,productType:"onboarding"})]})},Ee=d.div`
+  display: flex;
+  flex-direction: column;
+  width: ${t=>t.isOnAddressPage?"fit-content":"100%"};
+  height: 100vh;
+`;exports.default=$e;