@zeniai/web-cockpit-ui 1.13.96-dev → 1.13.97-dev

package/dist/assets/ChargeCardDetailPage-Kygr13jR-Bjl6Z9f1.js

@@ -0,0 +1,1447 @@
+import{u as Ye,X as Ce,V as st,d3 as dt,fe as Ka,l as Ze,gY as qr,ab as _e,M as he,ff as Xa,j as t,gm as Gr,aW as Kr,q as c,fn as Ja,_ as xe,Y,o as a,bt as Pt,g as p,ij as Qa,r as Z,bO as Xr,ik as Jr,cI as Qr,gd as ei,a as ti,gg as ai,co as ri,C as I,p as ii,F as oi,fF as ni,K as ft,aZ as si,bf as er,a9 as Mt,il as di,im as tr,b5 as ar,av as Vt,eS as ci,aa as rr,ak as li,io as hi,ip as pi,aq as Ot,v as me,ew as ui,ie as mi,ee as ct,fg as ir,e as nt,ao as gi,dj as Ci,bT as fi,bQ as wi,cv as xi,gV as yi,t as ye,eY as or,iq as bi,fh as je,dr as wt,c_ as Si,Q as ha,h as nr,as as $i,ir as vi,eQ as ki,bY as sr,is as Li,w as mt,bC as pa,aR as ji,db as Ii,eB as Di,m as at,fb as Ai,Z as Ti,k as Ri,a6 as Fi,a$ as Ei,it as yt,cW as zi,bm as Pi,iu as dr,iv as cr,f$ as lr,iw as xt,hH as hr,ig as Mi,b$ as Vi,eb as pr,ih as Oi,ii as Hi,c$ as Ni,cq as Bi,ei as Wi,bF as Ui,bG as _i}from"./index-CEwYV-nF.js";import{b as o,n as r,j as pe,f as Zi,k as ur}from"./vendor-CnQcJ2Lu.js";import{f as Yi}from"./NavigationDots-DJkiFidH-EWS9_PIe.js";import{L as qi,H as et,U as ua,M as mr,F as gr,_ as Cr}from"./ChargeCardUtils-BxyMuU6--Bmupo3qZ.js";import{A as Gi,i as Ki,a as Xi,l as Ji,r as Qi,t as eo,n as to}from"./add-to-wallet-DgdBD8_G-DcfyMc0W.js";import{R as ao}from"./CardNumberSubText-BHe1nqr7-BOPjNd8o.js";import{r as fr}from"./mui-C5LQ0bMa.js";import{l as wr}from"./uploadReceipts-Buvz7DfG-B7o_gJnm.js";import"./analytics-CBL_L82S.js";import"./routing-Cpaypegg.js";import"./sentry-HDxG13yk.js";import"./redux-ByjIRbhZ.js";import"./liveblocks-sSQ9JElv.js";import"./crypto-BURQLTgV.js";const xr=he.getLocalizedStrings().spendManagement.chargeCard,ro=({controllerEmails:e,classListFetchState:i,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:h,isDebitCardSetupEnabled:m,isChargeCardSetupEnabled:u,chargeCardDetailView:s,productInformation:x,creditAccountInformation:l,debitAccountInformation:f,creditAccount:w,creditAccountRepayment:n,cardIssuedByRoles:C,cardIssuedByDepartmentName:b,cardHolderRoles:L,cardHolderDepartmentName:S,appleWalletLink:$,googleWalletLink:y,style:g,showDrawerAnimation:D,setWalletType:v,setIsAddToWalletDrawerOpen:O,isDebitCard:T})=>{const z=dt().analytics,{isIPadScreen:G}=hi(),{isAndroidScreen:J}=pi(),U=st(),A=Ze.hasChargeCardAdminLevelAccess(U.loggedInUserRoleMap);return t.jsx(io,{style:g,children:G===!0?t.jsx(zt,{onClick:()=>{et({chargeCardDetailView:s,classListFetchState:i,analytics:z,isDebitCard:T,isChargeCardAdmin:A,cardIssuedByRoles:C,cardIssuedByDepartmentName:b,cardHolderRoles:L,cardHolderDepartmentName:S,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",productInformation:x,creditAccountInformation:l,debitAccountInformation:f,isChargeCardFeatureEnabled:d,creditAccount:w,creditAccountRepayment:n}),window.open($,"_blank")}}):J===!0?t.jsx(Et,{onClick:()=>{et({chargeCardDetailView:s,classListFetchState:i,analytics:z,isDebitCard:T,isChargeCardAdmin:A,cardIssuedByRoles:C,cardIssuedByDepartmentName:b,cardHolderRoles:L,cardHolderDepartmentName:S,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",productInformation:x,creditAccountInformation:l,debitAccountInformation:f,isChargeCardFeatureEnabled:d,creditAccount:w,creditAccountRepayment:n}),window.open(y,"_blank")}}):t.jsxs(t.Fragment,{children:[t.jsx(zt,{onClick:()=>{v("apple"),D.current="slide-in-right-to-left-add-to-wallet",et({chargeCardDetailView:s,classListFetchState:i,analytics:z,isDebitCard:T,isChargeCardAdmin:A,cardIssuedByRoles:C,cardIssuedByDepartmentName:b,cardHolderRoles:L,cardHolderDepartmentName:S,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:d,productInformation:x,creditAccountInformation:l,debitAccountInformation:f,creditAccount:w,creditAccountRepayment:n}),O(!0)}}),t.jsx(Et,{onClick:()=>{v("google"),D.current="slide-in-right-to-left-add-to-wallet",et({chargeCardDetailView:s,classListFetchState:i,analytics:z,isDebitCard:T,isChargeCardAdmin:A,cardIssuedByRoles:C,cardIssuedByDepartmentName:b,cardHolderRoles:L,cardHolderDepartmentName:S,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:d,productInformation:x,creditAccountInformation:l,debitAccountInformation:f,creditAccount:w,creditAccountRepayment:n}),O(!0)}})]})})},Et=({onClick:e})=>{const i=Ye();return t.jsx(ft,{prefixIcon:t.jsx(oo,{}),label:xr.cardDetails.addToGoogleWallet,buttonColors:{borderColor:{default:i.colors.grey1,hover:i.colors.primary,disabled:i.colors.primary},backgroundColor:{default:i.colors.grey5,hover:i.colors.grey5,disabled:i.colors.grey5},textColor:{default:i.colors.primary,hover:i.colors.primary,disabled:i.colors.grey5}},textStyle:{color:i.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":Y("add-to-google-wallet-button")})},zt=({onClick:e})=>{const i=Ye();return t.jsx(ft,{prefixIcon:t.jsx(no,{}),label:xr.cardDetails.addToAppleWallet,buttonColors:{borderColor:{default:i.colors.grey1,hover:i.colors.primary,disabled:i.colors.primary},backgroundColor:{default:i.colors.grey5,hover:i.colors.grey5,disabled:i.colors.grey5},textColor:{default:i.colors.primary,hover:i.colors.primary,disabled:i.colors.grey5}},textStyle:{color:i.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":Y("add-to-apple-wallet-button")})},io=r.div`
+  margin-top: ${a.sp4};
+  display: flex;
+  justify-content: center;
+  gap: ${a.sp5};
+`,oo=r(to)`
+  height: ${a.sp4};
+  width: ${a.sp5};
+`,no=r(eo)`
+  height: ${a.sp4};
+  width: ${a.sp5};
+`,so=[p.brandColorSapphire,p.brandColorJade,p.graphColor01,p.graphColor08,p.graphColor12,p.graphColor15,p.graphColor16Dark,p.graphColor23Dark,p.graphColor32Dark,p.graphColor34Dark,p.brandColorOpalDark,p.brandColorRuby],co=he.getLocalizedStrings().spendManagement.chargeCard,lo=({isColorPaletteVisible:e,hasBorderShadow:i,leftTransitionValue:d,colorInState:h,styles:m,colorPaletteTitleStyles:u,ColorListStyles:s,coloredCircleStyles:x,closeStyles:l,tickStyles:f,toggleColorPaletteVisibility:w,handleColorClick:n})=>t.jsxs(ho,{showColorPalette:e,style:m,hasBorderShadow:i,leftTransitionValue:d,children:[t.jsxs(uo,{style:u,children:[t.jsx(mo,{children:co.cardDetails.cardTheme}),t.jsx(go,{style:l,"data-testid":Y("close-color-palette"),onClick:C=>{C.stopPropagation(),w(!e)}})]}),t.jsx(po,{style:s,children:so.map((C,b)=>t.jsx(fo,{style:x,coreColor:C,onMouseEnter:()=>n(new _e(C),!1),onMouseLeave:()=>h!=null?n(new _e(h),!1):null,"data-testid":Y("color-palette-item-cards",b.toString()),onClick:()=>n(new _e(C),!0),children:new _e(C).toString()===h?.toString()?t.jsx(Co,{style:f}):null},C))})]}),ho=r.div`
+  display: flex;
+  top: ${a.sp1};
+  max-width: 78%;
+  left: ${e=>e.showColorPalette?e.hasBorderShadow?a.sp1:a.sp0:`${e.leftTransitionValue}px`};
+  transition: left 0.3s ease-in;
+  flex-direction: column;
+  background: ${p.neutralGrey5Light};
+  border-top-left-radius: ${a.sp1};
+  border-bottom-left-radius: ${a.sp1};
+  position: absolute;
+  height: ${`calc(100% - ${a.sp2})`};
+  z-index: 1;
+`,po=r.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: ${a.sp0} 38px ${a.sp0} 31px;
+`,uo=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${a.sp5} ${a.sp5} ${a.sp2} ${a.sp5};
+`,mo=r(me)`
+  color: ${p.brandColorOnyx};
+`,go=r(Fi)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,Co=r(Ei)`
+  width: ${a.sp3};
+  color: ${p.neutralGrey5Light};
+`,fo=r.div`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  display: flex;
+  background: ${e=>e.coreColor};
+  border-radius: 50%;
+  margin: ${a.sp2};
+  justify-content: center;
+  align-items: center;
+`,{spendManagement:wo,common:We,dateFormat:xo}=he.getLocalizedStrings(),Ne=wo.chargeCard,$e={secretCardNumberWrapperWidth:280,secretCVVWrapperHeight:30,secretCVVWrapperWidth:c[7],cardNumberCopiedSectionTop:54,cvvCopiedSectionTop:34,maskedCardNumberMarginTop:new I(-2,-2,-2,c[0]),expiryCopySectionTop:34,cardNumberCopyBtnTop:21},ma={CardInfoTitleSize:new I(Z.extraSmallRegular.fontSizeValue,Z.smallRegular.fontSizeValue),CardInfoTitleLineHeight:new I(18,18,18,21)},It=e=>t.jsxs(Mo,{style:{...e},children:[t.jsx(Po,{}),t.jsx(Vo,{style:{background:p.blackColor,color:p.primaryDark,padding:`2px ${a.sp2}`,borderRadius:a.sp1},children:We.copyToClipBoard.copied})]}),ga=({isSandboxEnv:e,sourceId:i,showSecretInfo:d,secretRevealed:h,vgsVaultId:m,controllerEmails:u,isChargeCardFeatureEnabled:s,productInformation:x,cashbackInformation:l,creditAccountInformation:f,debitAccountInformation:w,chargeCardCashbackDetailState:n,creditAccount:C,creditAccountRepayment:b,isDebitCard:L,depositAccountLimitFetchState:S,isCardDetailErrored:$,isCardColorUpdating:y,cardDetailsFetchState:g,isCardColorUndefined:D,cardInfoTitleStyles:v,styles:O,cvvSecStyles:T,chargeCard:z,token:G,setSecretRevealed:J,setIsCardDetailErrored:U,setCardDetailsFetchState:A,onFireOnClickAnalytics:H})=>{const Q=dt().analytics,[,re]=Ka(),F=Ce(),[K,_]=o.useState(!1),[oe,ee]=o.useState(!1),[P,ae]=o.useState(!1),N=st(),ie=Ze.hasChargeCardAdminLevelAccess(N.loggedInUserRoleMap),[X]=Qa("https://js.verygoodvault.com/vgs-show/2.0.0/show.js"),j=i==="addToWalletDrawer"?.75:F==="small"?.85:1,q=e?"sandbox":"live";o.useEffect(()=>{if(X&&z!=null&&d&&G!=null&&!h){const E=window.VGSShow.create(m).setEnvironment(q),k=z.cardProviderID,V=E.request({name:"data-text",method:"GET",path:"/cards/"+k+"/secure-data/cvv2",headers:{Authorization:"Bearer "+G},htmlWrapper:"text",jsonPathSelector:"data.attributes.cvv2"});A({cvv:!0,number:!0}),V.render(`#SecretCvv-${i}`,{"@font-face":{"font-family":mt["PT Mono"],"font-style":"normal","font-weight":pa.regular,"font-display":"swap",src:'local("PT Mono"), local("PTMono-Regular"), url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")'},"font-family":mt["PT Mono"],opacity:.7,color:p.brandColorOnyx,fontSize:`${j*Z.h6Regular.fontSizeValue}px`,fontWeight:Z.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:`${j*Z.h6Regular.lineHeightValue}px`}),V.on("requestSuccess",()=>{J(!0),U(!1),A({...g,cvv:!1})}),V.on("requestFail",()=>{U(!0),A({...g,cvv:!1});const ne=document.getElementById(`SecretCvv-${i}`);for(;ne?.hasChildNodes()===!0;)ne.removeChild(ne.children[0])}),E.copyFrom(V,{text:We.strings.empty},ne=>{ne==="success"?(ee(!0),H("CVV copied"),n.fetchState==="Completed"&&(!s||C.fetchState==="Completed"&&b.fetchState==="Completed")&&(!(L&&ie)||S==="Completed")&&Q.trackCardsCopyIconClick(u,x,"Cards Detail","Copy","copied","CVV","",l,f,w)):ee(!1)}).render(`#CvvCopyBtn-${i}`,{cursor:"pointer",height:`${j*$e.secretCVVWrapperHeight}px`,width:`${j*$e.secretCVVWrapperWidth}px`});const B=E.request({name:"data-text",method:"GET",path:"/cards/"+k+"/secure-data/pan",headers:{Authorization:"Bearer "+G},htmlWrapper:"text",jsonPathSelector:"data.attributes.pan",serializers:[E.SERIALIZERS.replace("(\\d{4})(\\d{4})(\\d{4})(\\d{4})","$1 $2 $3 $4")]});B.render(`#SecretCardNumber-${i}`,{"@font-face":{"font-family":mt["PT Mono"],"font-style":"normal","font-weight":pa.regular,"font-display":"swap",src:'local("PT Mono"), local("PTMono-Regular"), url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")'},"font-family":mt["PT Mono"],opacity:.7,color:p.brandColorOnyx,fontSize:`${j*Z.h6Regular.fontSizeValue}px`,fontWeight:Z.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:`${j*Z.h6Regular.lineHeightValue}px`}),B.on("requestSuccess",()=>{J(!0),U(!1),A({...g,number:!1})}),B.on("requestFail",()=>{U(!0),A({...g,number:!1});const ne=document.getElementById(`SecretCardNumber-${i}`);for(;ne?.hasChildNodes()===!0;)ne.removeChild(ne.children[0])}),E.copyFrom(B,{text:We.strings.empty,serializers:[E.SERIALIZERS.replace(We.strings.space,We.strings.empty)]},ne=>{ne==="success"?(_(!0),H("card number copied"),n.fetchState==="Completed"&&(!s||C.fetchState==="Completed"&&b.fetchState==="Completed")&&(!(L&&ie)||S==="Completed")&&Q.trackCardsCopyIconClick(u,x,"Cards Detail","Copy","copied","Card Number","",l,f,w)):_(!1)}).render(`#CardNumberCopyBtn-${i}`,{cursor:"pointer",height:`${j*Z.h6Regular.lineHeightValue}px`,width:`${j*$e.secretCardNumberWrapperWidth}px`})}},[X,z,d,G,h]),o.useEffect(()=>{if(d===!1){const E=document.getElementById(`SecretCvv-${i}`);for(;E?.hasChildNodes()===!0;)E.removeChild(E.children[0]);const k=document.getElementById(`CvvCopyBtn-${i}`);for(;k?.hasChildNodes()===!0;)k.removeChild(k.children[0]);const V=document.getElementById(`SecretCardNumber-${i}`);for(;V?.hasChildNodes()===!0;)V.removeChild(V.children[0]);const B=document.getElementById(`CardNumberCopyBtn-${i}`);for(;B?.hasChildNodes()===!0;)B.removeChild(B.children[0])}},[i,d]),o.useEffect(()=>{K===!0&&setTimeout(()=>{_(!1)},800),oe===!0&&setTimeout(()=>{ee(!1)},800),P===!0&&setTimeout(()=>{ae(!1)},800)},[K,oe,P]);const R=z!=null?Ze.dateFromYearMonthDate(z.validThru.year,z.validThru.month-1).format(xo.visual.MMSlashYYFormat):We.strings.empty,se=E=>{d===!0&&(g.cvv!==!0||g.number!==!0)&&(H("validity copied"),E!=null&&n.fetchState==="Completed"&&(!s||C.fetchState==="Completed"&&b.fetchState==="Completed")&&(!(L&&ie)||S==="Completed")&&Q.trackCardsCopyIconClick(u,x,"Cards Detail","Copy","copied","Valid Thru",R,l,f,w),re(R),ae(!0))};return t.jsxs(jo,{style:O,children:[t.jsxs(Io,{children:[t.jsx(Dt,{style:v,windowSize:F,children:Ne.cardDetails.cardNumber}),t.jsx(Do,{sourceId:i,scaleFactor:j,showSecretInfo:d&&(g.number===!1||g.cvv===!1),isCardDetailFetching:g.number===!0||g.cvv===!0||D||y,windowSize:F,children:`${Ne.cardDetails.cardNumberHideout}
+          ${z?.accountLast4??We.strings.empty}`}),t.jsxs(yo,{secretRevealed:h,scaleFactor:j,showSecretInfo:d&&g.cvv===!1&&g.number===!1,sourceId:i,isCardDetailErrored:$,children:[t.jsx(bo,{sourceId:i,scaleFactor:j,secretRevealed:h,id:`SecretCardNumber-${i}`}),t.jsx(Lo,{secretRevealed:h,scaleFactor:j,id:`CardNumberCopyBtn-${i}`,sourceId:i}),K===!0?t.jsx(It,{top:j*$e.cardNumberCopiedSectionTop}):null]})]}),t.jsxs(Ao,{children:[t.jsxs(Fo,{children:[t.jsx(Dt,{style:v,windowSize:F,children:Ne.cardDetails.expiry}),t.jsxs(vo,{secretRevealed:d&&(g.cvv===!1||g.number===!1),children:[h&&d&&g.cvv===!1&&g.number===!1?t.jsx(zo,{sourceId:i,scaleFactor:j,windowSize:F,secretRevealed:h&&d,"data-testid":Y("expiry-date-copy"),onClick:E=>{E.stopPropagation(),se(z)},children:h&&d&&g.cvv===!1&&g.number===!1?R:Ne.cardDetails.expiryHideOut}):t.jsx(Eo,{sourceId:i,windowSize:F,scaleFactor:j,isCardDetailFetching:g.cvv===!0||g.number===!0||D||y,children:Ne.cardDetails.expiryHideOut}),P===!0?t.jsx(It,{top:j*$e.expiryCopySectionTop,width:"auto"}):null]})]}),t.jsxs(To,{style:T,children:[t.jsx(Dt,{style:v,windowSize:F,children:Ne.cardDetails.cvv}),t.jsx(Ro,{sourceId:i,scaleFactor:j,showSecretInfo:d&&g.cvv===!1&&g.number===!1,isCardDetailFetching:g.number===!0||g.cvv===!0||D||y,windowSize:F,children:Ne.cardDetails.cvvHideOut}),t.jsxs(So,{secretRevealed:h,sourceId:i,showSecretInfo:d&&g.cvv===!1&&g.number===!1,isCardDetailErrored:$,children:[t.jsx($o,{scaleFactor:j,secretRevealed:h,sourceId:i,id:`SecretCvv-${i}`}),t.jsx(ko,{windowSize:F,scaleFactor:j,secretRevealed:h,id:`CvvCopyBtn-${i}`,sourceId:i}),oe===!0?t.jsx(It,{top:j*$e.cvvCopiedSectionTop,width:"auto"}):null]})]})]})]})},yo=r.div`
+  display: ${e=>e.showSecretInfo?"block":"none"};
+  height: ${e=>e.secretRevealed?"unset":a.sp0};
+  width: ${e=>e.secretRevealed?e.scaleFactor*$e.secretCardNumberWrapperWidth:c[0]}px;
+  overflow: hidden;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":p.neutralGrey5Light};
+    border-radius: ${a.sp1};
+  }
+`,bo=r.div`
+  min-height: ${e=>e.secretRevealed?e.scaleFactor*Z.h6Regular.lineHeightValue:c[0]}px;
+  height: ${e=>e.secretRevealed?e.scaleFactor*Z.h6Regular.lineHeightValue:c[0]}px;
+  width: ${e=>e.secretRevealed?"100%":a.sp0};
+  overflow: hidden;
+  position: relative;
+`,So=r.div`
+  display: ${e=>e.showSecretInfo?"flex":"none"};
+  height: ${e=>e.secretRevealed?"unset":a.sp0};
+  min-height: ${e=>e.secretRevealed?"unset":a.sp0};
+  width: ${e=>e.secretRevealed?$e.secretCVVWrapperWidth:c[0]}px;
+  position: relative;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":p.neutralGrey5Light};
+    border-radius: ${a.sp1};
+  }
+`,$o=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*Z.h6Regular.lineHeightValue:c[0]}px;
+  width: ${e=>e.secretRevealed?$e.secretCVVWrapperWidth*e.scaleFactor:a.sp0};
+  overflow: hidden;
+`,vo=r.div`
+  position: relative;
+  padding: ${a.sp0} ${a.sp1};
+  &:hover {
+    background: ${e=>e.secretRevealed?p.neutralGrey5Light:"transparent"};
+    border-radius: ${a.sp1};
+  }
+`,ko=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*Z.h6Regular.lineHeightValue:c[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":a.sp0};
+  position: absolute;
+  top: ${a.sp0};
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,Lo=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*Z.h6Regular.lineHeightValue:c[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":a.sp0};
+  position: absolute;
+  top: ${e=>e.scaleFactor*$e.cardNumberCopyBtnTop}px;
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,jo=r.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${a.sp4} ${a.sp0} ${a.sp4} ${a.sp5};
+  width: 75%;
+  gap: ${a.sp4};
+`,Io=r.div`
+  position: relative;
+  width: max-content;
+`,Dt=r(me)`
+  padding-left: ${a.sp1};
+  color: ${p.brandColorPearl};
+  position: relative;
+  font-size: ${e=>ma.CardInfoTitleSize.valuePx(e.windowSize)};
+  line-height: ${e=>ma.CardInfoTitleLineHeight.valuePx(e.windowSize)};
+`,Do=r(yt)`
+  display: ${e=>e.showSecretInfo===!0?"none":"block"};
+  padding-left: ${a.sp1};
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  margin-top: ${e=>$e.maskedCardNumberMarginTop.valuePx(e.windowSize)};
+  margin-left: -2px;
+  font-size: ${e=>e.scaleFactor*Z.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*Z.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,Ao=r.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: ${a.sp4};
+`,To=r.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${a.sp5};
+`,Ro=r(yt)`
+  display: ${e=>e.showSecretInfo?"none":"block"};
+  padding-left: ${a.sp1};
+  opacity: 0.7;
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  font-size: ${e=>e.scaleFactor*Z.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*Z.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,Fo=r.div`
+  display: flex;
+  flex-direction: column;
+`,Eo=r(yt)`
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  font-size: ${e=>e.scaleFactor*Z.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*Z.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,zo=r(yt)`
+  display: ${e=>e.secretRevealed?"block":"none"};
+  color: ${e=>e.theme.colors.brandColorOnyx};
+  border-radius: ${a.sp1};
+  opacity: 0.7;
+  padding-left: ${e=>e.secretRevealed===!0?a.sp0:a.sp1};
+  font-size: ${e=>e.scaleFactor*Z.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*Z.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,Po=r(ct)`
+  height: ${a.sp3};
+  width: ${a.sp3};
+  color: ${p.success};
+`,Mo=r.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: ${a.sp1};
+  width: 100%;
+  justify-content: center;
+  z-index: 1;
+`,Vo=r(me)`
+  color: ${p.primaryDark};
+  padding: 2px ${a.sp2};
+  background-color: ${p.blackColor};
+`,{common:Oo,spendManagement:{chargeCard:{cardDetails:Se}}}=he.getLocalizedStrings(),ue={chargeCardWidth:384,chargeCardHeight:240,cardLoadingShineWidth:200,cardLoadingShineHeight:240,zeniLogoWidth:c[6],zeniLogoHeight:c[6],visaLogoWidth:c[6],visaLogoHeight:13,cardTintIconWidth:277,cardTintIconHeight:242,colorPaletteLeftTransitionValue:-350,rightSectionWidth:384,rightSectionHeight:240,cardContainerContentGap:new I(c[4],c[4],c[4],c[3])},yr=({chargeCardDetailView:e,productInformation:i,cashbackInformation:d,creditAccountInformation:h,debitAccountInformation:m,secretRevealed:u,isOwnCard:s,vgsVaultId:x,showSecretInfo:l,controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,chargeCardCashbackDetailState:L,creditAccount:S,creditAccountRepayment:$,isShowingInDrawer:y,isSandboxEnv:g,isCardDetailErrored:D,signedInUserToken:v,selectedColor:O,cardDetailsFetchState:T,setCardDetailsFetchState:z,setIsCardDetailErrored:G,setShowSecretInfo:J,setSecretRevealed:U,setShowPhoneNumberForOtp:A,isCardDetailFetching:H,handleColorCodeClick:Q,onFireOnClickAnalytics:re})=>{const[F,K]=o.useState(!1),_=e.chargeCard?.type.code??"business_virtual_credit_card",{isMobileOrTabletScreen:oe}=Xa(),ee=Ce(),P=y?.75:ee==="small"?.85:1,ae=oe?Se.tapCardCopyText:Se.scanNowAndAddToWallet,N=oe?Se.tapCardCopyText:t.jsxs(No,{children:[t.jsx(nn,{}),Se.clickTheCardToFetchDetailsText]}),ie=ee==="small"?Se.tapCardCopyText:Se.clickTheCardToCopyDetailsText,X=ee==="small"?Se.tapCardCopyText:Se.clickTheCardToFetchDetailsText,j=y?ae:ie,q=y?N:X,R=H(T)||e.updateFetchState.fetchState==="In-Progress",se=(T.cvv!==!0||T.number!==!0)&&s,E=!!e.chargeCard?.type.code.includes("debit");return t.jsxs(Yo,{windowSize:ee,scaleFactor:P,children:[t.jsxs(qo,{children:[u&&y?t.jsxs(t.Fragment,{children:[t.jsx(tn,{}),t.jsx(an,{}),t.jsx(rn,{}),t.jsx(on,{})]}):null,_.includes("virtual")?t.jsxs(Ko,{isShowingInDrawer:y,isOwnCard:s,scaleFactor:P,bgColor:O?.toString(),showColorPalette:F,isDebitCard:E,"data-testid":Y("virtual-charge-card-detail"),onClick:()=>{F===!1&&s===!0&&H(T)===!1&&ua({signedInUserToken:v,showSecretInfo:l,setShowPhoneNumberPopup:A,onFireOnClickAnalytics:re,setShowSecretInfo:J})},enableClick:se,cardDetailsFetchState:R||e.chargeCard?.cardColorCode===void 0,children:[t.jsx(wa,{scaleFactor:P,shouldAppear:R||e.chargeCard?.cardColorCode===void 0}),t.jsx(lo,{leftTransitionValue:P*ue.colorPaletteLeftTransitionValue,hasBorderShadow:!1,tickStyles:{width:"12px",height:"12px"},colorInState:e.chargeCard?.cardColorCode!=null?new _e(e.chargeCard.cardColorCode):void 0,styles:{height:"100%",maxWidth:"78%",top:y?"unset":a.sp0,left:F?a.sp0:`${P*ue.colorPaletteLeftTransitionValue}px`},coloredCircleStyles:{width:a.sp4,height:a.sp4,margin:"unset"},colorPaletteTitleStyles:{padding:`${a.sp5} ${a.sp7} ${a.sp3} ${a.sp5}`},closeStyles:{width:a.sp3,height:a.sp3},ColorListStyles:{gap:a.sp3},isColorPaletteVisible:F,toggleColorPaletteVisibility:k=>{K(k)},handleColorClick:(k,V)=>{Q(k,V),V&&K(!1)}}),t.jsx(en,{scaleFactor:P}),t.jsx(ga,{productInformation:i,cashbackInformation:d,creditAccountInformation:h,debitAccountInformation:m,secretRevealed:u,setSecretRevealed:U,onFireOnClickAnalytics:re,isCardColorUndefined:e.chargeCard?.cardColorCode==null,isCardColorUpdating:e.updateFetchState.fetchState==="In-Progress",isSandboxEnv:g,cardDetailsFetchState:T,setCardDetailsFetchState:z,isCardDetailErrored:D,setIsCardDetailErrored:G,chargeCard:e.chargeCard,vgsVaultId:x,showSecretInfo:l,creditAccountRepayment:$,token:v?.token,isDebitCard:E,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,creditAccount:S,chargeCardCashbackDetailState:L,cardInfoTitleStyles:{...Z.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:y?"addToWalletDrawer":"cardDetail"}),t.jsxs(xa,{children:[t.jsxs(Jo,{children:[t.jsx(ya,{scaleFactor:P}),t.jsx(Zo,{onClick:k=>{k.stopPropagation(),s&&K(!F)},"data-testid":Y("card-color-selector"),children:s?t.jsx(Pt,{enterDelay:600,title:Se.cardColours,placement:"left",children:t.jsx(Ca,{isShowingInDrawer:y})}):t.jsx(Ca,{isShowingInDrawer:y})})]}),t.jsx(Bo,{scaleFactor:P})]})]}):t.jsxs(sn,{scaleFactor:P,enableClick:se,isOwnCard:s,isShowingInDrawer:y,onClick:()=>{s===!0&&H(T)===!1&&ua({signedInUserToken:v,showSecretInfo:l,setShowPhoneNumberPopup:A,onFireOnClickAnalytics:re,setShowSecretInfo:J})},"data-testid":Y("physical-charge-card-detail"),children:[t.jsx(wa,{scaleFactor:P,shouldAppear:R}),t.jsxs(dn,{flipCard:u,children:[t.jsx(cn,{children:t.jsx(tr,{scaleFactor:P,isClickable:se,isLoading:R,isDebitCard:E})}),l?t.jsxs(ln,{isDebitCard:E,children:[t.jsx(ga,{productInformation:i,cashbackInformation:d,creditAccountInformation:h,debitAccountInformation:m,secretRevealed:u,setSecretRevealed:U,onFireOnClickAnalytics:re,isCardColorUndefined:e.chargeCard?.cardColorCode==null,isCardColorUpdating:e.updateFetchState.fetchState==="In-Progress",isSandboxEnv:g,cardDetailsFetchState:T,setCardDetailsFetchState:z,isCardDetailErrored:D,setIsCardDetailErrored:G,chargeCard:e.chargeCard,vgsVaultId:x,showSecretInfo:l,token:v?.token,isDebitCard:E,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,creditAccount:e.creditAccount,creditAccountRepayment:$,chargeCardCashbackDetailState:L,cardInfoTitleStyles:{...Z.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:y?"addToWalletDrawer":"cardDetail"}),t.jsx(xa,{children:t.jsx(Qo,{children:t.jsx(ya,{scaleFactor:P})})})]}):null]})]})]}),s===!0&&!R?T.cvv===!0&&T.number===!0?t.jsx(Xo,{children:Oo.loading}):D?t.jsx(Ho,{}):t.jsx(fa,{children:u?j:q}):R?t.jsx(fa,{children:Se.loading}):null]})},Ho=()=>t.jsxs(_o,{children:[t.jsx(Wo,{}),t.jsx(Uo,{children:Se.failedToFetchCardWebText})]}),No=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp2};
+`,Bo=r(Ii)`
+  width: ${e=>e.scaleFactor*ue.visaLogoWidth}px;
+  height: ${e=>e.scaleFactor*ue.visaLogoHeight}px;
+`,Wo=r(zi)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${p.alert};
+`,Uo=r(me)`
+  color: ${p.alert};
+`,_o=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp1};
+`,Zo=r.div`
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,Ca=r.div`
+  // These are weird number because final requirement is 9 and 12px circle.
+  width: ${e=>e.isShowingInDrawer?7:10}px;
+  height: ${e=>e.isShowingInDrawer?7:10}px;
+  border: 1px solid ${p.backgroundThemeLight};
+  border-radius: 50%;
+`,Yo=r.div`
+  min-height: ${e=>`calc(${e.scaleFactor*ue.rightSectionHeight}px + ${a.sp2})`};
+  min-width: ${e=>`calc(${e.scaleFactor*ue.rightSectionWidth}px + ${a.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>ue.cardContainerContentGap.valuePx(e.windowSize)};
+`,fa=r(me)`
+  color: ${e=>e.theme.colors.primary};
+`,qo=r.div`
+  position: relative;
+`,Go=ur`
+	0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(180%);
+  }
+`,wa=r.div`
+  z-index: 1;
+  display: ${e=>e.shouldAppear?"block":"none"};
+  content: "";
+  width: ${e=>e.scaleFactor*ue.cardLoadingShineWidth}px;
+  height: ${e=>e.scaleFactor*ue.cardLoadingShineHeight}px;
+  position: absolute;
+  transform: translateX(-180%);
+  animation: ${Go} 1.5s infinite;
+  background: ${pe`linear-gradient(to right, transparent 0%, ${p.backgroundThemeLight} 50%, transparent 100%)`};
+`,xa=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 25%;
+  padding: ${a.sp4} ${a.sp0};
+`,Ko=r.div`
+  background: ${e=>e.cardDetailsFetchState?p.chargeCardFaded:e.bgColor??(e.isDebitCard?e.theme.colors.graphColor15:e.theme.colors.brandColorJade)};
+  border-radius: ${a.sp2};
+  width: ${e=>e.scaleFactor*ue.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*ue.chargeCardHeight}px;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/PlasticCardPatternSmall.svg);
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  justify-content: space-between;
+
+  ${e=>e.showColorPalette&&`box-shadow: ${a.sp0} ${a.sp0} ${a.sp2} ${a.sp1} ${e.theme.colors.dropShadowNormal};
+  `}
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?pe`
+            box-shadow: 1px 3px ${a.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${a.sp1} solid ${p.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?pe`
+            box-shadow: ${a.sp0} ${a.sp0} ${a.sp2} ${a.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${a.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,Xo=r(me)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,ya=r(ji)`
+  height: ${e=>e.scaleFactor*ue.zeniLogoHeight}px;
+  width: ${e=>e.scaleFactor*ue.zeniLogoWidth}px;
+  color: ${p.neutralGrey5Light};
+`,Jo=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+`,Qo=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${a.sp4};
+`,en=r(Li)`
+  position: absolute;
+  width: ${e=>e.scaleFactor*ue.cardTintIconWidth}px;
+  height: ${e=>e.scaleFactor*ue.cardTintIconHeight}px;
+  top: -1px;
+`,tn=r(Ki)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${a.sp3};
+  top: -${a.sp3};
+`,an=r(Xi)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${a.sp3};
+  top: -${a.sp3};
+`,rn=r(Ji)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${a.sp3};
+  bottom: -${a.sp3};
+`,on=r(Qi)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${a.sp3};
+  bottom: -${a.sp3};
+`,nn=r(sr)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${a.sp3};
+  height: ${a.sp3};
+`,sn=r.div`
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  width: ${e=>e.scaleFactor*ue.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*ue.chargeCardHeight}px;
+  overflow: hidden;
+  position: relative;
+  border-radius: ${a.sp2};
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?pe`
+            box-shadow: 1px 3px ${a.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${a.sp1} solid ${p.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?pe`
+            box-shadow: ${a.sp0} ${a.sp0} ${a.sp2} ${a.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${a.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,dn=r.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  transform: ${e=>e.flipCard?"rotateY(180deg)":"rotateY(0deg)"};
+`,cn=r.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+`,ln=r.div`
+  position: absolute;
+  background: ${e=>e.isDebitCard?e.theme.colors.brandColorJadeDark:e.theme.colors.brandColorJade};
+  width: inherit;
+  height: inherit;
+  border-radius: 6px;
+  display: flex;
+  transition-timing-function: ease-in-out;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/plastic-card-pattern-right-small.svg");
+  border-radius: ${a.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background-repeat: no-repeat;
+  background-position-x: right;
+  background-position-y: bottom;
+  transform: rotateY(180deg);
+`,ge={contentContainerPadding:new I(c[3],c[4],c[8],c[8]),rightSectionWidth:new I(343,343,343,384),rightSectionHeight:new I(214,214,214,240),cardContainerContentGap:new I(c[2],c[2],c[2],c[3]),remainingAmountContainerGap:new I(c[1],c[1]),leftRightSectionGap:new I(c[0],54,54,57),cardBalanceSectionMarginBottom:new I(c[4],c[4]),barRadius:new I(2,c[2]),topSectionPaddingBottom:new I(c[4],19),rightSectionGap:new I(c[4],c[3]),addressSectionHeight:new I(109,74),addressSectionGap:new I(c[2],c[4]),navigationMarginBottom:new I(c[4],c[0]),addressValueGap:new I(c[0],c[1]),ownerWebMinWidth:new I(110,187)},Ht={remainingAmount:new ha("largeRegular","largeMedium"),spentAmount:new ha("h5Regular","h5Regular")},{common:Ve,dateFormat:ot,spendManagement:hn}=he.getLocalizedStrings(),Oe=hn.chargeCard,pn=({chargeCardDetailView:e,spent:i,controllerEmails:d,chargeCardCashbackDetailState:h,isChargeCardFeatureEnabled:m,isDebitCardFeatureEnabled:u,isDebitCardSetupEnabled:s,isChargeCardSetupEnabled:x,creditAccount:l,creditAccountRepayment:f,productInformation:w,cashbackInformation:n,creditAccountInformation:C,debitAccountInformation:b,cardIssuedByRoles:L,cardIssuedByDepartmentName:S,cardHolderRoles:$,cardHolderDepartmentName:y,classListFetchState:g,cardOwnerName:D,secretRevealed:v,appleWalletLink:O,googleWalletLink:T,isCardNotPending:z,isOwnerNameCopied:G,isAddressCopied:J,addressToShow:U,isOwnCard:A,vgsVaultId:H,showSecretInfo:Q,isSandboxEnv:re,isCardDetailErrored:F,signedInUserToken:K,selectedColor:_,showUpdateSpendLimitAction:oe,setShowPhoneNumberPopup:ee,setShowChangeSpendLimitPopup:P,cardDetailsFetchState:ae,setCardDetailsFetchState:N,setIsCardDetailErrored:ie,setShowSecretInfo:X,setSecretRevealed:j,isCardDetailFetching:q,handleColorCodeClick:R,onFireOnClickAnalytics:se,onOwnerNameCopyClick:E,onAddressCopyClick:k,isDebitCard:V})=>{const B=Ce(),ne=dt().analytics,Ie=e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate!=null?e.chargeCardConfig.rePaymentInfo.cardLimitResetDate.format(ot.visual.MMMDFormat):Ze.dateNow().startOf("month").add(1,"month").format(ot.visual.MMMDFormat),De=e.chargeCard!=null?Math.round(i.amount*100/e.chargeCard.limit.amount):0,{isIPhoneScreen:Te}=di(),He=e.chargeCard?.type.code==="business_physical_credit_card"&&(e.chargeCard?.status.code==="inactive"||e.chargeCard?.status.code==="request_on_hold"),Re=st(),te=Ze.hasChargeCardAdminLevelAccess(Re?.loggedInUserRoleMap);return t.jsxs(In,{windowSize:B,children:[t.jsxs(jn,{windowSize:B,children:[t.jsxs(Dn,{windowSize:B,children:[t.jsx(fn,{children:Ve.texts.spent}),t.jsx(va,{children:t.jsx(An,{windowSize:B,children:xe("0,0.[00]",i)})}),t.jsx(Vn,{windowSize:B,children:t.jsx(Hn,{style:{width:`${De}%`,borderRadius:a.sp1}})}),e.chargeCard!=null?t.jsxs(va,{children:[t.jsxs(On,{children:[t.jsxs(gn,{windowSize:B,children:[t.jsx(ka,{windowSize:B,children:xe("0,0.[00]",e.chargeCard.available)}),t.jsx(La,{windowSize:B,children:Ve.texts.remaining})]}),oe?t.jsxs(Rn,{windowSize:B,children:[t.jsx(Fn,{children:Oe.updateSpendLimitPopup.unlockSpending}),t.jsx(En,{onClick:()=>{mn({chargeCardDetailView:e,classListFetchState:g,isChargeCardFeatureEnabled:m,creditAccount:l,creditAccountRepayment:f,isDebitCard:V,productInformation:w,creditAccountInformation:C,debitAccountInformation:b,controllerEmails:d,cardIssuedByRoles:L,cardIssuedByDepartmentName:S,cardHolderRoles:$,cardHolderDepartmentName:y,analytics:ne}),P(!0)},"data-testid":Y("update-spend-limit-button"),children:Oe.updateSpendLimitPopup.updateSpendLimit})]}):null]}),t.jsxs(Tn,{windowSize:B,children:[t.jsxs(wn,{children:[t.jsx(ka,{windowSize:B,children:xe("0,0.[00]",e.chargeCard.limit)}),t.jsx(La,{windowSize:B,children:Oe.cardList.slashMonth})]}),e.chargeCard.status.code!=="request_on_hold"?t.jsxs(zn,{children:[t.jsx(Pn,{children:Ve.texts.limitReset}),t.jsx(Mn,{children:Ie})]}):null]})]}):null]}),t.jsx(un,{chargeCardDetailView:e,classListFetchState:g,cardOwnerName:D,addressToShow:U,isAddressCopied:J,isOwnerNameCopied:G,onOwnerNameCopyClick:E,onAddressCopyClick:k})]}),t.jsx(kn,{windowSize:B,isOwnCard:A,children:B==="small"&&!A?null:t.jsxs(t.Fragment,{children:[t.jsx(Ln,{windowSize:B,children:He?t.jsx(tr,{}):t.jsx(yr,{chargeCardDetailView:e,productInformation:w,cashbackInformation:n,creditAccountInformation:C,debitAccountInformation:b,creditAccount:e.creditAccount,setShowSecretInfo:X,secretRevealed:v,isOwnCard:A,isShowingInDrawer:!1,vgsVaultId:H,showSecretInfo:Q,isSandboxEnv:re,controllerEmails:d,isChargeCardFeatureEnabled:m,isDebitCardFeatureEnabled:u,isDebitCardSetupEnabled:s,isChargeCardSetupEnabled:x,chargeCardCashbackDetailState:h,isCardDetailErrored:F,signedInUserToken:K,selectedColor:_,cardDetailsFetchState:ae,setCardDetailsFetchState:N,setIsCardDetailErrored:ie,setSecretRevealed:j,isCardDetailFetching:q,handleColorCodeClick:R,onFireOnClickAnalytics:se,setShowPhoneNumberForOtp:ee,creditAccountRepayment:f})}),A?null:t.jsx(Cn,{children:Oe.cardDetails.adminsCannotAccess}),B==="small"&&A&&z&&V===!1?Te?t.jsx(zt,{onClick:()=>{et({chargeCardDetailView:e,classListFetchState:g,analytics:ne,isDebitCard:V,isChargeCardAdmin:te,productInformation:w,creditAccountInformation:C,debitAccountInformation:b,cardIssuedByRoles:L,cardIssuedByDepartmentName:S,cardHolderRoles:$,cardHolderDepartmentName:y,controllerEmails:d,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:m,creditAccount:l,creditAccountRepayment:f}),window.open(O,"_blank")}}):t.jsx(Et,{onClick:()=>{et({chargeCardDetailView:e,classListFetchState:g,analytics:ne,isDebitCard:V,isChargeCardAdmin:te,productInformation:w,creditAccountInformation:C,debitAccountInformation:b,cardIssuedByRoles:L,cardIssuedByDepartmentName:S,cardHolderRoles:$,cardHolderDepartmentName:y,controllerEmails:d,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:m,creditAccount:l,creditAccountRepayment:f}),window.open(T,"_blank")}}):null]})})]})},un=({chargeCardDetailView:e,classListFetchState:i,cardOwnerName:d,addressToShow:h,isOwnerNameCopied:m,isAddressCopied:u,onOwnerNameCopyClick:s,onAddressCopyClick:x})=>{const l=Ce(),f=Ye(),[w,n]=o.useState(0),[C,b]=o.useState(!0),[L,S]=o.useState(!1),[$,y]=o.useState(!1),[g,D]=o.useState(!1);o.useEffect(()=>{const O=[setTimeout(()=>{n(1)},500),setTimeout(()=>{n(0),D(!0)},1e3),setTimeout(()=>{b(!1),D(!1)},2e3),setTimeout(()=>{b(!0),n(1)},2500),setTimeout(()=>{n(0),D(!0)},3e3),setTimeout(()=>{b(!1),D(!1)},4e3)];return()=>{O.forEach(clearTimeout)}},[]);const v=`${e.connectedAccount?.accountName} ${e.connectedAccount?.maskedAccountNumber}`;return t.jsxs(xn,{children:[t.jsxs(yn,{windowSize:l,children:[t.jsxs(bn,{shouldBounce:g,isActive:w==0,isAutoSlide:C,windowSize:l,children:[e.chargeCard?.cardHolderUser!=null?t.jsxs(ba,{windowSize:l,onClick:s,"data-testid":Y("owner-name-copy-click"),onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),children:[t.jsxs(gt,{children:[Oe.cardDetails.owner,t.jsxs(Ta,{children:[t.jsx(ja,{children:m===!0?t.jsx(Aa,{}):t.jsx(Da,{isHover:L})}),m||L?t.jsx(Ia,{children:m?Ve.copyToClipBoard.copied:Ve.copyToClipBoard.copy}):null]})]}),t.jsx(Sa,{children:t.jsx(At,{children:d})})]}):null,h!=null?t.jsxs($a,{windowSize:l,onClick:x,"data-testid":Y("address-copy-click"),onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),children:[t.jsxs(gt,{children:[Oe.cardDetails.address,t.jsxs(Ta,{children:[t.jsx(ja,{children:u===!0?t.jsx(Aa,{}):t.jsx(Da,{isHover:$})}),u||$?t.jsx(Ia,{children:u?Ve.copyToClipBoard.copied:Ve.copyToClipBoard.copy}):null]})]}),t.jsx(vn,{windowSize:l,children:t.jsx(ki,{address:h,isDisabled:"readonly",style:{padding:a.sp0,...Z.smallRegular.cssObject,textTransform:"capitalize",alignItems:"flex-start",backgroundColor:f.colors.grey4,cursor:"pointer",flexDirection:l==="small"?"column":"row",gap:ge.addressValueGap.valuePx(l),textAlign:l==="small"?"left":"right"}})})]}):null]}),t.jsxs(Sn,{isActive:w==1,isAutoSlide:C,children:[e.chargeCard?.type.code.includes("debit")===!0?t.jsxs(ba,{windowSize:l,children:[t.jsx(gt,{children:Oe.connectedAccount}),t.jsxs($n,{children:[t.jsx(Nn,{children:t.jsx(Bn,{})}),t.jsx(At,{children:v})]})]}):null,t.jsxs($a,{windowSize:l,children:[t.jsx(gt,{children:Oe.department}),t.jsx(Sa,{children:t.jsx(At,{children:i==="In-Progress"||i==="Not-Started"?t.jsx(nt,{size:"Small",start:!0}):e.chargeCard?.department?.className??Ve.strings.hyphen})})]})]})]}),t.jsx(Yi,{numberOfDots:2,activeIndex:w,handleClick:n,style:{marginTop:"12px",marginBottom:ge.navigationMarginBottom.valuePx(l)},dotStyle:{width:a.sp2,height:a.sp2},spendManagementPromoCardActive:!0,promoColor:f.colors.primary,promoColorHover:f.colors.grey1})]})},mn=({chargeCardDetailView:e,classListFetchState:i,isChargeCardFeatureEnabled:d,creditAccount:h,creditAccountRepayment:m,isDebitCard:u,controllerEmails:s,productInformation:x,creditAccountInformation:l,debitAccountInformation:f,cardIssuedByRoles:w,cardIssuedByDepartmentName:n,cardHolderRoles:C,cardHolderDepartmentName:b,analytics:L})=>{if(e.chargeCard!=null&&i==="Completed"&&e.transactionStatistics.fetchState==="Completed"&&(!d||h.fetchState==="Completed"&&m.fetchState==="Completed")&&(!u||e.depositAccountLimitFetchState.fetchState==="Completed")){const S=e.chargeCard.type.code.includes("physical")?e.chargeCard.cardActivationAttemptHistory[0]?.timestamp:e.chargeCard.createTime;L.trackCardsUpdateSpendLimitInitiated(s,x,{cardId:e.chargeCard.id,cardName:e.chargeCard.cardName,cardType:gr(e.chargeCard.type.code),cardCategory:e.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:je(e.chargeCard.limit.amount),cardLastFourDigits:e.chargeCard.accountLast4,cardStatus:e.chargeCard.status.code,cardAssignedDate:e.chargeCard.createTime?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:e.chargeCard.providerCardCreateTime?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:S?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:e.chargeCard.creditLimitFrequency.name,cardSpentAmount:je(e.chargeCard.balance.amount),cardAvailableLimit:je(e.chargeCard.available.amount),cardUtilizationPercent:mr(e.chargeCard.limit.amount,e.chargeCard.available.amount),cardUtilizationAmount:je(Cr(e.chargeCard)),totalNumberOfDeclinedTransactions:e.transactionStatistics.statistics.totalNumberOfDeclinedTransactions,numberOfDeclinedTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfDeclinedTransactionsCurrentMonth,totalNumberOfPaidTransactions:e.transactionStatistics.statistics.totalNumberOfPaidTransactions,numberOfPaidTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfPaidTransactionsCurrentMonth,totalNumberOfCanceledTransactions:e.transactionStatistics.statistics.totalNumberOfCanceledTransactions,numberOfCanceledTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfCanceledTransactionsCurrentMonth,totalNumberOfAuthorizedTransactions:e.transactionStatistics.statistics.totalNumberOfAuthorizedTransactions,numberOfAuthorizedTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfAuthorizedTransactionsCurrentMonth,totalNumberOfTransactionsWithReceipts:e.transactionStatistics.statistics.totalNumberOfTransactionsWithReceipts,numberOfTransactionsWithReceiptsCurrentMonth:e.transactionStatistics.statistics.numberOfTransactionsWithReceiptsCurrentMonth},{cardIssuedByName:wt(e.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:e.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:e.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:w,cardIssuedByDepartment:n},{cardholderName:wt(e.chargeCard.cardHolderUser,!1),cardholderEmail:e.chargeCard.cardHolderUser?.email,cardholderRole:C,cardholderUserId:e.chargeCard.cardHolderUser?.userId,cardholderDepartment:b},"Card Detail","Hyperlink",(e?.chargeCard?.recommendations??[]).map($=>je($.creditLimit.amount)),l,f)}},gn=r.div`
+  display: flex;
+  align-items: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"flex-start":"center"};
+  gap: ${e=>ge.remainingAmountContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"column":"row"};
+`,Cn=r(me)`
+  color: ${e=>e.theme.colors.primary};
+`,fn=r(me)`
+  color: ${e=>e.theme.colors.hero};
+`,wn=r.div`
+  display: flex;
+  align-items: end;
+`,xn=r.div`
+  width: 100%;
+  overflow: hidden;
+`,yn=r.div`
+  width: 100%;
+  gap: ${a.sp3};
+  background-color: ${e=>e.theme.colors.grey4};
+  border: 1px solid ${e=>e.theme.colors.background};
+  border-radius: ${a.sp2};
+  padding: ${a.sp3};
+  box-sizing: border-box;
+  position: relative;
+  height: ${e=>ge.addressSectionHeight.valuePx(e.windowSize)};
+`,bn=r.div`
+  display: flex;
+  justify-content: unset;
+  gap: ${e=>ge.addressSectionGap.valuePx(e.windowSize)};
+  position: absolute;
+  width: 100%;
+  ${({isActive:e,isAutoSlide:i})=>pe`
+    transform: translateX(${e?"0%":i?"-10%":"-105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,shouldBounce:i})=>`${e?"0.5s":"0.3s"} ${i?"cubic-bezier(0.175, 0.885, 0.32, 1.125)":"ease-out"}`};
+`,Sn=r.div`
+  display: flex;
+  justify-content: unset;
+  ${({isActive:e,isAutoSlide:i})=>pe`
+    transform: translateX(${e?i?"95%":"0%":"105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,isActive:i})=>e&&i?"0.5s":"0.3s"}
+    ease-out;
+  gap: ${a.sp8};
+`,ba=r.div`
+  min-width: ${e=>ge.ownerWebMinWidth.valuePx(e.windowSize)};
+  cursor: pointer;
+`,gt=r(me)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+`,Sa=r.div``,$n=r.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${a.sp1};
+`,vn=r.div`
+  ${({windowSize:e})=>e==="small"?pe`
+          max-width: 220px;
+        `:null};
+`,At=r(me)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,$a=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: "baseline";
+  justify-content: center;
+  cursor: pointer;
+`,kn=r.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"||!e.isOwnCard?"column":"row"};
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>ge.rightSectionGap.valuePx(e.windowSize)};
+  width: ${e=>e.windowSize==="small"?"100%":"max-content"};
+`,Ln=r.div`
+  min-height: ${e=>`calc(${ge.rightSectionHeight.valuePx(e.windowSize)} + ${a.sp2})`};
+  min-width: ${e=>`calc(${ge.rightSectionWidth.valuePx(e.windowSize)} + ${a.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>ge.cardContainerContentGap.valuePx(e.windowSize)};
+`,jn=r.div`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+`,In=r.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  align-items: center;
+
+  justify-content: space-between;
+  padding-top: ${a.sp3};
+  padding-right: ${e=>ge.contentContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${e=>ge.topSectionPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${e=>ge.contentContainerPadding.valuePx(e.windowSize)};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  background: ${e=>e.theme.colors.grey5};
+  gap: ${e=>ge.leftRightSectionGap.valuePx(e.windowSize)};
+`,Dn=r.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: ${({windowSize:e})=>ge.cardBalanceSectionMarginBottom.valuePx(e)};
+`,va=r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`,An=r(nr)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${Ht.spentAmount.style(e.windowSize)}`};
+`,Tn=r.div`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  ${({windowSize:e})=>e==="small"?pe`
+          margin-bottom: ${a.sp4};
+        `:null};
+`,Rn=r.div`
+  display: flex;
+  flex-direction: ${({windowSize:e})=>e==="small"?"column":"row"};
+  align-items: ${({windowSize:e})=>e==="small"?"flex-start":"flex-end"};
+`,Fn=r(Mt)`
+  color: ${e=>e.theme.colors.hero};
+  margin-right: ${a.sp1};
+`,En=r(vi)`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${a.sp0};
+  color: ${p.link};
+  &:hover {
+    text-decoration: underline;
+  }
+`,zn=r.div`
+  display: flex;
+  align-items: flex-end;
+  gap: ${a.sp1};
+`,Pn=r(me)`
+  color: ${e=>e.theme.colors.hero};
+`,Mn=r(me)`
+  color: ${e=>e.theme.colors.hero};
+`,Vn=r.div`
+  width: 100%;
+  height: ${a.sp1};
+  display: flex;
+  margin: ${a.sp2} ${a.sp0};
+  border-radius: ${({windowSize:e})=>ge.barRadius.valuePx(e)};
+  background: ${e=>e.theme.colors.grey2};
+`,On=r.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  color: ${e=>e.theme.colors.primary};
+`,ka=r(nr)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${Ht.remainingAmount.style(e.windowSize)}`};
+`,La=r($i)`
+  ${e=>`${Ht.remainingAmount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+`,Hn=r.div`
+  background: ${p.success};
+  width: 0%;
+  height: ${a.sp1};
+  transition: width 4s ease;
+`,ja=r.span`
+  display: flex;
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ia=r(at)`
+  padding: ${a.sp0} 2px;
+  color: ${p.heroDark};
+  background: ${p.blackColor};
+  border-radius: ${a.sp1};
+  position: absolute;
+  left: 20px;
+`,Da=r(ir)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${a.sp1};
+  color: ${e=>e.isHover?e.theme.colors.primary:e.theme.colors.grey2};
+  cursor: pointer;
+`,Aa=r(ct)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${a.sp1};
+  color: ${p.success};
+`,Nn=r.div`
+  width: 21px;
+  height: 21px;
+`,Bn=r(Ai)`
+  color: ${p.brandColorOpal};
+  width: 100%;
+  height: 100%;
+`,Ta=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`,lt=he.getLocalizedStrings().spendManagement.chargeCard.cardDetails.header,Wn={key:"merchant",value:lt.merchant,sortOrder:"ascending",width:new I(38,38)},Un={key:"paymentDate",value:lt.paymentDate,sortOrder:"ascending",width:new I(21,21)},_n={key:"receipts",value:lt.receipts,sortOrder:"ascending",width:new I(16,16)},Zn={key:"type",value:lt.type,sortOrder:"ascending",width:new I(14,14)},Yn={key:"amount",value:lt.amount,sortOrder:"ascending",width:new I(11,11)},br=()=>[Wn,Un,_n,Zn,Yn],Je={headerLastColumnTopPadding:new I(c[0],c[4]),headerLastColumnRightPadding:new I(c[3],c[11]),headerLastColumnBottomPadding:new I(c[0],c[4]),headerLastColumnLeftPadding:new I(c[3],c[11]),headerHeight:new I(Oi,Hi)};function qn({hideSorting:e,sortConfig:i,onColumnSortConfigChanged:d}){const h=Ye(),m=Ce(),u=br(),s=(n,C)=>{let b=C;i.sortKey===n&&(b=C==="ascending"?"descending":"ascending"),d(n,b)},x=u.find(n=>n.key===i.sortKey)??u[0],l=n=>u.find(C=>C.key===n)?.value??"",f=u.map(n=>n.key),w=he.getLocalizedStrings().spendManagement.chargeCard.cardList;return m==="small"?t.jsxs(Ra,{windowSize:m,children:[t.jsxs(Jn,{children:[t.jsx(es,{children:t.jsx(Qn,{})}),t.jsx(Pi,{title:w.sortBy,placeholder:w.sortBy,pickerValues:f,valueToLabel:l,selectedValue:i.sortKey,onPickerSelectionChanged:n=>{s(n,"ascending")},optionTextStyle:Z.smallRegular,titleTextStyle:Z.smallRegular,titleColor:h.colors.primary,selectedOptionColor:h.colors.hero,optionBackgroundColor:h.colors.grey5,downChevronVisible:!1,backgroundColor:h.colors.grey4,isDisabled:e})]}),t.jsxs(rs,{hideSorting:e,onClick:()=>{e||s(x.key,x.sortOrder)},"data-testid":Y("charge-card-trxn-small-header",i.sortKey),children:[t.jsx(me,{children:x.value}),e?null:t.jsx(Fa,{sortDataValue:i.sortKey,headerData:x,children:t.jsx(Ea,{})})]})]}):t.jsx(Ra,{windowSize:m,children:u.map(n=>t.jsxs(Kn,{hideSorting:e,sortDataValue:i.sortKey,actualDataValue:n.key,wrapperWidth:n.width,windowSize:m,children:[t.jsxs(as,{hideSorting:e,onClick:()=>{e||s(n.key,n.sortOrder)},"data-testid":Y("charge-card-trxn-header",i.sortKey),children:[t.jsx(me,{children:n.value}),t.jsx(Fa,{sortDataValue:i.sortKey,headerData:n,children:e?null:t.jsx(Ea,{})})]}),t.jsx(ts,{sortDataValue:i.sortKey,windowSize:m,isVisible:e?!1:i.sortKey===n.key&&n.key!=="paymentDate",children:e?null:t.jsx(Xn,{onClick:()=>{e||s("paymentDate","ascending")},"data-testid":Y("charge-card-trxn-close-sort",i.sortKey)})})]},n.key))})}const Gn=Zi.memo(qn),Ra=r(me)`
+  top: ${a.sp0};
+  left: ${a.sp0};
+  min-height: ${e=>Je.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>Je.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${Je.headerLastColumnTopPadding.valuePx(e.windowSize)} ${Je.headerLastColumnRightPadding.valuePx(e.windowSize)} ${Je.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${Je.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`,Kn=r.div`
+  color: ${e=>e.sortDataValue===e.actualDataValue&&e.hideSorting===!1?e.theme.colors.primary:e.theme.colors.grey1};
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${a.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${a.sp0};
+  justify-content: ${e=>e.actualDataValue==="amount"?"flex-end":"flex-start"};
+  ${e=>e.actualDataValue==="paymentDate"?pe`
+          flex: 1 1 auto;
+        `:pe`
+          padding-left: ${a.sp0};
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+`,Xn=r(Vi)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,Fa=r.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerData.key&&e.headerData.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+  ${e=>e.headerData.sortOrder==="ascending"?"padding-top: 2px":"padding-bottom: 2px"}
+`,Ea=r(sr)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,Jn=r.div`
+  gap: ${a.sp1};
+  display: flex;
+`,Qn=r(Mi)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,es=r.div`
+  margin-right: ${a.sp1};
+  display: flex;
+  align-items: center;
+`,ts=r.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,as=r.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?a.sp0:"5px"};
+  &:hover {
+    color: ${e=>e.hideSorting?"inherit":e.theme.colors.primary};
+  }
+`,rs=r.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?a.sp0:"5px"};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.hideSorting?e.theme.colors.hero:e.theme.colors.primary};
+  }
+`;function Sr(e,i,d){return is(e,i,d)}async function is(e,i,d,h){const m=`${e}?query=${encodeURIComponent(JSON.stringify(d))}`,u=he.getLocalizedStrings().downloadReport;try{const s=await Wi(m,{method:"GET",headers:{"zeni-user-id":i.userId,"zeni-tenant-id":i.tenantId,"zeni-session-id":i.sessionId}});if(s.ok){const x=h??Ui(s.headers,"Charge Card Transaction Receipt.pdf"),l=await s.arrayBuffer();_i(l,x)}else console.error(`${u.reportErrorMessage} ${s.statusText}`)}catch(s){console.error(`${u.reportErrorMessage} ${JSON.stringify(s)}`)}}async function $r(e,i,d){const h=`${e}?query=${encodeURIComponent(JSON.stringify(d))}`,m=he.getLocalizedStrings().downloadReport;try{const u=await fetch(h,{method:"GET",headers:{"zeni-user-id":i.userId,"zeni-tenant-id":i.tenantId,"zeni-session-id":i.sessionId}});if(u.ok)return await u.json();console.error(`${m.reportErrorMessage} ${u.statusText}`)}catch(u){throw console.error(`${m.reportErrorMessage} ${JSON.stringify(u)}`),u}return[]}const os=e=>o.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M23.3584 10.0417L23.2319 9.30243L21.7534 9.55562L21.88 10.2949L23.3584 10.0417ZM20.3835 6.50175L20.7954 7.1285L22.0489 6.30467L21.637 5.67791L20.3835 6.50175ZM18.3213 2.36228L17.6946 1.95036L16.8707 3.20388L17.4975 3.61579L18.3213 2.36228ZM13.7044 2.11928L14.4436 2.24587L14.6968 0.767397L13.9576 0.640799L13.7044 2.11928ZM10.041 0.640799L9.30172 0.767397L9.55492 2.24587L10.2942 2.11928L10.041 0.640799ZM6.50104 3.6158L7.1278 3.20388L6.30397 1.95036L5.67721 2.36228L6.50104 3.6158ZM2.36158 5.67792L1.94966 6.30467L3.20318 7.12851L3.61509 6.50175L2.36158 5.67792ZM2.11857 10.2949L2.24517 9.55562L0.766695 9.30242L0.640097 10.0417L2.11857 10.2949ZM0.640097 13.9583L0.766695 14.6975L2.24517 14.4443L2.11857 13.7051L0.640097 13.9583ZM3.61509 17.4982L3.20318 16.8714L1.94966 17.6953L2.36158 18.322L3.61509 17.4982ZM5.67721 21.6377L6.30397 22.0496L7.1278 20.7961L6.50105 20.3842L5.67721 21.6377ZM10.2942 21.8807L9.55492 21.7541L9.30172 23.2326L10.041 23.3592L10.2942 21.8807ZM13.9576 23.3592L14.6968 23.2326L14.4436 21.7541L13.7044 21.8807L13.9576 23.3592ZM17.4975 20.3842L16.8707 20.7961L17.6946 22.0496L18.3213 21.6377L17.4975 20.3842ZM21.637 18.322L22.0489 17.6953L20.7954 16.8714L20.3835 17.4982L21.637 18.322ZM21.88 13.7051L21.7534 14.4443L23.2319 14.6975L23.3584 13.9583L21.88 13.7051ZM23.5243 12C23.5243 11.333 23.4675 10.6786 23.3584 10.0417L21.88 10.2949C21.9748 10.8485 22.0243 11.4182 22.0243 12H23.5243ZM21.637 5.67791C20.7702 4.35908 19.6402 3.22904 18.3213 2.36228L17.4975 3.61579C18.6453 4.37014 19.6291 5.35396 20.3835 6.50175L21.637 5.67791ZM13.9576 0.640799C13.3206 0.531717 12.6663 0.474976 11.9993 0.474976V1.97498C12.5811 1.97498 13.1507 2.02446 13.7044 2.11928L13.9576 0.640799ZM11.9993 0.474976C11.3323 0.474976 10.6779 0.531717 10.041 0.640799L10.2942 2.11928C10.8478 2.02446 11.4175 1.97498 11.9993 1.97498V0.474976ZM5.67721 2.36228C4.35838 3.22904 3.22833 4.35909 2.36158 5.67792L3.61509 6.50175C4.36944 5.35396 5.35326 4.37014 6.50104 3.6158L5.67721 2.36228ZM0.640097 10.0417C0.531015 10.6786 0.474274 11.333 0.474274 12H1.97427C1.97427 11.4182 2.02375 10.8485 2.11857 10.2949L0.640097 10.0417ZM0.474274 12C0.474274 12.667 0.531015 13.3213 0.640097 13.9583L2.11857 13.7051C2.02375 13.1514 1.97427 12.5818 1.97427 12H0.474274ZM2.36158 18.322C3.22834 19.6409 4.35838 20.7709 5.67721 21.6377L6.50105 20.3842C5.35326 19.6298 4.36944 18.646 3.61509 17.4982L2.36158 18.322ZM10.041 23.3592C10.6779 23.4682 11.3323 23.525 11.9993 23.525V22.025C11.4175 22.025 10.8478 21.9755 10.2942 21.8807L10.041 23.3592ZM11.9993 23.525C12.6663 23.525 13.3206 23.4682 13.9576 23.3592L13.7044 21.8807C13.1507 21.9755 12.5811 22.025 11.9993 22.025V23.525ZM18.3213 21.6377C19.6402 20.7709 20.7702 19.6409 21.637 18.322L20.3835 17.4982C19.6291 18.646 18.6453 19.6298 17.4975 20.3842L18.3213 21.6377ZM23.3584 13.9583C23.4675 13.3213 23.5243 12.667 23.5243 12H22.0243C22.0243 12.5818 21.9748 13.1514 21.88 13.7051L23.3584 13.9583Z",fill:"currentColor"}),o.createElement("path",{d:"M12 6.12244V17.8775",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M17.8776 12H6.12245",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),vr=e=>o.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M16.7656 6.60254H8.51562C8.10142 6.60254 7.76562 6.91434 7.76562 7.29897V20.357C7.76562 20.7416 8.10142 21.0534 8.51562 21.0534H16.7656C17.1798 21.0534 17.5156 20.7416 17.5156 20.357V7.29897C17.5156 6.91434 17.1798 6.60254 16.7656 6.60254Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M12.6875 9.5C13.1017 9.5 13.4375 9.83676 13.4375 10.251V10.416C13.7384 10.4808 13.9968 10.5753 14.2031 10.6699C14.3853 10.7536 14.5315 10.8389 14.6348 10.9053C14.6862 10.9383 14.7281 10.967 14.7588 10.9893L14.8096 11.0283C14.8112 11.0296 14.8131 11.0311 14.8145 11.0322L14.8174 11.0332L14.8184 11.0342V11.0352C15.1412 11.2946 15.1931 11.767 14.9336 12.0898C14.6742 12.4122 14.2026 12.4632 13.8799 12.2041L13.8789 12.2051L13.8779 12.2041C13.8683 12.1971 13.8493 12.1838 13.8232 12.167C13.7703 12.133 13.6869 12.0832 13.5781 12.0332C13.3579 11.9321 13.0482 11.834 12.6826 11.834C12.4165 11.8341 12.1531 11.9229 11.9727 12.0518C11.7904 12.182 11.7656 12.2912 11.7656 12.334C11.7656 12.4332 11.7869 12.4702 11.7939 12.4814C11.8035 12.4966 11.8301 12.5304 11.9082 12.5752C12.0988 12.6841 12.389 12.754 12.8398 12.8506C13.222 12.9325 13.766 13.042 14.2002 13.29C14.4338 13.4235 14.6681 13.613 14.8408 13.8877C15.0164 14.1672 15.0986 14.4883 15.0986 14.834C15.0986 15.5055 14.7062 16.0208 14.2637 16.3369C14.0193 16.5114 13.7364 16.6423 13.4375 16.7266V16.917C13.4375 17.3312 13.1017 17.667 12.6875 17.667C12.2735 17.6668 11.9375 17.3311 11.9375 16.917V16.7539C11.6322 16.689 11.3697 16.5938 11.1611 16.498C10.9789 16.4144 10.8327 16.329 10.7295 16.2627C10.678 16.2296 10.6361 16.201 10.6055 16.1787L10.5547 16.1396C10.553 16.1383 10.5512 16.1368 10.5498 16.1357L10.5479 16.1348L10.5459 16.1328C10.2233 15.8734 10.1715 15.4009 10.4307 15.0781C10.6898 14.7557 11.1615 14.7046 11.4844 14.9629L11.4814 14.96C11.4826 14.9608 11.4843 14.9624 11.4863 14.9639C11.4959 14.9708 11.5148 14.9841 11.541 15.001C11.594 15.035 11.678 15.0846 11.7871 15.1348C12.0073 15.2359 12.317 15.3339 12.6826 15.334C12.9487 15.3339 13.2121 15.245 13.3926 15.1162C13.5747 14.986 13.5986 14.8768 13.5986 14.834C13.5986 14.7337 13.5771 14.6974 13.5703 14.6865C13.5607 14.6712 13.5343 14.6375 13.4561 14.5928C13.2655 14.484 12.976 14.414 12.5254 14.3174C12.1431 14.2355 11.5983 14.1261 11.1641 13.8779C10.9306 13.7444 10.696 13.5549 10.5234 13.2803C10.3479 13.0008 10.2656 12.6796 10.2656 12.334C10.2656 11.6627 10.6582 11.1472 11.1006 10.8311C11.3477 10.6545 11.6347 10.5226 11.9375 10.4385V10.251C11.9375 9.8369 12.2735 9.50022 12.6875 9.5Z",fill:"currentColor"}),o.createElement("path",{d:"M3.27344 2.94629H20.3534C20.5381 2.94629 20.7152 3.01966 20.8459 3.15027C20.9764 3.28087 21.0498 3.45801 21.0498 3.64272V7.82129",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M3.24994 21.5894C3.6641 21.5893 3.99994 21.2535 3.99994 20.8394V8.37549L4.72748 9.10303C5.02038 9.39591 5.49514 9.39592 5.78803 9.10303C6.08091 8.81014 6.08091 8.33537 5.78803 8.04248L3.7851 6.03955C3.49221 5.74666 3.01745 5.74667 2.72455 6.03955C2.71669 6.04741 2.70953 6.05585 2.70209 6.06396C2.68584 6.07767 2.66955 6.09163 2.65424 6.10693L0.711857 8.04932C0.418964 8.34221 0.418964 8.81795 0.711857 9.11084C1.00469 9.40341 1.47957 9.40341 1.7724 9.11084L2.49994 8.3833V20.8394C2.49994 21.2536 2.83573 21.5894 3.24994 21.5894Z",fill:"currentColor"})),kr=e=>o.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M16.7656 6.60254H8.51562C8.10142 6.60254 7.76562 6.91434 7.76562 7.29897V20.357C7.76562 20.7416 8.10142 21.0534 8.51562 21.0534H16.7656C17.1798 21.0534 17.5156 20.7416 17.5156 20.357V7.29897C17.5156 6.91434 17.1798 6.60254 16.7656 6.60254Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M12.6875 9.5C13.1017 9.5 13.4375 9.83676 13.4375 10.251V10.416C13.7384 10.4808 13.9968 10.5753 14.2031 10.6699C14.3853 10.7536 14.5315 10.8389 14.6348 10.9053C14.6862 10.9383 14.7281 10.967 14.7588 10.9893L14.8096 11.0283C14.8112 11.0296 14.8131 11.0311 14.8145 11.0322L14.8174 11.0332L14.8184 11.0342V11.0352C15.1412 11.2946 15.1931 11.767 14.9336 12.0898C14.6742 12.4122 14.2026 12.4632 13.8799 12.2041L13.8789 12.2051L13.8779 12.2041C13.8683 12.1971 13.8493 12.1838 13.8232 12.167C13.7703 12.133 13.6869 12.0832 13.5781 12.0332C13.3579 11.9321 13.0482 11.834 12.6826 11.834C12.4165 11.8341 12.1531 11.9229 11.9727 12.0518C11.7904 12.182 11.7656 12.2912 11.7656 12.334C11.7656 12.4332 11.7869 12.4702 11.7939 12.4814C11.8035 12.4966 11.8301 12.5304 11.9082 12.5752C12.0988 12.6841 12.389 12.754 12.8398 12.8506C13.222 12.9325 13.766 13.042 14.2002 13.29C14.4338 13.4235 14.6681 13.613 14.8408 13.8877C15.0164 14.1672 15.0986 14.4883 15.0986 14.834C15.0986 15.5055 14.7062 16.0208 14.2637 16.3369C14.0193 16.5114 13.7364 16.6423 13.4375 16.7266V16.917C13.4375 17.3312 13.1017 17.667 12.6875 17.667C12.2735 17.6668 11.9375 17.3311 11.9375 16.917V16.7539C11.6322 16.689 11.3697 16.5938 11.1611 16.498C10.9789 16.4144 10.8327 16.329 10.7295 16.2627C10.678 16.2296 10.6361 16.201 10.6055 16.1787L10.5547 16.1396C10.553 16.1383 10.5512 16.1368 10.5498 16.1357L10.5479 16.1348L10.5459 16.1328C10.2233 15.8734 10.1715 15.4009 10.4307 15.0781C10.6898 14.7557 11.1615 14.7046 11.4844 14.9629L11.4814 14.96C11.4826 14.9608 11.4843 14.9624 11.4863 14.9639C11.4959 14.9708 11.5148 14.9841 11.541 15.001C11.594 15.035 11.678 15.0846 11.7871 15.1348C12.0073 15.2359 12.317 15.3339 12.6826 15.334C12.9487 15.3339 13.2121 15.245 13.3926 15.1162C13.5747 14.986 13.5986 14.8768 13.5986 14.834C13.5986 14.7337 13.5771 14.6974 13.5703 14.6865C13.5607 14.6712 13.5343 14.6375 13.4561 14.5928C13.2655 14.484 12.976 14.414 12.5254 14.3174C12.1431 14.2355 11.5983 14.1261 11.1641 13.8779C10.9306 13.7444 10.696 13.5549 10.5234 13.2803C10.3479 13.0008 10.2656 12.6796 10.2656 12.334C10.2656 11.6627 10.6582 11.1472 11.1006 10.8311C11.3477 10.6545 11.6347 10.5226 11.9375 10.4385V10.251C11.9375 9.8369 12.2735 9.50022 12.6875 9.5Z",fill:"currentColor"}),o.createElement("path",{d:"M3.27344 2.94629H20.3534C20.5381 2.94629 20.7152 3.01966 20.8459 3.15027C20.9764 3.28087 21.0498 3.45801 21.0498 3.64272V7.82129",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M3.24994 5.81982C3.6641 5.81989 3.99994 6.15565 3.99994 6.56982V19.0337L4.72748 18.3062C5.02038 18.0133 5.49514 18.0133 5.78803 18.3062C6.08091 18.599 6.08091 19.0738 5.78803 19.3667L3.7851 21.3696C3.49221 21.6625 3.01745 21.6625 2.72455 21.3696C2.71669 21.3618 2.70953 21.3533 2.70209 21.3452C2.68584 21.3315 2.66955 21.3175 2.65424 21.3022L0.711857 19.3599C0.418964 19.067 0.418964 18.5912 0.711857 18.2983C1.00469 18.0058 1.47957 18.0058 1.7724 18.2983L2.49994 19.0259V6.56982C2.49994 6.15561 2.83573 5.81982 3.24994 5.81982Z",fill:"currentColor"})),{dateFormat:ns,spendManagement:{chargeCard:{cardDetails:za}},common:{strings:{hyphen:ss},tooltips:{addMissingReceipt:ds,addReceipt:cs,viewReceipt:ls}}}=he.getLocalizedStrings(),Me={containerPaddingLeft:new I(c[3],c[4]),containerPaddingRight:new I(c[3],c[4]),containerPaddingTop:new I(c[2],c[3]),containerPaddingBottom:new I(c[2],c[3]),containerMarginLeft:new I(c[4],c[8]),webkitLineClamp:new I(2,1,1,1,1)},hs=(e,i)=>e.attachments!=null&&e.attachments.length>0?ls:e.amount.amount<=i.amount?cs:ds,Lr=(e,i,d,h)=>e.attachments!=null&&e.attachments.length>0?t.jsx(Rs,{onClick:m=>{m.stopPropagation(),h()},"data-testid":Y("card-transaction-row-view-receipt",e.id)}):e.amount.amount<=i.amount?t.jsx(zs,{onClick:m=>{m.stopPropagation(),d()},"data-testid":Y("card-transaction-row-optional-upload-receipt",e.id)}):t.jsx(Es,{onClick:m=>{m.stopPropagation(),d()},"data-testid":Y("card-transaction-row-upload-receipt",e.id)}),ps=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,isAiCategorizationEnabledForCardsTransactions:h,transactionAttachmentsEndpointToFetch:m,transactionAttachmentEndpointToDownload:u,cardId:s,uploadReceiptsFetchState:x,uploadReceiptsShowTick:l,isViewReceiptClickedImmediatelyAfterUpload:f,authParams:w,transaction:n,receiptRequiredAboveAmount:C,updateChargeCardTransactionAttachments:b,onUploadReceiptComplete:L,updateChargeCardTransactionUploadReceiptsFetchStatus:S,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:y,removeSnackbar:g,onChargeCardTransactionRowClick:D})=>{const v=Ce(),[O,T]=o.useState(!1),[z,G]=o.useState([]),[J,U]=o.useState(null);o.useEffect(()=>{!d&&f&&(Q(A[0]),ee())},[d,f]);const A=n.attachments?.filter(te=>te.contentType!=null&&dr.includes(te.contentType))??[],[H,Q]=o.useState(A[0]),[re,F]=o.useState([]),[K,_]=o.useState(void 0);o.useEffect(()=>{async function te(de){re.includes(de.attachment_id)?console.warn(`Attachment with ID ${de.attachment_id} is already getting downloaded`):(F([de.attachment_id,...re]),await Sr(u,w,de),F(pr(re,M=>M==de.attachment_id)))}K!=null&&(te({card_id:s,transaction_id:n.id,attachment_id:K}),_(void 0))},[K]);const oe=()=>{y(n.id,s,!1),T(!1),U(null),G([]),A.length>0&&Q(A[0])},ee=()=>{T(!0);const te=A.map(M=>M.id);async function de(M){return await $r(m,w,M)}de({card_id:s,transaction_id:n.id,attachment_ids:te}).then(M=>{G(M),M.length>0&&U(M[0])})},{merchant:P,createTime:ae,transactionType:N,thirdPartyTransactionId:ie,zeniVendorId:X,zeniAccountId:j}=n,q=()=>{d?(g(),y(n.id,s,!0)):(Q(A[0]),ee())},R=o.useRef(null);async function se(te,de){S(n.id,s,"In-Progress"),await wr(`${e}/1.0/cards/transactions/${n.id}/attachments`,w,te,de).then(M=>{M!=null&&b(n.id,M),S(n.id,s,"Completed"),$(n.id,s,!0),setTimeout(()=>{$(n.id,s,!1),L(!0)},2e3)}).catch(M=>{S(n.id,s,"Error"),L(!1,M)})}const E=()=>{R.current?.click()},k=te=>{if(te.target.files!=null){const de=te.target.files,M=[],Fe=[];for(let ke=0;ke<de.length;ke++)M.push(de[ke].name),Fe.push(de[ke]);se?.(Fe,M)}},V=br(),B=cr(n.transactionStatus),ne=h?P.brandName??P.name:P.name,Ie=xe("0,0.00",n.amount),De=N.code==="transfer",Te=ie!=null&&h&&(De||j!=null&&X!=null),He=De&&n.direction==="debit",Re=De&&n.direction==="credit";return t.jsxs(fs,{windowSize:v,isClickable:Te,"data-testid":Y("card-transaction-row",n.id),onClick:te=>{te.stopPropagation(),Te&&D(N.code,ie)},children:[t.jsx(ws,{children:t.jsxs(xs,{children:[t.jsxs(ys,{windowSize:v,responsiveWidth:V[0].width,children:[He?t.jsx(ks,{}):Re?t.jsx(Ls,{}):t.jsx(js,{src:P.logo?.url?.toString()}),t.jsx(bs,{windowSize:v,hasMarginRight:B.code==="paid",children:ne}),B.code!=="paid"?t.jsxs(ms,{children:[t.jsx(Cs,{windowSize:v}),t.jsx(gs,{color:B.color,windowSize:v,children:B.value})]}):null]}),t.jsx(vs,{windowSize:v,responsiveWidth:V[1].width,children:t.jsx(Is,{children:ae.format(ns.visual.MMMDCommaYYYYformat)})}),t.jsx(As,{windowSize:v,responsiveWidth:V[2].width,children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?ss:x?.fetchState==="In-Progress"?t.jsx(nt,{size:"Small",start:!0}):l?t.jsx(Fs,{}):t.jsxs(Pt,{enterDelay:600,display:"flex",placement:"bottom",title:hs(n,C),children:[t.jsx(us,{"data-testid":Y("card-transaction-row-upload-receipt",n.id),onClick:te=>{te.stopPropagation()},children:t.jsx(lr,{name:"transactionLineAttachment",fileRef:R,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:k,multiple:!0,onFileSizeError:(te,de)=>{te&&L(!1,{code:500,message:de===!0?za.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",xt(i,0)):za.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",xt(i,0))})}})}),Lr(n,C,E,q)]})}),t.jsx(Ds,{windowSize:v,responsiveWidth:V[3].width,children:t.jsx(Ts,{title:N.name,children:N.name})}),t.jsx(Ss,{windowSize:v,responsiveWidth:V[4].width,children:t.jsx($s,{windowSize:v,title:xe("0,0.[00]",n.amount),children:n.direction==="debit"?Ie:`-${Ie}`})})]})}),O&&A.length>0?fr.createPortal(t.jsx(hr,{allFiles:z,fileSource:J,file:H,title:H.fileName,attachments:A,setFileSource:U,setShowFullScreenView:T,onCrossClick:oe,setSelectedFileAttachment:Q,onDownloadClick:te=>{_(te.id)},handleTouchStart:()=>{},handleTouchMove:()=>{},handleTouchEnd:()=>{}}),document.body):null]})},us=r.div``,ms=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${a.sp2};
+  margin-right: ${a.sp4};
+`,gs=r(at)`
+  color: ${e=>e.color};
+`,Cs=r.div`
+  display: ${e=>e.windowSize==="small"?"none":"block"};
+  width: ${a.sp1};
+  height: ${a.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,fs=r.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>Me.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>Me.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>Me.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>Me.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>e.theme.mode==="dark"?`${p.dropShadowNormalDark} ${a.sp0} 2px ${a.sp1}`:`${a.sp0} 2px ${a.sp1} ${p.dropShadowNormalLight}`};
+  border-radius: ${a.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${e=>Me.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>Me.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+  cursor: ${e=>e.isClickable?"pointer":"default"};
+`,ws=r.div`
+  display: block;
+  width: 100%;
+`,xs=r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,ys=r.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${a.sp2};
+  align-items: center;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,bs=r(ye)`
+  margin-right: ${e=>e.hasMarginRight?a.sp3:a.sp0};
+  color: inherit;
+  -webkit-line-clamp: ${e=>Me.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,Ss=r(ye)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,$s=r(ye)`
+  color: inherit;
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>Me.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,vs=r.div`
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+`,jr=e=>pe`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e.colors.hero};
+`,ks=r(kr)`
+  ${({theme:e})=>jr(e)}
+`,Ls=r(vr)`
+  ${({theme:e})=>jr(e)}
+`,js=r.img`
+  display: flex;
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,Is=r(ye)`
+  color: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Ds=r(ye)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,As=r.div`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,Ts=r(at)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${a.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,Rs=r(Ni)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Fs=r(ct)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${p.success};
+`,Es=r(Bi)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.brandColorGoldDark};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,zs=r(os)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,{dateFormat:Ps,spendManagement:{chargeCard:{cardDetails:Tt}},common:{strings:{hyphen:Ms}}}=he.getLocalizedStrings(),Vs={webkitLineClamp:new I(2,1,1,1,1)},Os=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,isAiCategorizationEnabledForCardsTransactions:h,transactionAttachmentsEndpointToFetch:m,transactionAttachmentEndpointToDownload:u,cardId:s,isViewReceiptClickedImmediatelyAfterUpload:x,uploadReceiptsShowTick:l,uploadReceiptsFetchState:f,authParams:w,transaction:n,receiptRequiredAboveAmount:C,onUploadReceiptComplete:b,updateChargeCardTransactionAttachments:L,updateChargeCardTransactionReceiptsShowTick:S,updateChargeCardTransactionIsViewReceiptClicked:$,updateChargeCardTransactionUploadReceiptsFetchStatus:y,removeSnackbar:g,onChargeCardTransactionRowClick:D})=>{const v=Ce(),[O,T]=o.useState(0),[z,G]=o.useState(0),[J,U]=o.useState(0),A=W=>{U(W),_(!0),X(N[W]),ae(oe[W])};function H(W){T(W.targetTouches[0].clientX)}function Q(W){G(W.targetTouches[0].clientX)}function re(W){return W<0?N.length+W:W%N.length}function F(){O-z>50&&z!==0&&J<N.length-1?(A(re(J+1)),T(0),G(0)):O-z<-50&&z!==0&&J>0&&(A(re(J-1)),T(0),G(0))}const[K,_]=o.useState(!1),[oe,ee]=o.useState([]),[P,ae]=o.useState(null);o.useEffect(()=>{!d&&x&&(X(N[0]),k())},[d,x]);const N=n.attachments?.filter(W=>W.contentType!=null&&dr.includes(W.contentType))??[],[ie,X]=o.useState(N[0]),[j,q]=o.useState([]),[R,se]=o.useState(void 0);o.useEffect(()=>{async function W(ce){j.includes(ce.attachment_id)?console.warn(`Attachment with ID ${ce.attachment_id} is already getting downloaded`):(q([ce.attachment_id,...j]),await Sr(u,w,ce),q(pr(j,le=>le==ce.attachment_id)))}R!=null&&(W({card_id:s,transaction_id:n.id,attachment_id:R}),se(void 0))},[R]);const E=()=>{$(n.id,s,!1),_(!1),ae(null),ee([]),N.length>0&&X(N[0])},k=()=>{_(!0);const W=N.map(le=>le.id);async function ce(le){return await $r(m,w,le)}ce({card_id:s,transaction_id:n.id,attachment_ids:W}).then(le=>{ee(le),le.length>0&&ae(le[0])})},{merchant:V,createTime:B,transactionType:ne,thirdPartyTransactionId:Ie,zeniVendorId:De,zeniAccountId:Te}=n,He=()=>{d?(g(),$(n.id,s,!0)):(X(N[0]),k())},Re=o.useRef(null);async function te(W,ce){y(n.id,s,"In-Progress"),await wr(`${e}/1.0/cards/transactions/${n.id}/attachments`,w,W,ce).then(le=>{le!=null&&L(n.id,le),y(n.id,s,"Completed"),b(!0),S(n.id,s,!0),setTimeout(()=>S(n.id,s,!1),2e3)}).catch(le=>{y(n.id,s,"Error"),b(!1,le)})}const de=()=>{Re.current?.click()},M=W=>{if(W.target.files!=null){const ce=W.target.files,le=[],ze=[];for(let Pe=0;Pe<ce.length;Pe++)le.push(ce[Pe].name),ze.push(ce[Pe]);te?.(ze,le)}},Fe=cr(n.transactionStatus),ke=h?V.brandName??V.name:V.name,qe=xe("0,0.00",n.amount),Ee=ne.code==="transfer",ht=Ie!=null&&h&&(Ee||Te!=null&&De!=null),rt=Ee&&n.direction==="debit",pt=Ee&&n.direction==="credit";return t.jsxs(Ks,{windowSize:v,"data-testid":Y("card-transaction-row-small",n.id),onClick:W=>{W.stopPropagation(),ht&&D(ne.code,Ie)},children:[t.jsx(Xs,{children:t.jsxs(Js,{children:[t.jsxs(td,{children:[t.jsx(Ys,{children:rt?t.jsx(Hs,{}):pt?t.jsx(Ns,{}):t.jsx(rd,{src:V.logo?.url?.toString()})}),t.jsxs(id,{children:[t.jsxs(Bs,{children:[t.jsx(Qs,{windowSize:v,children:ke}),Fe.code!=="paid"?t.jsxs(Ws,{children:[t.jsx(_s,{windowSize:v}),t.jsx(Us,{color:Fe.color,windowSize:v,children:Fe.value})]}):null]}),t.jsx(ed,{children:`${Tt.paymentDate} ${B.format(Ps.visual.MMMDCommaYYYYformat)}`})]})]}),t.jsxs(ad,{children:[t.jsx(od,{children:n.direction==="debit"?qe:`-${qe}`}),t.jsx(Gs,{title:ne.name,children:ne.name}),t.jsx(qs,{children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?Ms:f?.fetchState==="In-Progress"?t.jsx(nt,{size:"Small",start:!0}):l?t.jsx(Zs,{}):t.jsxs(Pa,{children:[t.jsx(Pa,{"data-testid":Y("card-transaction-row-small-upload-receipt",n.id),onClick:W=>{W.stopPropagation()},children:t.jsx(lr,{name:"transactionLineAttachment",fileRef:Re,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:M,multiple:!0,onFileSizeError:(W,ce)=>{W&&b(!1,{code:500,message:ce===!0?Tt.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",xt(i,0)):Tt.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",xt(i,0))})}})}),Lr(n,C,de,He)]})})]})]})}),K&&N.length>0?fr.createPortal(t.jsx(hr,{allFiles:oe,fileSource:P,file:ie,title:ie.fileName,attachments:N,setFileSource:ae,setShowFullScreenView:_,onCrossClick:E,setSelectedFileAttachment:X,onDownloadClick:W=>{se(W.id)},handleTouchStart:H,handleTouchMove:Q,handleTouchEnd:F}),document.body):null]})},Ir=e=>pe`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e.colors.hero};
+`,Hs=r(kr)`
+  ${({theme:e})=>Ir(e)}
+`,Ns=r(vr)`
+  ${({theme:e})=>Ir(e)}
+`,Pa=r.div``,Bs=r.div`
+  display: flex;
+  gap: ${a.sp2};
+  align-items: flex-start;
+`,Ws=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${a.sp2};
+  min-height: ${a.sp4};
+`,Us=r(at)`
+  color: ${e=>e.color};
+`,_s=r.div`
+  display: block;
+  width: ${a.sp1};
+  height: ${a.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,Zs=r(ct)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${p.success};
+`,Ys=r.div``,qs=r.div`
+  margin-top: ${a.sp2};
+`,Gs=r(at)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${a.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,Ks=r.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: ${e=>` 1px solid ${e.theme.colors.grey3}`};
+  padding: ${a.sp3};
+  box-shadow: ${e=>`${a.sp0} 1px 2px ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${a.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${a.sp3};
+  margin-left: ${a.sp3};
+`,Xs=r.div`
+  display: block;
+  width: 100%;
+`,Js=r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,Qs=r(ye)`
+  color: inherit;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>Vs.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+`,ed=r(at)`
+  color: inherit;
+  min-height: 18px;
+  margin-top: -${a.sp1};
+`,td=r.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${a.sp2};
+`,ad=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,rd=r.img`
+  display: flex;
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,id=r.div`
+  margin-bottom: 6px;
+`,od=r(ye)`
+  color: inherit;
+`,nd=e=>o.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("g",{clipPath:"url(#clip0_6421_22796)"},o.createElement("mask",{id:"mask0_6421_22796",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:0,width:90,height:90},o.createElement("rect",{width:90,height:90,fill:"#D9D9D9"})),o.createElement("g",{mask:"url(#mask0_6421_22796)"},o.createElement("rect",{x:.471703,y:15.6197,width:85.2829,height:54.9872,rx:3.30192,stroke:"#97C3B9",strokeWidth:.943405}),o.createElement("rect",{opacity:.2,x:3.77344,y:18.9216,width:86.2263,height:55.9306,rx:3.77362,fill:"#97C3B9"}),o.createElement("path",{d:"M13.8672 56.8781L72.3583 56.878",stroke:"#EEBA7D",strokeWidth:.943405,strokeLinecap:"round"}),o.createElement("path",{d:"M0.945312 30.8197C34.0042 22.3291 52.539 22.3291 85.5978 30.8197",stroke:"#97C3B9",strokeWidth:.943405,strokeLinecap:"round"}),o.createElement("path",{d:"M15.688 42.7079L14.037 40.3117H15.037L16.1502 41.9154C16.1565 41.928 16.1911 41.9846 16.254 42.0853H16.2729C16.2854 42.0664 16.298 42.0444 16.3106 42.0192C16.3232 41.9878 16.3452 41.95 16.3766 41.906L17.4804 40.3117H18.4238L16.754 42.7456L18.4427 45.1796H17.4427L16.3012 43.5287C16.2886 43.5098 16.2509 43.4469 16.188 43.34H16.1691C16.1502 43.3903 16.1188 43.4501 16.0748 43.5192L14.9238 45.1796H13.9898L15.688 42.7079ZM20.3773 42.7079L18.7264 40.3117H19.7264L20.8396 41.9154C20.8459 41.928 20.8805 41.9846 20.9434 42.0853H20.9623C20.9748 42.0664 20.9874 42.0444 21 42.0192C21.0126 41.9878 21.0346 41.95 21.066 41.906L22.1698 40.3117H23.1132L21.4434 42.7456L23.1321 45.1796H22.1321L20.9906 43.5287C20.978 43.5098 20.9402 43.4469 20.8774 43.34H20.8585C20.8396 43.3903 20.8082 43.4501 20.7641 43.5192L19.6132 45.1796H18.6792L20.3773 42.7079ZM25.0667 42.7079L23.4158 40.3117H24.4158L25.529 41.9154C25.5353 41.928 25.5699 41.9846 25.6328 42.0853H25.6516C25.6642 42.0664 25.6768 42.0444 25.6894 42.0192C25.702 41.9878 25.724 41.95 25.7554 41.906L26.8592 40.3117H27.8026L26.1328 42.7456L27.8215 45.1796H26.8215L25.6799 43.5287C25.6674 43.5098 25.6296 43.4469 25.5667 43.34H25.5479C25.529 43.3903 25.4976 43.4501 25.4535 43.5192L24.3026 45.1796H23.3686L25.0667 42.7079ZM30.8057 42.2551H33.1076V42.9909H30.8057V42.2551ZM37.799 42.7079L36.1481 40.3117H37.1481L38.2613 41.9154C38.2676 41.928 38.3022 41.9846 38.3651 42.0853H38.3839C38.3965 42.0664 38.4091 42.0444 38.4217 42.0192C38.4342 41.9878 38.4563 41.95 38.4877 41.906L39.5915 40.3117H40.5349L38.8651 42.7456L40.5538 45.1796H39.5537L38.4122 43.5287C38.3996 43.5098 38.3619 43.4469 38.299 43.34H38.2802C38.2613 43.3903 38.2298 43.4501 38.1858 43.5192L37.0349 45.1796H36.1009L37.799 42.7079ZM42.4884 42.7079L40.8374 40.3117H41.8375L42.9507 41.9154C42.957 41.928 42.9916 41.9846 43.0544 42.0853H43.0733C43.0859 42.0664 43.0985 42.0444 43.111 42.0192C43.1236 41.9878 43.1456 41.95 43.1771 41.906L44.2809 40.3117H45.2243L43.5544 42.7456L45.2431 45.1796H44.2431L43.1016 43.5287C43.089 43.5098 43.0513 43.4469 42.9884 43.34H42.9695C42.9507 43.3903 42.9192 43.4501 42.8752 43.5192L41.7242 45.1796H40.7903L42.4884 42.7079ZM48.2274 42.2551H50.5293V42.9909H48.2274V42.2551ZM55.2207 42.7079L53.5697 40.3117H54.5697L55.683 41.9154C55.6892 41.928 55.7238 41.9846 55.7867 42.0853H55.8056C55.8182 42.0664 55.8308 42.0444 55.8433 42.0192C55.8559 41.9878 55.8779 41.95 55.9094 41.906L57.0132 40.3117H57.9566L56.2867 42.7456L57.9754 45.1796H56.9754L55.8339 43.5287C55.8213 43.5098 55.7836 43.4469 55.7207 43.34H55.7018C55.683 43.3903 55.6515 43.4501 55.6075 43.5192L54.4565 45.1796H53.5226L55.2207 42.7079ZM59.9101 42.7079L58.2591 40.3117H59.2591L60.3723 41.9154C60.3786 41.928 60.4132 41.9846 60.4761 42.0853H60.495C60.5076 42.0664 60.5201 42.0444 60.5327 42.0192C60.5453 41.9878 60.5673 41.95 60.5988 41.906L61.7025 40.3117H62.6459L60.9761 42.7456L62.6648 45.1796H61.6648L60.5233 43.5287C60.5107 43.5098 60.473 43.4469 60.4101 43.34H60.3912C60.3723 43.3903 60.3409 43.4501 60.2969 43.5192L59.1459 45.1796H58.2119L59.9101 42.7079ZM64.5995 42.7079L62.9485 40.3117H63.9485L65.0617 41.9154C65.068 41.928 65.1026 41.9846 65.1655 42.0853H65.1844C65.1969 42.0664 65.2095 42.0444 65.2221 42.0192C65.2347 41.9878 65.2567 41.95 65.2881 41.906L66.3919 40.3117H67.3353L65.6655 42.7456L67.3542 45.1796H66.3542L65.2127 43.5287C65.2001 43.5098 65.1624 43.4469 65.0995 43.34H65.0806C65.0617 43.3903 65.0303 43.4501 64.9863 43.5192L63.8353 45.1796H62.9013L64.5995 42.7079ZM69.2888 42.7079L67.6379 40.3117H68.6379L69.7511 41.9154C69.7574 41.928 69.792 41.9846 69.8549 42.0853H69.8738C69.8863 42.0664 69.8989 42.0444 69.9115 42.0192C69.9241 41.9878 69.9461 41.95 69.9775 41.906L71.0813 40.3117H72.0247L70.3549 42.7456L72.0436 45.1796H71.0436L69.9021 43.5287C69.8895 43.5098 69.8517 43.4469 69.7888 43.34H69.77C69.7511 43.3903 69.7197 43.4501 69.6756 43.5192L68.5247 45.1796H67.5907L69.2888 42.7079Z",fill:"#EEBA7D"}))),o.createElement("defs",null,o.createElement("clipPath",{id:"clip0_6421_22796"},o.createElement("rect",{width:90,height:90,fill:"white"})))),sd=e=>o.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("g",{clipPath:"url(#clip0_6421_22782)"},o.createElement("path",{opacity:.2,d:"M46.4732 89.7815C70.4353 89.7815 89.8605 70.3564 89.8605 46.3942C89.8605 22.4321 70.4353 3.00696 46.4732 3.00696C22.5111 3.00696 3.08594 22.4321 3.08594 46.3942C3.08594 70.3564 22.5111 89.7815 46.4732 89.7815Z",fill:"#97C3B9"}),o.createElement("path",{d:"M44.0435 87.3468C68.0057 87.3468 87.4308 67.9217 87.4308 43.9595C87.4308 19.9974 68.0057 0.572266 44.0435 0.572266C20.0814 0.572266 0.65625 19.9974 0.65625 43.9595C0.65625 67.9217 20.0814 87.3468 44.0435 87.3468Z",stroke:"#97C3B9",strokeWidth:1.04046,strokeMiterlimit:10}),o.createElement("path",{d:"M5.11719 45.0781C5.11719 65.6012 21.7594 82.3006 42.2149 82.3006",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),o.createElement("path",{d:"M9.14062 45.0781C9.14062 57.3347 15.7996 68.0619 25.6788 73.8104",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),o.createElement("path",{d:"M24.0625 56.6948C24.0625 49.1878 33.0053 43.1011 44.0446 43.1011C55.0839 43.1011 64.0267 49.1878 64.0267 56.6948C64.0267 71.3861 24.0677 71.5422 24.0677 56.6948H24.0625Z",stroke:"#97C3B9",strokeWidth:.988439,strokeMiterlimit:10}),o.createElement("path",{d:"M44.0423 37.0092C48.6997 37.0092 52.4753 33.2336 52.4753 28.5763C52.4753 23.9189 48.6997 20.1433 44.0423 20.1433C39.3849 20.1433 35.6094 23.9189 35.6094 28.5763C35.6094 33.2336 39.3849 37.0092 44.0423 37.0092Z",stroke:"#97C3B9",strokeWidth:.988439,strokeMiterlimit:10}),o.createElement("path",{d:"M81.918 44.0324C81.918 23.5093 65.2758 6.80988 44.8203 6.80988",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),o.createElement("path",{d:"M77.8975 44.0324C77.8975 31.7758 71.2386 21.0486 61.3594 15.3",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"})),o.createElement("defs",null,o.createElement("clipPath",{id:"clip0_6421_22782"},o.createElement("rect",{width:90,height:90,fill:"white"})))),{spendManagement:{chargeCard:{cardDetails:tt}},common:dd}=he.getLocalizedStrings();function cd({transactions:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,uploadReceiptsFetchStateByTransactionId:h,uploadReceiptsShowTickByTransactionId:m,isViewReceiptClickedImmediatelyAfterUploadTransactionId:u,cardId:s,receiptRequiredAboveAmount:x,isAiCategorizationEnabledForCardsTransactions:l,transactionAttachmentsEndpointToFetch:f,transactionAttachmentEndpointToDownload:w,cardsEndPoint:n,authParams:C,hideSorting:b,isOwnCard:L,uiState:S,fetchState:$,cardHolderUser:y,cardStatusCode:g="active",cardCodeType:D="business_virtual_credit_card",onReloadTransactions:v,onFetchChargeCardTransactionList:O,onColumnSortConfigChanged:T,removeSnackbar:z,onChargeCardTransactionRowClick:G,onUploadReceiptComplete:J,onUpdateScrollYOffset:U,updateChargeCardTransactionAttachments:A,updateChargeCardTransactionUploadReceiptsFetchStatus:H,updateChargeCardTransactionReceiptsShowTick:Q,updateChargeCardTransactionIsViewReceiptClicked:re}){const F=Ce(),K=o.useRef(null),[_,oe]=o.useState(!1);o.useEffect(()=>{K.current?.resetAfterIndex(0)},[F,K]),o.useEffect(()=>{$==="Completed"&&oe(!1)},[$]);const ee=()=>F!=="small"?74:128,P=(X,j)=>{O(X,j)},ae=()=>{oe(!0),P(S.pageToken,S.pageTokenType)},N=X=>X<e.length,ie=()=>{S.pageToken!=null&&$==="Completed"&&ae()};return t.jsxs(fd,{isOwnCard:L,windowSize:F,isEmptyTransaction:e.length===0,children:[t.jsx(wd,{windowSize:F,children:$==="Error"?t.jsxs(bd,{children:[t.jsx(Sd,{onClick:v,"data-testid":Y("card-transaction-list-reload"),children:t.jsx(er,{})}),t.jsx($d,{children:dd.reloadPage.label})]}):$==="Not-Started"||$==="In-Progress"&&e.length===0?t.jsx(kd,{children:t.jsx(nt,{size:"ExtraLarge",start:!0})}):$==="Completed"||$==="In-Progress"&&e.length>0?g==="request_on_hold"?t.jsx(hd,{cardType:D,cardHolderUser:y}):g==="inactive"?t.jsx(pd,{cardHolderUser:y}):e.length===0?t.jsx(ld,{}):t.jsx(yd,{windowSize:F,children:t.jsx(gi,{children:({height:X,width:j})=>t.jsx(Ci,{isItemLoaded:N,itemCount:e.length+1,loadMoreItems:ie,children:({onItemsRendered:q})=>t.jsx(fi,{ref:K,height:X,itemCount:e.length,onItemsRendered:q,itemSize:ee,itemKey:R=>e[R].id,width:j,style:{willChange:"auto"},innerElementType:R=>Cd(R,b,S,$,T),onScroll:({scrollOffset:R})=>{U?.(R)},initialScrollOffset:S.scrollYOffset,children:R=>t.jsx(ud,{...R,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,cardsEndPoint:n,isAiCategorizationEnabledForCardsTransactions:l,transactionAttachmentsEndpointToFetch:f,transactionAttachmentEndpointToDownload:w,uploadReceiptsFetchStateByTransactionId:h,uploadReceiptsShowTickByTransactionId:m,isViewReceiptClickedImmediatelyAfterUploadTransactionId:u,cardId:s,authParams:C,transactions:e,receiptRequiredAboveAmount:x,updateChargeCardTransactionAttachments:A,onUploadReceiptComplete:J,updateChargeCardTransactionUploadReceiptsFetchStatus:H,updateChargeCardTransactionReceiptsShowTick:Q,updateChargeCardTransactionIsViewReceiptClicked:re,onChargeCardTransactionRowClick:G,removeSnackbar:z})})})})}):null}),_===!0?t.jsx(Ld,{children:t.jsx(nt,{size:"Small",start:!0})}):null]})}const ld=()=>{const e=Ce();return t.jsxs(Nt,{children:[t.jsx(_t,{children:t.jsx(Ar,{})}),t.jsxs(Bt,{children:[t.jsx(Wt,{children:tt.transactionTable.emptyTransactions.title}),t.jsx(Ut,{windowSize:e,children:tt.transactionTable.emptyTransactions.subTitle})]})]})},hd=({cardType:e,cardHolderUser:i})=>{const d=i!=null?i.firstName+" "+i.lastName:"",h=Ce();return t.jsxs(Nt,{children:[t.jsx(_t,{children:t.jsx(Id,{})}),t.jsxs(Bt,{children:[t.jsx(Wt,{children:tt.transactionTable.pendingProfileCompletion.title}),t.jsx(Ut,{windowSize:h,children:tt.transactionTable.pendingProfileCompletion.subTitle[e].replace("__user__",d)})]})]})},pd=({cardHolderUser:e})=>{const i=Ce();return t.jsxs(Nt,{children:[t.jsx(_t,{children:t.jsx(Ar,{})}),t.jsxs(Bt,{children:[t.jsx(Wt,{children:tt.transactionTable.pendingActivation.title}),t.jsx(Ut,{windowSize:i,children:tt.transactionTable.pendingActivation.subTitle.replace("__user__",e?.firstName??"")})]})]})},ud=({index:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,style:h,transactions:m,isAiCategorizationEnabledForCardsTransactions:u,uploadReceiptsFetchStateByTransactionId:s,uploadReceiptsShowTickByTransactionId:x,isViewReceiptClickedImmediatelyAfterUploadTransactionId:l,cardId:f,cardsEndPoint:w,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:C,receiptRequiredAboveAmount:b,authParams:L,updateChargeCardTransactionAttachments:S,onUploadReceiptComplete:$,updateChargeCardTransactionUploadReceiptsFetchStatus:y,updateChargeCardTransactionReceiptsShowTick:g,updateChargeCardTransactionIsViewReceiptClicked:D,onChargeCardTransactionRowClick:v,removeSnackbar:O})=>t.jsx(vd,{style:{...h,width:"100%"},className:"spend-management-list-item",children:t.jsx(gd,{documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,cardId:f,isAiCategorizationEnabledForCardsTransactions:u,cardsEndPoint:w,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:C,authParams:L,receiptRequiredAboveAmount:b,transaction:m[e],uploadReceiptsFetchState:s?.[m[e].id],uploadReceiptsShowTick:x?.[m[e].id],isViewReceiptClickedImmediatelyAfterUpload:l?.[m[e].id],updateChargeCardTransactionAttachments:S,onUploadReceiptComplete:$,updateChargeCardTransactionUploadReceiptsFetchStatus:y,updateChargeCardTransactionReceiptsShowTick:g,updateChargeCardTransactionIsViewReceiptClicked:D,onChargeCardTransactionRowClick:v,removeSnackbar:O},m[e].id)}),md=({transaction:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:d,isAiCategorizationEnabledForCardsTransactions:h,uploadReceiptsFetchState:m,uploadReceiptsShowTick:u,isViewReceiptClickedImmediatelyAfterUpload:s,cardsEndPoint:x,transactionAttachmentsEndpointToFetch:l,transactionAttachmentEndpointToDownload:f,cardId:w,receiptRequiredAboveAmount:n,authParams:C,updateChargeCardTransactionAttachments:b,onUploadReceiptComplete:L,updateChargeCardTransactionUploadReceiptsFetchStatus:S,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:y,onChargeCardTransactionRowClick:g,removeSnackbar:D})=>{const v=Ce()==="small"?Os:ps;return t.jsx(v,{isSnackbarOpen:d,documentAiReceiptMaxSizeLimit:i,isAiCategorizationEnabledForCardsTransactions:h,transactionAttachmentsEndpointToFetch:l,transactionAttachmentEndpointToDownload:f,uploadReceiptsFetchState:m,uploadReceiptsShowTick:u,isViewReceiptClickedImmediatelyAfterUpload:s,transaction:e,cardId:w,receiptRequiredAboveAmount:n,cardsEndPoint:x,authParams:C,updateChargeCardTransactionAttachments:b,onUploadReceiptComplete:L,updateChargeCardTransactionUploadReceiptsFetchStatus:S,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:y,onChargeCardTransactionRowClick:g,removeSnackbar:D})},gd=o.memo(md),Cd=(e,i,d,h,m)=>t.jsx(Dr,{...e,onColumnSortConfigChanged:m,hideSorting:i,uiState:{sortKey:d.sortKey,sortOrder:d.sortOrder},fetchState:h}),Dr=o.forwardRef((e,i)=>{const{children:d,style:h,uiState:m,onColumnSortConfigChanged:u,hideSorting:s,...x}=e;return t.jsxs(jd,{ref:i,style:{...h,width:"auto"},...x,children:[t.jsx(Gn,{onColumnSortConfigChanged:u,sortConfig:{sortKey:m.sortKey,sortOrder:m.sortOrder},hideSorting:s}),t.jsx(xd,{children:d})]})});Dr.displayName="Charge Card Transaction list View inner element type";const fd=r.div`
+  display: block;
+  height: ${e=>e.isEmptyTransaction?"calc(100vh - 436px)":"calc(100vh - 224px)"};
+  width: 100%;
+`,wd=r.div`
+  height: 100%;
+`,xd=r.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,yd=r.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,bd=r.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Sd=r.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${a.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,$d=r(Mt)`
+  margin-top: ${a.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,vd=r.div`
+  top: ${a.sp0};
+  left: ${a.sp0};
+  padding-bottom: ${a.sp3};
+  box-sizing: border-box;
+`,kd=r.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${a.sp3};
+  margin-bottom: ${a.sp3};
+`,Ld=r.div`
+  display: flex;
+  width: 100%;
+  height: auto;
+  padding-bottom: ${a.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`,Nt=r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${a.sp2};
+  height: 100%;
+  margin: ${a.sp0} ${a.sp3};
+`,Bt=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,Wt=r(Ti)`
+  color: ${e=>e.theme.colors.brandColorJade};
+`,Ut=r(Ri)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>e.windowSize!=="small"?pe`
+          white-space: pre;
+        `:null};
+  text-align: center;
+`,_t=r.div``,jd=r.div``,Ar=r(nd)``,Id=r(sd)``,{spendManagement:Dd}=he.getLocalizedStrings(),{cardDetails:Ae}=Dd.chargeCard,Ad=ur`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`,Td=e=>{switch(e){case"slide-in-right-to-left-add-to-wallet":return Ad;default:return null}},Rd=r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: inherit;
+`,Fd=r(Rd)`
+  animation: ${e=>Td(e.className)} 0.3s forwards;
+`,Ed=({chargeCardDetailView:e,walletType:i,secretRevealed:d,isDrawerOpen:h,vgsVaultId:m,showSecretInfo:u,changePinInProcess:s,isSandboxEnv:x,controllerEmails:l,isChargeCardFeatureEnabled:f,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:n,isChargeCardSetupEnabled:C,chargeCardCashbackDetailState:b,isCardDetailErrored:L,creditAccountRepayment:S,productInformation:$,creditAccountInformation:y,debitAccountInformation:g,cashbackInformation:D,signedInUserToken:v,selectedColor:O,showDrawerAnimation:T,cardDetailsFetchState:z,setCardDetailsFetchState:G,setIsCardDetailErrored:J,setShowSecretInfo:U,setSecretRevealed:A,setShowChangePinPopup:H,setIsAddToWalletDrawerOpen:Q,isCardDetailFetching:re,handleColorCodeClick:F,onFireOnClickAnalytics:K,onVerifyOtp:_,onVerifyOtpSuccess:oe,onResendOtp:ee,onFireVerifyPopOnClickAnalytics:P,onGetOtp:ae})=>{const N=Ye(),[ie,X]=o.useState(!1),[j,q]=o.useState(!1),R=T.current;return o.useEffect(()=>{h?document.body.style.overflow="hidden":document.body.style.overflow="unset"},[h,T]),t.jsx(Qr,{onClose:()=>{Q(!1)},anchor:"right",open:!0,PaperProps:{style:{maxWidth:"512px",boxShadow:"none",background:"transparent"}},style:{backgroundColor:p.drawerBackground,display:h?"unset":"none"},disableScrollLock:!h,transitionDuration:250,"data-testid":Y("add-card-to-wallet-drawer"),children:t.jsxs(t.Fragment,{children:[t.jsx(Ja,{phoneNumberPopupDescription:Ae.verifyPhoneNumberDescription,showOtpPopup:ie,showPhoneNumberPopup:j,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:_,onVerifyOtpSuccess:se=>{oe(se),s?H(!0):U(!0)},onFireVerifyPopOnClickAnalytics:P,setShowOtpPopup:X,onResendOtp:ee,setShowPhoneNumberPopup:q,onGetOtp:ae}),t.jsxs(Fd,{className:R,children:[t.jsx(ei,{title:i==="apple"?Ae.addCardToAppleWallet:Ae.addCardToGoogleWallet,style:{zIndex:4},backgroundColor:N.colors.grey4,onCloseClick:()=>Q(!1)}),t.jsxs(Pd,{children:[t.jsxs(Hd,{children:[t.jsxs(Md,{children:[t.jsx(Yd,{children:t.jsx(Gd,{})}),t.jsx(Bd,{children:Ae.openWalletAppOnPhone})]}),t.jsx(Wd,{children:i==="apple"?Ae.openWalletDescriptionApple:Ae.openWalletDescriptionGoogle}),t.jsx(yr,{chargeCardDetailView:e,creditAccountRepayment:S,creditAccount:e.creditAccount,setShowSecretInfo:U,secretRevealed:d,isOwnCard:!0,controllerEmails:l,isChargeCardFeatureEnabled:f,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:n,isChargeCardSetupEnabled:C,chargeCardCashbackDetailState:b,isShowingInDrawer:!0,vgsVaultId:m,showSecretInfo:u,isSandboxEnv:x,isCardDetailErrored:L,signedInUserToken:v,productInformation:$,creditAccountInformation:y,debitAccountInformation:g,cashbackInformation:D,selectedColor:O,cardDetailsFetchState:z,setCardDetailsFetchState:G,setIsCardDetailErrored:J,setSecretRevealed:A,isCardDetailFetching:re,handleColorCodeClick:F,onFireOnClickAnalytics:K,setShowPhoneNumberForOtp:q})]}),t.jsx(Od,{}),t.jsxs(Nd,{children:[t.jsxs(Vd,{children:[t.jsx(Zd,{children:t.jsx(qd,{})}),t.jsx(Ud,{children:Ae.verifyCard})]}),t.jsx(zd,{children:t.jsx(_d,{children:i==="apple"?Ae.VerifyCardDescriptionApple:Ae.VerifyCardDescriptionGoogle})})]})]})]})]})})},zd=r.div`
+  display: flex;
+  justify-content: end;
+`,Pd=r.div`
+  margin: ${a.sp3} ${a.sp8};
+`,Md=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp3};
+`,Vd=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp3};
+`,Od=r.div`
+  height: ${a.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  width: ${a.sp0};
+  margin-left: ${a.sp8};
+`,Hd=r.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${a.sp2};
+  padding: ${a.sp4} ${a.sp5};
+  box-shadow: ${a.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,Nd=r.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${a.sp2};
+  padding: ${a.sp4} ${a.sp5};
+  box-shadow: ${a.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,Bd=r(Ot)`
+  color: ${e=>e.theme.colors.primary};
+`,Wd=r(ye)`
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${a.sp9};
+  padding-bottom: ${a.sp4};
+`,Ud=r(Ot)`
+  color: ${e=>e.theme.colors.primary};
+`,_d=r(ye)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 274px;
+`,Zd=r.div`
+  padding: 12px;
+  border-radius: ${a.sp4};
+  background: ${p.successLight};
+  display: flex;
+`,Yd=r.div`
+  padding: 12px;
+  border-radius: ${a.sp4};
+  background: ${e=>e.theme.colors.graphColor16Light};
+  display: flex;
+`,qd=r(bi)`
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,Gd=r(Gi)`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e=>e.theme.colors.graphColor16Dark};
+`,{spendManagement:{chargeCard:{cardDetails:Be}},common:{strings:Kd}}=he.getLocalizedStrings(),Zt={iFrameWidth:new I(188,188)};function Xd({isSandboxEnv:e,cardProviderID:i,vgsVaultId:d,signedInUserToken:h,onCancelClick:m,onUpdateDebitCardPinAttempt:u,onChangePinSuccess:s}){const x=Ce(),l=Ye(),[f,w]=o.useState({}),[n,C]=o.useState(!1),[b,L]=o.useState(!1),[S,$]=o.useState(!0),[y,g]=o.useState(!0),[D,v]=o.useState(!1),[O,T]=o.useState(!1),[z,G]=o.useState(!1),[J,U]=o.useState(!1),[A,H]=o.useState(!1),[Q,re]=o.useState(!1),[F,K]=o.useState(!1),[_,oe]=o.useState(null),[ee,P]=o.useState(null),[ae]=Qa("https://js.verygoodvault.com/vgs-collect/2.27.0/vgs-collect.js"),N=e?"SANDBOX":"live";o.useEffect(()=>{if(ae){const j=window.VGSCollect.create(d,N,se=>{const E=se["data.attributes.oldPin"],k=se["data.attributes.newPin"];E?.isTouched===!0&&E?.isValid===!1&&E?.isFocused===!1?U(!0):(E?.isTouched===!0&&E?.isValid===!0&&E?.isFocused===!1||E?.isTouched===!0&&E?.isValid===!0&&E?.isFocused===!0)&&(U(!1),K(!1)),k?.isTouched===!0&&k?.isValid===!1&&k?.isFocused===!1?H(!0):(k?.isTouched===!0&&k?.isValid===!0&&k?.isFocused===!1||k?.isTouched===!0&&k?.isValid===!0&&k?.isFocused===!0)&&H(!1)}),q=j.field("#oldPin",{type:"text",name:"data.attributes.oldPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...Z.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:l.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:l.colors.grey1,...Z.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:p.important,background:p.importantLight},"&:focus":{background:`${l.colors.background} !important`,textAlign:"left",color:`${l.colors.primary} !important`}}}),R=j.field("#newPin",{type:"text",name:"data.attributes.newPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...Z.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:l.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:l.colors.grey1,...Z.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:p.important,background:p.importantLight},"&:focus":{background:`${l.colors.background} !important`,textAlign:"left",color:`${l.colors.primary} !important`}}});oe(q),P(R),w(j),Promise.all([q.promise,R.promise]).then(function(){L(!0)})}},[ae]),o.useEffect(()=>{_?.update({hideValue:S})},[_,S]),o.useEffect(()=>{ee?.update({hideValue:y})},[ee,y]);const ie=j=>{C(!0),K(!1),f.submit?.("/cards/"+i+"/secure-data/pin",{method:"PUT",mapDotToObject:"true",headers:{"Content-Type":"application/vnd.api+json",Authorization:"Bearer "+j?.token}},function(q,R){q===200?(v(!1),T(!1),s(),u("success")):(U(!0),u("failed"),R.errors?.[0].title.toLowerCase().includes("max")?re(!0):R.errors?.[0].title.toLowerCase().includes("invalid")&&K(!0),C(!1))},q=>{console.log("error",q),C(!1)})},X={onOkClick:()=>{if(!f.state)return;const j=f.state["data.attributes.newPin"]?.isValid,q=f.state["data.attributes.oldPin"]?.isValid;G(!0),j===!0&&q===!0&&ie(h)},onCancelClick:m};return t.jsx(Xr,{titleComponent:t.jsx(Jd,{children:Be.changePin}),descriptionComponent:t.jsxs(Qd,{children:[t.jsxs(ic,{children:[t.jsxs(Wa,{showFieldError:J,windowSize:x,isFirstField:!0,validation:z,onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),oldPinInputHighlighted:D,children:[t.jsx(Ha,{children:Be.existingPin}),t.jsxs(Na,{windowSize:x,children:[t.jsx(rc,{id:"oldPin",className:"cc-old-pin-form-field",windowSize:x}),t.jsx(Ma,{onClick:()=>$(!S),"data-testid":Y("cc-old-pin-show-text"),children:S?t.jsx(Va,{}):t.jsx(Oa,{})})]})]}),t.jsx(tc,{}),t.jsxs(Wa,{showFieldError:A,windowSize:x,isFirstField:!1,validation:z,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),newPinInputHighlighted:O,children:[t.jsx(Ha,{children:Be.newPin}),t.jsxs(Na,{windowSize:x,children:[t.jsx(ac,{id:"newPin",className:"cc-new-pin-form-field",windowSize:x}),t.jsx(Ma,{onClick:()=>g(!y),"data-testid":Y("cc-new-pin-show-text"),children:y?t.jsx(Va,{}):t.jsx(Oa,{})})]})]})]}),F?t.jsx(Ba,{children:Be.incorrectCurrentPIN}):null,Q?t.jsx(Ba,{children:Be.pinAttemptsReached}):null]}),primaryButtonText:"Change",primaryButtonWidth:87,isLoading:n,isDisabled:b===!1||Q,secondaryButtonWidth:87,buttonContainerStyle:{paddingTop:a.sp3,paddingBottom:a.sp2},secondaryButtonText:"Cancel",action:X,containerStyle:{maxWidth:"544px"},footerHelperComponent:t.jsxs(Jr,{children:[t.jsx(ec,{children:Be.forgotYourPin}),Kd.space,Be.callTollFree]})})}const Jd=r(or)`
+  margin-top: ${a.sp7};
+  padding-left: ${a.sp8};
+  padding-right: ${a.sp8};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,Qd=r(wi)`
+  margin-top: ${a.sp5};
+  margin-bottom: ${a.sp5};
+`,ec=r.span`
+  color: ${e=>e.theme.colors.primary};
+`,Ma=r.div`
+  cursor: pointer;
+  margin-left: ${a.sp2};
+`,Va=r(xi)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Oa=r(yi)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Ha=r.label`
+  margin-top: ${a.sp2};
+`,Na=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 220px;
+`,Ba=r(ye)`
+  color: ${p.important};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: right;
+  margin-top: ${a.sp3};
+`,tc=r.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,ac=r.div`
+  border-radius: ${a.sp1};
+  height: ${a.sp6};
+  width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+`,rc=r.div`
+  border-radius: ${a.sp1};
+  height: ${a.sp6};
+  width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+`,ic=r.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${a.sp2};
+`,Wa=r.div`
+  display: flex;
+  padding: ${a.sp2};
+  padding-left: ${a.sp4};
+  align-items: start;
+  box-shadow: ${e=>`${a.sp0} 2px ${a.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${a.sp2};
+  justify-content: space-between;
+  background-color: ${e=>e.theme.colors.grey5};
+  gap: 11px;
+  &:hover {
+    z-index: 1;
+    outline: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+  iframe {
+    height: 100%;
+    width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+  }
+  .cc-new-pin-form-field {
+    background: ${e=>e.showFieldError?p.importantLight:e.newPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  .cc-old-pin-form-field {
+    background: ${e=>e.showFieldError?p.importantLight:e.oldPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  ${e=>e.isFirstField?pe`
+          border-bottom-left-radius: ${a.sp0};
+          border-bottom-right-radius: ${a.sp0};
+        `:pe`
+          border-top-left-radius: ${a.sp0};
+          border-top-right-radius: ${a.sp0};
+        `}
+  ${e=>e.validation?pe`
+          .vgs-collect-container__invalid:not(.vgs-collect-container__focused) {
+            background: ${p.importantLight};
+          }
+          .vgs-collect-container__focused) {
+            background: ${e.theme.colors.background};
+          }
+        `:null}
+`,Qe="spendLimit",Ue=he.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup,{dateFormat:Rt}=he.getLocalizedStrings();function oc({controllerEmails:e,isChargeCardFeatureEnabled:i,isDebitCardFeatureEnabled:d,isDebitCardSetupEnabled:h,isChargeCardSetupEnabled:m,chargeCardDetailView:u,creditAccount:s,creditAccountRepayment:x,signedInUser:l,isDebitCard:f,classListFetchState:w,currentLimitAmount:n,currentSpentAmount:C,productInformation:b,creditAccountInformation:L,debitAccountInformation:S,maxLimitAmount:$,isDisabled:y,updateLimitFetchState:g,recommendations:D,cardIssuedByRoles:v,cardHolderRoles:O,loggedInUserRole:T,cardIssuedByDepartmentName:z,cardHolderDepartmentName:G,onCancelClick:J,onSubmitClick:U}){const A=dt().analytics,H=Ce(),Q="SpendLimitForm",re=st();Ze.hasChargeCardAdminLevelAccess(re.loggedInUserRoleMap);const F=ti({mode:"onBlur",reValidateMode:"onBlur",defaultValues:{[Qe]:void 0}}),{control:K,formState:{errors:_}}=F,[oe,ee]=o.useState(void 0),P=ai({control:K,name:Qe}),ae=u.chargeCard?.type.code.includes("physical")===!0?u.chargeCard.cardActivationAttemptHistory[0]?.timestamp:u.chargeCard?.createTime,N=(u?.chargeCard?.recommendations??[]).map(k=>k.creditLimit.amount),ie=()=>{Ua({analytics:A,controllerEmails:e,isChargeCardFeatureEnabled:i,chargeCardDetailView:u,creditAccount:s,creditAccountRepayment:x,signedInUser:l,isDebitCard:f,classListFetchState:w,currentLimitAmount:n,recommendedLimitAmounts:N,cardActivationDate:ae,cardIssuedByRoles:v,cardHolderRoles:O,cardIssuedByDepartmentName:z,cardHolderDepartmentName:G,loggedInUserRole:T,clickItem:"Cancel",newSpendLimitAmount:P,productInformation:b,creditAccountInformation:L,debitAccountInformation:S}),J()},X=F.handleSubmit(()=>{const k=F.getValues(Qe);k!=null&&(Ua({analytics:A,controllerEmails:e,isChargeCardFeatureEnabled:i,chargeCardDetailView:u,creditAccount:s,creditAccountRepayment:x,signedInUser:l,isDebitCard:f,classListFetchState:w,currentLimitAmount:n,recommendedLimitAmounts:N,cardActivationDate:ae,cardIssuedByRoles:v,cardHolderRoles:O,cardIssuedByDepartmentName:z,cardHolderDepartmentName:G,loggedInUserRole:T,productInformation:b,creditAccountInformation:L,debitAccountInformation:S,clickItem:"Update",newSpendLimitAmount:k}),U(k))}),j=k=>{F.setValue(Qe,k,{shouldValidate:!0})},q=ri(_,Qe),R=he.getLocalizedStrings().common,se=Ct.largeLabelWidth.value(H);o.useEffect(()=>{ee(nc(C,$,P))},[P,C,$]);const E=(k,V)=>t.jsxs(Cc,{isSelected:P===k.amount,onClick:()=>j(k.amount),"data-testid":Y("quick-amount-button",V.toString()),children:[V===1&&t.jsx(fc,{}),xe("0,0.[00]",k)]},V);return t.jsx(sc,{windowSize:H,role:"presentation","data-testid":Y("update-spend-limit-popup"),children:t.jsx(ii,{onClickAway:()=>J(),children:t.jsxs(dc,{windowSize:H,children:[t.jsx(oi,{...F,children:t.jsxs(wc,{id:Q,onSubmit:k=>{k.preventDefault(),X()},children:[t.jsx(cc,{windowSize:H,children:Ue.heading}),t.jsxs(lc,{windowSize:H,children:[Ue.currentLimit,R.strings.space," ",xe("0,0.[00]",n),Ue.slashMonth]}),t.jsxs(mc,{hasError:q,children:[t.jsx(ni,{label:{label:Ue.newLimit,width:se},showAdditionalInfoLabel:q,additionalInfoLabel:oe,formattedTextField:{type:"number",name:Qe,defaultValue:void 0,placeholder:Ue.placeholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:k=>!!k&&k>0&&k>C.amount&&($!=null?k<=$.amount:!0)},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto"},showOutlineOnFocus:!1}),D?.length?t.jsx(gc,{windowSize:H,children:D?.map((k,V)=>E(k.creditLimit,V))}):null]})]})}),t.jsx(uc,{children:t.jsxs(hc,{children:[t.jsx(ft,{label:R.cancel,onClick:ie,style:{width:84},"data-testid":Y("update-spend-limit-cancel-button")}),t.jsx(pc,{}),t.jsx(ft,{variant:"primary",label:R.texts.update,style:{width:84,whiteSpace:"nowrap"},loading:g==="In-Progress",type:"submit",form:Q,"data-testid":Y("update-spend-limit-submit-button"),disabled:y})]})})]})})})}const nc=(e,i,d)=>{if(d!=null){if(d<=e.amount)return Ue.amountBelowError.replace("_amount_",xe("0,0.[00]",e));if(i!=null&&d>i.amount)return Ue.amountExceedError.replace("_amount_",xe("0,0.[00]",i))}},Ua=({analytics:e,controllerEmails:i,isChargeCardFeatureEnabled:d,productInformation:h,creditAccountInformation:m,debitAccountInformation:u,chargeCardDetailView:s,creditAccount:x,creditAccountRepayment:l,signedInUser:f,isDebitCard:w,classListFetchState:n,currentLimitAmount:C,recommendedLimitAmounts:b,cardActivationDate:L,cardIssuedByRoles:S,cardHolderRoles:$,cardIssuedByDepartmentName:y,cardHolderDepartmentName:g,loggedInUserRole:D,clickItem:v,newSpendLimitAmount:O})=>{s.chargeCard!=null&&n==="Completed"&&s.transactionStatistics.fetchState==="Completed"&&(!d||x.fetchState==="Completed"&&l.fetchState==="Completed")&&(!w||s.depositAccountLimitFetchState.fetchState==="Completed")&&e.trackCardsUpdateSpendLimitClick(i,h,{cardId:s.chargeCard.id,cardName:s.chargeCard.cardName,cardType:gr(s.chargeCard.type.code),cardCategory:s.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:je(s.chargeCard.limit.amount),cardLastFourDigits:s.chargeCard.accountLast4,cardStatus:s.chargeCard.status.code,cardAssignedDate:s.chargeCard.createTime?.format(Rt.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:s.chargeCard.providerCardCreateTime?.format(Rt.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:L?.format(Rt.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:s.chargeCard.creditLimitFrequency.name,cardSpentAmount:je(s.chargeCard.balance.amount),cardAvailableLimit:je(s.chargeCard.available.amount),cardUtilizationPercent:mr(s.chargeCard.limit.amount,s.chargeCard.available.amount),cardUtilizationAmount:je(Cr(s.chargeCard)),totalNumberOfDeclinedTransactions:s.transactionStatistics.statistics.totalNumberOfDeclinedTransactions,numberOfDeclinedTransactionsCurrentMonth:s.transactionStatistics.statistics.numberOfDeclinedTransactionsCurrentMonth,totalNumberOfPaidTransactions:s.transactionStatistics.statistics.totalNumberOfPaidTransactions,numberOfPaidTransactionsCurrentMonth:s.transactionStatistics.statistics.numberOfPaidTransactionsCurrentMonth,totalNumberOfCanceledTransactions:s.transactionStatistics.statistics.totalNumberOfCanceledTransactions,numberOfCanceledTransactionsCurrentMonth:s.transactionStatistics.statistics.numberOfCanceledTransactionsCurrentMonth,totalNumberOfAuthorizedTransactions:s.transactionStatistics.statistics.totalNumberOfAuthorizedTransactions,numberOfAuthorizedTransactionsCurrentMonth:s.transactionStatistics.statistics.numberOfAuthorizedTransactionsCurrentMonth,totalNumberOfTransactionsWithReceipts:s.transactionStatistics.statistics.totalNumberOfTransactionsWithReceipts,numberOfTransactionsWithReceiptsCurrentMonth:s.transactionStatistics.statistics.numberOfTransactionsWithReceiptsCurrentMonth},{cardIssuedByName:wt(s.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:s.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:s.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:S,cardIssuedByDepartment:y},{cardholderName:wt(s.chargeCard.cardHolderUser,!1),cardholderEmail:s.chargeCard.cardHolderUser?.email,cardholderRole:$,cardholderUserId:s.chargeCard.cardHolderUser?.userId,cardholderDepartment:g},{cardLimitUpdatedByName:Si(f),cardLimitUpdatedByEmail:f.userEmail,cardLimitUpdatedByRole:D,cardLimitUpdatedByUserId:f.userId},v,je(C.amount),b,O!=null?b.includes(O):!1,O,m,u)},Ct={width:new I(343,500,500),largeLabelWidth:new I(108,108,108),popupLeftRightPadding:new I(c[5],c[6]),popupTopBottomPadding:new I(c[5],c[5])},sc=r.div`
+  position: fixed;
+  top: ${a.sp0};
+  left: ${a.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${p.overlayDark};
+`,dc=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${e=>e.theme.colors.grey4};
+  border-radius: ${a.sp2};
+  position: relative;
+  margin: auto;
+  width: ${e=>Ct.width.valuePx(e.windowSize)};
+  padding: ${e=>`${Ct.popupTopBottomPadding.valuePx(e.windowSize)} ${Ct.popupLeftRightPadding.valuePx(e.windowSize)}`};
+  box-sizing: border-box;
+`,cc=r(or)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${a.sp2};
+`,lc=r(ye)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${a.sp3};
+`,hc=r.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${a.sp4};
+`,pc=r.div`
+  width: ${a.sp3};
+`,uc=r.div`
+  display: flex;
+  flex-direction: column;
+`,mc=r.div`
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`${a.sp0} 1px 2px ${a.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${a.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+    input {
+      background-color: ${e=>e.hasError?p.importantLight:e.theme.colors.background} !important;
+    }
+  }
+`,gc=r.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${a.sp2};
+  margin: ${a.sp0} ${a.sp4} ${a.sp3} ${a.sp4};
+`,Cc=r(ye)`
+  color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+  border: 1px solid
+    ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.grey2};
+  border-radius: ${a.sp1};
+  padding: 2px ${a.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  :hover {
+    color: ${e=>e.theme.colors.primary};
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+`,fc=r(Di)`
+  color: ${p.brandColorJade};
+  fill: ${p.brandColorJade};
+  width: ${a.sp3};
+  height: ${a.sp3};
+`,wc=r.form`
+  display: contents;
+`,ve={bottomContentContainerPadding:new I(c[3],c[8]),styledAIIconContainerSize:new I(c[3],c[3]),bannerWrapperMarginLeftRight:new I(c[3],c[8]),payNowSectionPaddingLeftRight:new I(c[3],c[0]),styledHighImportanceIconMarginRight:new I(c[0],c[1])},{common:fe,spendManagement:xc,dateFormat:yc}=he.getLocalizedStrings(),we=xc.chargeCard,ll=({chargeCardDetailView:e,cardsEndPoint:i,classListFetchState:d,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:m,authParams:u,hideSorting:s,cardId:x,vgsVaultId:l,controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,chargeCardCashbackDetailState:L,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,creditAccount:D,cardIssuedByRoles:v,cardIssuedByDepartmentName:O,cardHolderRoles:T,cardHolderDepartmentName:z,loggedInUserRole:G,appleWalletLink:J,googleWalletLink:U,signedInUser:A,signedInUserToken:H,isSandboxEnv:Q,isEarlyPayEnabled:re,documentAiReceiptMaxSizeLimit:F,isSnackbarOpen:K,onFireOnClickAnalytics:_,onUpdateDebitCardPinAttempt:oe,onFireVerifyPopOnClickAnalytics:ee,onBackClick:P,onReloadTransactions:ae,onFetchChargeCardTransactionList:N,onGetOtp:ie,onResendOtp:X,onVerifyOtp:j,onVerifyOtpSuccess:q,onColorCodeChange:R,onColumnSortConfigChanged:se,updateChargeCardTransactionAttachments:E,updateChargeCardTransactionUploadReceiptsFetchStatus:k,updateChargeCardTransactionReceiptsShowTick:V,updateChargeCardTransactionIsViewReceiptClicked:B,onUploadReceiptComplete:ne,removeSnackbar:Ie,onChargeCardTransactionRowClick:De,onUpdateScrollYOffset:Te,updateSpendLimit:He,shouldOpenCreditCardPaymentDrawer:Re})=>{const te=o.useRef(!0),de=Ye(),M=Ce(),Fe=st(),ke=dt().analytics,[,qe]=Ka(),[Ee,ht]=o.useState(!1),[rt,pt]=o.useState(!1),[W,ce]=o.useState(!1),[le,ze]=o.useState(!1),[Pe,Yt]=o.useState(!1),[bt,qt]=o.useState(!1),[Rr,Fr]=o.useState(!1),[Er,Gt]=o.useState(!1),[zr,St]=o.useState(!1),[Ge,$t]=o.useState(!1),[Kt,vt]=o.useState(!1),[Xt,Jt]=o.useState(!1),[Pr,Qt]=o.useState(!1),[Mr,Vr]=o.useState("apple"),[ea,ta]=o.useState({number:!1,cvv:!1});o.useEffect(()=>{Ge===!1&&vt(!1)},[Ge]);const aa=o.useRef("noAnimation"),it=e.chargeCard?.cardHolderUserId===A.userId,kt=`${e.chargeCard?.cardHolderUser?.firstName??""} ${e.chargeCard?.cardHolderUser?.lastName??""}`,ra=e.chargeCard?.billingAddress,Ke=Ze.hasChargeCardAdminLevelAccess(Fe.loggedInUserRoleMap),{text1:Or,text2:Hr}=qr(ra),ia=`${Or} ${Hr}`,Lt=e.chargeCard?.isDeclinedTransaction===!0,Nr=()=>{Ft({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:be,isChargeCardAdmin:Ke,analytics:ke,controllerEmails:f,actionField:"Receipt Email",actionDetails:e.chargeCardConfig.receiptBotEmail}),qe(e.chargeCardConfig.receiptBotEmail),ht(!0)},Br=()=>{_("card owner copied"),Ft({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:be,isChargeCardAdmin:Ke,analytics:ke,controllerEmails:f,actionField:"Card Owner",actionDetails:kt}),qe(kt),Yt(!0)},Wr=()=>{_("billing address copied"),Ft({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:be,isChargeCardAdmin:Ke,analytics:ke,controllerEmails:f,actionField:"Billing Address",actionDetails:ia}),qe(ia),qt(!0)};o.useEffect(()=>{Ee===!0&&setTimeout(()=>{ht(!1)},800),Pe===!0&&setTimeout(()=>{Yt(!1)},800),bt===!0&&setTimeout(()=>{qt(!1)},800)},[Pe,bt,Ee]);const[Gc,Ur]=o.useState(!1),[oa,na]=o.useState(e.chargeCard?.cardColorCode!=null?new _e(e.chargeCard.cardColorCode):void 0);o.useEffect(()=>{e.chargeCard?.cardColorCode!=null&&na(new _e(e.chargeCard.cardColorCode))},[e.chargeCard?.cardColorCode]);const sa={amount:e.chargeCard!=null?e.chargeCard.balance.amount:0,currencyCode:e.chargeCard!=null?e.chargeCard.balance.currencyCode:fe.currency.countryCode,currencySymbol:e.chargeCard!=null?e.chargeCard.balance.currencySymbol:fe.currency.currencySymbol};o.useEffect(()=>{te.current===!0?te.current=!1:_(Ge===!1?"card details hidden":"card detail revealed")},[Ge]);const da=(Le,Xe)=>{if(Xe===!0){const ut=qi(Le.toString())??fe.strings.empty;_("color selected",ut),R(ut),Ur(!1)}na(Le)},ca=Le=>{const{cvv:Xe,number:ut}=Le;return Xe===!0||ut===!0},{isMobileOrTabletScreen:la}=Xa(),jt=e.chargeCard?.status.code!=="request_on_hold"&&e.chargeCard?.status.code!=="inactive";o.useEffect(()=>{(e.updateChargeCardLimitFetchState.fetchState==="Completed"||e.updateChargeCardLimitFetchState.fetchState==="Error")&&St(!1)},[e.updateChargeCardLimitFetchState]);const be=e.chargeCard?.type.code==="business_physical_debit_card"||e.chargeCard?.type.code==="business_virtual_debit_card",_r=Ke&&e.chargeCard?.status.code==="active"&&sa.amount<(be?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit.amount??0:e.creditAccount.limit.amount),Zr=e.creditAccountRepayment.initiatedRepayments.amount>0&&Ke&&Lt,Yr=t.jsx("div",{children:t.jsx(Gr,{entity:"debit_cards",onOptionSelection:Le=>{Le==="changePin"&&(H==null||H.expiry.isBefore(new Date)?ie(e.loggedInUserPhone):ze(!0),ce(!0))},isMoreOption:!0,options:[{value:"changePin",label:we.cardDetails.changePin}],customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}})}})});return t.jsxs(Ec,{children:[le&&e.chargeCard?.cardProviderID!=null?t.jsx(Xd,{signedInUserToken:H,vgsVaultId:l,onCancelClick:()=>{ze(!1),ce(!0)},isSandboxEnv:!0,cardProviderID:e.chargeCard?.cardProviderID,onChangePinSuccess:()=>{ze(!1),ce(!0)},onUpdateDebitCardPinAttempt:oe}):null,la?null:t.jsx(Ed,{controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,chargeCardCashbackDetailState:L,creditAccountRepayment:e.creditAccountRepayment,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,creditAccount:e.creditAccount,selectedColor:oa,walletType:Mr,onFireOnClickAnalytics:_,isSandboxEnv:Q,chargeCardDetailView:e,vgsVaultId:l,signedInUserToken:H,showSecretInfo:Ge,changePinInProcess:W,setShowChangePinPopup:ze,isCardDetailErrored:Xt,cardDetailsFetchState:ea,setCardDetailsFetchState:ta,setIsCardDetailErrored:Jt,isCardDetailFetching:ca,handleColorCodeClick:da,isDrawerOpen:Pr,setIsAddToWalletDrawerOpen:Qt,onVerifyOtp:j,onVerifyOtpSuccess:q,onFireVerifyPopOnClickAnalytics:ee,onResendOtp:X,setShowSecretInfo:$t,secretRevealed:Kt,setSecretRevealed:vt,onGetOtp:ie,showDrawerAnimation:aa}),t.jsx(Kr,{rightSideComponent:it&&be?Yr:null,navBarContainerStyles:{paddingTop:c[2],alignItems:"center",paddingBottom:c[2]},source:"ChargeCardDetailPage",title:e.chargeCard?.cardName??fe.strings.empty,subTitle:e.fetchState==="Completed"&&e.chargeCard!=null?t.jsx(ao,{cardDetail:e.chargeCard,forDetailPage:!0}):void 0,showBackButton:!0,showMenuIcon:!1,backgroundColor:de.colors.grey5,style:{zIndex:3},onBackClick:P,titleStyle:{marginTop:c[0],...M==="small"&&{textAlign:"left"}},leftComponentStyle:M==="small"?{width:"10%"}:void 0,middleComponentStyle:M==="small"?{width:"80%"}:void 0,rightComponentStyle:M==="small"?{width:"10%"}:void 0}),t.jsx(Ja,{phoneNumberPopupDescription:we.cardDetails.verifyPhoneNumberDescription,showOtpPopup:Rr,showPhoneNumberPopup:Er,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:j,onVerifyOtpSuccess:Le=>{q(Le),W?ze(!0):$t(!0)},onFireVerifyPopOnClickAnalytics:ee,setShowOtpPopup:Fr,onResendOtp:X,setShowPhoneNumberPopup:Gt,onGetOtp:ie}),zr&&t.jsx(oc,{controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,chargeCardDetailView:e,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,signedInUser:A,isDebitCard:be,cardIssuedByRoles:v,cardHolderRoles:T,loggedInUserRole:G,cardIssuedByDepartmentName:O,cardHolderDepartmentName:z,classListFetchState:d,currentLimitAmount:e.chargeCard?.limit??{amount:0,currencyCode:fe.currency.countryCode,currencySymbol:fe.currency.currencySymbol},currentSpentAmount:e.chargeCard?.balance??{amount:0,currencyCode:fe.currency.countryCode,currencySymbol:fe.currency.currencySymbol},maxLimitAmount:be?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit:e.creditAccount.limit,isDisabled:be&&e.depositAccountLimitFetchState.fetchState!=="Completed",updateLimitFetchState:e.updateChargeCardLimitFetchState.fetchState,onCancelClick:()=>St(!1),onSubmitClick:Le=>{if(e.chargeCard){const Xe={amount:Le,currencyCode:e.chargeCard.limit.currencyCode,currencySymbol:e.chargeCard.limit.currencySymbol};He(e.chargeCard.id,Xe,e.chargeCard.creditLimitFrequency,xe("0,0.[00]",Xe))}},recommendations:e?.chargeCard?.recommendations}),e.fetchState==="Error"?t.jsxs(Ic,{windowSize:M,children:[t.jsx(Tc,{onClick:ae,"data-testid":Y("reload-card-detail"),children:t.jsx(Fc,{})}),t.jsx(Rc,{children:fe.reloadPage.label})]}):t.jsxs(bc,{children:[t.jsx(pn,{controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,isDebitCard:be,chargeCardCashbackDetailState:L,cardIssuedByRoles:v,cardIssuedByDepartmentName:O,cardHolderRoles:T,cardHolderDepartmentName:z,classListFetchState:d,chargeCardDetailView:e,spent:sa,isCardNotPending:jt,cardOwnerName:kt,appleWalletLink:J,googleWalletLink:U,addressToShow:ra,secretRevealed:Kt,isOwnCard:it,vgsVaultId:l,showSecretInfo:Ge,isSandboxEnv:Q,isCardDetailErrored:Xt,signedInUserToken:H,selectedColor:oa,cardDetailsFetchState:ea,setCardDetailsFetchState:ta,setIsCardDetailErrored:Jt,setSecretRevealed:vt,isCardDetailFetching:ca,handleColorCodeClick:da,onFireOnClickAnalytics:_,setShowPhoneNumberPopup:Gt,setShowChangeSpendLimitPopup:St,setShowSecretInfo:$t,isOwnerNameCopied:Pe,isAddressCopied:bt,onOwnerNameCopyClick:Br,onAddressCopyClick:Wr,showUpdateSpendLimitAction:_r}),re?Zr?t.jsxs($c,{windowSize:M,children:[t.jsx(Vc,{}),t.jsx(kc,{children:` ${we.payEarly.paymentOf} ${xe("0,0.[00]",e.creditAccountRepayment.initiatedRepayments)} ${we.payEarly.madeOn} ${e.creditAccountRepayment.initiatedRepaymentDate?.format(yc.visual.MMMDFormat)} ${we.payEarly.isProcessing} ${we.payEarly.theCompanyCreditLimitWillUpdateIn23BusinessDays}`})]}):Lt?Ke?t.jsxs(Tr,{onClick:()=>{Re(!0)},windowSize:M,children:[t.jsx(_a,{windowSize:M}),t.jsxs(Dc,{children:[t.jsx(Za,{children:we.payEarly.transactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLow}),t.jsxs(Lc,{className:"pay-now-button",children:[we.payEarly.payNow,t.jsx(vc,{})]})]})]}):t.jsxs(Sc,{windowSize:M,children:[t.jsx(_a,{windowSize:M}),t.jsx(Ac,{children:t.jsx(Za,{children:we.payEarly.yourTransactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLowWeHaveNotifiedYourAdmin})})]}):null:null,it&&M!=="small"&&jt&&be===!1?t.jsx(ro,{style:{marginTop:Lt?a.sp5:a.sp4},classListFetchState:d,controllerEmails:f,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:b,chargeCardDetailView:e,creditAccount:D,creditAccountRepayment:e.creditAccountRepayment,productInformation:S,cashbackInformation:$,creditAccountInformation:y,debitAccountInformation:g,cardIssuedByRoles:v,cardHolderRoles:T,cardIssuedByDepartmentName:O,cardHolderDepartmentName:z,isDebitCard:be,appleWalletLink:J,googleWalletLink:U,setWalletType:Vr,setIsAddToWalletDrawerOpen:Qt,showDrawerAnimation:aa}):null,t.jsxs(qc,{windowSize:M,isOwnCard:it,isMobileOrTabletScreen:la,children:[jt&&e.transactions.length>0?t.jsxs(t.Fragment,{children:[t.jsxs(Pc,{windowSize:M,children:[we.cardDetails.transactionListTitle,t.jsx(Pt,{display:"flex",placement:"right",title:t.jsx(Oc,{children:we.cardDetails.transactionListTooltip.replace("__receiptRequiredAboveAmount__",e.chargeCardConfig.receiptRequiredAboveAmount.amount.toString())}),children:t.jsx(Mc,{})})]}),t.jsxs(Hc,{windowSize:M,children:[t.jsx(Uc,{windowSize:M,children:t.jsx(_c,{})}),t.jsxs(zc,{windowSize:M,children:[t.jsxs(Nc,{children:[t.jsx(jc,{children:we.aiCardAgentText}),fe.strings.space,we.receiptBotMessage,fe.strings.space]}),t.jsxs(Wc,{"data-testid":Y("charge-card-detail-copy-email"),onClick:Nr,onMouseEnter:()=>pt(!0),onMouseLeave:()=>pt(!1),children:[t.jsx(Bc,{children:e.chargeCardConfig.receiptBotEmail}),Ee===!0?t.jsxs(qa,{children:[t.jsx(Yc,{}),t.jsx(Ya,{children:t.jsx(Ga,{shouldDisplay:rt||Ee,color:p.primaryDark,children:fe.copyToClipBoard.copied})})]}):t.jsxs(qa,{children:[t.jsx(Zc,{color:rt?de.colors.primary:void 0}),t.jsx(Ya,{children:t.jsx(Ga,{shouldDisplay:rt&&M!=="small",children:fe.copyToClipBoard.copy})})]})]})]})]})]}):null,t.jsx(cd,{cardStatusCode:e.chargeCard?.status.code,cardCodeType:e.chargeCard?.type.code,cardId:x,documentAiReceiptMaxSizeLimit:F,uploadReceiptsFetchStateByTransactionId:e.uploadReceiptsFetchStateByTransactionId,isSnackbarOpen:K,uploadReceiptsShowTickByTransactionId:e.uploadReceiptsShowTickByTransactionId,isViewReceiptClickedImmediatelyAfterUploadTransactionId:e.isViewReceiptClickedImmediatelyAfterUploadTransactionId,receiptRequiredAboveAmount:e.chargeCardConfig.receiptRequiredAboveAmount,cardsEndPoint:i,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:m,authParams:u,hideSorting:s,transactions:e.transactions,cardHolderUser:e.chargeCard?.cardHolderUser,uiState:e.uiState,fetchState:e.transactionListFetchState.fetchState,isAiCategorizationEnabledForCardsTransactions:e.chargeCardConfig.isAiCategorizationEnabledForCardsTransactions,onReloadTransactions:ae,onFetchChargeCardTransactionList:N,isOwnCard:it,onColumnSortConfigChanged:se,removeSnackbar:Ie,onChargeCardTransactionRowClick:De,onUpdateScrollYOffset:Te,onUploadReceiptComplete:ne,updateChargeCardTransactionAttachments:E,updateChargeCardTransactionUploadReceiptsFetchStatus:k,updateChargeCardTransactionReceiptsShowTick:V,updateChargeCardTransactionIsViewReceiptClicked:B})]})]})]})},Ft=({chargeCardDetailView:e,chargeCardCashbackDetailState:i,isChargeCardFeatureEnabled:d,productInformation:h,cashbackInformation:m,creditAccountInformation:u,debitAccountInformation:s,creditAccount:x,creditAccountRepayment:l,isDebitCard:f,isChargeCardAdmin:w,analytics:n,controllerEmails:C,actionDetails:b,actionField:L})=>{e.chargeCard!=null&&i.fetchState==="Completed"&&(!d||x.fetchState==="Completed"&&l.fetchState==="Completed")&&(!(f&&w)||e.depositAccountLimitFetchState.fetchState==="Completed")&&n.trackCardsCopyIconClick(C,h,"Cards Detail","Copy","copied",L,b,m,u,s)},bc=r.div``,Tr=r.div`
+  background: ${p.important};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${a.sp3};
+  padding-bottom: ${a.sp3};
+  padding-left: ${({windowSize:e})=>ve.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>ve.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${a.sp1};
+  align-items: start;
+  cursor: pointer;
+  :hover {
+    .pay-now-button {
+      text-decoration: underline;
+    }
+  }
+`,Sc=r(Tr)``,$c=r.div`
+  background: ${p.alertLight};
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  padding-top: ${a.sp3};
+  padding-bottom: ${a.sp3};
+  padding-left: ${({windowSize:e})=>ve.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>ve.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${a.sp2};
+`,_a=r(ci)`
+  color: ${e=>e.theme.colors.grey5};
+  margin-right: ${({windowSize:e})=>ve.styledHighImportanceIconMarginRight.valuePx(e)};
+  min-width: ${a.sp4};
+  width: ${a.sp4};
+  height: ${a.sp4};
+  path:nth-child(2),
+  path:nth-child(3) {
+    stroke: ${p.important};
+  }
+`,vc=r(li)`
+  color: ${e=>e.theme.colors.grey5};
+  min-width: 12px;
+  width: 12px;
+  height: 12px;
+`,Za=r(Vt)`
+  color: ${e=>e.theme.colors.grey5};
+`,kc=r(Vt)`
+  color: ${p.brandColorGoldDark};
+`,Lc=r(rr)`
+  color: ${e=>e.theme.colors.grey5};
+  gap: ${a.sp1};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+`,jc=r(mi)`
+  color: ${e=>e.theme.colors.brandColorSapphire};
+  ${({theme:e})=>e.mode==="dark"&&`color: ${p.brandColorPearl};`}
+`,Ic=r.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - ${e=>si.valuePx(e.windowSize)});
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${e=>e.theme.colors.grey5};
+`,Dc=r.div``,Ac=r.div``,Tc=r.div`
+  height: ${a.sp12};
+  width: ${a.sp12};
+  background: ${e=>e.theme.colors.background};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${a.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Rc=r(Mt)`
+  margin-top: ${a.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Fc=r(er)`
+  height: ${a.sp5};
+  width: ${a.sp5};
+  margin: ${a.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ec=r.div`
+  background: ${e=>e.theme.colors.grey4};
+`,zc=r.div`
+  width: 100%;
+  max-width: ${e=>e.windowSize==="small"?"calc(100% - 20px)":"unset"};
+`,Pc=r(Ot)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${a.sp3};
+  display: flex;
+  align-items: center;
+  margin-right: ${e=>ve.bottomContentContainerPadding.valuePx(e.windowSize)};
+  margin-left: ${e=>ve.bottomContentContainerPadding.valuePx(e.windowSize)};
+`,Mc=r(ar)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${a.sp3};
+  height: ${a.sp3};
+  margin-left: ${a.sp2};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Vc=r(ar)`
+  color: ${p.brandColorGoldDark};
+  min-width: ${a.sp4};
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,Oc=r(me)`
+  padding: 2px ${a.sp2};
+  box-sizing: content-box;
+  color: ${e=>e.theme.colors.hero};
+  background: ${e=>e.theme.colors.black};
+  border-radius: ${a.sp1};
+  max-width: 178px;
+  text-align: left;
+`,Hc=r.div`
+  display: flex;
+  border: 1.25px solid transparent;
+  background: ${e=>`linear-gradient(${e.theme.colors.grey4}, ${e.theme.colors.grey4}) padding-box,
+    ${p.receiptAgentLinearGradient}
+      border-box`};
+  padding: ${a.sp3} ${a.sp4};
+  border-radius: ${a.sp2};
+  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
+  gap: ${a.sp1};
+  margin: 0
+    ${e=>ve.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
+`,Nc=r(Vt)`
+  color: ${e=>e.theme.colors.primary};
+`,Bc=r(rr)`
+  color: ${e=>e.theme.colors.primary};
+`,Wc=r.span`
+  cursor: pointer;
+`,Ya=r.span`
+  position: absolute;
+  bottom: -${a.sp5};
+  z-index: 10;
+  left: ${a.sp2};
+`,qa=r.span`
+  position: relative;
+  margin-left: ${a.sp1};
+  top: 2px;
+`,Ga=r(me)`
+  position: relative;
+  background: ${e=>e.theme.colors.black};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.grey1};
+  padding: 2px ${a.sp2};
+  z-index: 10;
+  border-radius: ${a.sp1};
+  left: -50%;
+  display: ${e=>e.shouldDisplay?"block":"none"};
+`,Uc=r.div`
+  width: ${e=>ve.styledAIIconContainerSize.valuePx(e.windowSize)};
+  min-width: ${e=>ve.styledAIIconContainerSize.valuePx(e.windowSize)};
+  height: ${e=>ve.styledAIIconContainerSize.valuePx(e.windowSize)};
+  top: ${a.sp1};
+  position: ${e=>e.windowSize==="small"?"relative":"static"};
+`,_c=r(ui)`
+  color: ${e=>e.theme.colors.brandColorJade};
+  width: 100%;
+  height: 100%;
+`,Zc=r(ir)`
+  height: ${a.sp3};
+  width: ${a.sp3};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Yc=r(ct)`
+  height: ${a.sp3};
+  width: ${a.sp3};
+  color: ${p.success};
+`,qc=r.div`
+  padding-top: ${e=>e.isOwnCard?e.isMobileOrTabletScreen?a.sp3:a.sp4:a.sp5};
+  padding-bottom: ${a.sp4};
+`;export{ll as default};