@zeniai/web-cockpit-ui 1.15.68-prod → 2.0.0-dev

package/dist/assets/ChargeCardPaymentHistoryPage--jOwsMla-Bzj0wTwy.js

@@ -1,565 +0,0 @@
-import{a9 as ze,ay as Re,e as N,g as K,V as t,bE as Ie,w as I,gk as Te,O as T,u as l,o as i,x,jA as De,cl as Be,jB as G,ac as O,b5 as Oe,cC as Ae,j6 as Me,bT as He,aV as Ne,an as W,dF as j,h9 as U,aQ as _,c1 as We,cE as Ee,b$ as Ve,ao as H,cI as Q,d as $,ha as pe,g2 as me,f_ as ge,cq as _e,ak as F,iX as ue,bO as Ke,jC as Fe,je as Ye,cL as Ze,aX as z,jf as Ue,jg as Xe}from"./index-C8o-xzAN.js";import{a as S,P as X}from"./sentry-DBhcw6Be.js";import{n,c as J}from"./mui-DOS4CfBc.js";import{t as qe}from"./SpendManagementSection-CIz4nE_w-0q2VpGOz.js";import{r as Ge,a as Qe,i as ye,g as Je}from"./SpendManagementListViewPage-CFUxCqkU-dAFL_Ppz.js";import{cl as xe,H1 as fe}from"./zeni-epic-state-DMWYYyyR.js";import{r as et}from"./auto-transfer-rule-mbafm5D3-Bwf-jWRn.js";import"./liveblocks-abv8TgYe.js";import"./core-VVne9A9m.js";import"./recharts-BBlqu8Rz.js";import"./lottie-DehW2chz.js";import"./analytics-D0xbCiOA.js";import"./lexical-0vG0lfLn.js";import"./utils-DT6Wq-eT.js";import"./StatusSwitcher-Bv-ozN6U-Uu-9K_ZT.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]="fc13e492-c8d1-4430-82f3-29ba37cc10af",e._sentryDebugIdIdentifier="sentry-dbid-fc13e492-c8d1-4430-82f3-29ba37cc10af")}catch{}})();const E=T.getLocalizedStrings().spendManagement.chargeCard.paymentHistory.header,tt={key:"paymentDate",value:E.paymentDate,sortOrder:"ascending",width:new x(18,18,18,18,18)},it={key:"sourceAccount",value:E.sourceAccount,sortOrder:"ascending",width:new x(30,30,30,30,30)},nt={key:"paymentStatus",value:E.paymentStatus,sortOrder:"ascending",width:new x(22,22,22,22,22)},ot={key:"initiatedBy",value:E.initiatedBy,sortOrder:"ascending",width:new x(18,18,18,18,18)},at={key:"amount",value:E.amount,sortOrder:"ascending",width:new x(12,12,12,12,12)},we=()=>[tt,it,nt,ot,at],P={containerPaddingLeft:i.sp2,containerPaddingRight:i.sp3,containerPaddingTop:i.sp3,containerPaddingBottom:i.sp3,headerLastColumnTopPadding:new x(l[0],l[4]),headerLastColumnRightPadding:new x(l[3],l[11]),headerLastColumnBottomPadding:new x(l[0],l[4]),headerLastColumnLeftPadding:new x(l[0],l[11]),headerHeight:new x(Ue,Xe)};function st({companyNameSticky:e,sortConfig:o,onColumnSortConfigChanged:c}){const a=K(),r=N(),[d,g]=S.useState(we());S.useEffect(()=>{const s=[...d];for(const m of s)m.key===o.sortKey?m.sortOrder=o.sortOrder:m.sortOrder="ascending";g(s)},[o.sortKey,o.sortOrder]);const y=(s,m)=>{let C=m;o.sortKey===s&&(C=m==="ascending"?"descending":"ascending"),c(s,C)},h=d.find(s=>s.key===o.sortKey)??d[0],p=s=>d.find(m=>m.key===s)?.value??"",u=d.map(s=>s.key),b=T.getLocalizedStrings().spendManagement.chargeCard.paymentHistory;return r==="small"?t.jsxs(ct,{windowSize:r,children:[t.jsxs(mt,{children:[t.jsx(ut,{children:t.jsx(gt,{})}),t.jsx(Ve,{title:b.header.paymentDate,placeholder:b.header.paymentDate,pickerValues:u,valueToLabel:p,selectedValue:o.sortKey,onPickerSelectionChanged:s=>{y(s,"ascending")},optionTextStyle:I.extraSmallRegular,titleTextStyle:I.extraSmallRegular,titleColor:a.colors.primary,selectedOptionColor:a.colors.hero,optionBackgroundColor:a.colors.grey5,downChevronVisible:!1,backgroundColor:a.colors.grey4})]}),t.jsxs(ft,{onClick:()=>y(h.key,h.sortOrder),"data-testid":O("mobile-payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(H,{children:h.value}),t.jsx(ee,{windowSize:r,sortDataValue:o.sortKey,headerdata:h,children:t.jsx(te,{windowSize:r,children:t.jsx(Q,{})})})]})]}):t.jsx(dt,{windowSize:r,children:t.jsx(lt,{children:d.map(s=>s.width.value(r)!==0&&t.jsxs(ht,{companyNameSticky:e,sortDataValue:o.sortKey,actualDataValue:s.key,wrapperWidth:s.width,windowSize:r,children:[t.jsxs(xt,{onClick:()=>y(s.key,s.sortOrder),"data-testid":O("payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(H,{children:s.value}),t.jsx(ee,{windowSize:r,sortDataValue:o.sortKey,headerdata:s,children:t.jsx(te,{windowSize:r,children:t.jsx(Q,{})})})]}),t.jsx(yt,{sortDataValue:o.sortKey,windowSize:r,isVisible:o.sortKey===s.key&&!(o.sortKey==="paymentDate"&&o.sortOrder==="ascending"),children:t.jsx(pt,{onClick:()=>y("paymentDate","ascending"),"data-testid":O("payment-history-list-sort-cancel",o.sortKey)})})]},s.key))})})}const rt=X.memo(st),dt=n.div`
-  top: ${i.sp0};
-  left: ${i.sp0};
-  z-index: 2;
-  background-color: ${e=>e.theme.colors.grey4};
-  position: sticky;
-  width: 100%;
-`,lt=n.div`
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${P.containerPaddingTop} ${P.containerPaddingRight}
-    ${P.containerPaddingBottom} ${P.containerPaddingLeft};
-  justify-content: space-between;
-`,ct=n(F)`
-  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%;
-`,ht=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?J`
-          position: sticky;
-          z-index: 1;
-        `:J`
-          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};
-`,pt=n(Ze)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-`,ee=n.div`
-  display: flex;
-  align-items: center;
-  transform: ${e=>e.sortDataValue===e.headerdata.key&&e.headerdata.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
-`,te=n.div`
-  width: ${i.sp2};
-  height: ${i.sp2};
-  cursor: pointer;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`,mt=n.div`
-  gap: ${i.sp1};
-  display: flex;
-  color: ${e=>e.theme.colors.hero};
-`,gt=n(Ye)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: inherit;
-`,ut=n.div`
-  margin-right: ${i.sp1};
-  display: flex;
-  align-items: center;
-`,yt=n.div`
-  display: ${e=>e.isVisible?"flex":"none"};
-  align-items: center;
-  padding-top: 2px;
-`,xt=n.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,ft=n.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  color: ${e=>e.theme.colors.primary};
-`,B={containerPaddingLeft:new x(l[3],l[2]),containerPaddingRight:new x(l[2],l[3]),containerPaddingTop:new x(l[2],l[3]),containerPaddingBottom:new x(l[2],l[3]),containerMarginLeft:new x(l[4],l[0]),containerMarginRight:new x(l[4],l[0])},{spendManagement:{chargeCard:{paymentHistory:A}}}=T.getLocalizedStrings(),wt=e=>e.base64!==void 0?`${me}${e.base64.toString()}`:e.url!==void 0?e.url.toString():"",$t=({repayment:e,accountInfo:o,isLatestFailedPayment:c=!1,isLoading:a=!1,isZeniTenant:r,onRetryPaymentClick:d})=>{const{accountLogo:g,accountType:y,depositAccountLast4:h,depositAccountName:p}=o??{},u=N(),b=S.useCallback(Z=>{Z.stopPropagation(),d&&d(e.cardRepaymentId)},[d,e.cardRepaymentId]),s=T.getLocalizedStrings(),m=e.repaymentDate.format(s.dateFormat.visual.MMMDCommaYYYYformat),C=Je(p,h,A.sourceAccountUnknown),v=ye(e),w=e.paidByUser?.email?.endsWith("@zeni.ai")??!1,f=v||!r&&w,R=f?A.autopay:xe(e.paidByUser),D=e.status==="Rejected"||e.status==="Returned",V=e.status==="Sent",Y=e.updateTime.format(s.dateFormat.visual.MMMDCommaYYYYformat),k=we();return t.jsx(St,{windowSize:u,children:t.jsx(Ct,{children:t.jsxs(kt,{children:[t.jsx(Pt,{windowSize:u,responsiveWidth:k[0].width,children:t.jsx(j,{isLoading:a,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:V?t.jsx(We,{placement:"bottom-start",title:t.jsxs(Xt,{children:[t.jsxs(oe,{children:[t.jsx(ae,{children:A.initiatedOn}),t.jsx(se,{children:m})]}),t.jsxs(oe,{children:[t.jsx(ae,{children:A.completedOn}),t.jsx(se,{children:Y})]})]}),style:{padding:"12px 16px"},display:"block",children:t.jsx(ie,{className:"paymentDate",children:m})}):t.jsx(ie,{className:"paymentDate",children:m})})}),t.jsxs(Lt,{windowSize:u,responsiveWidth:k[1].width,children:[t.jsx(j,{isLoading:a,customStyle:{width:i.sp4,height:i.sp4,borderRadius:"50%"},children:t.jsx(zt,{children:y==="depositAccount"&&p!=null&&p!==""?t.jsx(Rt,{children:t.jsx(It,{color:U(0)})}):y==="paymentAccount"&&g!==void 0&&(g.base64||g.url)?t.jsx(Bt,{src:wt(g),loading:"lazy"}):t.jsx(Tt,{children:t.jsx(Dt,{})})})}),t.jsx(Ot,{children:t.jsx(j,{isLoading:a,customStyle:{width:"150px",height:"20px",borderRadius:i.sp1},children:p!=null&&p!==""?t.jsxs(ne,{className:"sourceAccount",children:[t.jsx(At,{children:p}),h!=null&&h!==""&&t.jsx(Mt,{children:`•••• ${h}`})]}):t.jsx(ne,{className:"sourceAccount",children:C})})})]}),t.jsx(Ht,{windowSize:u,isLoading:a,responsiveWidth:k[2].width,children:t.jsx(j,{isLoading:a,customStyle:{width:"120px",height:i.sp4,borderRadius:i.sp1},children:t.jsxs(Nt,{children:[t.jsx(Wt,{children:t.jsx(vt,{status:e.status})}),D===!0&&c===!0&&d!=null&&t.jsxs(t.Fragment,{children:[t.jsx(bt,{}),t.jsx(Et,{onClick:b,"data-testid":O("retry-payment",e.cardRepaymentId),children:A.retryPayment})]})]})})}),t.jsxs(Vt,{windowSize:u,responsiveWidth:k[3].width,children:[t.jsx(j,{isLoading:a,customStyle:{width:i.sp4,height:i.sp4,borderRadius:"50%"},children:f?t.jsx(_t,{children:t.jsx(Kt,{})}):t.jsx(Ft,{children:t.jsx(Ee,{personBasic:e.paidByUser,styles:{height:i.sp4,width:i.sp4,minWidth:i.sp4}})})}),t.jsx(j,{isLoading:a,customStyle:{width:"80px",height:"20px",borderRadius:i.sp1,marginLeft:i.sp2},children:t.jsx(Yt,{className:"initiatedBy",children:R})})]}),t.jsx(Zt,{windowSize:u,responsiveWidth:k[4].width,children:t.jsx(j,{isLoading:a,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(Ut,{className:"amount",windowSize:u,title:_("0,0.00",e.amount),children:_("0,0.00",e.amount)})})})]})})})},vt=({status:e,style:o})=>{const c=K(),a=jt(e,c),r=fe(e);return t.jsx(ue,{textColor:a,borderColor:a,text:r,tagStyles:{padding:"1px 6px",...o}})},jt=(e,o)=>{switch(e){case"Sent":return new z($.success);case"Clearing":case"Pending":case"PendingReview":return new z($.alert);case"Rejected":case"Returned":return new z($.important);default:return new z(o.colors.grey1)}},bt=n.div`
-  width: ${i.sp1};
-  height: ${i.sp1};
-  background-color: ${e=>e.theme.colors.grey1};
-  border-radius: ${i.sp2};
-`,St=n.div`
-  display: flex;
-  background-color: ${e=>e.theme.colors.grey5};
-  padding-left: ${e=>B.containerPaddingLeft.valuePx(e.windowSize)};
-  padding-right: ${e=>B.containerPaddingRight.valuePx(e.windowSize)};
-  padding-top: ${e=>B.containerPaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${e=>B.containerPaddingBottom.valuePx(e.windowSize)};
-  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
-  box-shadow: ${e=>e.theme.mode==="dark"?$.Elevation1Dark:$.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=>B.containerMarginLeft.valuePx(e.windowSize)};
-  margin-left: ${e=>B.containerMarginRight.valuePx(e.windowSize)};
-  margin-bottom: ${i.sp3};
-  box-sizing: border-box;
-  align-items: center;
-`,Ct=n.div`
-  display: block;
-  width: 100%;
-`,kt=n.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`,Pt=n.div`
-  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
-  box-sizing: border-box;
-  padding-left: ${i.sp3};
-  display: flex;
-  align-items: center;
-`,ie=n(W)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Lt=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};
-`,zt=n.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${i.sp4};
-  height: ${i.sp4};
-  min-width: ${i.sp4};
-`,Rt=n.div`
-  min-width: ${i.sp4};
-  width: ${i.sp4};
-  height: ${i.sp4};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`,It=n(pe)`
-  min-width: inherit;
-  width: ${i.sp4};
-  height: ${i.sp4};
-`,Tt=n.div`
-  min-width: ${i.sp4};
-  width: ${i.sp4};
-  height: ${i.sp4};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`,Dt=n(ge)`
-  min-width: inherit;
-  width: ${i.sp4};
-  height: ${i.sp4};
-`,Bt=n.img`
-  display: flex;
-  width: ${i.sp4};
-  height: ${i.sp4};
-  min-width: ${i.sp4};
-  border-radius: 50%;
-  object-fit: cover;
-`,Ot=n.div`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`,ne=n(W)`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: baseline;
-  column-gap: ${i.sp1};
-  overflow: hidden;
-  min-width: 0;
-`,At=n.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-`,Mt=n.span`
-  white-space: nowrap;
-  flex-shrink: 0;
-`,Ht=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};
-`,Nt=n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: ${i.sp2};
-`,Wt=n.div`
-  display: flex;
-  align-items: center;
-  gap: ${i.sp2};
-  &:hover {
-    .infoIconTooltip {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,Et=n(Fe)`
-  font-size: ${I.smallRegular.fontSize};
-  font-weight: ${I.smallRegular.fontWeight};
-  line-height: ${I.smallRegular.lineHeight};
-  font-family: ${I.smallRegular.fontFamily};
-  letter-spacing: ${I.smallRegular.letterSpacing};
-  color: ${$.link};
-  &:after {
-    background: ${$.link};
-  }
-  &:hover {
-    color: ${$.link};
-  }
-`,Vt=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};
-`,_t=n.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${i.sp4};
-  height: ${i.sp4};
-  border-radius: 50%;
-`,Kt=n(et)`
-  width: ${i.sp4};
-  height: ${i.sp4};
-  color: ${e=>e.theme.colors.hero};
-`,Ft=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};
-`,Yt=n(W)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Zt=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;
-`,Ut=n(W)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Xt=n.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${i.sp1};
-`,oe=n.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${i.sp3};
-`,ae=n(F)`
-  color: ${e=>e.theme.colors.hero};
-`,se=n(F)`
-  color: ${$.brandColorPearl};
-`,qt=new z(U(0)).lighten(.3).hex(),{spendManagement:{chargeCard:{paymentHistory:M}}}=T.getLocalizedStrings(),Gt=e=>e.base64!==void 0?`${me}${e.base64.toString()}`:e.url!==void 0?e.url.toString():"",Qt=({repayment:e,accountInfo:o,isLatestFailedPayment:c=!1,isLoading:a=!1,isZeniTenant:r,onRetryPaymentClick:d})=>{const{accountLogo:g,accountType:y,depositAccountLast4:h,depositAccountName:p}=o??{},u=S.useCallback(f=>{f.stopPropagation(),d&&d(e.cardRepaymentId)},[d,e.cardRepaymentId]),b=T.getLocalizedStrings(),s=e.repaymentDate.format(b.dateFormat.visual.MMMDCommaYYYYformat),m=ye(e),C=e.paidByUser?.email?.endsWith("@zeni.ai")??!1,v=m||!r&&C?M.autopay:xe(e.paidByUser),w=e.status==="Rejected"||e.status==="Returned";return t.jsx(ti,{children:t.jsxs(ii,{children:[t.jsxs(ni,{children:[t.jsx(oi,{children:t.jsx(j,{isLoading:a,customStyle:{width:i.sp6,height:i.sp6,borderRadius:"50%"},children:y==="depositAccount"&&p!=null&&p!==""?t.jsx(ai,{children:t.jsx(si,{color:U(0)})}):y==="paymentAccount"&&g!==void 0&&(g.base64||g.url)?t.jsx(li,{src:Gt(g),loading:"lazy"}):t.jsx(ri,{children:t.jsx(di,{})})})}),t.jsxs(ci,{children:[t.jsx(hi,{children:t.jsx(j,{isLoading:a,customStyle:{width:"150px",height:"20px",borderRadius:i.sp1},children:t.jsx(pi,{className:"sourceAccount",children:p!=null&&p!==""?p:M.sourceAccountUnknown})})}),t.jsx(mi,{children:t.jsx(j,{isLoading:a,customStyle:{width:"120px",height:"16px",borderRadius:i.sp1},children:t.jsx(gi,{children:h!=null&&h!==""?`Checking •••• ${h}`:""})})}),t.jsx(ui,{children:t.jsx(j,{isLoading:a,customStyle:{width:"150px",height:"16px",borderRadius:i.sp1},children:t.jsxs(yi,{children:[M.header.initiatedBy,":"," ",t.jsx(xi,{className:"initiatedBy",children:v})]})})}),t.jsx(fi,{children:t.jsx(j,{isLoading:a,customStyle:{width:"150px",height:"16px",borderRadius:i.sp1},children:t.jsxs(wi,{children:[M.header.paymentDate,":"," ",t.jsx($i,{className:"paymentDate",children:s})]})})})]})]}),t.jsxs(vi,{children:[t.jsx(ji,{children:t.jsx(j,{isLoading:a,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(bi,{className:"amount",title:_("0,0.[00]",e.amount),children:_("0,0.[00]",e.amount)})})}),t.jsx(Si,{children:t.jsx(j,{isLoading:a,customStyle:{width:"120px",height:i.sp4,borderRadius:i.sp1},children:t.jsx(Ci,{children:t.jsx(ki,{children:t.jsx(Jt,{status:e.status})})})})}),w===!0&&c===!0&&d!=null&&t.jsx(Pi,{children:t.jsx(Li,{onClick:u,"data-testid":O("retry-payment",e.cardRepaymentId),children:M.retryPayment})})]})]})})},Jt=({status:e,style:o})=>{const c=K(),a=ei(e,c),r=fe(e);return t.jsx(ue,{textColor:a,borderColor:a,text:r,tagStyles:{padding:"1px 6px",...o}})},ei=(e,o)=>{switch(e){case"Sent":return new z($.success);case"Clearing":case"Pending":case"PendingReview":return new z($.alert);case"Rejected":case"Returned":return new z($.important);default:return new z(o.colors.grey1)}},ti=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"?$.Elevation1Dark:$.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};
-    }
-  }
-`,ii=n.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: ${i.sp3};
-`,ni=n.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${i.sp2};
-  flex: 1;
-  min-width: 0;
-`,oi=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};
-`,ai=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: ${qt};
-`,si=n(pe)`
-  min-width: inherit;
-  width: ${i.sp6};
-  height: ${i.sp6};
-`,ri=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};
-`,di=n(ge)`
-  min-width: inherit;
-  width: ${i.sp6};
-  height: ${i.sp6};
-`,li=n.img`
-  display: flex;
-  width: ${i.sp6};
-  height: ${i.sp6};
-  min-width: ${i.sp6};
-  border-radius: 50%;
-  object-fit: cover;
-`,ci=n.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${i.sp0};
-  flex: 1;
-  min-width: 0;
-`,hi=n.div`
-  display: flex;
-  align-items: center;
-`,pi=n(_e)`
-  color: ${e=>e.theme.colors.primary};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-`,mi=n.div`
-  display: flex;
-  align-items: center;
-`,gi=n(F)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-  top: -2px;
-`,ui=n.div`
-  display: flex;
-  align-items: center;
-  margin-top: 3px;
-`,yi=n(H)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,xi=n.span`
-  color: ${e=>e.theme.colors.hero};
-`,fi=n.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  top: -2px;
-`,wi=n(H)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,$i=n.span`
-  color: ${e=>e.theme.colors.hero};
-`,vi=n.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-start;
-  flex-shrink: 0;
-`,ji=n.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`,bi=n(H)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Si=n.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-start;
-  margin-top: ${i.sp1};
-  margin-bottom: ${i.sp3};
-`,Ci=n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: ${i.sp2};
-  flex-wrap: wrap;
-  justify-content: flex-end;
-`,ki=n.div`
-  display: flex;
-  align-items: center;
-  gap: ${i.sp2};
-  &:hover {
-    .infoIconTooltip {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,Pi=n.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`,Li=n(Ke)`
-  color: ${$.link};
-  cursor: pointer;
-  text-decoration: underline;
-  &:hover {
-    text-decoration: underline;
-  }
-`,zi={lastListItemHeight:new x(200,114)},Ri=T.getLocalizedStrings(),{spendManagement:{chargeCard:re},common:Ii}=Ri,de=50,Ti=64,Di=351,Bi=86,$e=X.memo(({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:c,searchText:a,isZeniTenant:r,onColumnSortConfigChanged:d,onReloadPayments:g,onRetryPaymentClick:y})=>{const h=N(),p=S.useCallback(v=>v===0?de:h==="small"?132:G,[h]),u=S.useMemo(()=>{let v=de+Ti;for(let w=1;w<=o.length;w++)v+=p(w);return v},[o.length,p]),b=S.useMemo(()=>window.innerHeight-Di,[]),s=u>b,m=S.useRef(null);S.useEffect(()=>{m.current?.resetAfterIndex(0)},[h]);const C=()=>e==="Error"?t.jsxs(Ni,{children:[t.jsx(Wi,{onClick:g,"data-testid":O("payment-history-list-reload"),children:t.jsx(Ei,{})}),t.jsx(Vi,{children:Ii.reloadPage.label})]}):e==="Completed"&&o.length===0?t.jsx(Fi,{children:t.jsx(Yi,{children:a!==""?re.paymentHistory.noPaymentHistoryMatchedSearch:re.paymentHistory.noPaymentHistoryAvailable})}):t.jsx(je,{children:t.jsx(_i,{windowSize:h,availableHeight:b,isListTooLarge:s,children:t.jsx(Oe,{children:({height:v,width:w})=>t.jsx(Ae,{ref:m,height:v,itemCount:o.length+1,innerElementType:ve,itemSize:p,estimatedItemSize:G,itemKey:f=>f===0?"header":o[f-1].repayment.cardRepaymentId,width:w,overscanCount:Me,initialScrollOffset:0,children:f=>t.jsx(Oi,{...f,repaymentListWithAccountInfo:o,sortConfig:c,isZeniTenant:r,onColumnSortConfigChanged:d,onRetryPaymentClick:y})})})})});return t.jsx(Hi,{fetchState:e,children:C()})},(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&&e.isZeniTenant===o.isZeniTenant);$e.displayName="ChargeCardPaymentHistoryContent";const ve=S.forwardRef((e,o)=>{const{children:c,style:a,...r}=e;return t.jsx(je,{ref:o,style:{...a,width:"auto"},...r,children:t.jsx(Ki,{children:c})})});ve.displayName="ChargeCardPaymentHistoryInnerElement";const Oi=({index:e,style:o,repaymentListWithAccountInfo:c,sortConfig:a,isZeniTenant:r,onColumnSortConfigChanged:d,onRetryPaymentClick:g})=>{const y=N(),h=e===0,p=h?null:c[e-1],u=p?.repayment??null,b=p?.accountInfo,s=S.useMemo(()=>{if(c.length===0)return null;const w=c.map(R=>R.repayment),f=w.slice(1).reduce((R,D)=>D.repaymentDate.isAfter(R.repaymentDate)?D:R,w[0]);return f.status==="Rejected"||f.status==="Returned"?f.cardRepaymentId:null},[c]),m={...o,width:"100%"};if(h)return t.jsx(le,{style:m,className:"spend-management-list-item",children:t.jsx(rt,{companyNameSticky:!1,sortConfig:a,onColumnSortConfigChanged:d})});if(u==null)return null;const C=s!==null&&u.cardRepaymentId===s,v=y==="small"?Qt:$t;return t.jsx(le,{style:m,className:"spend-management-list-item",children:t.jsx(v,{repayment:u,accountInfo:b,isLatestFailedPayment:C,isZeniTenant:r,onRetryPaymentClick:g})})},Ai=({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:c,onColumnSortConfigChanged:a,onReloadPayments:r,searchText:d,isZeniTenant:g,onRetryPaymentClick:y})=>(Be({componentName:"charge_card_payment_history.list",enabled:e==="Completed"}),t.jsx($e,{fetchState:e,repaymentListWithAccountInfo:o,sortConfig:c,onColumnSortConfigChanged:a,onReloadPayments:r,searchText:d,isZeniTenant:g,onRetryPaymentClick:y})),Mi=X.memo(Ai),Hi=n.div`
-  margin: ${e=>e.fetchState==="Error"?"auto":"unset"};
-  display: block;
-  height: 100%;
-`,Ni=n.div`
-  display: flex;
-  width: 100%;
-  height: calc(100% - 60px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`,Wi=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;
-`,Ei=n(He)`
-  height: ${i.sp5};
-  width: ${i.sp5};
-  color: ${e=>e.theme.colors.grey1};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,Vi=n(Ne)`
-  margin-top: ${i.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,_i=n.div`
-  position: sticky;
-  height: ${e=>e.isListTooLarge||e.windowSize==="small"?`calc(100vh - ${Bi}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: ${zi.lastListItemHeight.valuePx(o)} !important;
-      padding-bottom: ${i.sp8};
-    }
-  `}
-
-  /* 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;
-  }
-`,le=n.div`
-  top: ${i.sp0};
-  left: ${i.sp0};
-  padding-bottom: ${i.sp3};
-  box-sizing: border-box;
-`,Ki=n.div`
-  position: relative;
-  width: auto;
-  height: 100%;
-`,je=n.div``,Fi=n.div`
-  display: flex;
-  height: 100%;
-  flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-end;
-`,Yi=n(W)`
-  display: flex;
-  color: ${e=>e.theme.colors.grey2};
-`,ce={contentContainerMargin:new x(l[3],l[4],l[8])},{spendManagement:{chargeCard:{paymentHistory:he}},common:Zi}=T.getLocalizedStrings(),pn=({repaymentList:e,fetchState:o,sortConfig:c,accountInfoByAccountId:a,searchText:r,filters:d,isZeniTenant:g,onBackClick:y,repaymentHistoryUsers:h,onColumnSortConfigChanged:p,onFiltersChange:u,onReloadPayments:b,onRetryPaymentClick:s,onSearchTextChanged:m,onClickMenuIcon:C,downloadParams:v,downloadState:w,updateDownloadStateHandler:f})=>{const R=ze().analytics,D=Re(),[V,Y]=S.useState(!1),k=N(),Z=K(),be=r===""&&(d?.categories==null||d.categories.length===0||d.categories.every(L=>L.values==null||L.values.length===0)),q=o==="Completed"&&be&&e.length===0,Se=L=>{Y(L)},Ce={entity:"charge_card_payment_history",showNewButtonOnNavbar:!1,showEntityEmailInfoIconOnNavbar:!1,newButtonLabel:Zi.strings.empty,hideSearchBtn:!1,disableSearch:q,disableFilters:q,searchTextBoxStyle:{right:"86px"},moreIconContainerStyle:{paddingRight:l[4]},isSearchOpen:V,searchPlaceHolder:he.searchPlaceHolder,searchText:r,showSettingsIcon:!1,showSettingsIconOnNavbar:!1,showStatementButtonOnNavbar:!1,showPayEarlyButtonOnNavbar:!1,showDownloadButtonOnNavbar:!1,showDownloadIcon:!0,onDownloadClick:async()=>{f("In-Progress");try{await De({localeID:"en-US",fileType:"excel",entity:"charge_card_payment_history",filter:{filters:d,searchText:r},...v})}finally{f("Completed")}},disableDownloadButton:w==="In-Progress"||o!=="Completed"||e.length===0,analytics:R,onSearchOpen:Se,filterIconContainerStyle:{...k==="small"&&{position:"static",paddingRight:"10px"}},onSearchTextChanged:m,onClickSetupIcon:()=>{},onClickStatementsIcon:()=>{},downloadState:w,onNewButtonClick:()=>{},onClickPayEarlyIcon:()=>{},onMenuOpen:()=>{},filters:d,onFiltersChange:u,createdByUserListLoaded:o==="Completed",getFilterOptions:()=>Qe("charge_card_payment_history",h,D.loggedInUserRole??[],[],a),renderDropdownOptionIcon:Ge},ke=t.jsx(qe,{spendManagementSectionProps:Ce}),Pe=he.pageTitle,Le=S.useMemo(()=>e.map(L=>({repayment:L,accountInfo:L.paymentAccountId!=null&&L.paymentAccountId!==""?a?.[L.paymentAccountId]:void 0})),[e,a]);return t.jsxs(Ui,{children:[t.jsx(Ie,{title:Pe,showBackButton:!0,showMenuIcon:k==="medium-compact"||k==="small",onClickMenuIcon:C,titleTextStyles:k==="small"?{...I.standardMedium.cssObject}:void 0,style:{zIndex:3},onBackClick:y,rightSideComponent:ke,isSearchOpen:V,hideSearchBtn:!1,scrollableContent:void 0,source:"ChargeCardPaymentHistoryPage",backgroundColor:Z.colors.grey4}),o==="Not-Started"||o==="In-Progress"?t.jsx(Te,{fetchState:o,styles:{margin:"auto"}}):t.jsx(Xi,{windowSize:k,children:t.jsx(Mi,{fetchState:o,repaymentListWithAccountInfo:Le,sortConfig:c,onColumnSortConfigChanged:p,onReloadPayments:b,searchText:r,isZeniTenant:g,onRetryPaymentClick:s})})]})},Ui=n.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-`,Xi=n.div`
-  margin-top: ${i.sp4};
-  margin-right: ${e=>ce.contentContainerMargin.valuePx(e.windowSize)};
-  margin-bottom: ${i.sp0};
-  margin-left: ${e=>ce.contentContainerMargin.valuePx(e.windowSize)};
-`;export{pn as default};