@zeniai/web-components 3.17.3 → 3.17.4

package/dist/CustomerOnboardingPage-DwU_tfJg.cjs

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

package/dist/CustomerOnboardingProductSuitePage-8hI0K5SC.js

@@ -0,0 +1,348 @@
+import { u as D, j as e } from "./vendor-.pnpm-B2klaOGU.js";
+import * as s from "react";
+import { useState as F } from "react";
+import o from "@emotion/styled";
+import { getProductSettingsString as R } from "@zeniai/client-epic-state";
+import { u as I, dD as W, dB as H, a as U, aE as A, S as t, e as y, L as N, hL as _, o as V, j as Z, C as l, t as k, af as J, ai as G, H as q, V as K, O as Q } from "./index-CR2Dmphx.js";
+import X from "./ConfettiBurst-DCjNuU1D.js";
+import { P as Y } from "./ProductsCarousel-DhxUUkWn.js";
+const ee = (n) => /* @__PURE__ */ s.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ s.createElement("path", { d: "M9.88423 20.4894C8.54548 20.3068 6.19267 19.6022 4.33971 17.8674C2.48676 16.1326 1.39881 13.7328 1.31521 11.1959C1.23161 8.65899 2.15921 6.19276 3.89394 4.33977C5.62866 2.48678 8.02843 1.39882 10.5653 1.31522C13.1022 1.23161 15.5684 2.15923 17.4213 3.89399C19.2743 5.62875 20.1176 7.48634 20.4166 9.67794", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M12.5596 7.50903H10.7439C10.39 7.50916 10.0465 7.62876 9.76901 7.84845C9.49152 8.06815 9.29632 8.37508 9.21501 8.71955C9.1337 9.06401 9.17105 9.42584 9.321 9.74644C9.47096 10.067 9.72474 10.3276 10.0412 10.486L11.6941 11.3133C12.0107 11.4717 12.2644 11.7323 12.4144 12.0529C12.5643 12.3735 12.6017 12.7353 12.5204 13.0798C12.4391 13.4242 12.2439 13.7312 11.9664 13.9509C11.6889 14.1706 11.3454 14.2902 10.9915 14.2903H9.16902", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M10.4437 14.2906V15.5621", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M11.2918 6.23773V7.50922", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M15.5285 21.8743L12 22.8825L13.0081 19.3539L20.2143 12.1476C20.3088 12.0531 20.437 12 20.5707 12C20.7044 12 20.8325 12.0531 20.9271 12.1476L22.7347 13.9542C22.7816 14.001 22.8189 14.0567 22.8443 14.1179C22.8697 14.1791 22.8828 14.2448 22.8828 14.3111C22.8828 14.3774 22.8697 14.4431 22.8443 14.5043C22.8189 14.5655 22.7816 14.6212 22.7347 14.668L15.5285 21.8743Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M18.5536 13.8079L21.074 16.3283", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M13.6133 18.7533L16.1337 21.2737", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), te = U.getLocalizedStrings(), Ee = ({
+  hasVerifiedBankAccount: n,
+  meetingUrl: b,
+  showUpdatePaymentDetailButton: m = !1,
+  isVisitingFirstTime: v = !1,
+  handleUpdatePaymentAddressDetailClick: $,
+  ...S
+}) => {
+  const c = I(), x = W().analytics, f = H(), L = f.loggedInUser, a = f.currentTenant, [C, P] = F(!1), { handleLogOutClick: T, onZeniLogoClick: B, handleCockpitClick: M } = S, z = D(), { customerOnboardingPage: d } = te, p = (r) => {
+    const i = d.productSuite.messageBox;
+    if (!r)
+      return [i.withTaxAndPayroll, i.withCFO];
+    const { productSettings: O } = r, { isPayrollEnabled: g, isCfoEnabled: h, isTaxEnabled: u } = O;
+    return g && h && u ? [i.withTaxAndPayroll, i.withCFO] : g && h ? [i.withPayroll, i.withCFO] : g && u ? [i.taxAndPayroll] : h && u ? [i.withTax, i.withCFO] : g ? [i.onlyPayroll] : h ? [i.onlyCFO] : u ? [i.onlyTax] : [i.default];
+  }, E = (r) => {
+    if ($(), !r)
+      return;
+    let i = "";
+    n ? i = "bank_account" : i = "credit_card", x.trackOnboardingClickUpdatePaymentDetails(
+      i,
+      R(r.productSettings)
+    );
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(oe, { children: /* @__PURE__ */ e.jsxs(ne, { windowSize: c, children: [
+      /* @__PURE__ */ e.jsx(ie, { windowSize: c, children: /* @__PURE__ */ e.jsx(
+        A,
+        {
+          title: d.productSuite.navTitle,
+          showBackButton: !1,
+          backgroundColor: z.colors.grey4,
+          style: {
+            zIndex: 5
+          },
+          source: "CustomerOnboardingProductSuitePage",
+          showLeftSection: c !== "small",
+          titleStyle: {
+            display: "flex",
+            alignItems: "center"
+          },
+          navBarContainerStyles: {
+            paddingTop: t.sp0,
+            paddingBottom: t.sp0
+          },
+          leftSideComponent: /* @__PURE__ */ e.jsx(ye, { children: /* @__PURE__ */ e.jsx(
+            ke,
+            {
+              "data-testid": y(
+                "zeni-logo-customer-onboarding-product-suite"
+              ),
+              onClick: B
+            }
+          ) }),
+          rightSideComponent: m ? /* @__PURE__ */ e.jsxs(
+            je,
+            {
+              "data-testid": y(
+                "update-to-payment-address-details"
+              ),
+              onClick: () => E(
+                a
+              ),
+              children: [
+                /* @__PURE__ */ e.jsx(we, {}),
+                /* @__PURE__ */ e.jsx(be, { className: "btnText", children: d.productSuite.updatePaymentDetails })
+              ]
+            }
+          ) : /* @__PURE__ */ e.jsx(ve, {})
+        }
+      ) }),
+      /* @__PURE__ */ e.jsxs(re, { windowSize: c, children: [
+        /* @__PURE__ */ e.jsx(
+          se,
+          {
+            style: {
+              gap: p(a).length > 1 ? t.sp2 : t.sp1,
+              padding: p(a).length > 1 ? `12px ${t.sp4} 12px ${t.sp4}` : `12px ${t.sp3} 12px ${t.sp3}`
+            },
+            children: /* @__PURE__ */ e.jsxs(ae, { children: [
+              /* @__PURE__ */ e.jsxs(w, { children: [
+                /* @__PURE__ */ e.jsx(le, { children: /* @__PURE__ */ e.jsx(ce, {}) }),
+                /* @__PURE__ */ e.jsx(j, { children: p(a)[0] })
+              ] }),
+              /* @__PURE__ */ e.jsx(w, { children: p(a).slice(1).map((r) => /* @__PURE__ */ e.jsx(j, { children: r }, r)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(de, { children: /* @__PURE__ */ e.jsx(pe, { children: d.productSuite.sectionTitle }) }),
+        /* @__PURE__ */ e.jsx(ge, { children: /* @__PURE__ */ e.jsx(
+          Y,
+          {
+            scale: 1,
+            showUpdatePaymentDetailButton: m,
+            stopCarousel: C
+          }
+        ) }),
+        /* @__PURE__ */ e.jsxs(
+          he,
+          {
+            href: "https://www.zeni.ai",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              /* @__PURE__ */ e.jsx(ue, { className: "discover-class", children: d.productSuite.sectionFooter }),
+              /* @__PURE__ */ e.jsx(me, { className: "discover-class" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx(xe, { children: /* @__PURE__ */ e.jsxs(fe, { children: [
+        /* @__PURE__ */ e.jsx(Ce, { windowSize: c, children: /* @__PURE__ */ e.jsx(
+          N,
+          {
+            signedInUser: L,
+            currentTenant: a,
+            onLogOutClick: T,
+            onCockpitClick: M
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(
+          _,
+          {
+            isFooterRendered: !1,
+            meetingUrl: b,
+            analytics: x,
+            productType: "onboarding_interim",
+            showPopup: C,
+            setShowPopup: P
+          }
+        )
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ e.jsx(X, { showConfetti: v })
+  ] });
+}, oe = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 100%;
+  overflow: visible;
+`, ne = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 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;
+  }
+`, ie = o.div`
+  position: fixed;
+  width: 100%;
+  top: ${t.sp0};
+  left: 0;
+  right: 0;
+  height: 62px;
+  padding: 0 ${t.sp2};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 3;
+`, re = o.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 86px 0 0 0;
+`, se = o.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  border-radius: 50px;
+  margin-bottom: ${t.sp7};
+  cursor: default;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: ${l.brandColorJadeLight};
+    opacity: 0.5;
+    z-index: 0;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+`, ae = o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`, w = o.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+`, le = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${k.largeRegular.lineHeight};
+  height: ${k.largeRegular.lineHeight};
+  border-radius: 50%;
+  outline: 1px solid ${l.brandColorJadeDark};
+  background-color: ${l.brandColorPearl};
+`, ce = o(J)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${l.brandColorSapphire};
+`, j = o(G)`
+  color: ${l.brandColorSapphire};
+  text-align: center;
+  margin-left: ${t.sp2};
+`, de = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: ${t.sp4};
+  cursor: default;
+`, pe = o(q)`
+  color: ${(n) => n.theme.colors.primary};
+  text-align: center;
+  margin-left: ${t.sp2};
+  margin-right: ${t.sp2};
+`, ge = o.div`
+  width: 1328px;
+  height: 512px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  margin-bottom: ${t.sp4};
+`, he = o.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  width: 100%;
+  cursor: pointer;
+  color: ${l.brandColorSapphire};
+  &:hover {
+    .discover-class {
+      color: ${(n) => n.theme.colors.primary};
+    }
+  }
+`, ue = o(K)`
+  color: inherit;
+  text-align: center;
+`, me = o(Q)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: inherit;
+  margin-left: 6px;
+  margin-top: ${t.sp1};
+`, xe = o.div`
+  width: 100%;
+  padding: 10px ${t.sp3};
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+`, fe = o.div`
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+`, Ce = o.div`
+  display: flex;
+  left: ${t.sp4};
+  bottom: ${t.sp3};
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+`, ye = o.div`
+  display: flex;
+`, ke = o(Z)`
+  height: ${t.sp4};
+  width: 102px;
+  color: ${(n) => n.theme.colors.primary};
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: -${t.sp5};
+`, we = o(ee)`
+  width: ${t.sp4};
+  min-width: ${t.sp4};
+  height: ${t.sp4};
+`, je = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  white-space: nowrap;
+  cursor: pointer;
+  color: ${(n) => n.theme.colors.hero};
+  &:hover {
+    .btnText {
+      color: ${(n) => n.theme.colors.primary};
+    }
+    svg {
+      color: ${(n) => n.theme.colors.primary};
+    }
+  }
+  margin-right: ${t.sp2};
+`, be = o(V)`
+  margin-left: ${t.sp2};
+`, ve = o.div`
+  width: 200px;
+  height: ${t.sp4};
+`;
+export {
+  Ee as CustomerOnboardingProductSuitePage,
+  Ee as default
+};