@zeniai/web-components 3.16.52 → 3.16.54

package/dist/SpendMgmtSetupAccountSection-Ch5-sbrh.cjs

@@ -0,0 +1,206 @@
+"use strict";const i=require("./vendor-.pnpm-DHyNpoQL.cjs"),h=require("react"),s=require("@emotion/styled"),Le=require("react-dom"),O=require("@zeniai/client-epic-state"),e=require("./index-HHa907Xt.cjs"),Te=require("./ChargeCardUtils-DCk3-Yfz.cjs"),_e=require("./CreditCardPaymentPlgSection-CMYKbO2C.cjs"),Be=require("./ChaseOverlay-Cg7hKaLI.cjs"),De=require("./SetUpDefaultSection-DFqoND0c.cjs"),Y={sectionWidth:new e.ResponsiveSized(343,580,726),rowGap:new e.ResponsiveSized(e.sp[2],e.sp[3]),footerPaddingLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),footerMarginTop:new e.ResponsiveSized(e.sp[3],e.sp[4])},Ae={title:new e.ResponsiveSizedStyle("standardMedium","largeMedium")};function Me({plaidConnectionDetails:t,header:d,isAccountsEnabled:v=!0,analytics:S,pageName:f,accountsPromoConfig:R,style:y,onConnectClick:_,onSignUpClick:I}){const c=e.useWindowSizeContext(),{setUp:l}=e.appLocale.getLocalizedStrings().commonSetUp,x=t.link_account,$=x.fetchStatus.fetchState==="In-Progress"||x.updateStatus.fetchState==="In-Progress";return i.jsxRuntimeExports.jsxs(Oe,{windowSize:c,style:y,"data-testid":e.generateDataTestId("default-account-section",f),children:[i.jsxRuntimeExports.jsx(We,{children:i.jsxRuntimeExports.jsx(Ue,{windowSize:c,children:d})}),i.jsxRuntimeExports.jsxs(He,{windowSize:c,width:y?.width,children:[i.jsxRuntimeExports.jsx(e.AccountsPlgSection,{heading:l.accountsPlg.heading,buttonText:l.accountsPlg.signUpButtonText,onSignUpClick:I,isAccountsEnabled:v,pageName:f,analytics:S,style:{borderTopLeftRadius:e.Space.sp2,borderTopRightRadius:e.Space.sp2},accountsPromoConfig:R}),i.jsxRuntimeExports.jsxs(Ve,{windowSize:c,children:[i.jsxRuntimeExports.jsxs(qe,{onClick:_,children:[i.jsxRuntimeExports.jsx(Ge,{isLoading:$,children:l.connectExternalAccount}),$?null:i.jsxRuntimeExports.jsx(Ze,{className:"right-arrow"})]}),$?i.jsxRuntimeExports.jsx(Ne,{children:i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraSmall",start:!0,style:{display:"flex"}})}):null]})]})]})}const Oe=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${t=>Y.rowGap.valuePx(t.windowSize)};
+`,We=s.div`
+  display: flex;
+  align-items: center;
+`,Ue=s.div`
+  display: flex;
+  align-items: center;
+  color: ${t=>t.theme.colors.primary};
+  ${t=>`${Ae.title.style(t.windowSize)}`};
+`,He=s.div`
+  width: ${t=>t.width!=null?t.width:Y.sectionWidth.valuePx(t.windowSize)};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+  &:hover {
+    border: ${t=>`1px solid  ${t.theme.colors.primary}`};
+    color: ${t=>t.theme.colors.primary};
+  }
+`,Ne=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${e.Space.sp2};
+`,Ve=s(e.ExtraSmallRegular)`
+  display: flex;
+  align-items: center;
+  padding-top: ${e.Space.sp1};
+  padding-bottom: ${e.Space.sp1};
+  padding-left: ${t=>Y.footerPaddingLeftRight.valuePx(t.windowSize)};
+  padding-right: ${t=>Y.footerPaddingLeftRight.valuePx(t.windowSize)};
+  background: ${t=>t.theme.colors.grey4};
+  border-radius: ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp2} ${e.Space.sp2};
+  color: ${t=>t.theme.colors.hero};
+`,qe=s.div`
+  display: flex;
+  align-items: center;
+  :hover {
+    cursor: pointer;
+    color: ${t=>t.theme.colors.primary};
+    .right-arrow {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+`,Ge=s.span`
+  pointer-events: ${t=>t.isLoading===!0?"none":"initial"};
+`,Ze=s(e.SvgArrowRight)`
+  margin-left: ${e.Space.sp1};
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+`,a={labelWidth:new e.ResponsiveSized(120,190,190),sectionWidth:new e.ResponsiveSized(343,580,726),iconContainerMaxWidthHeight:new e.ResponsiveSized(e.sp[6],e.sp[7]),iconPadding:new e.ResponsiveSized(10,12),rowGap:new e.ResponsiveSized(e.sp[2],e.sp[3]),elementsMarginLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labeledFieldPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),labeledFieldPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[2]),labeledFieldPaddingTop:new e.ResponsiveSized(e.sp[3],e.sp[3]),labeledFieldPaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[2]),labeleMarginLeft:new e.ResponsiveSized(e.sp[0],e.sp[4]),labeleMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[0]),infoLabelPaddingRight:new e.ResponsiveSized(e.sp[0],e.sp[3]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0]),iconWidthHeight:new e.ResponsiveSized(20,e.sp[4])},Ye={title:new e.ResponsiveSizedStyle("standardSemiBold","largeSemiBold")};function Je({primaryFundingAccount:t,allFundingAccounts:d,allBankAccounts:v,plaidConnectionDetails:S,sectionId:f,isDisabled:R,icon:y,sectionTitle:_,style:I,analytics:c,productType:l,referrer:x,accountSelectContainerStyle:$,connectedAccountProvider:K,isCompleted:U=!1,showCompletedIcon:H=!1,showZeniAccountSection:Q=!0,isAccountsEnabled:w,accountsPromoConfig:E,pageName:N,onFetchLinkTokenClick:C,onEstablishConnectionClick:V,onUpdatePaymentAccountStatus:z,onEstablishConnectionSuccess:B,onSignUpClick:X,bottomComponent:je}){const n=e.useWindowSizeContext(),{trigger:ve,formState:{errors:Re}}=i.useFormContext(),D=h.useRef(null),L=i.useTheme(),{setUp:p}=e.appLocale.getLocalizedStrings().commonSetUp,q=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.payEarly;let j,ae,r,g=!1;t!=null&&t.accType==="paymentAccount"&&(j=t.providerVerificationStatus,ae=t?.institutionDetails,r=j?.code,g=t?.isLoginRequired??!1);const F=oe(f,"account"),we=i.has(Re,F),[P,G]=h.useState(void 0),u=S.link_account,k=S.update_account,m=P==="update_account"?k:u,[T,le]=h.useState(m.linkToken??null),[A,Z]=h.useState(!1),[be,re]=h.useState(!1),ce=e.usePrevious(u.updateStatus.fetchState),ee=e.usePrevious(k.updateStatus.fetchState),$e=e.usePrevious(k.fetchStatus.fetchState),Ee=h.useCallback((o,b)=>{c.trackConnectBankSuccess(l,x);const xe=b.accounts.find(ze=>ze.id===t?.providerAccountId)??b.accounts[0];t?.id!=null&&P==="update_account"&&xe?.verification_status!=null&&!g?z(xe?.verification_status,t.id,"update_account"):V(o,P),G(void 0),Z(!1)},[c,x,l,t?.id,t?.providerAccountId,P,g,z,V]),Ce=h.useCallback((o,b)=>{o!=null&&(c.trackConnectBankFailure(l,o.error_code+" "+o.error_message,x),o.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&t?.id!=null&&z("verification_failed",t.id,"update_account"),console.log("Plaid Connection Error",o,b)),G(void 0),Z(!1)},[c,l,x,t?.id,z]),{open:M,ready:de}=i.usePlaidLink({token:T,onSuccess:Ee,onExit:Ce});h.useEffect(()=>{(ce==="In-Progress"&&u.updateStatus.fetchState==="Completed"||ee==="In-Progress"&&k.updateStatus.fetchState==="Completed")&&(O.isVerifiedPaymentAccountProviderStatusCode(r??"")||(C("link_account"),B()))},[u.updateStatus.fetchState,B,C,t?.providerVerificationStatus?.code,t?.id,ce,ee,k.updateStatus.fetchState,r]),h.useEffect(()=>{(O.isVerifiedStatusCode(r??"")||r==="verification_failed")&&!A&&P!=null&&m.linkToken===T&&m.fetchStatus.fetchState==="Completed"&&de&&Z(!0)},[de,T,m.fetchStatus.fetchState,m.linkToken,r,P,A]),h.useEffect(()=>{m.fetchStatus.fetchState==="Completed"&&m.linkToken!=null&&m.linkToken!==T&&le(m.linkToken)},[m.fetchStatus.fetchState,m.linkToken,T]),h.useEffect(()=>{A&&M()},[A,M]),h.useEffect(()=>{!t?.zeniAccountId&&!we&&ve(F)},[t?.id]),h.useEffect(()=>{(r==null||r==="verification_failed"||r==="verification_expired"||O.isVerifiedStatusCode(r))&&(O.zeniDate(new Date().toISOString()).isAfter(u.expiration)||u.linkToken==null)&&C("link_account")},[]);const Pe=()=>{c.trackConnectBankGetBalance(l,x),G("update_account"),C("update_account",t?.id)},pe=`${t?.accountSubType?.name!=null?t?.accountSubType?.name.substring(0,1).toUpperCase().concat(t?.accountSubType?.name.substring(1)):""} ${t?.maskedAccountNumber??""}`.trim(),te=u.fetchStatus.fetchState==="In-Progress"||u.updateStatus.fetchState==="In-Progress",ke=d.findIndex(o=>o.id===t?.id),ye=()=>{re(!0)},Ie=L.mode==="light"?new i.Color(L.colors.brandColorJadeLight):new i.Color(L.colors.brandColorJadeDark);if(t==null&&d.length===0)return l==="zeni_accounts"?i.jsxRuntimeExports.jsx(De.SetUpDefaultSection,{onClick:()=>{(r==null||r==="verification_failed"||r==="verification_expired")&&(c.trackConnectBank(l,x),M())},title:p.achTitle,subTitle:p.achSubTitle,header:p.paymentSource,isCompleted:U,showCompletedIcon:H,icon:{element:i.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:a.iconWidthHeight.valuePx(n),height:a.iconWidthHeight.valuePx(n)}),color:new i.Color(Ie)},isLoading:te,status:j}):i.jsxRuntimeExports.jsx(he,{windowSize:n,style:I,children:i.jsxRuntimeExports.jsx(Me,{header:p.paymentSource,plaidConnectionDetails:S,onConnectClick:()=>{(r==null||r==="verification_failed"||r==="verification_expired")&&(c.trackConnectBank(l,x),M())},onSignUpClick:X,isAccountsEnabled:!1,analytics:c,pageName:N,accountsPromoConfig:E})});const ue=ae?.zeniInstitutionId.toLowerCase()==="chase";return i.jsxRuntimeExports.jsxs(he,{windowSize:n,style:I,children:[be===!0?Le.createPortal(i.jsxRuntimeExports.jsx(Be.ChaseOverlay,{connectedAccountProvider:K,action:{onBackClick:()=>re(!1)}}),document.body):null,i.jsxRuntimeExports.jsxs(rt,{children:[H===!0?i.jsxRuntimeExports.jsx(dt,{children:U?i.jsxRuntimeExports.jsx(pt,{}):i.jsxRuntimeExports.jsx(ut,{})}):null,i.jsxRuntimeExports.jsx(ct,{windowSize:n,children:_??p.paymentSource})]}),i.jsxRuntimeExports.jsxs(lt,{windowSize:n,isDisabled:g,children:[i.jsxRuntimeExports.jsxs(Xe,{windowSize:n,children:[i.jsxRuntimeExports.jsxs(it,{children:[t!=null?i.jsxRuntimeExports.jsx(tt,{isDisabled:g,children:me(y,n,L.mode==="dark",t,ke)}):null,i.jsxRuntimeExports.jsxs(mt,{children:[i.jsxRuntimeExports.jsxs(xt,{children:[i.jsxRuntimeExports.jsx(e.SingleSelectPickerField,{ref:D,style:{display:n==="small"?"block":"inherit",width:"-webkit-fill-available"},customStyleConfig:{menu:()=>({width:n==="small"?"100%":"510px"})},controlProperty:{controlHeight:e.sp[4],fontWeight:e.FontWeight.medium,highlightOnHover:!1,leftRightMargin:!1,fieldWidth:n==="small"?240:300},customPlaceholder:{color:L.colors.hero,weight:500},name:oe(f,"fundingAccount"),placeholder:p.selectAccountPlaceholder,capitalizeOptions:!0,appendSublabel:!1,showLogoInSingleValue:!1,isClearable:!1,maxMenuHeight:220,valueToLogo:(o,b)=>e.getOptionIcon(d,o,b),valueToSubLabels:(o,b)=>e.getSubLabels(d,o,b,!1),defaultValue:{selectedOption:t?.id,allOptions:d.map(o=>({label:o.label,value:o.id,isRecommended:o.accType==="depositAccount"}))},textAlignment:"left",showDownChevronIcon:!0,showTickIcon:!1,isOptionRemovable:!1,registerOptions:{required:!1},showCreateOption:!0,isDisabled:te?"disabled":void 0,showLoadingIcon:te,onClickCreateOption:()=>{c.trackConnectBank(l,x),G("link_account"),u.linkToken==null||O.zeniDate(new Date().toISOString()).isAfter(u.expiration)?C("link_account"):T!==u.linkToken?le(u.linkToken):A?M():Z(!0)}}),i.jsxRuntimeExports.jsxs(nt,{isDisabled:g,children:[pe?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(J,{children:pe}),n!=="small"&&(r!=="verification_failed"&&t?.providerVerificationStatus?.code==="pending_manual_verification"||g||ue||t?.accountBalance?.available)?i.jsxRuntimeExports.jsx(St,{}):null]}):null,r!=="verification_failed"&&t?.providerVerificationStatus?.code==="pending_manual_verification"||g||ue?i.jsxRuntimeExports.jsx(fe,{isUpdateLinkClicked:P==="update_account",isLoginRequired:g,isPendingVerification:r!=="verification_failed"&&t?.providerVerificationStatus?.code==="pending_manual_verification",productType:l,fetchAndUpdateStatues:{fetchStatus:k.fetchStatus,updateStatus:k.updateStatus,linkFetchStatus:u.fetchStatus,linkUpdateStatus:u.updateStatus,prevFetchState:$e,prevUpdateState:ee},onUpdateLinkTokenClick:Pe,onChaseInfoClick:ye}):t?.accountBalance?.available?i.jsxRuntimeExports.jsx(J,{children:e.amountToString("0,0[.]00",t?.accountBalance?.available)}):null]})]}),j!=null&&n==="small"?i.jsxRuntimeExports.jsx(e.ItemWithTag,{style:{width:"max-content",padding:0,marginTop:e.Space.sp2},tagTitle:j.name,textColor:e.getSetupStatusColor(j.code)}):null]})]}),i.jsxRuntimeExports.jsx(st,{children:j!=null&&n!=="small"?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(e.ItemWithTag,{style:{width:"max-content"},tagTitle:j.name,textColor:e.getSetupStatusColor(j.code)}),i.jsxRuntimeExports.jsx(ht,{})]}):null})]}),Q?i.jsxRuntimeExports.jsxs(Fe,{style:$,windowSize:n,isDisabled:g,onClick:o=>o.stopPropagation(),"data-testid":e.generateDataTestId("account-select-container",l),children:[i.jsxRuntimeExports.jsx(et,{isDisabled:g?"disabled":R,label:{label:p.zeniCashAccountLabel,width:n==="small"?void 0:a.labelWidth.value(n),style:{marginLeft:a.labeleMarginLeft.valuePx(n),marginBottom:a.labeleMarginBottom.valuePx(n)}},style:{paddingTop:a.labeledFieldPaddingTop.valuePx(n),paddingBottom:a.labeledFieldPaddingBottom.valuePx(n),paddingLeft:a.labeledFieldPaddingLeft.valuePx(n),paddingRight:a.labeledFieldPaddingRight.valuePx(n),borderRadius:e.Space.sp2,border:`1px solid ${L.colors.grey3}`,width:"-webkit-fill-available",display:n==="small"?"block":"inherit"},infoLabelStyle:{textAlign:n==="small"?"left":"right",paddingRight:a.infoLabelPaddingRight.valuePx(n),marginTop:a.infoLabelMarginTop.valuePx(n)},singleSelectPickerField:{name:F,placeholder:p.zeniCashAccountPlaceholder,style:{position:"relative"},defaultValue:{selectedOption:t?.zeniAccountId??"",allOptions:v.map(o=>({label:o.accountName,value:o.accountId}))},isOptionRemovable:!1,withBorder:n==="small",textAlignment:n==="small"?"left":"right",registerOptions:{required:!1}},valueToAdditionalLabel:()=>p.zeniCashAcoountInfo}),je]}):null,t?.accType==="paymentAccount"?l==="charge_cards"?i.jsxRuntimeExports.jsx(_e.CreditCardPaymentPlgSection,{style:{borderRadius:`${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp2} ${e.Space.sp2}`},maxInsuredAmount:E.maxInsuredAmount,heading:i.jsxRuntimeExports.jsxs(Ke,{windowSize:n,children:[q.earn,i.jsxRuntimeExports.jsx(Qe,{children:q.percentageCashback.replace("__percentage__",Te.CASHBACK_PERCENTAGE_WHEN_YOU_PAY_VIA_ZENI_CHECKING)}),q.whenYouPayViaZeniChecking]}),buttonText:w===!1?p.accountsPlg.signUpButtonText:p.accountsPlg.switchButtonText,isAccountsEnabled:w,pageName:q.creditCardPayment,onSignUpClick:X,onSwitchClick:()=>{D.current!=null&&D.current.focus()}}):l!=="zeni_accounts"?i.jsxRuntimeExports.jsx(e.AccountsPlgSection,{heading:p.accountsPlg.heading,style:{borderBottomLeftRadius:e.Space.sp2,borderBottomRightRadius:e.Space.sp2},isAccountsEnabled:w,buttonText:w===!1?p.accountsPlg.signUpButtonText:p.accountsPlg.switchButtonText,analytics:c,pageName:N,onSignUpClick:X,onSwitchClick:()=>{D.current!=null&&D.current.focus()},accountsPromoConfig:E}):null:null]})]})}const me=(t,d,v,S,f,R)=>S?.accType==="depositAccount"?i.jsxRuntimeExports.jsx(ft,{isOptionSelected:!0,children:i.jsxRuntimeExports.jsx(jt,{color:e.getAccountsColorMappingFromIndex(f??0)})}):S?.institutionDetails?.logo?.base64!=null?i.jsxRuntimeExports.jsx(gt,{windowSize:d,src:`${e.JPEG_IMAGE_BASE_64}${S?.institutionDetails.logo?.base64.toString()}`,alt:S?.institutionDetails.institutionName,loading:"lazy"}):R===!0?t.element:i.jsxRuntimeExports.jsx(at,{iconColor:t.color,windowSize:d,isDarkMode:v,children:t.element}),fe=({productType:t,isLoginRequired:d,isUpdateLinkClicked:v,isPendingVerification:S,fetchAndUpdateStatues:f,onUpdateLinkTokenClick:R,onChaseInfoClick:y})=>{const{commonSetUp:_}=e.appLocale.getLocalizedStrings(),{setUp:I}=_,{verifyAccount:c,verifyingAccount:l,verifyAccountError:x,reLogging:$,reLoginLabel:K,reLoginError:U,reLoginMessage:H,chaseLabel:Q}=I,{fetchStatus:w,updateStatus:E,linkFetchStatus:N,linkUpdateStatus:C,prevFetchState:V,prevUpdateState:z}=f,B=v&&V==="In-Progress"&&w?.fetchState==="Error"||z==="In-Progress"&&E?.fetchState==="Error";return d?v&&(w?.fetchState==="In-Progress"||E?.fetchState==="In-Progress"||N?.fetchState==="In-Progress"||C?.fetchState==="In-Progress")?i.jsxRuntimeExports.jsxs(W,{style:{color:e.Colors.important},children:[i.jsxRuntimeExports.jsx(J,{children:$}),i.jsxRuntimeExports.jsx(ge,{children:i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Small",start:!0,style:{display:"flex",color:e.Colors.important}})})]}):i.jsxRuntimeExports.jsx(W,{style:{cursor:"pointer"},onClick:R,"data-testid":e.generateDataTestId("re-login-label-clicked"),children:i.jsxRuntimeExports.jsx(e.Tooltip,{style:{padding:`12px ${e.Space.sp3}`},title:H,placement:"bottom",maxWidth:"264px",children:i.jsxRuntimeExports.jsxs(ot,{children:[i.jsxRuntimeExports.jsx(Se,{style:{marginLeft:e.Space.sp0,marginRight:e.Space.sp1}}),i.jsxRuntimeExports.jsx(ie,{isError:!0,style:{color:e.Colors.important},children:B?U:K}),i.jsxRuntimeExports.jsx(se,{children:i.jsxRuntimeExports.jsx(ne,{style:{color:e.Colors.important}})})]})})}):w?.fetchState==="In-Progress"||E?.fetchState==="In-Progress"?i.jsxRuntimeExports.jsxs(W,{children:[i.jsxRuntimeExports.jsx(J,{children:l}),i.jsxRuntimeExports.jsx(ge,{children:i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Small",start:!0,style:{display:"flex"}})})]}):S?i.jsxRuntimeExports.jsxs(W,{onClick:R,"data-testid":e.generateDataTestId("verify-account-label-clicked",t),children:[i.jsxRuntimeExports.jsx(ie,{isError:!1,children:c}),i.jsxRuntimeExports.jsx(se,{children:i.jsxRuntimeExports.jsx(ne,{})}),B?i.jsxRuntimeExports.jsx(e.Tooltip,{maxWidth:"280px",style:{padding:`12px ${e.Space.sp3}`,color:e.Colors.important},title:x,placement:"bottom",children:i.jsxRuntimeExports.jsx(Se,{})}):null]}):i.jsxRuntimeExports.jsxs(W,{onClick:y,"data-testid":e.generateDataTestId("chase-info-label-clicked"),children:[i.jsxRuntimeExports.jsx(ie,{isError:!1,children:Q}),i.jsxRuntimeExports.jsx(se,{children:i.jsxRuntimeExports.jsx(ne,{})})]})},oe=(t,d)=>`${t}.${d}`,Ke=s(e.StandardMediumSp)`
+  color: ${t=>t.theme.colors.primary};
+  width: ${t=>t.windowSize==="small"?"80%":"100%"};
+`,Qe=s(e.ExtraLargeBoldSp)`
+  color: ${t=>t.theme.colors.primary};
+`,he=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${t=>a.rowGap.valuePx(t.windowSize)};
+`,Xe=s.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: ${t=>a.elementsMarginLeftRight.valuePx(t.windowSize)};
+  margin-right: ${t=>a.elementsMarginLeftRight.valuePx(t.windowSize)};
+  margin-top: ${e.Space.sp4};
+  margin-bottom: ${e.Space.sp0};
+`,Fe=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: ${t=>a.elementsMarginLeftRight.valuePx(t.windowSize)};
+  margin-right: ${t=>a.elementsMarginLeftRight.valuePx(t.windowSize)};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp4};
+  opacity: ${t=>t.isDisabled?.4:1};
+`,et=s(e.LabeledSingleSelectPickerField)`
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+`,tt=s.div`
+  display: flex;
+  opacity: ${t=>t.isDisabled?.8:1};
+`,it=s.div`
+  display: flex;
+  align-items: flex-start;
+`,st=s.div`
+  display: flex;
+`,nt=s(e.SmallRegular)`
+  display: flex;
+  align-items: center;
+  color: ${t=>t.isDisabled?t.theme.colors.grey1:t.theme.colors.hero};
+  flex-wrap: wrap;
+`,J=s.div`
+  display: flex;
+`,ie=s.div`
+  :hover {
+    cursor: pointer;
+    color: ${t=>t.isError?t.theme.colors.important:t.theme.colors.primary};
+  }
+`,W=s(e.ExtraSmallRegular)`
+  display: flex;
+  align-items: center;
+`,ot=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,at=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: ${t=>a.iconPadding.valuePx(t.windowSize)};
+  background: ${t=>t.iconColor.toString()};
+  border-radius: ${e.Space.sp11};
+  width: fit-content;
+  height: fit-content;
+  color: ${t=>t.isDarkMode?e.Colors.neutralGrey5Light:t.theme.colors.brandColorOnyx}; // As per design
+  max-width: ${t=>a.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  max-height: ${t=>a.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  margin-right: ${e.Space.sp2};
+`,lt=s.div`
+  display: flex;
+  flex-direction: column;
+  width: ${t=>a.sectionWidth.valuePx(t.windowSize)};
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+  color: ${t=>t.theme.colors.grey1};
+  justify-content: space-between;
+  box-sizing: border-box;
+  ${t=>t.isDisabled===!1&&`
+    &:hover {
+      border: 1px solid ${t.theme.colors.primary};
+      color: ${t.theme.colors.primary};
+    }
+    `}
+`,rt=s.div`
+  display: flex;
+  align-items: center;
+`,ct=s.div`
+  color: ${t=>t.theme.colors.primary};
+  ${t=>`${Ye.title.style(t.windowSize)}`};
+`,dt=s.div`
+  margin-right: ${e.Space.sp2};
+`,pt=s(e.SvgSuccessRound)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.success};
+`,ut=s.div`
+  height: 14px;
+  width: 14px;
+  border: 1px solid ${t=>t.theme.colors.primary};
+  border-radius: 50%;
+`,xt=s.div``,ht=s.div`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  margin-left: ${e.Space.sp4};
+`,St=s.div`
+  display: inline-block;
+  border-radius: ${e.Space.sp2};
+  margin: ${e.Space.sp0} 12px;
+  width: ${e.Space.sp1};
+  height: ${e.Space.sp1};
+  cursor: inherit;
+  background-color: ${t=>t.theme.colors.grey1};
+`,gt=s.img`
+  width: ${t=>a.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  height: ${t=>a.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  border-radius: ${e.Space.sp11};
+  margin-right: ${e.Space.sp2};
+`,mt=s.div`
+  display: flex;
+  flex-direction: column;
+`,se=s.div`
+  display: flex;
+  color: inherit;
+  margin-left: ${e.Space.sp1};
+`,ne=s(e.SvgArrowRight)`
+  width: 12px;
+  height: 12px;
+`,Se=s(e.SvgHighImportance)`
+  display: flex;
+  margin-left: 12px;
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.important};
+`,ge=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${e.Space.sp2};
+`,ft=s.div`
+  min-width: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  width: ${t=>t.isOptionSelected?e.Space.sp7:e.Space.sp5};
+  height: ${t=>t.isOptionSelected?e.Space.sp7:e.Space.sp5};
+  margin-right: ${e.Space.sp2};
+`,jt=s(e.SvgZeniBrandCheckingAcc)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+`;exports.PaymentActionSection=fe;exports.SpendMgmtSetupAccountSection=Je;exports.getPaymentAccountIcon=me;exports.uniqueName=oe;

package/dist/StatementItem-CgyEvD-b.js

@@ -0,0 +1,81 @@
+import { j as o } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useState as u } from "react";
+import i from "@emotion/styled";
+import { u as y, a as g, j5 as v, A as z, S as n, p as j, R as b, f7 as k, D as L } from "./index-CBaTiiZy.js";
+import { B } from "./BoxItem-boLSc1SE.js";
+import { d as C } from "./downloadPdf-wjda1Kbt.js";
+const d = g.getLocalizedStrings().months, r = {
+  downloadButtonSize: new b(L[4], 20)
+}, D = i.div`
+  display: flex;
+  padding: ${n.sp3} ${n.sp4};
+  flex-direction: row;
+  width: 100%;
+`, I = i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`, R = i(j)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${n.sp2};
+  max-height: ${n.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`, P = i.div`
+  cursor: pointer;
+`, q = i(k)`
+  width: ${(t) => r.downloadButtonSize.valuePx(t.windowSize)};
+  height: ${(t) => r.downloadButtonSize.valuePx(t.windowSize)};
+  min-height: ${(t) => r.downloadButtonSize.valuePx(t.windowSize)};
+  color: ${(t) => t.theme.colors.hero};
+  &:hover {
+    color: ${(t) => t.theme.colors.primary};
+  }
+`;
+function O({
+  accountLast4: t,
+  currentTenantCompanyName: a,
+  data: e,
+  authParams: m,
+  downloadEndPoint: l,
+  documentType: s = "statement",
+  boxType: c
+}) {
+  const [w, p] = u(!1), x = y(), h = s === "taxLetter" ? `${e.title.year}` : `${d[e.title.month - 1]} ${e.title.year}`, S = s === "taxLetter" ? `${a}-treasury-tax-letter-${e.title.year}.pdf` : `${a}-${t}-monthly-statement-${d[e.title.month - 1]}-${e.title.year}.pdf`, f = {
+    period: `${e.title.year}-${v(e.title.month)}`,
+    format: "pdf"
+  }, $ = /* @__PURE__ */ o.jsx(D, { children: /* @__PURE__ */ o.jsxs(I, { children: [
+    /* @__PURE__ */ o.jsx(R, { children: h }),
+    /* @__PURE__ */ o.jsx(
+      P,
+      {
+        onClick: () => C(
+          s === "treasuryStatement" || s === "taxLetter" ? `${l}/statements/${e.id}` : `${l}/statements?query=${encodeURIComponent(
+            JSON.stringify(f)
+          )}`,
+          S,
+          m,
+          p
+        ),
+        children: w ? /* @__PURE__ */ o.jsx(z, { size: "Small", start: !0 }) : /* @__PURE__ */ o.jsx(q, { windowSize: x })
+      }
+    )
+  ] }) });
+  return /* @__PURE__ */ o.jsx(
+    B,
+    {
+      content: $,
+      boxType: c,
+      isDisabled: !1,
+      isNotClickable: !0
+    }
+  );
+}
+export {
+  O as S
+};

package/dist/StatementItem-DeEAGVKY.cjs

@@ -0,0 +1,31 @@
+"use strict";const i=require("./vendor-.pnpm-DHyNpoQL.cjs"),f=require("react"),n=require("@emotion/styled"),t=require("./index-HHa907Xt.cjs"),j=require("./BoxItem-BMhYtnQv.cjs"),y=require("./downloadPdf-D0pxvytZ.cjs"),c=t.appLocale.getLocalizedStrings().months,r={downloadButtonSize:new t.ResponsiveSized(t.sp[4],20)},v=n.div`
+  display: flex;
+  padding: ${t.Space.sp3} ${t.Space.sp4};
+  flex-direction: row;
+  width: 100%;
+`,g=n.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`,z=n(t.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${t.Space.sp2};
+  max-height: ${t.Space.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`,R=n.div`
+  cursor: pointer;
+`,b=n(t.SvgDownload)`
+  width: ${e=>r.downloadButtonSize.valuePx(e.windowSize)};
+  height: ${e=>r.downloadButtonSize.valuePx(e.windowSize)};
+  min-height: ${e=>r.downloadButtonSize.valuePx(e.windowSize)};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`;function q({accountLast4:e,currentTenantCompanyName:l,data:o,authParams:d,downloadEndPoint:a,documentType:s="statement",boxType:x}){const[m,p]=f.useState(!1),w=t.useWindowSizeContext(),u=s==="taxLetter"?`${o.title.year}`:`${c[o.title.month-1]} ${o.title.year}`,h=s==="taxLetter"?`${l}-treasury-tax-letter-${o.title.year}.pdf`:`${l}-${e}-monthly-statement-${c[o.title.month-1]}-${o.title.year}.pdf`,S={period:`${o.title.year}-${t.toMonthStr(o.title.month)}`,format:"pdf"},$=i.jsxRuntimeExports.jsx(v,{children:i.jsxRuntimeExports.jsxs(g,{children:[i.jsxRuntimeExports.jsx(z,{children:u}),i.jsxRuntimeExports.jsx(R,{onClick:()=>y.downloadPdf(s==="treasuryStatement"||s==="taxLetter"?`${a}/statements/${o.id}`:`${a}/statements?query=${encodeURIComponent(JSON.stringify(S))}`,h,d,p),children:m?i.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):i.jsxRuntimeExports.jsx(b,{windowSize:w})})]})});return i.jsxRuntimeExports.jsx(j.BoxItem,{content:$,boxType:x,isDisabled:!1,isNotClickable:!0})}exports.StatementItem=q;

package/dist/StatementsPage-CtenFbJc.cjs

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-DHyNpoQL.cjs"),m=require("react"),n=require("@emotion/styled"),e=require("./index-HHa907Xt.cjs"),R=require("./BoxItem-BMhYtnQv.cjs"),v=require("./commonDimensions-DbAF33ie.cjs"),$=require("./StatementItem-DeEAGVKY.cjs"),p=e.appLocale.getLocalizedStrings().spendManagement.zeniAccounts.statements,u={listItemMargin:new e.ResponsiveSized(e.sp[3],e.sp[8])},E=({currentTenantCompanyName:s,authParams:h,downloadEndPoint:g,statementListView:r,accountLast4:b,onBackClick:S})=>{const f=t.useTheme(),l=e.useWindowSizeContext(),j=m.createRef(),c=m.useRef(null),d=r.statements.length===0,y=()=>d===!1?v.transactionItemDimensions.transactionItemHeight:24,w=({index:o,style:i})=>{const a=r.statements[o];return d===!1?t.jsxRuntimeExports.jsx(x,{windowSize:l,style:{...i,width:`calc(100% - 2*${u.listItemMargin.valuePx(l)})`},children:t.jsxRuntimeExports.jsx($.StatementItem,{currentTenantCompanyName:s,accountLast4:b,data:a,authParams:h,downloadEndPoint:g,boxType:R.boxType(o,r.statements.length)},a.id)}):t.jsxRuntimeExports.jsx(k,{style:{...i},children:t.jsxRuntimeExports.jsx(I,{children:t.jsxRuntimeExports.jsx(x,{windowSize:l,children:t.jsxRuntimeExports.jsx(C,{children:p.noStatements})})})})};return t.jsxRuntimeExports.jsxs(z,{children:[t.jsxRuntimeExports.jsx(e.NavBar,{title:p.title,backgroundColor:f.colors.grey4,style:{zIndex:3},onBackClick:S,scrollableContent:c.current!=null?c:void 0,source:"StatementsPage"}),t.jsxRuntimeExports.jsx(T,{children:t.jsxRuntimeExports.jsx(t.AutoSizer,{children:({height:o,width:i})=>t.jsxRuntimeExports.jsx(q,{ref:j,height:o,width:i,outerRef:c,itemKey:a=>a,itemCount:r.statements.length,itemSize:y,initialScrollOffset:0,children:w})})})]})},k=n.div``,x=n.div`
+  margin: ${s=>`${e.Space.sp0} ${u.listItemMargin.valuePx(s.windowSize)}`};
+  &:hover {
+    position: relative;
+    z-index: 2;
+  }
+`,I=n.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`,z=n.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: ${e.Space.sp7};
+`,C=n(e.StandardRegular)`
+  display: flex;
+  color: ${s=>s.theme.colors.grey2};
+`,T=n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin-top: ${e.Space.sp6};
+`,q=n(t.VariableSizeList)`
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  &::-webkit-scrollbar {
+    width: ${e.Space.sp2};
+    height: ${e.Space.sp0};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 2px ${e.Colors.scrollbarBoxShadow};
+    -webkit-box-shadow: inset 0 0 2px ${e.Colors.scrollbarBoxShadow};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: ${s=>s.theme.colors.grey1} transparent;
+    &::-webkit-scrollbar {
+      width: ${e.Space.sp2};
+      height: ${e.Space.sp0};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${s=>s.theme.colors.grey1};
+      border-radius: 2px;
+    }
+  }
+`;exports.default=E;

package/dist/StatementsPage-DsIQ8XQY.js

@@ -0,0 +1,130 @@
+import { u as k, j as t, A as v, V as z } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { createRef as C, useRef as I } from "react";
+import r from "@emotion/styled";
+import { u as R, aE as T, a as E, S as s, C as m, R as A, D as p, p as L } from "./index-CBaTiiZy.js";
+import { b as M } from "./BoxItem-boLSc1SE.js";
+import { t as P } from "./commonDimensions-CzZEAJMD.js";
+import { S as B } from "./StatementItem-CgyEvD-b.js";
+const h = E.getLocalizedStrings().spendManagement.zeniAccounts.statements, u = {
+  listItemMargin: new A(p[3], p[8])
+}, Y = ({
+  currentTenantCompanyName: e,
+  authParams: g,
+  downloadEndPoint: b,
+  statementListView: o,
+  accountLast4: f,
+  onBackClick: S
+}) => {
+  const w = k(), l = R(), y = C(), c = I(null), d = o.statements.length === 0, $ = () => d === !1 ? P.transactionItemHeight : 24, j = ({ index: n, style: a }) => {
+    const i = o.statements[n];
+    return d === !1 ? /* @__PURE__ */ t.jsx(
+      x,
+      {
+        windowSize: l,
+        style: {
+          ...a,
+          width: `calc(100% - 2*${u.listItemMargin.valuePx(l)})`
+        },
+        children: /* @__PURE__ */ t.jsx(
+          B,
+          {
+            currentTenantCompanyName: e,
+            accountLast4: f,
+            data: i,
+            authParams: g,
+            downloadEndPoint: b,
+            boxType: M(n, o.statements.length)
+          },
+          i.id
+        )
+      }
+    ) : /* @__PURE__ */ t.jsx(D, { style: { ...a }, children: /* @__PURE__ */ t.jsx(O, { children: /* @__PURE__ */ t.jsx(x, { windowSize: l, children: /* @__PURE__ */ t.jsx(H, { children: h.noStatements }) }) }) });
+  };
+  return /* @__PURE__ */ t.jsxs(W, { children: [
+    /* @__PURE__ */ t.jsx(
+      T,
+      {
+        title: h.title,
+        backgroundColor: w.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: S,
+        scrollableContent: c.current != null ? c : void 0,
+        source: "StatementsPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(K, { children: /* @__PURE__ */ t.jsx(v, { children: ({ height: n, width: a }) => /* @__PURE__ */ t.jsx(
+      N,
+      {
+        ref: y,
+        height: n,
+        width: a,
+        outerRef: c,
+        itemKey: (i) => i,
+        itemCount: o.statements.length,
+        itemSize: $,
+        initialScrollOffset: 0,
+        children: j
+      }
+    ) }) })
+  ] });
+}, D = r.div``, x = r.div`
+  margin: ${(e) => `${s.sp0} ${u.listItemMargin.valuePx(e.windowSize)}`};
+  &:hover {
+    position: relative;
+    z-index: 2;
+  }
+`, O = r.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`, W = r.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: ${s.sp7};
+`, H = r(L)`
+  display: flex;
+  color: ${(e) => e.theme.colors.grey2};
+`, K = r.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin-top: ${s.sp6};
+`, N = r(z)`
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  &::-webkit-scrollbar {
+    width: ${s.sp2};
+    height: ${s.sp0};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 2px ${m.scrollbarBoxShadow};
+    -webkit-box-shadow: inset 0 0 2px ${m.scrollbarBoxShadow};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: ${(e) => e.theme.colors.grey1} transparent;
+    &::-webkit-scrollbar {
+      width: ${s.sp2};
+      height: ${s.sp0};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(e) => e.theme.colors.grey1};
+      border-radius: 2px;
+    }
+  }
+`;
+export {
+  Y as default
+};