@zeniai/web-components 3.16.50 → 3.16.51

package/dist/CustomerOnboardingPage-BqRpUo3o.js

@@ -0,0 +1,1060 @@
+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-BY3Ymwq7.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-Ced64tAR.js";
+import { P as Ot, C as gn } from "./PaymentAccountSetupBillingAddressSection-tL7XJ7DM.js";
+import { D as xt, C as It, a as Sn } from "./CustomerOnboardingDetailPageSkeleton-DWjl7yrv.js";
+import { C as hn, a as Cn } from "./CompanyOfficerDetailsSection-BXU8YDaR.js";
+import { Q as bn } from "./QBOSetupSection-BXzQkbN_.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
+};