@zeniai/web-cockpit-ui 1.14.99-qa → 1.15.0-dev

package/dist/assets/ChargeCardPaymentHistoryPage-DnxJwv-T-SsEma55z.js

@@ -0,0 +1,553 @@
+import{a8 as be,aw as Se,q as O,d as W,V as t,bA as Ce,b as K,g2 as Pe,F as L,c,o as i,y as u,jh as ke,cb as Le,ji as F,aN as D,b2 as ze,cr as Re,iO as Ie,bM as De,aR as ne,al as M,dr as f,gU as V,aL as H,bR as Ae,ct as Te,bP as Be,am as B,cw as Y,p as C,gV as oe,fM as se,fI as ae,cg as Oe,ai as re,iD as de,bK as Me,bI as Ne,iW as He,cz as We,aT as k,iX as Ee,iY as Ke}from"./index-Bs2B-MQ4.js";import{a as j,S as _}from"./sentry-gm2R3TtK.js";import{n,c as q}from"./mui-snKYaegN.js";import{t as Ve}from"./SpendManagementSection-mtTZeiX8-DB_R_dFU.js";import{r as _e,a as Ue,i as le,g as Fe}from"./SpendManagementListViewPage-C3gJ8vag-CRVtgLhw.js";import{ck as ce,G5 as he}from"./zeni-epic-state-D2RxwWrl.js";import{r as Ye}from"./auto-transfer-rule-mbafm5D3-DPk-N0wE.js";import"./liveblocks-48Yy2aTy.js";import"./core-9PMMelIA.js";import"./recharts-DGmpNqLb.js";import"./lottie-ChwWMuYN.js";import"./analytics-D0z7Cz17.js";import"./lexical-CaQwXIc3.js";import"./utils-C7Aiy3iw.js";import"./StatusSwitcher-DRDFuzoj-DFWyQSIu.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},o=new e.Error().stack;o&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[o]="b96ecd94-13c4-4a9f-8c4e-84501cf74ae2",e._sentryDebugIdIdentifier="sentry-dbid-b96ecd94-13c4-4a9f-8c4e-84501cf74ae2")}catch{}})();const N=L.getLocalizedStrings().spendManagement.chargeCard.paymentHistory.header,qe={key:"paymentDate",value:N.paymentDate,sortOrder:"ascending",width:new u(18,18,18,18,18)},Xe={key:"sourceAccount",value:N.sourceAccount,sortOrder:"ascending",width:new u(30,30,30,30,30)},Ge={key:"paymentStatus",value:N.paymentStatus,sortOrder:"ascending",width:new u(22,22,22,22,22)},Je={key:"initiatedBy",value:N.initiatedBy,sortOrder:"ascending",width:new u(18,18,18,18,18)},Qe={key:"amount",value:N.amount,sortOrder:"ascending",width:new u(12,12,12,12,12)},pe=()=>[qe,Xe,Ge,Je,Qe],P={containerPaddingLeft:i.sp2,containerPaddingRight:i.sp3,containerPaddingTop:i.sp3,containerPaddingBottom:i.sp3,headerLastColumnTopPadding:new u(c[0],c[4]),headerLastColumnRightPadding:new u(c[3],c[11]),headerLastColumnBottomPadding:new u(c[0],c[4]),headerLastColumnLeftPadding:new u(c[0],c[11]),headerHeight:new u(Ee,Ke)};function Ze({companyNameSticky:e,sortConfig:o,onColumnSortConfigChanged:h}){const s=W(),a=O(),[l,x]=j.useState(pe());j.useEffect(()=>{const r=[...l];for(const g of r)g.key===o.sortKey?g.sortOrder=o.sortOrder:g.sortOrder="ascending";x(r)},[o.sortKey,o.sortOrder]);const p=(r,g)=>{let y=g;o.sortKey===r&&(y=g==="ascending"?"descending":"ascending"),h(r,y)},d=l.find(r=>r.key===o.sortKey)??l[0],m=r=>l.find(g=>g.key===r)?.value??"",b=l.map(r=>r.key),$=L.getLocalizedStrings().spendManagement.chargeCard.paymentHistory;return a==="small"?t.jsxs(nt,{windowSize:a,children:[t.jsxs(at,{children:[t.jsx(dt,{children:t.jsx(rt,{})}),t.jsx(Be,{title:$.header.paymentDate,placeholder:$.header.paymentDate,pickerValues:b,valueToLabel:m,selectedValue:o.sortKey,onPickerSelectionChanged:r=>{p(r,"ascending")},optionTextStyle:K.extraSmallRegular,titleTextStyle:K.extraSmallRegular,titleColor:s.colors.primary,selectedOptionColor:s.colors.hero,optionBackgroundColor:s.colors.grey5,downChevronVisible:!1,backgroundColor:s.colors.grey4})]}),t.jsxs(ht,{onClick:()=>p(d.key,d.sortOrder),"data-testid":D("mobile-payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(B,{children:d.value}),t.jsx(X,{windowSize:a,sortDataValue:o.sortKey,headerdata:d,children:t.jsx(G,{windowSize:a,children:t.jsx(Y,{})})})]})]}):t.jsx(tt,{windowSize:a,children:t.jsx(it,{children:l.map(r=>r.width.value(a)!==0&&t.jsxs(ot,{companyNameSticky:e,sortDataValue:o.sortKey,actualDataValue:r.key,wrapperWidth:r.width,windowSize:a,children:[t.jsxs(ct,{onClick:()=>p(r.key,r.sortOrder),"data-testid":D("payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(B,{children:r.value}),t.jsx(X,{windowSize:a,sortDataValue:o.sortKey,headerdata:r,children:t.jsx(G,{windowSize:a,children:t.jsx(Y,{})})})]}),t.jsx(lt,{sortDataValue:o.sortKey,windowSize:a,isVisible:o.sortKey===r.key&&!(o.sortKey==="paymentDate"&&o.sortOrder==="ascending"),children:t.jsx(st,{onClick:()=>p("paymentDate","ascending"),"data-testid":D("payment-history-list-sort-cancel",o.sortKey)})})]},r.key))})})}const et=_.memo(Ze),tt=n.div`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  z-index: 2;
+  background-color: ${e=>e.theme.colors.grey4};
+  position: sticky;
+  width: 100%;
+`,it=n.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${P.containerPaddingTop} ${P.containerPaddingRight}
+    ${P.containerPaddingBottom} ${P.containerPaddingLeft};
+  justify-content: space-between;
+`,nt=n(re)`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  min-height: ${e=>P.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>P.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${P.headerLastColumnTopPadding.valuePx(e.windowSize)} ${P.headerLastColumnRightPadding.valuePx(e.windowSize)} ${P.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${P.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+  width: 100%;
+`,ot=n.div`
+  color: ${e=>e.sortDataValue===e.actualDataValue?e.theme.colors.primary:e.theme.colors.grey1};
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  left: ${i.sp0};
+  justify-content: ${e=>e.actualDataValue==="amount"?"flex-end":"flex-start"};
+  ${e=>e.companyNameSticky?q`
+          position: sticky;
+          z-index: 1;
+        `:q`
+          position: static;
+          z-index: 0;
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-left: ${i.sp3};
+  padding-right: ${e=>e.actualDataValue==="amount"?i.sp2:i.sp3};
+`,st=n(We)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,X=n.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerdata.key&&e.headerdata.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+`,G=n.div`
+  width: ${i.sp2};
+  height: ${i.sp2};
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,at=n.div`
+  gap: ${i.sp1};
+  display: flex;
+  color: ${e=>e.theme.colors.hero};
+`,rt=n(He)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  color: inherit;
+`,dt=n.div`
+  margin-right: ${i.sp1};
+  display: flex;
+  align-items: center;
+`,lt=n.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,ct=n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,ht=n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${e=>e.theme.colors.primary};
+`,I={containerPaddingLeft:new u(c[3],c[2]),containerPaddingRight:new u(c[2],c[3]),containerPaddingTop:new u(c[2],c[3]),containerPaddingBottom:new u(c[2],c[3]),containerMarginLeft:new u(c[4],c[0]),containerMarginRight:new u(c[4],c[0])},{spendManagement:{chargeCard:{paymentHistory:E}}}=L.getLocalizedStrings(),pt=e=>e.base64!==void 0?`${se}${e.base64.toString()}`:e.url!==void 0?e.url.toString():"",mt=({repayment:e,accountInfo:o,isLatestFailedPayment:h=!1,isLoading:s=!1,onRetryPaymentClick:a})=>{const{accountLogo:l,accountType:x,depositAccountLast4:p,depositAccountName:d}=o??{},m=O(),b=j.useCallback(z=>{z.stopPropagation(),a&&a(e.cardRepaymentId)},[a,e.cardRepaymentId]),$=L.getLocalizedStrings(),r=e.repaymentDate.format($.dateFormat.visual.MMMDCommaYYYYformat),g=Fe(d,p,E.sourceAccountUnknown),y=le(e),v=y?E.autopay:ce(e.paidByUser),w=e.status==="Rejected"||e.status==="Returned",S=pe();return t.jsx(xt,{windowSize:m,children:t.jsx(wt,{children:t.jsxs(ft,{children:[t.jsx($t,{windowSize:m,responsiveWidth:S[0].width,children:t.jsx(f,{isLoading:s,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(vt,{className:"paymentDate",children:r})})}),t.jsxs(jt,{windowSize:m,responsiveWidth:S[1].width,children:[t.jsx(f,{isLoading:s,customStyle:{width:i.sp4,height:i.sp4,borderRadius:"50%"},children:t.jsx(bt,{children:x==="depositAccount"&&d!=null&&d!==""?t.jsx(St,{children:t.jsx(Ct,{color:V(0)})}):x==="paymentAccount"&&l!==void 0&&(l.base64||l.url)?t.jsx(Lt,{src:pt(l),loading:"lazy"}):t.jsx(Pt,{children:t.jsx(kt,{})})})}),t.jsx(zt,{children:t.jsx(f,{isLoading:s,customStyle:{width:"150px",height:"20px",borderRadius:i.sp1},children:d!=null&&d!==""?t.jsxs(J,{className:"sourceAccount",children:[t.jsx(Rt,{children:d}),p!=null&&p!==""&&t.jsx(It,{children:`•••• ${p}`})]}):t.jsx(J,{className:"sourceAccount",children:g})})})]}),t.jsx(Dt,{windowSize:m,isLoading:s,responsiveWidth:S[2].width,children:t.jsx(f,{isLoading:s,customStyle:{width:"120px",height:i.sp4,borderRadius:i.sp1},children:t.jsxs(At,{children:[t.jsxs(Tt,{children:[t.jsx(gt,{status:e.status}),w&&t.jsx(Ae,{display:"flex",title:e.statusDescription||e.status,placement:"top",style:{padding:`${i.sp2} ${i.sp3}`},children:t.jsx(Bt,{className:"infoIconTooltip"})})]}),w===!0&&h===!0&&a!=null&&t.jsxs(t.Fragment,{children:[t.jsx(ut,{}),t.jsx(Ot,{onClick:b,"data-testid":D("retry-payment",e.cardRepaymentId),children:E.retryPayment})]})]})})}),t.jsxs(Mt,{windowSize:m,responsiveWidth:S[3].width,children:[t.jsx(f,{isLoading:s,customStyle:{width:i.sp4,height:i.sp4,borderRadius:"50%"},children:y?t.jsx(Nt,{children:t.jsx(Ht,{})}):t.jsx(Wt,{children:t.jsx(Te,{personBasic:e.paidByUser,styles:{height:i.sp4,width:i.sp4,minWidth:i.sp4}})})}),t.jsx(f,{isLoading:s,customStyle:{width:"80px",height:"20px",borderRadius:i.sp1,marginLeft:i.sp2},children:t.jsx(Et,{className:"initiatedBy",children:v})})]}),t.jsx(Kt,{windowSize:m,responsiveWidth:S[4].width,children:t.jsx(f,{isLoading:s,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(Vt,{className:"amount",windowSize:m,title:H("0,0.[00]",e.amount),children:H("0,0.[00]",e.amount)})})})]})})})},gt=({status:e,style:o})=>{const h=W(),s=yt(e,h),a=he(e);return t.jsx(de,{textColor:s,borderColor:s,text:a,tagStyles:{padding:"1px 6px",...o}})},yt=(e,o)=>{switch(e){case"Clear":case"Sent":return new k(C.success);case"Pending":case"PendingReview":return new k(C.alert);case"Rejected":case"Returned":return new k(C.important);default:return new k(o.colors.grey1)}},ut=n.div`
+  width: ${i.sp1};
+  height: ${i.sp1};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: ${i.sp2};
+`,xt=n.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>I.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>I.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>I.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>I.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>e.theme.mode==="dark"?C.Elevation1Dark:C.Elevation1Light};
+  border-radius: ${i.sp2};
+  width: 100%;
+  cursor: ${e=>e.onClick?"pointer":"default"};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+    .paymentDate,
+    .sourceAccount,
+    .initiatedBy,
+    .amount {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+
+  margin-right: ${e=>I.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>I.containerMarginRight.valuePx(e.windowSize)};
+  margin-bottom: ${i.sp3};
+  box-sizing: border-box;
+  align-items: center;
+`,wt=n.div`
+  display: block;
+  width: 100%;
+`,ft=n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,$t=n.div`
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  padding-left: ${i.sp3};
+  display: flex;
+  align-items: center;
+`,vt=n(M)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,jt=n.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${i.sp2};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  padding-left: ${i.sp3};
+`,bt=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  min-width: ${i.sp4};
+`,St=n.div`
+  min-width: ${i.sp4};
+  width: ${i.sp4};
+  height: ${i.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,Ct=n(oe)`
+  min-width: inherit;
+  width: ${i.sp4};
+  height: ${i.sp4};
+`,Pt=n.div`
+  min-width: ${i.sp4};
+  width: ${i.sp4};
+  height: ${i.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,kt=n(ae)`
+  min-width: inherit;
+  width: ${i.sp4};
+  height: ${i.sp4};
+`,Lt=n.img`
+  display: flex;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  min-width: ${i.sp4};
+  border-radius: 50%;
+  object-fit: cover;
+`,zt=n.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`,J=n(M)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: baseline;
+  column-gap: ${i.sp1};
+  overflow: hidden;
+  min-width: 0;
+`,Rt=n.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`,It=n.span`
+  white-space: nowrap;
+  flex-shrink: 0;
+`,Dt=n.div`
+  position: relative;
+  top: 2px;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  padding-left: ${i.sp3};
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: ${e=>e.isLoading?i.sp1:i.sp0};
+`,At=n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${i.sp2};
+`,Tt=n.div`
+  display: flex;
+  align-items: center;
+  gap: ${i.sp2};
+  &:hover {
+    .infoIconTooltip {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Bt=n(Ne)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  margin-bottom: 0;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ot=n(ne)`
+  color: ${C.link};
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`,Mt=n.div`
+  display: flex;
+  align-items: center;
+  gap: ${i.sp2};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  padding-left: ${i.sp3};
+`,Nt=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  border-radius: 50%;
+`,Ht=n(Ye)`
+  width: ${i.sp4};
+  height: ${i.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Wt=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  border-radius: 50%;
+  background-color: ${e=>e.theme.colors.grey3};
+`,Et=n(M)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Kt=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-left: ${i.sp3};
+  padding-right: ${i.sp2};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+`,Vt=n(M)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,_t=new k(V(0)).lighten(.3).hex(),{spendManagement:{chargeCard:{paymentHistory:T}}}=L.getLocalizedStrings(),Ut=e=>e.base64!==void 0?`${se}${e.base64.toString()}`:e.url!==void 0?e.url.toString():"",Ft=({repayment:e,accountInfo:o,isLatestFailedPayment:h=!1,isLoading:s=!1,onRetryPaymentClick:a})=>{const{accountLogo:l,accountType:x,depositAccountLast4:p,depositAccountName:d}=o??{},m=j.useCallback(y=>{y.stopPropagation(),a&&a(e.cardRepaymentId)},[a,e.cardRepaymentId]),b=L.getLocalizedStrings(),$=e.repaymentDate.format(b.dateFormat.visual.MMMDCommaYYYYformat),r=le(e)?T.autopay:ce(e.paidByUser),g=e.status==="Rejected"||e.status==="Returned";return t.jsx(Xt,{children:t.jsxs(Gt,{children:[t.jsxs(Jt,{children:[t.jsx(Qt,{children:t.jsx(f,{isLoading:s,customStyle:{width:i.sp6,height:i.sp6,borderRadius:"50%"},children:x==="depositAccount"&&d!=null&&d!==""?t.jsx(Zt,{children:t.jsx(ei,{color:V(0)})}):x==="paymentAccount"&&l!==void 0&&(l.base64||l.url)?t.jsx(ni,{src:Ut(l),loading:"lazy"}):t.jsx(ti,{children:t.jsx(ii,{})})})}),t.jsxs(oi,{children:[t.jsx(si,{children:t.jsx(f,{isLoading:s,customStyle:{width:"150px",height:"20px",borderRadius:i.sp1},children:t.jsx(ai,{className:"sourceAccount",children:d!=null&&d!==""?d:T.sourceAccountUnknown})})}),t.jsx(ri,{children:t.jsx(f,{isLoading:s,customStyle:{width:"120px",height:"16px",borderRadius:i.sp1},children:t.jsx(di,{children:p!=null&&p!==""?`Checking •••• ${p}`:""})})}),t.jsx(li,{children:t.jsx(f,{isLoading:s,customStyle:{width:"150px",height:"16px",borderRadius:i.sp1},children:t.jsxs(ci,{children:[T.header.initiatedBy,":"," ",t.jsx(hi,{className:"initiatedBy",children:r})]})})}),t.jsx(pi,{children:t.jsx(f,{isLoading:s,customStyle:{width:"150px",height:"16px",borderRadius:i.sp1},children:t.jsxs(mi,{children:[T.header.paymentDate,":"," ",t.jsx(gi,{className:"paymentDate",children:$})]})})})]})]}),t.jsxs(yi,{children:[t.jsx(ui,{children:t.jsx(f,{isLoading:s,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(xi,{className:"amount",title:H("0,0.[00]",e.amount),children:H("0,0.[00]",e.amount)})})}),t.jsx(wi,{children:t.jsx(f,{isLoading:s,customStyle:{width:"120px",height:i.sp4,borderRadius:i.sp1},children:t.jsx(fi,{children:t.jsx($i,{children:t.jsx(Yt,{status:e.status})})})})}),g===!0&&h===!0&&a!=null&&t.jsx(vi,{children:t.jsx(ji,{onClick:m,"data-testid":D("retry-payment",e.cardRepaymentId),children:T.retryPayment})})]})]})})},Yt=({status:e,style:o})=>{const h=W(),s=qt(e,h),a=he(e);return t.jsx(de,{textColor:s,borderColor:s,text:a,tagStyles:{padding:"1px 6px",...o}})},qt=(e,o)=>{switch(e){case"Clear":case"Sent":return new k(C.success);case"Pending":case"PendingReview":return new k(C.info);case"Rejected":case"Returned":return new k(C.important);default:return new k(o.colors.grey1)}},Xt=n.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding: ${i.sp3};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>e.theme.mode==="dark"?C.Elevation1Dark:C.Elevation1Light};
+  border-radius: ${i.sp2};
+  width: 100%;
+  margin-bottom: ${i.sp3};
+  box-sizing: border-box;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+    .paymentDate,
+    .sourceAccount,
+    .initiatedBy,
+    .amount {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Gt=n.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: ${i.sp3};
+`,Jt=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${i.sp2};
+  flex: 1;
+  min-width: 0;
+`,Qt=n.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: ${i.sp6};
+  height: ${i.sp6};
+  min-width: ${i.sp6};
+  margin-top: ${i.sp1};
+`,Zt=n.div`
+  min-width: ${i.sp6};
+  width: ${i.sp6};
+  height: ${i.sp6};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: ${_t};
+`,ei=n(oe)`
+  min-width: inherit;
+  width: ${i.sp6};
+  height: ${i.sp6};
+`,ti=n.div`
+  min-width: ${i.sp6};
+  width: ${i.sp6};
+  height: ${i.sp6};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: ${e=>e.theme.colors.grey3};
+`,ii=n(ae)`
+  min-width: inherit;
+  width: ${i.sp6};
+  height: ${i.sp6};
+`,ni=n.img`
+  display: flex;
+  width: ${i.sp6};
+  height: ${i.sp6};
+  min-width: ${i.sp6};
+  border-radius: 50%;
+  object-fit: cover;
+`,oi=n.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${i.sp0};
+  flex: 1;
+  min-width: 0;
+`,si=n.div`
+  display: flex;
+  align-items: center;
+`,ai=n(Oe)`
+  color: ${e=>e.theme.colors.primary};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+`,ri=n.div`
+  display: flex;
+  align-items: center;
+`,di=n(re)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  top: -2px;
+`,li=n.div`
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+`,ci=n(B)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,hi=n.span`
+  color: ${e=>e.theme.colors.hero};
+`,pi=n.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: -2px;
+`,mi=n(B)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,gi=n.span`
+  color: ${e=>e.theme.colors.hero};
+`,yi=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+`,ui=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`,xi=n(B)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,wi=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  margin-top: ${i.sp1};
+  margin-bottom: ${i.sp3};
+`,fi=n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${i.sp2};
+  flex-wrap: wrap;
+  justify-content: flex-end;
+`,$i=n.div`
+  display: flex;
+  align-items: center;
+  gap: ${i.sp2};
+  &:hover {
+    .infoIconTooltip {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,vi=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`,ji=n(Me)`
+  color: ${C.link};
+  cursor: pointer;
+  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
+`,bi={lastListItemHeight:new u(200,158)},Si=L.getLocalizedStrings(),{spendManagement:{chargeCard:Q},common:Ci}=Si,Z=50,Pi=64,ki=351,Li=86,me=_.memo(({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:h,searchText:s,onColumnSortConfigChanged:a,onReloadPayments:l,onRetryPaymentClick:x})=>{const p=O(),d=j.useCallback(y=>y===0?Z:p==="small"?132:F,[p]),m=j.useMemo(()=>{let y=Z+Pi;for(let v=1;v<=o.length;v++)y+=d(v);return y},[o.length,d]),b=j.useMemo(()=>window.innerHeight-ki,[]),$=m>b,r=j.useRef(null);j.useEffect(()=>{r.current?.resetAfterIndex(0)},[p]);const g=()=>e==="Error"?t.jsxs(Ai,{children:[t.jsx(Ti,{onClick:l,"data-testid":D("payment-history-list-reload"),children:t.jsx(Bi,{})}),t.jsx(Oi,{children:Ci.reloadPage.label})]}):e==="Completed"&&o.length===0?t.jsx(Hi,{children:t.jsx(Wi,{children:s!==""?Q.paymentHistory.noPaymentHistoryMatchedSearch:Q.paymentHistory.noPaymentHistoryAvailable})}):t.jsx(ye,{children:t.jsx(Mi,{windowSize:p,availableHeight:b,isListTooLarge:$,children:t.jsx(ze,{children:({height:y,width:v})=>t.jsx(Re,{ref:r,height:y,itemCount:o.length+1,innerElementType:ge,itemSize:d,estimatedItemSize:F,itemKey:w=>w===0?"header":o[w-1].repayment.cardRepaymentId,width:v,overscanCount:Ie,initialScrollOffset:0,children:w=>t.jsx(zi,{...w,repaymentListWithAccountInfo:o,sortConfig:h,onColumnSortConfigChanged:a,onRetryPaymentClick:x})})})})});return t.jsx(Di,{fetchState:e,children:g()})},(e,o)=>e.repaymentListWithAccountInfo===o.repaymentListWithAccountInfo&&e.fetchState===o.fetchState&&e.sortConfig.sortKey===o.sortConfig.sortKey&&e.sortConfig.sortOrder===o.sortConfig.sortOrder&&e.searchText===o.searchText);me.displayName="ChargeCardPaymentHistoryContent";const ge=j.forwardRef((e,o)=>{const{children:h,style:s,...a}=e;return t.jsx(ye,{ref:o,style:{...s,width:"auto"},...a,children:t.jsx(Ni,{children:h})})});ge.displayName="ChargeCardPaymentHistoryInnerElement";const zi=({index:e,style:o,repaymentListWithAccountInfo:h,sortConfig:s,onColumnSortConfigChanged:a,onRetryPaymentClick:l})=>{const x=O(),p=e===0,d=p?null:h[e-1],m=d?.repayment??null,b=d?.accountInfo,$=j.useMemo(()=>{if(h.length===0)return null;const v=h.map(S=>S.repayment),w=v.slice(1).reduce((S,z)=>z.repaymentDate.isAfter(S.repaymentDate)?z:S,v[0]);return w.status==="Rejected"||w.status==="Returned"?w.cardRepaymentId:null},[h]),r={...o,width:"100%"};if(p)return t.jsx(ee,{style:r,className:"spend-management-list-item",children:t.jsx(et,{companyNameSticky:!1,sortConfig:s,onColumnSortConfigChanged:a})});if(m==null)return null;const g=$!==null&&m.cardRepaymentId===$,y=x==="small"?Ft:mt;return t.jsx(ee,{style:r,className:"spend-management-list-item",children:t.jsx(y,{repayment:m,accountInfo:b,isLatestFailedPayment:g,onRetryPaymentClick:l})})},Ri=({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:h,onColumnSortConfigChanged:s,onReloadPayments:a,searchText:l,onRetryPaymentClick:x})=>(Le({componentName:"charge_card_payment_history.list",enabled:e==="Completed"}),t.jsx(me,{fetchState:e,repaymentListWithAccountInfo:o,sortConfig:h,onColumnSortConfigChanged:s,onReloadPayments:a,searchText:l,onRetryPaymentClick:x})),Ii=_.memo(Ri),Di=n.div`
+  margin: ${e=>e.fetchState==="Error"?"auto":"unset"};
+  display: block;
+  height: 100%;
+`,Ai=n.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Ti=n.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`,Bi=n(De)`
+  height: ${i.sp5};
+  width: ${i.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Oi=n(ne)`
+  margin-top: ${i.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Mi=n.div`
+  position: sticky;
+  height: ${e=>e.isListTooLarge||e.windowSize==="small"?`calc(100vh - ${Li}px)`:`${e.availableHeight}px`};
+  max-width: 99.9%;
+  ${({isListTooLarge:e,windowSize:o})=>(e||o==="small")&&`
+    .spend-management-list-item:last-of-type {
+      /* NOTE: !important is used to ensure padding is applied to the last item in the virtualized list. */
+      height: ${bi.lastListItemHeight.valuePx(o)} !important;
+      padding-bottom: ${i.sp9};
+    }
+  `}
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  & > div > div::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & > div > div {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+`,ee=n.div`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  padding-bottom: ${i.sp3};
+  box-sizing: border-box;
+`,Ni=n.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,ye=n.div``,Hi=n.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`,Wi=n(M)`
+  display: flex;
+  color: ${e=>e.theme.colors.grey2};
+`,te={contentContainerMargin:new u(c[3],c[4],c[8])},{spendManagement:{chargeCard:{paymentHistory:ie}},common:Ei}=L.getLocalizedStrings(),an=({repaymentList:e,fetchState:o,sortConfig:h,accountInfoByAccountId:s,searchText:a,filters:l,onBackClick:x,repaymentHistoryUsers:p,onColumnSortConfigChanged:d,onFiltersChange:m,onReloadPayments:b,onRetryPaymentClick:$,onSearchTextChanged:r,onClickMenuIcon:g,downloadParams:y,downloadState:v,updateDownloadStateHandler:w})=>{const S=be().analytics,z=Se(),[U,ue]=j.useState(!1),A=O(),xe=W(),we=R=>{ue(R)},fe={entity:"charge_card_payment_history",showNewButtonOnNavbar:!1,showEntityEmailInfoIconOnNavbar:!1,newButtonLabel:Ei.strings.empty,hideSearchBtn:!1,searchTextBoxStyle:{right:"86px"},moreIconContainerStyle:{paddingRight:c[4]},isSearchOpen:U,searchPlaceHolder:ie.searchPlaceHolder,searchText:a,showSettingsIcon:!1,showSettingsIconOnNavbar:!1,showStatementButtonOnNavbar:!1,showPayEarlyButtonOnNavbar:!1,showDownloadButtonOnNavbar:!1,showDownloadIcon:!0,onDownloadClick:async()=>{w("In-Progress");try{await ke({localeID:"en-US",fileType:"excel",entity:"charge_card_payment_history",filter:{filters:l,searchText:a},...y})}finally{w("Completed")}},disableDownloadButton:v==="In-Progress"||o!=="Completed"||e.length===0,analytics:S,onSearchOpen:we,filterIconContainerStyle:{...A==="small"&&{position:"static",paddingRight:"10px"}},onSearchTextChanged:r,onClickSetupIcon:()=>{},onClickStatementsIcon:()=>{},downloadState:v,onNewButtonClick:()=>{},onClickPayEarlyIcon:()=>{},onMenuOpen:()=>{},filters:l,onFiltersChange:m,createdByUserListLoaded:o==="Completed",getFilterOptions:()=>Ue("charge_card_payment_history",p,z.loggedInUserRole??[],[],s),renderDropdownOptionIcon:_e},$e=t.jsx(Ve,{spendManagementSectionProps:fe}),ve=ie.pageTitle,je=j.useMemo(()=>e.map(R=>({repayment:R,accountInfo:R.paymentAccountId!=null&&R.paymentAccountId!==""?s?.[R.paymentAccountId]:void 0})),[e,s]);return t.jsxs(Ki,{children:[t.jsx(Ce,{title:ve,showBackButton:!0,showMenuIcon:A==="medium-compact"||A==="small",onClickMenuIcon:g,titleTextStyles:A==="small"?{...K.standardMedium.cssObject}:void 0,style:{zIndex:3},onBackClick:x,rightSideComponent:$e,isSearchOpen:U,hideSearchBtn:!1,scrollableContent:void 0,source:"ChargeCardPaymentHistoryPage",backgroundColor:xe.colors.grey4}),o==="Not-Started"||o==="In-Progress"?t.jsx(Pe,{fetchState:o,styles:{margin:"auto"}}):t.jsx(Vi,{windowSize:A,children:t.jsx(Ii,{fetchState:o,repaymentListWithAccountInfo:je,sortConfig:h,onColumnSortConfigChanged:d,onReloadPayments:b,searchText:a,onRetryPaymentClick:$})})]})},Ki=n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+`,Vi=n.div`
+  margin-top: ${i.sp4};
+  margin-right: ${e=>te.contentContainerMargin.valuePx(e.windowSize)};
+  margin-bottom: ${i.sp0};
+  margin-left: ${e=>te.contentContainerMargin.valuePx(e.windowSize)};
+`;export{an as default};