@zeniai/web-cockpit-ui 1.14.62-qa → 1.14.63-dev

package/dist/assets/ChargeCardDetailPage-DXUoIbZa-_LUfh5la.js

@@ -1,1813 +0,0 @@
-import{b as ot,q as Le,ax as Rt,a9 as zt,fX as $r,l as ut,hF as Ri,aU as at,F as ve,fY as vr,aP as rt,j as t,h3 as zi,bF as Pi,u as l,g4 as kr,aN as Je,aM as K,o as a,c5 as aa,h as d,i_ as jr,C as _,cD as Mi,i$ as Vi,fn as Oi,gW as Hi,bJ as Ni,bZ as Lr,aS as ra,j0 as Bi,j1 as Ir,y as A,bP as Dr,b9 as ia,X as Wi,aT as Ar,a$ as Ui,j2 as _i,j3 as Zi,b6 as oa,ai as ge,eT as Gi,iR as Yi,M as bt,fZ as Tr,P as St,b3 as qi,dG as Ji,cH as Xi,cE as Ki,di as Qi,hC as eo,am as Ve,c7 as to,j4 as ao,O as Oa,H as Er,b8 as ro,j5 as io,f_ as xt,dN as Ha,f9 as oo,n as Fr,cM as Rr,ca as na,s as sa,iU as zr,j6 as no,aw as At,cd as Na,bB as so,dx as co,an as gt,fU as lo,ar as ho,A as po,bL as uo,j7 as Pt,fB as mo,c3 as go,j8 as Pr,j9 as Mr,gI as Vr,ja as Et,ig as Or,iW as Co,cP as fo,ez as Hr,iX as wo,iY as xo,e6 as yo,dd as So,eF as bo,cu as $o,cv as vo}from"./index-BqKtrbrP.js";import{b as o,n as r,i as se,w as ko,k as Te}from"./vendor-Bs1fkIUX.js";import{j as jo}from"./NavigationDots-BKVFhe2Y-BXA4iaa-.js";import{L as Lo,H as pt,U as Ba,M as Io,F as Do,_ as Ao}from"./ChargeCardUtils-BeG5m9OQ-BnJ39MTB.js";import{A as To,i as Eo,a as Fo,l as Ro,r as zo,t as Po,n as Mo}from"./add-to-wallet-DgdBD8_G-XP_wmSR7.js";import{j as Vo}from"./CardNumberSubText-Crk5WDQr-DYNdDxcR.js";import{r as Nr}from"./mui-Ty75qFQF.js";import{f as Br}from"./uploadReceipts-9DTOr0BG-BFe5S3is.js";import{L as Oo,R as Ho,k as No,z as Bo}from"./LockCardPage-BA4Lj9Iy-DqX49N3M.js";import"./analytics-CcevxdRy.js";import"./routing-Dk1A2KYI.js";import"./sentry-BE5FTzpq.js";import"./redux-CEhZD0hA.js";import"./liveblocks-8ht9CoL5.js";import"./crypto-cQYYQPTZ.js";import"./RoleWithToolTip-MwI_BmVq-Ds1A2gyK.js";const Wr=ve.getLocalizedStrings().spendManagement.chargeCard,Wo=({controllerEmails:e,classListFetchState:i,isChargeCardFeatureEnabled:s,isDebitCardFeatureEnabled:u,isDebitCardSetupEnabled:h,isChargeCardSetupEnabled:f,chargeCardDetailView:c,productInformation:g,creditAccountInformation:m,debitAccountInformation:x,creditAccount:y,creditAccountRepayment:n,cardIssuedByRoles:C,cardIssuedByDepartmentName:w,cardHolderRoles:j,cardHolderDepartmentName:b,appleWalletLink:k,googleWalletLink:L,style:p,showDrawerAnimation:R,setWalletType:S,setIsAddToWalletDrawerOpen:M,isDebitCard:V})=>{const v=zt().analytics,{isIPadScreen:Y}=_i(),{isAndroidScreen:Q}=Zi(),Z=Rt(),I=ut.hasChargeCardAdminLevelAccess(Z.loggedInUserRoleMap);return t.jsx(Uo,{style:p,children:Y===!0?t.jsx(ta,{onClick:()=>{pt({chargeCardDetailView:c,classListFetchState:i,analytics:v,isDebitCard:V,isChargeCardAdmin:I,cardIssuedByRoles:C,cardIssuedByDepartmentName:w,cardHolderRoles:j,cardHolderDepartmentName:b,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",productInformation:g,creditAccountInformation:m,debitAccountInformation:x,isChargeCardFeatureEnabled:s,creditAccount:y,creditAccountRepayment:n}),window.open(k,"_blank")}}):Q===!0?t.jsx(ea,{onClick:()=>{pt({chargeCardDetailView:c,classListFetchState:i,analytics:v,isDebitCard:V,isChargeCardAdmin:I,cardIssuedByRoles:C,cardIssuedByDepartmentName:w,cardHolderRoles:j,cardHolderDepartmentName:b,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",productInformation:g,creditAccountInformation:m,debitAccountInformation:x,isChargeCardFeatureEnabled:s,creditAccount:y,creditAccountRepayment:n}),window.open(L,"_blank")}}):t.jsxs(t.Fragment,{children:[t.jsx(ta,{onClick:()=>{S("apple"),R.current="slide-in-right-to-left-add-to-wallet",pt({chargeCardDetailView:c,classListFetchState:i,analytics:v,isDebitCard:V,isChargeCardAdmin:I,cardIssuedByRoles:C,cardIssuedByDepartmentName:w,cardHolderRoles:j,cardHolderDepartmentName:b,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:s,productInformation:g,creditAccountInformation:m,debitAccountInformation:x,creditAccount:y,creditAccountRepayment:n}),M(!0)}}),t.jsx(ea,{onClick:()=>{S("google"),R.current="slide-in-right-to-left-add-to-wallet",pt({chargeCardDetailView:c,classListFetchState:i,analytics:v,isDebitCard:V,isChargeCardAdmin:I,cardIssuedByRoles:C,cardIssuedByDepartmentName:w,cardHolderRoles:j,cardHolderDepartmentName:b,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:s,productInformation:g,creditAccountInformation:m,debitAccountInformation:x,creditAccount:y,creditAccountRepayment:n}),M(!0)}})]})})},ea=({onClick:e})=>{const i=ot();return t.jsx(Fr,{prefixIcon:t.jsx(_o,{}),label:Wr.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":K("add-to-google-wallet-button")})},ta=({onClick:e})=>{const i=ot();return t.jsx(Fr,{prefixIcon:t.jsx(Zo,{}),label:Wr.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":K("add-to-apple-wallet-button")})},Uo=r.div`
-  margin-top: ${a.sp4};
-  display: flex;
-  justify-content: center;
-  gap: ${a.sp5};
-`,_o=r(Mo)`
-  height: ${a.sp4};
-  width: ${a.sp5};
-`,Zo=r(Po)`
-  height: ${a.sp4};
-  width: ${a.sp5};
-`,Go=[d.brandColorSapphire,d.brandColorJade,d.graphColor01,d.graphColor08,d.graphColor12,d.graphColor15,d.graphColor16Dark,d.graphColor23Dark,d.graphColor32Dark,d.graphColor34Dark,d.brandColorOpalDark,d.brandColorRuby],Yo=ve.getLocalizedStrings().spendManagement.chargeCard,qo=({isColorPaletteVisible:e,hasBorderShadow:i,leftTransitionValue:s,colorInState:u,styles:h,colorPaletteTitleStyles:f,ColorListStyles:c,coloredCircleStyles:g,closeStyles:m,tickStyles:x,toggleColorPaletteVisibility:y,handleColorClick:n})=>t.jsxs(Jo,{showColorPalette:e,style:h,hasBorderShadow:i,leftTransitionValue:s,children:[t.jsxs(Ko,{style:f,children:[t.jsx(Qo,{children:Yo.cardDetails.cardTheme}),t.jsx(en,{style:m,"data-testid":K("close-color-palette"),onClick:C=>{C.stopPropagation(),y(!e)}})]}),t.jsx(Xo,{style:c,children:Go.map((C,w)=>t.jsx(an,{style:g,coreColor:C,onMouseEnter:()=>n(new at(C),!1),onMouseLeave:()=>u!=null?n(new at(u),!1):null,"data-testid":K("color-palette-item-cards",w.toString()),onClick:()=>n(new at(C),!0),children:new at(C).toString()===u?.toString()?t.jsx(tn,{style:x}):null},C))})]}),Jo=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: ${d.neutralGrey5Light};
-  border-top-left-radius: ${a.sp1};
-  border-bottom-left-radius: ${a.sp1};
-  position: absolute;
-  height: ${`calc(100% - ${a.sp2})`};
-  z-index: 1;
-`,Xo=r.div`
-  display: flex;
-  flex-wrap: wrap;
-  padding: ${a.sp0} 38px ${a.sp0} 31px;
-`,Ko=r.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${a.sp5} ${a.sp5} ${a.sp2} ${a.sp5};
-`,Qo=r(ge)`
-  color: ${d.brandColorOnyx};
-`,en=r(po)`
-  width: ${a.sp3};
-  height: ${a.sp3};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-`,tn=r(uo)`
-  width: ${a.sp3};
-  color: ${d.neutralGrey5Light};
-`,an=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:rn,common:tt,dateFormat:on}=ve.getLocalizedStrings(),Qe=rn.chargeCard,Re={secretCardNumberWrapperWidth:280,secretCVVWrapperHeight:30,secretCVVWrapperWidth:l[7],cardNumberCopiedSectionTop:54,cvvCopiedSectionTop:34,maskedCardNumberMarginTop:new A(-2,-2,-2,l[0]),expiryCopySectionTop:34,cardNumberCopyBtnTop:21},Wa={CardInfoTitleSize:new A(_.extraSmallRegular.fontSizeValue,_.smallRegular.fontSizeValue),CardInfoTitleLineHeight:new A(18,18,18,21)},Yt=e=>t.jsxs($n,{style:{...e},children:[t.jsx(bn,{}),t.jsx(vn,{style:{background:d.blackColor,color:d.primaryDark,padding:`2px ${a.sp2}`,borderRadius:a.sp1},children:tt.copyToClipBoard.copied})]}),Ua=({isSandboxEnv:e,sourceId:i,showSecretInfo:s,secretRevealed:u,vgsVaultId:h,controllerEmails:f,isChargeCardFeatureEnabled:c,productInformation:g,cashbackInformation:m,creditAccountInformation:x,debitAccountInformation:y,chargeCardCashbackDetailState:n,creditAccount:C,creditAccountRepayment:w,isDebitCard:j,depositAccountLimitFetchState:b,isCardDetailErrored:k,isCardColorUpdating:L,cardDetailsFetchState:p,isCardColorUndefined:R,cardInfoTitleStyles:S,styles:M,cvvSecStyles:V,chargeCard:v,token:Y,setSecretRevealed:Q,setIsCardDetailErrored:Z,setCardDetailsFetchState:I,onFireOnClickAnalytics:de})=>{const ee=zt().analytics,[,ce]=$r(),O=Le(),[G,W]=o.useState(!1),[re,te]=o.useState(!1),[ie,oe]=o.useState(!1),F=Rt(),ae=ut.hasChargeCardAdminLevelAccess(F.loggedInUserRoleMap),[q]=jr("https://js.verygoodvault.com/vgs-show/2.0.0/show.js"),$=i==="addToWalletDrawer"?.75:O==="small"?.85:1,J=e?"sandbox":"live";o.useEffect(()=>{if(q&&v!=null&&s&&Y!=null&&!u){const D=window.VGSShow.create(h).setEnvironment(J),N=v.cardProviderID,le=D.request({name:"data-text",method:"GET",path:"/cards/"+N+"/secure-data/cvv2",headers:{Authorization:"Bearer "+Y},htmlWrapper:"text",jsonPathSelector:"data.attributes.cvv2"});I({cvv:!0,number:!0}),le.render(`#SecretCvv-${i}`,{"@font-face":{"font-family":At["PT Mono"],"font-style":"normal","font-weight":Na.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":At["PT Mono"],opacity:.7,color:d.brandColorOnyx,fontSize:`${$*_.h6Regular.fontSizeValue}px`,fontWeight:_.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:`${$*_.h6Regular.lineHeightValue}px`}),le.on("requestSuccess",()=>{Q(!0),Z(!1),I({...p,cvv:!1})}),le.on("requestFail",()=>{Z(!0),I({...p,cvv:!1});const T=document.getElementById(`SecretCvv-${i}`);for(;T?.hasChildNodes()===!0;)T.removeChild(T.children[0])}),D.copyFrom(le,{text:tt.strings.empty},T=>{T==="success"?(te(!0),de("CVV copied"),n.fetchState==="Completed"&&(!c||C.fetchState==="Completed"&&w.fetchState==="Completed")&&(!(j&&ae)||b==="Completed")&&ee.trackCardsCopyIconClick(f,g,"Cards Detail","Copy","copied","CVV","",m,x,y)):te(!1)}).render(`#CvvCopyBtn-${i}`,{cursor:"pointer",height:`${$*Re.secretCVVWrapperHeight}px`,width:`${$*Re.secretCVVWrapperWidth}px`});const ne=D.request({name:"data-text",method:"GET",path:"/cards/"+N+"/secure-data/pan",headers:{Authorization:"Bearer "+Y},htmlWrapper:"text",jsonPathSelector:"data.attributes.pan",serializers:[D.SERIALIZERS.replace("(\\d{4})(\\d{4})(\\d{4})(\\d{4})","$1 $2 $3 $4")]});ne.render(`#SecretCardNumber-${i}`,{"@font-face":{"font-family":At["PT Mono"],"font-style":"normal","font-weight":Na.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":At["PT Mono"],opacity:.7,color:d.brandColorOnyx,fontSize:`${$*_.h6Regular.fontSizeValue}px`,fontWeight:_.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:`${$*_.h6Regular.lineHeightValue}px`}),ne.on("requestSuccess",()=>{Q(!0),Z(!1),I({...p,number:!1})}),ne.on("requestFail",()=>{Z(!0),I({...p,number:!1});const T=document.getElementById(`SecretCardNumber-${i}`);for(;T?.hasChildNodes()===!0;)T.removeChild(T.children[0])}),D.copyFrom(ne,{text:tt.strings.empty,serializers:[D.SERIALIZERS.replace(tt.strings.space,tt.strings.empty)]},T=>{T==="success"?(W(!0),de("card number copied"),n.fetchState==="Completed"&&(!c||C.fetchState==="Completed"&&w.fetchState==="Completed")&&(!(j&&ae)||b==="Completed")&&ee.trackCardsCopyIconClick(f,g,"Cards Detail","Copy","copied","Card Number","",m,x,y)):W(!1)}).render(`#CardNumberCopyBtn-${i}`,{cursor:"pointer",height:`${$*_.h6Regular.lineHeightValue}px`,width:`${$*Re.secretCardNumberWrapperWidth}px`})}},[q,v,s,Y,u]),o.useEffect(()=>{if(s===!1){const D=document.getElementById(`SecretCvv-${i}`);for(;D?.hasChildNodes()===!0;)D.removeChild(D.children[0]);const N=document.getElementById(`CvvCopyBtn-${i}`);for(;N?.hasChildNodes()===!0;)N.removeChild(N.children[0]);const le=document.getElementById(`SecretCardNumber-${i}`);for(;le?.hasChildNodes()===!0;)le.removeChild(le.children[0]);const ne=document.getElementById(`CardNumberCopyBtn-${i}`);for(;ne?.hasChildNodes()===!0;)ne.removeChild(ne.children[0])}},[i,s]),o.useEffect(()=>{G===!0&&setTimeout(()=>{W(!1)},800),re===!0&&setTimeout(()=>{te(!1)},800),ie===!0&&setTimeout(()=>{oe(!1)},800)},[G,re,ie]);const H=v!=null?ut.dateFromYearMonthDate(v.validThru.year,v.validThru.month-1).format(on.visual.MMSlashYYFormat):tt.strings.empty,he=D=>{s===!0&&(p.cvv!==!0||p.number!==!0)&&(de("validity copied"),D!=null&&n.fetchState==="Completed"&&(!c||C.fetchState==="Completed"&&w.fetchState==="Completed")&&(!(j&&ae)||b==="Completed")&&ee.trackCardsCopyIconClick(f,g,"Cards Detail","Copy","copied","Valid Thru",H,m,x,y),ce(H),oe(!0))};return t.jsxs(un,{style:M,children:[t.jsxs(mn,{children:[t.jsx(qt,{style:S,windowSize:O,children:Qe.cardDetails.cardNumber}),t.jsx(gn,{sourceId:i,scaleFactor:$,showSecretInfo:s&&(p.number===!1||p.cvv===!1),isCardDetailFetching:p.number===!0||p.cvv===!0||R||L,windowSize:O,children:`${Qe.cardDetails.cardNumberHideout}
-          ${v?.accountLast4??tt.strings.empty}`}),t.jsxs(nn,{secretRevealed:u,scaleFactor:$,showSecretInfo:s&&p.cvv===!1&&p.number===!1,sourceId:i,isCardDetailErrored:k,children:[t.jsx(sn,{sourceId:i,scaleFactor:$,secretRevealed:u,id:`SecretCardNumber-${i}`}),t.jsx(pn,{secretRevealed:u,scaleFactor:$,id:`CardNumberCopyBtn-${i}`,sourceId:i}),G===!0?t.jsx(Yt,{top:$*Re.cardNumberCopiedSectionTop}):null]})]}),t.jsxs(Cn,{children:[t.jsxs(xn,{children:[t.jsx(qt,{style:S,windowSize:O,children:Qe.cardDetails.expiry}),t.jsxs(ln,{secretRevealed:s&&(p.cvv===!1||p.number===!1),children:[u&&s&&p.cvv===!1&&p.number===!1?t.jsx(Sn,{sourceId:i,scaleFactor:$,windowSize:O,secretRevealed:u&&s,"data-testid":K("expiry-date-copy"),onClick:D=>{D.stopPropagation(),he(v)},children:u&&s&&p.cvv===!1&&p.number===!1?H:Qe.cardDetails.expiryHideOut}):t.jsx(yn,{sourceId:i,windowSize:O,scaleFactor:$,isCardDetailFetching:p.cvv===!0||p.number===!0||R||L,children:Qe.cardDetails.expiryHideOut}),ie===!0?t.jsx(Yt,{top:$*Re.expiryCopySectionTop,width:"auto"}):null]})]}),t.jsxs(fn,{style:V,children:[t.jsx(qt,{style:S,windowSize:O,children:Qe.cardDetails.cvv}),t.jsx(wn,{sourceId:i,scaleFactor:$,showSecretInfo:s&&p.cvv===!1&&p.number===!1,isCardDetailFetching:p.number===!0||p.cvv===!0||R||L,windowSize:O,children:Qe.cardDetails.cvvHideOut}),t.jsxs(dn,{secretRevealed:u,sourceId:i,showSecretInfo:s&&p.cvv===!1&&p.number===!1,isCardDetailErrored:k,children:[t.jsx(cn,{scaleFactor:$,secretRevealed:u,sourceId:i,id:`SecretCvv-${i}`}),t.jsx(hn,{windowSize:O,scaleFactor:$,secretRevealed:u,id:`CvvCopyBtn-${i}`,sourceId:i}),re===!0?t.jsx(Yt,{top:$*Re.cvvCopiedSectionTop,width:"auto"}):null]})]})]})]})},nn=r.div`
-  display: ${e=>e.showSecretInfo?"block":"none"};
-  height: ${e=>e.secretRevealed?"unset":a.sp0};
-  width: ${e=>e.secretRevealed?e.scaleFactor*Re.secretCardNumberWrapperWidth:l[0]}px;
-  overflow: hidden;
-  &:hover {
-    background: ${e=>e.isCardDetailErrored?"transparent":d.neutralGrey5Light};
-    border-radius: ${a.sp1};
-  }
-`,sn=r.div`
-  min-height: ${e=>e.secretRevealed?e.scaleFactor*_.h6Regular.lineHeightValue:l[0]}px;
-  height: ${e=>e.secretRevealed?e.scaleFactor*_.h6Regular.lineHeightValue:l[0]}px;
-  width: ${e=>e.secretRevealed?"100%":a.sp0};
-  overflow: hidden;
-  position: relative;
-`,dn=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?Re.secretCVVWrapperWidth:l[0]}px;
-  position: relative;
-  &:hover {
-    background: ${e=>e.isCardDetailErrored?"transparent":d.neutralGrey5Light};
-    border-radius: ${a.sp1};
-  }
-`,cn=r.div`
-  height: ${e=>e.secretRevealed?e.scaleFactor*_.h6Regular.lineHeightValue:l[0]}px;
-  width: ${e=>e.secretRevealed?Re.secretCVVWrapperWidth*e.scaleFactor:a.sp0};
-  overflow: hidden;
-`,ln=r.div`
-  position: relative;
-  padding: ${a.sp0} ${a.sp1};
-  &:hover {
-    background: ${e=>e.secretRevealed?d.neutralGrey5Light:"transparent"};
-    border-radius: ${a.sp1};
-  }
-`,hn=r.div`
-  height: ${e=>e.secretRevealed?e.scaleFactor*_.h6Regular.lineHeightValue:l[0]}px;
-  width: ${e=>e.secretRevealed?"inherit":a.sp0};
-  position: absolute;
-  top: ${a.sp0};
-  overflow: hidden;
-  background: transparent;
-  cursor: pointer;
-`,pn=r.div`
-  height: ${e=>e.secretRevealed?e.scaleFactor*_.h6Regular.lineHeightValue:l[0]}px;
-  width: ${e=>e.secretRevealed?"inherit":a.sp0};
-  position: absolute;
-  top: ${e=>e.scaleFactor*Re.cardNumberCopyBtnTop}px;
-  overflow: hidden;
-  background: transparent;
-  cursor: pointer;
-`,un=r.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${a.sp4} ${a.sp0} ${a.sp4} ${a.sp5};
-  width: 75%;
-  gap: ${a.sp4};
-`,mn=r.div`
-  position: relative;
-  width: max-content;
-`,qt=r(ge)`
-  padding-left: ${a.sp1};
-  color: ${d.brandColorPearl};
-  position: relative;
-  font-size: ${e=>Wa.CardInfoTitleSize.valuePx(e.windowSize)};
-  line-height: ${e=>Wa.CardInfoTitleLineHeight.valuePx(e.windowSize)};
-`,gn=r(Pt)`
-  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=>Re.maskedCardNumberMarginTop.valuePx(e.windowSize)};
-  margin-left: -2px;
-  font-size: ${e=>e.scaleFactor*_.chargeCardNumberText.fontSizeValue}px;
-  line-height: ${e=>e.scaleFactor*_.chargeCardNumberText.lineHeightValue}px;
-  -webkit-font-smoothing: initial;
-  -moz-osx-font-smoothing: initial;
-  word-wrap: "break-word";
-`,Cn=r.div`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: ${a.sp4};
-`,fn=r.div`
-  display: flex;
-  flex-direction: column;
-  margin-right: ${a.sp5};
-`,wn=r(Pt)`
-  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*_.chargeCardNumberText.fontSizeValue}px;
-  line-height: ${e=>e.scaleFactor*_.chargeCardNumberText.lineHeightValue}px;
-  -webkit-font-smoothing: initial;
-  -moz-osx-font-smoothing: initial;
-  word-wrap: "break-word";
-`,xn=r.div`
-  display: flex;
-  flex-direction: column;
-`,yn=r(Pt)`
-  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
-  opacity: 0.7;
-  font-size: ${e=>e.scaleFactor*_.chargeCardNumberText.fontSizeValue}px;
-  line-height: ${e=>e.scaleFactor*_.chargeCardNumberText.lineHeightValue}px;
-  -webkit-font-smoothing: initial;
-  -moz-osx-font-smoothing: initial;
-  word-wrap: "break-word";
-`,Sn=r(Pt)`
-  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*_.chargeCardNumberText.fontSizeValue}px;
-  line-height: ${e=>e.scaleFactor*_.chargeCardNumberText.lineHeightValue}px;
-  -webkit-font-smoothing: initial;
-  -moz-osx-font-smoothing: initial;
-  word-wrap: "break-word";
-`,bn=r(bt)`
-  height: ${a.sp3};
-  width: ${a.sp3};
-  color: ${d.success};
-`,$n=r.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: ${a.sp1};
-  width: 100%;
-  justify-content: center;
-  z-index: 1;
-`,vn=r(ge)`
-  color: ${d.primaryDark};
-  padding: 2px ${a.sp2};
-  background-color: ${d.blackColor};
-`,kn=e=>o.createElement("svg",{width:48,height:48,viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M44.8249 13.5005C44.8249 11.5675 43.1119 10.0005 40.9988 10.0005H40H28.4901H7C4.88691 10.0005 3.17391 11.5675 3.17391 13.5005V34.5005C3.17391 36.4335 4.88691 38.0005 7 38.0005H9H19.2782H40.9988C43.1119 38.0005 44.8249 36.4335 44.8249 34.5005V13.5005Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M4.82422 18.3999H23H33.4996H44.0002",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),jn=e=>o.createElement("svg",{viewBox:"0 0 35 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M25.9187 17.6131C25.8526 16.3523 25.2884 15.1693 24.3501 14.3245C23.4118 13.4797 22.1764 13.0422 20.9155 13.1082L10.2189 13.6688C8.95804 13.7349 7.77508 14.2991 6.93025 15.2374C6.08541 16.1757 5.64791 17.4112 5.71399 18.672L6.08772 25.8031C6.1538 27.064 6.71804 28.2469 7.65632 29.0917C8.5946 29.9366 9.83006 30.3741 11.0909 30.308L21.7875 29.7474C23.0484 29.6813 24.2313 29.1171 25.0762 28.1788C25.921 27.2405 26.3585 26.0051 26.2924 24.7442L25.9187 17.6131Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M33.4861 9.90111C33.8174 8.19696 33.5535 6.44956 32.7527 5.04334C31.9518 3.63712 30.6795 2.68725 29.2156 2.40271C27.7518 2.11816 26.2163 2.52225 24.947 3.52606C23.6776 4.52988 22.7784 6.0512 22.4472 7.75536L21.7138 11.9827",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M13.6223 21.1127C13.6223 21.744 13.8731 22.3494 14.3195 22.7958C14.7659 23.2422 15.3713 23.493 16.0026 23.493C16.6339 23.493 17.2393 23.2422 17.6857 22.7958C18.1321 22.3494 18.3829 21.744 18.3829 21.1127C18.3829 20.4814 18.1321 19.876 17.6857 19.4296C17.2393 18.9832 16.6339 18.7324 16.0026 18.7324C15.3713 18.7324 14.7659 18.9832 14.3195 19.4296C13.8731 19.876 13.6223 20.4814 13.6223 21.1127Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),Ur=e=>o.createElement("svg",{viewBox:"0 0 32 34",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("path",{d:"M25.7696 18.2876C25.6595 17.0298 25.0544 15.8673 24.0872 15.0557C23.12 14.2441 21.87 13.85 20.6122 13.96L9.94168 14.8936C8.6839 15.0036 7.52135 15.6088 6.70978 16.576C5.8982 17.5432 5.50409 18.7932 5.61413 20.051L6.2365 27.1647C6.34654 28.4224 6.95172 29.585 7.91892 30.3966C8.88611 31.2081 10.1361 31.6022 11.3939 31.4922L22.0644 30.5587C23.3222 30.4486 24.4847 29.8434 25.2963 28.8762C26.1079 27.909 26.502 26.6591 26.392 25.4013L25.7696 18.2876Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M9.36462 6.40914C9.66608 4.69947 10.6344 3.17957 12.0565 2.18381C13.4785 1.18805 15.238 0.798002 16.9476 1.09946C18.6573 1.40093 20.1772 2.36921 21.173 3.7913C22.1687 5.21339 22.5588 6.9728 22.2573 8.68247L21.5079 12.9324",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.createElement("path",{d:"M13.6237 22.1309C13.6237 22.7622 13.8745 23.3676 14.3209 23.814C14.7673 24.2604 15.3727 24.5112 16.004 24.5112C16.6353 24.5112 17.2407 24.2604 17.6871 23.814C18.1335 23.3676 18.3843 22.7622 18.3843 22.1309C18.3843 21.4996 18.1335 20.8941 17.6871 20.4478C17.2407 20.0014 16.6353 19.7506 16.004 19.7506C15.3727 19.7506 14.7673 20.0014 14.3209 20.4478C13.8745 20.8941 13.6237 21.4996 13.6237 22.1309Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),{common:Ln,spendManagement:{chargeCard:{cardDetails:Se}}}=ve.getLocalizedStrings(),fe={chargeCardWidth:384,chargeCardHeight:240,cardLoadingShineWidth:200,cardLoadingShineHeight:240,zeniLogoWidth:l[6],zeniLogoHeight:l[6],visaLogoWidth:l[6],visaLogoHeight:13,cardTintIconWidth:277,cardTintIconHeight:242,colorPaletteLeftTransitionValue:-350,rightSectionWidth:384,rightSectionHeight:240,cardContainerContentGap:new A(l[4],l[4],l[4],l[3])},_r=({isChargeCardAdmin:e,chargeCardDetailView:i,productInformation:s,cashbackInformation:u,creditAccountInformation:h,debitAccountInformation:f,secretRevealed:c,isOwnCard:g,vgsVaultId:m,showSecretInfo:x,controllerEmails:y,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:C,isDebitCardSetupEnabled:w,isChargeCardSetupEnabled:j,chargeCardCashbackDetailState:b,creditAccount:k,creditAccountRepayment:L,isShowingInDrawer:p,isSandboxEnv:R,isCardDetailErrored:S,signedInUserToken:M,selectedColor:V,cardDetailsFetchState:v,setCardDetailsFetchState:Y,setIsCardDetailErrored:Q,setShowSecretInfo:Z,setSecretRevealed:I,setShowPhoneNumberForOtp:de,isCardDetailFetching:ee,handleColorCodeClick:ce,onFireOnClickAnalytics:O,onUnlockChargeCard:G})=>{const[W,re]=o.useState(!1),[te,ie]=o.useState(!1),[oe,F]=o.useState(!0),[ae,q]=o.useState(!1),[$,J]=o.useState(!1),[H,he]=o.useState(!1),[D,N]=o.useState(!1),[le,ne]=o.useState(!1),[T,ke]=o.useState(!1),je=o.useRef(null),$e=o.useRef(null),B=o.useRef(null),U=o.useRef(null),X=o.useRef(null),me=rt(i.unlockChargeCardsFetchState.fetchState),Ie=rt(i.lockChargeCardsFetchState.fetchState),Be=rt(i.closeChargeCardsFetchState.fetchState),nt=i.chargeCard?.type.code??"business_virtual_credit_card",{isMobileOrTabletScreen:st}=vr(),We=Le(),we=p?.75:We==="small"?.85:1,z=st?Se.tapCardCopyText:Se.scanNowAndAddToWallet,pe=st?Se.tapCardCopyText:t.jsxs(Tn,{children:[t.jsx(Cs,{}),Se.clickTheCardToFetchDetailsText]}),E=i.chargeCard?.isLockedByAdmin??!1,dt=We==="small"?Se.tapCardCopyText:Se.clickTheCardToCopyDetailsText,Pe=We==="small"?Se.tapCardCopyText:Se.clickTheCardToFetchDetailsText,Ct=p?z:dt,ct=p?pe:Pe,Oe=ee(v)||i.updateFetchState.fetchState==="In-Progress"||i.unlockChargeCardsFetchState.fetchState==="In-Progress",Xe=(v.cvv!==!0||v.number!==!0)&&g,Ue=!!i.chargeCard?.type.code.includes("debit"),Ee=i.chargeCard?.status.code==="locked",He=i.chargeCard?.status.code==="closed"||i.chargeCard?.status.code==="closed_by_customer",kt=i.chargeCard?.status.code==="active",Ce=i.unlockChargeCardsFetchState.fetchState,Ke=i.lockChargeCardsFetchState.fetchState,ft=i.closeChargeCardsFetchState.fetchState;return o.useEffect(()=>{kt&&me!=null&&me==="In-Progress"&&Ce==="Completed"&&($e.current&&clearTimeout($e.current),N(!0),$e.current=setTimeout(()=>{he(!1),N(!1),$e.current=null},2700))},[kt,Ce,me]),o.useEffect(()=>()=>{$e.current&&clearTimeout($e.current)},[]),o.useEffect(()=>{me!=null&&me==="In-Progress"&&Ce==="Error"&&he(!1)},[Ce,me]),o.useEffect(()=>{ae===!1&&Ie!=null&&Ie==="In-Progress"&&Ke==="Completed"&&(je.current&&clearTimeout(je.current),q(!0),J(!1),F(!1),ke(!0),je.current=setTimeout(()=>{ke(!1),je.current=null,X.current=setTimeout(()=>{q(!1),F(!0),X.current=null},100)},1102))},[Ie,Ke]),o.useEffect(()=>()=>{je.current&&clearTimeout(je.current),X.current&&clearTimeout(X.current)},[]),o.useEffect(()=>{He&&Be!=null&&Be==="In-Progress"&&ft==="Completed"&&(B.current&&clearTimeout(B.current),ne(!0),B.current=setTimeout(()=>{ne(!1),B.current=null},1200))},[He,Be,ft]),o.useEffect(()=>()=>{B.current&&clearTimeout(B.current)},[]),o.useEffect(()=>{!ae&&te?(U.current&&(clearTimeout(U.current),U.current=null),J(!0)):!ae&&!te&&$&&(U.current&&clearTimeout(U.current),U.current=setTimeout(()=>{J(!1),U.current=null},800))},[ae,te,$]),o.useEffect(()=>()=>{U.current&&clearTimeout(U.current)},[]),t.jsxs(Hn,{windowSize:We,scaleFactor:we,children:[t.jsxs(ns,{isCardLocked:Ee,isChargeCardAdmin:e,isLockedByAdmin:E,unlockFetchState:i.unlockChargeCardsFetchState.fetchState,onClick:Fe=>{Fe.stopPropagation(),Ee&&Ce!=="In-Progress"&&(e||!E)&&(G(e),he(!0))},onMouseEnter:()=>{(e||!E)&&Ce!=="In-Progress"&&(F(!1),ie(!0))},onMouseLeave:()=>{(e||!E)&&Ce!=="In-Progress"&&(F(!1),ie(!1))},children:[c&&p?t.jsxs(t.Fragment,{children:[t.jsx(ps,{}),t.jsx(us,{}),t.jsx(ms,{}),t.jsx(gs,{})]}):null,ae&&t.jsxs(rs,{children:[t.jsx(Wn,{}),t.jsx(Un,{})]}),Ee&&!T&&!(Ie==="In-Progress"&&Ke==="Completed")&&t.jsx(is,{isLockAnimationInProgress:ae,unlockFetchState:Ce,children:t.jsxs(Kn,{isHovered:te||H,isInitialDisplay:oe,children:[t.jsx(_n,{}),t.jsx(Mn,{isHovered:te||H,isInitialDisplay:oe,children:Se.moreOptions.unlock})]})}),D&&t.jsx(os,{children:t.jsxs(Qn,{children:[t.jsx(Jn,{}),t.jsx(Xn,{}),t.jsx(Zn,{}),t.jsx(Vn,{children:Se.moreOptions.unlock})]})}),He?le?t.jsx(as,{children:t.jsxs(es,{children:[t.jsx(Gn,{}),t.jsx(Yn,{})]})}):t.jsx(Jr,{children:t.jsx(ts,{children:t.jsx(qn,{})})}):null,nt.includes("virtual")?t.jsxs(ss,{isShowingInDrawer:p,isOwnCard:g,scaleFactor:we,bgColor:V?.toString(),showColorPalette:W,isDebitCard:Ue,"data-testid":K("virtual-charge-card-detail"),onClick:()=>{W===!1&&g===!0&&ee(v)===!1&&D===!1&&Ce!=="In-Progress"&&Ee===!1&&Ba({signedInUserToken:M,showSecretInfo:x,setShowPhoneNumberPopup:de,onFireOnClickAnalytics:O,setShowSecretInfo:Z})},enableClick:Xe&&!Ee&&!He||Ee&&Ce!=="In-Progress",cardDetailsFetchState:Oe||i.chargeCard?.cardColorCode===void 0,children:[t.jsx(Za,{scaleFactor:we,shouldAppear:Oe||i.chargeCard?.cardColorCode===void 0}),t.jsx(qo,{leftTransitionValue:we*fe.colorPaletteLeftTransitionValue,hasBorderShadow:!1,tickStyles:{width:"12px",height:"12px"},colorInState:i.chargeCard?.cardColorCode!=null?new at(i.chargeCard.cardColorCode):void 0,styles:{height:"100%",maxWidth:"78%",top:p?"unset":a.sp0,left:W?a.sp0:`${we*fe.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:W,toggleColorPaletteVisibility:Fe=>{re(Fe)},handleColorClick:(Fe,wt)=>{ce(Fe,wt),wt&&re(!1)}}),t.jsx(hs,{scaleFactor:we}),t.jsx(Ua,{productInformation:s,cashbackInformation:u,creditAccountInformation:h,debitAccountInformation:f,secretRevealed:c,setSecretRevealed:I,onFireOnClickAnalytics:O,isCardColorUndefined:i.chargeCard?.cardColorCode==null,isCardColorUpdating:i.updateFetchState.fetchState==="In-Progress",isSandboxEnv:R,cardDetailsFetchState:v,setCardDetailsFetchState:Y,isCardDetailErrored:S,setIsCardDetailErrored:Q,chargeCard:i.chargeCard,vgsVaultId:m,showSecretInfo:x,creditAccountRepayment:L,token:M?.token,isDebitCard:Ue,depositAccountLimitFetchState:i.depositAccountLimitFetchState.fetchState,controllerEmails:y,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:C,isDebitCardSetupEnabled:w,isChargeCardSetupEnabled:j,creditAccount:k,chargeCardCashbackDetailState:b,cardInfoTitleStyles:{..._.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),t.jsxs(Ga,{children:[t.jsxs(cs,{children:[t.jsx(Ya,{scaleFactor:we}),t.jsx(On,{onClick:Fe=>{Fe.stopPropagation(),g&&re(!W)},"data-testid":K("card-color-selector"),children:g?t.jsx(aa,{enterDelay:600,title:Se.cardColours,placement:"left",children:t.jsx(_a,{isShowingInDrawer:p})}):t.jsx(_a,{isShowingInDrawer:p})})]}),t.jsx(En,{scaleFactor:we})]})]}):t.jsxs(fs,{scaleFactor:we,enableClick:Xe,isOwnCard:g,isShowingInDrawer:p,onClick:()=>{g===!0&&D===!1&&Ee===!1&&Ce!=="In-Progress"&&ee(v)===!1&&Ba({signedInUserToken:M,showSecretInfo:x,setShowPhoneNumberPopup:de,onFireOnClickAnalytics:O,setShowSecretInfo:Z})},"data-testid":K("physical-charge-card-detail"),children:[t.jsx(Za,{scaleFactor:we,shouldAppear:Oe}),t.jsxs(ws,{flipCard:c,children:[t.jsx(xs,{children:t.jsx(Ir,{scaleFactor:we,isClickable:Xe,isLoading:Oe,isDebitCard:Ue})}),x?t.jsxs(ys,{isDebitCard:Ue,children:[t.jsx(Ua,{productInformation:s,cashbackInformation:u,creditAccountInformation:h,debitAccountInformation:f,secretRevealed:c,setSecretRevealed:I,onFireOnClickAnalytics:O,isCardColorUndefined:i.chargeCard?.cardColorCode==null,isCardColorUpdating:i.updateFetchState.fetchState==="In-Progress",isSandboxEnv:R,cardDetailsFetchState:v,setCardDetailsFetchState:Y,isCardDetailErrored:S,setIsCardDetailErrored:Q,chargeCard:i.chargeCard,vgsVaultId:m,showSecretInfo:x,token:M?.token,isDebitCard:Ue,depositAccountLimitFetchState:i.depositAccountLimitFetchState.fetchState,controllerEmails:y,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:C,isDebitCardSetupEnabled:w,isChargeCardSetupEnabled:j,creditAccount:i.creditAccount,creditAccountRepayment:L,chargeCardCashbackDetailState:b,cardInfoTitleStyles:{..._.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),t.jsx(Ga,{children:t.jsx(ls,{children:t.jsx(Ya,{scaleFactor:we})})})]}):null]})]})]}),He?t.jsx(In,{children:Se.cardClosedMessage}):E&&!e?t.jsx(Dn,{children:Se.cardLockedByAdminMessage}):Ee?t.jsx(Jt,{children:Se.cardLockedMessage}):g===!0&&!Oe?v.cvv===!0&&v.number===!0?t.jsx(ds,{children:Ln.loading}):S?t.jsx(An,{}):t.jsx(Jt,{children:c?Ct:ct}):Oe?t.jsx(Jt,{children:Se.loading}):null]})},In=r(ge)`
-  color: ${d.important};
-`,Dn=r(ge)`
-  color: ${e=>e.theme.colors.primary};
-`,An=()=>t.jsxs(zn,{children:[t.jsx(Fn,{}),t.jsx(Rn,{children:Se.failedToFetchCardWebText})]}),Tn=r.div`
-  display: flex;
-  align-items: center;
-  gap: ${a.sp2};
-`,En=r(co)`
-  width: ${e=>e.scaleFactor*fe.visaLogoWidth}px;
-  height: ${e=>e.scaleFactor*fe.visaLogoHeight}px;
-`,Fn=r(mo)`
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${d.alert};
-`,Rn=r(ge)`
-  color: ${d.alert};
-`,zn=r.div`
-  display: flex;
-  align-items: center;
-  gap: ${a.sp1};
-`,Pn=Te`
-  0% {
-    opacity: 0;
-    max-width: 0;
-    margin-left: 0;
-    transform: translateY(${a.sp1});
-  }
-  100% {
-    opacity: 1;
-    max-width: ${a.sp12};
-    margin-left: ${a.sp2};
-    transform: translateY(${a.sp0});
-  }
-`,Zr=Te`
-  0% {
-    opacity: 1;
-    max-width: ${a.sp12};
-    margin-left: ${a.sp2};
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    max-width: 0;
-    margin-left: 0;
-    transform: translateY(${a.sp1});
-  }
-`,Mn=r(sa)`
-  color: ${e=>e.theme.colors.grey5};
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  ${e=>e.isInitialDisplay?se`
-          opacity: 0;
-          max-width: 0;
-          margin-left: 0;
-        `:e.isHovered?se`
-            opacity: 0;
-            max-width: 0;
-            margin-left: 0;
-            animation: ${Pn} 400ms ease-in-out 400ms forwards;
-          `:se`
-            animation: ${Zr} 400ms ease-in-out forwards;
-          `}
-`,Vn=r(sa)`
-  color: ${e=>e.theme.colors.grey5};
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  animation: ${Zr} 400ms ease-in-out forwards;
-`,On=r.div`
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`,_a=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 ${d.backgroundThemeLight};
-  border-radius: 50%;
-`,Hn=r.div`
-  min-height: ${e=>`calc(${e.scaleFactor*fe.rightSectionHeight}px + ${a.sp2})`};
-  min-width: ${e=>`calc(${e.scaleFactor*fe.rightSectionWidth}px + ${a.sp2})`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: ${e=>fe.cardContainerContentGap.valuePx(e.windowSize)};
-`,Jt=r(ge)`
-  color: ${e=>e.theme.colors.primary};
-`,Nn=Te`
-	0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(180%);
-  }
-`,Ft=Te`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`,da=Te`
-  0% {
-    width: ${a.sp5};
-    height: ${a.sp5};
-  }
-  50% {
-    width: ${a.sp7};
-    height: ${a.sp7};
-  }
-  100% {
-    width: ${a.sp5};
-    height: ${a.sp5};
-  }
-`,it=Te`
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-`,$t=Te`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`,Bn=Te`
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 0;
-  }
-`,Gr=Te`
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-`,Yr=Te`
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-`,qr=Te`
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0);
-    opacity: 0;
-  }
-`,Wn=r(Ur)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: absolute;
-  z-index: 2;
-  animation:
-    ${Ft} 300ms ease-out forwards,
-    ${da} 400ms ease-in-out 301ms forwards,
-    ${it} 400ms ease-in-out 702ms forwards;
-`,Un=r(na)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: absolute;
-  z-index: 2;
-  opacity: 0;
-  animation: ${$t} 400ms ease-in-out 702ms forwards;
-  transition: opacity 200ms ease-in-out;
-`,_n=r(na)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: relative;
-  z-index: 1;
-  opacity: 1;
-`,Zn=r(na)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: relative;
-  z-index: 1;
-  opacity: 1;
-  animation:
-    ${da} 400ms ease-in-out 800ms forwards,
-    ${it} 400ms ease-in-out 1200ms forwards;
-`,Gn=r(kn)`
-  color: ${d.important};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: relative;
-  z-index: 1;
-  opacity: 0;
-  animation:
-    ${$t} 300ms ease-out forwards,
-    ${da} 300ms ease-out 300ms forwards,
-    ${it} 300ms ease-in-out 600ms forwards;
-`,Yn=r(zr)`
-  color: ${d.important};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  animation: ${$t} 300ms ease-out 600ms forwards;
-`,qn=r(zr)`
-  width: ${a.sp5};
-  height: ${a.sp5};
-  color: ${d.important};
-  position: absolute;
-  z-index: 1;
-`,Jn=r(Ur)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  animation:
-    ${Ft} 400ms ease-in-out 1200ms forwards,
-    ${it} 300ms ease-in-out 1600ms forwards,
-    ${Ft} 100ms ease-in-out 1900ms forwards,
-    ${it} 700ms ease-out 2000ms forwards;
-`,Xn=r(jn)`
-  color: ${e=>e.theme.colors.grey5};
-  width: ${a.sp5};
-  height: ${a.sp5};
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  animation:
-    ${Ft} 300ms ease-in-out 1600ms forwards,
-    ${it} 100ms ease-in-out 1900ms forwards;
-`,Kn=r.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  padding: ${a.sp3};
-  border-radius: ${a.sp11};
-  z-index: 2;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: ${a.sp11};
-    background-color: ${e=>e.theme.colors.primary};
-    transform-origin: center center;
-    ${e=>e.isInitialDisplay?se`
-            opacity: 0;
-          `:e.isHovered?se`
-              animation: ${Yr} 400ms ease-in-out forwards;
-            `:se`
-              animation: ${qr} 400ms ease-in-out 400ms forwards;
-            `}
-    z-index: 0;
-  }
-`,Qn=r.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  padding: ${a.sp3};
-  border-radius: ${a.sp11};
-  z-index: 2;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: ${a.sp11};
-    background-color: ${e=>e.theme.colors.primary};
-    transform-origin: center center;
-    animation: ${qr} 400ms ease-in-out 400ms forwards;
-    z-index: 0;
-  }
-`,es=r.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  padding: ${a.sp3};
-  border-radius: 192px;
-  z-index: 2;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 192px;
-    background-color: ${d.importantLight};
-    transform-origin: center center;
-    animation: ${Yr} 300ms ease-out forwards;
-    z-index: 0;
-  }
-`,ts=r.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  border-radius: 192px;
-  z-index: 2;
-  height: ${a.sp8};
-  width: ${a.sp8};
-  background-color: ${d.importantLight};
-`,as=r.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  border-radius: ${a.sp2};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  pointer-events: none;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 300%;
-    height: 300%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transform-origin: center;
-    z-index: 1;
-    animation: ${Gr} 300ms ease-in-out 900ms forwards;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: ${d.overlayDark};
-    opacity: 0;
-    z-index: 0;
-    animation: ${$t} 300ms ease-in-out 900ms forwards;
-  }
-`,rs=r.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2;
-  border-radius: ${a.sp2};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  pointer-events: none;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 300%;
-    height: 300%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transform-origin: center;
-    z-index: 1;
-    animation: ${Gr} 400ms ease-in-out 702ms forwards;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: ${d.overlayDark};
-    opacity: 0;
-    z-index: 0;
-    animation: ${$t} 400ms ease-in-out 702ms forwards;
-  }
-`,Jr=r.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  background: ${d.overlayDark};
-  border-radius: ${a.sp2};
-  opacity: 1;
-`,is=r(Jr)`
-  display: ${e=>e.isLockAnimationInProgress?"none":"block"};
-  background: ${e=>e.unlockFetchState==="In-Progress"?"transparent":d.overlayDark};
-`,os=r.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  border-radius: ${a.sp2};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  pointer-events: none;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 300%;
-    height: 300%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transform-origin: center;
-    z-index: 1;
-    animation: ${Bn} 400ms ease-in-out 1600ms
-      forwards;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 1;
-    z-index: 0;
-    animation: ${it} 400ms ease-in-out 1600ms forwards;
-  }
-`,ns=r.div`
-  position: relative;
-  cursor: ${e=>e.isCardLocked&&e.unlockFetchState!=="In-Progress"&&(e.isChargeCardAdmin||!e.isLockedByAdmin)?"pointer":"default"};
-`,Za=r.div`
-  z-index: 1;
-  display: ${e=>e.shouldAppear?"block":"none"};
-  content: "";
-  width: ${e=>e.scaleFactor*fe.cardLoadingShineWidth}px;
-  height: ${e=>e.scaleFactor*fe.cardLoadingShineHeight}px;
-  position: absolute;
-  transform: translateX(-180%);
-  animation: ${Nn} 1.5s infinite;
-  background: ${se`linear-gradient(to right, transparent 0%, ${d.backgroundThemeLight} 50%, transparent 100%)`};
-`,Ga=r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  width: 25%;
-  padding: ${a.sp4} ${a.sp0};
-`,ss=r.div`
-  background: ${e=>e.cardDetailsFetchState?d.chargeCardFaded:e.bgColor??(e.isDebitCard?e.theme.colors.graphColor15:e.theme.colors.brandColorJade)};
-  border-radius: ${a.sp2};
-  width: ${e=>e.scaleFactor*fe.chargeCardWidth}px;
-  height: ${e=>e.scaleFactor*fe.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?se`
-            box-shadow: 1px 3px ${a.sp4} 2px
-              ${e.theme.colors.chargeCardBackgroundShadow};
-            transform: scale(1.003);
-            outline: ${a.sp1} solid ${d.neutralGrey5Light};
-          `:null};
-  }
-
-  &:hover:before {
-    ${e=>e.isOwnCard&&!e.isShowingInDrawer?se`
-            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};
-  }
-`,ds=r(ge)`
-  color: ${e=>e.theme.colors.primary};
-  text-transform: capitalize;
-`,Ya=r(so)`
-  height: ${e=>e.scaleFactor*fe.zeniLogoHeight}px;
-  width: ${e=>e.scaleFactor*fe.zeniLogoWidth}px;
-  color: ${d.neutralGrey5Light};
-`,cs=r.div`
-  display: flex;
-  flex-direction: column;
-  gap: 35px;
-`,ls=r.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${a.sp4};
-`,hs=r(no)`
-  position: absolute;
-  width: ${e=>e.scaleFactor*fe.cardTintIconWidth}px;
-  height: ${e=>e.scaleFactor*fe.cardTintIconHeight}px;
-  top: -1px;
-`,ps=r(Eo)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  right: -${a.sp3};
-  top: -${a.sp3};
-`,us=r(Fo)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  left: -${a.sp3};
-  top: -${a.sp3};
-`,ms=r(Ro)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  right: -${a.sp3};
-  bottom: -${a.sp3};
-`,gs=r(zo)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  left: -${a.sp3};
-  bottom: -${a.sp3};
-`,Cs=r(Rr)`
-  color: ${e=>e.theme.colors.hero};
-  width: ${a.sp3};
-  height: ${a.sp3};
-`,fs=r.div`
-  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
-  width: ${e=>e.scaleFactor*fe.chargeCardWidth}px;
-  height: ${e=>e.scaleFactor*fe.chargeCardHeight}px;
-  overflow: hidden;
-  position: relative;
-  border-radius: ${a.sp2};
-
-  &:hover {
-    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?se`
-            box-shadow: 1px 3px ${a.sp4} 2px
-              ${e.theme.colors.chargeCardBackgroundShadow};
-            transform: scale(1.003);
-            outline: ${a.sp1} solid ${d.neutralGrey5Light};
-          `:null};
-  }
-
-  &:hover:before {
-    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?se`
-            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};
-  }
-`,ws=r.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-  transform: ${e=>e.flipCard?"rotateY(180deg)":"rotateY(0deg)"};
-`,xs=r.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  -webkit-backface-visibility: hidden; /* Safari */
-  backface-visibility: hidden;
-`,ys=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);
-`,be={contentContainerPadding:new A(l[3],l[4],l[8],l[8]),rightSectionWidth:new A(343,343,343,384),rightSectionHeight:new A(214,214,214,240),cardContainerContentGap:new A(l[2],l[2],l[2],l[3]),remainingAmountContainerGap:new A(l[1],l[1]),leftRightSectionGap:new A(l[0],54,54,57),cardBalanceSectionMarginBottom:new A(l[4],l[4]),barRadius:new A(2,l[2]),topSectionPaddingBottom:new A(l[4],19),rightSectionGap:new A(l[4],l[3]),addressSectionHeight:new A(109,74),addressSectionGap:new A(l[2],l[4]),navigationMarginBottom:new A(l[4],l[0]),addressValueGap:new A(l[0],l[1]),ownerWebMinWidth:new A(110,187)},ca={remainingAmount:new Oa("largeRegular","largeMedium"),spentAmount:new Oa("h5Regular","h5Regular")},{common:Ye,dateFormat:yt,spendManagement:Ss}=ve.getLocalizedStrings(),qe=Ss.chargeCard,bs=({chargeCardDetailView:e,spent:i,controllerEmails:s,chargeCardCashbackDetailState:u,isChargeCardFeatureEnabled:h,isDebitCardFeatureEnabled:f,isDebitCardSetupEnabled:c,isChargeCardSetupEnabled:g,creditAccount:m,creditAccountRepayment:x,productInformation:y,cashbackInformation:n,creditAccountInformation:C,debitAccountInformation:w,cardIssuedByRoles:j,cardIssuedByDepartmentName:b,cardHolderRoles:k,cardHolderDepartmentName:L,classListFetchState:p,cardOwnerName:R,secretRevealed:S,appleWalletLink:M,googleWalletLink:V,isCardNotPending:v,isOwnerNameCopied:Y,isAddressCopied:Q,addressToShow:Z,isOwnCard:I,vgsVaultId:de,showSecretInfo:ee,isSandboxEnv:ce,isCardDetailErrored:O,signedInUserToken:G,selectedColor:W,showUpdateSpendLimitAction:re,setShowPhoneNumberPopup:te,setShowChangeSpendLimitPopup:ie,cardDetailsFetchState:oe,setCardDetailsFetchState:F,setIsCardDetailErrored:ae,setShowSecretInfo:q,setSecretRevealed:$,isCardDetailFetching:J,handleColorCodeClick:H,onFireOnClickAnalytics:he,onOwnerNameCopyClick:D,onAddressCopyClick:N,onUnlockChargeCard:le,isDebitCard:ne})=>{const T=Le(),ke=zt().analytics,je=e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate!=null?e.chargeCardConfig.rePaymentInfo.cardLimitResetDate.format(yt.visual.MMMDFormat):ut.dateNow().startOf("month").add(1,"month").format(yt.visual.MMMDFormat),$e=e.chargeCard!=null?Math.round(i.amount*100/e.chargeCard.limit.amount):0,{isIPhoneScreen:B}=Bi(),U=e.chargeCard?.type.code==="business_physical_credit_card"&&(e.chargeCard?.status.code==="inactive"||e.chargeCard?.status.code==="request_on_hold"),X=Rt(),me=ut.hasChargeCardAdminLevelAccess(X?.loggedInUserRoleMap);return t.jsxs(Vs,{windowSize:T,children:[t.jsxs(Ms,{windowSize:T,children:[t.jsxs(Os,{windowSize:T,children:[t.jsx(Ls,{children:Ye.texts.spent}),t.jsx(Ka,{children:t.jsx(Hs,{windowSize:T,children:Je("0,0.[00]",i)})}),t.jsx(Ys,{windowSize:T,children:t.jsx(Js,{style:{width:`${$e}%`,borderRadius:a.sp1}})}),e.chargeCard!=null?t.jsxs(Ka,{children:[t.jsxs(qs,{children:[t.jsxs(ks,{windowSize:T,children:[t.jsx(Qa,{windowSize:T,children:Je("0,0.[00]",e.chargeCard.available)}),t.jsx(er,{windowSize:T,children:Ye.texts.remaining})]}),re?t.jsxs(Bs,{windowSize:T,children:[t.jsx(Ws,{children:qe.updateSpendLimitPopup.unlockSpending}),t.jsx(Us,{onClick:()=>{vs({chargeCardDetailView:e,classListFetchState:p,isChargeCardFeatureEnabled:h,creditAccount:m,creditAccountRepayment:x,isDebitCard:ne,productInformation:y,creditAccountInformation:C,debitAccountInformation:w,controllerEmails:s,cardIssuedByRoles:j,cardIssuedByDepartmentName:b,cardHolderRoles:k,cardHolderDepartmentName:L,analytics:ke}),ie(!0)},"data-testid":K("update-spend-limit-button"),children:qe.updateSpendLimitPopup.updateSpendLimit})]}):null]}),t.jsxs(Ns,{windowSize:T,children:[t.jsxs(Is,{children:[t.jsx(Qa,{windowSize:T,children:Je("0,0.[00]",e.chargeCard.limit)}),t.jsx(er,{windowSize:T,children:qe.cardList.slashMonth})]}),e.chargeCard.status.code!=="request_on_hold"?t.jsxs(_s,{children:[t.jsx(Zs,{children:Ye.texts.limitReset}),t.jsx(Gs,{children:je})]}):null]})]}):null]}),t.jsx($s,{chargeCardDetailView:e,classListFetchState:p,cardOwnerName:R,addressToShow:Z,isAddressCopied:Q,isOwnerNameCopied:Y,onOwnerNameCopyClick:D,onAddressCopyClick:N})]}),t.jsx(zs,{windowSize:T,isOwnCard:I,children:T==="small"&&!I?null:t.jsxs(t.Fragment,{children:[t.jsx(Ps,{windowSize:T,children:U?t.jsx(Ir,{}):t.jsx(_r,{isChargeCardAdmin:me,chargeCardDetailView:e,productInformation:y,cashbackInformation:n,creditAccountInformation:C,debitAccountInformation:w,creditAccount:e.creditAccount,setShowSecretInfo:q,secretRevealed:S,isOwnCard:I,isShowingInDrawer:!1,vgsVaultId:de,showSecretInfo:ee,isSandboxEnv:ce,controllerEmails:s,isChargeCardFeatureEnabled:h,isDebitCardFeatureEnabled:f,isDebitCardSetupEnabled:c,isChargeCardSetupEnabled:g,chargeCardCashbackDetailState:u,isCardDetailErrored:O,signedInUserToken:G,selectedColor:W,cardDetailsFetchState:oe,setCardDetailsFetchState:F,setIsCardDetailErrored:ae,setSecretRevealed:$,isCardDetailFetching:J,handleColorCodeClick:H,onFireOnClickAnalytics:he,setShowPhoneNumberForOtp:te,onUnlockChargeCard:le,creditAccountRepayment:x})}),!I&&e.chargeCard?.status.code!=="closed"&&e.chargeCard?.status.code!=="closed_by_customer"&&e.chargeCard?.status.code!=="locked"?t.jsx(js,{children:qe.cardDetails.adminsCannotAccess}):null,T==="small"&&I&&v&&ne===!1?B?t.jsx(ta,{onClick:()=>{pt({chargeCardDetailView:e,classListFetchState:p,analytics:ke,isDebitCard:ne,isChargeCardAdmin:me,productInformation:y,creditAccountInformation:C,debitAccountInformation:w,cardIssuedByRoles:j,cardIssuedByDepartmentName:b,cardHolderRoles:k,cardHolderDepartmentName:L,controllerEmails:s,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:h,creditAccount:m,creditAccountRepayment:x}),window.open(M,"_blank")}}):t.jsx(ea,{onClick:()=>{pt({chargeCardDetailView:e,classListFetchState:p,analytics:ke,isDebitCard:ne,isChargeCardAdmin:me,productInformation:y,creditAccountInformation:C,debitAccountInformation:w,cardIssuedByRoles:j,cardIssuedByDepartmentName:b,cardHolderRoles:k,cardHolderDepartmentName:L,controllerEmails:s,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:h,creditAccount:m,creditAccountRepayment:x}),window.open(V,"_blank")}}):null]})})]})},$s=({chargeCardDetailView:e,classListFetchState:i,cardOwnerName:s,addressToShow:u,isOwnerNameCopied:h,isAddressCopied:f,onOwnerNameCopyClick:c,onAddressCopyClick:g})=>{const m=Le(),x=ot(),[y,n]=o.useState(0),[C,w]=o.useState(!0),[j,b]=o.useState(!1),[k,L]=o.useState(!1),[p,R]=o.useState(!1);o.useEffect(()=>{const M=[setTimeout(()=>{n(1)},500),setTimeout(()=>{n(0),R(!0)},1e3),setTimeout(()=>{w(!1),R(!1)},2e3),setTimeout(()=>{w(!0),n(1)},2500),setTimeout(()=>{n(0),R(!0)},3e3),setTimeout(()=>{w(!1),R(!1)},4e3)];return()=>{M.forEach(clearTimeout)}},[]);const S=`${e.connectedAccount?.accountName} ${e.connectedAccount?.maskedAccountNumber}`;return t.jsxs(Ds,{children:[t.jsxs(As,{windowSize:m,children:[t.jsxs(Ts,{shouldBounce:p,isActive:y==0,isAutoSlide:C,windowSize:m,children:[e.chargeCard?.cardHolderUser!=null?t.jsxs(qa,{windowSize:m,onClick:c,"data-testid":K("owner-name-copy-click"),onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),children:[t.jsxs(Tt,{children:[qe.cardDetails.owner,t.jsxs(or,{children:[t.jsx(tr,{children:h===!0?t.jsx(ir,{}):t.jsx(rr,{isHover:j})}),h||j?t.jsx(ar,{children:h?Ye.copyToClipBoard.copied:Ye.copyToClipBoard.copy}):null]})]}),t.jsx(Ja,{children:t.jsx(Xt,{children:s})})]}):null,u!=null?t.jsxs(Xa,{windowSize:m,onClick:g,"data-testid":K("address-copy-click"),onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),children:[t.jsxs(Tt,{children:[qe.cardDetails.address,t.jsxs(or,{children:[t.jsx(tr,{children:f===!0?t.jsx(ir,{}):t.jsx(rr,{isHover:k})}),f||k?t.jsx(ar,{children:f?Ye.copyToClipBoard.copied:Ye.copyToClipBoard.copy}):null]})]}),t.jsx(Rs,{windowSize:m,children:t.jsx(oo,{address:u,isDisabled:"readonly",style:{padding:a.sp0,..._.smallRegular.cssObject,textTransform:"capitalize",alignItems:"flex-start",backgroundColor:x.colors.grey4,cursor:"pointer",flexDirection:m==="small"?"column":"row",gap:be.addressValueGap.valuePx(m),textAlign:m==="small"?"left":"right"}})})]}):null]}),t.jsxs(Es,{isActive:y==1,isAutoSlide:C,children:[e.chargeCard?.type.code.includes("debit")===!0?t.jsxs(qa,{windowSize:m,children:[t.jsx(Tt,{children:qe.connectedAccount}),t.jsxs(Fs,{children:[t.jsx(Xs,{children:t.jsx(Ks,{})}),t.jsx(Xt,{children:S})]})]}):null,t.jsxs(Xa,{windowSize:m,children:[t.jsx(Tt,{children:qe.department}),t.jsx(Ja,{children:t.jsx(Xt,{children:i==="In-Progress"||i==="Not-Started"?t.jsx(St,{size:"Small",start:!0}):e.chargeCard?.department?.className??Ye.strings.hyphen})})]})]})]}),t.jsx(jo,{numberOfDots:2,activeIndex:y,handleClick:n,style:{marginTop:"12px",marginBottom:be.navigationMarginBottom.valuePx(m)},dotStyle:{width:a.sp2,height:a.sp2},spendManagementPromoCardActive:!0,promoColor:x.colors.primary,promoColorHover:x.colors.grey1})]})},vs=({chargeCardDetailView:e,classListFetchState:i,isChargeCardFeatureEnabled:s,creditAccount:u,creditAccountRepayment:h,isDebitCard:f,controllerEmails:c,productInformation:g,creditAccountInformation:m,debitAccountInformation:x,cardIssuedByRoles:y,cardIssuedByDepartmentName:n,cardHolderRoles:C,cardHolderDepartmentName:w,analytics:j})=>{if(e.chargeCard!=null&&i==="Completed"&&e.transactionStatistics.fetchState==="Completed"&&(!s||u.fetchState==="Completed"&&h.fetchState==="Completed")&&(!f||e.depositAccountLimitFetchState.fetchState==="Completed")){const b=e.chargeCard.type.code.includes("physical")?e.chargeCard.cardActivationAttemptHistory[0]?.timestamp:e.chargeCard.createTime;j.trackCardsUpdateSpendLimitInitiated(c,g,{cardId:e.chargeCard.id,cardName:e.chargeCard.cardName,cardType:Do(e.chargeCard.type.code),cardCategory:e.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:xt(e.chargeCard.limit.amount),cardLastFourDigits:e.chargeCard.accountLast4,cardStatus:e.chargeCard.status.code,cardAssignedDate:e.chargeCard.createTime?.format(yt.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:e.chargeCard.providerCardCreateTime?.format(yt.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:b?.format(yt.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:e.chargeCard.creditLimitFrequency.name,cardSpentAmount:xt(e.chargeCard.balance.amount),cardAvailableLimit:xt(e.chargeCard.available.amount),cardUtilizationPercent:Io(e.chargeCard.limit.amount,e.chargeCard.available.amount),cardUtilizationAmount:xt(Ao(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:Ha(e.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:e.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:e.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:y,cardIssuedByDepartment:n},{cardholderName:Ha(e.chargeCard.cardHolderUser,!1),cardholderEmail:e.chargeCard.cardHolderUser?.email,cardholderRole:C,cardholderUserId:e.chargeCard.cardHolderUser?.userId,cardholderDepartment:w},"Card Detail","Hyperlink",(e?.chargeCard?.recommendations??[]).map(k=>xt(k.creditLimit.amount)),m,x)}},ks=r.div`
-  display: flex;
-  align-items: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"flex-start":"center"};
-  gap: ${e=>be.remainingAmountContainerGap.valuePx(e.windowSize)};
-  flex-direction: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"column":"row"};
-`,js=r(ge)`
-  color: ${e=>e.theme.colors.primary};
-`,Ls=r(ge)`
-  color: ${e=>e.theme.colors.hero};
-`,Is=r.div`
-  display: flex;
-  align-items: end;
-`,Ds=r.div`
-  width: 100%;
-  overflow: hidden;
-`,As=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=>be.addressSectionHeight.valuePx(e.windowSize)};
-`,Ts=r.div`
-  display: flex;
-  justify-content: unset;
-  gap: ${e=>be.addressSectionGap.valuePx(e.windowSize)};
-  position: absolute;
-  width: 100%;
-  ${({isActive:e,isAutoSlide:i})=>se`
-    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"}`};
-`,Es=r.div`
-  display: flex;
-  justify-content: unset;
-  ${({isActive:e,isAutoSlide:i})=>se`
-    transform: translateX(${e?i?"95%":"0%":"105%"});
-  `};
-  transition: transform
-    ${({isAutoSlide:e,isActive:i})=>e&&i?"0.5s":"0.3s"}
-    ease-out;
-  gap: ${a.sp8};
-`,qa=r.div`
-  min-width: ${e=>be.ownerWebMinWidth.valuePx(e.windowSize)};
-  cursor: pointer;
-`,Tt=r(ge)`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  align-items: center;
-`,Ja=r.div``,Fs=r.div`
-  display: flex;
-  align-items: flex-start;
-  gap: ${a.sp1};
-`,Rs=r.div`
-  ${({windowSize:e})=>e==="small"?se`
-          max-width: 220px;
-        `:null};
-`,Xt=r(ge)`
-  color: ${e=>e.theme.colors.primary};
-  text-transform: capitalize;
-`,Xa=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: "baseline";
-  justify-content: center;
-  cursor: pointer;
-`,zs=r.div`
-  display: flex;
-  flex-direction: ${e=>e.windowSize==="small"||!e.isOwnCard?"column":"row"};
-  justify-content: center;
-  align-items: center;
-  gap: ${e=>be.rightSectionGap.valuePx(e.windowSize)};
-  width: ${e=>e.windowSize==="small"?"100%":"max-content"};
-`,Ps=r.div`
-  min-height: ${e=>`calc(${be.rightSectionHeight.valuePx(e.windowSize)} + ${a.sp2})`};
-  min-width: ${e=>`calc(${be.rightSectionWidth.valuePx(e.windowSize)} + ${a.sp2})`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: ${e=>be.cardContainerContentGap.valuePx(e.windowSize)};
-`,Ms=r.div`
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: space-between;
-`,Vs=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=>be.contentContainerPadding.valuePx(e.windowSize)};
-  padding-bottom: ${e=>be.topSectionPaddingBottom.valuePx(e.windowSize)};
-  padding-left: ${e=>be.contentContainerPadding.valuePx(e.windowSize)};
-  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
-  background: ${e=>e.theme.colors.grey5};
-  gap: ${e=>be.leftRightSectionGap.valuePx(e.windowSize)};
-`,Os=r.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin-bottom: ${({windowSize:e})=>be.cardBalanceSectionMarginBottom.valuePx(e)};
-`,Ka=r.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-`,Hs=r(Er)`
-  color: ${e=>e.theme.colors.primary};
-  ${e=>`${ca.spentAmount.style(e.windowSize)}`};
-`,Ns=r.div`
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  ${({windowSize:e})=>e==="small"?se`
-          margin-bottom: ${a.sp4};
-        `:null};
-`,Bs=r.div`
-  display: flex;
-  flex-direction: ${({windowSize:e})=>e==="small"?"column":"row"};
-  align-items: ${({windowSize:e})=>e==="small"?"flex-start":"flex-end"};
-`,Ws=r(ra)`
-  color: ${e=>e.theme.colors.hero};
-  margin-right: ${a.sp1};
-`,Us=r(io)`
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: ${a.sp0};
-  color: ${d.link};
-  &:hover {
-    text-decoration: underline;
-  }
-`,_s=r.div`
-  display: flex;
-  align-items: flex-end;
-  gap: ${a.sp1};
-`,Zs=r(ge)`
-  color: ${e=>e.theme.colors.hero};
-`,Gs=r(ge)`
-  color: ${e=>e.theme.colors.hero};
-`,Ys=r.div`
-  width: 100%;
-  height: ${a.sp1};
-  display: flex;
-  margin: ${a.sp2} ${a.sp0};
-  border-radius: ${({windowSize:e})=>be.barRadius.valuePx(e)};
-  background: ${e=>e.theme.colors.grey2};
-`,qs=r.div`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  color: ${e=>e.theme.colors.primary};
-`,Qa=r(Er)`
-  color: ${e=>e.theme.colors.primary};
-  ${e=>`${ca.remainingAmount.style(e.windowSize)}`};
-`,er=r(ro)`
-  ${e=>`${ca.remainingAmount.style(e.windowSize)}`};
-  color: ${e=>e.theme.colors.primary};
-`,Js=r.div`
-  background: ${d.success};
-  width: 0%;
-  height: ${a.sp1};
-  transition: width 4s ease;
-`,tr=r.span`
-  display: flex;
-  color: ${e=>e.theme.colors.grey1};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,ar=r(gt)`
-  padding: ${a.sp0} 2px;
-  color: ${d.heroDark};
-  background: ${d.blackColor};
-  border-radius: ${a.sp1};
-  position: absolute;
-  left: 20px;
-`,rr=r(Tr)`
-  height: 12px;
-  width: 12px;
-  margin-left: ${a.sp1};
-  color: ${e=>e.isHover?e.theme.colors.primary:e.theme.colors.grey2};
-  cursor: pointer;
-`,ir=r(bt)`
-  height: 12px;
-  width: 12px;
-  margin-left: ${a.sp1};
-  color: ${d.success};
-`,Xs=r.div`
-  width: 21px;
-  height: 21px;
-`,Ks=r(lo)`
-  color: ${d.brandColorOpal};
-  width: 100%;
-  height: 100%;
-`,or=r.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-`,vt=ve.getLocalizedStrings().spendManagement.chargeCard.cardDetails.header,Qs={key:"merchant",value:vt.merchant,sortOrder:"ascending",width:new A(38,38)},ed={key:"paymentDate",value:vt.paymentDate,sortOrder:"ascending",width:new A(21,21)},td={key:"receipts",value:vt.receipts,sortOrder:"ascending",width:new A(16,16)},ad={key:"type",value:vt.type,sortOrder:"ascending",width:new A(14,14)},rd={key:"amount",value:vt.amount,sortOrder:"ascending",width:new A(11,11)},Xr=()=>[Qs,ed,td,ad,rd],ht={headerLastColumnTopPadding:new A(l[0],l[4]),headerLastColumnRightPadding:new A(l[3],l[11]),headerLastColumnBottomPadding:new A(l[0],l[4]),headerLastColumnLeftPadding:new A(l[3],l[11]),headerHeight:new A(wo,xo)};function id({hideSorting:e,sortConfig:i,onColumnSortConfigChanged:s}){const u=ot(),h=Le(),f=Xr(),c=(n,C)=>{let w=C;i.sortKey===n&&(w=C==="ascending"?"descending":"ascending"),s(n,w)},g=f.find(n=>n.key===i.sortKey)??f[0],m=n=>f.find(C=>C.key===n)?.value??"",x=f.map(n=>n.key),y=ve.getLocalizedStrings().spendManagement.chargeCard.cardList;return h==="small"?t.jsxs(nr,{windowSize:h,children:[t.jsxs(dd,{children:[t.jsx(ld,{children:t.jsx(cd,{})}),t.jsx(go,{title:y.sortBy,placeholder:y.sortBy,pickerValues:x,valueToLabel:m,selectedValue:i.sortKey,onPickerSelectionChanged:n=>{c(n,"ascending")},optionTextStyle:_.smallRegular,titleTextStyle:_.smallRegular,titleColor:u.colors.primary,selectedOptionColor:u.colors.hero,optionBackgroundColor:u.colors.grey5,downChevronVisible:!1,backgroundColor:u.colors.grey4,isDisabled:e})]}),t.jsxs(ud,{hideSorting:e,onClick:()=>{e||c(g.key,g.sortOrder)},"data-testid":K("charge-card-trxn-small-header",i.sortKey),children:[t.jsx(ge,{children:g.value}),e?null:t.jsx(sr,{sortDataValue:i.sortKey,headerData:g,children:t.jsx(dr,{})})]})]}):t.jsx(nr,{windowSize:h,children:f.map(n=>t.jsxs(nd,{hideSorting:e,sortDataValue:i.sortKey,actualDataValue:n.key,wrapperWidth:n.width,windowSize:h,children:[t.jsxs(pd,{hideSorting:e,onClick:()=>{e||c(n.key,n.sortOrder)},"data-testid":K("charge-card-trxn-header",i.sortKey),children:[t.jsx(ge,{children:n.value}),t.jsx(sr,{sortDataValue:i.sortKey,headerData:n,children:e?null:t.jsx(dr,{})})]}),t.jsx(hd,{sortDataValue:i.sortKey,windowSize:h,isVisible:e?!1:i.sortKey===n.key&&n.key!=="paymentDate",children:e?null:t.jsx(sd,{onClick:()=>{e||c("paymentDate","ascending")},"data-testid":K("charge-card-trxn-close-sort",i.sortKey)})})]},n.key))})}const od=ko.memo(id),nr=r(ge)`
-  top: ${a.sp0};
-  left: ${a.sp0};
-  min-height: ${e=>ht.headerHeight.valuePx(e.windowSize)};
-  max-height: ${e=>ht.headerHeight.valuePx(e.windowSize)};
-  width: auto;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${e=>`${ht.headerLastColumnTopPadding.valuePx(e.windowSize)} ${ht.headerLastColumnRightPadding.valuePx(e.windowSize)} ${ht.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${ht.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
-  background-color: ${e=>e.theme.colors.grey4};
-  justify-content: space-between;
-  position: sticky;
-`,nd=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"?se`
-          flex: 1 1 auto;
-        `:se`
-          padding-left: ${a.sp0};
-        `};
-  box-sizing: border-box;
-  overflow: hidden;
-`,sd=r(fo)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-`,sr=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"}
-`,dr=r(Rr)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: inherit;
-`,dd=r.div`
-  gap: ${a.sp1};
-  display: flex;
-`,cd=r(Co)`
-  width: 12px;
-  height: 12px;
-  color: ${e=>e.theme.colors.grey1};
-`,ld=r.div`
-  margin-right: ${a.sp1};
-  display: flex;
-  align-items: center;
-`,hd=r.div`
-  display: ${e=>e.isVisible?"flex":"none"};
-  align-items: center;
-  padding-top: 2px;
-`,pd=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};
-  }
-`,ud=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 Kr(e,i,s){return md(e,i,s)}async function md(e,i,s,u){const h=`${e}?query=${encodeURIComponent(JSON.stringify(s))}`,f=ve.getLocalizedStrings().downloadReport;try{const c=await bo(h,{method:"GET",headers:{"zeni-user-id":i.userId,"zeni-tenant-id":i.tenantId,"zeni-session-id":i.sessionId}});if(c.ok){const g=u??$o(c.headers,"Charge Card Transaction Receipt.pdf"),m=await c.arrayBuffer();vo(m,g)}else console.error(`${f.reportErrorMessage} ${c.statusText}`)}catch(c){console.error(`${f.reportErrorMessage} ${JSON.stringify(c)}`)}}async function Qr(e,i,s){const u=`${e}?query=${encodeURIComponent(JSON.stringify(s))}`,h=ve.getLocalizedStrings().downloadReport;try{const f=await fetch(u,{method:"GET",headers:{"zeni-user-id":i.userId,"zeni-tenant-id":i.tenantId,"zeni-session-id":i.sessionId}});if(f.ok)return await f.json();console.error(`${h.reportErrorMessage} ${f.statusText}`)}catch(f){throw console.error(`${h.reportErrorMessage} ${JSON.stringify(f)}`),f}return[]}const gd=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"})),ei=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"})),ti=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:Cd,spendManagement:{chargeCard:{cardDetails:cr}},common:{strings:{hyphen:fd},tooltips:{addMissingReceipt:wd,addReceipt:xd,viewReceipt:yd}}}=ve.getLocalizedStrings(),Ge={containerPaddingLeft:new A(l[3],l[4]),containerPaddingRight:new A(l[3],l[4]),containerPaddingTop:new A(l[2],l[3]),containerPaddingBottom:new A(l[2],l[3]),containerMarginLeft:new A(l[4],l[8]),webkitLineClamp:new A(2,1,1,1,1)},Sd=(e,i)=>e.attachments!=null&&e.attachments.length>0?yd:e.amount.amount<=i.amount?xd:wd,ai=(e,i,s,u)=>e.attachments!=null&&e.attachments.length>0?t.jsx(Bd,{onClick:h=>{h.stopPropagation(),u()},"data-testid":K("card-transaction-row-view-receipt",e.id)}):e.amount.amount<=i.amount?t.jsx(_d,{onClick:h=>{h.stopPropagation(),s()},"data-testid":K("card-transaction-row-optional-upload-receipt",e.id)}):t.jsx(Ud,{onClick:h=>{h.stopPropagation(),s()},"data-testid":K("card-transaction-row-upload-receipt",e.id)}),bd=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:f,cardId:c,uploadReceiptsFetchState:g,uploadReceiptsShowTick:m,isViewReceiptClickedImmediatelyAfterUpload:x,authParams:y,transaction:n,receiptRequiredAboveAmount:C,updateChargeCardTransactionAttachments:w,onUploadReceiptComplete:j,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:k,updateChargeCardTransactionIsViewReceiptClicked:L,removeSnackbar:p,onChargeCardTransactionRowClick:R})=>{const S=Le(),[M,V]=o.useState(!1),[v,Y]=o.useState([]),[Q,Z]=o.useState(null);o.useEffect(()=>{!s&&x&&(ee(I[0]),te())},[s,x]);const I=n.attachments?.filter(B=>B.contentType!=null&&Pr.includes(B.contentType))??[],[de,ee]=o.useState(I[0]),[ce,O]=o.useState([]),[G,W]=o.useState(void 0);o.useEffect(()=>{async function B(U){ce.includes(U.attachment_id)?console.warn(`Attachment with ID ${U.attachment_id} is already getting downloaded`):(O([U.attachment_id,...ce]),await Kr(f,y,U),O(Hr(ce,X=>X==U.attachment_id)))}G!=null&&(B({card_id:c,transaction_id:n.id,attachment_id:G}),W(void 0))},[G]);const re=()=>{L(n.id,c,!1),V(!1),Z(null),Y([]),I.length>0&&ee(I[0])},te=()=>{V(!0);const B=I.map(X=>X.id);async function U(X){return await Qr(h,y,X)}U({card_id:c,transaction_id:n.id,attachment_ids:B}).then(X=>{Y(X),X.length>0&&Z(X[0])})},{merchant:ie,createTime:oe,transactionType:F,thirdPartyTransactionId:ae}=n,q=()=>{s?(p(),L(n.id,c,!0)):(ee(I[0]),te())},$=o.useRef(null);async function J(B,U){b(n.id,c,"In-Progress"),await Br(`${e}/1.0/cards/transactions/${n.id}/attachments`,y,B,U).then(X=>{X!=null&&w(n.id,X),b(n.id,c,"Completed"),k(n.id,c,!0),setTimeout(()=>{k(n.id,c,!1),j(!0)},2e3)}).catch(X=>{b(n.id,c,"Error"),j(!1,X)})}const H=()=>{$.current?.click()},he=B=>{if(B.target.files!=null){const U=B.target.files,X=[],me=[];for(let Ie=0;Ie<U.length;Ie++)X.push(U[Ie].name),me.push(U[Ie]);J?.(me,X)}},D=Xr(),N=Mr(n.transactionStatus),le=u?ie.brandName??ie.name:ie.name,ne=Je("0,0.00",n.amount),T=F.code==="transfer",ke=ae!=null&&u,je=T&&n.direction==="debit",$e=T&&n.direction==="credit";return t.jsxs(Ld,{windowSize:S,isClickable:ke,"data-testid":K("card-transaction-row",n.id),onClick:B=>{B.stopPropagation(),ke&&R(F.code,ae)},children:[t.jsx(Id,{children:t.jsxs(Dd,{children:[t.jsxs(Ad,{windowSize:S,responsiveWidth:D[0].width,children:[je?t.jsx(zd,{}):$e?t.jsx(Pd,{}):t.jsx(Md,{src:ie.logo?.url?.toString()}),t.jsx(Td,{windowSize:S,hasMarginRight:N.code==="paid",children:le}),N.code!=="paid"?t.jsxs(vd,{children:[t.jsx(jd,{windowSize:S}),t.jsx(kd,{color:N.color,windowSize:S,children:N.value})]}):null]}),t.jsx(Rd,{windowSize:S,responsiveWidth:D[1].width,children:t.jsx(Vd,{children:oe.format(Cd.visual.MMMDCommaYYYYformat)})}),t.jsx(Hd,{windowSize:S,responsiveWidth:D[2].width,children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?fd:g?.fetchState==="In-Progress"?t.jsx(St,{size:"Small",start:!0}):m?t.jsx(Wd,{}):t.jsxs(aa,{enterDelay:600,display:"flex",placement:"bottom",title:Sd(n,C),children:[t.jsx($d,{"data-testid":K("card-transaction-row-upload-receipt",n.id),onClick:B=>{B.stopPropagation()},children:t.jsx(Vr,{name:"transactionLineAttachment",fileRef:$,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:he,multiple:!0,onFileSizeError:(B,U)=>{B&&j(!1,{code:500,message:U===!0?cr.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",Et(i,0)):cr.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",Et(i,0))})}})}),ai(n,C,H,q)]})}),t.jsx(Od,{windowSize:S,responsiveWidth:D[3].width,children:t.jsx(Nd,{title:F.name,children:F.name})}),t.jsx(Ed,{windowSize:S,responsiveWidth:D[4].width,children:t.jsx(Fd,{windowSize:S,title:Je("0,0.[00]",n.amount),children:n.direction==="debit"?ne:`-${ne}`})})]})}),M&&I.length>0?Nr.createPortal(t.jsx(Or,{allFiles:v,fileSource:Q,file:de,title:de.fileName,attachments:I,setFileSource:Z,setShowFullScreenView:V,onCrossClick:re,setSelectedFileAttachment:ee,onDownloadClick:B=>{W(B.id)},handleTouchStart:()=>{},handleTouchMove:()=>{},handleTouchEnd:()=>{}}),document.body):null]})},$d=r.div``,vd=r.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${a.sp2};
-  margin-right: ${a.sp4};
-`,kd=r(gt)`
-  color: ${e=>e.color};
-`,jd=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};
-`,Ld=r.div`
-  display: flex;
-  background-color: ${e=>e.theme.colors.grey5};
-  padding-left: ${e=>Ge.containerPaddingLeft.valuePx(e.windowSize)};
-  padding-right: ${e=>Ge.containerPaddingRight.valuePx(e.windowSize)};
-  padding-top: ${e=>Ge.containerPaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${e=>Ge.containerPaddingBottom.valuePx(e.windowSize)};
-  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
-  box-shadow: ${e=>e.theme.mode==="dark"?`${d.dropShadowNormalDark} ${a.sp0} 2px ${a.sp1}`:`${a.sp0} 2px ${a.sp1} ${d.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=>Ge.containerMarginLeft.valuePx(e.windowSize)};
-  margin-left: ${e=>Ge.containerMarginLeft.valuePx(e.windowSize)};
-  box-sizing: border-box;
-  align-items: center;
-  cursor: ${e=>e.isClickable?"pointer":"default"};
-`,Id=r.div`
-  display: block;
-  width: 100%;
-`,Dd=r.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`,Ad=r.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${a.sp2};
-  align-items: center;
-  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
-`,Td=r(Ve)`
-  margin-right: ${e=>e.hasMarginRight?a.sp3:a.sp0};
-  color: inherit;
-  -webkit-line-clamp: ${e=>Ge.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: capitalize;
-`,Ed=r(Ve)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
-`,Fd=r(Ve)`
-  color: inherit;
-  flex-grow: 1;
-  -webkit-line-clamp: ${e=>Ge.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Rd=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;
-`,ri=e=>se`
-  width: ${a.sp4};
-  height: ${a.sp4};
-  color: ${e.colors.hero};
-`,zd=r(ti)`
-  ${({theme:e})=>ri(e)}
-`,Pd=r(ei)`
-  ${({theme:e})=>ri(e)}
-`,Md=r.img`
-  display: flex;
-  width: ${a.sp4};
-  height: ${a.sp4};
-`,Vd=r(Ve)`
-  color: inherit;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,Od=r(Ve)`
-  color: ${e=>e.theme.colors.hero};
-  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-`,Hd=r.div`
-  color: ${e=>e.theme.colors.hero};
-  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-`,Nd=r(gt)`
-  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};
-`,Bd=r(yo)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,Wd=r(bt)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  color: ${d.success};
-`,Ud=r(So)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.brandColorGoldDark};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,_d=r(gd)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,{dateFormat:Zd,spendManagement:{chargeCard:{cardDetails:Kt}},common:{strings:{hyphen:Gd}}}=ve.getLocalizedStrings(),Yd={webkitLineClamp:new A(2,1,1,1,1)},qd=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:f,cardId:c,isViewReceiptClickedImmediatelyAfterUpload:g,uploadReceiptsShowTick:m,uploadReceiptsFetchState:x,authParams:y,transaction:n,receiptRequiredAboveAmount:C,onUploadReceiptComplete:w,updateChargeCardTransactionAttachments:j,updateChargeCardTransactionReceiptsShowTick:b,updateChargeCardTransactionIsViewReceiptClicked:k,updateChargeCardTransactionUploadReceiptsFetchStatus:L,removeSnackbar:p,onChargeCardTransactionRowClick:R})=>{const S=Le(),[M,V]=o.useState(0),[v,Y]=o.useState(0),[Q,Z]=o.useState(0),I=z=>{Z(z),W(!0),q(F[z]),oe(re[z])};function de(z){V(z.targetTouches[0].clientX)}function ee(z){Y(z.targetTouches[0].clientX)}function ce(z){return z<0?F.length+z:z%F.length}function O(){M-v>50&&v!==0&&Q<F.length-1?(I(ce(Q+1)),V(0),Y(0)):M-v<-50&&v!==0&&Q>0&&(I(ce(Q-1)),V(0),Y(0))}const[G,W]=o.useState(!1),[re,te]=o.useState([]),[ie,oe]=o.useState(null);o.useEffect(()=>{!s&&g&&(q(F[0]),N())},[s,g]);const F=n.attachments?.filter(z=>z.contentType!=null&&Pr.includes(z.contentType))??[],[ae,q]=o.useState(F[0]),[$,J]=o.useState([]),[H,he]=o.useState(void 0);o.useEffect(()=>{async function z(pe){$.includes(pe.attachment_id)?console.warn(`Attachment with ID ${pe.attachment_id} is already getting downloaded`):(J([pe.attachment_id,...$]),await Kr(f,y,pe),J(Hr($,E=>E==pe.attachment_id)))}H!=null&&(z({card_id:c,transaction_id:n.id,attachment_id:H}),he(void 0))},[H]);const D=()=>{k(n.id,c,!1),W(!1),oe(null),te([]),F.length>0&&q(F[0])},N=()=>{W(!0);const z=F.map(E=>E.id);async function pe(E){return await Qr(h,y,E)}pe({card_id:c,transaction_id:n.id,attachment_ids:z}).then(E=>{te(E),E.length>0&&oe(E[0])})},{merchant:le,createTime:ne,transactionType:T,thirdPartyTransactionId:ke}=n,je=()=>{s?(p(),k(n.id,c,!0)):(q(F[0]),N())},$e=o.useRef(null);async function B(z,pe){L(n.id,c,"In-Progress"),await Br(`${e}/1.0/cards/transactions/${n.id}/attachments`,y,z,pe).then(E=>{E!=null&&j(n.id,E),L(n.id,c,"Completed"),w(!0),b(n.id,c,!0),setTimeout(()=>b(n.id,c,!1),2e3)}).catch(E=>{L(n.id,c,"Error"),w(!1,E)})}const U=()=>{$e.current?.click()},X=z=>{if(z.target.files!=null){const pe=z.target.files,E=[],dt=[];for(let Pe=0;Pe<pe.length;Pe++)E.push(pe[Pe].name),dt.push(pe[Pe]);B?.(dt,E)}},me=Mr(n.transactionStatus),Ie=u?le.brandName??le.name:le.name,Be=Je("0,0.00",n.amount),nt=T.code==="transfer",st=ke!=null&&u,We=nt&&n.direction==="debit",we=nt&&n.direction==="credit";return t.jsxs(nc,{windowSize:S,"data-testid":K("card-transaction-row-small",n.id),onClick:z=>{z.stopPropagation(),st&&R(T.code,ke)},children:[t.jsx(sc,{children:t.jsxs(dc,{children:[t.jsxs(hc,{children:[t.jsx(rc,{children:We?t.jsx(Jd,{}):we?t.jsx(Xd,{}):t.jsx(uc,{src:le.logo?.url?.toString()})}),t.jsxs(mc,{children:[t.jsxs(Kd,{children:[t.jsx(cc,{windowSize:S,children:Ie}),me.code!=="paid"?t.jsxs(Qd,{children:[t.jsx(tc,{windowSize:S}),t.jsx(ec,{color:me.color,windowSize:S,children:me.value})]}):null]}),t.jsx(lc,{children:`${Kt.paymentDate} ${ne.format(Zd.visual.MMMDCommaYYYYformat)}`})]})]}),t.jsxs(pc,{children:[t.jsx(gc,{children:n.direction==="debit"?Be:`-${Be}`}),t.jsx(oc,{title:T.name,children:T.name}),t.jsx(ic,{children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?Gd:x?.fetchState==="In-Progress"?t.jsx(St,{size:"Small",start:!0}):m?t.jsx(ac,{}):t.jsxs(lr,{children:[t.jsx(lr,{"data-testid":K("card-transaction-row-small-upload-receipt",n.id),onClick:z=>{z.stopPropagation()},children:t.jsx(Vr,{name:"transactionLineAttachment",fileRef:$e,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:X,multiple:!0,onFileSizeError:(z,pe)=>{z&&w(!1,{code:500,message:pe===!0?Kt.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",Et(i,0)):Kt.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",Et(i,0))})}})}),ai(n,C,U,je)]})})]})]})}),G&&F.length>0?Nr.createPortal(t.jsx(Or,{allFiles:re,fileSource:ie,file:ae,title:ae.fileName,attachments:F,setFileSource:oe,setShowFullScreenView:W,onCrossClick:D,setSelectedFileAttachment:q,onDownloadClick:z=>{he(z.id)},handleTouchStart:de,handleTouchMove:ee,handleTouchEnd:O}),document.body):null]})},ii=e=>se`
-  width: ${a.sp4};
-  height: ${a.sp4};
-  color: ${e.colors.hero};
-`,Jd=r(ti)`
-  ${({theme:e})=>ii(e)}
-`,Xd=r(ei)`
-  ${({theme:e})=>ii(e)}
-`,lr=r.div``,Kd=r.div`
-  display: flex;
-  gap: ${a.sp2};
-  align-items: flex-start;
-`,Qd=r.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${a.sp2};
-  min-height: ${a.sp4};
-`,ec=r(gt)`
-  color: ${e=>e.color};
-`,tc=r.div`
-  display: block;
-  width: ${a.sp1};
-  height: ${a.sp1};
-  border-radius: 100%;
-  background-color: ${e=>e.theme.colors.grey1};
-`,ac=r(bt)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  color: ${d.success};
-`,rc=r.div``,ic=r.div`
-  margin-top: ${a.sp2};
-`,oc=r(gt)`
-  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};
-`,nc=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};
-`,sc=r.div`
-  display: block;
-  width: 100%;
-`,dc=r.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`,cc=r(Ve)`
-  color: inherit;
-  flex-grow: 1;
-  display: -webkit-box;
-  -webkit-line-clamp: ${e=>Yd.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 112px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-transform: capitalize;
-`,lc=r(gt)`
-  color: inherit;
-  min-height: 18px;
-  margin-top: -${a.sp1};
-`,hc=r.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${a.sp2};
-`,pc=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-`,uc=r.img`
-  display: flex;
-  width: ${a.sp4};
-  height: ${a.sp4};
-`,mc=r.div`
-  margin-bottom: 6px;
-`,gc=r(Ve)`
-  color: inherit;
-`,Cc=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"})))),fc=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:mt}},common:wc}=ve.getLocalizedStrings();function xc({transactions:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,uploadReceiptsFetchStateByTransactionId:u,uploadReceiptsShowTickByTransactionId:h,isViewReceiptClickedImmediatelyAfterUploadTransactionId:f,cardId:c,receiptRequiredAboveAmount:g,isAiCategorizationEnabledForCardsTransactions:m,transactionAttachmentsEndpointToFetch:x,transactionAttachmentEndpointToDownload:y,cardsEndPoint:n,authParams:C,hideSorting:w,isOwnCard:j,uiState:b,fetchState:k,cardHolderUser:L,cardStatusCode:p="active",cardCodeType:R="business_virtual_credit_card",onReloadTransactions:S,onFetchChargeCardTransactionList:M,onColumnSortConfigChanged:V,removeSnackbar:v,onChargeCardTransactionRowClick:Y,onUploadReceiptComplete:Q,onUpdateScrollYOffset:Z,updateChargeCardTransactionAttachments:I,updateChargeCardTransactionUploadReceiptsFetchStatus:de,updateChargeCardTransactionReceiptsShowTick:ee,updateChargeCardTransactionIsViewReceiptClicked:ce}){const O=Le(),G=o.useRef(null),[W,re]=o.useState(!1);o.useEffect(()=>{G.current?.resetAfterIndex(0)},[O,G]),o.useEffect(()=>{k==="Completed"&&re(!1)},[k]);const te=()=>O!=="small"?74:128,ie=(q,$)=>{M(q,$)},oe=()=>{re(!0),ie(b.pageToken,b.pageTokenType)},F=q=>q<e.length,ae=()=>{b.pageToken!=null&&k==="Completed"&&oe()};return t.jsxs(Lc,{isOwnCard:j,windowSize:O,isEmptyTransaction:e.length===0,children:[t.jsx(Ic,{windowSize:O,children:k==="Error"?t.jsxs(Tc,{children:[t.jsx(Ec,{onClick:S,"data-testid":K("card-transaction-list-reload"),children:t.jsx(Lr,{})}),t.jsx(Fc,{children:wc.reloadPage.label})]}):k==="Not-Started"||k==="In-Progress"&&e.length===0?t.jsx(zc,{children:t.jsx(St,{size:"ExtraLarge",start:!0})}):k==="Completed"||k==="In-Progress"&&e.length>0?p==="request_on_hold"?t.jsx(Sc,{cardType:R,cardHolderUser:L}):p==="inactive"?t.jsx(bc,{cardHolderUser:L}):e.length===0?t.jsx(yc,{}):t.jsx(Ac,{windowSize:O,children:t.jsx(qi,{children:({height:q,width:$})=>t.jsx(Ji,{isItemLoaded:F,itemCount:e.length+1,loadMoreItems:ae,children:({onItemsRendered:J})=>t.jsx(Xi,{ref:G,height:q,itemCount:e.length,onItemsRendered:J,itemSize:te,itemKey:H=>e[H].id,width:$,style:{willChange:"auto"},innerElementType:H=>jc(H,w,b,k,V),onScroll:({scrollOffset:H})=>{Z?.(H)},initialScrollOffset:b.scrollYOffset,children:H=>t.jsx($c,{...H,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,cardsEndPoint:n,isAiCategorizationEnabledForCardsTransactions:m,transactionAttachmentsEndpointToFetch:x,transactionAttachmentEndpointToDownload:y,uploadReceiptsFetchStateByTransactionId:u,uploadReceiptsShowTickByTransactionId:h,isViewReceiptClickedImmediatelyAfterUploadTransactionId:f,cardId:c,authParams:C,transactions:e,receiptRequiredAboveAmount:g,updateChargeCardTransactionAttachments:I,onUploadReceiptComplete:Q,updateChargeCardTransactionUploadReceiptsFetchStatus:de,updateChargeCardTransactionReceiptsShowTick:ee,updateChargeCardTransactionIsViewReceiptClicked:ce,onChargeCardTransactionRowClick:Y,removeSnackbar:v})})})})}):null}),W===!0?t.jsx(Pc,{children:t.jsx(St,{size:"Small",start:!0})}):null]})}const yc=()=>{const e=Le();return t.jsxs(la,{children:[t.jsx(ma,{children:t.jsx(ni,{})}),t.jsxs(ha,{children:[t.jsx(pa,{children:mt.transactionTable.emptyTransactions.title}),t.jsx(ua,{windowSize:e,children:mt.transactionTable.emptyTransactions.subTitle})]})]})},Sc=({cardType:e,cardHolderUser:i})=>{const s=i!=null?i.firstName+" "+i.lastName:"",u=Le();return t.jsxs(la,{children:[t.jsx(ma,{children:t.jsx(Vc,{})}),t.jsxs(ha,{children:[t.jsx(pa,{children:mt.transactionTable.pendingProfileCompletion.title}),t.jsx(ua,{windowSize:u,children:mt.transactionTable.pendingProfileCompletion.subTitle[e].replace("__user__",s)})]})]})},bc=({cardHolderUser:e})=>{const i=Le();return t.jsxs(la,{children:[t.jsx(ma,{children:t.jsx(ni,{})}),t.jsxs(ha,{children:[t.jsx(pa,{children:mt.transactionTable.pendingActivation.title}),t.jsx(ua,{windowSize:i,children:mt.transactionTable.pendingActivation.subTitle.replace("__user__",e?.firstName??"")})]})]})},$c=({index:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,style:u,transactions:h,isAiCategorizationEnabledForCardsTransactions:f,uploadReceiptsFetchStateByTransactionId:c,uploadReceiptsShowTickByTransactionId:g,isViewReceiptClickedImmediatelyAfterUploadTransactionId:m,cardId:x,cardsEndPoint:y,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:C,receiptRequiredAboveAmount:w,authParams:j,updateChargeCardTransactionAttachments:b,onUploadReceiptComplete:k,updateChargeCardTransactionUploadReceiptsFetchStatus:L,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:R,onChargeCardTransactionRowClick:S,removeSnackbar:M})=>t.jsx(Rc,{style:{...u,width:"100%"},className:"spend-management-list-item",children:t.jsx(kc,{documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,cardId:x,isAiCategorizationEnabledForCardsTransactions:f,cardsEndPoint:y,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:C,authParams:j,receiptRequiredAboveAmount:w,transaction:h[e],uploadReceiptsFetchState:c?.[h[e].id],uploadReceiptsShowTick:g?.[h[e].id],isViewReceiptClickedImmediatelyAfterUpload:m?.[h[e].id],updateChargeCardTransactionAttachments:b,onUploadReceiptComplete:k,updateChargeCardTransactionUploadReceiptsFetchStatus:L,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:R,onChargeCardTransactionRowClick:S,removeSnackbar:M},h[e].id)}),vc=({transaction:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:u,uploadReceiptsFetchState:h,uploadReceiptsShowTick:f,isViewReceiptClickedImmediatelyAfterUpload:c,cardsEndPoint:g,transactionAttachmentsEndpointToFetch:m,transactionAttachmentEndpointToDownload:x,cardId:y,receiptRequiredAboveAmount:n,authParams:C,updateChargeCardTransactionAttachments:w,onUploadReceiptComplete:j,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:k,updateChargeCardTransactionIsViewReceiptClicked:L,onChargeCardTransactionRowClick:p,removeSnackbar:R})=>{const S=Le()==="small"?qd:bd;return t.jsx(S,{isSnackbarOpen:s,documentAiReceiptMaxSizeLimit:i,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:m,transactionAttachmentEndpointToDownload:x,uploadReceiptsFetchState:h,uploadReceiptsShowTick:f,isViewReceiptClickedImmediatelyAfterUpload:c,transaction:e,cardId:y,receiptRequiredAboveAmount:n,cardsEndPoint:g,authParams:C,updateChargeCardTransactionAttachments:w,onUploadReceiptComplete:j,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:k,updateChargeCardTransactionIsViewReceiptClicked:L,onChargeCardTransactionRowClick:p,removeSnackbar:R})},kc=o.memo(vc),jc=(e,i,s,u,h)=>t.jsx(oi,{...e,onColumnSortConfigChanged:h,hideSorting:i,uiState:{sortKey:s.sortKey,sortOrder:s.sortOrder},fetchState:u}),oi=o.forwardRef((e,i)=>{const{children:s,style:u,uiState:h,onColumnSortConfigChanged:f,hideSorting:c,...g}=e;return t.jsxs(Mc,{ref:i,style:{...u,width:"auto"},...g,children:[t.jsx(od,{onColumnSortConfigChanged:f,sortConfig:{sortKey:h.sortKey,sortOrder:h.sortOrder},hideSorting:c}),t.jsx(Dc,{children:s})]})});oi.displayName="Charge Card Transaction list View inner element type";const Lc=r.div`
-  display: block;
-  height: ${e=>e.isEmptyTransaction?"calc(100vh - 436px)":"calc(100vh - 224px)"};
-  width: 100%;
-`,Ic=r.div`
-  height: 100%;
-`,Dc=r.div`
-  position: relative;
-  width: auto;
-  height: 100%;
-`,Ac=r.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  max-width: 99.9%;
-`,Tc=r.div`
-  display: flex;
-  width: 100%;
-  height: calc(100% - 60px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`,Ec=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};
-    }
-  }
-`,Fc=r(ra)`
-  margin-top: ${a.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,Rc=r.div`
-  top: ${a.sp0};
-  left: ${a.sp0};
-  padding-bottom: ${a.sp3};
-  box-sizing: border-box;
-`,zc=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};
-`,Pc=r.div`
-  display: flex;
-  width: 100%;
-  height: auto;
-  padding-bottom: ${a.sp3};
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`,la=r.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: ${a.sp2};
-  height: 100%;
-  margin: ${a.sp0} ${a.sp3};
-`,ha=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`,pa=r(ho)`
-  color: ${e=>e.theme.colors.brandColorJade};
-`,ua=r(sa)`
-  color: ${e=>e.theme.colors.primary};
-  ${e=>e.windowSize!=="small"?se`
-          white-space: pre;
-        `:null};
-  text-align: center;
-`,ma=r.div``,Mc=r.div``,ni=r(Cc)``,Vc=r(fc)``,{spendManagement:Oc}=ve.getLocalizedStrings(),{cardDetails:Ne}=Oc.chargeCard,Hc=Te`
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-`,Nc=e=>{switch(e){case"slide-in-right-to-left-add-to-wallet":return Hc;default:return null}},Bc=r.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${e=>e.theme.colors.grey4};
-  height: inherit;
-`,Wc=r(Bc)`
-  animation: ${e=>Nc(e.className)} 0.3s forwards;
-`,Uc=({isChargeCardAdmin:e,chargeCardDetailView:i,walletType:s,secretRevealed:u,isDrawerOpen:h,vgsVaultId:f,showSecretInfo:c,changePinInProcess:g,isSandboxEnv:m,controllerEmails:x,isChargeCardFeatureEnabled:y,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:w,chargeCardCashbackDetailState:j,isCardDetailErrored:b,creditAccountRepayment:k,productInformation:L,creditAccountInformation:p,debitAccountInformation:R,cashbackInformation:S,signedInUserToken:M,selectedColor:V,showDrawerAnimation:v,cardDetailsFetchState:Y,setCardDetailsFetchState:Q,setIsCardDetailErrored:Z,setShowSecretInfo:I,setSecretRevealed:de,setShowChangePinPopup:ee,setIsAddToWalletDrawerOpen:ce,isCardDetailFetching:O,handleColorCodeClick:G,onFireOnClickAnalytics:W,onVerifyOtp:re,onVerifyOtpSuccess:te,onResendOtp:ie,onFireVerifyPopOnClickAnalytics:oe,onGetOtp:F})=>{const ae=ot(),[q,$]=o.useState(!1),[J,H]=o.useState(!1),he=v.current;return o.useEffect(()=>{h?document.body.style.overflow="hidden":document.body.style.overflow="unset"},[h,v]),t.jsx(Oi,{onClose:()=>{ce(!1)},anchor:"right",open:!0,PaperProps:{style:{maxWidth:"512px",boxShadow:"none",background:"transparent"}},style:{backgroundColor:d.drawerBackground,display:h?"unset":"none"},disableScrollLock:!h,transitionDuration:250,"data-testid":K("add-card-to-wallet-drawer"),children:t.jsxs(t.Fragment,{children:[t.jsx(kr,{phoneNumberPopupDescription:Ne.verifyPhoneNumberDescription,showOtpPopup:q,showPhoneNumberPopup:J,twoFactorAuthenticationView:i.twoFAView,loggedInUserPhone:i.loggedInUserPhone,onVerifyOtp:re,onVerifyOtpSuccess:D=>{te(D),g?ee(!0):I(!0)},onFireVerifyPopOnClickAnalytics:oe,setShowOtpPopup:$,onResendOtp:ie,setShowPhoneNumberPopup:H,onGetOtp:F}),t.jsxs(Wc,{className:he,children:[t.jsx(Hi,{title:s==="apple"?Ne.addCardToAppleWallet:Ne.addCardToGoogleWallet,style:{zIndex:4},backgroundColor:ae.colors.grey4,onCloseClick:()=>ce(!1)}),t.jsxs(Zc,{children:[t.jsxs(Jc,{children:[t.jsxs(Gc,{children:[t.jsx(rl,{children:t.jsx(ol,{})}),t.jsx(Kc,{children:Ne.openWalletAppOnPhone})]}),t.jsx(Qc,{children:s==="apple"?Ne.openWalletDescriptionApple:Ne.openWalletDescriptionGoogle}),t.jsx(_r,{isChargeCardAdmin:e,onUnlockChargeCard:()=>{},chargeCardDetailView:i,creditAccountRepayment:k,creditAccount:i.creditAccount,setShowSecretInfo:I,secretRevealed:u,isOwnCard:!0,controllerEmails:x,isChargeCardFeatureEnabled:y,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:C,isChargeCardSetupEnabled:w,chargeCardCashbackDetailState:j,isShowingInDrawer:!0,vgsVaultId:f,showSecretInfo:c,isSandboxEnv:m,isCardDetailErrored:b,signedInUserToken:M,productInformation:L,creditAccountInformation:p,debitAccountInformation:R,cashbackInformation:S,selectedColor:V,cardDetailsFetchState:Y,setCardDetailsFetchState:Q,setIsCardDetailErrored:Z,setSecretRevealed:de,isCardDetailFetching:O,handleColorCodeClick:G,onFireOnClickAnalytics:W,setShowPhoneNumberForOtp:H})]}),t.jsx(qc,{}),t.jsxs(Xc,{children:[t.jsxs(Yc,{children:[t.jsx(al,{children:t.jsx(il,{})}),t.jsx(el,{children:Ne.verifyCard})]}),t.jsx(_c,{children:t.jsx(tl,{children:s==="apple"?Ne.VerifyCardDescriptionApple:Ne.VerifyCardDescriptionGoogle})})]})]})]})]})})},_c=r.div`
-  display: flex;
-  justify-content: end;
-`,Zc=r.div`
-  margin: ${a.sp3} ${a.sp8};
-`,Gc=r.div`
-  display: flex;
-  align-items: center;
-  gap: ${a.sp3};
-`,Yc=r.div`
-  display: flex;
-  align-items: center;
-  gap: ${a.sp3};
-`,qc=r.div`
-  height: ${a.sp4};
-  border: 1px solid ${e=>e.theme.colors.grey2};
-  width: ${a.sp0};
-  margin-left: ${a.sp8};
-`,Jc=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};
-`,Xc=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};
-`,Kc=r(oa)`
-  color: ${e=>e.theme.colors.primary};
-`,Qc=r(Ve)`
-  color: ${e=>e.theme.colors.hero};
-  margin-left: ${a.sp9};
-  padding-bottom: ${a.sp4};
-`,el=r(oa)`
-  color: ${e=>e.theme.colors.primary};
-`,tl=r(Ve)`
-  color: ${e=>e.theme.colors.hero};
-  max-width: 274px;
-`,al=r.div`
-  padding: 12px;
-  border-radius: ${a.sp4};
-  background: ${d.successLight};
-  display: flex;
-`,rl=r.div`
-  padding: 12px;
-  border-radius: ${a.sp4};
-  background: ${e=>e.theme.colors.graphColor16Light};
-  display: flex;
-`,il=r(ao)`
-  width: ${a.sp4};
-  height: ${a.sp4};
-`,ol=r(To)`
-  width: ${a.sp4};
-  height: ${a.sp4};
-  color: ${e=>e.theme.colors.graphColor16Dark};
-`,{spendManagement:{chargeCard:{cardDetails:et}},common:{strings:nl}}=ve.getLocalizedStrings(),ga={iFrameWidth:new A(188,188)};function sl({isSandboxEnv:e,cardProviderID:i,vgsVaultId:s,signedInUserToken:u,onCancelClick:h,onUpdateDebitCardPinAttempt:f,onChangePinSuccess:c}){const g=Le(),m=ot(),[x,y]=o.useState({}),[n,C]=o.useState(!1),[w,j]=o.useState(!1),[b,k]=o.useState(!0),[L,p]=o.useState(!0),[R,S]=o.useState(!1),[M,V]=o.useState(!1),[v,Y]=o.useState(!1),[Q,Z]=o.useState(!1),[I,de]=o.useState(!1),[ee,ce]=o.useState(!1),[O,G]=o.useState(!1),[W,re]=o.useState(null),[te,ie]=o.useState(null),[oe]=jr("https://js.verygoodvault.com/vgs-collect/2.27.0/vgs-collect.js"),F=e?"SANDBOX":"live";o.useEffect(()=>{if(oe){const $=window.VGSCollect.create(s,F,he=>{const D=he["data.attributes.oldPin"],N=he["data.attributes.newPin"];D?.isTouched===!0&&D?.isValid===!1&&D?.isFocused===!1?Z(!0):(D?.isTouched===!0&&D?.isValid===!0&&D?.isFocused===!1||D?.isTouched===!0&&D?.isValid===!0&&D?.isFocused===!0)&&(Z(!1),G(!1)),N?.isTouched===!0&&N?.isValid===!1&&N?.isFocused===!1?de(!0):(N?.isTouched===!0&&N?.isValid===!0&&N?.isFocused===!1||N?.isTouched===!0&&N?.isValid===!0&&N?.isFocused===!0)&&de(!1)}),J=$.field("#oldPin",{type:"text",name:"data.attributes.oldPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{..._.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:m.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:m.colors.grey1,..._.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:d.important,background:d.importantLight},"&:focus":{background:`${m.colors.background} !important`,textAlign:"left",color:`${m.colors.primary} !important`}}}),H=$.field("#newPin",{type:"text",name:"data.attributes.newPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{..._.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:m.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:m.colors.grey1,..._.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:d.important,background:d.importantLight},"&:focus":{background:`${m.colors.background} !important`,textAlign:"left",color:`${m.colors.primary} !important`}}});re(J),ie(H),y($),Promise.all([J.promise,H.promise]).then(function(){j(!0)})}},[oe]),o.useEffect(()=>{W?.update({hideValue:b})},[W,b]),o.useEffect(()=>{te?.update({hideValue:L})},[te,L]);const ae=$=>{C(!0),G(!1),x.submit?.("/cards/"+i+"/secure-data/pin",{method:"PUT",mapDotToObject:"true",headers:{"Content-Type":"application/vnd.api+json",Authorization:"Bearer "+$?.token}},function(J,H){J===200?(S(!1),V(!1),c(),f("success")):(Z(!0),f("failed"),H.errors?.[0].title.toLowerCase().includes("max")?ce(!0):H.errors?.[0].title.toLowerCase().includes("invalid")&&G(!0),C(!1))},J=>{console.log("error",J),C(!1)})},q={onOkClick:()=>{if(!x.state)return;const $=x.state["data.attributes.newPin"]?.isValid,J=x.state["data.attributes.oldPin"]?.isValid;Y(!0),$===!0&&J===!0&&ae(u)},onCancelClick:h};return t.jsx(Mi,{titleComponent:t.jsx(dl,{children:et.moreOptions.changePin}),descriptionComponent:t.jsxs(cl,{children:[t.jsxs(ml,{children:[t.jsxs(fr,{showFieldError:Q,windowSize:g,isFirstField:!0,validation:v,onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),oldPinInputHighlighted:R,children:[t.jsx(mr,{children:et.existingPin}),t.jsxs(gr,{windowSize:g,children:[t.jsx(ul,{id:"oldPin",className:"cc-old-pin-form-field",windowSize:g}),t.jsx(hr,{onClick:()=>k(!b),"data-testid":K("cc-old-pin-show-text"),children:b?t.jsx(pr,{}):t.jsx(ur,{})})]})]}),t.jsx(hl,{}),t.jsxs(fr,{showFieldError:I,windowSize:g,isFirstField:!1,validation:v,onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1),newPinInputHighlighted:M,children:[t.jsx(mr,{children:et.newPin}),t.jsxs(gr,{windowSize:g,children:[t.jsx(pl,{id:"newPin",className:"cc-new-pin-form-field",windowSize:g}),t.jsx(hr,{onClick:()=>p(!L),"data-testid":K("cc-new-pin-show-text"),children:L?t.jsx(pr,{}):t.jsx(ur,{})})]})]})]}),O?t.jsx(Cr,{children:et.incorrectCurrentPIN}):null,ee?t.jsx(Cr,{children:et.pinAttemptsReached}):null]}),primaryButtonText:"Change",primaryButtonWidth:87,isLoading:n,isDisabled:w===!1||ee,secondaryButtonWidth:87,buttonContainerStyle:{paddingTop:a.sp3,paddingBottom:a.sp2},secondaryButtonText:"Cancel",action:q,containerStyle:{maxWidth:"544px"},footerHelperComponent:t.jsxs(Vi,{children:[t.jsx(ll,{children:et.forgotYourPin}),nl.space,et.callTollFree]})})}const dl=r(to)`
-  margin-top: ${a.sp7};
-  padding-left: ${a.sp8};
-  padding-right: ${a.sp8};
-  color: ${e=>e.theme.colors.primary};
-  word-break: break-word;
-`,cl=r(Ki)`
-  margin-top: ${a.sp5};
-  margin-bottom: ${a.sp5};
-`,ll=r.span`
-  color: ${e=>e.theme.colors.primary};
-`,hr=r.div`
-  cursor: pointer;
-  margin-left: ${a.sp2};
-`,pr=r(Qi)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  color: ${e=>e.theme.colors.hero};
-`,ur=r(eo)`
-  height: ${a.sp4};
-  width: ${a.sp4};
-  color: ${e=>e.theme.colors.hero};
-`,mr=r.label`
-  margin-top: ${a.sp2};
-`,gr=r.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 220px;
-`,Cr=r(Ve)`
-  color: ${d.important};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: right;
-  margin-top: ${a.sp3};
-`,hl=r.div`
-  display: flex;
-  flex: 1;
-  background-color: ${e=>e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`,pl=r.div`
-  border-radius: ${a.sp1};
-  height: ${a.sp6};
-  width: ${e=>ga.iFrameWidth.valuePx(e.windowSize)};
-`,ul=r.div`
-  border-radius: ${a.sp1};
-  height: ${a.sp6};
-  width: ${e=>ga.iFrameWidth.valuePx(e.windowSize)};
-`,ml=r.div`
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  border-radius: ${a.sp2};
-`,fr=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=>ga.iFrameWidth.valuePx(e.windowSize)};
-  }
-  .cc-new-pin-form-field {
-    background: ${e=>e.showFieldError?d.importantLight:e.newPinInputHighlighted===!0?e.theme.colors.background:"unset"};
-  }
-  .cc-old-pin-form-field {
-    background: ${e=>e.showFieldError?d.importantLight:e.oldPinInputHighlighted===!0?e.theme.colors.background:"unset"};
-  }
-  ${e=>e.isFirstField?se`
-          border-bottom-left-radius: ${a.sp0};
-          border-bottom-right-radius: ${a.sp0};
-        `:se`
-          border-top-left-radius: ${a.sp0};
-          border-top-right-radius: ${a.sp0};
-        `}
-  ${e=>e.validation?se`
-          .vgs-collect-container__invalid:not(.vgs-collect-container__focused) {
-            background: ${d.importantLight};
-          }
-          .vgs-collect-container__focused) {
-            background: ${e.theme.colors.background};
-          }
-        `:null}
-`,ze={bottomContentContainerPadding:new A(l[3],l[8]),styledAIIconContainerSize:new A(l[3],l[3]),bannerWrapperMarginLeftRight:new A(l[3],l[8]),payNowSectionPaddingLeftRight:new A(l[3],l[0]),styledHighImportanceIconMarginRight:new A(l[0],l[1])},{common:De,spendManagement:gl,dateFormat:Cl}=ve.getLocalizedStrings(),ue=gl.chargeCard,d1=({chargeCardDetailView:e,onUnlockChargeCard:i,onCloseChargeCard:s,cardsEndPoint:u,classListFetchState:h,transactionAttachmentsEndpointToFetch:f,transactionAttachmentEndpointToDownload:c,authParams:g,hideSorting:m,cardId:x,vgsVaultId:y,controllerEmails:n,isCardControlsEnabled:C,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:j,isDebitCardSetupEnabled:b,isChargeCardSetupEnabled:k,chargeCardCashbackDetailState:L,onFetchChargeCardsRecurringExpenses:p,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,creditAccount:v,cardIssuedByRoles:Y,cardIssuedByDepartmentName:Q,cardHolderRoles:Z,cardHolderDepartmentName:I,loggedInUserRole:de,appleWalletLink:ee,googleWalletLink:ce,signedInUser:O,signedInUserToken:G,chargeCardsRecurringExpensesState:W,isSandboxEnv:re,isEarlyPayEnabled:te,documentAiReceiptMaxSizeLimit:ie,isSnackbarOpen:oe,onFireOnClickAnalytics:F,onUpdateDebitCardPinAttempt:ae,onFireVerifyPopOnClickAnalytics:q,onBackClick:$,onReloadTransactions:J,onFetchChargeCardTransactionList:H,onGetOtp:he,onLockChargeCard:D,onResendOtp:N,onVerifyOtp:le,updateChargeCardName:ne,onVerifyOtpSuccess:T,onColorCodeChange:ke,onColumnSortConfigChanged:je,updateChargeCardTransactionAttachments:$e,updateChargeCardTransactionUploadReceiptsFetchStatus:B,updateChargeCardTransactionReceiptsShowTick:U,updateChargeCardTransactionIsViewReceiptClicked:X,onUploadReceiptComplete:me,removeSnackbar:Ie,onChargeCardTransactionRowClick:Be,onChargeCardRevokeInviteClick:nt,onUpdateScrollYOffset:st,updateSpendLimit:We,shouldOpenCreditCardPaymentDrawer:we})=>{const z=o.useRef(!0),pe=ot(),E=Le(),dt=Rt(),Pe=zt().analytics,[,Ct]=$r(),[ct,Oe]=o.useState(!1),[Xe,Ue]=o.useState(!1),[Ee,He]=o.useState(!1),[kt,Ce]=o.useState(!1),[Ke,ft]=o.useState(!1),[Fe,wt]=o.useState(!1),[di,ci]=o.useState(!1),[li,Ca]=o.useState(!1),[hi,jt]=o.useState(!1),[pi,Mt]=o.useState(!1),[ui,Lt]=o.useState(!1),[mi,It]=o.useState(!1),[lt,Vt]=o.useState(!1),[fa,Ot]=o.useState(!1),[wa,xa]=o.useState(!1),[gi,ya]=o.useState(!1),[Ci,fi]=o.useState("apple"),[Sa,ba]=o.useState({number:!1,cvv:!1});o.useEffect(()=>{lt===!1&&Ot(!1)},[lt]);const $a=o.useRef("noAnimation"),_e=e.chargeCard?.cardHolderUserId===O.userId,Ht=`${e.chargeCard?.cardHolderUser?.firstName??""} ${e.chargeCard?.cardHolderUser?.lastName??""}`,va=e.chargeCard?.billingAddress,xe=ut.hasChargeCardAdminLevelAccess(dt.loggedInUserRoleMap),{text1:wi,text2:xi}=Ri(va),ka=`${wi} ${xi}`,Nt=e.chargeCard?.isDeclinedTransaction===!0,yi=()=>{Qt({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ae,isChargeCardAdmin:xe,analytics:Pe,controllerEmails:n,actionField:"Receipt Email",actionDetails:e.chargeCardConfig.receiptBotEmail}),Ct(e.chargeCardConfig.receiptBotEmail),Oe(!0)},Si=()=>{F("card owner copied"),Qt({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ae,isChargeCardAdmin:xe,analytics:Pe,controllerEmails:n,actionField:"Card Owner",actionDetails:Ht}),Ct(Ht),ft(!0)},bi=()=>{F("billing address copied"),Qt({chargeCardDetailView:e,chargeCardCashbackDetailState:L,isChargeCardFeatureEnabled:w,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ae,isChargeCardAdmin:xe,analytics:Pe,controllerEmails:n,actionField:"Billing Address",actionDetails:ka}),Ct(ka),wt(!0)};o.useEffect(()=>{ct===!0&&setTimeout(()=>{Oe(!1)},800),Ke===!0&&setTimeout(()=>{ft(!1)},800),Fe===!0&&setTimeout(()=>{wt(!1)},800)},[Ke,Fe,ct]);const[_l,$i]=o.useState(!1),[ja,La]=o.useState(e.chargeCard?.cardColorCode!=null?new at(e.chargeCard.cardColorCode):void 0);o.useEffect(()=>{e.chargeCard?.cardColorCode!=null&&La(new at(e.chargeCard.cardColorCode))},[e.chargeCard?.cardColorCode]);const Ia={amount:e.chargeCard!=null?e.chargeCard.balance.amount:0,currencyCode:e.chargeCard!=null?e.chargeCard.balance.currencyCode:De.currency.countryCode,currencySymbol:e.chargeCard!=null?e.chargeCard.balance.currencySymbol:De.currency.currencySymbol};o.useEffect(()=>{z.current===!0?z.current=!1:F(lt===!1?"card details hidden":"card detail revealed")},[lt]);const Da=(P,ye)=>{if(ye===!0){const Ze=Lo(P.toString())??De.strings.empty;F("color selected",Ze),ke(Ze),$i(!1)}La(P)},Aa=P=>{const{cvv:ye,number:Ze}=P;return ye===!0||Ze===!0},{isMobileOrTabletScreen:Ta}=vr(),Bt=e.chargeCard?.status.code!=="request_on_hold"&&e.chargeCard?.status.code!=="inactive",Wt=e.updateChargeCardLimitFetchState.fetchState,Ut=e.updateChargeCardNameFetchState.fetchState,_t=e.lockChargeCardsFetchState.fetchState,Zt=e.closeChargeCardsFetchState.fetchState,Ea=rt(Wt),Fa=rt(Ut),Ra=rt(_t),za=rt(Zt);o.useEffect(()=>{Ea==="In-Progress"&&Wt==="Completed"?jt(!1):Fa==="In-Progress"&&Ut==="Completed"?Mt(!1):Ra==="In-Progress"&&_t==="Completed"?Lt(!1):za==="In-Progress"&&Zt==="Completed"&&It(!1)},[Wt,Ut,_t,Zt,Ea,Fa,Ra,za]);const Ae=e.chargeCard?.type.code==="business_physical_debit_card"||e.chargeCard?.type.code==="business_virtual_debit_card",vi=xe&&(e.chargeCard?.status.code==="active"||e.chargeCard?.status.code==="locked")&&Ia.amount<(Ae?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit.amount??0:e.creditAccount.limit.amount),ki=e.creditAccountRepayment.initiatedRepayments.amount>0&&xe&&Nt,ji=()=>{if(!C)return[{value:"changePin",label:ue.cardDetails.moreOptions.changePin}];const P=[{value:"changePin",label:ue.cardDetails.moreOptions.changePin},{value:"unlock",label:ue.cardDetails.moreOptions.unlock},{value:"updateSpendLimit",label:ue.cardDetails.moreOptions.updateSpendLimit},{value:"rename",label:ue.cardDetails.moreOptions.rename},{value:"lock",label:ue.cardDetails.moreOptions.lock},{value:"close",label:ue.cardDetails.moreOptions.close},{value:"revokeInvite",label:ue.cardDetails.moreOptions.revokeInvite}],ye=e.chargeCard?.status.code,Ze=ye==="locked",Ai=ye==="inactive",Ti=ye==="request_on_hold",Ei=e.chargeCard?.isLockedByAdmin===!0,Va=Ae&&_e,Dt=xe;if(Ti){const Me=[];return Dt&&Me.push("revokeInvite"),Me.push("rename"),P.filter(Gt=>Me.includes(Gt.value))}if(Ai){const Me=[];return Me.push("rename"),Va&&Me.push("changePin"),Dt&&Me.push("close"),P.filter(Gt=>Me.includes(Gt.value))}const Fi={changePin:Va&&!Ze,lock:!Ze,unlock:Ze&&(xe||!Ei),rename:!0,updateSpendLimit:Dt,close:Dt};return P.filter(Me=>Fi[Me.value])},Pa=t.jsx("div",{children:t.jsx(zi,{entity:"debit_cards",isDisabled:e.unlockChargeCardsFetchState.fetchState==="In-Progress"?"disabled":void 0,onOptionSelection:P=>{P==="changePin"?(G==null||G.expiry.isBefore(new Date)?he(e.loggedInUserPhone):Ce(!0),He(!0)):P==="updateSpendLimit"?jt(!0):P==="rename"?Mt(!0):P==="lock"?(Lt(!0),p()):P==="close"?(It(!0),p()):P==="unlock"?i(xe):P==="revokeInvite"&&nt()},isMoreOption:!0,options:ji(),customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}}),valueContainer:P=>({...P,display:"flex",alignItems:"center"})}})}),Ma=P=>P.reasonType==="other"?P.reason:P.reasonType,Li=P=>{const ye=Ma(P);D(xe,ye)},Ii=P=>{const ye=Ma(P);s(ye)},Di=()=>{const P=e.chargeCard?.status.code;if(P==="closed"||P==="closed_by_customer")return null;if(!C)return _e&&Ae?Pa:null;if(!_e&&!xe)return null;const ye=e.chargeCard?.isLockedByAdmin===!0;return _e&&!xe&&ye&&P==="locked"?null:Pa};return t.jsxs(Al,{children:[ui&&e.chargeCard!=null&&t.jsx(Oo,{showLockCardDrawer:!0,onCloseLockCardDrawer:()=>Lt(!1),isChargeCardAdmin:xe,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:W.recurringExpenses},cardRecurringExpenseFetchState:W.fetchState,lockCardFetchState:e.lockChargeCardsFetchState.fetchState,onConfirmClick:Li,onDismissClick:()=>Lt(!1),onRemoveCardClick:()=>{}}),mi&&e.chargeCard!=null&&t.jsx(Ho,{showCloseCardDrawer:!0,onCloseCloseCardDrawer:()=>It(!1),isChargeCardAdmin:xe,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:W.recurringExpenses},cardRecurringExpenseFetchState:W.fetchState,closeCardFetchState:e.closeChargeCardsFetchState.fetchState,onConfirmClick:Ii,onDismissClick:()=>It(!1),onRemoveCardClick:()=>{}}),kt&&e.chargeCard?.cardProviderID!=null?t.jsx(sl,{signedInUserToken:G,vgsVaultId:y,onCancelClick:()=>{Ce(!1),He(!0)},isSandboxEnv:!0,cardProviderID:e.chargeCard?.cardProviderID,onChangePinSuccess:()=>{Ce(!1),He(!0)},onUpdateDebitCardPinAttempt:ae}):null,Ta?null:t.jsx(Uc,{isChargeCardAdmin:xe,controllerEmails:n,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:j,isDebitCardSetupEnabled:b,isChargeCardSetupEnabled:k,chargeCardCashbackDetailState:L,creditAccountRepayment:e.creditAccountRepayment,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,creditAccount:e.creditAccount,selectedColor:ja,walletType:Ci,onFireOnClickAnalytics:F,isSandboxEnv:re,chargeCardDetailView:e,vgsVaultId:y,signedInUserToken:G,showSecretInfo:lt,changePinInProcess:Ee,setShowChangePinPopup:Ce,isCardDetailErrored:wa,cardDetailsFetchState:Sa,setCardDetailsFetchState:ba,setIsCardDetailErrored:xa,isCardDetailFetching:Aa,handleColorCodeClick:Da,isDrawerOpen:gi,setIsAddToWalletDrawerOpen:ya,onVerifyOtp:le,onVerifyOtpSuccess:T,onFireVerifyPopOnClickAnalytics:q,onResendOtp:N,setShowSecretInfo:Vt,secretRevealed:fa,setSecretRevealed:Ot,onGetOtp:he,showDrawerAnimation:$a}),t.jsx(Pi,{rightSideComponent:Di(),navBarContainerStyles:{paddingTop:l[2],alignItems:"center",paddingBottom:l[2]},source:"ChargeCardDetailPage",title:e.chargeCard?.cardName??De.strings.empty,subTitle:e.fetchState==="Completed"&&e.chargeCard!=null?t.jsx(Vo,{cardDetail:e.chargeCard,forDetailPage:!0}):void 0,showBackButton:!0,showMenuIcon:!1,backgroundColor:pe.colors.grey5,style:{zIndex:3},onBackClick:$,titleStyle:{marginTop:l[0],...E==="small"&&{textAlign:"left"}},leftComponentStyle:E==="small"?{width:"10%"}:void 0,middleComponentStyle:E==="small"?{width:"80%"}:void 0,rightComponentStyle:E==="small"?{width:"10%"}:void 0}),t.jsx(kr,{phoneNumberPopupDescription:ue.cardDetails.verifyPhoneNumberDescription,showOtpPopup:di,showPhoneNumberPopup:li,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:le,onVerifyOtpSuccess:P=>{T(P),Ee?Ce(!0):Vt(!0)},onFireVerifyPopOnClickAnalytics:q,setShowOtpPopup:ci,onResendOtp:N,setShowPhoneNumberPopup:Ca,onGetOtp:he}),pi&&t.jsx(No,{currentCardName:e.chargeCard?.cardName??"",renameFetchState:e.updateChargeCardNameFetchState.fetchState,onCancelClick:()=>Mt(!1),onSubmitClick:P=>{e.chargeCard&&ne(xe,P)}}),hi&&e.chargeCard!=null?t.jsx(Bo,{controllerEmails:n,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:j,isDebitCardSetupEnabled:b,isChargeCardSetupEnabled:k,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,cardDetail:e.chargeCard,transactionStatistics:e.transactionStatistics,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,signedInUser:O,isDebitCard:Ae,cardIssuedByRoles:Y,cardHolderRoles:Z,loggedInUserRole:de,cardIssuedByDepartmentName:Q,cardHolderDepartmentName:I,classListFetchState:h,currentLimitAmount:e.chargeCard?.limit??{amount:0,currencyCode:De.currency.countryCode,currencySymbol:De.currency.currencySymbol},currentSpentAmount:e.chargeCard?.balance??{amount:0,currencyCode:De.currency.countryCode,currencySymbol:De.currency.currencySymbol},maxLimitAmount:Ae?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit:e.creditAccount.limit,isDisabled:Ae&&e.depositAccountLimitFetchState.fetchState!=="Completed",updateLimitFetchState:e.updateChargeCardLimitFetchState.fetchState,onCancelClick:()=>jt(!1),onSubmitClick:P=>{if(e.chargeCard){const ye={amount:P,currencyCode:e.chargeCard.limit.currencyCode,currencySymbol:e.chargeCard.limit.currencySymbol};We(e.chargeCard.id,ye,e.chargeCard.creditLimitFrequency,Je("0,0.[00]",ye))}},recommendations:e?.chargeCard?.recommendations}):null,e.fetchState==="Error"?t.jsxs(vl,{windowSize:E,children:[t.jsx(Ll,{onClick:J,"data-testid":K("reload-card-detail"),children:t.jsx(Dl,{})}),t.jsx(Il,{children:De.reloadPage.label})]}):t.jsxs(fl,{children:[t.jsx(bs,{controllerEmails:n,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:j,isDebitCardSetupEnabled:b,isChargeCardSetupEnabled:k,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,isDebitCard:Ae,chargeCardCashbackDetailState:L,cardIssuedByRoles:Y,cardIssuedByDepartmentName:Q,cardHolderRoles:Z,cardHolderDepartmentName:I,classListFetchState:h,chargeCardDetailView:e,spent:Ia,isCardNotPending:Bt,cardOwnerName:Ht,appleWalletLink:ee,googleWalletLink:ce,addressToShow:va,secretRevealed:fa,isOwnCard:_e,vgsVaultId:y,showSecretInfo:lt,isSandboxEnv:re,isCardDetailErrored:wa,signedInUserToken:G,selectedColor:ja,cardDetailsFetchState:Sa,setCardDetailsFetchState:ba,setIsCardDetailErrored:xa,setSecretRevealed:Ot,isCardDetailFetching:Aa,handleColorCodeClick:Da,onFireOnClickAnalytics:F,setShowPhoneNumberPopup:Ca,setShowChangeSpendLimitPopup:jt,setShowSecretInfo:Vt,isOwnerNameCopied:Ke,isAddressCopied:Fe,onOwnerNameCopyClick:Si,onAddressCopyClick:bi,showUpdateSpendLimitAction:vi,onUnlockChargeCard:i}),te?ki?t.jsxs(xl,{windowSize:E,children:[t.jsx(Rl,{}),t.jsx(Sl,{children:` ${ue.payEarly.paymentOf} ${Je("0,0.[00]",e.creditAccountRepayment.initiatedRepayments)} ${ue.payEarly.madeOn} ${e.creditAccountRepayment.initiatedRepaymentDate?.format(Cl.visual.MMMDFormat)} ${ue.payEarly.isProcessing} ${ue.payEarly.theCompanyCreditLimitWillUpdateIn23BusinessDays}`})]}):Nt?xe?t.jsxs(si,{onClick:()=>{we(!0)},windowSize:E,children:[t.jsx(wr,{windowSize:E}),t.jsxs(kl,{children:[t.jsx(xr,{children:ue.payEarly.transactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLow}),t.jsxs(bl,{className:"pay-now-button",children:[ue.payEarly.payNow,t.jsx(yl,{})]})]})]}):t.jsxs(wl,{windowSize:E,children:[t.jsx(wr,{windowSize:E}),t.jsx(jl,{children:t.jsx(xr,{children:ue.payEarly.yourTransactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLowWeHaveNotifiedYourAdmin})})]}):null:null,_e&&E!=="small"&&Bt&&Ae===!1?t.jsx(Wo,{style:{marginTop:Nt?a.sp5:a.sp4},classListFetchState:h,controllerEmails:n,isChargeCardFeatureEnabled:w,isDebitCardFeatureEnabled:j,isDebitCardSetupEnabled:b,isChargeCardSetupEnabled:k,chargeCardDetailView:e,creditAccount:v,creditAccountRepayment:e.creditAccountRepayment,productInformation:R,cashbackInformation:S,creditAccountInformation:M,debitAccountInformation:V,cardIssuedByRoles:Y,cardHolderRoles:Z,cardIssuedByDepartmentName:Q,cardHolderDepartmentName:I,isDebitCard:Ae,appleWalletLink:ee,googleWalletLink:ce,setWalletType:fi,setIsAddToWalletDrawerOpen:ya,showDrawerAnimation:$a}):null,t.jsxs(Ul,{windowSize:E,isOwnCard:_e,isMobileOrTabletScreen:Ta,children:[Bt&&e.transactions.length>0?t.jsxs(t.Fragment,{children:[t.jsxs(El,{windowSize:E,children:[ue.cardDetails.transactionListTitle,t.jsx(aa,{display:"flex",placement:"right",title:t.jsx(zl,{children:ue.cardDetails.transactionListTooltip.replace("__receiptRequiredAboveAmount__",e.chargeCardConfig.receiptRequiredAboveAmount.amount.toString())}),children:t.jsx(Fl,{})})]}),t.jsxs(Pl,{windowSize:E,children:[t.jsx(Hl,{windowSize:E,children:t.jsx(Nl,{})}),t.jsxs(Tl,{windowSize:E,children:[t.jsxs(Ml,{children:[t.jsx($l,{children:ue.aiCardAgentText}),De.strings.space,ue.receiptBotMessage,De.strings.space]}),t.jsxs(Ol,{"data-testid":K("charge-card-detail-copy-email"),onClick:yi,onMouseEnter:()=>Ue(!0),onMouseLeave:()=>Ue(!1),children:[t.jsx(Vl,{children:e.chargeCardConfig.receiptBotEmail}),ct===!0?t.jsxs(Sr,{children:[t.jsx(Wl,{}),t.jsx(yr,{children:t.jsx(br,{shouldDisplay:Xe||ct,color:d.primaryDark,children:De.copyToClipBoard.copied})})]}):t.jsxs(Sr,{children:[t.jsx(Bl,{color:Xe?pe.colors.primary:void 0}),t.jsx(yr,{children:t.jsx(br,{shouldDisplay:Xe&&E!=="small",children:De.copyToClipBoard.copy})})]})]})]})]})]}):null,t.jsx(xc,{cardStatusCode:e.chargeCard?.status.code,cardCodeType:e.chargeCard?.type.code,cardId:x,documentAiReceiptMaxSizeLimit:ie,uploadReceiptsFetchStateByTransactionId:e.uploadReceiptsFetchStateByTransactionId,isSnackbarOpen:oe,uploadReceiptsShowTickByTransactionId:e.uploadReceiptsShowTickByTransactionId,isViewReceiptClickedImmediatelyAfterUploadTransactionId:e.isViewReceiptClickedImmediatelyAfterUploadTransactionId,receiptRequiredAboveAmount:e.chargeCardConfig.receiptRequiredAboveAmount,cardsEndPoint:u,transactionAttachmentsEndpointToFetch:f,transactionAttachmentEndpointToDownload:c,authParams:g,hideSorting:m,transactions:e.transactions,cardHolderUser:e.chargeCard?.cardHolderUser,uiState:e.uiState,fetchState:e.transactionListFetchState.fetchState,isAiCategorizationEnabledForCardsTransactions:e.chargeCardConfig.isAiCategorizationEnabledForCardsTransactions,onReloadTransactions:J,onFetchChargeCardTransactionList:H,isOwnCard:_e,onColumnSortConfigChanged:je,removeSnackbar:Ie,onChargeCardTransactionRowClick:Be,onUpdateScrollYOffset:st,onUploadReceiptComplete:me,updateChargeCardTransactionAttachments:$e,updateChargeCardTransactionUploadReceiptsFetchStatus:B,updateChargeCardTransactionReceiptsShowTick:U,updateChargeCardTransactionIsViewReceiptClicked:X})]})]})]})},Qt=({chargeCardDetailView:e,chargeCardCashbackDetailState:i,isChargeCardFeatureEnabled:s,productInformation:u,cashbackInformation:h,creditAccountInformation:f,debitAccountInformation:c,creditAccount:g,creditAccountRepayment:m,isDebitCard:x,isChargeCardAdmin:y,analytics:n,controllerEmails:C,actionDetails:w,actionField:j})=>{e.chargeCard!=null&&i.fetchState==="Completed"&&(!s||g.fetchState==="Completed"&&m.fetchState==="Completed")&&(!(x&&y)||e.depositAccountLimitFetchState.fetchState==="Completed")&&n.trackCardsCopyIconClick(C,u,"Cards Detail","Copy","copied",j,w,h,f,c)},fl=r.div``,si=r.div`
-  background: ${d.important};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: ${a.sp3};
-  padding-bottom: ${a.sp3};
-  padding-left: ${({windowSize:e})=>ze.payNowSectionPaddingLeftRight.valuePx(e)};
-  padding-right: ${({windowSize:e})=>ze.payNowSectionPaddingLeftRight.valuePx(e)};
-  gap: ${a.sp1};
-  align-items: start;
-  cursor: pointer;
-  :hover {
-    .pay-now-button {
-      text-decoration: underline;
-    }
-  }
-`,wl=r(si)``,xl=r.div`
-  background: ${d.alertLight};
-  display: flex;
-  align-items: start;
-  justify-content: center;
-  padding-top: ${a.sp3};
-  padding-bottom: ${a.sp3};
-  padding-left: ${({windowSize:e})=>ze.payNowSectionPaddingLeftRight.valuePx(e)};
-  padding-right: ${({windowSize:e})=>ze.payNowSectionPaddingLeftRight.valuePx(e)};
-  gap: ${a.sp2};
-`,wr=r(Wi)`
-  color: ${e=>e.theme.colors.grey5};
-  margin-right: ${({windowSize:e})=>ze.styledHighImportanceIconMarginRight.valuePx(e)};
-  min-width: ${a.sp4};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  path:nth-child(2),
-  path:nth-child(3) {
-    stroke: ${d.important};
-  }
-`,yl=r(Ui)`
-  color: ${e=>e.theme.colors.grey5};
-  min-width: 12px;
-  width: 12px;
-  height: 12px;
-`,xr=r(ia)`
-  color: ${e=>e.theme.colors.grey5};
-`,Sl=r(ia)`
-  color: ${d.brandColorGoldDark};
-`,bl=r(Ar)`
-  color: ${e=>e.theme.colors.grey5};
-  gap: ${a.sp1};
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-`,$l=r(Yi)`
-  color: ${e=>e.theme.colors.brandColorSapphire};
-  ${({theme:e})=>e.mode==="dark"&&`color: ${d.brandColorPearl};`}
-`,vl=r.div`
-  display: flex;
-  width: 100%;
-  height: calc(100vh - ${e=>Ni.valuePx(e.windowSize)});
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: ${e=>e.theme.colors.grey5};
-`,kl=r.div``,jl=r.div``,Ll=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};
-    }
-  }
-`,Il=r(ra)`
-  margin-top: ${a.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,Dl=r(Lr)`
-  height: ${a.sp5};
-  width: ${a.sp5};
-  margin: ${a.sp5};
-  color: ${e=>e.theme.colors.grey1};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,Al=r.div`
-  background: ${e=>e.theme.colors.grey4};
-`,Tl=r.div`
-  width: 100%;
-  max-width: ${e=>e.windowSize==="small"?"calc(100% - 20px)":"unset"};
-`,El=r(oa)`
-  color: ${e=>e.theme.colors.primary};
-  margin-bottom: ${a.sp3};
-  display: flex;
-  align-items: center;
-  margin-right: ${e=>ze.bottomContentContainerPadding.valuePx(e.windowSize)};
-  margin-left: ${e=>ze.bottomContentContainerPadding.valuePx(e.windowSize)};
-`,Fl=r(Dr)`
-  color: ${e=>e.theme.colors.hero};
-  width: ${a.sp3};
-  height: ${a.sp3};
-  margin-left: ${a.sp2};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,Rl=r(Dr)`
-  color: ${d.brandColorGoldDark};
-  min-width: ${a.sp4};
-  width: ${a.sp4};
-  height: ${a.sp4};
-`,zl=r(ge)`
-  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;
-`,Pl=r.div`
-  display: flex;
-  border: 1.25px solid transparent;
-  background: ${e=>`linear-gradient(${e.theme.colors.grey4}, ${e.theme.colors.grey4}) padding-box,
-    ${d.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=>ze.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
-`,Ml=r(ia)`
-  color: ${e=>e.theme.colors.primary};
-`,Vl=r(Ar)`
-  color: ${e=>e.theme.colors.primary};
-`,Ol=r.span`
-  cursor: pointer;
-`,yr=r.span`
-  position: absolute;
-  bottom: -${a.sp5};
-  z-index: 10;
-  left: ${a.sp2};
-`,Sr=r.span`
-  position: relative;
-  margin-left: ${a.sp1};
-  top: 2px;
-`,br=r(ge)`
-  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"};
-`,Hl=r.div`
-  width: ${e=>ze.styledAIIconContainerSize.valuePx(e.windowSize)};
-  min-width: ${e=>ze.styledAIIconContainerSize.valuePx(e.windowSize)};
-  height: ${e=>ze.styledAIIconContainerSize.valuePx(e.windowSize)};
-  top: ${a.sp1};
-  position: ${e=>e.windowSize==="small"?"relative":"static"};
-`,Nl=r(Gi)`
-  color: ${e=>e.theme.colors.brandColorJade};
-  width: 100%;
-  height: 100%;
-`,Bl=r(Tr)`
-  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};
-  }
-`,Wl=r(bt)`
-  height: ${a.sp3};
-  width: ${a.sp3};
-  color: ${d.success};
-`,Ul=r.div`
-  padding-top: ${e=>e.isOwnCard?e.isMobileOrTabletScreen?a.sp3:a.sp4:a.sp5};
-  padding-bottom: ${a.sp4};
-`;export{d1 as default};