@zeniai/web-components 3.16.42 → 3.16.44

package/dist/CustomerOnboardingNoStepsPage-CqnEWmhx.cjs

@@ -0,0 +1,66 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-DHyNpoQL.cjs"),d=require("@emotion/styled"),e=require("./index-DccWx-ku.cjs"),ye=require("./HelpButton-BgyWixA5.cjs"),v=require("react"),ne=require("./PaymentAccountSetupBillingAddressSection-BxW8ykT9.cjs"),xe=require("./CustomerOnboardingDetailPageSkeleton-TgIWoxLe.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])},he=t=>`${t}_form`,Ce=e.appLocale.getLocalizedStrings(),be=({onboardingCustomerView:t,connectedAccountProvider:h,cardPaymentView:f,stripeKey:O,googleAPIKey:$,signedInUser:C,currentTenant:B,onUpdateStep:E,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:q,onUpdatePaymentAccountLoginStatus:N,onEstablishConnectionClick:x,onEstablishConnectionSuccess:U,handleLogOutClick:W,onZeniLogoClick:H,onAddressEditHandler:k}=F,M=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}=Ce,{footer:ce,steps:le}=ae,{buttons:G}=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(),E("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(Pe,{children:[n.jsxRuntimeExports.jsxs(ke,{windowSize:u,children:[n.jsxRuntimeExports.jsx(e.NavBar,{title:X.sectionTitle,showBackButton:!1,backgroundColor:M.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(we,{children:n.jsxRuntimeExports.jsx(Oe,{"data-testid":e.generateDataTestId("zeni-logo-customer-onboarding-payment-address-detail-page"),onClick:H})})}),n.jsxRuntimeExports.jsx(n.FormProvider,{...a,children:n.jsxRuntimeExports.jsx(Ae,{id:he(se),children:n.jsxRuntimeExports.jsxs(je,{children:[n.jsxRuntimeExports.jsx($e,{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:q,onUpdatePaymentAccountLoginStatus:N,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(ve,{windowSize:u,children:n.jsxRuntimeExports.jsx(e.LogoutButton,{signedInUser:C,currentTenant:B,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:G.submit,isLoading:p.fetchState==="In-Progress",isDisabled:p.fetchState==="In-Progress"||!(ge()&&ee())},containerStyle:{width:"auto",justifyContent:"center"},helperText:G.submitText.replace("__action__",G.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})]})},Pe=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};
+  }
+`,ke=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;
+  }
+`,je=d.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: ${e.Space.sp0};
+`,Ae=d.form`
+  padding-top: ${e.Space.sp0};
+  flex: 1;
+`,ve=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;
+`,we=d.div`
+  display: flex;
+`,Oe=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};
+`,$e=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]}),Be=t=>{const{onboardingCustomerView:h,cardPaymentView:f,signedInUser:O,currentTenant:$,isOnAddressPage:C,stripeKey:B,googleAPIKey:E,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:q,currentStep:N,fetchStatus:x}=h,U=e.useToolkitContext(),{analytics:W}=U,H={allSteps:q,isOnAddressPage:C,currentStep:N,fetchStatus:x,signedInUser:O,currentTenant:$,onUpdateStep:M=>{I(M)},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(xe.CustomerOnboardingDetailPageSkeleton,{isNoStepsPage:!0}):n.jsxRuntimeExports.jsx(be,{...H,onboardingCustomerView:h,handleCreateCardSetupIntent:z,handleConfirmCardSetupIntent:P,updateCardPaymentModalState:F,handleFetchPaymentSources:V,cardPaymentView:f,resetCardPaymentViewState:u,stripeKey:B,googleAPIKey:E,handleResetCardPaymentErrorStatuses:_,redirectToProductSuitePage:y,...D}),k?null:n.jsxRuntimeExports.jsx(ye.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=Be;

package/dist/CustomerOnboardingNoStepsPage-DoGh6VIw.js

@@ -0,0 +1,425 @@
+import { u as be, g as xe, h as Pe, j as o, F as ke } from "./vendor-.pnpm-BZbZ6JJC.js";
+import d from "@emotion/styled";
+import { u as we, dB as ae, a as Ae, aD as ve, aE as Oe, S as i, j as $e, ap as je, l as Be, j6 as Ie, hf as Le, dS as oe, d as Te, R as O, p as Ve, D as S } from "./index-oyJQP6ol.js";
+import { H as Fe } from "./HelpButton-DY5Fs9rK.js";
+import { useEffect as q, useState as ze } from "react";
+import { P as De, C as _e } from "./PaymentAccountSetupBillingAddressSection-Bontd74L.js";
+import { a as Ee } from "./CustomerOnboardingDetailPageSkeleton-B-fztMt7.js";
+const Q = "onboardingPaymentAccountSetupSection", ie = "customerOnboardingNoStepsDetailPage", s = "onboardingSubscriptionBillingAddress", J = {
+  titleWidth: new O(343, 580, 726, 826),
+  subTitlePaddingTop: new O(S[3], S[3]),
+  subTitlePaddingBottom: new O(S[3], S[3]),
+  termsPaddingLeftRight: new O(S[0], S[3])
+}, Ne = (e) => `${e}_form`, Re = Ae.getLocalizedStrings(), Ue = ({
+  onboardingCustomerView: e,
+  connectedAccountProvider: b,
+  cardPaymentView: y,
+  stripeKey: j,
+  googleAPIKey: B,
+  signedInUser: x,
+  currentTenant: I,
+  onUpdateStep: L,
+  handleCreateCardSetupIntent: T,
+  handleConfirmCardSetupIntent: V,
+  updateCardPaymentModalState: P,
+  handleAddCardPaymentSource: F,
+  resetCardPaymentViewState: z,
+  handleResetCardPaymentErrorStatuses: D,
+  redirectToProductSuitePage: k,
+  onUpdateCustomerView: _,
+  ...E
+}) => {
+  const u = we(), N = ae(), { analytics: h } = N, {
+    onFetchLinkTokenClick: R,
+    onUpdatePaymentAccountStatus: U,
+    onUpdatePaymentAccountLoginStatus: W,
+    onEstablishConnectionClick: C,
+    onEstablishConnectionSuccess: H,
+    handleLogOutClick: G,
+    onZeniLogoClick: M,
+    onAddressEditHandler: w
+  } = E, Z = be(), r = xe({
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: $(e),
+    values: $(e),
+    shouldFocusError: !0,
+    resetOptions: {
+      keepDirtyValues: !0
+    }
+  }), {
+    companyOfficerLocalData: re,
+    saveStatus: p,
+    paymentAccount: A,
+    paymentAccountStatus: ce,
+    plaidConnectionDetails: X,
+    uiState: le,
+    allNationalityCountries: Y,
+    subscriptionBillingAddress: g
+  } = e, { customerOnboardingPage: de, common: m } = Re, { footer: ue, steps: pe } = de, { buttons: K } = ue, ee = pe.link_payment_account, v = ve(p.fetchState), te = Object.values(re).findIndex(
+    (t) => t?.isSelectedForVerification === !0
+  ) ?? 0, ge = `Officer_${te < 0 ? 1 : te + 1}`, me = async (t, n) => {
+    if (t.includes(s) && n[s] != null) {
+      const a = r.getValues(
+        `${s}`
+      ).country;
+      let c = n[s];
+      if (t.includes(`${s}.street`) && n[s].street != null) {
+        const { addressValue: l } = n[s].street, f = Le(l?.country);
+        c = {
+          street: n[s].street ?? m.strings.empty,
+          city: l?.locality ?? m.strings.empty,
+          state: l?.administrativeAreaLevel1 ?? m.strings.empty,
+          country: f,
+          countryCode: l?.countryCode ?? m.strings.empty,
+          postalCode: l?.postalCode ?? m.strings.empty,
+          secondaryInfo: n[s].secondaryInfo,
+          suite: n[s].suite
+        }, a.selectedOption !== f.selectedOption && (c = {
+          ...c,
+          country: f
+        });
+      } else t === `${s}.country` && a.selectedOption != null ? c = {
+        ...c,
+        countryCode: oe(a.selectedOption)
+      } : a.selectedOption != null && t.includes(`${s}.street`) === !1 && (c = {
+        ...c,
+        countryCode: oe(a.selectedOption)
+      });
+      w(c);
+    }
+  };
+  q(() => {
+    const t = r.watch((n, { name: a }) => {
+      a != null && n != null && Pe(() => me(a, n));
+    });
+    return () => {
+      t.unsubscribe();
+    };
+  }), q(() => {
+    v === "In-Progress" && p.fetchState === "Completed" && r.reset($(e), {
+      keepDirtyValues: !1
+    });
+  }, [
+    r,
+    e,
+    v,
+    p.fetchState,
+    Y
+  ]);
+  const fe = () => {
+    const t = r.getValues(
+      s
+    ), n = {
+      street: t.street.addressString,
+      suite: t.suite,
+      city: t.city,
+      state: t.state,
+      postalCode: t.postalCode,
+      country: t.country.selectedOption ?? m.strings.empty,
+      secondaryInfo: t.secondaryInfo
+    };
+    h.trackOnboardingBillingAddressSave(n);
+  }, se = () => {
+    const t = Object.values(X).some(
+      (f) => f.fetchStatus.fetchState === "Completed"
+    ), n = A?.providerVerificationStatus?.code?.includes("verified") ?? !1, a = y.cardsList.length > 0, l = y.bankAccountsList[0]?.providerVerificationStatus?.code?.includes(
+      "verified"
+    ) ?? !1;
+    return t && n || !n && !A && a || !a && !A && l;
+  };
+  function ye() {
+    if (r.getFieldState(
+      s
+    ).error)
+      return !1;
+    const n = r.getValues(
+      s
+    ), a = g?.street.join("").trim(), c = g?.city, l = g?.state, f = g?.country, Ce = g?.postalCode != null && g.postalCode || n.postalCode || m.strings.empty;
+    return !!a && !!c && !!l && !!f && !!Ce;
+  }
+  const Se = async () => {
+    const t = await r.trigger(
+      s
+    ), n = await r.trigger(
+      Q
+    );
+    t && n && (fe(), L("link_payment_account"), _(ge, !1, !0));
+  };
+  q(() => {
+    v === "In-Progress" && p.fetchState === "Completed" && (r.reset($(e), {
+      keepDirtyValues: !1
+    }), k());
+  }, [
+    r,
+    e,
+    v,
+    p.fetchState,
+    Y,
+    k
+  ]);
+  const [ne, he] = ze(!1);
+  return /* @__PURE__ */ o.jsxs(We, { children: [
+    /* @__PURE__ */ o.jsxs(He, { windowSize: u, children: [
+      /* @__PURE__ */ o.jsx(
+        Oe,
+        {
+          title: ee.sectionTitle,
+          showBackButton: !1,
+          backgroundColor: Z.colors.grey4,
+          style: {
+            zIndex: 4
+          },
+          source: "CustomerOnboardingPaymentAddressDetailPage",
+          showLeftSection: u !== "small",
+          titleStyle: {
+            display: "flex",
+            alignItems: "center"
+          },
+          navBarContainerStyles: {
+            paddingTop: i.sp0,
+            paddingBottom: i.sp0
+          },
+          leftSideComponent: /* @__PURE__ */ o.jsx(Ke, { children: /* @__PURE__ */ o.jsx(
+            qe,
+            {
+              "data-testid": $e(
+                "zeni-logo-customer-onboarding-payment-address-detail-page"
+              ),
+              onClick: M
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ o.jsx(ke, { ...r, children: /* @__PURE__ */ o.jsx(Me, { id: Ne(ie), children: /* @__PURE__ */ o.jsxs(Ge, { children: [
+        /* @__PURE__ */ o.jsx(Je, { windowSize: u, children: ee.sectionSubTitle }),
+        /* @__PURE__ */ o.jsx(
+          De,
+          {
+            connectedAccountProvider: b,
+            paymentAccount: A,
+            accountStatus: ce,
+            plaidConnectionDetails: X,
+            subscriptionBillingAddressSectionId: s,
+            sectionId: Q,
+            analytics: h,
+            isValid: se(),
+            onFetchLinkTokenClick: R,
+            onEstablishConnectionClick: C,
+            onUpdatePaymentAccountStatus: U,
+            onUpdatePaymentAccountLoginStatus: W,
+            onEstablishConnectionSuccess: H,
+            updateCardPaymentModalState: P,
+            cardPaymentView: y,
+            resetCardPaymentViewState: z,
+            cardSetupInProgress: ne,
+            googleAPIKey: B,
+            subscriptionBillingAddress: g
+          }
+        )
+      ] }, "link_payment_account") }) }),
+      /* @__PURE__ */ o.jsx(
+        je,
+        {
+          formId: `${ie}`,
+          leftSideComponent: /* @__PURE__ */ o.jsx(Ze, { windowSize: u, children: /* @__PURE__ */ o.jsx(
+            Be,
+            {
+              signedInUser: x,
+              currentTenant: I,
+              onLogOutClick: G
+            }
+          ) }),
+          style: {
+            width: u === "small" ? "auto" : "100%",
+            padding: i.sp0,
+            rowGap: i.sp1
+          },
+          helperContainerStyle: {
+            width: "100%",
+            rowGap: i.sp1,
+            marginTop: "12px",
+            marginBottom: i.sp2
+          },
+          primaryBtn: {
+            onClick: Se,
+            label: K.submit,
+            isLoading: p.fetchState === "In-Progress",
+            isDisabled: p.fetchState === "In-Progress" || !(ye() && se())
+          },
+          containerStyle: {
+            width: "auto",
+            justifyContent: "center"
+          },
+          helperText: K.submitText.replace("__action__", K.submit),
+          helperStyle: {
+            width: "auto",
+            padding: i.sp0,
+            rowGap: i.sp0,
+            textAlign: "center"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      _e,
+      {
+        handleConfirmCardSetupIntent: V,
+        updateCardPaymentModalState: P,
+        handleCreateCardSetupIntent: T,
+        handleAddCardPaymentSource: F,
+        cardPaymentView: y,
+        stripeKey: j,
+        isCardPaymentOpen: le.isCardPaymentPopupOpen,
+        handleResetCardPaymentErrorStatuses: D,
+        cardSetupInProgress: ne,
+        setCardSetupInProgress: he
+      }
+    )
+  ] });
+}, We = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 100% ${(e) => e.theme.breakpoints.down("md")} {
+    width: 100%;
+    padding-left: ${i.sp0};
+  }
+`, He = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  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;
+  }
+`, Ge = d.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: ${i.sp0};
+`, Me = d.form`
+  padding-top: ${i.sp0};
+  flex: 1;
+`, Ze = d.div`
+  display: flex;
+  height: ${i.sp7};
+  left: ${i.sp4};
+  bottom: ${i.sp3};
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+`, Ke = d.div`
+  display: flex;
+`, qe = d(Te)`
+  height: ${i.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: -${i.sp4};
+`, Je = d(Ve)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => J.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => J.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => J.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+  width: 100%;
+`, $ = (e) => ({
+  [Q]: {
+    account: {
+      allOptions: [],
+      selectedOption: void 0
+    }
+  },
+  [s]: Ie(
+    s,
+    e?.subscriptionBillingAddress
+  )[s]
+}), at = (e) => {
+  const {
+    onboardingCustomerView: b,
+    cardPaymentView: y,
+    signedInUser: j,
+    currentTenant: B,
+    isOnAddressPage: x,
+    stripeKey: I,
+    googleAPIKey: L,
+    meetingUrl: T,
+    onUpdateStep: V,
+    onZeniLogoClick: P,
+    handleLogOutClick: F,
+    handleCockpitClick: z,
+    handleCreateCardSetupIntent: D,
+    handleConfirmCardSetupIntent: k,
+    handleFetchPaymentSources: _,
+    updateCardPaymentModalState: E,
+    resetCardPaymentViewState: u,
+    handleResetCardPaymentErrorStatuses: N,
+    redirectToProductSuitePage: h,
+    ...R
+  } = e, { allSteps: U, currentStep: W, fetchStatus: C } = b, H = ae(), { analytics: G } = H, M = {
+    allSteps: U,
+    isOnAddressPage: x,
+    currentStep: W,
+    fetchStatus: C,
+    signedInUser: j,
+    currentTenant: B,
+    onUpdateStep: (Z) => {
+      V(Z);
+    },
+    onZeniLogoClick: P,
+    handleLogOutClick: F,
+    handleCockpitClick: z,
+    redirectToProductSuitePage: h
+  }, w = C.fetchState === "In-Progress" || C.fetchState === "Not-Started";
+  return /* @__PURE__ */ o.jsxs(Qe, { isOnAddressPage: x, children: [
+    w ? /* @__PURE__ */ o.jsx(Ee, { isNoStepsPage: !0 }) : /* @__PURE__ */ o.jsx(
+      Ue,
+      {
+        ...M,
+        onboardingCustomerView: b,
+        handleCreateCardSetupIntent: D,
+        handleConfirmCardSetupIntent: k,
+        updateCardPaymentModalState: E,
+        handleFetchPaymentSources: _,
+        cardPaymentView: y,
+        resetCardPaymentViewState: u,
+        stripeKey: I,
+        googleAPIKey: L,
+        handleResetCardPaymentErrorStatuses: N,
+        redirectToProductSuitePage: h,
+        ...R
+      }
+    ),
+    w ? null : /* @__PURE__ */ o.jsx(
+      Fe,
+      {
+        isFooterRendered: !0,
+        meetingUrl: T,
+        analytics: G,
+        productType: "onboarding"
+      }
+    )
+  ] });
+}, Qe = d.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.isOnAddressPage ? "fit-content" : "100%"};
+  height: 100vh;
+`;
+export {
+  at as default
+};