@zeniai/web-components 3.16.31 → 3.16.32

package/dist/BankAccountWarningSection-Bs2ELMY7.cjs

@@ -1,51 +0,0 @@
-"use strict";const o=require("./vendor-.pnpm-B6vI-hvj.cjs"),t=require("@emotion/styled"),e=require("./index-PcEfbmFv.cjs"),{common:{navBar:{back:m}}}=e.appLocale.getLocalizedStrings(),s={navBarContainerPadding:new e.ResponsiveSized(10,e.sp[3]),formTitleMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[3]),formTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),customTitleMarginBottom:new e.ResponsiveSized(e.sp[0],e.sp[3]),customTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6]),customTitleMarginRight:new e.ResponsiveSized(e.sp[5],e.sp[8])},x={formTitle:new e.ResponsiveSizedStyle("h6Medium","h5Medium")},u=({header:n,isDirty:r,isMagicLink:l,onBackClick:c,setShowConfirmationPopup:p})=>{const i=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[i==="small"?o.jsxRuntimeExports.jsxs($,{windowSize:i,children:[l?null:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click-mobile")}),o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n})]}):o.jsxRuntimeExports.jsx(S,{children:l?null:o.jsxRuntimeExports.jsx(e.Tooltip,{title:m,enterDelay:600,placement:"bottom",children:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click")})})}),i!=="small"?o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n}):null]})},d=t(e.StyledText)`
-  ${n=>`${x.formTitle.style(n.windowSize)}`};
-  color: ${n=>n.theme.colors.primary};
-  margin-bottom: ${n=>s.customTitleMarginBottom.valuePx(n.windowSize)};
-  margin-top: ${e.Space.sp3};
-  margin-left: ${n=>s.customTitleMarginLeft.valuePx(n.windowSize)};
-  margin-right: ${n=>s.customTitleMarginRight.valuePx(n.windowSize)};
-`,g=t(e.SvgArrowLeft)`
-  cursor: pointer;
-  color: ${n=>n.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${n=>n.theme.colors.primary};
-  }
-`,S=t.div`
-  margin: ${e.Space.sp3} ${e.Space.sp8} ${e.Space.sp3} ${e.Space.sp6};
-`,$=t.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: ${e.Space.sp0};
-  padding-top: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
-  padding-bottom: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
-  padding-right: ${e.Space.sp5};
-  padding-left: ${e.Space.sp0};
-  z-index: 2;
-  background-color: ${n=>n.theme.colors.grey4};
-`,a={marginBottom:new e.ResponsiveSized(e.sp[5],e.sp[3]),marginRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),marginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6])},v=({warningText:n})=>{const r=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(h,{size:r,children:[o.jsxRuntimeExports.jsx(R,{children:o.jsxRuntimeExports.jsx(z,{})}),o.jsxRuntimeExports.jsx(w,{children:n})]})},h=t.div`
-  display: flex;
-  background-color: ${e.Colors.alertLight};
-  border: 1px solid ${e.Colors.brandColorGoldDark};
-  border-radius: ${e.Space.sp2};
-  color: ${e.Colors.alertDark};
-  margin-bottom: ${n=>a.marginBottom.valuePx(n.size)};
-  padding: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp3} ${e.Space.sp4};
-  margin-right: ${n=>a.marginRight.valuePx(n.size)};
-  margin-left: ${n=>a.marginLeft.valuePx(n.size)};
-`,w=t(e.StandardRegular)`
-  display: flex;
-  flex-grow: 1;
-  color: ${e.Colors.brandColorGoldDark};
-`,R=t.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${e.Space.sp2};
-`,z=t(e.SvgHighImportanceFilled)`
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-  color: ${e.Colors.brandColorGoldDark};
-`;exports.BankAccountPageNavSection=u;exports.BankAccountWarningSection=v;

package/dist/BankAccountWarningSection-Ckzs3GdZ.js

@@ -1,110 +0,0 @@
-import { j as t } from "./vendor-.pnpm-DxbX2tX4.js";
-import i from "@emotion/styled";
-import { u as h, j as u, Z as w, a as f, S as o, R as a, F as v, av as S, K as b, D as n, C as s, ai as z, p as T } from "./index-BcmM9nFj.js";
-const {
-  common: {
-    navBar: { back: j }
-  }
-} = f.getLocalizedStrings(), l = {
-  navBarContainerPadding: new a(10, n[3]),
-  formTitleMarginTop: new a(n[0], n[3]),
-  formTitleMarginLeft: new a(n[3], n[0]),
-  customTitleMarginBottom: new a(n[0], n[3]),
-  customTitleMarginLeft: new a(n[3], n[6]),
-  customTitleMarginRight: new a(n[5], n[8])
-}, k = {
-  formTitle: new S("h6Medium", "h5Medium")
-}, W = ({
-  header: e,
-  isDirty: c,
-  isMagicLink: g,
-  onBackClick: m,
-  setShowConfirmationPopup: p
-}) => {
-  const r = h();
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    r === "small" ? /* @__PURE__ */ t.jsxs(y, { windowSize: r, children: [
-      g ? null : /* @__PURE__ */ t.jsx(
-        $,
-        {
-          onClick: () => c ? p?.(!0) : m?.(),
-          "data-testid": u(
-            "bank-account-page-back-click-mobile"
-          )
-        }
-      ),
-      /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e })
-    ] }) : /* @__PURE__ */ t.jsx(B, { children: g ? null : /* @__PURE__ */ t.jsx(w, { title: j, enterDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
-      $,
-      {
-        onClick: () => c ? p?.(!0) : m?.(),
-        "data-testid": u("bank-account-page-back-click")
-      }
-    ) }) }),
-    r !== "small" ? /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e }) : null
-  ] });
-}, x = i(b)`
-  ${(e) => `${k.formTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${(e) => l.customTitleMarginBottom.valuePx(e.windowSize)};
-  margin-top: ${o.sp3};
-  margin-left: ${(e) => l.customTitleMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.customTitleMarginRight.valuePx(e.windowSize)};
-`, $ = i(v)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, B = i.div`
-  margin: ${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6};
-`, y = i.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: ${o.sp0};
-  padding-top: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
-  padding-right: ${o.sp5};
-  padding-left: ${o.sp0};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, d = {
-  marginBottom: new a(n[5], n[3]),
-  marginRight: new a(n[3], n[8]),
-  marginLeft: new a(n[3], n[6])
-}, F = ({ warningText: e }) => {
-  const c = h();
-  return /* @__PURE__ */ t.jsxs(C, { size: c, children: [
-    /* @__PURE__ */ t.jsx(M, { children: /* @__PURE__ */ t.jsx(R, {}) }),
-    /* @__PURE__ */ t.jsx(P, { children: e })
-  ] });
-}, C = i.div`
-  display: flex;
-  background-color: ${s.alertLight};
-  border: 1px solid ${s.brandColorGoldDark};
-  border-radius: ${o.sp2};
-  color: ${s.alertDark};
-  margin-bottom: ${(e) => d.marginBottom.valuePx(e.size)};
-  padding: ${o.sp3} ${o.sp4} ${o.sp3} ${o.sp4};
-  margin-right: ${(e) => d.marginRight.valuePx(e.size)};
-  margin-left: ${(e) => d.marginLeft.valuePx(e.size)};
-`, P = i(T)`
-  display: flex;
-  flex-grow: 1;
-  color: ${s.brandColorGoldDark};
-`, M = i.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${o.sp2};
-`, R = i(z)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${s.brandColorGoldDark};
-`;
-export {
-  W as B,
-  F as a
-};

package/dist/BankConnectionsSettingsPage-2LbhWTUz.cjs

@@ -1,425 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-B6vI-hvj.cjs"),r=require("react"),i=require("@emotion/styled"),t=require("./index-PcEfbmFv.cjs"),he=require("react-dom"),q=require("@zeniai/client-epic-state"),Se=require("./ChaseOverlay-BEafpISz.cjs"),Ae=require("./SetUpAccountSection-CPeBdiju.cjs"),le=require("./SpendMgmtSetupAccountSection-BVGYK9WS.cjs"),{settings:{bankConnectionHeader:ie}}=t.appLocale.getLocalizedStrings().common,Ie={value:ie.productType,width:new t.ResponsiveSized(100,19)},Pe={value:ie.primaryAccount,width:new t.ResponsiveSized(100,36)},ze={value:ie.linkAccount,width:new t.ResponsiveSized(100,22)},_e={value:ie.status,width:new t.ResponsiveSized(12,12)},Be={value:ie.balance,width:new t.ResponsiveSized(12,13)},N=[Ie,Pe,ze,_e,Be],{common:{settings:fe,strings:{hyphen:de}},commonSetUp:{setUp:ve}}=t.appLocale.getLocalizedStrings(),E={containerPadding:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerRightPadding:new t.ResponsiveSized(t.sp[3],t.sp[8]),iconContainerMaxWidthHeight:new t.ResponsiveSized(t.sp[6],t.sp[7]),iconWidthHeight:new t.ResponsiveSized(20,t.sp[4]),iconPadding:new t.ResponsiveSized(t.sp[1],12),productTypeContainerMarginBottom:new t.ResponsiveSized(t.sp[3],t.sp[0]),linkAccountContainerMarginTop:new t.ResponsiveSized(t.sp[3],t.sp[0]),productTypeIconSize:new t.ResponsiveSized(t.sp[3],t.sp[4])},Oe="bankConnectionsSettingsPage",Le=({productType:e,windowSize:p})=>{switch(e){case"bill_pay":return n.jsxRuntimeExports.jsx(nt,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgBills,{})});case"reimbursement":return n.jsxRuntimeExports.jsx(it,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgReimbursements,{})});case"zeni_accounts":return n.jsxRuntimeExports.jsx(ot,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgBankBuilding,{})});case"zeni_treasury":return n.jsxRuntimeExports.jsx(st,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgTreasury,{})});case"charge_cards":default:return n.jsxRuntimeExports.jsx(at,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgCards,{})})}},De=({allBankAccounts:e,setupView:p,connectedAccountProvider:M,onFetchLinkTokenClick:O,onUpdatePaymentAccountStatus:A,onEstablishConnectionClick:I,onEstablishConnectionSuccess:L})=>{const R=n.useTheme(),s=t.useWindowSizeContext(),S=t.useToolkitContext().analytics,{trigger:W,formState:{errors:D}}=n.useFormContext(),{plaidConnectionDetails:a,allFundingAccounts:F,primaryFundingAccount:o,productType:c}=p,m=a.link_account,k=a.update_account,[u,b]=r.useState(void 0),[H,w]=r.useState(!1),x=()=>{w(!0)},g=u==="update_account"?k:m,[f,_]=r.useState(g.linkToken??null),[$,T]=r.useState(!1),d=m.fetchStatus.fetchState==="In-Progress"||m.updateStatus.fetchState==="In-Progress";let h,P,l,C=!1;o!=null&&(o.accType==="depositAccount"?h={code:"verified",name:"Verified"}:(h=o.providerVerificationStatus,P=o?.institutionDetails,l=h?.code,C=o?.isLoginRequired??!1));const J=t.usePrevious(m.updateStatus.fetchState),G=t.usePrevious(k.updateStatus.fetchState),Q=t.usePrevious(k.fetchStatus.fetchState),z=R.mode==="light"?new n.Color(R.colors.brandColorJadeLight):new n.Color(R.colors.brandColorJadeDark),U=r.useCallback((v,V)=>{S.trackConnectBankSuccess(c,"Settings");const ge=V.accounts.find(Ee=>Ee.id===o?.providerAccountId)??V.accounts[0];o?.id!=null&&u==="update_account"&&ge?.verification_status!=null&&!C?A(ge?.verification_status,o.id,"update_account",y(c),c):I(v,y(c),c),b(void 0),T(!1)},[S,c,o?.id,o?.providerAccountId,u,C,A,I]),Z=r.useCallback((v,V)=>{v!=null&&(S.trackConnectBankFailure(c,v.error_code+" "+v.error_message,"Settings"),v.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&o?.id!=null&&A("verification_failed",o.id,"update_account",y(c),c),console.log("Plaid Connection Error",v,V)),b(void 0),T(!1)},[S,c,o?.id,A]),{open:Y,ready:oe}=n.usePlaidLink({token:f,onSuccess:U,onExit:Z});r.useEffect(()=>{(J==="In-Progress"&&m.updateStatus.fetchState==="Completed"||G==="In-Progress"&&k.updateStatus.fetchState==="Completed")&&(q.isVerifiedPaymentAccountProviderStatusCode(l??"")||(O("link_account",y(c)),L(y(c),c)))},[m.updateStatus.fetchState,L,O,o?.providerVerificationStatus?.code,o?.id,J,G,k.updateStatus.fetchState,l,c]),r.useEffect(()=>{(q.isVerifiedStatusCode(l??"")||l==="verification_failed")&&!$&&u!=null&&g.linkToken===f&&g.fetchStatus.fetchState==="Completed"&&oe&&T(!0)},[oe,f,g.fetchStatus.fetchState,g.linkToken,l,u,$]);const X=pe(Oe,"primaryAccountSection"),B=n.has(D,X);r.useEffect(()=>{g.fetchStatus.fetchState==="Completed"&&g.linkToken!=null&&g.linkToken!==f&&_(g.linkToken)},[g.fetchStatus.fetchState,g.linkToken,f]),r.useEffect(()=>{$&&Y()},[$,Y]),r.useEffect(()=>{!o?.zeniAccountId&&!B&&W(X)},[o?.id]),r.useEffect(()=>{(l==null||l==="verification_failed"||l==="verification_expired"||q.isVerifiedStatusCode(l))&&(q.zeniDate(new Date().toISOString()).isAfter(m.expiration)||m.linkToken==null)&&O("link_account",y(c))},[]);const K=()=>{S.trackConnectBankGetBalance(c,"Settings"),b("update_account"),O("update_account",y(c),o?.id)},ee=`${o?.accountSubType?.name!=null?o?.accountSubType?.name.substring(0,1).toUpperCase().concat(o?.accountSubType?.name.substring(1)):""} ${o?.maskedAccountNumber??""}`.trim(),ae=P?.zeniInstitutionId.toLowerCase()==="chase",$e=F.findIndex(v=>v.id===o?.id),Te={element:n.jsxRuntimeExports.jsx(t.SvgBankBuilding,{width:E.iconWidthHeight.valuePx(s)}),color:z};return n.jsxRuntimeExports.jsxs(We,{windowSize:s,children:[H===!0?he.createPortal(n.jsxRuntimeExports.jsx(Se.ChaseOverlay,{connectedAccountProvider:M,action:{onBackClick:()=>w(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(Fe,{windowSize:s,wrapperWidth:N[0].width,children:[n.jsxRuntimeExports.jsx(Me,{windowSize:s,isDarkMode:R.mode==="dark",children:n.jsxRuntimeExports.jsx(Le,{productType:c,windowSize:s})}),n.jsxRuntimeExports.jsx(Ne,{children:fe.productNameByType[c]})]}),n.jsxRuntimeExports.jsx(He,{windowSize:s,wrapperWidth:N[1].width,children:n.jsxRuntimeExports.jsxs(Ye,{windowSize:s,children:[o!=null&&s!=="small"?n.jsxRuntimeExports.jsx(Ge,{isDisabled:C,children:le.getPaymentAccountIcon(Te,s,R.mode==="dark",o,$e,!1)}):null,n.jsxRuntimeExports.jsxs(Qe,{windowSize:s,className:"fundingAccount",children:[n.jsxRuntimeExports.jsx(t.SingleSelectPickerField,{style:{display:s==="small"?"block":"inherit",width:"-webkit-fill-available",color:R.colors.hero},customStyleConfig:{menu:()=>({width:s==="small"?"auto":510})},controlProperty:{controlHeight:t.sp[4],fontWeight:t.FontWeight.medium,highlightOnHover:!1,leftRightMargin:!1,fieldWidth:s==="small"?240:300},customPlaceholder:{color:R.colors.hero,weight:t.FontWeight.medium},name:pe(c,"primaryAccountSection"),placeholder:ve.selectAccountPlaceholder,capitalizeOptions:!0,appendSublabel:!1,showLogoInSingleValue:!1,isClearable:!1,maxMenuHeight:220,valueToLogo:(v,V)=>t.getOptionIcon(F,v,V),valueToSubLabels:(v,V)=>t.getSubLabels(F,v,V,!1),defaultValue:{selectedOption:o?.id,allOptions:F.map(v=>({label:v.label,value:v.id,isRecommended:v.accType==="depositAccount"}))},textAlignment:"left",showDownChevronIcon:!0,showTickIcon:!1,isOptionRemovable:!1,registerOptions:{required:!1},showCreateOption:!0,showEmptyState:!1,isDisabled:d?"disabled":void 0,showLoadingIcon:d,onClickCreateOption:()=>{S.trackConnectBank(c,"Settings"),b("link_account"),m.linkToken==null||q.zeniDate(new Date().toISOString()).isAfter(m.expiration)?O("link_account",y(c)):f!==m.linkToken?_(m.linkToken):$?Y():T(!0)}}),n.jsxRuntimeExports.jsxs(qe,{isDisabled:C,children:[ee?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(Ue,{children:ee}),s!=="small"&&(l!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification"||C||ae)?n.jsxRuntimeExports.jsx(Je,{}):null]}):null,s==="small"&&h!=null?n.jsxRuntimeExports.jsx(t.ItemWithTag,{style:{width:"max-content",padding:t.Space.sp0,marginLeft:t.Space.sp2},tagTitle:h.name,textColor:t.getSetupStatusColor(h.code)}):null,l!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification"||C||ae?n.jsxRuntimeExports.jsx(le.PaymentActionSection,{productType:c,isUpdateLinkClicked:u==="update_account",isLoginRequired:C,isPendingVerification:l!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification",fetchAndUpdateStatues:{fetchStatus:k.fetchStatus,updateStatus:k.updateStatus,linkFetchStatus:m.fetchStatus,linkUpdateStatus:m.updateStatus,prevFetchState:Q,prevUpdateState:G},onUpdateLinkTokenClick:K,onChaseInfoClick:x}):null]})]}),s==="small"?n.jsxRuntimeExports.jsxs(Ke,{children:[o?.accountBalance?.available?n.jsxRuntimeExports.jsx(ye,{className:"balanceLabel",children:t.amountToString("0,0[.]00",o?.accountBalance?.available)}):n.jsxRuntimeExports.jsx(ue,{children:de}),o?.accountBalance?.lastRefreshTime?n.jsxRuntimeExports.jsx(we,{className:"balanceLabel",children:t.getTimeDifferenceText(o?.accountBalance?.lastRefreshTime)}):o?.balanceFetchStatus.fetchState==="In-Progress"?n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):null]}):null]})}),n.jsxRuntimeExports.jsxs(et,{windowSize:s,isDisabled:C,wrapperWidth:N[2].width,onClick:v=>v.stopPropagation(),"data-testid":t.generateDataTestId("bank-account-section",c),className:"qboLinkAcc",children:[s==="small"?n.jsxRuntimeExports.jsx(Ve,{children:fe.bankConnectionHeader.linkAccount}):null,n.jsxRuntimeExports.jsx(tt,{isDisabled:C?"disabled":void 0,name:pe(c,"bankAccountSection"),placeholder:ve.zeniCashAccountPlaceholder,defaultValue:{selectedOption:o?.zeniAccountId??"",allOptions:e.map(v=>({label:v.accountName,value:v.accountId}))},controlProperty:{highlightOnHover:!0},isOptionRemovable:!1,textAlignment:"left",registerOptions:{required:!1},style:{width:s==="small"?"calc(100% - 135px)":"100%",marginLeft:s==="small"?t.Space.sp0:`-${t.Space.sp3}`}})]}),s!=="small"?n.jsxRuntimeExports.jsx(Xe,{windowSize:s,wrapperWidth:N[3].width,children:h!=null?n.jsxRuntimeExports.jsx(t.ItemWithTag,{style:{width:"max-content",padding:0},tagTitle:h.name,textColor:t.getSetupStatusColor(h.code)}):n.jsxRuntimeExports.jsx(ue,{children:de})}):null,s!=="small"?n.jsxRuntimeExports.jsxs(Ze,{windowSize:s,wrapperWidth:N[4].width,children:[o?.accountBalance?.available?n.jsxRuntimeExports.jsx(ye,{className:"balanceLabel",children:t.amountToString("0,0[.]00",o?.accountBalance?.available)}):n.jsxRuntimeExports.jsx(ue,{children:de}),o?.accountBalance?.lastRefreshTime?n.jsxRuntimeExports.jsx(we,{className:"balanceLabel",children:t.getTimeDifferenceText(o?.accountBalance?.lastRefreshTime)}):o?.balanceFetchStatus.fetchState==="In-Progress"?n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):null]}):null]})},We=i.div`
-  display: flex;
-  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
-  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
-  padding: ${e=>E.containerPadding.valuePx(e.windowSize)};
-  padding-right: ${e=>E.containerRightPadding.valuePx(e.windowSize)};
-`,ue=i.div`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-`,Fe=i.div`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-bottom: ${e=>E.productTypeContainerMarginBottom.valuePx(e.windowSize)};
-  padding-right: ${t.Space.sp3};
-`,Ne=i(t.StandardRegular)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,Me=i.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: ${e=>e.windowSize==="small"?"flex-start":"unset"};
-  padding: ${e=>E.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: ${t.Space.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${e=>e.windowSize==="small"?e.isDarkMode?e.theme.colors.brandColorOnyx:t.Colors.neutralGrey5Light:e.isDarkMode?t.Colors.neutralGrey5Light:e.theme.colors.brandColorOnyx};
-  max-width: ${e=>E.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${e=>E.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${t.Space.sp2};
-`,He=i.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,qe=i(t.SmallRegular)`
-  display: flex;
-  align-items: center;
-  color: ${e=>e.isDisabled?e.theme.colors.grey1:"inherit"};
-  flex-wrap: wrap;
-`,Ue=i.div`
-  display: flex;
-`,ye=i(t.StandardRegular)`
-  display: flex;
-  justify-content: flex-end;
-`,we=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,Ve=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.grey1};
-  width: 135px;
-`,Je=i.div`
-  display: inline-block;
-  border-radius: ${t.Space.sp2};
-  margin: ${t.Space.sp0} ${t.Space.sp2};
-  width: ${t.Space.sp1};
-  height: ${t.Space.sp1};
-  cursor: inherit;
-  background-color: ${e=>e.theme.colors.grey1};
-`,Ge=i.div`
-  display: flex;
-  opacity: ${e=>e.isDisabled?.8:1};
-`,Ye=i.div`
-  display: flex;
-  justify-content: flex-start;
-`,Qe=i.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.windowSize==="small"?"64%":"100%"};
-`,Ze=i.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,Ke=i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  width: 36%;
-`,Xe=i.div`
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,et=i.div`
-  display: flex;
-  align-items: center;
-  opacity: ${e=>e.isDisabled?.4:1};
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-top: ${e=>E.linkAccountContainerMarginTop.valuePx(e.windowSize)};
-`,tt=i(t.SingleSelectPickerField)`
-  border-radius: ${t.Space.sp2};
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  color: ${e=>e.theme.colors.hero};
-  ${t.textStyles.smallRegular.css};
-`,nt=i.div`
-  width: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`,it=i.div`
-  width: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`,ot=i.div`
-  width: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`,at=i.div`
-  width: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`,st=i.div`
-  width: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${e=>E.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`,pe=(e,p)=>`${e}.${p}`,y=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";case"other_connection":return"other_connection_setup"}},{common:{settings:me,strings:{empty:ct,hyphen:lt}}}=t.appLocale.getLocalizedStrings(),se={paymentAccountIconSize:new t.ResponsiveSized(t.sp[6],t.sp[7])},rt=()=>null,dt=({paymentAccount:e,bankAccountList:p,balanceFetchStatus:M,connectedAccountProvider:O,onRemoveConnection:A,onFetchLinkTokenClick:I,onEstablishConnectionClick:L,onEstablishConnectionSuccess:R,onUpdatePaymentAccountStatus:s})=>{const j=n.useTheme(),S=t.useWindowSizeContext(),D=t.useToolkitContext().analytics,[a,F]=r.useState(!1),[o,c]=r.useState(!1),m=()=>{c(!0)},k=e.plaidConnectionDetails.link_account,u=e.plaidConnectionDetails.update_account,[b,H]=r.useState(void 0),w=b==="update_account"?u:k,[x,g]=r.useState(w.linkToken??null),[f,_]=r.useState(!1),$=t.usePrevious(k.updateStatus.fetchState),T=t.usePrevious(u.updateStatus.fetchState),d=t.usePrevious(u.fetchStatus.fetchState),h=e?.providerVerificationStatus,P=e?.isLoginRequired??!1,l="other_connection",C=h?.code,J=r.useCallback((B,K)=>{D.trackConnectBankSuccess(l,"Settings");const ee=K.accounts.find(ae=>ae.id===e.providerAccountId)??K.accounts[0];e.paymentAccountId!=null&&b==="update_account"&&ee?.verification_status!=null&&!P?s(ee?.verification_status,e.paymentAccountId,"update_account",y(l),l):L(B,y(l),l),H(void 0),_(!1)},[D,l,e.paymentAccountId,e.providerAccountId,b,P,s,L]),G=r.useCallback((B,K)=>{B!=null&&(D.trackConnectBankFailure(l,B.error_code+" "+B.error_message,"Settings"),B.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&e.paymentAccountId!=null&&s("verification_failed",e.paymentAccountId,"update_account",y(l),l),console.log("Plaid Connection Error",B,K)),H(void 0),_(!1)},[D,l,e.paymentAccountId,s]),{open:Q,ready:z}=n.usePlaidLink({token:x,onSuccess:J,onExit:G});r.useEffect(()=>{w.fetchStatus.fetchState==="Completed"&&w.linkToken!=null&&w.linkToken!==x&&g(w.linkToken)},[w.fetchStatus.fetchState,w.linkToken,x]),r.useEffect(()=>{f&&Q()},[f,Q]),r.useEffect(()=>{($==="In-Progress"&&k.updateStatus.fetchState==="Completed"||T==="In-Progress"&&u.updateStatus.fetchState==="Completed")&&(q.isVerifiedStatusCode(C??"")||(I("link_account",y(l)),R(y(l),l)))},[k.updateStatus.fetchState,R,I,e?.providerVerificationStatus?.code,e?.paymentAccountId,$,T,u.updateStatus.fetchState,C,l]),r.useEffect(()=>{(q.isVerifiedStatusCode(C??"")||C==="verification_failed")&&!f&&b!=null&&w.linkToken===x&&w.fetchStatus.fetchState==="Completed"&&z&&_(!0)},[z,x,w.fetchStatus.fetchState,w.linkToken,C,b,f]);const U=()=>{D.trackConnectBankGetBalance(l,"Settings"),H("update_account"),I("update_account",y(l),e.paymentAccountId)},Z=j.mode==="light"?new n.Color(j.colors.brandColorJadeLight):new n.Color(j.colors.brandColorJadeDark),Y={element:n.jsxRuntimeExports.jsx(jt,{windowSize:S,children:n.jsxRuntimeExports.jsx(t.SvgExternalAccount,{})}),color:Z},oe=p.find(B=>B.accountId===e.zeniAccountId),X=()=>{F(B=>!B)};return n.jsxRuntimeExports.jsxs(ut,{onMouseEnter:X,onMouseLeave:X,children:[o===!0?he.createPortal(n.jsxRuntimeExports.jsx(Se.ChaseOverlay,{connectedAccountProvider:O,action:{onBackClick:()=>c(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(pt,{windowSize:S,wrapperWidth:N[0].width,children:[n.jsxRuntimeExports.jsx(mt,{children:me.otherAccount.title}),n.jsxRuntimeExports.jsx(xt,{children:me.otherAccount.subTitle})]}),n.jsxRuntimeExports.jsxs(ht,{windowSize:S,wrapperWidth:N[1].width,children:[Ae.getPaymentAccountIcon(Y,S,j.mode==="dark",e,!0),n.jsxRuntimeExports.jsxs(kt,{children:[n.jsxRuntimeExports.jsx(Rt,{children:n.jsxRuntimeExports.jsx(Tt,{windowSize:S,children:e.institutionDetails.institutionName})}),n.jsxRuntimeExports.jsxs(bt,{windowSize:S,children:[n.jsxRuntimeExports.jsxs(Et,{children:[n.jsxRuntimeExports.jsx(Ct,{children:e.accountSubType?.name}),n.jsxRuntimeExports.jsx($t,{children:e.maskedAccountNumber}),P&&n.jsxRuntimeExports.jsx(At,{})]}),P&&n.jsxRuntimeExports.jsx(le.PaymentActionSection,{productType:"other_connection",isUpdateLinkClicked:b==="update_account",isLoginRequired:P,isPendingVerification:!1,fetchAndUpdateStatues:{fetchStatus:u.fetchStatus,updateStatus:u.updateStatus,linkFetchStatus:k.fetchStatus,linkUpdateStatus:k.updateStatus,prevFetchState:d,prevUpdateState:T},onUpdateLinkTokenClick:U,onChaseInfoClick:m})]})]})]}),n.jsxRuntimeExports.jsx(St,{windowSize:S,wrapperWidth:N[2].width,children:oe?.accountName??ct}),n.jsxRuntimeExports.jsx(gt,{windowSize:S,wrapperWidth:N[3].width,children:h!=null?n.jsxRuntimeExports.jsx(t.ItemWithTag,{style:{width:"max-content",padding:0,marginTop:t.Space.sp2},tagTitle:h.name,textColor:t.getSetupStatusColor(h.code)}):lt}),n.jsxRuntimeExports.jsxs(ft,{windowSize:S,wrapperWidth:N[4].width,children:[n.jsxRuntimeExports.jsx(vt,{className:"balanceLabel",isRemoveHovered:a,children:t.amountToString("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?n.jsxRuntimeExports.jsx(yt,{className:"balanceLabel",isRemoveHovered:a,children:t.getTimeDifferenceText(e.balances?.lastRefreshTime)}):M?.fetchState==="In-Progress"?n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):null,a&&n.jsxRuntimeExports.jsx(wt,{children:n.jsxRuntimeExports.jsx(t.MoreMenuButton,{moreIconType:"plain",options:[{label:me.otherAccount.remove,value:"remove"}],customStyleConfig:{valueContainer:()=>({height:t.Space.sp3,".more-icon":{width:t.Space.sp3,height:t.Space.sp3,color:j.colors.primary}}),container:()=>({marginLeft:t.Space.sp0,position:"relative"}),control:()=>({background:"transparent"}),menu:()=>({position:"absolute",right:0,borderRadius:t.Space.sp1,marginTop:t.Space.sp2,background:j.colors.grey5,width:"162px",border:`1px solid ${j.colors.grey3}`,boxShadow:`${t.Space.sp0} 1px 2px ${t.Space.sp0} ${t.Colors.boxShadowElevation}`}),option:()=>({height:t.Space.sp6,paddingLeft:t.Space.sp3,paddingRight:t.Space.sp3,display:"flex",alignItems:"center",color:t.Colors.important,":hover":{color:t.Colors.important,backgroundColor:j.colors.background}})},menuPlacement:"bottom",onOptionSelection:B=>{B==="remove"&&A(e.paymentAccountId)},valueToIcon:rt})})]})]})},ut=i.div`
-  display: flex;
-  padding: ${t.Space.sp4};
-  padding-right: ${t.Space.sp8};
-  position: relative;
-`,pt=i.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  align-items: flex-start;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,mt=i(t.StandardRegular)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,xt=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,ht=i.div`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,St=i(t.StandardRegular)`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,gt=i(t.StandardRegular)`
-  display: flex;
-  align-items: center;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-`,ft=i.div`
-  display: flex;
-  flex-direction: column;
-  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
-  justify-content: flex-end;
-  align-items: flex-end;
-`,vt=i(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,yt=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,wt=i.div`
-  position: absolute;
-  right: ${t.Space.sp4};
-`,jt=i.div`
-  margin-right: ${t.Space.sp2};
-  width: ${e=>se.paymentAccountIconSize.valuePx(e.windowSize)};
-  height: ${e=>se.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-width: ${e=>se.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-height: ${e=>se.paymentAccountIconSize.valuePx(e.windowSize)};
-`,kt=i.div`
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-`,Rt=i.div`
-  display: flex;
-  gap: ${t.Space.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`,bt=i.div`
-  display: flex;
-  flex-direction: ${e=>e.windowSize==="large"||e.windowSize==="extra-large"?"row":"column"};
-  align-items: ${e=>e.windowSize==="large"||e.windowSize==="extra-large"?"center":"start"};
-`,Ct=i(t.SmallRegular)`
-  text-transform: capitalize;
-  color: inherit;
-`,$t=i(t.SmallRegular)`
-  margin-left: ${t.Space.sp1};
-`,Tt=i(t.StandardRegular)`
-  max-width: ${`calc(100% - ${t.Space.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`,Et=i.div`
-  display: flex;
-  align-items: center;
-`,At=i.div`
-  display: inline-block;
-  border-radius: ${t.Space.sp2};
-  margin: ${t.Space.sp0} ${t.Space.sp2};
-  width: ${t.Space.sp1};
-  height: ${t.Space.sp1};
-  cursor: inherit;
-  background-color: ${e=>e.theme.colors.grey1};
-`,{common:{settings:ce,strings:{empty:It}}}=t.appLocale.getLocalizedStrings(),Pt=()=>null,zt=({paymentAccount:e,bankAccountList:p,balanceFetchStatus:M,connectedAccountProvider:O,onRemoveConnection:A,onFetchLinkTokenClick:I,onEstablishConnectionClick:L,onEstablishConnectionSuccess:R,onUpdatePaymentAccountStatus:s})=>{const j=n.useTheme(),W=t.useToolkitContext().analytics,[D,a]=r.useState(!1),F=()=>{a(!0)},o=e.plaidConnectionDetails.link_account,c=e.plaidConnectionDetails.update_account,[m,k]=r.useState(void 0),u=m==="update_account"?c:o,[b,H]=r.useState(u.linkToken??null),[w,x]=r.useState(!1),g=t.usePrevious(o.updateStatus.fetchState),f=t.usePrevious(c.updateStatus.fetchState),_=t.usePrevious(c.fetchStatus.fetchState),$=e?.providerVerificationStatus,T=e?.isLoginRequired??!1,d="other_connection",h=$?.code,P=r.useCallback((z,U)=>{W.trackConnectBankSuccess(d,"Settings");const Z=U.accounts.find(Y=>Y.id===e.providerAccountId)??U.accounts[0];e.paymentAccountId!=null&&m==="update_account"&&Z?.verification_status!=null&&!T?s(Z?.verification_status,e.paymentAccountId,"update_account",y(d),d):L(z,y(d),d),k(void 0),x(!1)},[W,d,e.paymentAccountId,e.providerAccountId,m,T,s,L]),l=r.useCallback((z,U)=>{z!=null&&(W.trackConnectBankFailure(d,z.error_code+" "+z.error_message,"Settings"),z.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&e.paymentAccountId!=null&&s("verification_failed",e.paymentAccountId,"update_account",y(d),d),console.log("Plaid Connection Error",z,U)),k(void 0),x(!1)},[W,d,e.paymentAccountId,s]),{open:C,ready:J}=n.usePlaidLink({token:b,onSuccess:P,onExit:l});r.useEffect(()=>{u.fetchStatus.fetchState==="Completed"&&u.linkToken!=null&&u.linkToken!==b&&H(u.linkToken)},[u.fetchStatus.fetchState,u.linkToken,b]),r.useEffect(()=>{w&&C()},[w,C]),r.useEffect(()=>{(g==="In-Progress"&&o.updateStatus.fetchState==="Completed"||f==="In-Progress"&&c.updateStatus.fetchState==="Completed")&&(q.isVerifiedStatusCode(h??"")||(I("link_account",y(d)),R(y(d),d)))},[o.updateStatus.fetchState,R,I,e?.providerVerificationStatus?.code,e?.paymentAccountId,g,f,c.updateStatus.fetchState,h,d]),r.useEffect(()=>{(q.isVerifiedStatusCode(h??"")||h==="verification_failed")&&!w&&m!=null&&u.linkToken===b&&u.fetchStatus.fetchState==="Completed"&&J&&x(!0)},[J,b,u.fetchStatus.fetchState,u.linkToken,h,m,w]);const G=()=>{W.trackConnectBankGetBalance(d,"Settings"),k("update_account"),I("update_account",y(d),e.paymentAccountId)},Q=p.find(z=>z.accountId===e.zeniAccountId);return n.jsxRuntimeExports.jsxs(_t,{children:[D===!0?he.createPortal(n.jsxRuntimeExports.jsx(Se.ChaseOverlay,{connectedAccountProvider:O,action:{onBackClick:()=>a(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(Bt,{children:[n.jsxRuntimeExports.jsx(Ot,{children:`${ce.otherAccount.title} ${ce.otherAccount.subTitleSmall}`}),n.jsxRuntimeExports.jsx(t.MoreMenuButton,{moreIconType:"plain",options:[{label:ce.otherAccount.remove,value:"remove"}],customStyleConfig:{valueContainer:()=>({height:t.Space.sp3,".more-icon":{width:t.Space.sp3,height:t.Space.sp3,color:j.colors.primary}}),container:()=>({marginLeft:t.Space.sp0,position:"relative"}),control:()=>({background:"transparent"}),menu:()=>({position:"absolute",right:0,width:"158px",border:`1px solid ${j.colors.grey3}`,boxShadow:`${t.Space.sp0} 1px 2px ${t.Space.sp0} ${t.Colors.boxShadowElevation}`}),option:()=>({color:j.colors.important,":hover":{color:j.colors.important,backgroundColor:j.colors.background}})},menuPlacement:"bottom",onOptionSelection:z=>{z==="remove"&&A(e.paymentAccountId)},valueToIcon:Pt})]}),n.jsxRuntimeExports.jsxs(Lt,{children:[n.jsxRuntimeExports.jsxs(Ut,{children:[n.jsxRuntimeExports.jsx(Vt,{children:n.jsxRuntimeExports.jsx(Yt,{children:e.institutionDetails.institutionName})}),n.jsxRuntimeExports.jsxs(Qt,{children:[n.jsxRuntimeExports.jsx(Jt,{children:e.accountSubType?.name}),n.jsxRuntimeExports.jsx(Gt,{children:e.maskedAccountNumber}),n.jsxRuntimeExports.jsx(Nt,{children:$!=null?n.jsxRuntimeExports.jsx(t.ItemWithTag,{style:{width:"max-content",padding:0},tagTitle:$.name,textColor:t.getSetupStatusColor($.code)}):null}),T&&n.jsxRuntimeExports.jsx(le.PaymentActionSection,{productType:"other_connection",isUpdateLinkClicked:m==="update_account",isLoginRequired:T,isPendingVerification:!1,fetchAndUpdateStatues:{fetchStatus:c.fetchStatus,updateStatus:c.updateStatus,linkFetchStatus:o.fetchStatus,linkUpdateStatus:o.updateStatus,prevFetchState:_,prevUpdateState:f},onUpdateLinkTokenClick:G,onChaseInfoClick:F})]})]}),n.jsxRuntimeExports.jsxs(Mt,{children:[n.jsxRuntimeExports.jsx(Ht,{className:"balanceLabel",children:t.amountToString("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?n.jsxRuntimeExports.jsx(qt,{className:"balanceLabel",children:t.getTimeDifferenceText(e.balances?.lastRefreshTime)}):M?.fetchState==="In-Progress"?n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraSmall",start:!0}):null]})]}),n.jsxRuntimeExports.jsxs(Dt,{children:[n.jsxRuntimeExports.jsx(Wt,{children:ce.bankConnectionHeader.linkAccount}),n.jsxRuntimeExports.jsx(Ft,{children:Q?.accountName??It})]})]})},_t=i.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${t.Space.sp3};
-`,Bt=i.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  margin-bottom: ${t.Space.sp3};
-  justify-content: space-between;
-`,Ot=i(t.StandardRegular)`
-  color: ${e=>e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`,Lt=i.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: ${t.Space.sp3};
-`,Dt=i.div`
-  display: flex;
-  align-items: center;
-`,Wt=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.grey1};
-  margin-right: ${t.Space.sp2};
-`,Ft=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,Nt=i(t.StandardRegular)`
-  display: flex;
-  align-items: center;
-  margin-left: ${t.Space.sp2};
-`,Mt=i.div`
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-`,Ht=i(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,qt=i(t.SmallRegular)`
-  color: ${e=>e.theme.colors.hero};
-`,Ut=i.div``,Vt=i.div`
-  display: flex;
-  gap: ${t.Space.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`,Jt=i(t.SmallRegular)`
-  text-transform: capitalize;
-`,Gt=i(t.SmallRegular)`
-  margin-left: ${t.Space.sp1};
-`,Yt=i(t.StandardRegular)`
-  max-width: ${`calc(100% - ${t.Space.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`,Qt=i.div`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: ${t.Space.sp2};
-`,{settings:{bankConnectionListHeader:xe,title:Zt,infoText:Kt}}=t.appLocale.getLocalizedStrings().common,re={pageContentPadding:new t.ResponsiveSized(t.sp[4],t.sp[8]),subtitleSectionWidth:new t.ResponsiveSized(343,580,1200),subTitleBottomMargin:new t.ResponsiveSized(t.sp[0],t.sp[5])},Xt={qboLinkAcc:new t.ResponsiveSizedStyle("smallRegular","standardRegular")},en="bankConnectionsSettingsPage",te="bankAccountSection",ne="primaryAccountSection",tn="bill_pay",nn="reimbursement",on="zeni_accounts",an="charge_cards",sn="zeni_treasury",je=e=>n.jsxRuntimeExports.jsx(dn,{children:N.map(p=>n.jsxRuntimeExports.jsx(un,{actualDataValue:p.value,wrapperWidth:p.width,windowSize:e,children:n.jsxRuntimeExports.jsx(pn,{children:p.value})},p.value))}),cn=({bankSetupView:e,connectedAccountProvider:p,onBackClick:M,onUpdateAccountClick:O,onFetchLinkTokenClick:A,onUpdatePaymentAccountStatus:I,onUpdatePaymentAccountLoginStatus:L,onEstablishConnectionClick:R,onEstablishConnectionSuccess:s,onClickMenuIcon:j,onUpdatePrimaryFundingAccount:S,onRemoveConnection:W})=>{const D=n.useTheme(),a=t.useWindowSizeContext(),{allFundingAccounts:F,primaryConnection:o}=e,c=n.useForm({mode:"all",reValidateMode:"onChange",defaultValues:be(e),values:be(e)}),m=c.handleSubmit(x=>{}),k=async(x,g)=>{const f=x.split("."),_=f[0],$=f[1],T=o.find(d=>d.productType===_);if(_!=null&&$!=null){const d=g[_][$];if($==="primaryAccountSection"){const P=F.find(l=>l.id===d.selectedOption)?.accType;d.selectedOption!=null&&P!=null&&S(d.selectedOption,y(_),P)}else if($==="bankAccountSection"&&T!=null&&T.primaryFundingAccount!=null&&d.selectedOption!=null){const h=T.primaryFundingAccount?.id,P=T.primaryFundingAccount?.accType;h!=null&&P!=null&&O(d.selectedOption,h,_,y(_),P)}}};r.useEffect(()=>{const x=c.watch((g,{name:f})=>{f!=null&&g!=null&&n.defer(()=>k(f,g))});return()=>{x.unsubscribe()}});const u=e.fetchState==="In-Progress"||e.fetchState==="Not-Started",b=e.fetchState==="Completed"&&e.allFundingAccounts.length===0,H=a==="small"?zt:dt,w=()=>u?n.jsxRuntimeExports.jsx(hn,{children:n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):b?n.jsxRuntimeExports.jsx(t.NoListDataPage,{message:"No bank connections added."}):n.jsxRuntimeExports.jsxs(ln,{windowSize:a,children:[n.jsxRuntimeExports.jsx(Re,{children:xe.primary}),a!=="small"?je(a):null,n.jsxRuntimeExports.jsx(n.FormProvider,{...c,children:n.jsxRuntimeExports.jsx("form",{id:Ce(en),onSubmit:m,children:n.jsxRuntimeExports.jsx(Sn,{windowSize:a,children:e.primaryConnection.map(x=>x!=null?n.jsxRuntimeExports.jsx(ke,{windowSize:a,children:n.jsxRuntimeExports.jsx(De,{allBankAccounts:e.allBankAccounts,setupView:x,connectedAccountProvider:p,onFetchLinkTokenClick:A,onUpdatePaymentAccountStatus:I,onUpdatePaymentAccountLoginStatus:L,onEstablishConnectionClick:R,onEstablishConnectionSuccess:s})},x.productType):null)})})}),e.otherPaymentAccounts.length>0?n.jsxRuntimeExports.jsxs(mn,{children:[n.jsxRuntimeExports.jsx(Re,{children:xe.other}),n.jsxRuntimeExports.jsx(vn,{children:n.jsxRuntimeExports.jsx(t.Tooltip,{display:"flex",placement:"right",maxWidth:"340px",title:xe.otherToolTip,style:{padding:`12px ${t.Space.sp3}`},children:n.jsxRuntimeExports.jsx(yn,{})})})]}):null,a!=="small"&&e.otherPaymentAccounts.length>0?je(a):null,e.otherPaymentAccounts.map(x=>{const g=F.find(f=>f.id===x.paymentAccountId)?.balanceFetchStatus;return n.jsxRuntimeExports.jsx(ke,{windowSize:a,children:n.jsxRuntimeExports.jsx(H,{paymentAccount:x,bankAccountList:e.allBankAccounts,balanceFetchStatus:g,connectedAccountProvider:p,onRemoveConnection:W,onFetchLinkTokenClick:A,onEstablishConnectionClick:R,onUpdatePaymentAccountStatus:I,onEstablishConnectionSuccess:s})},x.paymentAccountId)})]});return n.jsxRuntimeExports.jsxs(rn,{children:[n.jsxRuntimeExports.jsx(t.NavBar,{source:"BankConnectionsSettingsPage",title:Zt.bankConnections,backgroundColor:D.colors.grey4,style:{zIndex:3},onBackClick:M,showBackButton:!1,showMenuIcon:a==="medium-compact"||a==="small",onClickMenuIcon:j}),n.jsxRuntimeExports.jsxs(xn,{windowSize:a,children:[n.jsxRuntimeExports.jsx(gn,{windowSize:a,children:n.jsxRuntimeExports.jsx(fn,{windowSize:a,children:Kt.bankConnections})}),w()]})]})},ln=i.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-left: ${e=>re.pageContentPadding.valuePx(e.windowSize)};
-  padding-right: ${e=>re.pageContentPadding.valuePx(e.windowSize)};
-`,rn=i.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  row-gap: ${t.Space.sp3};
-  width: 100%;
-  background-color: ${e=>e.theme.colors.grey4};
-`,dn=i(t.SmallRegular)`
-  top: ${t.Space.sp0};
-  left: ${t.Space.sp0};
-  min-height: ${t.Space.sp8};
-  width: auto;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${t.Space.sp3} ${t.Space.sp8} ${t.Space.sp3} ${t.Space.sp4};
-  background-color: ${e=>e.theme.colors.grey4};
-  justify-content: space-between;
-  position: sticky;
-`,un=i.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: ${t.Space.sp1};
-  left: ${t.Space.sp0};
-  justify-content: ${e=>e.actualDataValue==="Balance"?"flex-end":"flex-start"};
-  position: static;
-  z-index: 0;
-  padding-left: ${t.Space.sp0};
-  box-sizing: border-box;
-  overflow: hidden;
-`,pn=i(t.SmallRegular)`
-  display: flex;
-  gap: 5px;
-`,mn=i.div`
-  display: flex;
-  align-items: center;
-`,ke=i.div`
-  display: flex;
-  min-height: 96px;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${e=>e.theme.colors.grey5};
-  border-radius: ${t.Space.sp2};
-  box-sizing: border-box;
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${t.Space.sp2};
-  margin-bottom: ${t.Space.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};
-    ${t.textStyles.standardRegular.css};
-  }
-  .qboLinkAcc
-    .single-select-field__control
-    .select-value-container
-    .single-select-field__single-value {
-    color: ${e=>e.theme.colors.hero};
-    ${e=>`${Xt.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};
-    }
-  }
-`,xn=i.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-`,hn=i.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};
-`,Sn=i.div`
-  display: flex;
-  flex-direction: column;
-`,Re=i(t.LargeMedium)`
-  color: ${e=>e.theme.colors.primary};
-  margin-right: ${t.Space.sp1};
-  padding: ${t.Space.sp3} ${t.Space.sp0} ${t.Space.sp3} ${t.Space.sp2};
-`,gn=i(t.ExtraSmallRegular)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: ${e=>re.subtitleSectionWidth.valuePx(e.windowSize)};
-  margin-bottom: ${e=>re.subTitleBottomMargin.valuePx(e.windowSize)};
-`,fn=i(t.StandardRegular)`
-  display: flex;
-  align-items: center;
-  color: ${e=>e.theme.colors.hero};
-`,vn=i.div`
-  display: flex;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-    svg {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,yn=i(t.SvgInfo)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,be=e=>{const{primaryConnection:p,allBankAccounts:M,allFundingAccounts:O}=e,A=M.map(a=>({label:a.accountName,value:a.accountId})),I=O.map(a=>({label:a.label,value:a.id,isRecommended:a.accType==="depositAccount"})),L=p.find(a=>a.productType==="bill_pay"),R=p.find(a=>a.productType==="reimbursement"),s=p.find(a=>a.productType==="zeni_accounts"),j=p.find(a=>a.productType==="charge_cards"),S=p.find(a=>a.productType==="zeni_treasury"),W=s?.allFundingAccounts.map(a=>({label:a.label,value:a.id,isRecommended:a.accType==="depositAccount"}))??[],D=S?.allFundingAccounts.map(a=>({label:a.label,value:a.id,isRecommended:a.accType==="paymentAccount"}))??[];return{[tn]:{[te]:{selectedOption:L?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:L?.primaryFundingAccount?.id,allOptions:I}},[nn]:{[te]:{selectedOption:R?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:R?.primaryFundingAccount?.id,allOptions:I}},[on]:{[te]:{selectedOption:s?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:s?.primaryFundingAccount?.id,allOptions:W}},[sn]:{[te]:{selectedOption:S?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:S?.primaryFundingAccount?.id,allOptions:D}},[an]:{[te]:{selectedOption:j?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:j?.primaryFundingAccount?.id,allOptions:I}}}},Ce=e=>`${e}_form`;exports.default=cn;exports.formUniqueName=Ce;