@zeniai/web-components 3.17.12 → 3.17.13

package/dist/ZeniAccountListViewPage-D0KheygJ.cjs

@@ -0,0 +1,441 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),R=require("react"),o=require("@emotion/styled"),e=require("./index-DoK40ULp.cjs"),$e=require("@zeniai/client-epic-state"),fe=require("./BusyIndication-Cy1fvnFr.cjs"),we=require("./auto-transfer-rule-DrzPoc-9.cjs"),Re=require("./clock-BobvTU_H.cjs"),Ce=require("./shield-j1CJ86AC.cjs"),ye=require("./ZeniAccountNavBarPieces-CIaSIWPw.cjs"),ke=require("./ZeniTransferAmountSlider-BJsbeUkK.cjs");function Ee(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const u in t)if(u!=="default"){const h=Object.getOwnPropertyDescriptor(t,u);Object.defineProperty(i,u,h.get?h:{enumerable:!0,get:()=>t[u]})}}return i.default=t,Object.freeze(i)}const C=Ee(R),Ae=t=>C.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},C.createElement("path",{d:"M23.0041 11.8483C23.0373 14.1699 22.335 16.4424 20.9979 18.3405C19.6607 20.2386 17.7572 21.665 15.5599 22.4153C13.3627 23.1656 10.9844 23.2014 8.76551 22.5175C6.54667 21.8337 4.60111 20.4653 3.20741 18.6083C1.81371 16.7513 1.04335 14.5009 1.00664 12.1794C0.969926 9.85784 1.66875 7.58422 3.00303 5.68407C4.33732 3.78392 6.23864 2.3547 8.43475 1.60106C10.6309 0.84741 13.0091 0.807991 15.229 1.48844",stroke:"#757D7E",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M7.17736 14.8498L12.3225 8.44116C12.431 8.30616 12.5835 8.21419 12.7532 8.1815C12.9228 8.14882 13.0985 8.17753 13.2493 8.26255L16.2512 9.95329C16.4047 10.0398 16.5839 10.0678 16.7561 10.0324C16.9283 9.99691 17.0819 9.90029 17.1889 9.76018L21.3745 4.27979",stroke:"#757D7E",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M18.4739 4.60986L21.3623 4.13001L21.845 7.03577",stroke:"#757D7E",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),{spendManagement:{treasury:{promoBanner:d,promoPage:Y}}}=e.appLocale.getLocalizedStrings(),be=({yieldPercentage:t=4.35,insuredAmount:i=5e5,onGetStartedClick:u,style:h})=>{const r=e.useWindowSizeContext(),y=(a,E)=>Object.entries(E).reduce((v,[f,g])=>v.replace(new RegExp(`__${f}__`,"g"),g),a),A=a=>`$${Intl.NumberFormat("en",{notation:"compact"}).format(a)}`,b=`${t}%`,j=A(i),k=[{icon:n.jsxRuntimeExports.jsx(De,{}),title:y(d.features.yield,{yieldPercentage:b}),id:"yield"},{icon:n.jsxRuntimeExports.jsx(_e,{}),title:y(d.features.insured,{insuredAmount:j}),id:"insured"},{icon:n.jsxRuntimeExports.jsx(Fe,{}),title:d.features.liquidity,showAsterisk:!0,id:"liquidity"},{icon:n.jsxRuntimeExports.jsx(Ne,{}),title:d.features.automation,id:"automation"}];return n.jsxRuntimeExports.jsxs(ve,{style:h,children:[n.jsxRuntimeExports.jsx(ze,{}),r!=="small"&&n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(Be,{}),n.jsxRuntimeExports.jsx(Te,{})]}),n.jsxRuntimeExports.jsx(Pe,{windowSize:r,children:r==="small"?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsxs(Le,{children:[n.jsxRuntimeExports.jsx(q,{windowSize:r,children:n.jsxRuntimeExports.jsx(Z,{windowSize:r})}),n.jsxRuntimeExports.jsx(H,{children:d.title})]}),n.jsxRuntimeExports.jsx(V,{windowSize:r,children:k.map(a=>n.jsxRuntimeExports.jsxs(J,{windowSize:r,children:[n.jsxRuntimeExports.jsx(Q,{children:a.icon}),n.jsxRuntimeExports.jsxs(X,{children:[a.title,a.showAsterisk===!0&&n.jsxRuntimeExports.jsx(K,{children:"*"})]})]},a.id))}),n.jsxRuntimeExports.jsx(Ie,{children:n.jsxRuntimeExports.jsx(ee,{children:n.jsxRuntimeExports.jsx(te,{variant:"primary",label:d.button,onClick:u,size:"small",style:{padding:`${e.Space.sp1} 12px`}})})}),n.jsxRuntimeExports.jsx(ne,{windowSize:r,children:n.jsxRuntimeExports.jsxs(oe,{windowSize:r,children:[d.disclaimer.split("__termsLink__")[0],n.jsxRuntimeExports.jsx(se,{href:Y.zeniTermsOfServiceLink,target:"_blank",rel:"noopener noreferrer",children:d.termsLink}),d.disclaimer.split("__termsLink__")[1]]})})]}):n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(q,{windowSize:r,children:n.jsxRuntimeExports.jsx(Z,{windowSize:r})}),n.jsxRuntimeExports.jsxs(Me,{windowSize:r,children:[n.jsxRuntimeExports.jsx(H,{children:d.title}),n.jsxRuntimeExports.jsx(V,{windowSize:r,children:k.map(a=>n.jsxRuntimeExports.jsxs(J,{windowSize:r,children:[n.jsxRuntimeExports.jsx(Q,{children:a.icon}),n.jsxRuntimeExports.jsxs(X,{children:[a.title,a.showAsterisk===!0&&n.jsxRuntimeExports.jsx(K,{children:"*"})]})]},a.id))}),n.jsxRuntimeExports.jsx(ne,{windowSize:r,children:n.jsxRuntimeExports.jsxs(oe,{windowSize:r,children:[d.disclaimer.split("__termsLink__")[0],n.jsxRuntimeExports.jsx(se,{href:Y.zeniTermsOfServiceLink,target:"_blank",rel:"noopener noreferrer",children:d.termsLink}),d.disclaimer.split("__termsLink__")[1]]})})]}),n.jsxRuntimeExports.jsx(ee,{children:n.jsxRuntimeExports.jsx(te,{variant:"primary",label:d.button,onClick:u,size:"small",style:{padding:`${e.Space.sp1} 12px`}})})]})})]})},ve=o.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: ${e.Colors.neutralGrey5Light};
+  border: 1px solid ${e.Colors.brandColorGold};
+  border-radius: ${e.Space.sp2};
+  overflow: hidden;
+  width: 100%;
+`,ze=o.div`
+  position: absolute;
+  top: ${e.Space.sp0};
+  left: ${e.Space.sp0};
+  right: ${e.Space.sp0};
+  bottom: ${e.Space.sp0};
+  background: ${e.Colors.brandColorGold};
+  opacity: 0.2;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: ${e.Space.sp0};
+    left: ${e.Space.sp0};
+    right: ${e.Space.sp0};
+    bottom: ${e.Space.sp0};
+    background: ${e.Colors.brandColorGoldDark};
+    opacity: 0.45;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent ${e.Space.sp2},
+      rgba(199, 116, 25, 0.1) ${e.Space.sp2},
+      rgba(199, 116, 25, 0.1) ${e.Space.sp3}
+    );
+  }
+`,Be=o.div`
+  position: absolute;
+  top: ${e.Space.sp0};
+  right: ${e.Space.sp0};
+  width: 200px;
+  height: 150px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-right-pattern.png");
+  background-repeat: no-repeat;
+  background-position: top right;
+  background-size: contain;
+`,Te=o.div`
+  position: absolute;
+  bottom: -${e.Space.sp1};
+  left: -${e.Space.sp1};
+  width: 150px;
+  height: 100px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-left-pattern.png");
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: contain;
+`,Pe=o.div`
+  position: relative;
+  display: flex;
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  align-items: ${t=>t.windowSize==="small"?"stretch":"center"};
+  gap: ${t=>t.windowSize==="small"?e.Space.sp2:"12px"};
+  padding: ${t=>t.windowSize==="small"?e.Space.sp3:`${e.Space.sp3} ${e.Space.sp4}`};
+  z-index: 1;
+`,q=o.div`
+  display: flex;
+  align-self: flex-start;
+  justify-content: center;
+  width: ${t=>t.windowSize==="small"?e.Space.sp6:e.Space.sp9};
+  height: ${t=>t.windowSize==="small"?e.Space.sp6:e.Space.sp9};
+  flex-shrink: 0;
+`,Le=o.div`
+  display: flex;
+  align-items: center;
+  gap: ${e.Space.sp2};
+`,Ie=o.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${e.Space.sp2};
+  margin-left: ${e.Space.sp7};
+`,Z=o(e.SvgTreasury)`
+  width: ${t=>t.windowSize==="small"?e.Space.sp6:e.Space.sp9};
+  height: ${t=>t.windowSize==="small"?e.Space.sp6:e.Space.sp9};
+  color: ${e.Colors.brandColorGoldDark};
+
+  & path {
+    stroke: ${e.Colors.brandColorGoldDark};
+    stroke-width: 1px;
+  }
+`,Me=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${e.Space.sp1};
+  flex: 1;
+`,H=o(e.ExtraLargeSemiBold)`
+  color: ${e.Colors.brandColorGoldDark};
+  margin-bottom: ${e.Space.sp1};
+`,V=o.div`
+  display: ${t=>t.windowSize==="small"?"flex":"grid"};
+  ${t=>t.windowSize==="small"?`
+      flex-direction: column;
+      gap: ${e.Space.sp2};
+      margin-left: ${e.Space.sp7};
+    `:`
+      grid-template-columns: 1fr 1fr;
+      gap: ${e.Space.sp1};
+    `}
+`,J=o.div`
+  display: flex;
+  align-items: ${t=>t.windowSize==="small"?"flex-start":"center"};
+  gap: ${e.Space.sp1};
+`,Q=o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  flex-shrink: 0;
+`,X=o(e.SmallRegular)`
+  color: ${e.Colors.primaryLight};
+`,K=o.span`
+  color: ${e.Colors.primaryLight};
+`,ee=o.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+`,te=o(e.Button)`
+  background: ${e.Colors.brandColorGoldDark};
+  border-color: ${e.Colors.brandColorGoldDark};
+  color: ${e.Colors.neutralGrey5Light};
+  :hover {
+    background: ${e.Colors.brandColorGoldDark};
+    border-color: ${e.Colors.brandColorGoldDark};
+    color: ${e.Colors.neutralGrey5Light};
+  }
+`,ne=o.div`
+  position: relative;
+  margin-top: ${t=>t.windowSize==="small"?e.Space.sp2:"0"};
+  padding: ${t=>t.windowSize==="small"?`0 ${e.Space.sp2}`:"0"};
+`,oe=o(e.ExtraSmallRegular)`
+  color: ${e.Colors.heroLight};
+  white-space: pre-line;
+  text-align: ${t=>t.windowSize==="small"?"center":"left"};
+`,se=o.a`
+  color: ${e.Colors.heroLight};
+  text-decoration: underline;
+  text-decoration-color: ${e.Colors.neutralGrey2Light};
+  cursor: pointer;
+
+  &:hover {
+    color: ${e.Colors.primaryLight};
+    text-decoration-color: ${e.Colors.primaryLight};
+  }
+`,De=o(Ae)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.brandColorGoldDark};
+
+  & path {
+    stroke: currentColor;
+  }
+`,_e=o(Ce.SvgShield)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.brandColorGoldDark};
+`,Fe=o(Re.SvgClock)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.brandColorGoldDark};
+`,Ne=o(we.SvgAutoTransferRule)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.brandColorGoldDark};
+`,Ue=t=>C.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},C.createElement("path",{d:"M1.50005 3.41819V11.3868C1.49582 13.9724 2.27853 16.4989 3.74542 18.6344C5.2123 20.77 7.29478 22.4147 9.71941 23.3528L10.8398 23.7848C11.5863 24.0717 12.4137 24.0717 13.1602 23.7848L14.2806 23.3528C16.7052 22.4147 18.7877 20.77 20.2546 18.6344C21.7215 16.4989 22.5042 13.9724 22.4999 11.3868V3.41819C22.5025 3.11029 22.4157 2.80819 22.2499 2.54802C22.0842 2.28785 21.8466 2.08063 21.5655 1.95114C18.5518 0.635546 15.2915 -0.0291648 12 0.000981362C8.70855 -0.0291648 5.44817 0.635546 2.43455 1.95114C2.15343 2.08063 1.91579 2.28785 1.75007 2.54802C1.58435 2.80819 1.49755 3.11029 1.50005 3.41819Z",fill:"#36B37E"}),C.createElement("path",{d:"M16.5194 8.42881L11.3671 13.3387C11.3022 13.4007 11.2254 13.4489 11.1414 13.4802C11.0573 13.5116 10.9677 13.5256 10.8781 13.5212C10.7897 13.517 10.703 13.4951 10.6232 13.4568C10.5434 13.4185 10.4721 13.3646 10.4135 13.2982L8.06814 10.6339",stroke:"#FAFAFA",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),m={bankAccListBottomMargin:new e.ResponsiveSized(e.sp[7],e.sp[6]),iconWidthHeight:new e.ResponsiveSized(e.sp[6],e.sp[4]),containerWidth:new e.ResponsiveSized(96,67),containerTopMargin:new e.ResponsiveSized(e.sp[4],e.sp[6]),BankAccListTopMargin:new e.ResponsiveSized(e.sp[4],e.sp[8]),containerSidePadding:new e.ResponsiveSized(e.sp[3],e.sp[0]),accountRowLeftRightPadding:new e.ResponsiveSized(e.sp[3],e.sp[4]),accountRowTopBottomPadding:new e.ResponsiveSized(e.sp[3],e.sp[4]),accountRowBottomMargin:new e.ResponsiveSized(e.sp[3],e.sp[5]),totalInsuredAndYieldContainerTopMargin:new e.ResponsiveSized(e.sp[3],e.sp[0]),paymentAccountIconSize:new e.ResponsiveSized(e.sp[6],e.sp[7])},Ge={bankAccountName:new e.ResponsiveSizedStyle("standardRegular","largeMedium")},l=e.appLocale.getLocalizedStrings(),D=t=>n.jsxRuntimeExports.jsx(tt,{children:t}),We=({fetchState:t,onReloadTransactions:i})=>t==="Error"?n.jsxRuntimeExports.jsxs($t,{children:[n.jsxRuntimeExports.jsx(ft,{onClick:i,"data-testid":e.generateDataTestId("zeni-account-list-reload"),children:n.jsxRuntimeExports.jsx(wt,{})}),n.jsxRuntimeExports.jsx(Rt,{children:l.peoplePage.reloadPage.label})]}):n.jsxRuntimeExports.jsx(fe.BusyIndication,{fetchState:t,styles:{margin:"auto"}}),Oe=({zeniAccountListView:t,zeniAccountsConfigDetail:i,maxInsuredAmountString:u,analytics:h,onZeniAccountRowClick:r,onReloadTransactions:y,handleAddInternalAccountClick:A,onAddFundClick:b,onTreasuryGetStartedClick:j,treasuryYieldPercentage:k,treasuryInsuredAmount:a,showTreasuryPromo:E})=>{const{depositAccountsSelectorView:v,fetchState:f,summary:g}=t,p=e.useWindowSizeContext(),z=e.useGlobalInfoContext(),S=z.loggedInUserRoleMap.deposit_accounts_user===!0||$e.hasAnyFinOpRole(z.loggedInUserRoleMap),B=s=>{h.trackAccountsListPageClicked("Add Funds",s.accountName,"active"),b("transfer",s)},P=s=>{switch(s){case"totalBalance":return"320px";case"insuredBalance":return"320px";case"totalInterest":return"290px";default:return"320px"}},w=s=>{let $=n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{});switch(s){case"insuredBalance":$=n.jsxRuntimeExports.jsx(F,{style:{width:"300px"},children:l.spendManagement.zeniAccounts.zeniAccountList.insuranceTooltip.replace("__amount__",u)});break;case"totalInterest":$=n.jsxRuntimeExports.jsx(F,{children:l.spendManagement.zeniAccounts.zeniAccountList.yieldTooltip});break;case"totalBalance":$=n.jsxRuntimeExports.jsxs(F,{style:{paddingTop:"12px",paddingBottom:"12px"},children:[n.jsxRuntimeExports.jsx(At,{children:l.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.base}),n.jsxRuntimeExports.jsxs(N,{children:[n.jsxRuntimeExports.jsx(U,{children:l.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.balance}),n.jsxRuntimeExports.jsx(G,{children:e.amountToString("0,0[.]00",g?.totalBalance.current)})]}),n.jsxRuntimeExports.jsxs(N,{children:[n.jsxRuntimeExports.jsx(U,{children:l.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.processing}),n.jsxRuntimeExports.jsx(G,{children:e.amountToString("0,0[.]00",g?.totalBalance.hold)})]}),n.jsxRuntimeExports.jsxs(N,{children:[n.jsxRuntimeExports.jsx(U,{children:l.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.available}),n.jsxRuntimeExports.jsx(G,{children:e.amountToString("0,0[.]00",g?.totalBalance.available)})]})]});break}return n.jsxRuntimeExports.jsx(yt,{children:n.jsxRuntimeExports.jsx(e.Tooltip,{style:{textAlign:"left",padding:e.Space.sp1},maxWidth:P(s),display:"flex",placement:p==="small"?"bottom":"top",title:$,children:s==="insuredBalance"?n.jsxRuntimeExports.jsx(Et,{}):n.jsxRuntimeExports.jsx(kt,{})})})},L=s=>n.jsxRuntimeExports.jsx(Ke,{color:e.getAccountsColorMappingFromIndex(s)});return e.useSentryPerformanceTracking({componentName:"checking.list",enabled:f==="Completed"}),n.jsxRuntimeExports.jsx(Ye,{children:f==="Completed"?n.jsxRuntimeExports.jsxs(Ct,{windowSize:p,children:[n.jsxRuntimeExports.jsxs(Ve,{windowSize:p,children:[n.jsxRuntimeExports.jsxs(et,{windowSize:p,children:[n.jsxRuntimeExports.jsxs(_,{children:[D(l.spendManagement.zeniAccounts.zeniAccountList.totalAvailableBalance),w("totalBalance")]}),n.jsxRuntimeExports.jsx(e.AmountBalance,{amount:g?.totalBalance.available})]}),n.jsxRuntimeExports.jsxs(qe,{windowSize:p,children:[n.jsxRuntimeExports.jsxs(rt,{children:[n.jsxRuntimeExports.jsxs(_,{children:[D(l.spendManagement.zeniAccounts.zeniAccountList.insuredFund),w("insuredBalance")]}),n.jsxRuntimeExports.jsx(e.AmountBalance,{amount:g?.insuredBalance.available,integerStyles:e.textStyles.largeMedium.cssObject,decimalStyles:e.textStyles.smallMedium.cssObject}),n.jsxRuntimeExports.jsx(st,{children:l.spendManagement.zeniAccounts.zeniAccountList.insuranceInfo.replace("__amount__",u)})]}),n.jsxRuntimeExports.jsxs(at,{children:[n.jsxRuntimeExports.jsxs(_,{children:[D(l.spendManagement.zeniAccounts.common.totalYieldEarned),w("totalInterest")]}),n.jsxRuntimeExports.jsx(e.AmountBalance,{amount:g?.totalInterest.available,integerStyles:e.textStyles.largeMedium.cssObject,decimalStyles:e.textStyles.smallMedium.cssObject}),n.jsxRuntimeExports.jsxs(nt,{children:[l.spendManagement.zeniAccounts.zeniAccountList.currentAverageYield,n.jsxRuntimeExports.jsx(ot,{children:i.zeniAccountsConfigDetail.annualPercentageYield})]})]})]})]}),E===!0&&n.jsxRuntimeExports.jsx(bt,{windowSize:p,children:n.jsxRuntimeExports.jsx(be,{yieldPercentage:k,insuredAmount:a,onGetStartedClick:()=>{h.trackAccountsListPageClicked("Move Money"),j?.()}})}),n.jsxRuntimeExports.jsxs(Xe,{windowSize:p,children:[v.depositAccounts.map((s,$)=>n.jsxRuntimeExports.jsxs(ct,{isClickEnabled:!0,windowSize:p,onClick:()=>r?.(s.id,s.accountName),"data-testid":e.generateDataTestId("deposit-account-clicked",s.id),children:[n.jsxRuntimeExports.jsxs(it,{children:[L($),n.jsxRuntimeExports.jsxs(lt,{children:[n.jsxRuntimeExports.jsx(pt,{windowSize:p,children:s.accountName}),n.jsxRuntimeExports.jsxs(dt,{windowSize:p,children:[n.jsxRuntimeExports.jsx(Je,{children:n.jsxRuntimeExports.jsx(ut,{children:s.maskedAccountNumber})}),n.jsxRuntimeExports.jsxs(Qe,{children:[p==="small"?null:n.jsxRuntimeExports.jsx(xt,{}),n.jsxRuntimeExports.jsx(mt,{windowSize:p,children:l.spendManagement.zeniAccounts.zeniAccountList.active})]})]})]})]}),n.jsxRuntimeExports.jsxs(gt,{children:[n.jsxRuntimeExports.jsx(e.AmountBalance,{amount:s.accountBalance.available,integerStyles:e.textStyles.largeMedium.cssObject,decimalStyles:e.textStyles.smallMedium.cssObject}),S?null:n.jsxRuntimeExports.jsx(Ze,{onClick:T=>{T.stopPropagation(),B(s)},"data-testid":e.generateDataTestId("add-fund",s.id),children:n.jsxRuntimeExports.jsx(He,{children:l.spendManagement.zeniAccounts.zeniAccountList.addFundBtnText})})]})]},s.id)),n.jsxRuntimeExports.jsxs(ht,{onClick:A,"data-testid":e.generateDataTestId("add-new-internal-zeni-account"),children:[n.jsxRuntimeExports.jsx(jt,{}),n.jsxRuntimeExports.jsx(St,{children:l.spendManagement.zeniAccounts.zeniAccountList.addAccountText})]})]})]}):n.jsxRuntimeExports.jsx(We,{fetchState:f,onReloadTransactions:y})})},Ye=o.div`
+  display: block;
+  height: 100%;
+`,qe=o.div`
+  display: flex;
+  justify-content: space-between;
+  gap: ${e.Space.sp5};
+  margin: ${t=>`${m.totalInsuredAndYieldContainerTopMargin.valuePx(t.windowSize)} ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp0}`};
+`,Ze=o.button`
+  cursor: pointer;
+  border-radius: ${e.Space.sp1};
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey2};
+  padding: 1px 6px;
+  :hover {
+    border: 1px solid ${t=>t.theme.colors.hero};
+  }
+`,He=o(e.ExtraSmallMedium)`
+  color: ${t=>t.theme.colors.hero};
+`,Ve=o.div`
+  margin: ${t=>m.containerTopMargin.valuePx(t.windowSize)}
+    ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp0};
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  padding: ${t=>`${e.Space.sp0} ${m.containerSidePadding.valuePx(t.windowSize)} ${e.Space.sp0} ${m.containerSidePadding.valuePx(t.windowSize)}`};
+`,Je=o.div`
+  display: flex;
+`,Qe=o.div`
+  display: flex;
+  align-items: center;
+`,Xe=o.div`
+  margin: ${t=>`${m.BankAccListTopMargin.valuePx(t.windowSize)} ${e.Space.sp0} 
+    ${m.bankAccListBottomMargin.valuePx(t.windowSize)} ${e.Space.sp0}`};
+  width: 100%;
+  padding: ${t=>`${e.Space.sp0}  ${m.containerSidePadding.valuePx(t.windowSize)}`};
+`,Ke=o(e.SvgZeniBrandCheckingAcc)`
+  min-width: ${e.Space.sp7};
+  width: ${e.Space.sp7};
+  height: ${e.Space.sp7};
+  margin-right: 12px;
+`,et=o.div`
+  ${t=>t.windowSize!=="small"?`
+        width: 50%;
+`:null}
+`,_=o.div`
+  display: flex;
+`,tt=o(e.SmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin-right: ${e.Space.sp1};
+`,nt=o(e.ExtraSmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+`,ot=o.span`
+  margin-left: 2px;
+`,st=o(e.ExtraSmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+`,it=o.div`
+  display: flex;
+  align-items: center;
+  width: calc(100% - 96px);
+`,rt=o.div``,at=o.div``,ct=o.div`
+  padding-left: ${t=>m.accountRowTopBottomPadding.valuePx(t.windowSize)};
+  padding-right: ${t=>m.accountRowTopBottomPadding.valuePx(t.windowSize)};
+  padding-top: ${t=>m.accountRowTopBottomPadding.valuePx(t.windowSize)};
+  padding-bottom: ${t=>m.accountRowTopBottomPadding.valuePx(t.windowSize)};
+  background: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal} `};
+  border-radius: ${e.Space.sp2};
+  margin-bottom: ${t=>m.accountRowBottomMargin.valuePx(t.windowSize)};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: ${t=>t.isClickEnabled?"pointer":"default"};
+  &:hover {
+    border-color: ${t=>t.theme.colors.primary};
+    color: ${t=>t.isClickEnabled?t.theme.colors.champion:t.theme.colors.hero};
+  }
+`,lt=o.div`
+  max-width: calc(100% - 30px);
+  width: calc(100% - 40px);
+  white-space: nowrap;
+  overflow: hidden;
+`,pt=o(e.StyledText)`
+  ${t=>`${Ge.bankAccountName.style(t.windowSize)}`};
+  color: ${t=>t.theme.colors.primary};
+  max-width: ${`calc(100% - ${e.Space.sp3})`};
+  text-transform: capitalize;
+  overflow: hidden;
+`,dt=o.div`
+  display: flex;
+  color: ${t=>t.theme.colors.hero};
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  align-items: ${t=>t.windowSize==="small"?"start":"center"};
+`,ut=o(e.SmallRegular)`
+  margin-left: ${e.Space.sp1};
+`,xt=o.div`
+  width: ${e.Space.sp1};
+  height: ${e.Space.sp1};
+  border-radius: 50%;
+  background-color: ${t=>t.theme.colors.grey1};
+  margin-left: ${e.Space.sp2};
+  margin-right: ${e.Space.sp2};
+`,mt=o(e.SmallRegular)`
+  color: ${e.Colors.success};
+  border-radius: 50px;
+`,gt=o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`,ht=o.div`
+  padding: ${e.Space.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${t=>t.theme.colors.hero};
+  border-radius: ${e.Space.sp2};
+  color: ${t=>t.theme.colors.hero};
+  cursor: pointer;
+  margin-top: ${e.Space.sp4};
+  pointer-events: ${t=>t.isLoading===!0?"none":"auto"};
+  &:hover {
+    svg {
+      color: ${t=>t.theme.colors.primary};
+    }
+    color: ${t=>t.theme.colors.primary};
+    border: 1px solid ${t=>t.theme.colors.primary};
+  }
+`,jt=o(e.SvgAddRound)`
+  margin-right: ${e.Space.sp2};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${t=>t.theme.colors.hero};
+`,St=o(e.StandardMedium)``,$t=o.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,ft=o.div`
+  height: ${e.Space.sp12};
+  width: ${e.Space.sp12};
+  background: ${t=>t.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${e.Space.sp5};
+    color: ${t=>t.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+`,wt=o(e.SvgReload)`
+  height: ${e.Space.sp5};
+  width: ${e.Space.sp5};
+  color: ${t=>t.theme.colors.grey1};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,Rt=o(e.SmallRegularSp)`
+  margin-top: ${e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+`,Ct=o.div`
+  max-width: 726px;
+  width: ${t=>m.containerWidth.valuePercentage(t.windowSize)};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+`,yt=o.div`
+  display: flex;
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+    svg {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+`,kt=o(e.SvgInfo)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,Et=o(Ue)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+`,F=o(e.SmallRegular)`
+  padding: ${e.Space.sp2} ${e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  border-radius: ${e.Space.sp1};
+`,N=o(e.SmallRegular)`
+  color: ${t=>t.theme.colors.brandColorPearl};
+  margin-top: ${e.Space.sp2};
+  display: flex;
+  justify-content: space-between;
+`,At=o(e.SmallRegular)`
+  margin-bottom: ${e.Space.sp2};
+  display: flex;
+`,U=o.div`
+  color: ${t=>t.theme.colors.hero};
+`,G=o.div`
+  color: ${e.Colors.primaryDark};
+`,bt=o.div`
+  margin-top: ${e.Space.sp4};
+`,{common:vt,spendManagement:{zeniAccounts:c}}=e.appLocale.getLocalizedStrings(),ie="checkingAccountCreation-form",zt=({zeniAccountListView:t,analytics:i,maxInsuredAmount:u,isBillPayEnabled:h,isExpressPayEnabled:r,onBackClick:y,onZeniAccountClick:A,onSettingsClick:b,handleMoveMoneyOptionSelection:j,onReloadTransactions:k,onCreateCheckingClick:a,onClickMenuIcon:E,onTreasuryGetStartedClick:v,showTreasuryPromo:f,treasuryYieldPercentage:g,treasuryInsuredAmount:p})=>{const z=e.useWindowSizeContext(),S=n.useForm({mode:"all"}),B=t.newCheckingAccount.fetchState,P=e.usePrevious(B);R.useEffect(()=>{P==="In-Progress"&&B==="Completed"&&(s(!1),T(!0),S.reset())},[P,B,S]);const w=n.useTheme(),[L,s]=R.useState(!1),[$,T]=R.useState(!1),[re,I]=R.useState(!1),[ae,ce]=R.useState(0),[le,pe]=R.useState(0),de=(x,M)=>{A(x,M)},ue={pageName:"listPage",onOptionSelection:x=>{x==="payBill"?(i.trackAccountsListPageClicked("Pay Someone"),I(!0)):(x==="sendMoney"?i.trackSendMoneyClick():x==="checkDeposit"?i.trackAccountsListPageClicked("Deposit a Check"):x==="transfer"&&i.trackAccountsListPageClicked("Transfer Between Accounts"),j(x))}},xe={onOkClick:()=>{},onCancelClick:()=>{i.trackAccountsListPageClicked("Add Business Account Cancel"),S.reset(),s(!1)}},me={onOkClick:()=>{const x=t.depositAccountsSelectorView.depositAccounts.find(M=>M.id===t.newCheckingAccount.accountId);i.trackAccountsListPageClicked("Add Business Account Add Funds"),j("transfer",x),T(!1)},onCancelClick:()=>{i.trackAccountsListPageClicked("Add Business Account Not Now"),T(!1)}},ge={onOkClick:()=>{i.trackAccountsListPageClicked("Proceed on Bills pop up"),j("payBill"),I(!1)},onCancelClick:()=>{i.trackAccountsListPageClicked("Not Now on Bills pop up"),I(!1)}},he=S.handleSubmit(x=>{i.trackAccountsListPageClicked("Add Business Account Create"),a?.(x.checkingAccountNickName)}),W=t.zeniAccountsConfig.zeniAccountsConfigDetail.depositProductConfig.depositProducts,je=W[W.length-1].annualPercentageYield.toString(),O=e.amountValueToString(e.getAmountFormatString(u),u,vt.currency.currencySymbol).toUpperCase(),Se=n.jsxRuntimeExports.jsx(ye.ZeniAccountNavBarPieces,{onSettingsClick:b,isBillPayEnabled:h,isExpressPayEnabled:r,zeniBankProps:ue,analytics:i});return n.jsxRuntimeExports.jsxs(Bt,{children:[L?n.jsxRuntimeExports.jsx(e.ConfirmationPopup,{titleComponent:n.jsxRuntimeExports.jsx(e.ConfirmationPopUpTitle,{children:c.zeniAccountList.createPopUpInfo.title}),descriptionComponent:n.jsxRuntimeExports.jsx(e.ConfirmationPopUpDescription,{children:c.zeniAccountList.createPopUpInfo.description}),primaryButtonText:c.zeniAccountList.createPopUpInfo.primaryButtonText,isLoading:t.newCheckingAccount.fetchState==="In-Progress",formId:ie,secondaryButtonText:c.zeniAccountList.createPopUpInfo.secondaryButtonText,style:{background:e.Colors.overlayLight},action:xe,children:n.jsxRuntimeExports.jsx(n.FormProvider,{...S,children:n.jsxRuntimeExports.jsx("form",{id:ie,onSubmit:he,style:{height:e.Space.sp8,width:"80%",marginBottom:e.Space.sp5},children:n.jsxRuntimeExports.jsx(e.TextField,{type:"text",name:"checkingAccountNickName",placeholder:c.zeniAccountList.createPopUpInfo.placeholder,style:{display:"flex",flexGrow:1,cursor:"inherit",height:e.Space.sp7,textAlign:"left",width:"100%",background:n.has(S.formState.errors,"checkingAccountNickName")===!0?e.Colors.importantLight:w.colors.grey5,border:`1px solid ${w.colors.grey2}`},registerOptions:{required:!0,validate:x=>!!x}})})})}):null,$?n.jsxRuntimeExports.jsx(e.ConfirmationPopup,{titleComponent:n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{}),descriptionComponent:n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{}),primaryButtonText:c.zeniAccountList.addFundsPopUpInfo.primaryButtonText,secondaryButtonText:c.zeniAccountList.addFundsPopUpInfo.secondaryButtonText,action:me,primaryButtonWidth:130,secondaryButtonWidth:130,containerStyle:{minWidth:352,maxWidth:544,width:"90%"},children:n.jsxRuntimeExports.jsxs(Pt,{children:[n.jsxRuntimeExports.jsx(e.MoneyTransferSuccessAnimation,{width:150,height:150,shouldDisplay:!0,animationInLoop:1,styles:{marginBottom:-e.Space.sp4}}),n.jsxRuntimeExports.jsx(Lt,{children:c.zeniAccountList.addFundsPopUpInfo.title}),n.jsxRuntimeExports.jsx(It,{children:c.zeniAccountList.addFundsPopUpInfo.description.replace("__rate__",je).replace("__amount__",O)}),n.jsxRuntimeExports.jsx(ke.ZeniTransferAmountSlider,{transferAmount:5e5,currentAccountBalance:0,zeniAccountsConfigDetail:t.zeniAccountsConfig,minStep:.1,setTotalBalance:pe,setYieldEarned:ce}),n.jsxRuntimeExports.jsxs(Mt,{children:[n.jsxRuntimeExports.jsxs(_t,{children:[c.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarned,n.jsxRuntimeExports.jsx(Dt,{children:e.amountToString("0,0",{amount:ae,currencySymbol:"$"})}),n.jsxRuntimeExports.jsx(e.Tooltip,{variant:"small-description",maxWidth:"280px",data:c.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarnedTooltipText,display:"flex",placement:"left",children:n.jsxRuntimeExports.jsx(Nt,{})})]}),n.jsxRuntimeExports.jsxs(Ft,{children:[c.zeniAccountList.transferDrawer.calculator.footerText.for,Intl.NumberFormat("en",{currency:"USD",notation:"compact",style:"currency",minimumFractionDigits:0}).format(le)]})]})]})}):null,re?n.jsxRuntimeExports.jsx(e.ConfirmationPopup,{titleComponent:n.jsxRuntimeExports.jsx(e.ConfirmationPopUpTitle,{children:c.zeniAccountList.billPayupPopUpInfo.title}),descriptionComponent:n.jsxRuntimeExports.jsx(e.ConfirmationPopUpDescription,{children:c.zeniAccountList.billPayupPopUpInfo.description}),primaryButtonText:c.zeniAccountList.billPayupPopUpInfo.primaryButtonText,secondaryButtonText:c.zeniAccountList.billPayupPopUpInfo.secondaryButtonText,action:ge,primaryButtonWidth:130,secondaryButtonWidth:130}):null,n.jsxRuntimeExports.jsx(e.NavBar,{title:c.zeniAccountList.tabsById.zeniAccounts,onBackClick:y,showMenuIcon:z==="medium-compact"||z==="small",backgroundColor:w.colors.grey4,style:{zIndex:3,...e.textStyles.largeSemiBold.cssObject},rightSideComponent:Se,onClickMenuIcon:E,hideSearchBtn:!0,source:"ZeniAccountListViewPage"}),n.jsxRuntimeExports.jsx(Tt,{isLoading:t.fetchState==="In-Progress",children:n.jsxRuntimeExports.jsx(Oe,{zeniAccountsConfigDetail:t.zeniAccountsConfig,zeniAccountListView:t,onZeniAccountRowClick:de,onAddFundClick:j,handleAddInternalAccountClick:()=>{i.trackAccountsListPageClicked("Add Business Account"),s(!0)},analytics:i,onReloadTransactions:k,maxInsuredAmountString:O,onTreasuryGetStartedClick:v,treasuryYieldPercentage:g,treasuryInsuredAmount:p,showTreasuryPromo:f})})]})},Bt=o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`,Tt=o.div`
+  display: ${t=>t.isLoading?"flex":"block"};
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  min-height: ${t=>t.isLoading?`calc(100vh - ${e.Space.sp10})`:"100vh"};
+  height: ${t=>t.isLoading?`calc(100vh - ${e.Space.sp10})`:"100%"};
+`,Pt=o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: ${e.Space.sp4};
+`,Lt=o(e.H6Regular)`
+  padding-left: ${e.Space.sp8};
+  padding-right: ${e.Space.sp8};
+  color: ${t=>t.theme.colors.primary};
+  word-break: break-word;
+`,It=o(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  padding-left: ${e.Space.sp6};
+  padding-right: ${e.Space.sp6};
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp3};
+  white-space: pre-line;
+`,Mt=o.div`
+  min-height: ${e.Space.sp10};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,Dt=o.span`
+  font-weight: ${e.FontWeight.medium};
+  margin-left: ${e.Space.sp1};
+`,_t=o(e.LargeRegular)`
+  color: ${e.Colors.success};
+  display: flex;
+  align-items: center;
+`,Ft=o(e.SmallRegular)`
+  color: ${t=>t.theme.colors.grey1};
+  display: block;
+`,Nt=o(e.SvgInfo)`
+  width: ${e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  height: ${e.Space.sp3};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`;exports.default=zt;