@zeniai/web-components 3.16.50 → 3.16.51

package/dist/CustomerOnboardingPage-VNBp5Ije.js

@@ -1,1060 +0,0 @@
-import { j as a, d as tn, u as nn, g as on, h as Se, k as Me, F as sn, ao as he } from "./vendor-.pnpm-BZbZ6JJC.js";
-import { useRef as oe, useState as Z, useCallback as an, useEffect as L, useLayoutEffect as rn } from "react";
-import O from "@emotion/styled";
-import { H as cn } from "./HelpButton-DaQz2Rn_.js";
-import { keyframes as kt } from "@emotion/react";
-import { Event as gt } from "@zeniai/client-analytics";
-import { getFormattedAddress as G } from "@zeniai/client-epic-state";
-import { u as Ke, a as Ze, aD as Ye, aE as ln, S as de, D as b, ap as dn, j6 as pn, i8 as un, hS as St, hf as At, dS as ht, R as K, p as fn, j7 as Ct, ep as bt, fn as mn, ib as yn } from "./index-D4BzzXbc.js";
-import { P as Ot, C as gn } from "./PaymentAccountSetupBillingAddressSection-CkC16MMJ.js";
-import { D as xt, C as It, a as Sn } from "./CustomerOnboardingDetailPageSkeleton-Kt2KUVtC.js";
-import { C as hn, a as Cn } from "./CompanyOfficerDetailsSection-BdVMTA_t.js";
-import { Q as bn } from "./QBOSetupSection-JfsJnbR7.js";
-const On = ({
-  companyView: t,
-  companyOfficerLocalData: k,
-  allNationalityCountries: r,
-  isVerificationPopupOpen: m,
-  setIsVerificationPopupOpen: A,
-  verifiedPhoneNumber: x,
-  onPhoneVerified: y,
-  ...I
-}) => {
-  const f = Ke(), c = t?.companyOfficers.slice(0, 10).sort(
-    (E, ue) => E.user.createTime?.isAfter(ue.user.createTime) === !0 ? 1 : -1
-  )?.map(
-    (E) => E.user
-  ), { company_officer: B } = Ze.getLocalizedStrings().customerOnboardingPage.sections, { title: $ } = B, D = t?.company.company.featuresActivationInfo.connectedAccountProvider;
-  return /* @__PURE__ */ a.jsx(xn, { children: /* @__PURE__ */ a.jsx(
-    hn,
-    {
-      companyOfficerData: k,
-      allOfficers: c ?? [],
-      allNationalityCountries: r,
-      sectionHeader: $,
-      isPopupOpen: m,
-      productType: "onboarding",
-      connectedAccountProvider: D,
-      showInfoTooltip: f !== "small",
-      showCompletedIcon: f === "small",
-      showOfficerSelect: !1,
-      showVerificationTag: !1,
-      verifiedPhoneNumber: x,
-      onPhoneVerified: y,
-      optionalFields: [
-        "dob",
-        "officerAddress",
-        "role",
-        "ssn",
-        "ownership",
-        "selectDocument",
-        "phone"
-      ],
-      openPopup: A,
-      ...I
-    }
-  ) });
-}, xn = O.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, In = ({
-  fileProps: t,
-  companyDetails: k,
-  companyIndustries: r,
-  sectionId: m,
-  isCompleted: A,
-  isDisabled: x,
-  style: y,
-  onCompanyAddressClick: I,
-  onRegisteredAddressClick: f
-}) => {
-  const N = Ke(), { company_details: c } = Ze.getLocalizedStrings().customerOnboardingPage.sections, { title: B } = c;
-  return /* @__PURE__ */ a.jsx(vn, { children: /* @__PURE__ */ a.jsx(
-    Cn,
-    {
-      fileProps: t,
-      companyDetails: k,
-      sectionId: m,
-      isDisabled: x,
-      style: y,
-      sectionHeader: B,
-      productType: "onboarding",
-      showInfoTooltip: N !== "small",
-      showCompletedIcon: N === "small",
-      isCompleted: A,
-      allIndustries: r,
-      optionalFields: [
-        "companyLegalName",
-        "companyDescription",
-        "companyAddress",
-        "companyIndustry",
-        "typeOfIncorporation",
-        "incDate",
-        "certificateOfIncorporation",
-        "ein",
-        "companyPhone",
-        "primaryContactName"
-      ],
-      onCompanyAddressClick: I,
-      onRegisteredAddressClick: f
-    }
-  ) });
-}, vn = O.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, kn = O.div`
-  display: flex;
-`, An = O.input`
-  display: none;
-`, Dn = ({
-  isValid: t,
-  sectionId: k = "onboardingQboConnection",
-  ...r
-}) => {
-  const { register: m } = tn();
-  return /* @__PURE__ */ a.jsxs(kn, { children: [
-    /* @__PURE__ */ a.jsx(
-      An,
-      {
-        type: "hidden",
-        ...m(`${k}.connected`, {
-          validate: (A) => A === "true"
-        }),
-        value: t ? "true" : "false"
-      }
-    ),
-    /* @__PURE__ */ a.jsx(bn, { isValid: t, ...r })
-  ] });
-}, j = "companyDetails", C = "companyOfficer", ne = "onboardingPaymentAccountSetupSection", vt = "customerOnboardingDetailPage", p = "onboardingSubscriptionBillingAddress", Ce = "onboardingQboConnection", be = {
-  titleWidth: new K(343, 580, 726, 826),
-  topNavBarHeight: new K(52, 52, 63),
-  topNavBarLeftRightSpace: new K(b[5], b[9], 112),
-  topNavBarHeaderLeftRightPadding: new K(b[4], b[0]),
-  navBarTitleMarginLeft: new K(b[3], b[4]),
-  subTitlePaddingTop: new K(b[3], b[3]),
-  subTitlePaddingBottom: new K(b[3], b[3]),
-  termsPaddingLeftRight: new K(b[0], b[3])
-}, Pn = (t) => `${t}_form`, pe = Ze.getLocalizedStrings(), Bn = ({
-  fileProps: t,
-  isRefreshingViewInBackground: k,
-  isAdmin: r,
-  onboardingCustomerView: m,
-  companyTitles: A,
-  connectedAccountProvider: x,
-  analytics: y,
-  cardPaymentView: I,
-  stripeKey: f,
-  googleAPIKey: N,
-  handleCreateCardSetupIntent: c,
-  handleConfirmCardSetupIntent: B,
-  updateCardPaymentModalState: $,
-  handleAddCardPaymentSource: D,
-  resetCardPaymentViewState: E,
-  handleResetCardPaymentErrorStatuses: ue,
-  redirectToProductSuitePage: Oe,
-  onFormErrorsChange: w,
-  ...Be
-}) => {
-  const R = Ke(), Te = oe(null), Ne = oe(null), J = oe(null), we = oe(null), [xe, U] = Z(!1), [z, q] = Z(
-    "next"
-  ), [_, Ie] = Z(!1), [fe, ve] = Z(!1), [se, X] = Z(null), {
-    onAddressClick: ie,
-    onCompanyDetailsChanged: ke,
-    onCompanyOfficerUpdated: T,
-    onFetchLinkTokenClick: Ae,
-    onUpdatePaymentAccountStatus: me,
-    onUpdatePaymentAccountLoginStatus: ae,
-    onEstablishConnectionClick: ye,
-    onEstablishConnectionSuccess: re,
-    onDeleteFile: P,
-    onEditFileName: Je,
-    updateFilesEntity: Xe,
-    onGetOtp: Dt,
-    onSkipSetupClick: $e,
-    onUpdateCustomerView: _e,
-    updateStepHandler: W,
-    onVerifyOtp: Pt,
-    onResendOtp: Bt,
-    handleOnConnectClick: Tt,
-    updateQBOPopupState: Nt,
-    onUpdateStep: Ve,
-    onAddressEditHandler: wt
-  } = Be, $t = nn(), i = on({
-    mode: "onSubmit",
-    reValidateMode: "onChange",
-    defaultValues: Ge(
-      m,
-      m.allNationalityCountries
-    ),
-    values: Ge(
-      m,
-      m.allNationalityCountries
-    ),
-    shouldFocusError: !0,
-    resetOptions: {
-      keepDirtyValues: !0
-    }
-  }), H = an(() => {
-    const e = [];
-    return (i.getFieldState(ne).error != null || i.getFieldState(p).error != null) && e.push("link_payment_account"), i.getFieldState(Ce).error != null && e.push("qbo_connection"), e;
-  }, [i]);
-  L(() => {
-    const e = H();
-    w?.(e);
-  }, [H, w]), L(() => {
-    const e = i.watch((n, { name: o, type: l }) => {
-      o != null && (l === "change" || l === "blur") && Se(() => {
-        const u = H();
-        w?.(u);
-      });
-    });
-    return () => e.unsubscribe();
-  }, [i, H, w]);
-  const et = (e) => {
-    tt(e);
-  }, De = oe(""), _t = (e) => {
-    De.current = e;
-    const n = Object.values(m.companyOfficerLocalData).findIndex(
-      (l) => l?.isSelectedForVerification === !0
-    ) ?? 0, o = n < 0 ? 0 : n;
-    i.clearErrors(`${C}.${o}.phone`);
-  }, tt = (e) => {
-    e != null && !he(e) ? i.trigger(
-      `${C}.${te}.phone`
-    ) : Dt(e);
-  }, {
-    companyView: ce,
-    companyDetailsLocalData: g,
-    companyOfficerLocalData: Q,
-    currentStep: s,
-    completedSteps: nt,
-    saveStatus: v,
-    allSteps: S,
-    allRequiredStepsCompleted: Fe,
-    paymentAccount: M,
-    paymentAccountStatus: ot,
-    externalConnections: je,
-    plaidConnectionDetails: Le,
-    uiState: Ee,
-    allNationalityCountries: Re,
-    pendingSaveDetails: {
-      companyDetails: Vt,
-      officer: Ft
-    },
-    subscriptionBillingAddress: ee
-  } = m, te = Object.values(Q).findIndex(
-    (e) => e?.isSelectedForVerification === !0
-  ) ?? 0, V = `Officer_${te < 0 ? 1 : te + 1}`, jt = ce?.companyOfficers.slice(0, 10).sort(
-    (e, n) => e.user.createTime?.isAfter(n.user.createTime) === !0 ? 1 : -1
-  ), Ue = Q[V]?.userId != null ? jt?.find(
-    (e) => e.user.userId === Q[V]?.userId
-  )?.address : null, st = Q[V]?.addressStatus?.addressToCreate, Pe = ce?.companyAddress, it = g?.addressStatus?.addressToCreate, ze = ce?.registeredAddress, at = g?.registeredAddressStatus?.addressToCreate, { customerOnboardingPage: Lt, common: h } = pe, { footer: Et, steps: Rt } = Lt, { buttons: rt } = Et, ct = Rt[s], qe = S.length, le = Ye(v.fetchState), F = Ye(s);
-  function Ut() {
-    return je?.accounting[0]?.isValid ?? !1;
-  }
-  const ge = () => {
-    const e = Object.values(Le).some(
-      (d) => d.fetchStatus.fetchState === "Completed"
-    ), n = M?.providerVerificationStatus?.code?.includes("verified") ?? !1, o = I.cardsList.length > 0, u = I.bankAccountsList[0]?.providerVerificationStatus?.code?.includes(
-      "verified"
-    ) ?? !1;
-    return e && n || !n && !M && o || !o && !M && u;
-  };
-  function lt() {
-    if (i.getFieldState(
-      p
-    ).error)
-      return !1;
-    const n = i.getValues(
-      p
-    ), o = ee?.street.join("").trim(), l = ee?.city, u = ee?.state, d = ee?.country, Qe = ee?.postalCode != null && ee.postalCode || n.postalCode || h.strings.empty;
-    return !!o && !!l && !!u && !!d && !!Qe;
-  }
-  const dt = Ye(
-    M?.providerVerificationStatus?.code
-  );
-  L(() => {
-    dt === "pending_manual_verification" && M?.providerVerificationStatus?.code === "manually_verified" && y.trackOnboardingBankAccountVerified("manual");
-  }, [
-    y,
-    M?.providerVerificationStatus?.code,
-    dt
-  ]);
-  const zt = async (e, n) => {
-    if (e.includes(j))
-      ke?.(n[j]);
-    else if (e.includes(C))
-      T?.(n[C]);
-    else if (e.includes(p) && n[p] != null) {
-      const o = i.getValues(
-        `${p}`
-      ).country;
-      let l = n[p];
-      if (e.includes(`${p}.street`) && n[p].street != null) {
-        const { addressValue: u } = n[p].street, d = At(u?.country);
-        l = {
-          street: n[p].street ?? h.strings.empty,
-          city: u?.locality ?? h.strings.empty,
-          state: u?.administrativeAreaLevel1 ?? h.strings.empty,
-          country: d,
-          countryCode: u?.countryCode ?? h.strings.empty,
-          postalCode: u?.postalCode ?? h.strings.empty,
-          secondaryInfo: n[p].secondaryInfo,
-          suite: n[p].suite
-        }, o.selectedOption !== d.selectedOption && (l = {
-          ...l,
-          country: d
-        });
-      } else e === `${p}.country` && o.selectedOption != null ? l = {
-        ...l,
-        countryCode: ht(o.selectedOption)
-      } : o.selectedOption != null && e.includes(`${p}.street`) === !1 && (l = {
-        ...l,
-        countryCode: ht(o.selectedOption)
-      });
-      wt(l);
-    }
-  };
-  L(() => {
-    const e = i.watch((n, { name: o }) => {
-      o != null && n != null && Se(() => zt(o, n));
-    });
-    return () => {
-      e.unsubscribe();
-    };
-  }), L(() => {
-    le === "In-Progress" && v.fetchState === "Completed" && (i.reset(
-      Ge(m, Re),
-      {
-        keepDirtyValues: !1
-      }
-    ), F === "company_details" && s === "link_payment_account" && !S.includes("qbo_connection") && !m.qboConnected && Oe());
-  }, [
-    i,
-    m,
-    le,
-    v.fetchState,
-    Re,
-    F,
-    s,
-    S,
-    Oe
-  ]), L(() => {
-    xe && le === "In-Progress" && v.fetchState === "Completed" && ($e(), y.track(gt.onboardingSkipAndSave));
-  }, [le, xe, v.fetchState, $e]), L(() => {
-    se?.shouldNavigate === !0 && le === "In-Progress" && v.fetchState === "Completed" && (W(
-      se.fromStep,
-      se.stepDirection,
-      !0
-    ), X(null));
-  }, [
-    se,
-    le,
-    v.fetchState,
-    W
-  ]), rn(() => {
-    F != null && F !== s && (S.indexOf(F) === S.indexOf(s) - 1 || S.indexOf(F) === qe - 1 && S.indexOf(s) === 0 ? z !== "next" && q("next") : (S.indexOf(F) - 1 === S.indexOf(s) || S.indexOf(F) === 0 && S.indexOf(s) === qe - 1) && z !== "previous" && q("previous"));
-  }, [S, s, F, z, qe]);
-  const pt = () => {
-    const e = Q[V];
-    return !!e?.firstName || !!e?.lastName || !!e?.email || !!e?.nationalityCountryCode || !!e?.birthday || !!e?.ownershipInCompany || !!e?.phone || !!e?.ssn || !!e?.titleAtCompany || !!e?.addressStatus?.addressToCreate || e?.fileIds != null && e?.fileIds.length > 0;
-  }, qt = !Me(
-    st != null ? G(st) : null,
-    Ue != null ? G(Ue) : null
-  ), Wt = !Me(
-    it != null ? G(it) : null,
-    Pe != null ? G(Pe) : null
-  ), Ht = !Me(
-    at != null ? G(at) : null,
-    ze != null ? G(ze) : null
-  ), Qt = i.getFieldState(j).isDirty || Wt || Ht || Vt, We = i.getFieldState(C).isDirty && pt() || qt || Ft, ut = i.getFieldState(
-    `${p}`
-  ).isDirty, Mt = g?.primaryContactLocalData, Yt = () => {
-    W(s, "previous", !0);
-  }, Gt = () => {
-    const e = i.getValues(
-      p
-    ), n = {
-      street: e.street.addressString,
-      suite: e.suite,
-      city: e.city,
-      state: e.state,
-      postalCode: e.postalCode,
-      country: e.country.selectedOption ?? h.strings.empty,
-      secondaryInfo: e.secondaryInfo
-    };
-    y.trackOnboardingBillingAddressSave(n);
-  }, Kt = () => {
-    switch (ve(!1), s) {
-      case "link_payment_account":
-        ut ? setTimeout(() => {
-          const e = H();
-          w?.(e), lt() && ut ? (Gt(), _e(V, !1, !0), X({
-            fromStep: s,
-            shouldNavigate: !0,
-            stepDirection: "next"
-          })) : W(s, "next", !0);
-        }, 200) : W(s, "next", !0);
-        break;
-      case "qbo_connection":
-        W(s, "next", !0);
-        break;
-      case "company_officer":
-        if (We) {
-          const e = ft();
-          if (Se(() => {
-            const n = H();
-            w?.(n);
-          }), e.needsOtp && e.phoneNumber && he(e.phoneNumber)) {
-            const o = i.formState.errors[C]?.[te < 0 ? 0 : te], l = o?.phone, u = o != null && Object.keys(o).some(
-              (d) => d !== "phone" && o[d] != null
-            );
-            if (l != null && !u) {
-              et(e.phoneNumber);
-              return;
-            }
-          }
-          e.isValid && (_e(V, !1, !1), y.trackOnboardingCompanyOfficerSave(
-            mt(),
-            { legalName: g?.companyLegalName }
-          ), X({
-            fromStep: s,
-            shouldNavigate: !0,
-            stepDirection: "next"
-          }));
-        } else
-          W(s, "next", !0);
-        break;
-      case "company_details":
-        ve(!0);
-        {
-          const e = !(lt() && ge()), n = !Ut() && S.includes("qbo_connection");
-          if (e || n) {
-            e && (i.trigger(`${ne}`), i.trigger(`${p}`)), n && i.trigger(Ce), Se(() => {
-              const o = H();
-              w?.(o);
-            }), e ? Ve("link_payment_account") : n && Ve("qbo_connection");
-            return;
-          }
-        }
-        if (Qt || We || !Mt?.email) {
-          const e = Jt(), n = We ? ft() : { isValid: !0 };
-          Se(() => {
-            const o = H();
-            w?.(o);
-          }), e && n.isValid ? (Fe && (U(!0), Xt()), _e(
-            V,
-            !Fe,
-            !1
-          ), X({
-            fromStep: s,
-            shouldNavigate: !0,
-            stepDirection: "next"
-          })) : n.isValid || Ve("company_officer");
-        } else
-          Fe ? Zt() : W(s, "next", !0);
-        break;
-    }
-  }, Zt = () => {
-    v.fetchState !== "In-Progress" && ($e(), y.track(gt.onboardingSkipAndSave));
-  }, ft = () => {
-    const e = Q[V], n = e?.email ?? h.strings.empty, o = e?.phone ?? h.strings.empty, l = e?.ssn ?? h.strings.empty, u = e?.ownershipInCompany, d = te < 0 ? 0 : te, Qe = !!e?.firstName && !!e?.lastName;
-    let Y = !0, yt = !1;
-    return n && !Qe && (i.trigger(
-      [
-        `${C}.${d}.name.firstName`,
-        `${C}.${d}.name.lastName`
-      ],
-      { shouldFocus: s === "company_officer" }
-    ), Y = !1), (!n && pt() || bt.test(n) === !1) && (i.trigger(`${C}.${d}.email`, {
-      shouldFocus: s === "company_officer"
-    }), Y = !1), o && he(o) === !1 && (i.trigger(`${C}.${d}.phone`, {
-      shouldFocus: s === "company_officer"
-    }), Y = !1), o && he(o) === !0 && x === "unit" && (De.current !== "" && o === De.current || (yt = !0, i.setError(
-      `${C}.${d}.phone`,
-      {
-        type: "custom",
-        message: pe.commonSetUp.businessVerification.phoneValidationError
-      },
-      { shouldFocus: s === "company_officer" }
-    ), Y = !1)), u != null && u > 100 && (i.trigger(
-      `${C}.${d}.ownership`,
-      {
-        shouldFocus: s === "company_officer"
-      }
-    ), Y = !1), l && yn.test(l) === !1 && (i.trigger(`${C}.${d}.ssn`, {
-      shouldFocus: s === "company_officer"
-    }), Y = !1), { isValid: Y, needsOtp: yt, phoneNumber: o };
-  }, Jt = () => {
-    const e = g?.website?.toString() ?? h.strings.empty, n = g?.phone ?? h.strings.empty, o = g?.taxIdOrEIN ?? h.strings.empty, u = g?.primaryContactLocalData?.email ?? h.strings.empty;
-    let d = !0;
-    return e && Ct.test(e) === !1 && (i.trigger(`${j}.companyWebsite`, {
-      shouldFocus: s === "company_details"
-    }), d = !1), Ct.lastIndex = 0, n && he(n) === !1 && (i.trigger(`${j}.companyPhone`, {
-      shouldFocus: s === "company_details"
-    }), d = !1), (!u || bt.test(u) === !1) && (i.trigger(`${j}.primaryContactEmail`, {
-      shouldFocus: s === "company_details"
-    }), d = !1), o && mn.test(o) === !1 && (i.trigger(`${j}.companyTaxId`, {
-      shouldFocus: s === "company_details"
-    }), d = !1), d;
-  }, mt = () => {
-    const e = Q[V];
-    return {
-      email: e?.email ?? h.strings.empty,
-      birthday: e?.birthday?.toString(),
-      companyOwnership: e?.ownershipInCompany,
-      firstName: e?.firstName,
-      lastName: e?.lastName,
-      companyRole: e?.titleAtCompany,
-      phone: e?.phone,
-      formattedAddress: e?.addressStatus?.addressToCreate != null ? G(e?.addressStatus?.addressToCreate) : void 0,
-      documentTypeForVerification: e?.documentTypeSelectedForVerification
-    };
-  }, Xt = () => {
-    const e = g?.primaryContactLocalData;
-    y.trackBusinessVerificationSave(
-      mt(),
-      {
-        companyDescription: g?.companyDescription,
-        legalName: g?.companyLegalName,
-        phone: g?.phone,
-        website: g?.website?.toString(),
-        industry: g?.companyIndustry ?? h.strings.empty,
-        formattedAddress: g?.addressStatus?.addressToCreate != null ? G(
-          g?.addressStatus?.addressToCreate
-        ) : void 0
-      },
-      {
-        firstName: e?.firstName,
-        lastName: e?.lastName,
-        email: e?.email
-      },
-      "onboarding"
-    );
-  }, [He, en] = Z(!1);
-  return /* @__PURE__ */ a.jsxs(wn, { children: [
-    /* @__PURE__ */ a.jsxs($n, { windowSize: R, children: [
-      S.indexOf(s) >= 0 ? /* @__PURE__ */ a.jsx(
-        ln,
-        {
-          title: ct.sectionTitle,
-          showBackButton: !1,
-          backgroundColor: $t.colors.grey4,
-          style: {
-            zIndex: 4
-          },
-          showLeftSection: R !== "small",
-          titleStyle: {
-            display: "flex",
-            alignItems: "center"
-          },
-          navBarContainerStyles: {
-            paddingTop: de.sp0,
-            paddingBottom: de.sp0
-          },
-          source: "CustomerOnboardingDetailPage"
-        }
-      ) : /* @__PURE__ */ a.jsx(_n, { windowSize: R, children: /* @__PURE__ */ a.jsx(Fn, { windowSize: R, children: /* @__PURE__ */ a.jsx(Vn, {}) }) }),
-      /* @__PURE__ */ a.jsx(sn, { ...i, children: /* @__PURE__ */ a.jsx(Ln, { id: Pn(vt), children: S.map((e) => {
-        let n;
-        n = /* @__PURE__ */ a.jsx(
-          Ot,
-          {
-            connectedAccountProvider: x,
-            paymentAccount: M,
-            accountStatus: ot,
-            plaidConnectionDetails: Le,
-            sectionId: ne,
-            hasError: i.getFieldState(ne).error != null || fe && !ge(),
-            isValid: ge(),
-            analytics: y,
-            onFetchLinkTokenClick: Ae,
-            onEstablishConnectionClick: ye,
-            onUpdatePaymentAccountStatus: me,
-            onUpdatePaymentAccountLoginStatus: ae,
-            onEstablishConnectionSuccess: re,
-            cardPaymentView: I,
-            resetCardPaymentViewState: E,
-            updateCardPaymentModalState: $,
-            cardSetupInProgress: He,
-            subscriptionBillingAddressSectionId: p
-          }
-        );
-        let o = Te;
-        switch (e) {
-          case "link_payment_account":
-            n = /* @__PURE__ */ a.jsx(
-              Ot,
-              {
-                connectedAccountProvider: x,
-                paymentAccount: M,
-                accountStatus: ot,
-                plaidConnectionDetails: Le,
-                subscriptionBillingAddressSectionId: p,
-                sectionId: ne,
-                hasError: i.getFieldState(
-                  ne
-                ).error != null || fe && !ge(),
-                isValid: ge(),
-                analytics: y,
-                onFetchLinkTokenClick: Ae,
-                onEstablishConnectionClick: ye,
-                onUpdatePaymentAccountStatus: me,
-                onUpdatePaymentAccountLoginStatus: ae,
-                onEstablishConnectionSuccess: re,
-                updateCardPaymentModalState: $,
-                cardPaymentView: I,
-                resetCardPaymentViewState: E,
-                cardSetupInProgress: He,
-                googleAPIKey: N,
-                subscriptionBillingAddress: ee
-              }
-            );
-            break;
-          case "qbo_connection":
-            n = /* @__PURE__ */ a.jsx(
-              Dn,
-              {
-                sectionId: Ce,
-                hasError: i.getFieldState(Ce).error != null,
-                isAdmin: r,
-                isValid: je?.accounting[0]?.isValid ?? !1,
-                companyName: ce?.company.company.companyInfo.companyLegalName,
-                saveConnectionState: je?.saveConnectionState,
-                isQBOPopupOpen: Ee.isQBOPopupOpen,
-                handleOnConnectClick: Tt,
-                updateQBOPopupState: Nt
-              }
-            ), o = Ne;
-            break;
-          case "company_officer":
-            n = /* @__PURE__ */ a.jsx(
-              On,
-              {
-                companyOfficerLocalData: Q,
-                allNationalityCountries: Re,
-                isCompleted: nt.includes("company_officer"),
-                companyView: ce,
-                sectionId: C,
-                filesEndPoint: t.filesEndPoint,
-                authParams: t.authParams,
-                isRefreshingViewInBackground: k,
-                companyTitles: A,
-                isVerificationPopupOpen: _,
-                setIsVerificationPopupOpen: Ie,
-                onGetOtp: et,
-                onVerifyOtp: Pt,
-                onResendOtp: Bt,
-                onOfficerAddressClick: (l) => ie(
-                  l,
-                  Ue?.addressId
-                ),
-                updateFilesEntity: Xe,
-                onEditFileName: Je,
-                onDeleteFile: P,
-                verifiedPhoneNumber: De.current,
-                onPhoneVerified: _t,
-                isDisabled: v.fetchState === "In-Progress" ? "readonly" : void 0,
-                triggerError: tt
-              }
-            ), o = we;
-            break;
-          case "company_details":
-            n = /* @__PURE__ */ a.jsx(
-              In,
-              {
-                fileProps: {
-                  ...t,
-                  onEditFileName: Je,
-                  onDeleteFile: P,
-                  updateFilesEntity: Xe
-                },
-                sectionId: j,
-                companyIndustries: m.companyIndustries,
-                companyDetails: g,
-                isDisabled: v.fetchState === "In-Progress" ? "readonly" : void 0,
-                isCompleted: nt.includes("company_details"),
-                onCompanyAddressClick: (l) => {
-                  const u = ce?.company.company.companyOnboardingInfo.subscriptionBillingAddressId;
-                  Pe?.addressId == null && u != null ? ie(
-                    l,
-                    u
-                  ) : ie(
-                    l,
-                    Pe?.addressId
-                  );
-                },
-                onRegisteredAddressClick: (l) => ie(
-                  l,
-                  ze?.addressId
-                )
-              }
-            ), o = J;
-            break;
-        }
-        return /* @__PURE__ */ a.jsxs(
-          jn,
-          {
-            ref: o,
-            isVisible: s === e,
-            includeAnimation: s === "link_payment_account" || s === "qbo_connection" ? !Ee.isQBOPopupOpen : s === "company_officer" ? !_ : !0,
-            paddingBottom: e === "company_details" || e === "company_officer" ? b[6] : b[0],
-            stepAnimationDirection: z,
-            children: [
-              S.indexOf(s) >= 0 ? /* @__PURE__ */ a.jsx(En, { windowSize: R, children: ct.sectionSubTitle }) : null,
-              n
-            ]
-          },
-          e
-        );
-      }) }) }),
-      /* @__PURE__ */ a.jsx(
-        dn,
-        {
-          formId: `${vt}`,
-          style: {
-            width: R === "small" ? "auto" : "100%",
-            paddingTop: de.sp2,
-            paddingBottom: de.sp2
-          },
-          primaryBtn: {
-            onClick: Kt,
-            label: s === "company_details" ? h.footer.submit : rt.next,
-            isLoading: v.fetchState === "In-Progress",
-            isDisabled: v.fetchState === "In-Progress"
-          },
-          cancelBtn: {
-            onClick: Yt,
-            label: rt.back,
-            isDisabled: v.fetchState === "In-Progress" || S.indexOf(s) === 0
-          },
-          containerStyle: {
-            width: "auto",
-            justifyContent: "center"
-          },
-          showCancel: !0
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a.jsx(
-      gn,
-      {
-        handleConfirmCardSetupIntent: B,
-        updateCardPaymentModalState: $,
-        handleCreateCardSetupIntent: c,
-        handleAddCardPaymentSource: D,
-        cardPaymentView: I,
-        stripeKey: f,
-        isCardPaymentOpen: Ee.isCardPaymentPopupOpen,
-        handleResetCardPaymentErrorStatuses: ue,
-        cardSetupInProgress: He,
-        setCardSetupInProgress: en
-      }
-    )
-  ] });
-}, Tn = kt`
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`, Nn = kt`
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`, wn = O.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: calc(100% - ${xt}px);
-  padding-left: ${xt}px;
-  flex: 1;
-
-  ${(t) => t.theme.breakpoints.down("md")} {
-    width: 100%;
-    padding-left: ${de.sp0};
-  }
-`, $n = O.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-  min-height: 100vh;
-  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;
-  }
-`, _n = O.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  width: ${(t) => `calc(100% - ${be.topNavBarLeftRightSpace.valuePx(t.windowSize)})`};
-`, Vn = O.div``, Fn = O.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: ${(t) => be.topNavBarHeight.valuePx(t.windowSize)};
-`, jn = O.div`
-  min-height: 100%;
-  display: ${(t) => t.isVisible ? "flex" : "none"};
-  flex-direction: column;
-  padding-bottom: ${(t) => t.paddingBottom + "px"};
-  animation-name: ${(t) => t.stepAnimationDirection === "next" ? Tn : Nn};
-  ${(t) => t.includeAnimation ? `
-          animation-duration: 0.6s; 
-          animation-delay: 0s;  
-          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
-          animation-fill-mode: both;
-        ` : null}
-`, Ln = O.form`
-  padding-top: ${de.sp0};
-  flex: 1;
-`, En = O(fn)`
-  color: ${(t) => t.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${(t) => be.titleWidth.valuePx(t.windowSize)};
-  padding-top: ${(t) => be.subTitlePaddingTop.valuePx(t.windowSize)};
-  padding-bottom: ${(t) => be.subTitlePaddingBottom.valuePx(t.windowSize)};
-  text-align: ${(t) => t.windowSize === "small" ? "initial" : "center"};
-  width: 100%;
-  white-space: pre-line;
-`, Ge = (t, k) => {
-  const { companyDetailsLocalData: r, companyOfficerLocalData: m, companyView: A } = t, x = pe.commonSetUp.businessVerification, y = pe.companyPassport, I = A?.companyOfficers != null && A?.companyOfficers.length > 0;
-  return {
-    [j]: {
-      companyDescription: r?.companyDescription ?? pe.common.strings.empty,
-      ein: r?.companyFiles.find(
-        (f) => f.documentType === "tax_ein"
-      ),
-      companyId: r?.companyId,
-      syncToken: r?.syncToken,
-      companyLegalName: r?.companyLegalName,
-      companyWebsite: r?.website?.toString() ?? pe.common.strings.empty,
-      companyAddress: r?.addressStatus?.addressToCreate,
-      registeredAddress: r?.registeredAddressStatus?.addressToCreate,
-      companyIndustry: {
-        selectedOption: r?.companyIndustry,
-        allOptions: t.companyIndustries.map(
-          (f) => f.code
-        )
-      },
-      companyPhone: r?.phone,
-      companyTaxId: r?.taxIdOrEIN,
-      primaryContactName: {
-        firstName: r?.primaryContactLocalData?.firstName,
-        lastName: r?.primaryContactLocalData?.lastName
-      },
-      primaryContactEmail: r?.primaryContactLocalData?.email,
-      primaryContactUserId: r?.primaryContactLocalData?.userId,
-      primaryContactSyncToken: r?.primaryContactLocalData?.syncToken,
-      fileIds: r?.companyFiles.map(
-        (f) => f.fileId
-      ) ?? [],
-      certificateOfIncorporation: r?.companyFiles.find(
-        (f) => f.documentType === "certificate_of_incorporation"
-      ),
-      incDate: r?.incDate?.toDate(),
-      typeOfIncorporation: {
-        selectedOption: r?.typeOfIncorporation,
-        allOptions: y.companyIncInfo.allTypesOfIncorporation
-      }
-    },
-    [C]: Object.values(
-      m
-    ).map((f, N) => {
-      const c = f, B = un(
-        c?.documentTypeSelectedForVerification
-      );
-      return {
-        userId: c?.userId,
-        officerType: c?.officerType ?? `Officer_${N + 1}`,
-        name: {
-          firstName: c?.firstName,
-          lastName: c?.lastName
-        },
-        email: c?.email,
-        fileIds: c?.fileIds ?? [],
-        dob: c?.birthday?.toDate(),
-        nationalityCountryCode: At(
-          c?.nationalityCountryCode,
-          k.map(($) => $.countryCode)
-        ),
-        ssn: c?.ssn,
-        role: {
-          selectedOption: c?.titleAtCompany,
-          allOptions: x.allTypesOfRoles
-        },
-        phone: c?.phone,
-        ownership: c?.ownershipInCompany,
-        officerAddress: c?.addressStatus?.addressToCreate,
-        selectDocument: {
-          front: St(
-            !0,
-            c?.userFiles ?? [],
-            B
-          ),
-          back: St(
-            !1,
-            c?.userFiles ?? [],
-            B
-          ),
-          selectDocumentType: B
-        },
-        isSelectedForVerification: !I && N === 0 ? !0 : c?.isSelectedForVerification ?? !1,
-        userVerificationStatus: c?.userVerificationStatus,
-        syncToken: c?.syncToken,
-        isPhoneVerified: c?.isPhoneVerified,
-        otpChallenge: c?.otpChallenge
-      };
-    }),
-    [ne]: {
-      account: {
-        allOptions: [],
-        selectedOption: void 0
-      }
-    },
-    [p]: pn(
-      p,
-      t?.subscriptionBillingAddress
-    )[p],
-    [Ce]: {
-      connected: t.externalConnections?.accounting[0]?.isValid ?? !1
-    }
-  };
-}, to = (t) => {
-  const {
-    onboardingCustomerView: k,
-    cardPaymentView: r,
-    signedInUser: m,
-    currentTenant: A,
-    isOnAddressPage: x,
-    stripeKey: y,
-    googleAPIKey: I,
-    onUpdateStep: f,
-    onZeniLogoClick: N,
-    handleLogOutClick: c,
-    handleCockpitClick: B,
-    meetingUrl: $,
-    analytics: D,
-    handleCreateCardSetupIntent: E,
-    handleConfirmCardSetupIntent: ue,
-    handleFetchPaymentSources: Oe,
-    updateCardPaymentModalState: w,
-    resetCardPaymentViewState: Be,
-    handleResetCardPaymentErrorStatuses: R,
-    redirectToProductSuitePage: Te,
-    ...Ne
-  } = t, {
-    allSteps: J,
-    completedSteps: we,
-    halfCompletedSteps: xe,
-    currentStep: U,
-    fetchStatus: z
-  } = k, q = oe(U), _ = oe(J), [Ie, fe] = Z(!1), [ve, se] = Z([]), X = {
-    allSteps: J,
-    isOnAddressPage: x,
-    completedSteps: we,
-    halfCompletedSteps: xe,
-    errorSteps: ve,
-    currentStep: U,
-    fetchStatus: z,
-    signedInUser: m,
-    currentTenant: A,
-    onUpdateStep: (T) => {
-      f(T);
-    },
-    onZeniLogoClick: N,
-    handleLogOutClick: c,
-    handleCockpitClick: B,
-    setIsStepClicked: fe
-  };
-  L(() => {
-    if (q.current !== U) {
-      const T = q.current;
-      Ie === !0 && (D?.trackOnboardingCurrentStep(U, T), fe(!1)), q.current = U;
-    }
-  }, [U, Ie, D]), L(() => {
-    J.length !== _.current.length && (_.current = J);
-  }, [J]);
-  const ie = (T, Ae, me) => {
-    const ae = _.current.length, ye = _.current.indexOf(T);
-    switch (Ae) {
-      case "next": {
-        const re = (ye + 1) % ae, P = _.current[re];
-        q.current = P, f(P), me === !0 ? D.trackOnboardingNext(T, P) : D.trackOnboardingCurrentStep(P, T);
-        break;
-      }
-      case "previous": {
-        const re = (ye + ae - 1) % ae, P = _.current[re];
-        q.current = P, f(P), me === !0 ? D.trackOnboardingBack(T, P) : D.trackOnboardingCurrentStep(P, T);
-        break;
-      }
-    }
-  }, ke = z.fetchState === "In-Progress" || z.fetchState === "Not-Started";
-  return /* @__PURE__ */ a.jsx(Rn, { isOnAddressPage: x, children: x ? /* @__PURE__ */ a.jsx(It, { ...X }) : /* @__PURE__ */ a.jsxs(Un, { children: [
-    /* @__PURE__ */ a.jsx(It, { ...X }),
-    ke ? /* @__PURE__ */ a.jsx(Sn, { isNoStepsPage: !1 }) : /* @__PURE__ */ a.jsx(
-      Bn,
-      {
-        onboardingCustomerView: k,
-        analytics: D,
-        updateStepHandler: ie,
-        onUpdateStep: f,
-        handleCreateCardSetupIntent: E,
-        handleConfirmCardSetupIntent: ue,
-        updateCardPaymentModalState: w,
-        handleFetchPaymentSources: Oe,
-        cardPaymentView: r,
-        resetCardPaymentViewState: Be,
-        stripeKey: y,
-        googleAPIKey: I,
-        handleResetCardPaymentErrorStatuses: R,
-        redirectToProductSuitePage: Te,
-        onFormErrorsChange: se,
-        ...Ne
-      }
-    ),
-    ke ? null : /* @__PURE__ */ a.jsx(
-      cn,
-      {
-        isFooterRendered: !0,
-        meetingUrl: $,
-        analytics: D,
-        productType: "onboarding"
-      }
-    )
-  ] }) });
-}, Rn = O.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(t) => t.isOnAddressPage ? "fit-content" : "100%"};
-  height: 100vh;
-`, Un = O.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100vh;
-`;
-export {
-  to as default
-};