@zeniai/web-components 3.16.92 → 3.16.93

package/dist/CustomerOnboardingPage-D0p8khnC.js

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