@zeniai/web-components 3.17.1 → 3.17.2

package/dist/BankAccountWarningSection--du7_L44.cjs

@@ -0,0 +1,51 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),t=require("@emotion/styled"),e=require("./index-gTpRqqAW.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-BdFMSCPj.js

@@ -0,0 +1,110 @@
+import { j as t } from "./vendor-.pnpm-B2klaOGU.js";
+import i from "@emotion/styled";
+import { u as h, e as u, Z as w, a as f, S as o, R as a, G as v, aw as S, J as b, D as n, C as s, ap as z, o as T } from "./index-BEMjPEfs.js";
+const {
+  common: {
+    navBar: { back: k }
+  }
+} = 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])
+}, B = {
+  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(j, { children: g ? null : /* @__PURE__ */ t.jsx(w, { title: k, 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) => `${B.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};
+  }
+`, j = 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])
+}, A = ({ 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,
+  A as a
+};

package/dist/BankConnectionsSettingsPage-B1wrdDIU.cjs

@@ -0,0 +1,425 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),r=require("react"),i=require("@emotion/styled"),t=require("./index-gTpRqqAW.cjs"),xe=require("react-dom"),he=require("react-plaid-link"),q=require("@zeniai/client-epic-state"),Ee=require("./SetUpAccountSection-yJlsKBUx.cjs"),{settings:{bankConnectionHeader:ie}}=t.appLocale.getLocalizedStrings().common,Ae={value:ie.productType,width:new t.ResponsiveSized(100,19)},Pe={value:ie.primaryAccount,width:new t.ResponsiveSized(100,36)},Ie={value:ie.linkAccount,width:new t.ResponsiveSized(100,22)},ze={value:ie.status,width:new t.ResponsiveSized(12,12)},_e={value:ie.balance,width:new t.ResponsiveSized(12,13)},N=[Ae,Pe,Ie,ze,_e],{common:{settings:ge,strings:{hyphen:re}},commonSetUp:{setUp:fe}}=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])},Be="bankConnectionsSettingsPage",Oe=({productType:e,windowSize:p})=>{switch(e){case"bill_pay":return n.jsxRuntimeExports.jsx(tt,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgBills,{})});case"reimbursement":return n.jsxRuntimeExports.jsx(nt,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgReimbursements,{})});case"zeni_accounts":return n.jsxRuntimeExports.jsx(it,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgBankBuilding,{})});case"zeni_treasury":return n.jsxRuntimeExports.jsx(at,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgTreasury,{})});case"charge_cards":default:return n.jsxRuntimeExports.jsx(ot,{windowSize:p,children:n.jsxRuntimeExports.jsx(t.SvgCards,{})})}},Le=({allBankAccounts:e,setupView:p,connectedAccountProvider:M,onFetchLinkTokenClick:O,onUpdatePaymentAccountStatus:A,onEstablishConnectionClick:P,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,I,l,C=!1;o!=null&&(o.accType==="depositAccount"?h={code:"verified",name:"Verified"}:(h=o.providerVerificationStatus,I=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 Se=V.accounts.find(Te=>Te.id===o?.providerAccountId)??V.accounts[0];o?.id!=null&&u==="update_account"&&Se?.verification_status!=null&&!C?A(Se?.verification_status,o.id,"update_account",y(c),c):P(v,y(c),c),b(void 0),T(!1)},[S,c,o?.id,o?.providerAccountId,u,C,A,P]),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}=he.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=ue(Be,"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=I?.zeniInstitutionId.toLowerCase()==="chase",Ce=F.findIndex(v=>v.id===o?.id),$e={element:n.jsxRuntimeExports.jsx(t.SvgBankBuilding,{width:E.iconWidthHeight.valuePx(s)}),color:z};return n.jsxRuntimeExports.jsxs(De,{windowSize:s,children:[H===!0?xe.createPortal(n.jsxRuntimeExports.jsx(t.ChaseOverlay,{connectedAccountProvider:M,action:{onBackClick:()=>w(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(We,{windowSize:s,wrapperWidth:N[0].width,children:[n.jsxRuntimeExports.jsx(Ne,{windowSize:s,isDarkMode:R.mode==="dark",children:n.jsxRuntimeExports.jsx(Oe,{productType:c,windowSize:s})}),n.jsxRuntimeExports.jsx(Fe,{children:ge.productNameByType[c]})]}),n.jsxRuntimeExports.jsx(Me,{windowSize:s,wrapperWidth:N[1].width,children:n.jsxRuntimeExports.jsxs(Ge,{windowSize:s,children:[o!=null&&s!=="small"?n.jsxRuntimeExports.jsx(Je,{isDisabled:C,children:t.getPaymentAccountIcon($e,s,R.mode==="dark",o,Ce,!1)}):null,n.jsxRuntimeExports.jsxs(Ye,{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:ue(c,"primaryAccountSection"),placeholder:fe.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(He,{isDisabled:C,children:[ee?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(qe,{children:ee}),s!=="small"&&(l!=="verification_failed"&&o?.providerVerificationStatus?.code==="pending_manual_verification"||C||ae)?n.jsxRuntimeExports.jsx(Ve,{}):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(t.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(Ze,{children:[o?.accountBalance?.available?n.jsxRuntimeExports.jsx(ve,{className:"balanceLabel",children:t.amountToString("0,0[.]00",o?.accountBalance?.available)}):n.jsxRuntimeExports.jsx(de,{children:re}),o?.accountBalance?.lastRefreshTime?n.jsxRuntimeExports.jsx(ye,{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(Xe,{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(Ue,{children:ge.bankConnectionHeader.linkAccount}):null,n.jsxRuntimeExports.jsx(et,{isDisabled:C?"disabled":void 0,name:ue(c,"bankAccountSection"),placeholder:fe.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(Ke,{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(de,{children:re})}):null,s!=="small"?n.jsxRuntimeExports.jsxs(Qe,{windowSize:s,wrapperWidth:N[4].width,children:[o?.accountBalance?.available?n.jsxRuntimeExports.jsx(ve,{className:"balanceLabel",children:t.amountToString("0,0[.]00",o?.accountBalance?.available)}):n.jsxRuntimeExports.jsx(de,{children:re}),o?.accountBalance?.lastRefreshTime?n.jsxRuntimeExports.jsx(ye,{className:"balanceLabel",children:t.getTimeDifferenceText(o?.accountBalance?.lastRefreshTime)}):o?.balanceFetchStatus.fetchState==="In-Progress"?n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):null]}):null]})},De=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)};
+`,de=i.div`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+`,We=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};
+`,Fe=i(t.StandardRegular)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Ne=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};
+`,Me=i.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+`,He=i(t.SmallRegular)`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.isDisabled?e.theme.colors.grey1:"inherit"};
+  flex-wrap: wrap;
+`,qe=i.div`
+  display: flex;
+`,ve=i(t.StandardRegular)`
+  display: flex;
+  justify-content: flex-end;
+`,ye=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Ue=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  width: 135px;
+`,Ve=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};
+`,Je=i.div`
+  display: flex;
+  opacity: ${e=>e.isDisabled?.8:1};
+`,Ge=i.div`
+  display: flex;
+  justify-content: flex-start;
+`,Ye=i.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.windowSize==="small"?"64%":"100%"};
+`,Qe=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+`,Ze=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  width: 36%;
+`,Ke=i.div`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+`,Xe=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)};
+`,et=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};
+`,tt=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%;
+  }
+`,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%;
+  }
+`,ue=(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:pe,strings:{empty:st,hyphen:ct}}}=t.appLocale.getLocalizedStrings(),se={paymentAccountIconSize:new t.ResponsiveSized(t.sp[6],t.sp[7])},lt=()=>null,rt=({paymentAccount:e,bankAccountList:p,balanceFetchStatus:M,connectedAccountProvider:O,onRemoveConnection:A,onFetchLinkTokenClick:P,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,I=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&&!I?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,I,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}=he.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??"")||(P("link_account",y(l)),R(y(l),l)))},[k.updateStatus.fetchState,R,P,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"),P("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(wt,{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(dt,{onMouseEnter:X,onMouseLeave:X,children:[o===!0?xe.createPortal(n.jsxRuntimeExports.jsx(t.ChaseOverlay,{connectedAccountProvider:O,action:{onBackClick:()=>c(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(ut,{windowSize:S,wrapperWidth:N[0].width,children:[n.jsxRuntimeExports.jsx(pt,{children:pe.otherAccount.title}),n.jsxRuntimeExports.jsx(mt,{children:pe.otherAccount.subTitle})]}),n.jsxRuntimeExports.jsxs(xt,{windowSize:S,wrapperWidth:N[1].width,children:[Ee.getPaymentAccountIcon(Y,S,j.mode==="dark",e,!0),n.jsxRuntimeExports.jsxs(jt,{children:[n.jsxRuntimeExports.jsx(kt,{children:n.jsxRuntimeExports.jsx($t,{windowSize:S,children:e.institutionDetails.institutionName})}),n.jsxRuntimeExports.jsxs(Rt,{windowSize:S,children:[n.jsxRuntimeExports.jsxs(Tt,{children:[n.jsxRuntimeExports.jsx(bt,{children:e.accountSubType?.name}),n.jsxRuntimeExports.jsx(Ct,{children:e.maskedAccountNumber}),I&&n.jsxRuntimeExports.jsx(Et,{})]}),I&&n.jsxRuntimeExports.jsx(t.PaymentActionSection,{productType:"other_connection",isUpdateLinkClicked:b==="update_account",isLoginRequired:I,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(ht,{windowSize:S,wrapperWidth:N[2].width,children:oe?.accountName??st}),n.jsxRuntimeExports.jsx(St,{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)}):ct}),n.jsxRuntimeExports.jsxs(gt,{windowSize:S,wrapperWidth:N[4].width,children:[n.jsxRuntimeExports.jsx(ft,{className:"balanceLabel",isRemoveHovered:a,children:t.amountToString("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?n.jsxRuntimeExports.jsx(vt,{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(yt,{children:n.jsxRuntimeExports.jsx(t.MoreMenuButton,{moreIconType:"plain",options:[{label:pe.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:lt})})]})]})},dt=i.div`
+  display: flex;
+  padding: ${t.Space.sp4};
+  padding-right: ${t.Space.sp8};
+  position: relative;
+`,ut=i.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+`,pt=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+`,mt=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+`,xt=i.div`
+  display: flex;
+  align-items: center;
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+`,ht=i(t.StandardRegular)`
+  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.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  justify-content: flex-end;
+  align-items: flex-end;
+`,ft=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,vt=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,yt=i.div`
+  position: absolute;
+  right: ${t.Space.sp4};
+`,wt=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)};
+`,jt=i.div`
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+`,kt=i.div`
+  display: flex;
+  gap: ${t.Space.sp2};
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+`,Rt=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"};
+`,bt=i(t.SmallRegular)`
+  text-transform: capitalize;
+  color: inherit;
+`,Ct=i(t.SmallRegular)`
+  margin-left: ${t.Space.sp1};
+`,$t=i(t.StandardRegular)`
+  max-width: ${`calc(100% - ${t.Space.sp3})`};
+  text-transform: capitalize;
+  overflow: hidden;
+`,Tt=i.div`
+  display: flex;
+  align-items: center;
+`,Et=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:At}}}=t.appLocale.getLocalizedStrings(),Pt=()=>null,It=({paymentAccount:e,bankAccountList:p,balanceFetchStatus:M,connectedAccountProvider:O,onRemoveConnection:A,onFetchLinkTokenClick:P,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,I=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}=he.usePlaidLink({token:b,onSuccess:I,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??"")||(P("link_account",y(d)),R(y(d),d)))},[o.updateStatus.fetchState,R,P,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"),P("update_account",y(d),e.paymentAccountId)},Q=p.find(z=>z.accountId===e.zeniAccountId);return n.jsxRuntimeExports.jsxs(zt,{children:[D===!0?xe.createPortal(n.jsxRuntimeExports.jsx(t.ChaseOverlay,{connectedAccountProvider:O,action:{onBackClick:()=>a(!1)}}),document.body):null,n.jsxRuntimeExports.jsxs(_t,{children:[n.jsxRuntimeExports.jsx(Bt,{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(Ot,{children:[n.jsxRuntimeExports.jsxs(qt,{children:[n.jsxRuntimeExports.jsx(Ut,{children:n.jsxRuntimeExports.jsx(Gt,{children:e.institutionDetails.institutionName})}),n.jsxRuntimeExports.jsxs(Yt,{children:[n.jsxRuntimeExports.jsx(Vt,{children:e.accountSubType?.name}),n.jsxRuntimeExports.jsx(Jt,{children:e.maskedAccountNumber}),n.jsxRuntimeExports.jsx(Ft,{children:$!=null?n.jsxRuntimeExports.jsx(t.ItemWithTag,{style:{width:"max-content",padding:0},tagTitle:$.name,textColor:t.getSetupStatusColor($.code)}):null}),T&&n.jsxRuntimeExports.jsx(t.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(Nt,{children:[n.jsxRuntimeExports.jsx(Mt,{className:"balanceLabel",children:t.amountToString("0,0.[00]",e.balances?.available)}),e.balances?.lastRefreshTime?n.jsxRuntimeExports.jsx(Ht,{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(Lt,{children:[n.jsxRuntimeExports.jsx(Dt,{children:ce.bankConnectionHeader.linkAccount}),n.jsxRuntimeExports.jsx(Wt,{children:Q?.accountName??At})]})]})},zt=i.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${t.Space.sp3};
+`,_t=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;
+`,Bt=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+`,Ot=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${t.Space.sp3};
+`,Lt=i.div`
+  display: flex;
+  align-items: center;
+`,Dt=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  margin-right: ${t.Space.sp2};
+`,Wt=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Ft=i(t.StandardRegular)`
+  display: flex;
+  align-items: center;
+  margin-left: ${t.Space.sp2};
+`,Nt=i.div`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+`,Mt=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Ht=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,qt=i.div``,Ut=i.div`
+  display: flex;
+  gap: ${t.Space.sp2};
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+`,Vt=i(t.SmallRegular)`
+  text-transform: capitalize;
+`,Jt=i(t.SmallRegular)`
+  margin-left: ${t.Space.sp1};
+`,Gt=i(t.StandardRegular)`
+  max-width: ${`calc(100% - ${t.Space.sp3})`};
+  text-transform: capitalize;
+  overflow: hidden;
+`,Yt=i.div`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${t.Space.sp2};
+`,{settings:{bankConnectionListHeader:me,title:Qt,infoText:Zt}}=t.appLocale.getLocalizedStrings().common,le={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])},Kt={qboLinkAcc:new t.ResponsiveSizedStyle("smallRegular","standardRegular")},Xt="bankConnectionsSettingsPage",te="bankAccountSection",ne="primaryAccountSection",en="bill_pay",tn="reimbursement",nn="zeni_accounts",on="charge_cards",an="zeni_treasury",we=e=>n.jsxRuntimeExports.jsx(rn,{children:N.map(p=>n.jsxRuntimeExports.jsx(dn,{actualDataValue:p.value,wrapperWidth:p.width,windowSize:e,children:n.jsxRuntimeExports.jsx(un,{children:p.value})},p.value))}),sn=({bankSetupView:e,connectedAccountProvider:p,onBackClick:M,onUpdateAccountClick:O,onFetchLinkTokenClick:A,onUpdatePaymentAccountStatus:P,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:Re(e),values:Re(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 I=F.find(l=>l.id===d.selectedOption)?.accType;d.selectedOption!=null&&I!=null&&S(d.selectedOption,y(_),I)}else if($==="bankAccountSection"&&T!=null&&T.primaryFundingAccount!=null&&d.selectedOption!=null){const h=T.primaryFundingAccount?.id,I=T.primaryFundingAccount?.accType;h!=null&&I!=null&&O(d.selectedOption,h,_,y(_),I)}}};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"?It:rt,w=()=>u?n.jsxRuntimeExports.jsx(xn,{children:n.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):b?n.jsxRuntimeExports.jsx(t.NoListDataPage,{message:"No bank connections added."}):n.jsxRuntimeExports.jsxs(cn,{windowSize:a,children:[n.jsxRuntimeExports.jsx(ke,{children:me.primary}),a!=="small"?we(a):null,n.jsxRuntimeExports.jsx(n.FormProvider,{...c,children:n.jsxRuntimeExports.jsx("form",{id:be(Xt),onSubmit:m,children:n.jsxRuntimeExports.jsx(hn,{windowSize:a,children:e.primaryConnection.map(x=>x!=null?n.jsxRuntimeExports.jsx(je,{windowSize:a,children:n.jsxRuntimeExports.jsx(Le,{allBankAccounts:e.allBankAccounts,setupView:x,connectedAccountProvider:p,onFetchLinkTokenClick:A,onUpdatePaymentAccountStatus:P,onUpdatePaymentAccountLoginStatus:L,onEstablishConnectionClick:R,onEstablishConnectionSuccess:s})},x.productType):null)})})}),e.otherPaymentAccounts.length>0?n.jsxRuntimeExports.jsxs(pn,{children:[n.jsxRuntimeExports.jsx(ke,{children:me.other}),n.jsxRuntimeExports.jsx(fn,{children:n.jsxRuntimeExports.jsx(t.Tooltip,{display:"flex",placement:"right",maxWidth:"340px",title:me.otherToolTip,style:{padding:`12px ${t.Space.sp3}`},children:n.jsxRuntimeExports.jsx(vn,{})})})]}):null,a!=="small"&&e.otherPaymentAccounts.length>0?we(a):null,e.otherPaymentAccounts.map(x=>{const g=F.find(f=>f.id===x.paymentAccountId)?.balanceFetchStatus;return n.jsxRuntimeExports.jsx(je,{windowSize:a,children:n.jsxRuntimeExports.jsx(H,{paymentAccount:x,bankAccountList:e.allBankAccounts,balanceFetchStatus:g,connectedAccountProvider:p,onRemoveConnection:W,onFetchLinkTokenClick:A,onEstablishConnectionClick:R,onUpdatePaymentAccountStatus:P,onEstablishConnectionSuccess:s})},x.paymentAccountId)})]});return n.jsxRuntimeExports.jsxs(ln,{children:[n.jsxRuntimeExports.jsx(t.NavBar,{source:"BankConnectionsSettingsPage",title:Qt.bankConnections,backgroundColor:D.colors.grey4,style:{zIndex:3},onBackClick:M,showBackButton:!1,showMenuIcon:a==="medium-compact"||a==="small",onClickMenuIcon:j}),n.jsxRuntimeExports.jsxs(mn,{windowSize:a,children:[n.jsxRuntimeExports.jsx(Sn,{windowSize:a,children:n.jsxRuntimeExports.jsx(gn,{windowSize:a,children:Zt.bankConnections})}),w()]})]})},cn=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-left: ${e=>le.pageContentPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>le.pageContentPadding.valuePx(e.windowSize)};
+`,ln=i.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  row-gap: ${t.Space.sp3};
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+`,rn=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;
+`,dn=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;
+`,un=i(t.SmallRegular)`
+  display: flex;
+  gap: 5px;
+`,pn=i.div`
+  display: flex;
+  align-items: center;
+`,je=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=>`${Kt.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};
+    }
+  }
+`,mn=i.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,xn=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};
+`,hn=i.div`
+  display: flex;
+  flex-direction: column;
+`,ke=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};
+`,Sn=i(t.ExtraSmallRegular)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${e=>le.subtitleSectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${e=>le.subTitleBottomMargin.valuePx(e.windowSize)};
+`,gn=i(t.StandardRegular)`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.theme.colors.hero};
+`,fn=i.div`
+  display: flex;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,vn=i(t.SvgInfo)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Re=e=>{const{primaryConnection:p,allBankAccounts:M,allFundingAccounts:O}=e,A=M.map(a=>({label:a.accountName,value:a.accountId})),P=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{[en]:{[te]:{selectedOption:L?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:L?.primaryFundingAccount?.id,allOptions:P}},[tn]:{[te]:{selectedOption:R?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:R?.primaryFundingAccount?.id,allOptions:P}},[nn]:{[te]:{selectedOption:s?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:s?.primaryFundingAccount?.id,allOptions:W}},[an]:{[te]:{selectedOption:S?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:S?.primaryFundingAccount?.id,allOptions:D}},[on]:{[te]:{selectedOption:j?.primaryFundingAccount?.zeniAccountId,allOptions:A},[ne]:{selectedOption:j?.primaryFundingAccount?.id,allOptions:P}}}},be=e=>`${e}_form`;exports.default=sn;exports.formUniqueName=be;