@zeniai/web-components 3.16.49 → 3.16.51

package/dist/ChargeCardPromoPage-D-GfZxlC.cjs

@@ -0,0 +1,222 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./vendor-.pnpm-DHyNpoQL.cjs"),C=require("react"),J=require("@emotion/react"),r=require("@emotion/styled"),pe=require("@zeniai/client-epic-state"),e=require("./index-C5IoNVAR.cjs"),xe=require("./MeetingCalenderPopup-BRhfczuj.cjs"),me=require("./NavigationDots-BRq2rtdf.cjs"),R=require("./PromoBaseCards-Dvu5wSNk.cjs"),B=require("./usp-line-CnxyxnEe.cjs"),m={midContainerMarginBottom:new e.ResponsiveSized(e.sp[5],e.sp[7]),containerPaddingTopBottom:new e.ResponsiveSized(e.sp[0],e.sp[0]),containerPaddingLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),plasticCardMarginLeft:new e.ResponsiveSized(e.sp[6],120),businessTextRight:new e.ResponsiveSized(e.sp[2],13),businessTextBottom:new e.ResponsiveSized(e.sp[8],81),styledFullLogoRight:new e.ResponsiveSized(e.sp[2],13),chipLogoHeight:new e.ResponsiveSized(e.sp[4],39),visaLogoRight:new e.ResponsiveSized(e.sp[2],13),visaLogoBottom:new e.ResponsiveSized(e.sp[2],13),uspContainerMarginX:new e.ResponsiveSized(e.sp[6],e.sp[0]),midContainerGap:new e.ResponsiveSized(e.sp[4],84),iconContainerMinHeight:new e.ResponsiveSized(236,396),emptySectionHeight:new e.ResponsiveSized(e.sp[6],43),navigationBottom:new e.ResponsiveSized(e.sp[4],94),navigationLeft:new e.ResponsiveSized(192,244),carouselHeight:new e.ResponsiveSized(268,396),carouselMarginTop:new e.ResponsiveSized(54,e.sp[4]),carouselMarginLeft:new e.ResponsiveSized(120,e.sp[12]),buttonTrayGap:new e.ResponsiveSized(e.sp[3],e.sp[5]),termsOfAgreementMarginTop:new e.ResponsiveSized(e.sp[5],e.sp[10]),contactAdminContainerMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[10]),contactAdminContainerMarginBottom:new e.ResponsiveSized(e.sp[4],e.sp[0]),contactAdminContainerMarginLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[0])},w={promoBadgeText:new e.ResponsiveSizedStyle("standardRegular","largeRegular"),promoBadgeTextBold:new e.ResponsiveSizedStyle("standardBold","largeBold"),cardsContent:new e.ResponsiveSizedStyle("extraSmallRegular","smallRegular"),contactAdmin:new e.ResponsiveSizedStyle("extraSmallRegular","largeRegular"),uspText:new e.ResponsiveSizedStyle("smallRegular","standardRegular"),uspBoldText:new e.ResponsiveSizedStyle("smallMedium","standardMedium")},{common:M,spendManagement:{chargeCard:{chargeCardsPromo:o}}}=e.appLocale.getLocalizedStrings(),ue=({meetingUrl:t,companyLegalName:a,chargeCardSetupView:n,showEnableCardButton:i,controllerEmails:p,isCreditCardProductVisible:x,isDebitCardFeatureEnabled:c,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:h,admins:v,cashbackRate:$,cardPromoType:u="credit",onSetupButtonClick:l,onBackClick:d,onClickMenuIcon:D,onSetupChargeCardSuccess:U,onExpressInterestClick:ne})=>{const oe=s.useTheme(),F=e.useGlobalInfoContext(),f=e.useWindowSizeContext(),W=e.useToolkitContext().analytics,{chargeCardTermsDetails:P,companyChargeCardInfo:j,companyLocaleInfo:A}=n,H=e.usePrevious(P?.fetchStatus.fetchState),[re,N]=C.useState(!1),ie=()=>{W.trackCardsPromoPageClicked("schedule demo"),W.trackCardsScheduleDemoClick(p,{isCreditCardOffered:x,isDebitCardOffered:c,isDebitCardEnabled:g,isCreditCardEnabled:h},"Cards Promo"),N(!0)},ae=j!=null&&A!=null?e.amountToString("0,0",{amount:j.chargeCardsCreditAccountLimit,currencyCode:A.currencyCode,currencySymbol:A.currencySymbol}):void 0;C.useEffect(()=>{H==="In-Progress"&&P?.fetchStatus.fetchState==="Completed"&&U()},[H,U,P?.fetchStatus]);const q=pe.hasChargeCardAdminLevelAccess(F.loggedInUserRoleMap),de=e.isZeniFinopsRoles(F),L=u==="credit"&&j?.isCompanyInterestedInChargeCard===!1&&j.chargeCardsCreditAccountLimit===0,I=u==="credit"&&j?.isCompanyInterestedInChargeCard===!0&&j.chargeCardsCreditAccountLimit===-1,k=u==="credit"&&j?.isCompanyInterestedInChargeCard===!0&&j.chargeCardsCreditAccountLimit===0,le=u==="credit"&&j?.isCompanyInterestedInChargeCard===!0&&j.chargeCardsCreditAccountLimit>0,{expressInterestInChargeCardFetchState:ce}=n,G=L?o.getPreApprovedNow:i?o.enableCardsButton:o.setupCardsButton;return s.jsxRuntimeExports.jsxs(Ce,{children:[s.jsxRuntimeExports.jsx(e.NavBar,{title:o.title[u],backgroundColor:oe.colors.grey4,onBackClick:d,showBackButton:!0,showMenuIcon:f==="medium-compact"||f==="small",onClickMenuIcon:D,style:{zIndex:9},source:"ChargeCardPromoPage"}),re===!0?s.jsxRuntimeExports.jsx(xe.MeetingCalenderPopup,{onCancelClick:()=>{N(!1)},meetingUrl:t}):null,s.jsxRuntimeExports.jsx(ve,{windowSize:f,children:q===!0?s.jsxRuntimeExports.jsxs(fe,{children:[s.jsxRuntimeExports.jsxs(we,{children:[s.jsxRuntimeExports.jsx(he,{isApproved:le,creditAmount:ae,cardPromoType:u,isUnderReview:k,isRejected:I,showExpressInterest:L}),s.jsxRuntimeExports.jsx(Q,{cardPromoType:u,cashbackRate:$})]}),s.jsxRuntimeExports.jsx(Z,{showEnableCardButton:i,cardPromoType:u,isUnderReview:k,isRejected:I,showExpressInterest:L})]}):s.jsxRuntimeExports.jsx(K,{companyLegalName:a,cards:[],admins:v,cashbackRate:$,hasZeniFinopsRoles:de,cardPromoType:u})}),q&&!(k||I)?s.jsxRuntimeExports.jsxs(Be,{windowSize:f,children:[s.jsxRuntimeExports.jsx(e.Button,{variant:"secondary",label:o.scheduleDemoButton,style:{width:166},onClick:ie,"data-testid":e.generateDataTestId("schedule-demo-button")}),s.jsxRuntimeExports.jsx(Re,{windowSize:f,children:o.orText}),s.jsxRuntimeExports.jsx(e.Button,{variant:"primary",label:G,style:{minWidth:166},loading:n.chargeCardTermsDetails?.fetchStatus.fetchState==="In-Progress"||ce==="In-Progress",onClick:G===o.getPreApprovedNow?ne:()=>l(u),"data-testid":e.generateDataTestId("enable-card-button")})]}):null]})},ge=({admins:t})=>{const a=t.flatMap(i=>i.user?.firstName+" "+i.user?.lastName).join(", "),n=e.useWindowSizeContext();return s.jsxRuntimeExports.jsxs(De,{windowSize:n,children:[s.jsxRuntimeExports.jsx(_,{underline:!1,windowSize:n,children:o.noCardAssigned.pre}),s.jsxRuntimeExports.jsx(e.Tooltip,{title:a,placement:"top-start",style:{padding:`2px ${e.Space.sp2}`},children:s.jsxRuntimeExports.jsx(_,{underline:!0,windowSize:n,children:o.noCardAssigned.tooltip})}),s.jsxRuntimeExports.jsx(_,{underline:!1,windowSize:n,children:o.noCardAssigned.post})]})},Z=({cardPromoType:t,showEnableCardButton:a,isUnderReview:n,isRejected:i,showExpressInterest:p,isCardUser:x=!1})=>{const c=e.useWindowSizeContext();return s.jsxRuntimeExports.jsx(Te,{windowSize:c,children:s.jsxRuntimeExports.jsx(e.TermsOfAgreement,{topTermLabel:t==="credit"||t==="debit_and_credit"?o.terms.checkingAccountTerm:void 0,buttonTermLabel:n===!0||i===!0||x===!0?void 0:p===!0?o.terms.approvalTerm:a?o.terms.alternateTerm1:o.terms.terms1,showEndIcon:!1,showTerms:i===!1||x===!1,style:{marginTop:m.termsOfAgreementMarginTop.valuePx(c)}})})},he=({isApproved:t,cardPromoType:a,creditAmount:n,isUnderReview:i,isRejected:p,showExpressInterest:x})=>{const c=e.useWindowSizeContext(),g=a==="debit_and_credit"?o.promoTextDebitCreditCard:a==="debit"?o.promoTextDebitCard:o.promoTextCreditCard,h=t?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[o.promoBadgeText.approved,s.jsxRuntimeExports.jsx(X,{children:n}),o.creditLimit,M.strings.space]}):x?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[o.promoBadgeText.nonPreApproved.get,s.jsxRuntimeExports.jsx(ye,{children:o.promoBadgeText.nonPreApproved.scale}),o.promoBadgeText.nonPreApproved.doubleStarred,M.strings.space,o.promoBadgeText.nonPreApproved.higherLimits]}):i?o.promoBadgeText.underReview:p?o.promoBadgeText.rejected:s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[o.promoBadgeText.preApproved,s.jsxRuntimeExports.jsx(X,{children:n}),o.creditLimit,M.strings.space]});return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:c==="small"?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(te,{children:g}),s.jsxRuntimeExports.jsx(se,{children:o.promoSubText})]}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(V,{children:g}),s.jsxRuntimeExports.jsx(ee,{children:o.promoSubText})]})}),s.jsxRuntimeExports.jsxs(Ee,{cardPromoType:a,hideBadge:n==null||a==="debit",windowSize:c,children:[i||p||x?null:s.jsxRuntimeExports.jsx(Oe,{}),s.jsxRuntimeExports.jsx(be,{windowSize:c,children:h})]})]})},K=({companyLegalName:t,cards:a,admins:n,cashbackRate:i,hasZeniFinopsRoles:p,cardPromoType:x="credit"})=>{const c=e.useWindowSizeContext(),g=x==="debit_and_credit"?o.promoTextDebitCreditCard:x==="debit"?o.promoTextDebitCard:o.promoTextCreditCard;return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[c==="small"?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(te,{children:g}),s.jsxRuntimeExports.jsx(se,{children:o.promoSubText})]}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(V,{children:g}),s.jsxRuntimeExports.jsx(ee,{children:o.promoSubText})]}),a.length===0?s.jsxRuntimeExports.jsx(_e,{windowSize:c}):s.jsxRuntimeExports.jsx(je,{cards:a,companyLegalName:t}),s.jsxRuntimeExports.jsx(Q,{cardPromoType:x,cashbackRate:i}),p?null:s.jsxRuntimeExports.jsx(ge,{admins:n}),s.jsxRuntimeExports.jsx(Z,{isCardUser:!0,showEnableCardButton:!1,cardPromoType:x})]})},je=({cards:t,companyLegalName:a})=>{const n=s.useTheme(),i=e.useWindowSizeContext();let p="",x;if(t.length===1){x=t[0].cardCreatedByUser.photo;const c=t[0].cardCreatedByUser.firstName+" "+t[0].cardCreatedByUser.lastName;p=o.cardAssigned.singleCreditCard.replace("__issuing-user__",c).replace("__company-name__",a)}else p=o.cardAssigned.multipleCreditCards.replace("__company-name__",a);return s.jsxRuntimeExports.jsxs(Fe,{children:[x!=null?s.jsxRuntimeExports.jsx($e,{width:e.Space.sp5,height:e.Space.sp5,style:{paddingTop:i==="small"?e.Space.sp1:e.Space.sp0},src:x.href,alt:e.appLocale.getLocalizedStrings().cockpit.userProfileAltText,onError:({currentTarget:c})=>{c.onerror=null,c.src=e.AvatarSVG},loading:"lazy"}):null,s.jsxRuntimeExports.jsx(Ue,{windowSize:i,mode:n.mode,children:s.jsxRuntimeExports.jsx(We,{windowSize:i,children:p})})]})},O=({windowSize:t,cardPromoType:a})=>{let n=o.businessText;return a==="debit"&&(n=`${n} ${o.debit}`),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:a==="debit_and_credit"?s.jsxRuntimeExports.jsx(Se,{}):s.jsxRuntimeExports.jsxs(Ae,{windowSize:t,children:[s.jsxRuntimeExports.jsx(R.MetalBaseCard,{cardPromoType:a,cardText:n,shouldAnimate:!0,showChip:!0,forDashboard:!1,forListPage:!1}),s.jsxRuntimeExports.jsx(R.PlasticBaseCard,{cardPromoType:a,cardText:n,showChip:!0,forDashboard:!1,shouldAnimate:!0,forListPage:!1})]})})},Q=({cardPromoType:t,cashbackRate:a})=>{const n=e.useWindowSizeContext(),i=o.benefits;return s.jsxRuntimeExports.jsxs(ze,{windowSize:n,children:[n==="small"?s.jsxRuntimeExports.jsx(O,{windowSize:n,cardPromoType:t}):null,s.jsxRuntimeExports.jsxs(Pe,{windowSize:n,children:[s.jsxRuntimeExports.jsxs(b,{windowSize:n,children:[s.jsxRuntimeExports.jsx(z,{children:s.jsxRuntimeExports.jsx(ke,{})}),s.jsxRuntimeExports.jsxs(T,{children:[s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item1.pre}),s.jsxRuntimeExports.jsx(y,{windowSize:n,children:i.item1.bold.replace("__cashback__",(a*100).toFixed(2))}),s.jsxRuntimeExports.jsx(S,{windowSize:n,children:`${t==="credit"||t==="debit_and_credit"?i.singleStarred:""}${i.item1.post}`})]})]}),s.jsxRuntimeExports.jsxs(b,{windowSize:n,children:[s.jsxRuntimeExports.jsx(z,{children:s.jsxRuntimeExports.jsx(Le,{})}),s.jsxRuntimeExports.jsxs(T,{children:[s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item2.pre}),s.jsxRuntimeExports.jsx(y,{windowSize:n,children:i.item2.bold}),s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item2.post})]})]}),s.jsxRuntimeExports.jsxs(b,{windowSize:n,children:[s.jsxRuntimeExports.jsx(z,{children:s.jsxRuntimeExports.jsx(Me,{})}),s.jsxRuntimeExports.jsxs(T,{children:[s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item3.pre}),s.jsxRuntimeExports.jsx(y,{windowSize:n,children:i.item3.bold}),s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item3.post})]})]}),s.jsxRuntimeExports.jsxs(b,{windowSize:n,children:[s.jsxRuntimeExports.jsx(z,{children:s.jsxRuntimeExports.jsx(Ie,{})}),s.jsxRuntimeExports.jsxs(T,{children:[s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item4.pre}),s.jsxRuntimeExports.jsx(y,{windowSize:n,children:i.item4.bold}),s.jsxRuntimeExports.jsx(S,{windowSize:n,children:i.item4.post})]})]})]}),n==="small"?null:s.jsxRuntimeExports.jsx(O,{windowSize:n,cardPromoType:t})]})};let E;const Se=()=>{const t=e.useWindowSizeContext(),a=s.useTheme(),[n,i]=C.useState(0),[p,x]=C.useState(!1),c=o.businessText,g=`${c} ${o.debit}`,h=[{id:1,cardType:"debit",cardText:g},{id:2,cardType:"debit",cardText:g},{id:3,cardType:"credit",cardText:c},{id:4,cardType:"credit",cardText:c}];C.useEffect(()=>(p||(E=setInterval(()=>{i(l=>{const d=l+1;return d===h.length?(x(!0),0):d})},2e3)),()=>clearInterval(E)),[p,h.length]),C.useEffect(()=>{p&&E!=null&&clearInterval(E)},[p]);const v=(l,d)=>{switch((l-n+h.length)%h.length){case 0:return{transform:`translate(0,${d?"100%":0}) scale(1)`,zIndex:d?5:6,opacity:1,transition:"transform 0.4s"};case 1:return{transform:`translate(35%, ${d?"80%":"5%"}) scale(0.75)`,zIndex:d?4:5,opacity:1,transition:"all 0.4s"};case 2:return{transform:`translate(35%,${d?"80%":"5%"}) scale(0.75)`,zIndex:d?3:4,opacity:0,transition:"transform 0.4s 0.2s, opacity 0.4s 0.0s"};case 3:return{transform:`translate(-35%, ${d?"80%":"5%"}) scale(0.75)`,zIndex:d?4:5,opacity:1,transition:"all 0.4s"};default:return}},$=l=>{const d=v(l,!0);return{...d,transform:`${d?.transform} scaleY(-1)`,opacity:1,transition:"transform 0s 0s, z-index 0s 0s"}},u=l=>{p||x(!0),i(l)};return s.jsxRuntimeExports.jsxs(He,{windowSize:t,children:[s.jsxRuntimeExports.jsx(Ne,{windowSize:t,children:h.map((l,d)=>s.jsxRuntimeExports.jsxs(qe,{children:[s.jsxRuntimeExports.jsx(Y,{isReflection:!1,style:{...v(d,!1)},onClick:()=>u(d),children:d===0||d===2?s.jsxRuntimeExports.jsx(R.MetalBaseCard,{cardPromoType:l.cardType,cardText:l.cardText,shouldAnimate:!1,showChip:!0,forDashboard:!1,forListPage:!1,style:{borderColor:a.colors.grey2,...a.mode==="light"&&{borderBottom:"none"}}}):s.jsxRuntimeExports.jsx(R.PlasticBaseCard,{cardPromoType:l.cardType,cardText:l.cardText,shouldAnimate:!1,showChip:!0,forDashboard:!1,forListPage:!1,style:{borderColor:a.colors.grey2,...a.mode==="light"&&{borderBottom:"none"}}})},l.id),s.jsxRuntimeExports.jsx(Y,{isReflection:!0,style:{...$(d)},children:d===0||d===2?s.jsxRuntimeExports.jsx(R.MetalBaseCard,{cardPromoType:l.cardType,cardText:l.cardText,shouldAnimate:!1,forDashboard:!1,showChip:!0,forListPage:!1,style:{border:"none",opacity:.1,maskImage:"linear-gradient(to top, black, transparent 90%)",WebkitMaskImage:"linear-gradient(to top, black, transparent 90%)"}}):s.jsxRuntimeExports.jsx(R.PlasticBaseCard,{cardPromoType:l.cardType,cardText:l.cardText,showChip:!0,shouldAnimate:!1,forDashboard:!1,forListPage:!1,style:{border:"none",opacity:.1,maskImage:"linear-gradient(to top, black, transparent)",WebkitMaskImage:"linear-gradient(to top, black, transparent)"}})},`reflection-${l.id}`)]},l.id))}),p&&s.jsxRuntimeExports.jsx(me.NavigationDots,{numberOfDots:h.length,activeIndex:n,handleClick:i,promoColor:a.colors.primary,promoColorHover:a.colors.grey5,spendManagementPromoCardActive:!0,dotStyle:{width:e.Space.sp2,height:e.Space.sp2},style:{cursor:"default",position:"absolute",bottom:m.navigationBottom.valuePx(t),left:m.navigationLeft.valuePx(t),zIndex:7}})]})},Ce=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+`,Re=r(e.SmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+`,we=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,fe=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+`,ve=r.div`
+  padding-top: ${t=>m.containerPaddingTopBottom.valuePx(t.windowSize)};
+  padding-bottom: ${t=>m.containerPaddingTopBottom.valuePx(t.windowSize)};
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+`,V=r(e.H4Regular)`
+  max-width: 927px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: ${e.Space.sp7} ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp0};
+  color: ${t=>t.theme.colors.primary};
+`,ee=r(e.H6Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin: auto;
+  margin-top: ${e.Space.sp2};
+`,te=r(e.H5Regular)`
+  margin: auto;
+  max-width: 343px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  flex-wrap: wrap;
+  padding: ${e.Space.sp5} ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp0};
+  color: ${t=>t.theme.colors.primary};
+`,se=r(e.LargeRegular)`
+  max-width: 314px;
+  margin: auto;
+  color: ${t=>t.theme.colors.primary};
+  padding: 6px ${e.Space.sp3} ${e.Space.sp0} ${e.Space.sp3};
+  text-align: center;
+  margin-top: 6px;
+`,$e=r.img`
+  border-radius: 50%;
+  justify-content: center;
+  color: ${t=>t.theme.colors.hero};
+`,Ee=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: ${e.Space.sp2} ${e.Space.sp3};
+  background-color: ${t=>t.theme.colors.grey3};
+  border-radius: 96px;
+  margin-top: ${e.Space.sp4};
+  margin-left: ${t=>t.windowSize==="small"?e.Space.sp3:"auto"};
+  margin-right: ${t=>t.windowSize==="small"?e.Space.sp3:"auto"};
+  margin-bottom: ${t=>t.cardPromoType==="debit_and_credit"&&t.windowSize==="small"?e.Space.sp0:e.Space.sp6};
+  width: fit-content;
+  gap: ${e.Space.sp1};
+  ${t=>t.hideBadge&&`
+    visibility: hidden;
+    `}
+`,be=r(e.LargeRegular)`
+  color: ${t=>t.theme.mode==="dark"?e.Colors.brandColorJade:e.Colors.brandColorSapphire};
+  text-align: ${t=>t.windowSize==="small"?"left":"center"};
+  ${t=>`${w.promoBadgeText.style(t.windowSize)}`};
+  span {
+    ${t=>`${w.promoBadgeTextBold.style(t.windowSize)}`};
+  }
+`,ye=r.span``,X=r.span`
+  color: ${e.Colors.success};
+`,ze=r.div`
+  display: flex;
+  gap: ${t=>m.midContainerGap.valuePx(t.windowSize)};
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  align-items: center;
+  justify-content: center;
+`,Te=r.div`
+  display: flex;
+  flex-direction: column;
+`,Be=r.div`
+  border-top: 1px solid ${t=>t.theme.colors.grey3};
+  padding: ${e.Space.sp2} ${e.Space.sp3};
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  row-gap: ${e.Space.sp2};
+  background-color: ${t=>t.theme.colors.grey5};
+  gap: ${t=>m.buttonTrayGap.valuePx(t.windowSize)};
+`,Pe=r.div`
+  width: ${t=>t.windowSize==="small"?"auto":"288px"};
+  display: flex;
+  flex-direction: column;
+  margin-left: ${t=>m.uspContainerMarginX.valuePx(t.windowSize)};
+  margin-right: ${t=>m.uspContainerMarginX.valuePx(t.windowSize)};
+  z-index: 8;
+`,Ae=r.div`
+  display: flex;
+  justify-content: ${t=>t.windowSize==="small"?"center":"flex-start"};
+  min-height: ${t=>m.iconContainerMinHeight.valuePx(t.windowSize)};
+  align-items: center;
+  min-width: 480px;
+`,b=r.div`
+  border-radius: ${e.Space.sp12};
+  border: ${t=>`1px solid ${t.theme.colors.grey2}`};
+  padding: ${t=>t.windowSize==="small"?`${e.Space.sp2} ${e.Space.sp4} ${e.Space.sp2} ${e.Space.sp0}`:`${e.Space.sp3} ${e.Space.sp5} ${e.Space.sp3} ${e.Space.sp0}`};
+  background: ${t=>t.theme.colors.grey5};
+  position: relative;
+  margin-bottom: ${e.Space.sp3};
+  display: flex;
+  align-items: center;
+  text-align: start;
+  width: ${t=>t.windowSize==="small"?"288px":"100%"};
+  min-height: ${t=>t.windowSize!=="small"?"83px":"44px"};
+  box-sizing: ${t=>t.windowSize==="small"?"unset":"border-box"};
+`,S=r(e.StandardRegularSp)`
+  color: ${t=>t.theme.colors.champion};
+  ${t=>`${w.uspText.style(t.windowSize)}`};
+`,y=r(e.StandardMediumSp)`
+  color: ${t=>t.theme.colors.champion};
+  ${t=>`${w.uspBoldText.style(t.windowSize)}`};
+`,z=r.div``,T=r.div`
+  padding-left: ${e.Space.sp3};
+`,Le=r(B.SvgUspLine)`
+  color: ${e.Colors.graphColor16Dark};
+`,Ie=r(B.SvgUspLine)`
+  color: ${e.Colors.alert};
+`,ke=r(B.SvgUspLine)`
+  color: ${e.Colors.graphColor11};
+`,Me=r(B.SvgUspLine)`
+  color: ${e.Colors.success};
+`,_e=r.div`
+  height: ${t=>m.emptySectionHeight.valuePx(t.windowSize)};
+  ${t=>t.windowSize==="small"?null:J.css`
+          margin-top: ${e.Space.sp4};
+          margin-bottom: ${e.Space.sp6};
+        `}
+`,De=r(e.LargeRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin-top: ${t=>m.contactAdminContainerMarginTop.valuePx(t.windowSize)};
+  margin-bottom: ${t=>m.contactAdminContainerMarginBottom.valuePx(t.windowSize)};
+  margin-left: ${t=>m.contactAdminContainerMarginLeftRight.valuePx(t.windowSize)};
+  margin-right: ${t=>m.contactAdminContainerMarginLeftRight.valuePx(t.windowSize)};
+  text-align: center;
+`,_=r(e.LargeRegularSp)`
+  ${t=>`${w.contactAdmin.style(t.windowSize)}`};
+  text-decoration: ${t=>t.underline?"underline":"none"};
+  cursor: ${t=>t.underline?"default":null};
+`,Ue=r.div`
+  color: ${t=>t.mode==="dark"?t.theme.colors.brandColorJade:t.theme.colors.brandColorSapphire};
+`,Fe=r.div`
+  background-color: ${t=>t.theme.colors.grey3};
+  padding: ${e.Space.sp2} ${e.Space.sp3};
+  display: flex;
+  gap: ${e.Space.sp2};
+  margin: auto;
+  max-width: fit-content;
+  border-radius: 96px;
+  margin-top: ${e.Space.sp4};
+  margin-bottom: ${e.Space.sp6};
+`,We=r.span`
+  ${t=>`${w.cardsContent.style(t.windowSize)}`};
+`,He=r.div`
+  display: flex;
+  flex-direction: column;
+  min-height: ${t=>m.carouselHeight.valuePx(t.windowSize)};
+  min-width: 480px;
+  position: relative;
+`,Ne=r.div`
+  position: relative;
+  margin-top: ${t=>m.carouselMarginTop.valuePx(t.windowSize)};
+  margin-left: ${t=>m.carouselMarginLeft.valuePx(t.windowSize)};
+`,qe=r.div`
+  position: relative;
+  overflow: visible;
+`,Y=r.div`
+  position: absolute;
+  ${t=>t.isReflection&&`
+  background-color: ${t.theme.colors.grey4};
+  clip-path: inset(16% 0 0 0);
+  `}
+`,Ge=J.keyframes`
+  0% {
+    left: -${e.Space.sp6};
+  }
+  50% {
+    left: calc(100% + ${e.Space.sp6});
+  }
+  100% {
+    left: calc(100% + ${e.Space.sp6});
+  }
+`,Oe=r.div`
+  position: absolute;
+  background:
+    ${e.Colors.promoCardGradient1Strong}, ${e.Colors.promoCardGradient2Strong};
+  width: ${e.Space.sp10};
+  z-index: 3;
+  height: 100%;
+  transform: skew(15deg);
+  animation: ${Ge} 4s linear infinite;
+`;exports.ChargeCardPromoUserContent=K;exports.default=ue;

package/dist/ChargeCardSetupPage-5-47MrwS.js

@@ -0,0 +1,362 @@
+import { u as Ve, g as Fe, h as Re, b as M, j as t, D as ze, F as _e } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useState as We, useMemo as $e, useEffect as v } from "react";
+import x from "@emotion/styled";
+import { isVerifiedPaymentAccountProviderStatusCode as He } from "@zeniai/client-epic-state";
+import { u as Le, dB as Ne, aD as G, a as qe, C as Ue, R as r, aE as Ee, A as Me, gl as Ge, S as z, t as Je, eN as Ke, ap as Qe, D as a, p as Xe } from "./index-Ced64tAR.js";
+import { H as Ye } from "./HelpButton-BY3Ymwq7.js";
+import { S as Ze } from "./SetUpDefaultSection-C944LR7Y.js";
+import { S as et, u as J } from "./SpendMgmtSetupAccountSection-D7RNQvNU.js";
+import { L as tt } from "./LabeledControlledCheckBoxField-BklmcaDu.js";
+import { U as ot } from "./UploadAdditionalDocumentOverlay-Djewfdeg.js";
+const s = {
+  titleWidth: new r(343, 580, 726, 826),
+  setupDetailsRowGap: new r(12, a[5], a[5]),
+  sectionRowGap: new r(a[5], a[9], a[9]),
+  iconWidthHeight: new r(20, a[4]),
+  subTitlePaddingTop: new r(12, a[3]),
+  subTitlePaddingBottom: new r(a[3], a[3]),
+  overlayWidth: new r(100, 100, 59),
+  checkBoxTop: new r(a[1], a[0])
+}, K = "chargeCardSetUpPage", f = "payAccount", { commonSetUp: nt, spendManagement: it } = qe.getLocalizedStrings(), { chargeCard: Y } = it, { chargeCardSetUp: p } = Y, { setUp: _ } = nt, Ct = ({
+  autoPayThreshold: e,
+  isDisabled: b,
+  meetingUrl: T,
+  isEarlyPayEnabled: m,
+  chargeCardSetUpView: i,
+  connectedAccountProvider: Z,
+  filesEndPoint: ee,
+  authParams: te,
+  isAccountsEnabled: oe,
+  isDebitCardOnlyEnabled: B,
+  isCreditCardOnlyEnabled: ne,
+  accountsPromoConfig: ie,
+  onFetchLinkTokenClick: ae,
+  onBackClick: se,
+  onEnableChargeCardClick: ce,
+  onUpdateChargeCardClick: le,
+  onBusinessVerificationSectionClick: re,
+  onUpdatePaymentAccountStatus: de,
+  onUpdatePaymentAccountLoginStatus: ue,
+  onUpdatePrimaryFundingAccount: pe,
+  onUpdateAutoPayClick: fe,
+  onEstablishConnectionClick: me,
+  onEstablishConnectionSuccess: ge,
+  onClickMenuIcon: he,
+  onEnableChargeCardSuccess: C,
+  onEditFileName: ye,
+  onDeleteFile: Se,
+  updateFilesEntity: xe,
+  onCompanyOfficerUpdated: be,
+  onSendForVerificationClick: Ce,
+  onSignUpClick: we
+}) => {
+  const g = Ve(), n = Le(), D = Ne().analytics, [w, h] = We(!1), {
+    fetchState: y,
+    companyBillPayInfo: W,
+    isRefreshingViewInBackground: Ae,
+    updateStatus: d,
+    accountUpdateStatus: Pe,
+    plaidConnectionDetails: ve,
+    allBankAccounts: Te,
+    companyChargeCardInfo: k,
+    companyDebitCardInfo: $,
+    selectedCompanyOfficer: c,
+    primaryFundingAccount: l,
+    allFundingAccounts: H
+  } = i, L = G(y), A = G(d.fetchState), j = Fe({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: $e(
+      () => Q(i),
+      [i]
+    ),
+    values: Q(i)
+  }), Be = j.handleSubmit(ce), De = async (S, P) => {
+    const o = P[f];
+    if (S.includes(f))
+      if (S.includes("fundingAccount")) {
+        if (o.fundingAccount.selectedOption != null && l?.id != o.fundingAccount.selectedOption) {
+          const u = H.find(
+            (R) => R.id === o.fundingAccount.selectedOption
+          );
+          u != null && pe(
+            o.fundingAccount.selectedOption,
+            u.accType
+          );
+        }
+      } else if (o.account.selectedOption != null && l?.id != null && l?.zeniAccountId != o.account.selectedOption) {
+        const u = o.account.allOptions.find(
+          (R) => R.value === o.account.selectedOption
+        );
+        u != null && typeof u.label == "string" && D.trackConnectBankLink(
+          u.value,
+          u.label,
+          "charge_cards"
+        ), le(
+          o.account.selectedOption,
+          l.id,
+          l.accType
+        );
+      } else S.includes("enableAutoPay") && o.enableAutoPay != null && fe(o.enableAutoPay);
+  };
+  v(() => {
+    const S = j.watch((P, { name: o }) => {
+      o != null && P != null && Re(() => De(o, P));
+    });
+    return () => {
+      S.unsubscribe();
+    };
+  }), v(() => {
+    !w && c?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && c.areAdditionalDocumentsRequestedForVerification && !c.areAdditionalDocumentsSubmittedForVerification && c.userVerificationStatus?.code === "require_info" && h(!0), w && L === "In-Progress" && y === "Completed" && h(!1);
+  }, [c, y, L]), v(() => {
+    A === "In-Progress" && d.fetchState === "Completed" && C();
+  }, [C, A, d.fetchState]);
+  const I = k?.isChargeCardEnabled === !0, O = $?.isDebitCardEnabled === !0, N = $?.isDebitCardTOSAccepted === !0, q = k?.isChargeCardTOSAccepted === !0, U = W?.isBusinessVerified === !0, ke = l?.accType === "depositAccount" || He(
+    l?.providerVerificationStatus?.code ?? ""
+  ), V = B ? U : U && ke, je = y === "In-Progress" || y === "Not-Started";
+  v(() => {
+    A === "In-Progress" && d.fetchState === "Completed" && C();
+  }, [C, A, d.fetchState]);
+  const F = B ? V && !O && N : ne ? V && !I && q : V && !(I && O) && q && N, Ie = F ? p.setupSubTitleNotEnabled : p.setupSubTitle, E = g.mode === "light" ? new M(g.colors.brandColorJadeLight) : new M(g.colors.brandColorJadeDark), Oe = () => {
+    !w && c?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && c.areAdditionalDocumentsRequestedForVerification && !c.areAdditionalDocumentsSubmittedForVerification && c.userVerificationStatus?.code === "require_info" ? h(!0) : re?.();
+  };
+  return /* @__PURE__ */ t.jsxs(st, { children: [
+    /* @__PURE__ */ t.jsx(
+      ze,
+      {
+        anchor: "right",
+        PaperProps: {
+          style: {
+            width: s.overlayWidth.valuePercentage(n),
+            boxShadow: "none"
+          }
+        },
+        open: w,
+        onClose: () => h(!1),
+        style: { backgroundColor: Ue.drawerBackground },
+        transitionDuration: 250,
+        children: /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            authParams: te,
+            filesEndPoint: ee,
+            updateStatus: d,
+            onEditFileName: ye,
+            onDeleteFile: Se,
+            updateFilesEntity: xe,
+            companyOfficer: c,
+            onClose: () => h(!1),
+            onCompanyOfficerUpdated: be,
+            onSendForVerificationClick: Ce
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ee,
+      {
+        title: p.setupTitle,
+        backgroundColor: g.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: se,
+        showMenuIcon: !I && !O && (n === "medium-compact" || n === "small"),
+        onClickMenuIcon: he,
+        source: "ChargeCardSetupPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(at, { windowSize: n, children: [
+      /* @__PURE__ */ t.jsx(ct, { windowSize: n, children: Ie }),
+      je ? /* @__PURE__ */ t.jsx(lt, { children: /* @__PURE__ */ t.jsx(Me, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(_e, { ...j, children: /* @__PURE__ */ t.jsx("form", { id: X(K), onSubmit: Be, children: /* @__PURE__ */ t.jsxs(rt, { windowSize: n, children: [
+        /* @__PURE__ */ t.jsx(
+          Ze,
+          {
+            onClick: Oe,
+            title: _.businessVerificationTitle,
+            subTitle: _.businessVerificationSubTitle,
+            header: _.businessVerificationHeader,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                Ge,
+                {
+                  width: s.iconWidthHeight.valuePx(n),
+                  height: s.iconWidthHeight.valuePx(n)
+                }
+              ),
+              color: E
+            },
+            status: W?.businessVerificationStatus,
+            isLoading: Ae,
+            isActiveWhileLoading: !0
+          }
+        ),
+        B ? null : /* @__PURE__ */ t.jsx(
+          et,
+          {
+            connectedAccountProvider: Z,
+            primaryFundingAccount: l,
+            allFundingAccounts: H,
+            plaidConnectionDetails: ve,
+            allBankAccounts: Te,
+            sectionId: f,
+            isDisabled: b,
+            onFetchLinkTokenClick: ae,
+            onEstablishConnectionClick: me,
+            onUpdatePaymentAccountStatus: de,
+            onUpdatePaymentAccountLoginStatus: ue,
+            sectionTitle: p.setupAccountSectionTitle,
+            onEstablishConnectionSuccess: ge,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                Ke,
+                {
+                  width: s.iconWidthHeight.valuePx(n),
+                  height: s.iconWidthHeight.valuePx(n)
+                }
+              ),
+              color: E
+            },
+            analytics: D,
+            productType: "charge_cards",
+            isAccountsEnabled: oe,
+            onSignUpClick: we,
+            pageName: p.pageName,
+            accountsPromoConfig: ie,
+            accountSelectContainerStyle: m ? {
+              marginBottom: "20px"
+            } : {},
+            bottomComponent: m && /* @__PURE__ */ t.jsx(
+              tt,
+              {
+                label: {
+                  label: Y.payEarly.enableAutoPay.replace(
+                    "__autoPayThreshold__",
+                    e.toString()
+                  ),
+                  style: {
+                    color: g.colors.primary,
+                    ...Je.smallRegular.cssObject,
+                    alignItems: "center"
+                  }
+                },
+                style: {
+                  width: "unset",
+                  marginRight: z.sp4,
+                  marginTop: z.sp1,
+                  alignItems: n === "small" ? "flex-start" : "center"
+                },
+                checkBoxField: {
+                  name: J(
+                    f,
+                    "enableAutoPay"
+                  ),
+                  checkBoxValue: J(
+                    f,
+                    "enableAutoPay"
+                  ),
+                  defaultChecked: k?.isAutoPayEnabled,
+                  style: {
+                    top: s.checkBoxTop.valuePx(n)
+                  }
+                }
+              }
+            )
+          }
+        )
+      ] }) }) })
+    ] }),
+    F ? /* @__PURE__ */ t.jsx(
+      Qe,
+      {
+        formId: X(K),
+        primaryBtn: {
+          label: p.enableAccounts,
+          style: {
+            width: "auto",
+            minWidth: n === "small" ? "auto" : "181px"
+          },
+          isLoading: d.fetchState === "In-Progress" || Pe.fetchState === "In-Progress",
+          isDisabled: b != null
+        },
+        showCancel: !1,
+        cancelBtn: { label: "" },
+        style: {
+          padding: `12px ${z.sp3}`
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      Ye,
+      {
+        isFooterRendered: F,
+        meetingUrl: T,
+        analytics: D,
+        productType: "charge_cards"
+      }
+    )
+  ] });
+}, Q = (e) => {
+  const { allBankAccounts: b, allFundingAccounts: T, primaryFundingAccount: m } = e;
+  return {
+    [f]: {
+      fundingAccount: {
+        selectedOption: m?.id,
+        allOptions: T.map((i) => ({
+          label: i.label,
+          value: i.id,
+          isRecommended: i.accType === "depositAccount"
+        }))
+      },
+      account: {
+        selectedOption: m?.zeniAccountId,
+        allOptions: b.map((i) => ({
+          label: i.accountName,
+          value: i.accountId
+        }))
+      },
+      enableAutoPay: e.companyChargeCardInfo?.isAutoPayEnabled
+    }
+  };
+}, X = (e) => `${e}_form`, at = x.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${(e) => s.setupDetailsRowGap.valuePx(e.windowSize)};
+`, st = x.div`
+  display: flex;
+  min-height: 100%;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ct = x(Xe)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => s.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => s.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => s.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, lt = x.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, rt = x.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => s.sectionRowGap.valuePx(e.windowSize)};
+`;
+export {
+  Ct as default,
+  X as uniqueName
+};

package/dist/ChargeCardSetupPage-BNSPJzRQ.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-DHyNpoQL.cjs"),d=require("react"),y=require("@emotion/styled"),Be=require("@zeniai/client-epic-state"),e=require("./index-C5IoNVAR.cjs"),ke=require("./HelpButton-5sIiyk1f.cjs"),De=require("./SetUpDefaultSection-DujYi7r_.cjs"),z=require("./SpendMgmtSetupAccountSection-WVwnE0HD.cjs"),Ee=require("./LabeledControlledCheckBoxField-DU_NvDut.cjs"),Oe=require("./UploadAdditionalDocumentOverlay-CPB6lSbZ.cjs"),c={titleWidth:new e.ResponsiveSized(343,580,726,826),setupDetailsRowGap:new e.ResponsiveSized(12,e.sp[5],e.sp[5]),sectionRowGap:new e.ResponsiveSized(e.sp[5],e.sp[9],e.sp[9]),iconWidthHeight:new e.ResponsiveSized(20,e.sp[4]),subTitlePaddingTop:new e.ResponsiveSized(12,e.sp[3]),subTitlePaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[3]),overlayWidth:new e.ResponsiveSized(100,100,59),checkBoxTop:new e.ResponsiveSized(e.sp[1],e.sp[0])},M="chargeCardSetUpPage",m="payAccount",{commonSetUp:Ie,spendManagement:ze}=e.appLocale.getLocalizedStrings(),{chargeCard:J}=ze,{chargeCardSetUp:p}=J,{setUp:V}=Ie,Ve=({autoPayThreshold:n,isDisabled:b,meetingUrl:P,isEarlyPayEnabled:f,chargeCardSetUpView:s,connectedAccountProvider:K,filesEndPoint:Q,authParams:X,isAccountsEnabled:Y,isDebitCardOnlyEnabled:j,isCreditCardOnlyEnabled:Z,accountsPromoConfig:ee,onFetchLinkTokenClick:te,onBackClick:ne,onEnableChargeCardClick:oe,onUpdateChargeCardClick:ie,onBusinessVerificationSectionClick:se,onUpdatePaymentAccountStatus:ce,onUpdatePaymentAccountLoginStatus:ae,onUpdatePrimaryFundingAccount:re,onUpdateAutoPayClick:le,onEstablishConnectionClick:ue,onEstablishConnectionSuccess:de,onClickMenuIcon:pe,onEnableChargeCardSuccess:C,onEditFileName:me,onDeleteFile:fe,updateFilesEntity:ge,onCompanyOfficerUpdated:he,onSendForVerificationClick:xe,onSignUpClick:Se})=>{const g=t.useTheme(),i=e.useWindowSizeContext(),R=e.useToolkitContext().analytics,[v,h]=d.useState(!1),{fetchState:x,companyBillPayInfo:F,isRefreshingViewInBackground:ye,updateStatus:l,accountUpdateStatus:be,plaidConnectionDetails:Ce,allBankAccounts:ve,companyChargeCardInfo:T,companyDebitCardInfo:_,selectedCompanyOfficer:a,primaryFundingAccount:r,allFundingAccounts:W}=s,$=e.usePrevious(x),w=e.usePrevious(l.fetchState),B=t.useForm({mode:"all",reValidateMode:"onChange",defaultValues:d.useMemo(()=>G(s),[s]),values:G(s)}),we=B.handleSubmit(oe),Ae=async(S,A)=>{const o=A[m];if(S.includes(m))if(S.includes("fundingAccount")){if(o.fundingAccount.selectedOption!=null&&r?.id!=o.fundingAccount.selectedOption){const u=W.find(I=>I.id===o.fundingAccount.selectedOption);u!=null&&re(o.fundingAccount.selectedOption,u.accType)}}else if(o.account.selectedOption!=null&&r?.id!=null&&r?.zeniAccountId!=o.account.selectedOption){const u=o.account.allOptions.find(I=>I.value===o.account.selectedOption);u!=null&&typeof u.label=="string"&&R.trackConnectBankLink(u.value,u.label,"charge_cards"),ie(o.account.selectedOption,r.id,r.accType)}else S.includes("enableAutoPay")&&o.enableAutoPay!=null&&le(o.enableAutoPay)};d.useEffect(()=>{const S=B.watch((A,{name:o})=>{o!=null&&A!=null&&t.defer(()=>Ae(o,A))});return()=>{S.unsubscribe()}}),d.useEffect(()=>{!v&&a?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&a.areAdditionalDocumentsRequestedForVerification&&!a.areAdditionalDocumentsSubmittedForVerification&&a.userVerificationStatus?.code==="require_info"&&h(!0),v&&$==="In-Progress"&&x==="Completed"&&h(!1)},[a,x,$]),d.useEffect(()=>{w==="In-Progress"&&l.fetchState==="Completed"&&C()},[C,w,l.fetchState]);const k=T?.isChargeCardEnabled===!0,D=_?.isDebitCardEnabled===!0,H=_?.isDebitCardTOSAccepted===!0,L=T?.isChargeCardTOSAccepted===!0,N=F?.isBusinessVerified===!0,Pe=r?.accType==="depositAccount"||Be.isVerifiedPaymentAccountProviderStatusCode(r?.providerVerificationStatus?.code??""),E=j?N:N&&Pe,je=x==="In-Progress"||x==="Not-Started";d.useEffect(()=>{w==="In-Progress"&&l.fetchState==="Completed"&&C()},[C,w,l.fetchState]);const O=j?E&&!D&&H:Z?E&&!k&&L:E&&!(k&&D)&&L&&H,Re=O?p.setupSubTitleNotEnabled:p.setupSubTitle,U=g.mode==="light"?new t.Color(g.colors.brandColorJadeLight):new t.Color(g.colors.brandColorJadeDark),Te=()=>{!v&&a?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&a.areAdditionalDocumentsRequestedForVerification&&!a.areAdditionalDocumentsSubmittedForVerification&&a.userVerificationStatus?.code==="require_info"?h(!0):se?.()};return t.jsxRuntimeExports.jsxs(Fe,{children:[t.jsxRuntimeExports.jsx(t.Drawer,{anchor:"right",PaperProps:{style:{width:c.overlayWidth.valuePercentage(i),boxShadow:"none"}},open:v,onClose:()=>h(!1),style:{backgroundColor:e.Colors.drawerBackground},transitionDuration:250,children:t.jsxRuntimeExports.jsx(Oe.UploadAdditionalDocumentOVerlay,{authParams:X,filesEndPoint:Q,updateStatus:l,onEditFileName:me,onDeleteFile:fe,updateFilesEntity:ge,companyOfficer:a,onClose:()=>h(!1),onCompanyOfficerUpdated:he,onSendForVerificationClick:xe})}),t.jsxRuntimeExports.jsx(e.NavBar,{title:p.setupTitle,backgroundColor:g.colors.grey4,style:{zIndex:3},onBackClick:ne,showMenuIcon:!k&&!D&&(i==="medium-compact"||i==="small"),onClickMenuIcon:pe,source:"ChargeCardSetupPage"}),t.jsxRuntimeExports.jsxs(qe,{windowSize:i,children:[t.jsxRuntimeExports.jsx(_e,{windowSize:i,children:Re}),je?t.jsxRuntimeExports.jsx(We,{children:t.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraLarge",start:!0})}):t.jsxRuntimeExports.jsx(t.FormProvider,{...B,children:t.jsxRuntimeExports.jsx("form",{id:q(M),onSubmit:we,children:t.jsxRuntimeExports.jsxs($e,{windowSize:i,children:[t.jsxRuntimeExports.jsx(De.SetUpDefaultSection,{onClick:Te,title:V.businessVerificationTitle,subTitle:V.businessVerificationSubTitle,header:V.businessVerificationHeader,icon:{element:t.jsxRuntimeExports.jsx(e.SvgDocuments,{width:c.iconWidthHeight.valuePx(i),height:c.iconWidthHeight.valuePx(i)}),color:U},status:F?.businessVerificationStatus,isLoading:ye,isActiveWhileLoading:!0}),j?null:t.jsxRuntimeExports.jsx(z.SpendMgmtSetupAccountSection,{connectedAccountProvider:K,primaryFundingAccount:r,allFundingAccounts:W,plaidConnectionDetails:Ce,allBankAccounts:ve,sectionId:m,isDisabled:b,onFetchLinkTokenClick:te,onEstablishConnectionClick:ue,onUpdatePaymentAccountStatus:ce,onUpdatePaymentAccountLoginStatus:ae,sectionTitle:p.setupAccountSectionTitle,onEstablishConnectionSuccess:de,icon:{element:t.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:c.iconWidthHeight.valuePx(i),height:c.iconWidthHeight.valuePx(i)}),color:U},analytics:R,productType:"charge_cards",isAccountsEnabled:Y,onSignUpClick:Se,pageName:p.pageName,accountsPromoConfig:ee,accountSelectContainerStyle:f?{marginBottom:"20px"}:{},bottomComponent:f&&t.jsxRuntimeExports.jsx(Ee.LabeledControlledCheckBoxField,{label:{label:J.payEarly.enableAutoPay.replace("__autoPayThreshold__",n.toString()),style:{color:g.colors.primary,...e.textStyles.smallRegular.cssObject,alignItems:"center"}},style:{width:"unset",marginRight:e.Space.sp4,marginTop:e.Space.sp1,alignItems:i==="small"?"flex-start":"center"},checkBoxField:{name:z.uniqueName(m,"enableAutoPay"),checkBoxValue:z.uniqueName(m,"enableAutoPay"),defaultChecked:T?.isAutoPayEnabled,style:{top:c.checkBoxTop.valuePx(i)}}})})]})})})]}),O?t.jsxRuntimeExports.jsx(e.Footer,{formId:q(M),primaryBtn:{label:p.enableAccounts,style:{width:"auto",minWidth:i==="small"?"auto":"181px"},isLoading:l.fetchState==="In-Progress"||be.fetchState==="In-Progress",isDisabled:b!=null},showCancel:!1,cancelBtn:{label:""},style:{padding:`12px ${e.Space.sp3}`}}):null,t.jsxRuntimeExports.jsx(ke.HelpButton,{isFooterRendered:O,meetingUrl:P,analytics:R,productType:"charge_cards"})]})},G=n=>{const{allBankAccounts:b,allFundingAccounts:P,primaryFundingAccount:f}=n;return{[m]:{fundingAccount:{selectedOption:f?.id,allOptions:P.map(s=>({label:s.label,value:s.id,isRecommended:s.accType==="depositAccount"}))},account:{selectedOption:f?.zeniAccountId,allOptions:b.map(s=>({label:s.accountName,value:s.accountId}))},enableAutoPay:n.companyChargeCardInfo?.isAutoPayEnabled}}},q=n=>`${n}_form`,qe=y.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${n=>c.setupDetailsRowGap.valuePx(n.windowSize)};
+`,Fe=y.div`
+  display: flex;
+  min-height: 100%;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${n=>n.theme.colors.grey4};
+`,_e=y(e.StandardRegular)`
+  color: ${n=>n.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${n=>c.titleWidth.valuePx(n.windowSize)};
+  padding-top: ${n=>c.subTitlePaddingTop.valuePx(n.windowSize)};
+  padding-bottom: ${n=>c.subTitlePaddingBottom.valuePx(n.windowSize)};
+  text-align: ${n=>n.windowSize==="small"?"initial":"center"};
+`,We=y.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${n=>n.theme.colors.grey4};
+`,$e=y.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${n=>c.sectionRowGap.valuePx(n.windowSize)};
+`;exports.default=Ve;exports.uniqueName=q;