@zeniai/web-cockpit-ui 1.14.82-qa → 1.14.83-dev

package/dist/assets/ChargeCardDetailPage-CjW48x_w-DZEJnmps.js

@@ -0,0 +1,1462 @@
+import{i as Qe,u as ke,a$ as Lt,a7 as It,ig as wr,iY as wi,bs as Xe,a as be,ih as xr,bB as Je,j as t,ij as xi,cf as Si,s as l,he as Sr,bn as _e,bm as X,b as a,cH as Qt,C as d,ko as yr,t as W,dc as yi,kp as bi,gw as $i,i6 as vi,kq as ki,cm as ji,cz as br,bq as ea,kr as Li,ks as $r,kt as at,R,cq as vr,bM as ta,S as Ii,br as kr,bz as Di,ku as Ti,kv as Ai,bH as aa,af as pe,fU as Ri,kc as Fi,g as mt,ii as jr,A as ut,bG as Ei,eC as zi,dj as Pi,dd as Mi,dU as Vi,iV as Oi,ah as Pe,cJ as Hi,bw as Wt,kw as Ut,kx as Ea,ky as Ni,d as za,e as Lr,bJ as Bi,kz as Wi,k6 as ht,km as Ui,kn as _i,ki as Zi,eR as Pa,ge as Gi,B as Ir,di as Dr,kf as Yi,cM as qi,L as Tr,kA as Ki,ax as vt,cP as Ma,cb as Xi,ep as Ji,ai as it,iQ as Qi,as as eo,f as to,cn as ao,kB as Dt,gL as ro,cF as io,kC as Ar,kD as Rr,hT as Fr,kE as jt,jD as Er,kh as oo,dq as no,fz as so,d2 as co,d3 as lo,kj as ho,kk as po,f6 as uo,dP as mo}from"./index-2CdI-B2B.js";import{a as o,o as go,d as zr}from"./core-tlHkQPPu.js";import{n as r,c as ge,k as Pr}from"./mui-kiGMfX4-.js";import{eI as Tt,bj as Co,bg as fo}from"./zeni-epic-state-Bo1aGezX.js";import{n as wo}from"./NavigationDots-DO5y6mdV-DGnlFBBn.js";import{i as xo,r as So,l as yo,a as bo,n as $o,C as vo,t as ko}from"./add-to-wallet-D7W5Y5Hm-zBGkMLf1.js";import{h as jo}from"./CardNumberSubText-COZ0PEHK-CGMTIPNh.js";import{u as Mr}from"./remove-ADLCpWJf-CcDvT7jc.js";import{e as Vr}from"./uploadReceipts-BkHrFC8j-DevoCqHx.js";import{E as Lo,O as Io,r as Do,u as To}from"./LockCardPage-Do7WCHaW-DegBv6L_.js";import"./sentry-Dhk5jNhq.js";import"./liveblocks-BrzOBACZ.js";import"./utils-BLUF9kAp.js";import"./analytics-CeQu-r45.js";import"./_baseUnset-WRwI4F7w-C17FI5GR.js";import"./RoleWithToolTip-CWH-iJqI-DmzPBpda.js";const Or=be.getLocalizedStrings().spendManagement.chargeCard,Ao=({controllerEmails:e,classListFetchState:i,isChargeCardFeatureEnabled:s,isDebitCardFeatureEnabled:m,isDebitCardSetupEnabled:h,isChargeCardSetupEnabled:x,chargeCardDetailView:p,productInformation:f,creditAccountInformation:g,debitAccountInformation:C,creditAccount:c,creditAccountRepayment:n,cardIssuedByRoles:w,cardIssuedByDepartmentName:S,cardHolderRoles:I,cardHolderDepartmentName:$,appleWalletLink:j,googleWalletLink:D,style:u,showDrawerAnimation:E,setWalletType:y,setIsAddToWalletDrawerOpen:O,isDebitCard:H})=>{const k=It().analytics,{isIPadScreen:Z}=Ti(),{isAndroidScreen:J}=Ai(),_=Lt(),T=Tt(_.loggedInUserRoleMap);return t.jsx(Ro,{style:u,children:Z===!0?t.jsx(Jt,{onClick:()=>{at({chargeCardDetailView:p,classListFetchState:i,analytics:k,isDebitCard:H,isChargeCardAdmin:T,cardIssuedByRoles:w,cardIssuedByDepartmentName:S,cardHolderRoles:I,cardHolderDepartmentName:$,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",productInformation:f,creditAccountInformation:g,debitAccountInformation:C,isChargeCardFeatureEnabled:s,creditAccount:c,creditAccountRepayment:n}),window.open(j,"_blank")}}):J===!0?t.jsx(Xt,{onClick:()=>{at({chargeCardDetailView:p,classListFetchState:i,analytics:k,isDebitCard:H,isChargeCardAdmin:T,cardIssuedByRoles:w,cardIssuedByDepartmentName:S,cardHolderRoles:I,cardHolderDepartmentName:$,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",productInformation:f,creditAccountInformation:g,debitAccountInformation:C,isChargeCardFeatureEnabled:s,creditAccount:c,creditAccountRepayment:n}),window.open(D,"_blank")}}):t.jsxs(t.Fragment,{children:[t.jsx(Jt,{onClick:()=>{y("apple"),E.current="slide-in-right-to-left-add-to-wallet",at({chargeCardDetailView:p,classListFetchState:i,analytics:k,isDebitCard:H,isChargeCardAdmin:T,cardIssuedByRoles:w,cardIssuedByDepartmentName:S,cardHolderRoles:I,cardHolderDepartmentName:$,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:s,productInformation:f,creditAccountInformation:g,debitAccountInformation:C,creditAccount:c,creditAccountRepayment:n}),O(!0)}}),t.jsx(Xt,{onClick:()=>{y("google"),E.current="slide-in-right-to-left-add-to-wallet",at({chargeCardDetailView:p,classListFetchState:i,analytics:k,isDebitCard:H,isChargeCardAdmin:T,cardIssuedByRoles:w,cardIssuedByDepartmentName:S,cardHolderRoles:I,cardHolderDepartmentName:$,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:s,productInformation:f,creditAccountInformation:g,debitAccountInformation:C,creditAccount:c,creditAccountRepayment:n}),O(!0)}})]})})},Xt=({onClick:e})=>{const i=Qe();return t.jsx(Ir,{prefixIcon:t.jsx(Fo,{}),label:Or.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":X("add-to-google-wallet-button")})},Jt=({onClick:e})=>{const i=Qe();return t.jsx(Ir,{prefixIcon:t.jsx(Eo,{}),label:Or.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":X("add-to-apple-wallet-button")})},Ro=r.div`
+  margin-top: ${a.sp4};
+  display: flex;
+  justify-content: center;
+  gap: ${a.sp5};
+`,Fo=r(ko)`
+  height: ${a.sp4};
+  width: ${a.sp5};
+`,Eo=r(vo)`
+  height: ${a.sp4};
+  width: ${a.sp5};
+`,zo=[d.brandColorSapphire,d.brandColorJade,d.graphColor01,d.graphColor08,d.graphColor12,d.graphColor15,d.graphColor16Dark,d.graphColor23Dark,d.graphColor32Dark,d.graphColor34Dark,d.brandColorOpalDark,d.brandColorRuby],Po=be.getLocalizedStrings().spendManagement.chargeCard,Mo=({isColorPaletteVisible:e,hasBorderShadow:i,leftTransitionValue:s,colorInState:m,styles:h,colorPaletteTitleStyles:x,ColorListStyles:p,coloredCircleStyles:f,closeStyles:g,tickStyles:C,toggleColorPaletteVisibility:c,handleColorClick:n})=>t.jsxs(Vo,{showColorPalette:e,style:h,hasBorderShadow:i,leftTransitionValue:s,children:[t.jsxs(Ho,{style:x,children:[t.jsx(No,{children:Po.cardDetails.cardTheme}),t.jsx(Bo,{style:g,"data-testid":X("close-color-palette"),onClick:w=>{w.stopPropagation(),c(!e)}})]}),t.jsx(Oo,{style:p,children:zo.map((w,S)=>t.jsx(Uo,{style:f,coreColor:w,onMouseEnter:()=>n(new Xe(w),!1),onMouseLeave:()=>m!=null?n(new Xe(m),!1):null,"data-testid":X("color-palette-item-cards",S.toString()),onClick:()=>n(new Xe(w),!0),children:new Xe(w).toString()===m?.toString()?t.jsx(Wo,{style:C}):null},w))})]}),Vo=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;
+`,Oo=r.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: ${a.sp0} 38px ${a.sp0} 31px;
+`,Ho=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${a.sp5} ${a.sp5} ${a.sp2} ${a.sp5};
+`,No=r(pe)`
+  color: ${d.brandColorOnyx};
+`,Bo=r(to)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,Wo=r(ao)`
+  width: ${a.sp3};
+  color: ${d.neutralGrey5Light};
+`,Uo=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:_o,common:Ke,dateFormat:Zo}=be.getLocalizedStrings(),Ye=_o.chargeCard,Te={secretCardNumberWrapperWidth:280,secretCVVWrapperHeight:30,secretCVVWrapperWidth:l[7],cardNumberCopiedSectionTop:54,cvvCopiedSectionTop:34,maskedCardNumberMarginTop:new R(-2,-2,-2,l[0]),expiryCopySectionTop:34,cardNumberCopyBtnTop:21},Va={CardInfoTitleSize:new R(W.extraSmallRegular.fontSizeValue,W.smallRegular.fontSizeValue),CardInfoTitleLineHeight:new R(18,18,18,21)},_t=e=>t.jsxs(hn,{style:{...e},children:[t.jsx(ln,{}),t.jsx(pn,{style:{background:d.blackColor,color:d.primaryDark,padding:`2px ${a.sp2}`,borderRadius:a.sp1},children:Ke.copyToClipBoard.copied})]}),Oa=({isSandboxEnv:e,sourceId:i,showSecretInfo:s,secretRevealed:m,vgsVaultId:h,controllerEmails:x,isChargeCardFeatureEnabled:p,productInformation:f,cashbackInformation:g,creditAccountInformation:C,debitAccountInformation:c,chargeCardCashbackDetailState:n,creditAccount:w,creditAccountRepayment:S,isDebitCard:I,depositAccountLimitFetchState:$,isCardDetailErrored:j,isCardColorUpdating:D,cardDetailsFetchState:u,isCardColorUndefined:E,cardInfoTitleStyles:y,styles:O,cvvSecStyles:H,chargeCard:k,token:Z,setSecretRevealed:J,setIsCardDetailErrored:_,setCardDetailsFetchState:T,onFireOnClickAnalytics:oe})=>{const Q=It().analytics,[,ie]=wr(),V=ke(),[U,G]=o.useState(!1),[q,z]=o.useState(!1),[ne,ee]=o.useState(!1),te=Lt(),K=Tt(te.loggedInUserRoleMap),[N]=yr("https://js.verygoodvault.com/vgs-show/2.0.0/show.js"),L=i==="addToWalletDrawer"?.75:V==="small"?.85:1,B=e?"sandbox":"live";o.useEffect(()=>{if(N&&k!=null&&s&&Z!=null&&!m){const A=window.VGSShow.create(h).setEnvironment(B),P=k.cardProviderID,ae=A.request({name:"data-text",method:"GET",path:"/cards/"+P+"/secure-data/cvv2",headers:{Authorization:"Bearer "+Z},htmlWrapper:"text",jsonPathSelector:"data.attributes.cvv2"});T({cvv:!0,number:!0}),ae.render(`#SecretCvv-${i}`,{"@font-face":{"font-family":vt["PT Mono"],"font-style":"normal","font-weight":Ma.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":vt["PT Mono"],opacity:.7,color:d.brandColorOnyx,fontSize:L*W.h6Regular.fontSizeValue+"px",fontWeight:W.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:L*W.h6Regular.lineHeightValue+"px"}),ae.on("requestSuccess",()=>{J(!0),_(!1),T({...u,cvv:!1})}),ae.on("requestFail",()=>{_(!0),T({...u,cvv:!1});const v=document.getElementById(`SecretCvv-${i}`);for(;v?.hasChildNodes()===!0;)v.removeChild(v.children[0])}),A.copyFrom(ae,{text:Ke.strings.empty},v=>{v==="success"?(z(!0),oe("CVV copied"),n.fetchState!=="Completed"||p&&(w.fetchState!=="Completed"||S.fetchState!=="Completed")||I&&K&&$!=="Completed"||Q.trackCardsCopyIconClick(x,f,"Cards Detail","Copy","copied","CVV","",g,C,c)):z(!1)}).render(`#CvvCopyBtn-${i}`,{cursor:"pointer",height:L*Te.secretCVVWrapperHeight+"px",width:L*Te.secretCVVWrapperWidth+"px"});const se=A.request({name:"data-text",method:"GET",path:"/cards/"+P+"/secure-data/pan",headers:{Authorization:"Bearer "+Z},htmlWrapper:"text",jsonPathSelector:"data.attributes.pan",serializers:[A.SERIALIZERS.replace("(\\d{4})(\\d{4})(\\d{4})(\\d{4})","$1 $2 $3 $4")]});se.render(`#SecretCardNumber-${i}`,{"@font-face":{"font-family":vt["PT Mono"],"font-style":"normal","font-weight":Ma.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":vt["PT Mono"],opacity:.7,color:d.brandColorOnyx,fontSize:L*W.h6Regular.fontSizeValue+"px",fontWeight:W.h6Regular.fontWeight,borderRadius:a.sp1,cursor:"pointer",padding:`${a.sp0} ${a.sp1}`,lineHeight:L*W.h6Regular.lineHeightValue+"px"}),se.on("requestSuccess",()=>{J(!0),_(!1),T({...u,number:!1})}),se.on("requestFail",()=>{_(!0),T({...u,number:!1});const v=document.getElementById(`SecretCardNumber-${i}`);for(;v?.hasChildNodes()===!0;)v.removeChild(v.children[0])}),A.copyFrom(se,{text:Ke.strings.empty,serializers:[A.SERIALIZERS.replace(Ke.strings.space,Ke.strings.empty)]},v=>{v==="success"?(G(!0),oe("card number copied"),n.fetchState!=="Completed"||p&&(w.fetchState!=="Completed"||S.fetchState!=="Completed")||I&&K&&$!=="Completed"||Q.trackCardsCopyIconClick(x,f,"Cards Detail","Copy","copied","Card Number","",g,C,c)):G(!1)}).render(`#CardNumberCopyBtn-${i}`,{cursor:"pointer",height:L*W.h6Regular.lineHeightValue+"px",width:L*Te.secretCardNumberWrapperWidth+"px"})}},[N,k,s,Z,m]),o.useEffect(()=>{if(s===!1){const A=document.getElementById(`SecretCvv-${i}`);for(;A?.hasChildNodes()===!0;)A.removeChild(A.children[0]);const P=document.getElementById(`CvvCopyBtn-${i}`);for(;P?.hasChildNodes()===!0;)P.removeChild(P.children[0]);const ae=document.getElementById(`SecretCardNumber-${i}`);for(;ae?.hasChildNodes()===!0;)ae.removeChild(ae.children[0]);const se=document.getElementById(`CardNumberCopyBtn-${i}`);for(;se?.hasChildNodes()===!0;)se.removeChild(se.children[0])}},[i,s]),o.useEffect(()=>{U===!0&&setTimeout(()=>{G(!1)},800),q===!0&&setTimeout(()=>{z(!1)},800),ne===!0&&setTimeout(()=>{ee(!1)},800)},[U,q,ne]);const Y=k!=null?fo(k.validThru.year,k.validThru.month-1).format(Zo.visual.MMSlashYYFormat):Ke.strings.empty;return t.jsxs(en,{style:O,children:[t.jsxs(tn,{children:[t.jsx(Zt,{style:y,windowSize:V,children:Ye.cardDetails.cardNumber}),t.jsx(an,{sourceId:i,scaleFactor:L,showSecretInfo:s&&(u.number===!1||u.cvv===!1),isCardDetailFetching:u.number===!0||u.cvv===!0||E||D,windowSize:V,children:`${Ye.cardDetails.cardNumberHideout}
+          ${k?.accountLast4??Ke.strings.empty}`}),t.jsxs(Go,{secretRevealed:m,scaleFactor:L,showSecretInfo:s&&u.cvv===!1&&u.number===!1,sourceId:i,isCardDetailErrored:j,children:[t.jsx(Yo,{sourceId:i,scaleFactor:L,secretRevealed:m,id:`SecretCardNumber-${i}`}),t.jsx(Qo,{secretRevealed:m,scaleFactor:L,id:`CardNumberCopyBtn-${i}`,sourceId:i}),U===!0?t.jsx(_t,{top:L*Te.cardNumberCopiedSectionTop}):null]})]}),t.jsxs(rn,{children:[t.jsxs(sn,{children:[t.jsx(Zt,{style:y,windowSize:V,children:Ye.cardDetails.expiry}),t.jsxs(Xo,{secretRevealed:s&&(u.cvv===!1||u.number===!1),children:[m&&s&&u.cvv===!1&&u.number===!1?t.jsx(cn,{sourceId:i,scaleFactor:L,windowSize:V,secretRevealed:m&&s,"data-testid":X("expiry-date-copy"),onClick:A=>{var P;A.stopPropagation(),P=k,s!==!0||u.cvv===!0&&u.number===!0||(oe("validity copied"),P==null||n.fetchState!=="Completed"||p&&(w.fetchState!=="Completed"||S.fetchState!=="Completed")||I&&K&&$!=="Completed"||Q.trackCardsCopyIconClick(x,f,"Cards Detail","Copy","copied","Valid Thru",Y,g,C,c),ie(Y),ee(!0))},children:m&&s&&u.cvv===!1&&u.number===!1?Y:Ye.cardDetails.expiryHideOut}):t.jsx(dn,{sourceId:i,windowSize:V,scaleFactor:L,isCardDetailFetching:u.cvv===!0||u.number===!0||E||D,children:Ye.cardDetails.expiryHideOut}),ne===!0?t.jsx(_t,{top:L*Te.expiryCopySectionTop,width:"auto"}):null]})]}),t.jsxs(on,{style:H,children:[t.jsx(Zt,{style:y,windowSize:V,children:Ye.cardDetails.cvv}),t.jsx(nn,{sourceId:i,scaleFactor:L,showSecretInfo:s&&u.cvv===!1&&u.number===!1,isCardDetailFetching:u.number===!0||u.cvv===!0||E||D,windowSize:V,children:Ye.cardDetails.cvvHideOut}),t.jsxs(qo,{secretRevealed:m,sourceId:i,showSecretInfo:s&&u.cvv===!1&&u.number===!1,isCardDetailErrored:j,children:[t.jsx(Ko,{scaleFactor:L,secretRevealed:m,sourceId:i,id:`SecretCvv-${i}`}),t.jsx(Jo,{windowSize:V,scaleFactor:L,secretRevealed:m,id:`CvvCopyBtn-${i}`,sourceId:i}),q===!0?t.jsx(_t,{top:L*Te.cvvCopiedSectionTop,width:"auto"}):null]})]})]})]})},Go=r.div`
+  display: ${e=>e.showSecretInfo?"block":"none"};
+  height: ${e=>e.secretRevealed?"unset":a.sp0};
+  width: ${e=>e.secretRevealed?e.scaleFactor*Te.secretCardNumberWrapperWidth:l[0]}px;
+  overflow: hidden;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":d.neutralGrey5Light};
+    border-radius: ${a.sp1};
+  }
+`,Yo=r.div`
+  min-height: ${e=>e.secretRevealed?e.scaleFactor*W.h6Regular.lineHeightValue:l[0]}px;
+  height: ${e=>e.secretRevealed?e.scaleFactor*W.h6Regular.lineHeightValue:l[0]}px;
+  width: ${e=>e.secretRevealed?"100%":a.sp0};
+  overflow: hidden;
+  position: relative;
+`,qo=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?Te.secretCVVWrapperWidth:l[0]}px;
+  position: relative;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":d.neutralGrey5Light};
+    border-radius: ${a.sp1};
+  }
+`,Ko=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*W.h6Regular.lineHeightValue:l[0]}px;
+  width: ${e=>e.secretRevealed?Te.secretCVVWrapperWidth*e.scaleFactor:a.sp0};
+  overflow: hidden;
+`,Xo=r.div`
+  position: relative;
+  padding: ${a.sp0} ${a.sp1};
+  &:hover {
+    background: ${e=>e.secretRevealed?d.neutralGrey5Light:"transparent"};
+    border-radius: ${a.sp1};
+  }
+`,Jo=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*W.h6Regular.lineHeightValue:l[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":a.sp0};
+  position: absolute;
+  top: ${a.sp0};
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,Qo=r.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*W.h6Regular.lineHeightValue:l[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":a.sp0};
+  position: absolute;
+  top: ${e=>e.scaleFactor*Te.cardNumberCopyBtnTop}px;
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,en=r.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${a.sp4} ${a.sp0} ${a.sp4} ${a.sp5};
+  width: 75%;
+  gap: ${a.sp4};
+`,tn=r.div`
+  position: relative;
+  width: max-content;
+`,Zt=r(pe)`
+  padding-left: ${a.sp1};
+  color: ${d.brandColorPearl};
+  position: relative;
+  font-size: ${e=>Va.CardInfoTitleSize.valuePx(e.windowSize)};
+  line-height: ${e=>Va.CardInfoTitleLineHeight.valuePx(e.windowSize)};
+`,an=r(Dt)`
+  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=>Te.maskedCardNumberMarginTop.valuePx(e.windowSize)};
+  margin-left: -2px;
+  font-size: ${e=>e.scaleFactor*W.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*W.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,rn=r.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: ${a.sp4};
+`,on=r.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${a.sp5};
+`,nn=r(Dt)`
+  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*W.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*W.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,sn=r.div`
+  display: flex;
+  flex-direction: column;
+`,dn=r(Dt)`
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  font-size: ${e=>e.scaleFactor*W.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*W.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,cn=r(Dt)`
+  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*W.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*W.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,ln=r(mt)`
+  height: ${a.sp3};
+  width: ${a.sp3};
+  color: ${d.success};
+`,hn=r.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: ${a.sp1};
+  width: 100%;
+  justify-content: center;
+  z-index: 1;
+`,pn=r(pe)`
+  color: ${d.primaryDark};
+  padding: 2px ${a.sp2};
+  background-color: ${d.blackColor};
+`,{common:un,spendManagement:{chargeCard:{cardDetails:ye}}}=be.getLocalizedStrings(),Ce={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 R(l[4],l[4],l[4],l[3])},Hr=({isChargeCardAdmin:e,chargeCardDetailView:i,productInformation:s,cashbackInformation:m,creditAccountInformation:h,debitAccountInformation:x,secretRevealed:p,isOwnCard:f,vgsVaultId:g,showSecretInfo:C,controllerEmails:c,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:S,isChargeCardSetupEnabled:I,chargeCardCashbackDetailState:$,creditAccount:j,creditAccountRepayment:D,isShowingInDrawer:u,isSandboxEnv:E,isCardDetailErrored:y,signedInUserToken:O,selectedColor:H,cardDetailsFetchState:k,setCardDetailsFetchState:Z,setIsCardDetailErrored:J,setShowSecretInfo:_,setSecretRevealed:T,setShowPhoneNumberForOtp:oe,isCardDetailFetching:Q,handleColorCodeClick:ie,onFireOnClickAnalytics:V,onUnlockChargeCard:U})=>{const[G,q]=o.useState(!1),[z,ne]=o.useState(!1),[ee,te]=o.useState(!1),[K,N]=o.useState(!1),[L,B]=o.useState(!1),[Y,A]=o.useState(!1),[P,ae]=o.useState(()=>{const me=i.chargeCard?.status.code;return me==="locked"||me==="closed"||me==="closed_by_customer"}),[se,v]=o.useState(!1),[F,$e]=o.useState(!1),le=o.useRef(void 0),ve=i.chargeCard?.type.code??"business_virtual_credit_card",{isMobileOrTabletScreen:Re}=xr(),Se=ke(),b=u?.75:Se==="small"?.85:1,re=i.lockChargeCardsFetchState.fetchState,Ze=Je(re),he=i.unlockChargeCardsFetchState.fetchState,je=Je(he),Ge=i.closeChargeCardsFetchState.fetchState,Me=Je(Ge),ue=i.chargeCard?.status.code==="locked",Ve=i.chargeCard?.status.code==="closed"||i.chargeCard?.status.code==="closed_by_customer",[ot]=Wt("UnlockCard"),[de]=Wt("LockCard"),[Ct]=Wt("CloseCard");o.useEffect(()=>{if(!(z&&ue))return void te(!1);const me=setTimeout(()=>{te(!0)},400);return()=>clearTimeout(me)},[z,ue]),o.useEffect(()=>{!ue&&!Ve||P||(ae(!0),v(!1))},[ue,Ve]),o.useEffect(()=>{Ze==="In-Progress"&&re==="Completed"&&(le.current&&clearTimeout(le.current),N(!1),ae(!1),v(!0),setTimeout(()=>{N(!0)},0),le.current=setTimeout(()=>{N(!1),ae(!0),ne(!1)},1e3))},[re,Ze]),o.useEffect(()=>{je==="In-Progress"&&he==="Completed"&&(le.current&&clearTimeout(le.current),$e(!0),B(!1),setTimeout(()=>{B(!0)},0),le.current=setTimeout(()=>{B(!1),ae(!1),$e(!1)},1e3))},[he,je]),o.useEffect(()=>{Me==="In-Progress"&&Ge==="Completed"&&(le.current&&clearTimeout(le.current),A(!1),ae(!1),v(!0),setTimeout(()=>{A(!0)},0),le.current=setTimeout(()=>{A(!1),ae(!0)},1e3))},[Ge,Me]);const nt=Re?ye.tapCardCopyText:ye.scanNowAndAddToWallet,st=Re?ye.tapCardCopyText:t.jsxs(fn,{children:[t.jsx(Nn,{}),ye.clickTheCardToFetchDetailsText]}),Fe=i.chargeCard?.isLockedByAdmin??!1,ft=Se==="small"?ye.tapCardCopyText:ye.clickTheCardToCopyDetailsText,dt=Se==="small"?ye.tapCardCopyText:ye.clickTheCardToFetchDetailsText,wt=u?nt:ft,xt=u?st:dt,Ee=Q(k)||i.updateFetchState.fetchState==="In-Progress"||i.unlockChargeCardsFetchState.fetchState==="In-Progress",ct=(k.cvv!==!0||k.number!==!0)&&f,De=!!i.chargeCard?.type.code.includes("debit");return t.jsxs($n,{windowSize:Se,scaleFactor:b,children:[t.jsxs(kn,{isCardLocked:ue,isChargeCardAdmin:e,isLockedByAdmin:Fe,unlockFetchState:i.unlockChargeCardsFetchState.fetchState,onClick:me=>{me.stopPropagation(),!ue||he==="In-Progress"||!e&&Fe||U(e)},onMouseEnter:()=>{!e&&Fe||he==="In-Progress"||ne(!0)},onMouseLeave:()=>{!e&&Fe||he==="In-Progress"||ne(!1)},children:[p&&u?t.jsxs(t.Fragment,{children:[t.jsx(Mn,{}),t.jsx(Vn,{}),t.jsx(On,{}),t.jsx(Hn,{})]}):null,t.jsx(jn,{play:P,animate:se,fadeOut:F,unlockInProgress:he==="In-Progress"||F||je==="In-Progress"&&he==="Completed"}),L&&ot!=null?t.jsx(Ut,{style:{width:a.sp9,height:a.sp9,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2,backgroundColor:d.lockCardOverlayBackground,borderRadius:a.sp11},animationData:ot,loop:!1,play:L,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):Y&&Ct!=null?t.jsx(Ut,{style:{width:56,height:56,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},animationData:Ct,loop:!1,play:Y,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):P?Ve?t.jsx(Fn,{}):he==="In-Progress"?t.jsx(Dn,{}):F||je==="In-Progress"&&he==="Completed"?null:t.jsx(Rn,{isHovered:z&&ue,children:t.jsxs(An,{isHovered:z&&ue,children:[t.jsx(Nr,{}),t.jsx(Tn,{isVisible:z&&ue,shouldEnterLayout:ee,children:ye.moreOptions.unlock})]})}):K&&de!=null?t.jsx(Ut,{style:{width:72,height:72,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},animationData:de,loop:!1,play:K,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):null,ve.includes("virtual")?t.jsxs(Ln,{isShowingInDrawer:u,isOwnCard:f,scaleFactor:b,bgColor:H?.toString(),showColorPalette:G,isDebitCard:De,"data-testid":X("virtual-charge-card-detail"),onClick:()=>{G===!1&&f===!0&&Q(k)===!1&&he!=="In-Progress"&&ue===!1&&Ea({signedInUserToken:O,showSecretInfo:C,setShowPhoneNumberPopup:oe,onFireOnClickAnalytics:V,setShowSecretInfo:_})},enableClick:ct&&!ue&&!Ve||ue&&he!=="In-Progress",cardDetailsFetchState:Ee||i.chargeCard?.cardColorCode===void 0,children:[t.jsx(Na,{scaleFactor:b,shouldAppear:Ee||i.chargeCard?.cardColorCode===void 0}),t.jsx(Mo,{leftTransitionValue:b*Ce.colorPaletteLeftTransitionValue,hasBorderShadow:!1,tickStyles:{width:"12px",height:"12px"},colorInState:i.chargeCard?.cardColorCode!=null?new Xe(i.chargeCard.cardColorCode):void 0,styles:{height:"100%",maxWidth:"78%",top:u?"unset":a.sp0,left:G?a.sp0:b*Ce.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:G,toggleColorPaletteVisibility:me=>{q(me)},handleColorClick:(me,lt)=>{ie(me,lt),lt&&q(!1)}}),t.jsx(Pn,{scaleFactor:b}),t.jsx(Oa,{productInformation:s,cashbackInformation:m,creditAccountInformation:h,debitAccountInformation:x,secretRevealed:p,setSecretRevealed:T,onFireOnClickAnalytics:V,isCardColorUndefined:i.chargeCard?.cardColorCode==null,isCardColorUpdating:i.updateFetchState.fetchState==="In-Progress",isSandboxEnv:E,cardDetailsFetchState:k,setCardDetailsFetchState:Z,isCardDetailErrored:y,setIsCardDetailErrored:J,chargeCard:i.chargeCard,vgsVaultId:g,showSecretInfo:C,creditAccountRepayment:D,token:O?.token,isDebitCard:De,depositAccountLimitFetchState:i.depositAccountLimitFetchState.fetchState,controllerEmails:c,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:S,isChargeCardSetupEnabled:I,creditAccount:j,chargeCardCashbackDetailState:$,cardInfoTitleStyles:{...W.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:u?"addToWalletDrawer":"cardDetail"}),t.jsxs(Ba,{children:[t.jsxs(En,{children:[t.jsx(Wa,{scaleFactor:b}),t.jsx(bn,{onClick:me=>{me.stopPropagation(),f&&q(!G)},"data-testid":X("card-color-selector"),children:f?t.jsx(Qt,{enterDelay:600,title:ye.cardColours,placement:"left",children:t.jsx(Ha,{isShowingInDrawer:u})}):t.jsx(Ha,{isShowingInDrawer:u})})]}),t.jsx(wn,{scaleFactor:b})]})]}):t.jsxs(Bn,{scaleFactor:b,enableClick:ct&&!ue&&!Ve||ue&&he!=="In-Progress",isOwnCard:f,isShowingInDrawer:u,onClick:()=>{f===!0&&ue===!1&&he!=="In-Progress"&&Q(k)===!1&&Ea({signedInUserToken:O,showSecretInfo:C,setShowPhoneNumberPopup:oe,onFireOnClickAnalytics:V,setShowSecretInfo:_})},"data-testid":X("physical-charge-card-detail"),children:[t.jsx(Na,{scaleFactor:b,shouldAppear:Ee}),t.jsxs(Wn,{flipCard:p,children:[t.jsx(Un,{children:t.jsx($r,{scaleFactor:b,isClickable:ct,isLoading:Ee,isDebitCard:De})}),C?t.jsxs(_n,{isDebitCard:De,children:[t.jsx(Oa,{productInformation:s,cashbackInformation:m,creditAccountInformation:h,debitAccountInformation:x,secretRevealed:p,setSecretRevealed:T,onFireOnClickAnalytics:V,isCardColorUndefined:i.chargeCard?.cardColorCode==null,isCardColorUpdating:i.updateFetchState.fetchState==="In-Progress",isSandboxEnv:E,cardDetailsFetchState:k,setCardDetailsFetchState:Z,isCardDetailErrored:y,setIsCardDetailErrored:J,chargeCard:i.chargeCard,vgsVaultId:g,showSecretInfo:C,token:O?.token,isDebitCard:De,depositAccountLimitFetchState:i.depositAccountLimitFetchState.fetchState,controllerEmails:c,isChargeCardFeatureEnabled:n,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:S,isChargeCardSetupEnabled:I,creditAccount:i.creditAccount,creditAccountRepayment:D,chargeCardCashbackDetailState:$,cardInfoTitleStyles:{...W.extraSmallRegular.cssObject},styles:{gap:`${a.sp3}`,paddingLeft:`${a.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${a.sp3}`},sourceId:u?"addToWalletDrawer":"cardDetail"}),t.jsx(Ba,{children:t.jsx(zn,{children:t.jsx(Wa,{scaleFactor:b})})})]}):null]})]})]}),Ve?t.jsx(mn,{children:ye.cardClosedMessage}):Fe&&!e?t.jsx(gn,{children:ye.cardLockedByAdminMessage}):ue?t.jsx(Gt,{children:ye.cardLockedMessage}):f!==!0||Ee?Ee?t.jsx(Gt,{children:ye.loading}):null:k.cvv===!0&&k.number===!0?t.jsx(In,{children:un.loading}):y?t.jsx(Cn,{}):t.jsx(Gt,{children:p?wt:xt})]})},mn=r(pe)`
+  color: ${d.important};
+`,gn=r(pe)`
+  color: ${e=>e.theme.colors.primary};
+`,Cn=()=>t.jsxs(yn,{children:[t.jsx(xn,{}),t.jsx(Sn,{children:ye.failedToFetchCardWebText})]}),fn=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp2};
+`,wn=r(Ji)`
+  width: ${e=>e.scaleFactor*Ce.visaLogoWidth}px;
+  height: ${e=>e.scaleFactor*Ce.visaLogoHeight}px;
+`,xn=r(ro)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${d.alert};
+`,Sn=r(pe)`
+  color: ${d.alert};
+`,yn=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp1};
+`,bn=r.div`
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,Ha=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%;
+`,$n=r.div`
+  min-height: ${e=>`calc(${e.scaleFactor*Ce.rightSectionHeight}px + ${a.sp2})`};
+  min-width: ${e=>`calc(${e.scaleFactor*Ce.rightSectionWidth}px + ${a.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>Ce.cardContainerContentGap.valuePx(e.windowSize)};
+`,Gt=r(pe)`
+  color: ${e=>e.theme.colors.primary};
+`,vn=Pr`
+	0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(180%);
+  }
+`,kn=r.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: ${a.sp2};
+  cursor: ${e=>!e.isCardLocked||e.unlockFetchState==="In-Progress"||!e.isChargeCardAdmin&&e.isLockedByAdmin?"default":"pointer"};
+`,jn=r.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: ${e=>e.play?"544px":"0"};
+  height: ${e=>e.play?"544px":"0"};
+  background: ${e=>e.unlockInProgress||e.fadeOut?"transparent":d.overlayDark};
+  border-radius: 328px;
+  pointer-events: none;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  opacity: ${e=>e.fadeOut?0:e.play?1:0};
+  transition:
+    width 300ms ease-out,
+    height 300ms ease-out,
+    opacity 300ms ease-out,
+    background 300ms ease-out;
+`,Na=r.div`
+  z-index: 1;
+  display: ${e=>e.shouldAppear?"block":"none"};
+  content: "";
+  width: ${e=>e.scaleFactor*Ce.cardLoadingShineWidth}px;
+  height: ${e=>e.scaleFactor*Ce.cardLoadingShineHeight}px;
+  position: absolute;
+  transform: translateX(-180%);
+  animation: ${vn} 1.5s infinite;
+  background: ${ge`linear-gradient(to right, transparent 0%, ${d.backgroundThemeLight} 50%, transparent 100%)`};
+`,Ba=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 25%;
+  padding: ${a.sp4} ${a.sp0};
+`,Ln=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*Ce.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*Ce.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?ge`
+            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?ge`
+            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};
+  }
+`,In=r(pe)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,Wa=r(Xi)`
+  height: ${e=>e.scaleFactor*Ce.zeniLogoHeight}px;
+  width: ${e=>e.scaleFactor*Ce.zeniLogoWidth}px;
+  color: ${d.neutralGrey5Light};
+`,Nr=r(qi)`
+  width: ${a.sp5};
+  height: ${a.sp5};
+  min-width: ${a.sp5};
+  min-height: ${a.sp5};
+  box-sizing: content-box;
+  color: ${d.neutralGrey5Light};
+`,Dn=r(Nr)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  padding: ${a.sp3};
+  border-radius: ${a.sp11};
+  background: ${d.lockCardOverlayBackground};
+`,Tn=r(Tr)`
+  color: ${d.neutralGrey5Light};
+  white-space: nowrap;
+  opacity: ${e=>e.isVisible?1:0};
+  transform: ${e=>e.isVisible?"scaleX(1)":"scaleX(0)"};
+  transform-origin: left;
+  position: static;
+  flex: ${e=>e.shouldEnterLayout?"0 0 auto":"0 0 0"};
+  min-width: 0;
+  max-width: ${e=>e.shouldEnterLayout?a.sp12:a.sp0};
+  width: ${e=>e.shouldEnterLayout?"auto":a.sp0};
+  margin: 0;
+  margin-left: ${e=>e.shouldEnterLayout?a.sp1:a.sp0};
+  padding: 0;
+  overflow: hidden;
+  transition:
+    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 400ms,
+    transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 400ms,
+    flex 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    max-width 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1);
+`,An=r.div`
+  display: flex;
+  align-items: center;
+  gap: 0;
+  position: relative;
+`,Rn=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${a.sp3};
+  padding-right: 20px;
+  border-radius: ${a.sp11};
+  background: ${e=>e.isHovered?d.lockCardOverlayBackground:"transparent"};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: background 400ms ease-in-out;
+  pointer-events: none;
+`,Fn=r(Yi)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: ${a.sp5};
+  height: ${a.sp5};
+  color: ${d.important};
+  background: ${d.importantLight};
+  padding: 12px;
+  border-radius: 50%;
+`,En=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+`,zn=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${a.sp4};
+`,Pn=r(Ki)`
+  position: absolute;
+  width: ${e=>e.scaleFactor*Ce.cardTintIconWidth}px;
+  height: ${e=>e.scaleFactor*Ce.cardTintIconHeight}px;
+  top: -1px;
+`,Mn=r(So)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${a.sp3};
+  top: -${a.sp3};
+`,Vn=r(yo)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${a.sp3};
+  top: -${a.sp3};
+`,On=r(bo)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${a.sp3};
+  bottom: -${a.sp3};
+`,Hn=r($o)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${a.sp3};
+  bottom: -${a.sp3};
+`,Nn=r(Dr)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${a.sp3};
+  height: ${a.sp3};
+`,Bn=r.div`
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  width: ${e=>e.scaleFactor*Ce.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*Ce.chargeCardHeight}px;
+  overflow: hidden;
+  position: relative;
+  border-radius: ${a.sp2};
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?ge`
+            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?ge`
+            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};
+  }
+`,Wn=r.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  transform: ${e=>e.flipCard?"rotateY(180deg)":"rotateY(0deg)"};
+`,Un=r.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+`,_n=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);
+`,xe={contentContainerPadding:new R(l[3],l[4],l[8],l[8]),rightSectionWidth:new R(343,343,343,384),rightSectionHeight:new R(214,214,214,240),cardContainerContentGap:new R(l[2],l[2],l[2],l[3]),remainingAmountContainerGap:new R(l[1],l[1]),leftRightSectionGap:new R(l[0],54,54,57),cardBalanceSectionMarginBottom:new R(l[4],l[4]),barRadius:new R(2,l[2]),topSectionPaddingBottom:new R(l[4],19),rightSectionGap:new R(l[4],l[3]),addressSectionHeight:new R(109,74),addressSectionGap:new R(l[2],l[4]),navigationMarginBottom:new R(l[4],l[0]),addressValueGap:new R(l[0],l[1]),ownerWebMinWidth:new R(110,187)},ra={remainingAmount:new za("largeRegular","largeMedium"),spentAmount:new za("h5Regular","h5Regular")},{common:We,dateFormat:pt,spendManagement:Zn}=be.getLocalizedStrings(),Ue=Zn.chargeCard,Gn=({chargeCardDetailView:e,spent:i,controllerEmails:s,chargeCardCashbackDetailState:m,isChargeCardFeatureEnabled:h,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:p,isChargeCardSetupEnabled:f,creditAccount:g,creditAccountRepayment:C,productInformation:c,cashbackInformation:n,creditAccountInformation:w,debitAccountInformation:S,cardIssuedByRoles:I,cardIssuedByDepartmentName:$,cardHolderRoles:j,cardHolderDepartmentName:D,classListFetchState:u,cardOwnerName:E,secretRevealed:y,appleWalletLink:O,googleWalletLink:H,isCardNotPending:k,isOwnerNameCopied:Z,isAddressCopied:J,addressToShow:_,isOwnCard:T,vgsVaultId:oe,showSecretInfo:Q,isSandboxEnv:ie,isCardDetailErrored:V,signedInUserToken:U,selectedColor:G,showUpdateSpendLimitAction:q,setShowPhoneNumberPopup:z,setShowChangeSpendLimitPopup:ne,cardDetailsFetchState:ee,setCardDetailsFetchState:te,setIsCardDetailErrored:K,setShowSecretInfo:N,setSecretRevealed:L,isCardDetailFetching:B,handleColorCodeClick:Y,onFireOnClickAnalytics:A,onOwnerNameCopyClick:P,onAddressCopyClick:ae,onUnlockChargeCard:se,isDebitCard:v})=>{const F=ke(),$e=It().analytics,le=e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate!=null?e.chargeCardConfig.rePaymentInfo.cardLimitResetDate.format(pt.visual.MMMDFormat):Co().startOf("month").add(1,"month").format(pt.visual.MMMDFormat),ve=e.chargeCard!=null?Math.round(100*i.amount/e.chargeCard.limit.amount):0,{isIPhoneScreen:Re}=Li(),Se=e.chargeCard?.type.code==="business_physical_credit_card"&&(e.chargeCard?.status.code==="inactive"||e.chargeCard?.status.code==="request_on_hold"),b=Lt(),re=Tt(b?.loggedInUserRoleMap);return t.jsxs(cs,{windowSize:F,children:[t.jsxs(ds,{windowSize:F,children:[t.jsxs(ls,{windowSize:F,children:[t.jsx(Jn,{children:We.texts.spent}),t.jsx(Ga,{children:t.jsx(hs,{windowSize:F,children:_e("0,0.[00]",i)})}),t.jsx(xs,{windowSize:F,children:t.jsx(ys,{style:{width:`${ve}%`,borderRadius:a.sp1}})}),e.chargeCard!=null?t.jsxs(Ga,{children:[t.jsxs(Ss,{children:[t.jsxs(Kn,{windowSize:F,children:[t.jsx(Ya,{windowSize:F,children:_e("0,0.[00]",e.chargeCard.available)}),t.jsx(qa,{windowSize:F,children:We.texts.remaining})]}),q?t.jsxs(us,{windowSize:F,children:[t.jsx(ms,{children:Ue.updateSpendLimitPopup.unlockSpending}),t.jsx(gs,{onClick:()=>{qn({chargeCardDetailView:e,classListFetchState:u,isChargeCardFeatureEnabled:h,creditAccount:g,creditAccountRepayment:C,isDebitCard:v,productInformation:c,creditAccountInformation:w,debitAccountInformation:S,controllerEmails:s,cardIssuedByRoles:I,cardIssuedByDepartmentName:$,cardHolderRoles:j,cardHolderDepartmentName:D,analytics:$e}),ne(!0)},"data-testid":X("update-spend-limit-button"),children:Ue.updateSpendLimitPopup.updateSpendLimit})]}):null]}),t.jsxs(ps,{windowSize:F,children:[t.jsxs(Qn,{children:[t.jsx(Ya,{windowSize:F,children:_e("0,0.[00]",e.chargeCard.limit)}),t.jsx(qa,{windowSize:F,children:Ue.cardList.slashMonth})]}),e.chargeCard.status.code!=="request_on_hold"?t.jsxs(Cs,{children:[t.jsx(fs,{children:We.texts.limitReset}),t.jsx(ws,{children:le})]}):null]})]}):null]}),t.jsx(Yn,{chargeCardDetailView:e,classListFetchState:u,cardOwnerName:E,addressToShow:_,isAddressCopied:J,isOwnerNameCopied:Z,onOwnerNameCopyClick:P,onAddressCopyClick:ae})]}),t.jsx(ns,{windowSize:F,isOwnCard:T,children:F!=="small"||T?t.jsxs(t.Fragment,{children:[t.jsx(ss,{windowSize:F,children:Se?t.jsx($r,{}):t.jsx(Hr,{isChargeCardAdmin:re,chargeCardDetailView:e,productInformation:c,cashbackInformation:n,creditAccountInformation:w,debitAccountInformation:S,creditAccount:e.creditAccount,setShowSecretInfo:N,secretRevealed:y,isOwnCard:T,isShowingInDrawer:!1,vgsVaultId:oe,showSecretInfo:Q,isSandboxEnv:ie,controllerEmails:s,isChargeCardFeatureEnabled:h,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:p,isChargeCardSetupEnabled:f,chargeCardCashbackDetailState:m,isCardDetailErrored:V,signedInUserToken:U,selectedColor:G,cardDetailsFetchState:ee,setCardDetailsFetchState:te,setIsCardDetailErrored:K,setSecretRevealed:L,isCardDetailFetching:B,handleColorCodeClick:Y,onFireOnClickAnalytics:A,setShowPhoneNumberForOtp:z,onUnlockChargeCard:se,creditAccountRepayment:C})}),T||e.chargeCard?.status.code==="closed"||e.chargeCard?.status.code==="closed_by_customer"||e.chargeCard?.status.code==="locked"?null:t.jsx(Xn,{children:Ue.cardDetails.adminsCannotAccess}),F==="small"&&T&&k&&v===!1?Re?t.jsx(Jt,{onClick:()=>{at({chargeCardDetailView:e,classListFetchState:u,analytics:$e,isDebitCard:v,isChargeCardAdmin:re,productInformation:c,creditAccountInformation:w,debitAccountInformation:S,cardIssuedByRoles:I,cardIssuedByDepartmentName:$,cardHolderRoles:j,cardHolderDepartmentName:D,controllerEmails:s,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:h,creditAccount:g,creditAccountRepayment:C}),window.open(O,"_blank")}}):t.jsx(Xt,{onClick:()=>{at({chargeCardDetailView:e,classListFetchState:u,analytics:$e,isDebitCard:v,isChargeCardAdmin:re,productInformation:c,creditAccountInformation:w,debitAccountInformation:S,cardIssuedByRoles:I,cardIssuedByDepartmentName:$,cardHolderRoles:j,cardHolderDepartmentName:D,controllerEmails:s,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:h,creditAccount:g,creditAccountRepayment:C}),window.open(H,"_blank")}}):null]}):null})]})},Yn=({chargeCardDetailView:e,classListFetchState:i,cardOwnerName:s,addressToShow:m,isOwnerNameCopied:h,isAddressCopied:x,onOwnerNameCopyClick:p,onAddressCopyClick:f})=>{const g=ke(),C=Qe(),[c,n]=o.useState(0),[w,S]=o.useState(!0),[I,$]=o.useState(!1),[j,D]=o.useState(!1),[u,E]=o.useState(!1);o.useEffect(()=>{const O=[setTimeout(()=>{n(1)},500),setTimeout(()=>{n(0),E(!0)},1e3),setTimeout(()=>{S(!1),E(!1)},2e3),setTimeout(()=>{S(!0),n(1)},2500),setTimeout(()=>{n(0),E(!0)},3e3),setTimeout(()=>{S(!1),E(!1)},4e3)];return()=>{O.forEach(clearTimeout)}},[]);const y=`${e.connectedAccount?.accountName} ${e.connectedAccount?.maskedAccountNumber}`;return t.jsxs(es,{children:[t.jsxs(ts,{windowSize:g,children:[t.jsxs(as,{shouldBounce:u,isActive:c==0,isAutoSlide:w,windowSize:g,children:[e.chargeCard?.cardHolderUser!=null?t.jsxs(Ua,{windowSize:g,onClick:p,"data-testid":X("owner-name-copy-click"),onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),children:[t.jsxs(kt,{children:[Ue.cardDetails.owner,t.jsxs(er,{children:[t.jsx(Ka,{children:h===!0?t.jsx(Qa,{}):t.jsx(Ja,{isHover:I})}),h||I?t.jsx(Xa,{children:h?We.copyToClipBoard.copied:We.copyToClipBoard.copy}):null]})]}),t.jsx(_a,{children:t.jsx(Yt,{children:s})})]}):null,m!=null?t.jsxs(Za,{windowSize:g,onClick:f,"data-testid":X("address-copy-click"),onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[t.jsxs(kt,{children:[Ue.cardDetails.address,t.jsxs(er,{children:[t.jsx(Ka,{children:x===!0?t.jsx(Qa,{}):t.jsx(Ja,{isHover:j})}),x||j?t.jsx(Xa,{children:x?We.copyToClipBoard.copied:We.copyToClipBoard.copy}):null]})]}),t.jsx(os,{windowSize:g,children:t.jsx(Gi,{address:m,isDisabled:"readonly",style:{padding:a.sp0,...W.smallRegular.cssObject,textTransform:"capitalize",alignItems:"flex-start",backgroundColor:C.colors.grey4,cursor:"pointer",flexDirection:g==="small"?"column":"row",gap:xe.addressValueGap.valuePx(g),textAlign:g==="small"?"left":"right"}})})]}):null]}),t.jsxs(rs,{isActive:c==1,isAutoSlide:w,children:[e.chargeCard?.type.code.includes("debit")===!0?t.jsxs(Ua,{windowSize:g,children:[t.jsx(kt,{children:Ue.connectedAccount}),t.jsxs(is,{children:[t.jsx(bs,{children:t.jsx($s,{})}),t.jsx(Yt,{children:y})]})]}):null,t.jsxs(Za,{windowSize:g,children:[t.jsx(kt,{children:Ue.department}),t.jsx(_a,{children:t.jsx(Yt,{children:i==="In-Progress"||i==="Not-Started"?t.jsx(ut,{size:"Small",start:!0}):e.chargeCard?.department?.className??We.strings.hyphen})})]})]})]}),t.jsx(wo,{numberOfDots:2,activeIndex:c,handleClick:n,style:{marginTop:"12px",marginBottom:xe.navigationMarginBottom.valuePx(g)},dotStyle:{width:a.sp2,height:a.sp2},spendManagementPromoCardActive:!0,promoColor:C.colors.primary,promoColorHover:C.colors.grey1})]})},qn=({chargeCardDetailView:e,classListFetchState:i,isChargeCardFeatureEnabled:s,creditAccount:m,creditAccountRepayment:h,isDebitCard:x,controllerEmails:p,productInformation:f,creditAccountInformation:g,debitAccountInformation:C,cardIssuedByRoles:c,cardIssuedByDepartmentName:n,cardHolderRoles:w,cardHolderDepartmentName:S,analytics:I})=>{if(!(e.chargeCard==null||i!=="Completed"||e.transactionStatistics.fetchState!=="Completed"||s&&(m.fetchState!=="Completed"||h.fetchState!=="Completed")||x&&e.depositAccountLimitFetchState.fetchState!=="Completed")){const $=e.chargeCard.type.code.includes("physical")?e.chargeCard.cardActivationAttemptHistory[0]?.timestamp:e.chargeCard.createTime;I.trackCardsUpdateSpendLimitInitiated(p,f,{cardId:e.chargeCard.id,cardName:e.chargeCard.cardName,cardType:_i(e.chargeCard.type.code),cardCategory:e.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:ht(e.chargeCard.limit.amount),cardLastFourDigits:e.chargeCard.accountLast4,cardStatus:e.chargeCard.status.code,cardAssignedDate:e.chargeCard.createTime?.format(pt.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:e.chargeCard.providerCardCreateTime?.format(pt.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:$?.format(pt.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:e.chargeCard.creditLimitFrequency.name,cardSpentAmount:ht(e.chargeCard.balance.amount),cardAvailableLimit:ht(e.chargeCard.available.amount),cardUtilizationPercent:Ui(e.chargeCard.limit.amount,e.chargeCard.available.amount),cardUtilizationAmount:ht(Zi(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:Pa(e.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:e.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:e.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:c,cardIssuedByDepartment:n},{cardholderName:Pa(e.chargeCard.cardHolderUser,!1),cardholderEmail:e.chargeCard.cardHolderUser?.email,cardholderRole:w,cardholderUserId:e.chargeCard.cardHolderUser?.userId,cardholderDepartment:S},"Card Detail","Hyperlink",(e?.chargeCard?.recommendations??[]).map(j=>ht(j.creditLimit.amount)),g,C)}},Kn=r.div`
+  display: flex;
+  align-items: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"flex-start":"center"};
+  gap: ${e=>xe.remainingAmountContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"column":"row"};
+`,Xn=r(pe)`
+  color: ${e=>e.theme.colors.primary};
+`,Jn=r(pe)`
+  color: ${e=>e.theme.colors.hero};
+`,Qn=r.div`
+  display: flex;
+  align-items: end;
+`,es=r.div`
+  width: 100%;
+  overflow: hidden;
+`,ts=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=>xe.addressSectionHeight.valuePx(e.windowSize)};
+`,as=r.div`
+  display: flex;
+  justify-content: unset;
+  gap: ${e=>xe.addressSectionGap.valuePx(e.windowSize)};
+  position: absolute;
+  width: 100%;
+  ${({isActive:e,isAutoSlide:i})=>ge`
+    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"}`};
+`,rs=r.div`
+  display: flex;
+  justify-content: unset;
+  ${({isActive:e,isAutoSlide:i})=>ge`
+    transform: translateX(${e?i?"95%":"0%":"105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,isActive:i})=>e&&i?"0.5s":"0.3s"}
+    ease-out;
+  gap: ${a.sp8};
+`,Ua=r.div`
+  min-width: ${e=>xe.ownerWebMinWidth.valuePx(e.windowSize)};
+  cursor: pointer;
+`,kt=r(pe)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+`,_a=r.div``,is=r.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${a.sp1};
+`,os=r.div`
+  ${({windowSize:e})=>e==="small"?ge`
+          max-width: 220px;
+        `:null};
+`,Yt=r(pe)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,Za=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: "baseline";
+  justify-content: center;
+  cursor: pointer;
+`,ns=r.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize!=="small"&&e.isOwnCard?"row":"column"};
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>xe.rightSectionGap.valuePx(e.windowSize)};
+  width: ${e=>e.windowSize==="small"?"100%":"max-content"};
+`,ss=r.div`
+  min-height: ${e=>`calc(${xe.rightSectionHeight.valuePx(e.windowSize)} + ${a.sp2})`};
+  min-width: ${e=>`calc(${xe.rightSectionWidth.valuePx(e.windowSize)} + ${a.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>xe.cardContainerContentGap.valuePx(e.windowSize)};
+`,ds=r.div`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+`,cs=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=>xe.contentContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${e=>xe.topSectionPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${e=>xe.contentContainerPadding.valuePx(e.windowSize)};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  background: ${e=>e.theme.colors.grey5};
+  gap: ${e=>xe.leftRightSectionGap.valuePx(e.windowSize)};
+`,ls=r.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: ${({windowSize:e})=>xe.cardBalanceSectionMarginBottom.valuePx(e)};
+`,Ga=r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`,hs=r(Lr)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${ra.spentAmount.style(e.windowSize)}`};
+`,ps=r.div`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  ${({windowSize:e})=>e==="small"?ge`
+          margin-bottom: ${a.sp4};
+        `:null};
+`,us=r.div`
+  display: flex;
+  flex-direction: ${({windowSize:e})=>e==="small"?"column":"row"};
+  align-items: ${({windowSize:e})=>e==="small"?"flex-start":"flex-end"};
+`,ms=r(ea)`
+  color: ${e=>e.theme.colors.hero};
+  margin-right: ${a.sp1};
+`,gs=r(Wi)`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${a.sp0};
+  color: ${d.link};
+  &:hover {
+    text-decoration: underline;
+  }
+`,Cs=r.div`
+  display: flex;
+  align-items: flex-end;
+  gap: ${a.sp1};
+`,fs=r(pe)`
+  color: ${e=>e.theme.colors.hero};
+`,ws=r(pe)`
+  color: ${e=>e.theme.colors.hero};
+`,xs=r.div`
+  width: 100%;
+  height: ${a.sp1};
+  display: flex;
+  margin: ${a.sp2} ${a.sp0};
+  border-radius: ${({windowSize:e})=>xe.barRadius.valuePx(e)};
+  background: ${e=>e.theme.colors.grey2};
+`,Ss=r.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  color: ${e=>e.theme.colors.primary};
+`,Ya=r(Lr)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${ra.remainingAmount.style(e.windowSize)}`};
+`,qa=r(Bi)`
+  ${e=>`${ra.remainingAmount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+`,ys=r.div`
+  background: ${d.success};
+  width: 0%;
+  height: ${a.sp1};
+  transition: width 4s ease;
+`,Ka=r.span`
+  display: flex;
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Xa=r(it)`
+  padding: ${a.sp0} 2px;
+  color: ${d.heroDark};
+  background: ${d.blackColor};
+  border-radius: ${a.sp1};
+  position: absolute;
+  left: 20px;
+`,Ja=r(jr)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${a.sp1};
+  color: ${e=>e.isHover?e.theme.colors.primary:e.theme.colors.grey2};
+  cursor: pointer;
+`,Qa=r(mt)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${a.sp1};
+  color: ${d.success};
+`,bs=r.div`
+  width: 21px;
+  height: 21px;
+`,$s=r(Qi)`
+  color: ${d.brandColorOpal};
+  width: 100%;
+  height: 100%;
+`,er=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`,gt=be.getLocalizedStrings().spendManagement.chargeCard.cardDetails.header,vs={key:"merchant",value:gt.merchant,sortOrder:"ascending",width:new R(38,38)},ks={key:"paymentDate",value:gt.paymentDate,sortOrder:"ascending",width:new R(21,21)},js={key:"receipts",value:gt.receipts,sortOrder:"ascending",width:new R(16,16)},Ls={key:"type",value:gt.type,sortOrder:"ascending",width:new R(14,14)},Is={key:"amount",value:gt.amount,sortOrder:"ascending",width:new R(11,11)},Br=()=>[vs,ks,js,Ls,Is],tt={headerLastColumnTopPadding:new R(l[0],l[4]),headerLastColumnRightPadding:new R(l[3],l[11]),headerLastColumnBottomPadding:new R(l[0],l[4]),headerLastColumnLeftPadding:new R(l[3],l[11]),headerHeight:new R(ho,po)},Ds=go.memo(function({hideSorting:e,sortConfig:i,onColumnSortConfigChanged:s}){const m=Qe(),h=ke(),x=Br(),p=(c,n)=>{let w=n;i.sortKey===c&&(w=n==="ascending"?"descending":"ascending"),s(c,w)},f=x.find(c=>c.key===i.sortKey)??x[0],g=x.map(c=>c.key),C=be.getLocalizedStrings().spendManagement.chargeCard.cardList;return h==="small"?t.jsxs(tr,{windowSize:h,children:[t.jsxs(Rs,{children:[t.jsx(Es,{children:t.jsx(Fs,{})}),t.jsx(io,{title:C.sortBy,placeholder:C.sortBy,pickerValues:g,valueToLabel:c=>x.find(n=>n.key===c)?.value??"",selectedValue:i.sortKey,onPickerSelectionChanged:c=>{p(c,"ascending")},optionTextStyle:W.smallRegular,titleTextStyle:W.smallRegular,titleColor:m.colors.primary,selectedOptionColor:m.colors.hero,optionBackgroundColor:m.colors.grey5,downChevronVisible:!1,backgroundColor:m.colors.grey4,isDisabled:e})]}),t.jsxs(Ms,{hideSorting:e,onClick:()=>{e||p(f.key,f.sortOrder)},"data-testid":X("charge-card-trxn-small-header",i.sortKey),children:[t.jsx(pe,{children:f.value}),e?null:t.jsx(ar,{sortDataValue:i.sortKey,headerData:f,children:t.jsx(rr,{})})]})]}):t.jsx(tr,{windowSize:h,children:x.map(c=>t.jsxs(Ts,{hideSorting:e,sortDataValue:i.sortKey,actualDataValue:c.key,wrapperWidth:c.width,windowSize:h,children:[t.jsxs(Ps,{hideSorting:e,onClick:()=>{e||p(c.key,c.sortOrder)},"data-testid":X("charge-card-trxn-header",i.sortKey),children:[t.jsx(pe,{children:c.value}),t.jsx(ar,{sortDataValue:i.sortKey,headerData:c,children:e?null:t.jsx(rr,{})})]}),t.jsx(zs,{sortDataValue:i.sortKey,windowSize:h,isVisible:!e&&i.sortKey===c.key&&c.key!=="paymentDate",children:e?null:t.jsx(As,{onClick:()=>{e||p("paymentDate","ascending")},"data-testid":X("charge-card-trxn-close-sort",i.sortKey)})})]},c.key))})}),tr=r(pe)`
+  top: ${a.sp0};
+  left: ${a.sp0};
+  min-height: ${e=>tt.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>tt.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${tt.headerLastColumnTopPadding.valuePx(e.windowSize)} ${tt.headerLastColumnRightPadding.valuePx(e.windowSize)} ${tt.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${tt.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`,Ts=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"?ge`
+          flex: 1 1 auto;
+        `:ge`
+          padding-left: ${a.sp0};
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+`,As=r(no)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,ar=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"}
+`,rr=r(Dr)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,Rs=r.div`
+  gap: ${a.sp1};
+  display: flex;
+`,Fs=r(oo)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,Es=r.div`
+  margin-right: ${a.sp1};
+  display: flex;
+  align-items: center;
+`,zs=r.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,Ps=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};
+  }
+`,Ms=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 Wr(e,i,s){return async function(m,h,x,p){const f=`${m}?query=${encodeURIComponent(JSON.stringify(x))}`,g=be.getLocalizedStrings().downloadReport;try{const C=await so(f,{method:"GET",headers:{"zeni-user-id":h.userId,"zeni-tenant-id":h.tenantId,"zeni-session-id":h.sessionId}});if(C.ok){const c=p??co(C.headers,"Charge Card Transaction Receipt.pdf"),n=await C.arrayBuffer();lo(n,c)}else console.error(`${g.reportErrorMessage} ${C.statusText}`)}catch(C){console.error(`${g.reportErrorMessage} ${JSON.stringify(C)}`)}}(e,i,s)}async function Ur(e,i,s){const m=`${e}?query=${encodeURIComponent(JSON.stringify(s))}`,h=be.getLocalizedStrings().downloadReport;try{const x=await fetch(m,{method:"GET",headers:{"zeni-user-id":i.userId,"zeni-tenant-id":i.tenantId,"zeni-session-id":i.sessionId}});if(x.ok)return await x.json();console.error(`${h.reportErrorMessage} ${x.statusText}`)}catch(x){throw console.error(`${h.reportErrorMessage} ${JSON.stringify(x)}`),x}return[]}const _r=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"})),Zr=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:Vs,spendManagement:{chargeCard:{cardDetails:ir}},common:{strings:{hyphen:Os},tooltips:{addMissingReceipt:Hs,addReceipt:Ns,viewReceipt:Bs}}}=be.getLocalizedStrings(),Be={containerPaddingLeft:new R(l[3],l[4]),containerPaddingRight:new R(l[3],l[4]),containerPaddingTop:new R(l[2],l[3]),containerPaddingBottom:new R(l[2],l[3]),containerMarginLeft:new R(l[4],l[8]),webkitLineClamp:new R(2,1,1,1,1)},Ws=(e,i)=>e.attachments!=null&&e.attachments.length>0?Bs:e.amount.amount<=i.amount?Ns:Hs,Gr=(e,i,s,m)=>e.attachments!=null&&e.attachments.length>0?t.jsx(ld,{onClick:h=>{h.stopPropagation(),m()},"data-testid":X("card-transaction-row-view-receipt",e.id)}):e.amount.amount<=i.amount?t.jsx(ud,{onClick:h=>{h.stopPropagation(),s()},"data-testid":X("card-transaction-row-optional-upload-receipt",e.id)}):t.jsx(pd,{onClick:h=>{h.stopPropagation(),s()},"data-testid":X("card-transaction-row-upload-receipt",e.id)}),Us=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:m,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:x,cardId:p,uploadReceiptsFetchState:f,uploadReceiptsShowTick:g,isViewReceiptClickedImmediatelyAfterUpload:C,authParams:c,transaction:n,receiptRequiredAboveAmount:w,updateChargeCardTransactionAttachments:S,onUploadReceiptComplete:I,updateChargeCardTransactionUploadReceiptsFetchStatus:$,updateChargeCardTransactionReceiptsShowTick:j,updateChargeCardTransactionIsViewReceiptClicked:D,removeSnackbar:u,onChargeCardTransactionRowClick:E})=>{const y=ke(),[O,H]=o.useState(!1),[k,Z]=o.useState([]),[J,_]=o.useState(null);o.useEffect(()=>{!s&&C&&(Q(T[0]),q())},[s,C]);const T=n.attachments?.filter(v=>v.contentType!=null&&Ar.includes(v.contentType))??[],[oe,Q]=o.useState(T[0]),[ie,V]=o.useState([]),[U,G]=o.useState(void 0);o.useEffect(()=>{U!=null&&(async function(v){ie.includes(v.attachment_id)?console.warn(`Attachment with ID ${v.attachment_id} is already getting downloaded`):(V([v.attachment_id,...ie]),await Wr(x,c,v),V(Mr(ie,F=>F==v.attachment_id)))}({card_id:p,transaction_id:n.id,attachment_id:U}),G(void 0))},[U]);const q=()=>{H(!0);const v=T.map(F=>F.id);(async function(F){return await Ur(h,c,F)})({card_id:p,transaction_id:n.id,attachment_ids:v}).then(F=>{Z(F),F.length>0&&_(F[0])})},{merchant:z,createTime:ne,transactionType:ee,thirdPartyTransactionId:te}=n,K=o.useRef(null),N=Br(),L=Rr(n.transactionStatus),B=m?z.brandName??z.name:z.name,Y=_e("0,0.00",n.amount),A=ee.code==="transfer",P=te!=null&&m,ae=A&&n.direction==="debit",se=A&&n.direction==="credit";return t.jsxs(qs,{windowSize:y,isClickable:P,"data-testid":X("card-transaction-row",n.id),onClick:v=>{v.stopPropagation(),P&&E(ee.code,te)},children:[t.jsx(Ks,{children:t.jsxs(Xs,{children:[t.jsxs(Js,{windowSize:y,responsiveWidth:N[0].width,children:[ae?t.jsx(rd,{}):se?t.jsx(id,{}):t.jsx(od,{src:z.logo?.url?.toString()}),t.jsx(Qs,{windowSize:y,hasMarginRight:L.code==="paid",children:B}),L.code!=="paid"?t.jsxs(Zs,{children:[t.jsx(Ys,{windowSize:y}),t.jsx(Gs,{color:L.color,windowSize:y,children:L.value})]}):null]}),t.jsx(ad,{windowSize:y,responsiveWidth:N[1].width,children:t.jsx(nd,{children:ne.format(Vs.visual.MMMDCommaYYYYformat)})}),t.jsx(dd,{windowSize:y,responsiveWidth:N[2].width,children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?Os:f?.fetchState==="In-Progress"?t.jsx(ut,{size:"Small",start:!0}):g?t.jsx(hd,{}):t.jsxs(Qt,{enterDelay:600,display:"flex",placement:"bottom",title:Ws(n,w),children:[t.jsx(_s,{"data-testid":X("card-transaction-row-upload-receipt",n.id),onClick:v=>{v.stopPropagation()},children:t.jsx(Fr,{name:"transactionLineAttachment",fileRef:K,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:v=>{if(v.target.files!=null){const F=v.target.files,$e=[],le=[];for(let ve=0;ve<F.length;ve++)$e.push(F[ve].name),le.push(F[ve]);(async function(ve,Re){$(n.id,p,"In-Progress"),await Vr(`${e}/1.0/cards/transactions/${n.id}/attachments`,c,ve,Re).then(Se=>{Se!=null&&S(n.id,Se),$(n.id,p,"Completed"),j(n.id,p,!0),setTimeout(()=>{j(n.id,p,!1),I(!0)},2e3)}).catch(Se=>{$(n.id,p,"Error"),I(!1,Se)})})(le,$e)}},multiple:!0,onFileSizeError:(v,F)=>{v&&I(!1,{code:500,message:F===!0?ir.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",jt(i,0)):ir.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",jt(i,0))})}})}),Gr(n,w,()=>{K.current?.click()},()=>{s?(u(),D(n.id,p,!0)):(Q(T[0]),q())})]})}),t.jsx(sd,{windowSize:y,responsiveWidth:N[3].width,children:t.jsx(cd,{title:ee.name,children:ee.name})}),t.jsx(ed,{windowSize:y,responsiveWidth:N[4].width,children:t.jsx(td,{windowSize:y,title:_e("0,0.[00]",n.amount),children:n.direction==="debit"?Y:`-${Y}`})})]})}),O&&T.length>0?zr.createPortal(t.jsx(Er,{allFiles:k,fileSource:J,file:oe,title:oe.fileName,attachments:T,setFileSource:_,setShowFullScreenView:H,onCrossClick:()=>{D(n.id,p,!1),H(!1),_(null),Z([]),T.length>0&&Q(T[0])},setSelectedFileAttachment:Q,onDownloadClick:v=>{G(v.id)},handleTouchStart:()=>{},handleTouchMove:()=>{},handleTouchEnd:()=>{}}),document.body):null]})},_s=r.div``,Zs=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${a.sp2};
+  margin-right: ${a.sp4};
+`,Gs=r(it)`
+  color: ${e=>e.color};
+`,Ys=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};
+`,qs=r.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>Be.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>Be.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>Be.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>Be.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=>Be.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>Be.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+  cursor: ${e=>e.isClickable?"pointer":"default"};
+`,Ks=r.div`
+  display: block;
+  width: 100%;
+`,Xs=r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,Js=r.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${a.sp2};
+  align-items: center;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,Qs=r(Pe)`
+  margin-right: ${e=>e.hasMarginRight?a.sp3:a.sp0};
+  color: inherit;
+  -webkit-line-clamp: ${e=>Be.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(Pe)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,td=r(Pe)`
+  color: inherit;
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>Be.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,ad=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;
+`,Yr=e=>ge`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e.colors.hero};
+`,rd=r(Zr)`
+  ${({theme:e})=>Yr(e)}
+`,id=r(_r)`
+  ${({theme:e})=>Yr(e)}
+`,od=r.img`
+  display: flex;
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,nd=r(Pe)`
+  color: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,sd=r(Pe)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,dd=r.div`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,cd=r(it)`
+  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};
+`,ld=r(uo)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,hd=r(mt)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${d.success};
+`,pd=r(mo)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.brandColorGoldDark};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,ud=r(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"})))`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,{dateFormat:md,spendManagement:{chargeCard:{cardDetails:qt}},common:{strings:{hyphen:gd}}}=be.getLocalizedStrings(),Cd={webkitLineClamp:new R(2,1,1,1,1)},fd=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:m,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:x,cardId:p,isViewReceiptClickedImmediatelyAfterUpload:f,uploadReceiptsShowTick:g,uploadReceiptsFetchState:C,authParams:c,transaction:n,receiptRequiredAboveAmount:w,onUploadReceiptComplete:S,updateChargeCardTransactionAttachments:I,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:j,updateChargeCardTransactionUploadReceiptsFetchStatus:D,removeSnackbar:u,onChargeCardTransactionRowClick:E})=>{const y=ke(),[O,H]=o.useState(0),[k,Z]=o.useState(0),[J,_]=o.useState(0),T=b=>{_(b),ie(!0),ee(z[b]),q(V[b])};function oe(b){return b<0?z.length+b:b%z.length}const[Q,ie]=o.useState(!1),[V,U]=o.useState([]),[G,q]=o.useState(null);o.useEffect(()=>{!s&&f&&(ee(z[0]),B())},[s,f]);const z=n.attachments?.filter(b=>b.contentType!=null&&Ar.includes(b.contentType))??[],[ne,ee]=o.useState(z[0]),[te,K]=o.useState([]),[N,L]=o.useState(void 0);o.useEffect(()=>{N!=null&&(async function(b){te.includes(b.attachment_id)?console.warn(`Attachment with ID ${b.attachment_id} is already getting downloaded`):(K([b.attachment_id,...te]),await Wr(x,c,b),K(Mr(te,re=>re==b.attachment_id)))}({card_id:p,transaction_id:n.id,attachment_id:N}),L(void 0))},[N]);const B=()=>{ie(!0);const b=z.map(re=>re.id);(async function(re){return await Ur(h,c,re)})({card_id:p,transaction_id:n.id,attachment_ids:b}).then(re=>{U(re),re.length>0&&q(re[0])})},{merchant:Y,createTime:A,transactionType:P,thirdPartyTransactionId:ae}=n,se=o.useRef(null),v=Rr(n.transactionStatus),F=m?Y.brandName??Y.name:Y.name,$e=_e("0,0.00",n.amount),le=P.code==="transfer",ve=ae!=null&&m,Re=le&&n.direction==="debit",Se=le&&n.direction==="credit";return t.jsxs(Id,{windowSize:y,"data-testid":X("card-transaction-row-small",n.id),onClick:b=>{b.stopPropagation(),ve&&E(P.code,ae)},children:[t.jsx(Dd,{children:t.jsxs(Td,{children:[t.jsxs(Fd,{children:[t.jsx(kd,{children:Re?t.jsx(wd,{}):Se?t.jsx(xd,{}):t.jsx(zd,{src:Y.logo?.url?.toString()})}),t.jsxs(Pd,{children:[t.jsxs(Sd,{children:[t.jsx(Ad,{windowSize:y,children:F}),v.code!=="paid"?t.jsxs(yd,{children:[t.jsx($d,{windowSize:y}),t.jsx(bd,{color:v.color,windowSize:y,children:v.value})]}):null]}),t.jsx(Rd,{children:`${qt.paymentDate} ${A.format(md.visual.MMMDCommaYYYYformat)}`})]})]}),t.jsxs(Ed,{children:[t.jsx(Md,{children:n.direction==="debit"?$e:`-${$e}`}),t.jsx(Ld,{title:P.name,children:P.name}),t.jsx(jd,{children:n.transactionStatus.code==="declined"||n.transactionStatus.code==="canceled"?gd:C?.fetchState==="In-Progress"?t.jsx(ut,{size:"Small",start:!0}):g?t.jsx(vd,{}):t.jsxs(or,{children:[t.jsx(or,{"data-testid":X("card-transaction-row-small-upload-receipt",n.id),onClick:b=>{b.stopPropagation()},children:t.jsx(Fr,{name:"transactionLineAttachment",fileRef:se,sizeLimit:i,isSizeLimitForEachFile:!0,onFileChange:b=>{if(b.target.files!=null){const re=b.target.files,Ze=[],he=[];for(let je=0;je<re.length;je++)Ze.push(re[je].name),he.push(re[je]);(async function(je,Ge){D(n.id,p,"In-Progress"),await Vr(`${e}/1.0/cards/transactions/${n.id}/attachments`,c,je,Ge).then(Me=>{Me!=null&&I(n.id,Me),D(n.id,p,"Completed"),S(!0),$(n.id,p,!0),setTimeout(()=>$(n.id,p,!1),2e3)}).catch(Me=>{D(n.id,p,"Error"),S(!1,Me)})})(he,Ze)}},multiple:!0,onFileSizeError:(b,re)=>{b&&S(!1,{code:500,message:re===!0?qt.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",jt(i,0)):qt.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",jt(i,0))})}})}),Gr(n,w,()=>{se.current?.click()},()=>{s?(u(),j(n.id,p,!0)):(ee(z[0]),B())})]})})]})]})}),Q&&z.length>0?zr.createPortal(t.jsx(Er,{allFiles:V,fileSource:G,file:ne,title:ne.fileName,attachments:z,setFileSource:q,setShowFullScreenView:ie,onCrossClick:()=>{j(n.id,p,!1),ie(!1),q(null),U([]),z.length>0&&ee(z[0])},setSelectedFileAttachment:ee,onDownloadClick:b=>{L(b.id)},handleTouchStart:function(b){H(b.targetTouches[0].clientX)},handleTouchMove:function(b){Z(b.targetTouches[0].clientX)},handleTouchEnd:function(){O-k>50&&k!==0&&J<z.length-1?(T(oe(J+1)),H(0),Z(0)):O-k<-50&&k!==0&&J>0&&(T(oe(J-1)),H(0),Z(0))}}),document.body):null]})},qr=e=>ge`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e.colors.hero};
+`,wd=r(Zr)`
+  ${({theme:e})=>qr(e)}
+`,xd=r(_r)`
+  ${({theme:e})=>qr(e)}
+`,or=r.div``,Sd=r.div`
+  display: flex;
+  gap: ${a.sp2};
+  align-items: flex-start;
+`,yd=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${a.sp2};
+  min-height: ${a.sp4};
+`,bd=r(it)`
+  color: ${e=>e.color};
+`,$d=r.div`
+  display: block;
+  width: ${a.sp1};
+  height: ${a.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,vd=r(mt)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${d.success};
+`,kd=r.div``,jd=r.div`
+  margin-top: ${a.sp2};
+`,Ld=r(it)`
+  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};
+`,Id=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};
+`,Dd=r.div`
+  display: block;
+  width: 100%;
+`,Td=r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,Ad=r(Pe)`
+  color: inherit;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>Cd.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+`,Rd=r(it)`
+  color: inherit;
+  min-height: 18px;
+  margin-top: -${a.sp1};
+`,Fd=r.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${a.sp2};
+`,Ed=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,zd=r.img`
+  display: flex;
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,Pd=r.div`
+  margin-bottom: 6px;
+`,Md=r(Pe)`
+  color: inherit;
+`,{spendManagement:{chargeCard:{cardDetails:rt}},common:Vd}=be.getLocalizedStrings();function Od({transactions:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,uploadReceiptsFetchStateByTransactionId:m,uploadReceiptsShowTickByTransactionId:h,isViewReceiptClickedImmediatelyAfterUploadTransactionId:x,cardId:p,receiptRequiredAboveAmount:f,isAiCategorizationEnabledForCardsTransactions:g,transactionAttachmentsEndpointToFetch:C,transactionAttachmentEndpointToDownload:c,cardsEndPoint:n,authParams:w,hideSorting:S,isOwnCard:I,uiState:$,fetchState:j,cardHolderUser:D,cardStatusCode:u="active",cardCodeType:E="business_virtual_credit_card",onReloadTransactions:y,onFetchChargeCardTransactionList:O,onColumnSortConfigChanged:H,removeSnackbar:k,onChargeCardTransactionRowClick:Z,onUploadReceiptComplete:J,onUpdateScrollYOffset:_,updateChargeCardTransactionAttachments:T,updateChargeCardTransactionUploadReceiptsFetchStatus:oe,updateChargeCardTransactionReceiptsShowTick:Q,updateChargeCardTransactionIsViewReceiptClicked:ie}){const V=ke(),U=o.useRef(null),[G,q]=o.useState(!1);o.useEffect(()=>{U.current?.resetAfterIndex(0)},[V,U]),o.useEffect(()=>{j==="Completed"&&q(!1)},[j]);const z=()=>V!=="small"?74:128,ne=()=>{var K,N;q(!0),K=$.pageToken,N=$.pageTokenType,O(K,N)},ee=K=>K<e.length,te=()=>{$.pageToken!=null&&j==="Completed"&&ne()};return t.jsxs(Zd,{isOwnCard:I,windowSize:V,isEmptyTransaction:e.length===0,children:[t.jsx(Gd,{windowSize:V,children:j==="Error"?t.jsxs(Kd,{children:[t.jsx(Xd,{onClick:y,"data-testid":X("card-transaction-list-reload"),children:t.jsx(br,{})}),t.jsx(Jd,{children:Vd.reloadPage.label})]}):j==="Not-Started"||j==="In-Progress"&&e.length===0?t.jsx(ec,{children:t.jsx(ut,{size:"ExtraLarge",start:!0})}):j==="Completed"||j==="In-Progress"&&e.length>0?u==="request_on_hold"?t.jsx(Nd,{cardType:E,cardHolderUser:D}):u==="inactive"?t.jsx(Bd,{cardHolderUser:D}):e.length===0?t.jsx(Hd,{}):t.jsx(qd,{windowSize:V,children:t.jsx(Ei,{children:({height:K,width:N})=>t.jsx(zi,{isItemLoaded:ee,itemCount:e.length+1,loadMoreItems:te,children:({onItemsRendered:L})=>t.jsx(Pi,{ref:U,height:K,itemCount:e.length,onItemsRendered:L,itemSize:z,itemKey:B=>e[B].id,width:N,style:{willChange:"auto"},innerElementType:B=>_d(B,S,$,j,H),onScroll:({scrollOffset:B})=>{_?.(B)},initialScrollOffset:$.scrollYOffset,children:B=>t.jsx(Wd,{...B,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,cardsEndPoint:n,isAiCategorizationEnabledForCardsTransactions:g,transactionAttachmentsEndpointToFetch:C,transactionAttachmentEndpointToDownload:c,uploadReceiptsFetchStateByTransactionId:m,uploadReceiptsShowTickByTransactionId:h,isViewReceiptClickedImmediatelyAfterUploadTransactionId:x,cardId:p,authParams:w,transactions:e,receiptRequiredAboveAmount:f,updateChargeCardTransactionAttachments:T,onUploadReceiptComplete:J,updateChargeCardTransactionUploadReceiptsFetchStatus:oe,updateChargeCardTransactionReceiptsShowTick:Q,updateChargeCardTransactionIsViewReceiptClicked:ie,onChargeCardTransactionRowClick:Z,removeSnackbar:k})})})})}):null}),G===!0?t.jsx(tc,{children:t.jsx(ut,{size:"Small",start:!0})}):null]})}const Hd=()=>{const e=ke();return t.jsxs(ia,{children:[t.jsx(da,{children:t.jsx(Xr,{})}),t.jsxs(oa,{children:[t.jsx(na,{children:rt.transactionTable.emptyTransactions.title}),t.jsx(sa,{windowSize:e,children:rt.transactionTable.emptyTransactions.subTitle})]})]})},Nd=({cardType:e,cardHolderUser:i})=>{const s=i!=null?i.firstName+" "+i.lastName:"",m=ke();return t.jsxs(ia,{children:[t.jsx(da,{children:t.jsx(rc,{})}),t.jsxs(oa,{children:[t.jsx(na,{children:rt.transactionTable.pendingProfileCompletion.title}),t.jsx(sa,{windowSize:m,children:rt.transactionTable.pendingProfileCompletion.subTitle[e].replace("__user__",s)})]})]})},Bd=({cardHolderUser:e})=>{const i=ke();return t.jsxs(ia,{children:[t.jsx(da,{children:t.jsx(Xr,{})}),t.jsxs(oa,{children:[t.jsx(na,{children:rt.transactionTable.pendingActivation.title}),t.jsx(sa,{windowSize:i,children:rt.transactionTable.pendingActivation.subTitle.replace("__user__",e?.firstName??"")})]})]})},Wd=({index:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,style:m,transactions:h,isAiCategorizationEnabledForCardsTransactions:x,uploadReceiptsFetchStateByTransactionId:p,uploadReceiptsShowTickByTransactionId:f,isViewReceiptClickedImmediatelyAfterUploadTransactionId:g,cardId:C,cardsEndPoint:c,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:w,receiptRequiredAboveAmount:S,authParams:I,updateChargeCardTransactionAttachments:$,onUploadReceiptComplete:j,updateChargeCardTransactionUploadReceiptsFetchStatus:D,updateChargeCardTransactionReceiptsShowTick:u,updateChargeCardTransactionIsViewReceiptClicked:E,onChargeCardTransactionRowClick:y,removeSnackbar:O})=>t.jsx(Qd,{style:{...m,width:"100%"},className:"spend-management-list-item",children:t.jsx(Ud,{documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,cardId:C,isAiCategorizationEnabledForCardsTransactions:x,cardsEndPoint:c,transactionAttachmentsEndpointToFetch:n,transactionAttachmentEndpointToDownload:w,authParams:I,receiptRequiredAboveAmount:S,transaction:h[e],uploadReceiptsFetchState:p?.[h[e].id],uploadReceiptsShowTick:f?.[h[e].id],isViewReceiptClickedImmediatelyAfterUpload:g?.[h[e].id],updateChargeCardTransactionAttachments:$,onUploadReceiptComplete:j,updateChargeCardTransactionUploadReceiptsFetchStatus:D,updateChargeCardTransactionReceiptsShowTick:u,updateChargeCardTransactionIsViewReceiptClicked:E,onChargeCardTransactionRowClick:y,removeSnackbar:O},h[e].id)}),Ud=o.memo(({transaction:e,documentAiReceiptMaxSizeLimit:i,isSnackbarOpen:s,isAiCategorizationEnabledForCardsTransactions:m,uploadReceiptsFetchState:h,uploadReceiptsShowTick:x,isViewReceiptClickedImmediatelyAfterUpload:p,cardsEndPoint:f,transactionAttachmentsEndpointToFetch:g,transactionAttachmentEndpointToDownload:C,cardId:c,receiptRequiredAboveAmount:n,authParams:w,updateChargeCardTransactionAttachments:S,onUploadReceiptComplete:I,updateChargeCardTransactionUploadReceiptsFetchStatus:$,updateChargeCardTransactionReceiptsShowTick:j,updateChargeCardTransactionIsViewReceiptClicked:D,onChargeCardTransactionRowClick:u,removeSnackbar:E})=>{const y=ke()==="small"?fd:Us;return t.jsx(y,{isSnackbarOpen:s,documentAiReceiptMaxSizeLimit:i,isAiCategorizationEnabledForCardsTransactions:m,transactionAttachmentsEndpointToFetch:g,transactionAttachmentEndpointToDownload:C,uploadReceiptsFetchState:h,uploadReceiptsShowTick:x,isViewReceiptClickedImmediatelyAfterUpload:p,transaction:e,cardId:c,receiptRequiredAboveAmount:n,cardsEndPoint:f,authParams:w,updateChargeCardTransactionAttachments:S,onUploadReceiptComplete:I,updateChargeCardTransactionUploadReceiptsFetchStatus:$,updateChargeCardTransactionReceiptsShowTick:j,updateChargeCardTransactionIsViewReceiptClicked:D,onChargeCardTransactionRowClick:u,removeSnackbar:E})}),_d=(e,i,s,m,h)=>t.jsx(Kr,{...e,onColumnSortConfigChanged:h,hideSorting:i,uiState:{sortKey:s.sortKey,sortOrder:s.sortOrder},fetchState:m}),Kr=o.forwardRef((e,i)=>{const{children:s,style:m,uiState:h,onColumnSortConfigChanged:x,hideSorting:p,...f}=e;return t.jsxs(ac,{ref:i,style:{...m,width:"auto"},...f,children:[t.jsx(Ds,{onColumnSortConfigChanged:x,sortConfig:{sortKey:h.sortKey,sortOrder:h.sortOrder},hideSorting:p}),t.jsx(Yd,{children:s})]})});Kr.displayName="Charge Card Transaction list View inner element type";const Zd=r.div`
+  display: block;
+  height: ${e=>e.isEmptyTransaction?"calc(100vh - 436px)":"calc(100vh - 224px)"};
+  width: 100%;
+`,Gd=r.div`
+  height: 100%;
+`,Yd=r.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,qd=r.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,Kd=r.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Xd=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};
+    }
+  }
+`,Jd=r(ea)`
+  margin-top: ${a.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Qd=r.div`
+  top: ${a.sp0};
+  left: ${a.sp0};
+  padding-bottom: ${a.sp3};
+  box-sizing: border-box;
+`,ec=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};
+`,tc=r.div`
+  display: flex;
+  width: 100%;
+  height: auto;
+  padding-bottom: ${a.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`,ia=r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${a.sp2};
+  height: 100%;
+  margin: ${a.sp0} ${a.sp3};
+`,oa=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,na=r(eo)`
+  color: ${e=>e.theme.colors.brandColorJade};
+`,sa=r(Tr)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>e.windowSize!=="small"?ge`
+          white-space: pre;
+        `:null};
+  text-align: center;
+`,da=r.div``,ac=r.div``,Xr=r(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"})))))``,rc=r(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:ic}=be.getLocalizedStrings(),{cardDetails:Oe}=ic.chargeCard,oc=Pr`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`,nc=r(r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: inherit;
+`)`
+  animation: ${e=>e.className==="slide-in-right-to-left-add-to-wallet"?oc:null} 0.3s forwards;
+`,sc=({isChargeCardAdmin:e,chargeCardDetailView:i,walletType:s,secretRevealed:m,isDrawerOpen:h,vgsVaultId:x,showSecretInfo:p,changePinInProcess:f,isSandboxEnv:g,controllerEmails:C,isChargeCardFeatureEnabled:c,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:w,isChargeCardSetupEnabled:S,chargeCardCashbackDetailState:I,isCardDetailErrored:$,creditAccountRepayment:j,productInformation:D,creditAccountInformation:u,debitAccountInformation:E,cashbackInformation:y,signedInUserToken:O,selectedColor:H,showDrawerAnimation:k,cardDetailsFetchState:Z,setCardDetailsFetchState:J,setIsCardDetailErrored:_,setShowSecretInfo:T,setSecretRevealed:oe,setShowChangePinPopup:Q,setIsAddToWalletDrawerOpen:ie,isCardDetailFetching:V,handleColorCodeClick:U,onFireOnClickAnalytics:G,onVerifyOtp:q,onVerifyOtpSuccess:z,onResendOtp:ne,onFireVerifyPopOnClickAnalytics:ee,onGetOtp:te})=>{const K=Qe(),[N,L]=o.useState(!1),[B,Y]=o.useState(!1),A=k.current;return o.useEffect(()=>{document.body.style.overflow=h?"hidden":"unset"},[h,k]),t.jsx($i,{onClose:()=>{ie(!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":X("add-card-to-wallet-drawer"),children:t.jsxs(t.Fragment,{children:[t.jsx(Sr,{phoneNumberPopupDescription:Oe.verifyPhoneNumberDescription,showOtpPopup:N,showPhoneNumberPopup:B,twoFactorAuthenticationView:i.twoFAView,loggedInUserPhone:i.loggedInUserPhone,onVerifyOtp:q,onVerifyOtpSuccess:P=>{z(P),f?Q(!0):T(!0)},onFireVerifyPopOnClickAnalytics:ee,setShowOtpPopup:L,onResendOtp:ne,setShowPhoneNumberPopup:Y,onGetOtp:te}),t.jsxs(nc,{className:A,children:[t.jsx(vi,{title:s==="apple"?Oe.addCardToAppleWallet:Oe.addCardToGoogleWallet,style:{zIndex:4},backgroundColor:K.colors.grey4,onCloseClick:()=>ie(!1)}),t.jsxs(cc,{children:[t.jsxs(uc,{children:[t.jsxs(lc,{children:[t.jsx(Sc,{children:t.jsx(bc,{})}),t.jsx(gc,{children:Oe.openWalletAppOnPhone})]}),t.jsx(Cc,{children:s==="apple"?Oe.openWalletDescriptionApple:Oe.openWalletDescriptionGoogle}),t.jsx(Hr,{isChargeCardAdmin:e,onUnlockChargeCard:()=>{},chargeCardDetailView:i,creditAccountRepayment:j,creditAccount:i.creditAccount,setShowSecretInfo:T,secretRevealed:m,isOwnCard:!0,controllerEmails:C,isChargeCardFeatureEnabled:c,isDebitCardFeatureEnabled:n,isDebitCardSetupEnabled:w,isChargeCardSetupEnabled:S,chargeCardCashbackDetailState:I,isShowingInDrawer:!0,vgsVaultId:x,showSecretInfo:p,isSandboxEnv:g,isCardDetailErrored:$,signedInUserToken:O,productInformation:D,creditAccountInformation:u,debitAccountInformation:E,cashbackInformation:y,selectedColor:H,cardDetailsFetchState:Z,setCardDetailsFetchState:J,setIsCardDetailErrored:_,setSecretRevealed:oe,isCardDetailFetching:V,handleColorCodeClick:U,onFireOnClickAnalytics:G,setShowPhoneNumberForOtp:Y})]}),t.jsx(pc,{}),t.jsxs(mc,{children:[t.jsxs(hc,{children:[t.jsx(xc,{children:t.jsx(yc,{})}),t.jsx(fc,{children:Oe.verifyCard})]}),t.jsx(dc,{children:t.jsx(wc,{children:s==="apple"?Oe.VerifyCardDescriptionApple:Oe.VerifyCardDescriptionGoogle})})]})]})]})]})})},dc=r.div`
+  display: flex;
+  justify-content: end;
+`,cc=r.div`
+  margin: ${a.sp3} ${a.sp8};
+`,lc=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp3};
+`,hc=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${a.sp3};
+`,pc=r.div`
+  height: ${a.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  width: ${a.sp0};
+  margin-left: ${a.sp8};
+`,uc=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};
+`,mc=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};
+`,gc=r(aa)`
+  color: ${e=>e.theme.colors.primary};
+`,Cc=r(Pe)`
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${a.sp9};
+  padding-bottom: ${a.sp4};
+`,fc=r(aa)`
+  color: ${e=>e.theme.colors.primary};
+`,wc=r(Pe)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 274px;
+`,xc=r.div`
+  padding: 12px;
+  border-radius: ${a.sp4};
+  background: ${d.successLight};
+  display: flex;
+`,Sc=r.div`
+  padding: 12px;
+  border-radius: ${a.sp4};
+  background: ${e=>e.theme.colors.graphColor16Light};
+  display: flex;
+`,yc=r(Ni)`
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,bc=r(xo)`
+  width: ${a.sp4};
+  height: ${a.sp4};
+  color: ${e=>e.theme.colors.graphColor16Dark};
+`,{spendManagement:{chargeCard:{cardDetails:qe}},common:{strings:$c}}=be.getLocalizedStrings(),ca={iFrameWidth:new R(188,188)};function vc({isSandboxEnv:e,cardProviderID:i,vgsVaultId:s,signedInUserToken:m,onCancelClick:h,onUpdateDebitCardPinAttempt:x,onChangePinSuccess:p}){const f=ke(),g=Qe(),[C,c]=o.useState({}),[n,w]=o.useState(!1),[S,I]=o.useState(!1),[$,j]=o.useState(!0),[D,u]=o.useState(!0),[E,y]=o.useState(!1),[O,H]=o.useState(!1),[k,Z]=o.useState(!1),[J,_]=o.useState(!1),[T,oe]=o.useState(!1),[Q,ie]=o.useState(!1),[V,U]=o.useState(!1),[G,q]=o.useState(null),[z,ne]=o.useState(null),[ee]=yr("https://js.verygoodvault.com/vgs-collect/2.27.0/vgs-collect.js"),te=e?"SANDBOX":"live";o.useEffect(()=>{if(ee){const N=window.VGSCollect.create(s,te,Y=>{const A=Y["data.attributes.oldPin"],P=Y["data.attributes.newPin"];A?.isTouched===!0&&A?.isValid===!1&&A?.isFocused===!1?_(!0):(A?.isTouched===!0&&A?.isValid===!0&&A?.isFocused===!1||A?.isTouched===!0&&A?.isValid===!0&&A?.isFocused===!0)&&(_(!1),U(!1)),P?.isTouched===!0&&P?.isValid===!1&&P?.isFocused===!1?oe(!0):(P?.isTouched===!0&&P?.isValid===!0&&P?.isFocused===!1||P?.isTouched===!0&&P?.isValid===!0&&P?.isFocused===!0)&&oe(!1)}),L=N.field("#oldPin",{type:"text",name:"data.attributes.oldPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...W.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:g.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:g.colors.grey1,...W.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:d.important,background:d.importantLight},"&:focus":{background:`${g.colors.background} !important`,textAlign:"left",color:`${g.colors.primary} !important`}}}),B=N.field("#newPin",{type:"text",name:"data.attributes.newPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...W.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:g.colors.primary,height:a.sp6,padding:`${a.sp0} ${a.sp3}`,textAlign:"right","&::placeholder":{color:g.colors.grey1,...W.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:d.important,background:d.importantLight},"&:focus":{background:`${g.colors.background} !important`,textAlign:"left",color:`${g.colors.primary} !important`}}});q(L),ne(B),c(N),Promise.all([L.promise,B.promise]).then(function(){I(!0)})}},[ee]),o.useEffect(()=>{G?.update({hideValue:$})},[G,$]),o.useEffect(()=>{z?.update({hideValue:D})},[z,D]);const K={onOkClick:()=>{if(!C.state)return;const N=C.state["data.attributes.newPin"]?.isValid,L=C.state["data.attributes.oldPin"]?.isValid;var B;Z(!0),N===!0&&L===!0&&(B=m,w(!0),U(!1),C.submit?.("/cards/"+i+"/secure-data/pin",{method:"PUT",mapDotToObject:"true",headers:{"Content-Type":"application/vnd.api+json",Authorization:"Bearer "+B?.token}},function(Y,A){Y===200?(y(!1),H(!1),p(),x("success")):(_(!0),x("failed"),A.errors?.[0].title.toLowerCase().includes("max")?ie(!0):A.errors?.[0].title.toLowerCase().includes("invalid")&&U(!0),w(!1))},Y=>{console.log("error",Y),w(!1)}))},onCancelClick:h};return t.jsx(yi,{titleComponent:t.jsx(kc,{children:qe.moreOptions.changePin}),descriptionComponent:t.jsxs(jc,{children:[t.jsxs(Ac,{children:[t.jsxs(pr,{showFieldError:J,windowSize:f,isFirstField:!0,validation:k,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),oldPinInputHighlighted:E,children:[t.jsx(cr,{children:qe.existingPin}),t.jsxs(lr,{windowSize:f,children:[t.jsx(Tc,{id:"oldPin",className:"cc-old-pin-form-field",windowSize:f}),t.jsx(nr,{onClick:()=>j(!$),"data-testid":X("cc-old-pin-show-text"),children:$?t.jsx(sr,{}):t.jsx(dr,{})})]})]}),t.jsx(Ic,{}),t.jsxs(pr,{showFieldError:T,windowSize:f,isFirstField:!1,validation:k,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),newPinInputHighlighted:O,children:[t.jsx(cr,{children:qe.newPin}),t.jsxs(lr,{windowSize:f,children:[t.jsx(Dc,{id:"newPin",className:"cc-new-pin-form-field",windowSize:f}),t.jsx(nr,{onClick:()=>u(!D),"data-testid":X("cc-new-pin-show-text"),children:D?t.jsx(sr,{}):t.jsx(dr,{})})]})]})]}),V?t.jsx(hr,{children:qe.incorrectCurrentPIN}):null,Q?t.jsx(hr,{children:qe.pinAttemptsReached}):null]}),primaryButtonText:"Change",primaryButtonWidth:87,isLoading:n,isDisabled:S===!1||Q,secondaryButtonWidth:87,buttonContainerStyle:{paddingTop:a.sp3,paddingBottom:a.sp2},secondaryButtonText:"Cancel",action:K,containerStyle:{maxWidth:"544px"},footerHelperComponent:t.jsxs(bi,{children:[t.jsx(Lc,{children:qe.forgotYourPin}),$c.space,qe.callTollFree]})})}const kc=r(Hi)`
+  margin-top: ${a.sp7};
+  padding-left: ${a.sp8};
+  padding-right: ${a.sp8};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,jc=r(Mi)`
+  margin-top: ${a.sp5};
+  margin-bottom: ${a.sp5};
+`,Lc=r.span`
+  color: ${e=>e.theme.colors.primary};
+`,nr=r.div`
+  cursor: pointer;
+  margin-left: ${a.sp2};
+`,sr=r(Vi)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,dr=r(Oi)`
+  height: ${a.sp4};
+  width: ${a.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,cr=r.label`
+  margin-top: ${a.sp2};
+`,lr=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 220px;
+`,hr=r(Pe)`
+  color: ${d.important};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: right;
+  margin-top: ${a.sp3};
+`,Ic=r.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,Dc=r.div`
+  border-radius: ${a.sp1};
+  height: ${a.sp6};
+  width: ${e=>ca.iFrameWidth.valuePx(e.windowSize)};
+`,Tc=r.div`
+  border-radius: ${a.sp1};
+  height: ${a.sp6};
+  width: ${e=>ca.iFrameWidth.valuePx(e.windowSize)};
+`,Ac=r.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${a.sp2};
+`,pr=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=>ca.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?ge`
+          border-bottom-left-radius: ${a.sp0};
+          border-bottom-right-radius: ${a.sp0};
+        `:ge`
+          border-top-left-radius: ${a.sp0};
+          border-top-right-radius: ${a.sp0};
+        `}
+  ${e=>e.validation?ge`
+          .vgs-collect-container__invalid:not(.vgs-collect-container__focused) {
+            background: ${d.importantLight};
+          }
+          .vgs-collect-container__focused) {
+            background: ${e.theme.colors.background};
+          }
+        `:null}
+`,Ae={bottomContentContainerPadding:new R(l[3],l[8]),styledAIIconContainerSize:new R(l[3],l[3]),bannerWrapperMarginLeftRight:new R(l[3],l[8]),payNowSectionPaddingLeftRight:new R(l[3],l[0]),styledHighImportanceIconMarginRight:new R(l[0],l[1])},{common:Le,spendManagement:Rc,dateFormat:Fc}=be.getLocalizedStrings(),ce=Rc.chargeCard,kl=({chargeCardDetailView:e,onUnlockChargeCard:i,onCloseChargeCard:s,cardsEndPoint:m,classListFetchState:h,transactionAttachmentsEndpointToFetch:x,transactionAttachmentEndpointToDownload:p,authParams:f,hideSorting:g,cardId:C,vgsVaultId:c,controllerEmails:n,isCardControlsEnabled:w,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:I,isDebitCardSetupEnabled:$,isChargeCardSetupEnabled:j,chargeCardCashbackDetailState:D,onFetchChargeCardsRecurringExpenses:u,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,creditAccount:k,cardIssuedByRoles:Z,cardIssuedByDepartmentName:J,cardHolderRoles:_,cardHolderDepartmentName:T,loggedInUserRole:oe,appleWalletLink:Q,googleWalletLink:ie,signedInUser:V,signedInUserToken:U,chargeCardsRecurringExpensesState:G,isSandboxEnv:q,isEarlyPayEnabled:z,documentAiReceiptMaxSizeLimit:ne,isSnackbarOpen:ee,onFireOnClickAnalytics:te,onUpdateDebitCardPinAttempt:K,onFireVerifyPopOnClickAnalytics:N,onBackClick:L,onReloadTransactions:B,onFetchChargeCardTransactionList:Y,onGetOtp:A,onLockChargeCard:P,onResendOtp:ae,onVerifyOtp:se,updateChargeCardName:v,onVerifyOtpSuccess:F,onColorCodeChange:$e,onColumnSortConfigChanged:le,updateChargeCardTransactionAttachments:ve,updateChargeCardTransactionUploadReceiptsFetchStatus:Re,updateChargeCardTransactionReceiptsShowTick:Se,updateChargeCardTransactionIsViewReceiptClicked:b,onUploadReceiptComplete:re,removeSnackbar:Ze,onChargeCardTransactionRowClick:he,onChargeCardRevokeInviteClick:je,onUpdateScrollYOffset:Ge,updateSpendLimit:Me,shouldOpenCreditCardPaymentDrawer:ue})=>{const Ve=o.useRef(!0),ot=Qe(),de=ke(),Ct=Lt(),nt=It().analytics,[,st]=wr(),[Fe,ft]=o.useState(!1),[dt,wt]=o.useState(!1),[xt,Ee]=o.useState(!1),[ct,De]=o.useState(!1),[me,lt]=o.useState(!1),[At,la]=o.useState(!1),[Qr,ei]=o.useState(!1),[ti,ha]=o.useState(!1),[ai,St]=o.useState(!1),[ri,Rt]=o.useState(!1),[ii,yt]=o.useState(!1),[oi,bt]=o.useState(!1),[et,Ft]=o.useState(!1),[pa,Et]=o.useState(!1),[ua,ma]=o.useState(!1),[ni,ga]=o.useState(!1),[si,di]=o.useState("apple"),[Ca,fa]=o.useState({number:!1,cvv:!1});o.useEffect(()=>{et===!1&&Et(!1)},[et]);const wa=o.useRef("noAnimation"),He=e.chargeCard?.cardHolderUserId===V.userId,zt=`${e.chargeCard?.cardHolderUser?.firstName??""} ${e.chargeCard?.cardHolderUser?.lastName??""}`,xa=e.chargeCard?.billingAddress,fe=Tt(Ct.loggedInUserRoleMap),{text1:ci,text2:li}=wi(xa),Sa=`${ci} ${li}`,Pt=e.chargeCard?.isDeclinedTransaction===!0;o.useEffect(()=>{Fe===!0&&setTimeout(()=>{ft(!1)},800),me===!0&&setTimeout(()=>{lt(!1)},800),At===!0&&setTimeout(()=>{la(!1)},800)},[me,At,Fe]);const[dl,hi]=o.useState(!1),[ya,ba]=o.useState(e.chargeCard?.cardColorCode!=null?new Xe(e.chargeCard.cardColorCode):void 0);o.useEffect(()=>{e.chargeCard?.cardColorCode!=null&&ba(new Xe(e.chargeCard.cardColorCode))},[e.chargeCard?.cardColorCode]);const $a={amount:e.chargeCard!=null?e.chargeCard.balance.amount:0,currencyCode:e.chargeCard!=null?e.chargeCard.balance.currencyCode:Le.currency.countryCode,currencySymbol:e.chargeCard!=null?e.chargeCard.balance.currencySymbol:Le.currency.currencySymbol};o.useEffect(()=>{Ve.current===!0?Ve.current=!1:te(et===!1?"card details hidden":"card detail revealed")},[et]);const va=(M,we)=>{if(we===!0){const Ne=ki(M.toString())??Le.strings.empty;te("color selected",Ne),$e(Ne),hi(!1)}ba(M)},ka=M=>{const{cvv:we,number:Ne}=M;return we===!0||Ne===!0},{isMobileOrTabletScreen:ja}=xr(),Mt=e.chargeCard?.status.code!=="request_on_hold"&&e.chargeCard?.status.code!=="inactive",Vt=e.updateChargeCardLimitFetchState.fetchState,Ot=e.updateChargeCardNameFetchState.fetchState,Ht=e.lockChargeCardsFetchState.fetchState,Nt=e.closeChargeCardsFetchState.fetchState,La=Je(Vt),Ia=Je(Ot),Da=Je(Ht),Ta=Je(Nt);o.useEffect(()=>{La==="In-Progress"&&Vt==="Completed"?St(!1):Ia==="In-Progress"&&Ot==="Completed"?Rt(!1):Da==="In-Progress"&&Ht==="Completed"?yt(!1):Ta==="In-Progress"&&Nt==="Completed"&&bt(!1)},[Vt,Ot,Ht,Nt,La,Ia,Da,Ta]);const Ie=e.chargeCard?.type.code==="business_physical_debit_card"||e.chargeCard?.type.code==="business_virtual_debit_card",pi=fe&&(e.chargeCard?.status.code==="active"||e.chargeCard?.status.code==="locked")&&$a.amount<(Ie?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit.amount??0:e.creditAccount.limit.amount),ui=e.creditAccountRepayment.initiatedRepayments.amount>0&&fe&&Pt,Aa=t.jsx("div",{children:t.jsx(xi,{entity:"debit_cards",isDisabled:e.unlockChargeCardsFetchState.fetchState==="In-Progress"?"disabled":void 0,onOptionSelection:M=>{M==="changePin"?(U==null||U.expiry.isBefore(new Date)?A(e.loggedInUserPhone):De(!0),Ee(!0)):M==="updateSpendLimit"?St(!0):M==="rename"?Rt(!0):M==="lock"?(yt(!0),u()):M==="close"?(bt(!0),u()):M==="unlock"?i(fe):M==="revokeInvite"&&je()},isMoreOption:!0,options:(()=>{if(!w)return[{value:"changePin",label:ce.cardDetails.moreOptions.changePin}];const M=[{value:"changePin",label:ce.cardDetails.moreOptions.changePin},{value:"unlock",label:ce.cardDetails.moreOptions.unlock},{value:"updateSpendLimit",label:ce.cardDetails.moreOptions.updateSpendLimit},{value:"rename",label:ce.cardDetails.moreOptions.rename},{value:"lock",label:ce.cardDetails.moreOptions.lock},{value:"close",label:ce.cardDetails.moreOptions.close},{value:"revokeInvite",label:ce.cardDetails.moreOptions.revokeInvite}],we=e.chargeCard?.status.code,Ne=we==="locked",mi=we==="inactive",gi=we==="request_on_hold",Ci=e.chargeCard?.isLockedByAdmin===!0,Fa=Ie&&He,$t=fe;if(gi){const ze=[];return $t&&ze.push("revokeInvite"),ze.push("rename"),M.filter(Bt=>ze.includes(Bt.value))}if(mi){const ze=[];return ze.push("rename"),Fa&&ze.push("changePin"),$t&&ze.push("close"),M.filter(Bt=>ze.includes(Bt.value))}const fi={changePin:Fa&&!Ne,lock:!Ne,unlock:Ne&&(fe||!Ci),rename:!0,updateSpendLimit:$t,close:$t};return M.filter(ze=>fi[ze.value])})(),customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}}),valueContainer:M=>({...M,display:"flex",alignItems:"center"})}})}),Ra=M=>M.reasonType==="other"?M.reason:M.reasonType;return t.jsxs(Gc,{children:[ii&&e.chargeCard!=null&&t.jsx(Lo,{showLockCardDrawer:!0,onCloseLockCardDrawer:()=>yt(!1),isChargeCardAdmin:fe,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:G.recurringExpenses},cardRecurringExpenseFetchState:G.fetchState,lockCardFetchState:e.lockChargeCardsFetchState.fetchState,onConfirmClick:M=>{const we=Ra(M);P(fe,we)},onDismissClick:()=>yt(!1),onRemoveCardClick:()=>{}}),oi&&e.chargeCard!=null&&t.jsx(Io,{showCloseCardDrawer:!0,onCloseCloseCardDrawer:()=>bt(!1),isChargeCardAdmin:fe,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:G.recurringExpenses},cardRecurringExpenseFetchState:G.fetchState,closeCardFetchState:e.closeChargeCardsFetchState.fetchState,onConfirmClick:M=>{const we=Ra(M);s(we)},onDismissClick:()=>bt(!1),onRemoveCardClick:()=>{}}),ct&&e.chargeCard?.cardProviderID!=null?t.jsx(vc,{signedInUserToken:U,vgsVaultId:c,onCancelClick:()=>{De(!1),Ee(!0)},isSandboxEnv:!0,cardProviderID:e.chargeCard?.cardProviderID,onChangePinSuccess:()=>{De(!1),Ee(!0)},onUpdateDebitCardPinAttempt:K}):null,ja?null:t.jsx(sc,{isChargeCardAdmin:fe,controllerEmails:n,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:I,isDebitCardSetupEnabled:$,isChargeCardSetupEnabled:j,chargeCardCashbackDetailState:D,creditAccountRepayment:e.creditAccountRepayment,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,creditAccount:e.creditAccount,selectedColor:ya,walletType:si,onFireOnClickAnalytics:te,isSandboxEnv:q,chargeCardDetailView:e,vgsVaultId:c,signedInUserToken:U,showSecretInfo:et,changePinInProcess:xt,setShowChangePinPopup:De,isCardDetailErrored:ua,cardDetailsFetchState:Ca,setCardDetailsFetchState:fa,setIsCardDetailErrored:ma,isCardDetailFetching:ka,handleColorCodeClick:va,isDrawerOpen:ni,setIsAddToWalletDrawerOpen:ga,onVerifyOtp:se,onVerifyOtpSuccess:F,onFireVerifyPopOnClickAnalytics:N,onResendOtp:ae,setShowSecretInfo:Ft,secretRevealed:pa,setSecretRevealed:Et,onGetOtp:A,showDrawerAnimation:wa}),t.jsx(Si,{rightSideComponent:(()=>{const M=e.chargeCard?.status.code;if(M==="closed"||M==="closed_by_customer")return null;if(!w)return He&&Ie?Aa:null;if(!He&&!fe)return null;const we=e.chargeCard?.isLockedByAdmin===!0;return He&&!fe&&we&&M==="locked"?null:Aa})(),navBarContainerStyles:{paddingTop:l[2],alignItems:"center",paddingBottom:l[2]},source:"ChargeCardDetailPage",title:e.chargeCard?.cardName??Le.strings.empty,subTitle:e.fetchState==="Completed"&&e.chargeCard!=null?t.jsx(jo,{cardDetail:e.chargeCard,forDetailPage:!0}):void 0,showBackButton:!0,showMenuIcon:!1,backgroundColor:ot.colors.grey5,style:{zIndex:3},onBackClick:L,titleStyle:{marginTop:l[0],...de==="small"&&{textAlign:"left"}},leftComponentStyle:de==="small"?{width:"10%"}:void 0,middleComponentStyle:de==="small"?{width:"80%"}:void 0,rightComponentStyle:de==="small"?{width:"10%"}:void 0}),t.jsx(Sr,{phoneNumberPopupDescription:ce.cardDetails.verifyPhoneNumberDescription,showOtpPopup:Qr,showPhoneNumberPopup:ti,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:se,onVerifyOtpSuccess:M=>{F(M),xt?De(!0):Ft(!0)},onFireVerifyPopOnClickAnalytics:N,setShowOtpPopup:ei,onResendOtp:ae,setShowPhoneNumberPopup:ha,onGetOtp:A}),ri&&t.jsx(Do,{currentCardName:e.chargeCard?.cardName??"",renameFetchState:e.updateChargeCardNameFetchState.fetchState,onCancelClick:()=>Rt(!1),onSubmitClick:M=>{e.chargeCard&&v(fe,M)}}),ai&&e.chargeCard!=null?t.jsx(To,{controllerEmails:n,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:I,isDebitCardSetupEnabled:$,isChargeCardSetupEnabled:j,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,cardDetail:e.chargeCard,transactionStatistics:e.transactionStatistics,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,signedInUser:V,isDebitCard:Ie,cardIssuedByRoles:Z,cardHolderRoles:_,loggedInUserRole:oe,cardIssuedByDepartmentName:J,cardHolderDepartmentName:T,classListFetchState:h,currentLimitAmount:e.chargeCard?.limit??{amount:0,currencyCode:Le.currency.countryCode,currencySymbol:Le.currency.currencySymbol},currentSpentAmount:e.chargeCard?.balance??{amount:0,currencyCode:Le.currency.countryCode,currencySymbol:Le.currency.currencySymbol},maxLimitAmount:Ie?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit:e.creditAccount.limit,isDisabled:Ie&&e.depositAccountLimitFetchState.fetchState!=="Completed",updateLimitFetchState:e.updateChargeCardLimitFetchState.fetchState,onCancelClick:()=>St(!1),onSubmitClick:M=>{if(e.chargeCard){const we={amount:M,currencyCode:e.chargeCard.limit.currencyCode,currencySymbol:e.chargeCard.limit.currencySymbol};Me(e.chargeCard.id,we,e.chargeCard.creditLimitFrequency,_e("0,0.[00]",we))}},recommendations:e?.chargeCard?.recommendations}):null,e.fetchState==="Error"?t.jsxs(Nc,{windowSize:de,children:[t.jsx(Uc,{onClick:B,"data-testid":X("reload-card-detail"),children:t.jsx(Zc,{})}),t.jsx(_c,{children:Le.reloadPage.label})]}):t.jsxs(Ec,{children:[t.jsx(Gn,{controllerEmails:n,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:I,isDebitCardSetupEnabled:$,isChargeCardSetupEnabled:j,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,isDebitCard:Ie,chargeCardCashbackDetailState:D,cardIssuedByRoles:Z,cardIssuedByDepartmentName:J,cardHolderRoles:_,cardHolderDepartmentName:T,classListFetchState:h,chargeCardDetailView:e,spent:$a,isCardNotPending:Mt,cardOwnerName:zt,appleWalletLink:Q,googleWalletLink:ie,addressToShow:xa,secretRevealed:pa,isOwnCard:He,vgsVaultId:c,showSecretInfo:et,isSandboxEnv:q,isCardDetailErrored:ua,signedInUserToken:U,selectedColor:ya,cardDetailsFetchState:Ca,setCardDetailsFetchState:fa,setIsCardDetailErrored:ma,setSecretRevealed:Et,isCardDetailFetching:ka,handleColorCodeClick:va,onFireOnClickAnalytics:te,setShowPhoneNumberPopup:ha,setShowChangeSpendLimitPopup:St,setShowSecretInfo:Ft,isOwnerNameCopied:me,isAddressCopied:At,onOwnerNameCopyClick:()=>{te("card owner copied"),Kt({chargeCardDetailView:e,chargeCardCashbackDetailState:D,isChargeCardFeatureEnabled:S,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ie,isChargeCardAdmin:fe,analytics:nt,controllerEmails:n,actionField:"Card Owner",actionDetails:zt}),st(zt),lt(!0)},onAddressCopyClick:()=>{te("billing address copied"),Kt({chargeCardDetailView:e,chargeCardCashbackDetailState:D,isChargeCardFeatureEnabled:S,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ie,isChargeCardAdmin:fe,analytics:nt,controllerEmails:n,actionField:"Billing Address",actionDetails:Sa}),st(Sa),la(!0)},showUpdateSpendLimitAction:pi,onUnlockChargeCard:i}),z?ui?t.jsxs(Pc,{windowSize:de,children:[t.jsx(Xc,{}),t.jsx(Vc,{children:` ${ce.payEarly.paymentOf} ${_e("0,0.[00]",e.creditAccountRepayment.initiatedRepayments)} ${ce.payEarly.madeOn} ${e.creditAccountRepayment.initiatedRepaymentDate?.format(Fc.visual.MMMDFormat)} ${ce.payEarly.isProcessing} ${ce.payEarly.theCompanyCreditLimitWillUpdateIn23BusinessDays}`})]}):Pt?fe?t.jsxs(Jr,{onClick:()=>{ue(!0)},windowSize:de,children:[t.jsx(ur,{windowSize:de}),t.jsxs(Bc,{children:[t.jsx(mr,{children:ce.payEarly.transactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLow}),t.jsxs(Oc,{className:"pay-now-button",children:[ce.payEarly.payNow,t.jsx(Mc,{})]})]})]}):t.jsxs(zc,{windowSize:de,children:[t.jsx(ur,{windowSize:de}),t.jsx(Wc,{children:t.jsx(mr,{children:ce.payEarly.yourTransactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLowWeHaveNotifiedYourAdmin})})]}):null:null,He&&de!=="small"&&Mt&&Ie===!1?t.jsx(Ao,{style:{marginTop:Pt?a.sp5:a.sp4},classListFetchState:h,controllerEmails:n,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:I,isDebitCardSetupEnabled:$,isChargeCardSetupEnabled:j,chargeCardDetailView:e,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,cardIssuedByRoles:Z,cardHolderRoles:_,cardIssuedByDepartmentName:J,cardHolderDepartmentName:T,isDebitCard:Ie,appleWalletLink:Q,googleWalletLink:ie,setWalletType:di,setIsAddToWalletDrawerOpen:ga,showDrawerAnimation:wa}):null,t.jsxs(sl,{windowSize:de,isOwnCard:He,isMobileOrTabletScreen:ja,children:[Mt&&e.transactions.length>0?t.jsxs(t.Fragment,{children:[t.jsxs(qc,{windowSize:de,children:[ce.cardDetails.transactionListTitle,t.jsx(Qt,{display:"flex",placement:"right",title:t.jsx(Jc,{children:ce.cardDetails.transactionListTooltip.replace("__receiptRequiredAboveAmount__",e.chargeCardConfig.receiptRequiredAboveAmount.amount.toString())}),children:t.jsx(Kc,{})})]}),t.jsxs(Qc,{windowSize:de,children:[t.jsx(rl,{windowSize:de,children:t.jsx(il,{})}),t.jsxs(Yc,{windowSize:de,children:[t.jsxs(el,{children:[t.jsx(Hc,{children:ce.aiCardAgentText}),Le.strings.space,ce.receiptBotMessage,Le.strings.space]}),t.jsxs(al,{"data-testid":X("charge-card-detail-copy-email"),onClick:()=>{Kt({chargeCardDetailView:e,chargeCardCashbackDetailState:D,isChargeCardFeatureEnabled:S,productInformation:E,cashbackInformation:y,creditAccountInformation:O,debitAccountInformation:H,creditAccount:k,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Ie,isChargeCardAdmin:fe,analytics:nt,controllerEmails:n,actionField:"Receipt Email",actionDetails:e.chargeCardConfig.receiptBotEmail}),st(e.chargeCardConfig.receiptBotEmail),ft(!0)},onMouseEnter:()=>wt(!0),onMouseLeave:()=>wt(!1),children:[t.jsx(tl,{children:e.chargeCardConfig.receiptBotEmail}),Fe===!0?t.jsxs(Cr,{children:[t.jsx(nl,{}),t.jsx(gr,{children:t.jsx(fr,{shouldDisplay:dt||Fe,color:d.primaryDark,children:Le.copyToClipBoard.copied})})]}):t.jsxs(Cr,{children:[t.jsx(ol,{color:dt?ot.colors.primary:void 0}),t.jsx(gr,{children:t.jsx(fr,{shouldDisplay:dt&&de!=="small",children:Le.copyToClipBoard.copy})})]})]})]})]})]}):null,t.jsx(Od,{cardStatusCode:e.chargeCard?.status.code,cardCodeType:e.chargeCard?.type.code,cardId:C,documentAiReceiptMaxSizeLimit:ne,uploadReceiptsFetchStateByTransactionId:e.uploadReceiptsFetchStateByTransactionId,isSnackbarOpen:ee,uploadReceiptsShowTickByTransactionId:e.uploadReceiptsShowTickByTransactionId,isViewReceiptClickedImmediatelyAfterUploadTransactionId:e.isViewReceiptClickedImmediatelyAfterUploadTransactionId,receiptRequiredAboveAmount:e.chargeCardConfig.receiptRequiredAboveAmount,cardsEndPoint:m,transactionAttachmentsEndpointToFetch:x,transactionAttachmentEndpointToDownload:p,authParams:f,hideSorting:g,transactions:e.transactions,cardHolderUser:e.chargeCard?.cardHolderUser,uiState:e.uiState,fetchState:e.transactionListFetchState.fetchState,isAiCategorizationEnabledForCardsTransactions:e.chargeCardConfig.isAiCategorizationEnabledForCardsTransactions,onReloadTransactions:B,onFetchChargeCardTransactionList:Y,isOwnCard:He,onColumnSortConfigChanged:le,removeSnackbar:Ze,onChargeCardTransactionRowClick:he,onUpdateScrollYOffset:Ge,onUploadReceiptComplete:re,updateChargeCardTransactionAttachments:ve,updateChargeCardTransactionUploadReceiptsFetchStatus:Re,updateChargeCardTransactionReceiptsShowTick:Se,updateChargeCardTransactionIsViewReceiptClicked:b})]})]})]})},Kt=({chargeCardDetailView:e,chargeCardCashbackDetailState:i,isChargeCardFeatureEnabled:s,productInformation:m,cashbackInformation:h,creditAccountInformation:x,debitAccountInformation:p,creditAccount:f,creditAccountRepayment:g,isDebitCard:C,isChargeCardAdmin:c,analytics:n,controllerEmails:w,actionDetails:S,actionField:I})=>{e.chargeCard==null||i.fetchState!=="Completed"||s&&(f.fetchState!=="Completed"||g.fetchState!=="Completed")||C&&c&&e.depositAccountLimitFetchState.fetchState!=="Completed"||n.trackCardsCopyIconClick(w,m,"Cards Detail","Copy","copied",I,S,h,x,p)},Ec=r.div``,Jr=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})=>Ae.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>Ae.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${a.sp1};
+  align-items: start;
+  cursor: pointer;
+  :hover {
+    .pay-now-button {
+      text-decoration: underline;
+    }
+  }
+`,zc=r(Jr)``,Pc=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})=>Ae.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>Ae.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${a.sp2};
+`,ur=r(Ii)`
+  color: ${e=>e.theme.colors.grey5};
+  margin-right: ${({windowSize:e})=>Ae.styledHighImportanceIconMarginRight.valuePx(e)};
+  min-width: ${a.sp4};
+  width: ${a.sp4};
+  height: ${a.sp4};
+  path:nth-child(2),
+  path:nth-child(3) {
+    stroke: ${d.important};
+  }
+`,Mc=r(Di)`
+  color: ${e=>e.theme.colors.grey5};
+  min-width: 12px;
+  width: 12px;
+  height: 12px;
+`,mr=r(ta)`
+  color: ${e=>e.theme.colors.grey5};
+`,Vc=r(ta)`
+  color: ${d.brandColorGoldDark};
+`,Oc=r(kr)`
+  color: ${e=>e.theme.colors.grey5};
+  gap: ${a.sp1};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+`,Hc=r(Fi)`
+  color: ${e=>e.theme.colors.brandColorSapphire};
+  ${({theme:e})=>e.mode==="dark"&&`color: ${d.brandColorPearl};`}
+`,Nc=r.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - ${e=>ji.valuePx(e.windowSize)});
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${e=>e.theme.colors.grey5};
+`,Bc=r.div``,Wc=r.div``,Uc=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};
+    }
+  }
+`,_c=r(ea)`
+  margin-top: ${a.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Zc=r(br)`
+  height: ${a.sp5};
+  width: ${a.sp5};
+  margin: ${a.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Gc=r.div`
+  background: ${e=>e.theme.colors.grey4};
+`,Yc=r.div`
+  width: 100%;
+  max-width: ${e=>e.windowSize==="small"?"calc(100% - 20px)":"unset"};
+`,qc=r(aa)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${a.sp3};
+  display: flex;
+  align-items: center;
+  margin-right: ${e=>Ae.bottomContentContainerPadding.valuePx(e.windowSize)};
+  margin-left: ${e=>Ae.bottomContentContainerPadding.valuePx(e.windowSize)};
+`,Kc=r(vr)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${a.sp3};
+  height: ${a.sp3};
+  margin-left: ${a.sp2};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Xc=r(vr)`
+  color: ${d.brandColorGoldDark};
+  min-width: ${a.sp4};
+  width: ${a.sp4};
+  height: ${a.sp4};
+`,Jc=r(pe)`
+  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;
+`,Qc=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=>Ae.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
+`,el=r(ta)`
+  color: ${e=>e.theme.colors.primary};
+`,tl=r(kr)`
+  color: ${e=>e.theme.colors.primary};
+`,al=r.span`
+  cursor: pointer;
+`,gr=r.span`
+  position: absolute;
+  bottom: -${a.sp5};
+  z-index: 10;
+  left: ${a.sp2};
+`,Cr=r.span`
+  position: relative;
+  margin-left: ${a.sp1};
+  top: 2px;
+`,fr=r(pe)`
+  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"};
+`,rl=r.div`
+  width: ${e=>Ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  min-width: ${e=>Ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  height: ${e=>Ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  top: ${a.sp1};
+  position: ${e=>e.windowSize==="small"?"relative":"static"};
+`,il=r(Ri)`
+  color: ${e=>e.theme.colors.brandColorJade};
+  width: 100%;
+  height: 100%;
+`,ol=r(jr)`
+  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};
+  }
+`,nl=r(mt)`
+  height: ${a.sp3};
+  width: ${a.sp3};
+  color: ${d.success};
+`,sl=r.div`
+  padding-top: ${e=>e.isOwnCard?e.isMobileOrTabletScreen?a.sp3:a.sp4:a.sp5};
+  padding-bottom: ${a.sp4};
+`;export{kl as default};