@zeniai/web-cockpit-ui 1.14.97-prod → 1.14.98-dev

package/dist/assets/ChargeCardPaymentHistoryPage-5dwl-3gt-Cg-FZFeP.js

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