@zeniai/web-components 3.16.78 → 3.16.79

package/dist/CustomerOnboardingPage-DpSaH5bV.cjs

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

package/dist/CustomerOnboardingProductSuitePage-20m5lt1g.js

@@ -0,0 +1,348 @@
+import { u as O, j as e } from "./vendor-.pnpm-DtFedGku.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, j as y, l as N, hK as _, p as J, d as V, C as l, t as k, ah as Z, aj as G, H as K, V as q, J as Q } from "./index-D8643Kw5.js";
+import X from "./ConfettiBurst-BLDHX6QF.js";
+import { P as Y } from "./ProductsCarousel-DWzjb2Kp.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 = O(), { customerOnboardingPage: d } = te, p = (r) => {
+    const i = d.productSuite.messageBox;
+    if (!r)
+      return [i.withTaxAndPayroll, i.withCFO];
+    const { productSettings: D } = r, { isPayrollEnabled: g, isCfoEnabled: h, isTaxEnabled: u } = D;
+    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(Z)`
+  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(K)`
+  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(q)`
+  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(V)`
+  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(J)`
+  margin-left: ${t.sp2};
+`, ve = o.div`
+  width: 200px;
+  height: ${t.sp4};
+`;
+export {
+  Ee as CustomerOnboardingProductSuitePage,
+  Ee as default
+};