@zeniai/web-cockpit-ui 1.13.93-qa → 1.13.94-dev

package/dist/assets/BankConnectionsSettingsPage-BG99PtV_-CepU1gQp.js

@@ -1,379 +0,0 @@
-import{u as ae,X as we,a as He,c3 as qe,j as t,aW as Je,M as J,o as i,e as q,bL as Ze,F as Ge,bt as Ye,C as f,m as Ke,t as A,as as Qe,r as Ie,Q as Xe,cg as et,a5 as de,ab as X,eZ as tt,l as Y,co as nt,aQ as Le,f5 as Oe,f6 as it,f7 as ot,bC as $e,q as h,e_ as ee,e$ as te,_ as ne,bD as ie,Y as at,b5 as lt,dI as Fe,g as V,v,f4 as ct,fi as st,fj as rt,cZ as dt,fk as ut}from"./index-CKO1Ko85.js";import{b,n}from"./vendor-CnQcJ2Lu.js";import{a as pt}from"./SetUpAccountSection-BrYiljyO-CSo_3my8.js";import{r as ht}from"./mui-C5LQ0bMa.js";import{M as mt}from"./ChaseOverlay-BK2ISNjj-DZnlqtpO.js";import{R as gt,z as wt}from"./SpendMgmtSetupAccountSection-DdUs96r9-IQ5cFujk.js";import"./analytics-DThoELaW.js";import"./routing-Cpaypegg.js";import"./sentry-HDxG13yk.js";import"./redux-ByjIRbhZ.js";import"./liveblocks-sSQ9JElv.js";import"./crypto-BURQLTgV.js";import"./SetUpDefaultSection-B361ojb9-NxiVWfIP.js";import"./ChargeCardUtils-Dt303NN_-BJthP303.js";import"./CreditCardPaymentPlgSection-BLbZFCcL-BKv30VTO.js";const{settings:{bankConnectionHeader:Z}}=J.getLocalizedStrings().common,ft={value:Z.productType,width:new f(100,19)},xt={value:Z.primaryAccount,width:new f(100,36)},yt={value:Z.linkAccount,width:new f(100,22)},St={value:Z.status,width:new f(12,12)},bt={value:Z.balance,width:new f(12,13)},P=[ft,xt,yt,St,bt],{common:{settings:ue,strings:{empty:vt,hyphen:$t}}}=J.getLocalizedStrings(),K={paymentAccountIconSize:new f(h[6],h[7])},zt=()=>null,kt=({paymentAccount:e,bankAccountList:a,balanceFetchStatus:L,onRemoveConnection:O})=>{const s=ae(),d=we(),[$,z]=b.useState(!1),w=e?.providerVerificationStatus,c=s.mode==="light"?new X(s.colors.brandColorJadeLight):new X(s.colors.brandColorJadeDark),F={element:t.jsx(Wt,{windowSize:d}),color:c},M=a.find(l=>l.accountId===e.zeniAccountId),R=()=>{z(l=>!l)};return t.jsxs(jt,{onMouseEnter:R,onMouseLeave:R,children:[t.jsxs(At,{windowSize:d,wrapperWidth:P[0].width,children:[t.jsx(Ct,{children:ue.otherAccount.title}),t.jsx(Tt,{children:ue.otherAccount.subTitle})]}),t.jsxs(Pt,{windowSize:d,wrapperWidth:P[1].width,children:[pt(F,d,s.mode==="dark",e,!0),t.jsxs(Bt,{children:[t.jsx(Dt,{children:t.jsx(Vt,{windowSize:d,children:e.institutionDetails.institutionName})}),t.jsx(Mt,{windowSize:d,children:t.jsxs(Ut,{children:[t.jsx(Et,{children:e.accountSubType?.name}),t.jsx(Nt,{children:e.maskedAccountNumber})]})})]})]}),t.jsx(_t,{windowSize:d,wrapperWidth:P[2].width,children:M?.accountName??vt}),t.jsx(It,{windowSize:d,wrapperWidth:P[3].width,children:w!=null?t.jsx(ee,{style:{width:"max-content",padding:0,marginTop:i.sp2},tagTitle:w.name,textColor:te(w.code)}):$t}),t.jsxs(Lt,{windowSize:d,wrapperWidth:P[4].width,children:[t.jsx(Ot,{className:"balanceLabel",isRemoveHovered:$,children:ne("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?t.jsx(Ft,{className:"balanceLabel",isRemoveHovered:$,children:ie(e.balances?.lastRefreshTime)}):L?.fetchState==="In-Progress"?t.jsx(q,{size:"Small",start:!0}):null,$&&t.jsx(Rt,{children:t.jsx(Fe,{moreIconType:"plain",options:[{label:ue.otherAccount.remove,value:"remove"}],customStyleConfig:{valueContainer:()=>({height:i.sp3,".more-icon":{width:i.sp3,height:i.sp3,color:s.colors.primary}}),container:()=>({marginLeft:i.sp0,position:"relative"}),control:()=>({background:"transparent"}),menu:()=>({position:"absolute",right:0,borderRadius:i.sp1,marginTop:i.sp2,background:s.colors.grey5,width:"162px",border:`1px solid ${s.colors.grey3}`,boxShadow:`${i.sp0} 1px 2px ${i.sp0} ${V.boxShadowElevation}`}),option:()=>({height:i.sp6,paddingLeft:i.sp3,paddingRight:i.sp3,display:"flex",alignItems:"center",color:V.important,":hover":{color:V.important,backgroundColor:s.colors.background}})},menuPlacement:"bottom",onOptionSelection:l=>{l==="remove"&&O(e.paymentAccountId)},valueToIcon:zt})})]})]})},jt=n.div`
-  display: flex;
-  padding: ${i.sp4};
-  padding-right: ${i.sp8};
-  position: relative;
-`,At=n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  align-items: flex-start;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Ct=n(A)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,Tt=n(v)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,Pt=n.div`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,_t=n(A)`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,It=n(A)`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Lt=n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  justify-content: flex-end;
-  align-items: flex-end;
-`,Ot=n(A)`
-  color: ${e=>e.theme.colors.hero};
-`,Ft=n(v)`
-  color: ${e=>e.theme.colors.hero};
-`,Rt=n.div`
-  position: absolute;
-  right: ${i.sp4};
-`,Wt=n(ut)`
-  margin-right: ${i.sp3};
-  width: ${e=>K.paymentAccountIconSize.valuePx(e.windowSize)};
-  height: ${e=>K.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-width: ${e=>K.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-height: ${e=>K.paymentAccountIconSize.valuePx(e.windowSize)};
-`,Bt=n.div`
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-`,Dt=n.div`
-  display: flex;
-  gap: ${i.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`,Mt=n.div`
-  display: flex;
-  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
-  align-items: ${e=>e.windowSize==="small"?"start":"center"};
-`,Et=n(v)`
-  text-transform: capitalize;
-  color: inherit;
-`,Nt=n(v)`
-  margin-left: ${i.sp1};
-`,Vt=n(A)`
-  max-width: ${`calc(100% - ${i.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`,Ut=n.div`
-  display: flex;
-`,{common:{settings:Q,strings:{empty:Ht}}}=J.getLocalizedStrings(),qt=()=>null,Jt=({paymentAccount:e,bankAccountList:a,balanceFetchStatus:L,onRemoveConnection:O})=>{const s=ae(),d=e?.providerVerificationStatus,$=a.find(z=>z.accountId===e.zeniAccountId);return t.jsxs(Zt,{children:[t.jsxs(Gt,{children:[t.jsx(Yt,{children:`${Q.otherAccount.title} ${Q.otherAccount.subTitleSmall}`}),t.jsx(Fe,{moreIconType:"plain",options:[{label:Q.otherAccount.remove,value:"remove"}],customStyleConfig:{valueContainer:()=>({height:i.sp3,".more-icon":{width:i.sp3,height:i.sp3,color:s.colors.primary}}),container:()=>({marginLeft:i.sp0,position:"relative"}),control:()=>({background:"transparent"}),menu:()=>({position:"absolute",right:0,width:"158px",border:`1px solid ${s.colors.grey3}`,boxShadow:`${i.sp0} 1px 2px ${i.sp0} ${V.boxShadowElevation}`}),option:()=>({color:s.colors.important,":hover":{color:s.colors.important,backgroundColor:s.colors.background}})},menuPlacement:"bottom",onOptionSelection:z=>{z==="remove"&&O(e.paymentAccountId)},valueToIcon:qt})]}),t.jsxs(Kt,{children:[t.jsxs(ln,{children:[t.jsx(cn,{children:t.jsx(dn,{children:e.institutionDetails.institutionName})}),t.jsxs(un,{children:[t.jsx(sn,{children:e.accountSubType?.name}),t.jsx(rn,{children:e.maskedAccountNumber}),t.jsx(tn,{children:d!=null?t.jsx(ee,{style:{width:"max-content",padding:0},tagTitle:d.name,textColor:te(d.code)}):null})]})]}),t.jsxs(nn,{children:[t.jsx(on,{className:"balanceLabel",children:ne("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?t.jsx(an,{className:"balanceLabel",children:ie(e.balances?.lastRefreshTime)}):L?.fetchState==="In-Progress"?t.jsx(q,{size:"ExtraSmall",start:!0}):null]})]}),t.jsxs(Qt,{children:[t.jsx(Xt,{children:Q.bankConnectionHeader.linkAccount}),t.jsx(en,{children:$?.accountName??Ht})]})]})},Zt=n.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${i.sp3};
-`,Gt=n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  margin-bottom: ${i.sp3};
-  justify-content: space-between;
-`,Yt=n(A)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,Kt=n.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: ${i.sp3};
-`,Qt=n.div`
-  display: flex;
-  align-items: center;
-`,Xt=n(v)`
-  color: ${e=>e.theme.colors.grey1};
-  margin-right: ${i.sp2};
-`,en=n(v)`
-  color: ${e=>e.theme.colors.hero};
-`,tn=n(A)`
-  display: flex;
-  align-items: center;
-  margin-left: ${i.sp2};
-`,nn=n.div`
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-`,on=n(A)`
-  color: ${e=>e.theme.colors.hero};
-`,an=n(v)`
-  color: ${e=>e.theme.colors.hero};
-`,ln=n.div``,cn=n.div`
-  display: flex;
-  gap: ${i.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`,sn=n(v)`
-  text-transform: capitalize;
-`,rn=n(v)`
-  margin-left: ${i.sp1};
-`,dn=n(A)`
-  max-width: ${`calc(100% - ${i.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`,un=n.div`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: center;
-`,{common:{settings:ze,strings:{hyphen:pe}},commonSetUp:{setUp:ke}}=J.getLocalizedStrings(),g={containerPadding:new f(h[3],h[4]),containerRightPadding:new f(h[3],h[8]),iconContainerMaxWidthHeight:new f(h[6],h[7]),iconWidthHeight:new f(20,h[4]),iconPadding:new f(h[1],12),productTypeContainerMarginBottom:new f(h[3],h[0]),linkAccountContainerMarginTop:new f(h[3],h[0]),productTypeIconSize:new f(h[3],h[4])},pn="bankConnectionsSettingsPage",hn=({productType:e,windowSize:a})=>{switch(e){case"bill_pay":return t.jsx(In,{windowSize:a});case"reimbursement":return t.jsx(Ln,{windowSize:a});case"zeni_accounts":return t.jsx(On,{windowSize:a});case"zeni_treasury":return t.jsx(Rn,{windowSize:a});case"charge_cards":default:return t.jsx(Fn,{windowSize:a})}},mn=({analytics:e,allBankAccounts:a,setupView:L,connectedAccountProvider:O,onFetchLinkTokenClick:s,onUpdatePaymentAccountStatus:d,onEstablishConnectionClick:$,onEstablishConnectionSuccess:z})=>{const w=ae(),c=we(),{trigger:F,formState:{errors:M}}=et(),{plaidConnectionDetails:R,allFundingAccounts:l,primaryFundingAccount:o,productType:r}=L,x=R.link_account,C=R.update_account,[B,N]=b.useState(void 0),[le,G]=b.useState(!1),ce=()=>{G(!0)},k=B==="update_account"?C:x,[m,W]=b.useState(k.linkToken??null),[j,T]=b.useState(!1),E=x.fetchStatus.fetchState==="In-Progress"||x.updateStatus.fetchState==="In-Progress";let S,_,u,y=!1;o!=null&&(o.accType==="depositAccount"?S={code:"verified",name:"Verified"}:(S=o.providerVerificationStatus,_=o?.institutionDetails,u=S?.code,y=o?.isLoginRequired??!1));const fe=de(x.updateStatus.fetchState),se=de(C.updateStatus.fetchState),Re=de(C.fetchStatus.fetchState),We=w.mode==="light"?new X(w.colors.brandColorJadeLight):new X(w.colors.brandColorJadeDark),Be=b.useCallback((p,D)=>{e.trackConnectBankSuccess(r,"Settings");const ve=D.accounts.find(Ue=>Ue.id===o?.providerAccountId)??D.accounts[0];o?.id!=null&&B==="update_account"&&ve?.verification_status!=null&&!y?d(ve?.verification_status,o.id,"update_account",I(r),r):$(p,I(r),r),N(void 0),T(!1)},[e,r,o?.id,o?.providerAccountId,B,y,d,$]),De=b.useCallback((p,D)=>{p!=null&&(e.trackConnectBankFailure(r,p.error_code+" "+p.error_message,"Settings"),p.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&o?.id!=null&&d("verification_failed",o.id,"update_account",I(r),r),console.log("Plaid Connection Error",p,D)),N(void 0),T(!1)},[e,r,o?.id,d]),{open:re,ready:xe}=tt({token:m,onSuccess:Be,onExit:De});b.useEffect(()=>{(fe==="In-Progress"&&x.updateStatus.fetchState==="Completed"||se==="In-Progress"&&C.updateStatus.fetchState==="Completed")&&u!=="verified"&&u!=="manually_verified"&&u!=="automatically_verified"&&u!=="database_matched"&&(s("link_account",I(r)),z(I(r),r))},[x.updateStatus.fetchState,z,s,o?.providerVerificationStatus?.code,o?.id,fe,se,C.updateStatus.fetchState,u,r]),b.useEffect(()=>{(Y.isVerifiedStatusCode(u??"")||u==="verification_failed")&&!j&&B!=null&&k.linkToken===m&&k.fetchStatus.fetchState==="Completed"&&xe&&T(!0)},[xe,m,k.fetchStatus.fetchState,k.linkToken,u,B,j]);const ye=me(pn,"primaryAccountSection"),Me=nt(M,ye);b.useEffect(()=>{k.fetchStatus.fetchState==="Completed"&&k.linkToken!=null&&k.linkToken!==m&&W(k.linkToken)},[k.fetchStatus.fetchState,k.linkToken,m]),b.useEffect(()=>{j&&re()},[j,re]),b.useEffect(()=>{!o?.zeniAccountId&&!Me&&F(ye)},[o?.id]),b.useEffect(()=>{(u==null||u==="verification_failed"||u==="verification_expired"||Y.isVerifiedStatusCode(u))&&(Y.zeniDate(new Date().toISOString()).isAfter(x.expiration)||x.linkToken==null)&&s("link_account",I(r))},[]);const Ee=()=>{e.trackConnectBankGetBalance(r,"Settings"),N("update_account"),s("update_account",I(r),o?.id)},Se=`${o?.accountSubType?.name!=null?o?.accountSubType?.name.substring(0,1).toUpperCase().concat(o?.accountSubType?.name.substring(1)):""} ${o?.maskedAccountNumber??""}`.trim(),be=_?.zeniInstitutionId.toLowerCase()==="chase",Ne=l.findIndex(p=>p.id===o?.id),Ve={element:t.jsx(Le,{width:g.iconWidthHeight.valuePx(c)}),color:We};return t.jsxs(gn,{windowSize:c,children:[le===!0?ht.createPortal(t.jsx(mt,{connectedAccountProvider:O,action:{onBackClick:()=>G(!1)}}),document.body):null,t.jsxs(wn,{windowSize:c,wrapperWidth:P[0].width,children:[t.jsx(xn,{windowSize:c,isDarkMode:w.mode==="dark",children:t.jsx(hn,{productType:r,windowSize:c})}),t.jsx(fn,{children:ze.productNameByType[r]})]}),t.jsx(yn,{windowSize:c,wrapperWidth:P[1].width,children:t.jsxs(kn,{windowSize:c,children:[o!=null&&c!=="small"?t.jsx(zn,{isDisabled:y,children:gt(Ve,c,w.mode==="dark",o,Ne,!1)}):null,t.jsxs(jn,{windowSize:c,className:"fundingAccount",children:[t.jsx(Oe,{style:{display:c==="small"?"block":"inherit",width:"-webkit-fill-available",color:w.colors.hero},customStyleConfig:{menu:()=>({width:c==="small"?"auto":510})},controlProperty:{controlHeight:h[4],fontWeight:$e.medium,highlightOnHover:!1,leftRightMargin:!1,fieldWidth:c==="small"?240:300},customPlaceholder:{color:w.colors.hero,weight:$e.medium},name:me(r,"primaryAccountSection"),placeholder:ke.selectAccountPlaceholder,capitalizeOptions:!0,appendSublabel:!1,showLogoInSingleValue:!1,isClearable:!1,maxMenuHeight:220,valueToLogo:(p,D)=>ot(l,p,D),valueToSubLabels:(p,D)=>it(l,p,D,!1),defaultValue:{selectedOption:o?.id,allOptions:l.map(p=>({label:p.label,value:p.id,isRecommended:p.accType==="depositAccount"}))},textAlignment:"left",showDownChevronIcon:!0,showTickIcon:!1,isOptionRemovable:!1,registerOptions:{required:!1},showCreateOption:!0,showEmptyState:!1,isDisabled:E?"disabled":void 0,showLoadingIcon:E,onClickCreateOption:()=>{e.trackConnectBank(r,"Settings"),N("link_account"),x.linkToken==null||Y.zeniDate(new Date().toISOString()).isAfter(x.expiration)?s("link_account",I(r)):m!==x.linkToken?W(x.linkToken):j?re():T(!0)}}),t.jsxs(Sn,{isDisabled:y,children:[Se?t.jsxs(t.Fragment,{children:[t.jsx(bn,{children:Se}),c!=="small"&&(u!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification"||y||be)?t.jsx($n,{}):null]}):null,c==="small"&&S!=null?t.jsx(ee,{style:{width:"max-content",padding:i.sp0,marginLeft:i.sp2},tagTitle:S.name,textColor:te(S.code)}):null,u!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification"||y||be?t.jsx(wt,{productType:r,isUpdateLinkClicked:B==="update_account",isLoginRequired:y,isPendingVerification:u!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification",fetchAndUpdateStatues:{fetchStatus:C.fetchStatus,updateStatus:C.updateStatus,linkFetchStatus:x.fetchStatus,linkUpdateStatus:x.updateStatus,prevFetchState:Re,prevUpdateState:se},onUpdateLinkTokenClick:Ee,onChaseInfoClick:ce}):null]})]}),c==="small"?t.jsxs(Cn,{children:[o?.accountBalance?.available?t.jsx(je,{className:"balanceLabel",children:ne("0,0[.]00",o?.accountBalance?.available)}):t.jsx(he,{children:pe}),o?.accountBalance?.lastRefreshTime?t.jsx(Ae,{className:"balanceLabel",children:ie(o?.accountBalance?.lastRefreshTime)}):o?.balanceFetchStatus.fetchState==="In-Progress"?t.jsx(q,{size:"Small",start:!0}):null]}):null]})}),t.jsxs(Pn,{windowSize:c,isDisabled:y,wrapperWidth:P[2].width,onClick:p=>p.stopPropagation(),"data-testid":at("bank-account-section",r),className:"qboLinkAcc",children:[c==="small"?t.jsx(vn,{children:ze.bankConnectionHeader.linkAccount}):null,t.jsx(_n,{isDisabled:y?"disabled":void 0,name:me(r,"bankAccountSection"),placeholder:ke.zeniCashAccountPlaceholder,defaultValue:{selectedOption:o?.zeniAccountId??"",allOptions:a.map(p=>({label:p.accountName,value:p.accountId}))},controlProperty:{highlightOnHover:!0},isOptionRemovable:!1,textAlignment:"left",registerOptions:{required:!1},style:{width:c==="small"?"calc(100% - 135px)":"100%",marginLeft:c==="small"?i.sp0:`-${i.sp3}`}})]}),c!=="small"?t.jsx(Tn,{windowSize:c,wrapperWidth:P[3].width,children:S!=null?t.jsx(ee,{style:{width:"max-content",padding:0},tagTitle:S.name,textColor:te(S.code)}):t.jsx(he,{children:pe})}):null,c!=="small"?t.jsxs(An,{windowSize:c,wrapperWidth:P[4].width,children:[o?.accountBalance?.available?t.jsx(je,{className:"balanceLabel",children:ne("0,0[.]00",o?.accountBalance?.available)}):t.jsx(he,{children:pe}),o?.accountBalance?.lastRefreshTime?t.jsx(Ae,{className:"balanceLabel",children:ie(o?.accountBalance?.lastRefreshTime)}):o?.balanceFetchStatus.fetchState==="In-Progress"?t.jsx(q,{size:"Small",start:!0}):null]}):null]})},gn=n.div`
-  display: flex;
-  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
-  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
-  padding: ${e=>g.containerPadding.valuePx(e.windowSize)};
-  padding-right: ${e=>g.containerRightPadding.valuePx(e.windowSize)};
-`,he=n.div`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-`,wn=n.div`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-bottom: ${e=>g.productTypeContainerMarginBottom.valuePx(e.windowSize)};
-  padding-right: ${i.sp3};
-`,fn=n(A)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,xn=n.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: ${e=>e.windowSize==="small"?"flex-start":"unset"};
-  padding: ${e=>g.iconPadding.valuePx(e.windowSize)};
-  background: ${e=>e.windowSize==="small"?e.isDarkMode?e.theme.colors.brandColorJadeLight:e.theme.colors.brandColorJadeDark:e.isDarkMode?e.theme.colors.brandColorJadeDark:e.theme.colors.brandColorJadeLight};
-  border-radius: ${i.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${e=>e.windowSize==="small"?e.isDarkMode?e.theme.colors.brandColorOnyx:V.neutralGrey5Light:e.isDarkMode?V.neutralGrey5Light:e.theme.colors.brandColorOnyx};
-  max-width: ${e=>g.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${e=>g.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${i.sp2};
-`,yn=n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Sn=n(v)`
-  display: flex;
-  align-items: center;
-  color: ${e=>e.isDisabled?e.theme.colors.grey1:"inherit"};
-  flex-wrap: wrap;
-`,bn=n.div`
-  display: flex;
-`,je=n(A)`
-  display: flex;
-  justify-content: flex-end;
-`,Ae=n(v)`
-  color: ${e=>e.theme.colors.hero};
-`,vn=n(v)`
-  color: ${e=>e.theme.colors.grey1};
-  width: 135px;
-`,$n=n.div`
-  display: inline-block;
-  border-radius: ${i.sp2};
-  margin: ${i.sp0} ${i.sp2};
-  width: ${i.sp1};
-  height: ${i.sp1};
-  cursor: inherit;
-  background-color: ${e=>e.theme.colors.grey1};
-`,zn=n.div`
-  display: flex;
-  opacity: ${e=>e.isDisabled?.8:1};
-`,kn=n.div`
-  display: flex;
-  justify-content: flex-start;
-`,jn=n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.windowSize==="small"?"64%":"100%"};
-`,An=n.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Cn=n.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  width: 36%;
-`,Tn=n.div`
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Pn=n.div`
-  display: flex;
-  align-items: center;
-  opacity: ${e=>e.isDisabled?.4:1};
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-top: ${e=>g.linkAccountContainerMarginTop.valuePx(e.windowSize)};
-`,_n=n(Oe)`
-  border-radius: ${i.sp2};
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  color: ${e=>e.theme.colors.hero};
-  ${Ie.smallRegular.css};
-`,In=n(dt)`
-  width: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-`,Ln=n(rt)`
-  width: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-`,On=n(Le)`
-  width: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-`,Fn=n(ct)`
-  width: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-`,Rn=n(st)`
-  width: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>g.productTypeIconSize.valuePx(e.windowSize)};
-`,me=(e,a)=>`${e}.${a}`,I=e=>{switch(e){case"zeni_accounts":return"account_setup";case"bill_pay":return"bill_pay_setup";case"charge_cards":return"charge_card_setup";case"reimbursement":return"reimbursement_setup";case"zeni_treasury":return"treasury_setup"}},{settings:{bankConnectionListHeader:ge,title:Wn,infoText:Bn}}=J.getLocalizedStrings().common,oe={pageContentPadding:new f(h[4],h[8]),subtitleSectionWidth:new f(343,580,1200),subTitleBottomMargin:new f(h[0],h[5])},Dn={qboLinkAcc:new Xe("smallRegular","standardRegular")},Mn="bankConnectionsSettingsPage",U="bankAccountSection",H="primaryAccountSection",En="bill_pay",Nn="reimbursement",Vn="zeni_accounts",Un="charge_cards",Hn="zeni_treasury",Ce=e=>t.jsx(Zn,{children:P.map(a=>t.jsx(Gn,{actualDataValue:a.value,wrapperWidth:a.width,windowSize:e,children:t.jsx(Yn,{children:a.value})},a.value))}),bi=({analytics:e,bankSetupView:a,connectedAccountProvider:L,onBackClick:O,onUpdateAccountClick:s,onFetchLinkTokenClick:d,onUpdatePaymentAccountStatus:$,onUpdatePaymentAccountLoginStatus:z,onEstablishConnectionClick:w,onEstablishConnectionSuccess:c,onClickMenuIcon:F,onUpdatePrimaryFundingAccount:M,onRemoveConnection:R})=>{const l=ae(),o=we(),{allFundingAccounts:r,primaryConnection:x}=a,C=He({mode:"all",reValidateMode:"onChange",defaultValues:_e(a),values:_e(a)}),B=C.handleSubmit(m=>{}),N=async(m,W)=>{const j=m.split("."),T=j[0],E=j[1],S=x.find(_=>_.productType===T);if(T!=null&&E!=null){const _=W[T][E];if(E==="primaryAccountSection"){const u=r.find(y=>y.id===_.selectedOption)?.accType;_.selectedOption!=null&&u!=null&&M(_.selectedOption,I(T),u)}else if(E==="bankAccountSection"&&S!=null&&S.primaryFundingAccount!=null&&_.selectedOption!=null){const u=S.primaryFundingAccount?.id,y=S.primaryFundingAccount?.accType;u!=null&&y!=null&&s(_.selectedOption,u,T,I(T),y)}}};b.useEffect(()=>{const m=C.watch((W,{name:j})=>{j!=null&&W!=null&&qe(()=>N(j,W))});return()=>{m.unsubscribe()}});const le=a.fetchState==="In-Progress"||a.fetchState==="Not-Started",G=a.fetchState==="Completed"&&a.allFundingAccounts.length===0,ce=o==="small"?Jt:kt,k=()=>le?t.jsx(Xn,{children:t.jsx(q,{size:"ExtraLarge",start:!0})}):G?t.jsx(Ze,{message:"No bank connections added."}):t.jsxs(qn,{windowSize:o,children:[t.jsx(Pe,{children:ge.primary}),o!=="small"?Ce(o):null,t.jsx(Ge,{...C,children:t.jsx("form",{id:ai(Mn),onSubmit:B,children:t.jsx(ei,{windowSize:o,children:a.primaryConnection.map(m=>m!=null?t.jsx(Te,{windowSize:o,children:t.jsx(mn,{analytics:e,allBankAccounts:a.allBankAccounts,setupView:m,connectedAccountProvider:L,onFetchLinkTokenClick:d,onUpdatePaymentAccountStatus:$,onUpdatePaymentAccountLoginStatus:z,onEstablishConnectionClick:w,onEstablishConnectionSuccess:c})},m.productType):null)})})}),a.otherPaymentAccounts.length>0?t.jsxs(Kn,{children:[t.jsx(Pe,{children:ge.other}),t.jsx(ii,{children:t.jsx(Ye,{display:"flex",placement:"right",maxWidth:"340px",title:ge.otherToolTip,style:{padding:`12px ${i.sp3}`},children:t.jsx(oi,{})})})]}):null,o!=="small"&&a.otherPaymentAccounts.length>0?Ce(o):null,a.otherPaymentAccounts.map(m=>{const W=r.find(j=>j.id===m.paymentAccountId)?.balanceFetchStatus;return t.jsx(Te,{windowSize:o,children:t.jsx(ce,{paymentAccount:m,bankAccountList:a.allBankAccounts,balanceFetchStatus:W,onRemoveConnection:R})},m.paymentAccountId)})]});return t.jsxs(Jn,{children:[t.jsx(Je,{source:"BankConnectionsSettingsPage",title:Wn.bankConnections,backgroundColor:l.colors.grey4,style:{zIndex:3},onBackClick:O,showBackButton:!1,showMenuIcon:o==="medium-compact"||o==="small",onClickMenuIcon:F}),t.jsxs(Qn,{windowSize:o,children:[t.jsx(ti,{windowSize:o,children:t.jsx(ni,{windowSize:o,children:Bn.bankConnections})}),k()]})]})},qn=n.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-left: ${e=>oe.pageContentPadding.valuePx(e.windowSize)};
-  padding-right: ${e=>oe.pageContentPadding.valuePx(e.windowSize)};
-`,Jn=n.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  row-gap: ${i.sp3};
-  width: 100%;
-  background-color: ${e=>e.theme.colors.grey4};
-`,Zn=n(v)`
-  top: ${i.sp0};
-  left: ${i.sp0};
-  min-height: ${i.sp8};
-  width: auto;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${i.sp3} ${i.sp8} ${i.sp3} ${i.sp4};
-  background-color: ${e=>e.theme.colors.grey4};
-  justify-content: space-between;
-  position: sticky;
-`,Gn=n.div`
-  color: ${e=>e.theme.colors.grey1};
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  display: flex;
-  align-items: center;
-  gap: ${i.sp1};
-  left: ${i.sp0};
-  justify-content: ${e=>e.actualDataValue==="Balance"?"flex-end":"flex-start"};
-  position: static;
-  z-index: 0;
-  padding-left: ${i.sp0};
-  box-sizing: border-box;
-  overflow: hidden;
-`,Yn=n(v)`
-  display: flex;
-  gap: 5px;
-`,Kn=n.div`
-  display: flex;
-  align-items: center;
-`,Te=n.div`
-  display: flex;
-  min-height: 96px;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${e=>e.theme.colors.grey5};
-  border-radius: ${i.sp2};
-  box-sizing: border-box;
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  margin-bottom: ${i.sp5};
-  color: ${e=>e.theme.colors.hero};
-  .fundingAccount
-    .single-select-field__control
-    .select-value-container
-    .single-select-field__single-value {
-    color: ${e=>e.theme.colors.hero};
-    ${Ie.standardRegular.css};
-  }
-  .qboLinkAcc
-    .single-select-field__control
-    .select-value-container
-    .single-select-field__single-value {
-    color: ${e=>e.theme.colors.hero};
-    ${e=>`${Dn.qboLinkAcc.style(e.windowSize)}`};
-  }
-  &:hover {
-    border: ${e=>`1px solid  ${e.theme.colors.primary}`};
-    color: ${e=>e.theme.colors.primary};
-    .balanceLabel {
-      color: ${e=>e.theme.colors.primary};
-    }
-    .single-select-field__control
-      .select-value-container
-      .single-select-field__single-value {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,Qn=n.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-`,Xn=n.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};
-`,ei=n.div`
-  display: flex;
-  flex-direction: column;
-`,Pe=n(Qe)`
-  color: ${e=>e.theme.colors.primary};
-  margin-right: ${i.sp1};
-  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp2};
-`,ti=n(Ke)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: ${e=>oe.subtitleSectionWidth.valuePx(e.windowSize)};
-  margin-bottom: ${e=>oe.subTitleBottomMargin.valuePx(e.windowSize)};
-`,ni=n(A)`
-  display: flex;
-  align-items: center;
-  color: ${e=>e.theme.colors.hero};
-`,ii=n.div`
-  display: flex;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-    svg {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,oi=n(lt)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,_e=e=>{const{primaryConnection:a,allBankAccounts:L,allFundingAccounts:O}=e,s=L.map(l=>({label:l.accountName,value:l.accountId})),d=O.map(l=>({label:l.label,value:l.id,isRecommended:l.accType==="depositAccount"})),$=a.find(l=>l.productType==="bill_pay"),z=a.find(l=>l.productType==="reimbursement"),w=a.find(l=>l.productType==="zeni_accounts"),c=a.find(l=>l.productType==="charge_cards"),F=a.find(l=>l.productType==="zeni_treasury"),M=w?.allFundingAccounts.map(l=>({label:l.label,value:l.id,isRecommended:l.accType==="depositAccount"}))??[],R=F?.allFundingAccounts.map(l=>({label:l.label,value:l.id,isRecommended:l.accType==="paymentAccount"}))??[];return{[En]:{[U]:{selectedOption:$?.primaryFundingAccount?.zeniAccountId,allOptions:s},[H]:{selectedOption:$?.primaryFundingAccount?.id,allOptions:d}},[Nn]:{[U]:{selectedOption:z?.primaryFundingAccount?.zeniAccountId,allOptions:s},[H]:{selectedOption:z?.primaryFundingAccount?.id,allOptions:d}},[Vn]:{[U]:{selectedOption:w?.primaryFundingAccount?.zeniAccountId,allOptions:s},[H]:{selectedOption:w?.primaryFundingAccount?.id,allOptions:M}},[Hn]:{[U]:{selectedOption:F?.primaryFundingAccount?.zeniAccountId,allOptions:s},[H]:{selectedOption:F?.primaryFundingAccount?.id,allOptions:R}},[Un]:{[U]:{selectedOption:c?.primaryFundingAccount?.zeniAccountId,allOptions:s},[H]:{selectedOption:c?.primaryFundingAccount?.id,allOptions:d}}}},ai=e=>`${e}_form`;export{bi as default,ai as formUniqueName};