@zeniai/web-cockpit-ui 1.15.1-qa → 1.15.2-dev

package/dist/assets/ChargeCardPaymentHistoryPage-mA_IVVFy-De_KyAuK.js

@@ -0,0 +1,565 @@
+import{a8 as ze,aw as Re,q as H,d as F,V as t,bA as Ie,b as I,g2 as Te,F as T,c as l,o as i,y as x,jh as De,cb as Ae,ji as G,aN as B,b2 as Be,cr as Me,iO as Oe,bM as Ne,aR as He,al as W,dr as j,gU as Z,aL as V,bR as We,ct as Ee,bP as Ke,am as N,cw as Q,p as $,gV as pe,fM as me,fI as ge,cg as Ve,ai as _,iD as ue,bK as Fe,jj as _e,iW as Ue,cz as Ye,aT as z,iX as Ze,iY as qe}from"./index-DaYznKbB.js";import{a as S,S as q}from"./sentry-Bp9GtzEp.js";import{n,c as J}from"./mui-Bw2IfcWM.js";import{t as Xe}from"./SpendManagementSection-4bPNXnAu-PYCo478F.js";import{r as Ge,a as Qe,i as ye,g as Je}from"./SpendManagementListViewPage-7hmUDsTR-DhApwaYY.js";import{ck as xe,G5 as fe}from"./zeni-epic-state-BxNqBiH-.js";import{r as et}from"./auto-transfer-rule-mbafm5D3-B2LSu6td.js";import"./liveblocks-DBwZPvBF.js";import"./core-B60xt_9S.js";import"./recharts-DIy4CLtr.js";import"./lottie-C5JCvMhe.js";import"./analytics-C6_KHLMr.js";import"./lexical-ljPdYVBl.js";import"./utils-CUkgdryf.js";import"./StatusSwitcher-VeYkrDM7-Cg8WxvyO.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]="893a9c5d-8269-466f-a2e7-30a0f8e8778d",e._sentryDebugIdIdentifier="sentry-dbid-893a9c5d-8269-466f-a2e7-30a0f8e8778d")}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(Ze,qe)};function st({companyNameSticky:e,sortConfig:o,onColumnSortConfigChanged:c}){const a=F(),r=H(),[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(Ke,{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":B("mobile-payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(N,{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":B("payment-history-list-sort-clicked",o.sortKey),children:[t.jsx(N,{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":B("payment-history-list-sort-cancel",o.sortKey)})})]},s.key))})})}const rt=q.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(_)`
+  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(Ye)`
+  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(Ue)`
+  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};
+`,A={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:M}}}=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=H(),b=S.useCallback(Y=>{Y.stopPropagation(),d&&d(e.cardRepaymentId)},[d,e.cardRepaymentId]),s=T.getLocalizedStrings(),m=e.repaymentDate.format(s.dateFormat.visual.MMMDCommaYYYYformat),C=Je(p,h,M.sourceAccountUnknown),v=ye(e),w=e.paidByUser?.email?.endsWith("@zeni.ai")??!1,f=v||!r&&w,R=f?M.autopay:xe(e.paidByUser),D=e.status==="Rejected"||e.status==="Returned",K=e.status==="Sent",U=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:K?t.jsx(We,{placement:"bottom-start",title:t.jsxs(qt,{children:[t.jsxs(oe,{children:[t.jsx(ae,{children:M.initiatedOn}),t.jsx(se,{children:m})]}),t.jsxs(oe,{children:[t.jsx(ae,{children:M.completedOn}),t.jsx(se,{children:U})]})]}),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:Z(0)})}):y==="paymentAccount"&&g!==void 0&&(g.base64||g.url)?t.jsx(At,{src:wt(g),loading:"lazy"}):t.jsx(Tt,{children:t.jsx(Dt,{})})})}),t.jsx(Bt,{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(Mt,{children:p}),h!=null&&h!==""&&t.jsx(Ot,{children:`•••• ${h}`})]}):t.jsx(ne,{className:"sourceAccount",children:C})})})]}),t.jsx(Nt,{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(Ht,{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":B("retry-payment",e.cardRepaymentId),children:M.retryPayment})]})]})})}),t.jsxs(Kt,{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(Vt,{children:t.jsx(Ft,{})}):t.jsx(_t,{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(Ut,{className:"initiatedBy",children:R})})]}),t.jsx(Yt,{windowSize:u,responsiveWidth:k[4].width,children:t.jsx(j,{isLoading:a,customStyle:{width:"100px",height:"20px",borderRadius:i.sp1},children:t.jsx(Zt,{className:"amount",windowSize:u,title:V("0,0.00",e.amount),children:V("0,0.00",e.amount)})})})]})})})},vt=({status:e,style:o})=>{const c=F(),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=>A.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>A.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>A.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>A.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=>A.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>A.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};
+`,At=n.img`
+  display: flex;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  min-width: ${i.sp4};
+  border-radius: 50%;
+  object-fit: cover;
+`,Bt=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;
+`,Mt=n.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`,Ot=n.span`
+  white-space: nowrap;
+  flex-shrink: 0;
+`,Nt=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};
+`,Ht=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(_e)`
+  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};
+  }
+`,Kt=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};
+`,Vt=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${i.sp4};
+  height: ${i.sp4};
+  border-radius: 50%;
+`,Ft=n(et)`
+  width: ${i.sp4};
+  height: ${i.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,_t=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};
+`,Ut=n(W)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Yt=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;
+`,Zt=n(W)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,qt=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(_)`
+  color: ${e=>e.theme.colors.hero};
+`,se=n(_)`
+  color: ${$.brandColorPearl};
+`,Xt=new z(Z(0)).lighten(.3).hex(),{spendManagement:{chargeCard:{paymentHistory:O}}}=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?O.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:Z(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:O.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:[O.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:[O.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:V("0,0.[00]",e.amount),children:V("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":B("retry-payment",e.cardRepaymentId),children:O.retryPayment})})]})]})})},Jt=({status:e,style:o})=>{const c=F(),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: ${Xt};
+`,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(Ve)`
+  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(_)`
+  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(N)`
+  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(N)`
+  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(N)`
+  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(Fe)`
+  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,Ai=86,$e=q.memo(({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:c,searchText:a,isZeniTenant:r,onColumnSortConfigChanged:d,onReloadPayments:g,onRetryPaymentClick:y})=>{const h=H(),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(Hi,{children:[t.jsx(Wi,{onClick:g,"data-testid":B("payment-history-list-reload"),children:t.jsx(Ei,{})}),t.jsx(Ki,{children:Ii.reloadPage.label})]}):e==="Completed"&&o.length===0?t.jsx(_i,{children:t.jsx(Ui,{children:a!==""?re.paymentHistory.noPaymentHistoryMatchedSearch:re.paymentHistory.noPaymentHistoryAvailable})}):t.jsx(je,{children:t.jsx(Vi,{windowSize:h,availableHeight:b,isListTooLarge:s,children:t.jsx(Be,{children:({height:v,width:w})=>t.jsx(Me,{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:Oe,initialScrollOffset:0,children:f=>t.jsx(Bi,{...f,repaymentListWithAccountInfo:o,sortConfig:c,isZeniTenant:r,onColumnSortConfigChanged:d,onRetryPaymentClick:y})})})})});return t.jsx(Ni,{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(Fi,{children:c})})});ve.displayName="ChargeCardPaymentHistoryInnerElement";const Bi=({index:e,style:o,repaymentListWithAccountInfo:c,sortConfig:a,isZeniTenant:r,onColumnSortConfigChanged:d,onRetryPaymentClick:g})=>{const y=H(),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})})},Mi=({fetchState:e,repaymentListWithAccountInfo:o,sortConfig:c,onColumnSortConfigChanged:a,onReloadPayments:r,searchText:d,isZeniTenant:g,onRetryPaymentClick:y})=>(Ae({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})),Oi=q.memo(Mi),Ni=n.div`
+  margin: ${e=>e.fetchState==="Error"?"auto":"unset"};
+  display: block;
+  height: 100%;
+`,Hi=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(Ne)`
+  height: ${i.sp5};
+  width: ${i.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ki=n(He)`
+  margin-top: ${i.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Vi=n.div`
+  position: sticky;
+  height: ${e=>e.isListTooLarge||e.windowSize==="small"?`calc(100vh - ${Ai}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;
+`,Fi=n.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,je=n.div``,_i=n.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`,Ui=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:Yi}=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(),[K,U]=S.useState(!1),k=H(),Y=F(),be=r===""&&(d?.categories==null||d.categories.length===0||d.categories.every(L=>L.values==null||L.values.length===0)),X=o==="Completed"&&be&&e.length===0,Se=L=>{U(L)},Ce={entity:"charge_card_payment_history",showNewButtonOnNavbar:!1,showEntityEmailInfoIconOnNavbar:!1,newButtonLabel:Yi.strings.empty,hideSearchBtn:!1,disableSearch:X,disableFilters:X,searchTextBoxStyle:{right:"86px"},moreIconContainerStyle:{paddingRight:l[4]},isSearchOpen:K,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(Xe,{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(Zi,{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:K,hideSearchBtn:!1,scrollableContent:void 0,source:"ChargeCardPaymentHistoryPage",backgroundColor:Y.colors.grey4}),o==="Not-Started"||o==="In-Progress"?t.jsx(Te,{fetchState:o,styles:{margin:"auto"}}):t.jsx(qi,{windowSize:k,children:t.jsx(Oi,{fetchState:o,repaymentListWithAccountInfo:Le,sortConfig:c,onColumnSortConfigChanged:p,onReloadPayments:b,searchText:r,isZeniTenant:g,onRetryPaymentClick:s})})]})},Zi=n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+`,qi=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};