@zeniai/web-components 3.16.52 → 3.16.54

package/dist/ChargeCardDetailPage-Cc2qhtki.cjs

@@ -0,0 +1,1462 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-DHyNpoQL.cjs"),i=require("react"),s=require("@emotion/styled"),Qe=require("@zeniai/client-epic-state"),t=require("./index-HHa907Xt.cjs"),Ms=require("./MoreMenuButton-Buo_hSZI.cjs"),me=require("@emotion/react"),Is=require("./NavigationDots-BherPAuo.cjs"),we=require("./ChargeCardUtils-DCk3-Yfz.cjs"),Ye=require("./add-to-wallet-BjCX6PYO.cjs"),Ws=require("./spend-limit-K8ydp2My.cjs"),Bs=require("./CardNumberSubText-rXUXCTWd.cjs"),po=require("./common-BO29DFxZ.cjs"),Uo=require("react-dom"),Yo=require("./uploadReceipts-CkrY2t46.cjs"),dt=require("./LockCardPage-XzoMC8xO.cjs");function Hs(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const L=Hs(i),Do=t.appLocale.getLocalizedStrings().spendManagement.chargeCard,Ns=({controllerEmails:e,classListFetchState:n,isChargeCardFeatureEnabled:a,isDebitCardFeatureEnabled:c,isDebitCardSetupEnabled:d,isChargeCardSetupEnabled:h,chargeCardDetailView:l,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:C,creditAccountRepayment:r,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:R,cardHolderDepartmentName:f,appleWalletLink:$,googleWalletLink:b,style:p,showDrawerAnimation:P,setWalletType:y,setIsAddToWalletDrawerOpen:A,isDebitCard:H})=>{const N=t.useToolkitContext().analytics,{isIPadScreen:D}=t.useIPadDeviceDetect(),{isAndroidScreen:Z}=t.useAndroidDeviceDetect(),T=t.useGlobalInfoContext(),Y=Qe.hasChargeCardAdminLevelAccess(T.loggedInUserRoleMap);return o.jsxRuntimeExports.jsx(Fs,{style:p,children:D===!0?o.jsxRuntimeExports.jsx(Pt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:Y,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:R,cardHolderDepartmentName:f,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",productInformation:m,creditAccountInformation:u,debitAccountInformation:S,isChargeCardFeatureEnabled:a,creditAccount:C,creditAccountRepayment:r}),window.open($,"_blank")}}):Z===!0?o.jsxRuntimeExports.jsx(kt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:Y,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:R,cardHolderDepartmentName:f,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",productInformation:m,creditAccountInformation:u,debitAccountInformation:S,isChargeCardFeatureEnabled:a,creditAccount:C,creditAccountRepayment:r}),window.open(b,"_blank")}}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Pt,{onClick:()=>{y("apple"),P.current="slide-in-right-to-left-add-to-wallet",we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:Y,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:R,cardHolderDepartmentName:f,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:a,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:C,creditAccountRepayment:r}),A(!0)}}),o.jsxRuntimeExports.jsx(kt,{onClick:()=>{y("google"),P.current="slide-in-right-to-left-add-to-wallet",we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:Y,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:R,cardHolderDepartmentName:f,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:a,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:C,creditAccountRepayment:r}),A(!0)}})]})})},kt=({onClick:e})=>{const n=o.useTheme();return o.jsxRuntimeExports.jsx(t.Button,{prefixIcon:o.jsxRuntimeExports.jsx(Os,{}),label:Do.cardDetails.addToGoogleWallet,buttonColors:{borderColor:{default:n.colors.grey1,hover:n.colors.primary,disabled:n.colors.primary},backgroundColor:{default:n.colors.grey5,hover:n.colors.grey5,disabled:n.colors.grey5},textColor:{default:n.colors.primary,hover:n.colors.primary,disabled:n.colors.grey5}},textStyle:{color:n.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":t.generateDataTestId("add-to-google-wallet-button")})},Pt=({onClick:e})=>{const n=o.useTheme();return o.jsxRuntimeExports.jsx(t.Button,{prefixIcon:o.jsxRuntimeExports.jsx(_s,{}),label:Do.cardDetails.addToAppleWallet,buttonColors:{borderColor:{default:n.colors.grey1,hover:n.colors.primary,disabled:n.colors.primary},backgroundColor:{default:n.colors.grey5,hover:n.colors.grey5,disabled:n.colors.grey5},textColor:{default:n.colors.primary,hover:n.colors.primary,disabled:n.colors.grey5}},textStyle:{color:n.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":t.generateDataTestId("add-to-apple-wallet-button")})},Fs=s.div`
+  margin-top: ${t.Space.sp4};
+  display: flex;
+  justify-content: center;
+  gap: ${t.Space.sp5};
+`,Os=s(Ye.SvgGoogleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp5};
+`,_s=s(Ye.SvgAppleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp5};
+`,Gs=[t.Colors.brandColorSapphire,t.Colors.brandColorJade,t.Colors.graphColor01,t.Colors.graphColor08,t.Colors.graphColor12,t.Colors.graphColor15,t.Colors.graphColor16Dark,t.Colors.graphColor23Dark,t.Colors.graphColor32Dark,t.Colors.graphColor34Dark,t.Colors.brandColorOpalDark,t.Colors.brandColorRuby],Zs=t.appLocale.getLocalizedStrings().spendManagement.chargeCard,qs=({isColorPaletteVisible:e,hasBorderShadow:n,leftTransitionValue:a,colorInState:c,styles:d,colorPaletteTitleStyles:h,ColorListStyles:l,coloredCircleStyles:m,closeStyles:u,tickStyles:S,toggleColorPaletteVisibility:C,handleColorClick:r})=>o.jsxRuntimeExports.jsxs(Us,{showColorPalette:e,style:d,hasBorderShadow:n,leftTransitionValue:a,children:[o.jsxRuntimeExports.jsxs(Ds,{style:h,children:[o.jsxRuntimeExports.jsx(Ks,{children:Zs.cardDetails.cardTheme}),o.jsxRuntimeExports.jsx(Xs,{style:u,"data-testid":t.generateDataTestId("close-color-palette"),onClick:x=>{x.stopPropagation(),C(!e)}})]}),o.jsxRuntimeExports.jsx(Ys,{style:l,children:Gs.map((x,g)=>o.jsxRuntimeExports.jsx(Qs,{style:m,coreColor:x,onMouseEnter:()=>r(new o.Color(x),!1),onMouseLeave:()=>c!=null?r(new o.Color(c),!1):null,"data-testid":t.generateDataTestId("color-palette-item-cards",g.toString()),onClick:()=>r(new o.Color(x),!0),children:new o.Color(x).toString()===c?.toString()?o.jsxRuntimeExports.jsx(Js,{style:S}):null},x))})]}),Us=s.div`
+  display: flex;
+  top: ${t.Space.sp1};
+  max-width: 78%;
+  left: ${e=>e.showColorPalette?e.hasBorderShadow?t.Space.sp1:t.Space.sp0:`${e.leftTransitionValue}px`};
+  transition: left 0.3s ease-in;
+  flex-direction: column;
+  background: ${t.Colors.neutralGrey5Light};
+  border-top-left-radius: ${t.Space.sp1};
+  border-bottom-left-radius: ${t.Space.sp1};
+  position: absolute;
+  height: ${`calc(100% - ${t.Space.sp2})`};
+  z-index: 1;
+`,Ys=s.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: ${t.Space.sp0} 38px ${t.Space.sp0} 31px;
+`,Ds=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${t.Space.sp5} ${t.Space.sp5} ${t.Space.sp2} ${t.Space.sp5};
+`,Ks=s(t.SmallRegular)`
+  color: ${t.Colors.brandColorOnyx};
+`,Xs=s(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,Js=s(t.SvgTick)`
+  width: ${t.Space.sp3};
+  color: ${t.Colors.neutralGrey5Light};
+`,Qs=s.div`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  display: flex;
+  background: ${e=>e.coreColor};
+  border-radius: 50%;
+  margin: ${t.Space.sp2};
+  justify-content: center;
+  align-items: center;
+`,{spendManagement:Vs,common:Ue,dateFormat:en}=t.appLocale.getLocalizedStrings(),Ze=Vs.chargeCard,be={secretCardNumberWrapperWidth:280,secretCVVWrapperHeight:30,secretCVVWrapperWidth:t.sp[7],cardNumberCopiedSectionTop:54,cvvCopiedSectionTop:34,cvvCopiedSectionLeft:t.sp[3],maskedCardNumberMarginTop:new t.ResponsiveSized(-2,-2,-2,t.sp[0]),expiryCopySectionTop:34,cardNumberCopyBtnTop:21},uo={CardInfoTitleSize:new t.ResponsiveSized(t.textStyles.extraSmallRegular.fontSizeValue,t.textStyles.smallRegular.fontSizeValue),CardInfoTitleLineHeight:new t.ResponsiveSized(18,18,18,21)},Rt=e=>o.jsxRuntimeExports.jsxs(fn,{style:{...e},children:[o.jsxRuntimeExports.jsx(Cn,{}),o.jsxRuntimeExports.jsx(yn,{style:{background:t.Colors.blackColor,color:t.Colors.primaryDark,padding:`2px ${t.Space.sp2}`,borderRadius:t.Space.sp1},children:Ue.copyToClipBoard.copied})]}),mo=({isSandboxEnv:e,sourceId:n,showSecretInfo:a,secretRevealed:c,vgsVaultId:d,controllerEmails:h,isChargeCardFeatureEnabled:l,productInformation:m,cashbackInformation:u,creditAccountInformation:S,debitAccountInformation:C,chargeCardCashbackDetailState:r,creditAccount:x,creditAccountRepayment:g,isDebitCard:R,depositAccountLimitFetchState:f,isCardDetailErrored:$,isCardColorUpdating:b,cardDetailsFetchState:p,isCardColorUndefined:P,cardInfoTitleStyles:y,styles:A,cvvSecStyles:H,chargeCard:w,token:N,setSecretRevealed:D,setIsCardDetailErrored:Z,setCardDetailsFetchState:T,onFireOnClickAnalytics:Y})=>{const Q=t.useToolkitContext().analytics,[,K]=t.useCopyToClipboard(),B=t.useWindowSizeContext(),[F,V]=i.useState(!1),[X,oe]=i.useState(!1),[se,k]=i.useState(!1),ae=t.useGlobalInfoContext(),_=Qe.hasChargeCardAdminLevelAccess(ae.loggedInUserRoleMap),[G]=t.useScript("https://js.verygoodvault.com/vgs-show/2.0.0/show.js"),j=n==="addToWalletDrawer"?.75:B==="small"?.85:1,O=e?"sandbox":"live";i.useEffect(()=>{if(G&&w!=null&&a&&N!=null&&!c){const v=window.VGSShow.create(d).setEnvironment(O),le=w.cardProviderID,ee=v.request({name:"data-text",method:"GET",path:"/cards/"+le+"/secure-data/cvv2",headers:{Authorization:"Bearer "+N},htmlWrapper:"text",jsonPathSelector:"data.attributes.cvv2"});T({cvv:!0,number:!0}),ee.render(`#SecretCvv-${n}`,{"@font-face":{"font-family":t.fonts["PT Mono"],"font-style":"normal","font-weight":t.FontWeight.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":t.fonts["PT Mono"],opacity:.7,color:t.Colors.brandColorOnyx,fontSize:`${j*t.textStyles.h6Regular.fontSizeValue}px`,fontWeight:t.textStyles.h6Regular.fontWeight,borderRadius:t.Space.sp1,cursor:"pointer",padding:`${t.Space.sp0} ${t.Space.sp1}`,lineHeight:`${j*t.textStyles.h6Regular.lineHeightValue}px`}),ee.on("requestSuccess",()=>{D(!0),Z(!1),T({...p,cvv:!1})}),ee.on("requestFail",()=>{Z(!0),T({...p,cvv:!1});const re=document.getElementById(`SecretCvv-${n}`);for(;re?.hasChildNodes()===!0;)re.removeChild(re.children[0])}),v.copyFrom(ee,{text:Ue.strings.empty},re=>{re==="success"?(oe(!0),Y("CVV copied"),r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(R&&_)||f==="Completed")&&Q.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","CVV","",u,S,C)):oe(!1)}).render(`#CvvCopyBtn-${n}`,{cursor:"pointer",height:`${j*be.secretCVVWrapperHeight}px`,width:`${j*be.secretCVVWrapperWidth}px`});const ge=v.request({name:"data-text",method:"GET",path:"/cards/"+le+"/secure-data/pan",headers:{Authorization:"Bearer "+N},htmlWrapper:"text",jsonPathSelector:"data.attributes.pan",serializers:[v.SERIALIZERS.replace("(\\d{4})(\\d{4})(\\d{4})(\\d{4})","$1 $2 $3 $4")]});ge.render(`#SecretCardNumber-${n}`,{"@font-face":{"font-family":t.fonts["PT Mono"],"font-style":"normal","font-weight":t.FontWeight.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":t.fonts["PT Mono"],opacity:.7,color:t.Colors.brandColorOnyx,fontSize:`${j*t.textStyles.h6Regular.fontSizeValue}px`,fontWeight:t.textStyles.h6Regular.fontWeight,borderRadius:t.Space.sp1,cursor:"pointer",padding:`${t.Space.sp0} ${t.Space.sp1}`,lineHeight:`${j*t.textStyles.h6Regular.lineHeightValue}px`}),ge.on("requestSuccess",()=>{D(!0),Z(!1),T({...p,number:!1})}),ge.on("requestFail",()=>{Z(!0),T({...p,number:!1});const re=document.getElementById(`SecretCardNumber-${n}`);for(;re?.hasChildNodes()===!0;)re.removeChild(re.children[0])}),v.copyFrom(ge,{text:Ue.strings.empty,serializers:[v.SERIALIZERS.replace(Ue.strings.space,Ue.strings.empty)]},re=>{re==="success"?(V(!0),Y("card number copied"),r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(R&&_)||f==="Completed")&&Q.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","Card Number","",u,S,C)):V(!1)}).render(`#CardNumberCopyBtn-${n}`,{cursor:"pointer",height:`${j*t.textStyles.h6Regular.lineHeightValue}px`,width:`${j*be.secretCardNumberWrapperWidth}px`})}},[G,w,a,N,c]),i.useEffect(()=>{if(a===!1){const v=document.getElementById(`SecretCvv-${n}`);for(;v?.hasChildNodes()===!0;)v.removeChild(v.children[0]);const le=document.getElementById(`CvvCopyBtn-${n}`);for(;le?.hasChildNodes()===!0;)le.removeChild(le.children[0]);const ee=document.getElementById(`SecretCardNumber-${n}`);for(;ee?.hasChildNodes()===!0;)ee.removeChild(ee.children[0]);const M=document.getElementById(`CardNumberCopyBtn-${n}`);for(;M?.hasChildNodes()===!0;)M.removeChild(M.children[0])}},[n,a]),i.useEffect(()=>{F===!0&&setTimeout(()=>{V(!1)},800),X===!0&&setTimeout(()=>{oe(!1)},800),se===!0&&setTimeout(()=>{k(!1)},800)},[F,X,se]);const ne=w!=null?Qe.dateFromYearMonthDate(w.validThru.year,w.validThru.month-1).format(en.visual.MMSlashYYFormat):Ue.strings.empty,q=v=>{a===!0&&(p.cvv!==!0||p.number!==!0)&&(Y("validity copied"),v!=null&&r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(R&&_)||f==="Completed")&&Q.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","Valid Thru",ne,u,S,C),K(ne),k(!0))};return o.jsxRuntimeExports.jsxs(cn,{style:A,children:[o.jsxRuntimeExports.jsxs(dn,{children:[o.jsxRuntimeExports.jsx(wt,{style:y,windowSize:B,children:Ze.cardDetails.cardNumber}),o.jsxRuntimeExports.jsx(pn,{sourceId:n,scaleFactor:j,showSecretInfo:a&&(p.number===!1||p.cvv===!1),isCardDetailFetching:p.number===!0||p.cvv===!0||P||b,windowSize:B,children:`${Ze.cardDetails.cardNumberHideout}
+          ${w?.accountLast4??Ue.strings.empty}`}),o.jsxRuntimeExports.jsxs(tn,{secretRevealed:c,scaleFactor:j,showSecretInfo:a&&p.cvv===!1&&p.number===!1,sourceId:n,isCardDetailErrored:$,children:[o.jsxRuntimeExports.jsx(on,{sourceId:n,scaleFactor:j,secretRevealed:c,id:`SecretCardNumber-${n}`}),o.jsxRuntimeExports.jsx(ln,{secretRevealed:c,scaleFactor:j,id:`CardNumberCopyBtn-${n}`,sourceId:n}),F===!0?o.jsxRuntimeExports.jsx(Rt,{top:j*be.cardNumberCopiedSectionTop}):null]})]}),o.jsxRuntimeExports.jsxs(un,{children:[o.jsxRuntimeExports.jsxs(hn,{children:[o.jsxRuntimeExports.jsx(wt,{style:y,windowSize:B,children:Ze.cardDetails.expiry}),o.jsxRuntimeExports.jsxs(rn,{secretRevealed:a&&(p.cvv===!1||p.number===!1),children:[c&&a&&p.cvv===!1&&p.number===!1?o.jsxRuntimeExports.jsx(Sn,{sourceId:n,scaleFactor:j,windowSize:B,secretRevealed:c&&a,"data-testid":t.generateDataTestId("expiry-date-copy"),onClick:v=>{v.stopPropagation(),q(w)},children:c&&a&&p.cvv===!1&&p.number===!1?ne:Ze.cardDetails.expiryHideOut}):o.jsxRuntimeExports.jsx(gn,{sourceId:n,windowSize:B,scaleFactor:j,isCardDetailFetching:p.cvv===!0||p.number===!0||P||b,children:Ze.cardDetails.expiryHideOut}),se===!0?o.jsxRuntimeExports.jsx(Rt,{top:j*be.expiryCopySectionTop,width:"auto"}):null]})]}),o.jsxRuntimeExports.jsxs(mn,{style:H,children:[o.jsxRuntimeExports.jsx(wt,{style:y,windowSize:B,children:Ze.cardDetails.cvv}),o.jsxRuntimeExports.jsx(xn,{sourceId:n,scaleFactor:j,showSecretInfo:a&&p.cvv===!1&&p.number===!1,isCardDetailFetching:p.number===!0||p.cvv===!0||P||b,windowSize:B,children:Ze.cardDetails.cvvHideOut}),o.jsxRuntimeExports.jsxs(sn,{secretRevealed:c,sourceId:n,showSecretInfo:a&&p.cvv===!1&&p.number===!1,isCardDetailErrored:$,children:[o.jsxRuntimeExports.jsx(nn,{scaleFactor:j,secretRevealed:c,sourceId:n,id:`SecretCvv-${n}`}),o.jsxRuntimeExports.jsx(an,{windowSize:B,scaleFactor:j,secretRevealed:c,id:`CvvCopyBtn-${n}`,sourceId:n}),X===!0?o.jsxRuntimeExports.jsx(Rt,{top:j*be.cvvCopiedSectionTop,width:"auto"}):null]})]})]})]})},tn=s.div`
+  display: ${e=>e.showSecretInfo?"block":"none"};
+  height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  width: ${e=>e.secretRevealed?e.scaleFactor*be.secretCardNumberWrapperWidth:t.sp[0]}px;
+  overflow: hidden;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":t.Colors.neutralGrey5Light};
+    border-radius: ${t.Space.sp1};
+  }
+`,on=s.div`
+  min-height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"100%":t.Space.sp0};
+  overflow: hidden;
+  position: relative;
+`,sn=s.div`
+  display: ${e=>e.showSecretInfo?"flex":"none"};
+  height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  min-height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  width: ${e=>e.secretRevealed?be.secretCVVWrapperWidth:t.sp[0]}px;
+  position: relative;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":t.Colors.neutralGrey5Light};
+    border-radius: ${t.Space.sp1};
+  }
+`,nn=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?be.secretCVVWrapperWidth*e.scaleFactor:t.Space.sp0};
+  overflow: hidden;
+`,rn=s.div`
+  position: relative;
+  padding: ${t.Space.sp0} ${t.Space.sp1};
+  &:hover {
+    background: ${e=>e.secretRevealed?t.Colors.neutralGrey5Light:"transparent"};
+    border-radius: ${t.Space.sp1};
+  }
+`,an=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":t.Space.sp0};
+  position: absolute;
+  top: ${t.Space.sp0};
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,ln=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":t.Space.sp0};
+  position: absolute;
+  top: ${e=>e.scaleFactor*be.cardNumberCopyBtnTop}px;
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,cn=s.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${t.Space.sp4} ${t.Space.sp0} ${t.Space.sp4} ${t.Space.sp5};
+  width: 75%;
+  gap: ${t.Space.sp4};
+`,dn=s.div`
+  position: relative;
+  width: max-content;
+`,wt=s(t.SmallRegular)`
+  padding-left: ${t.Space.sp1};
+  color: ${t.Colors.brandColorPearl};
+  position: relative;
+  font-size: ${e=>uo.CardInfoTitleSize.valuePx(e.windowSize)};
+  line-height: ${e=>uo.CardInfoTitleLineHeight.valuePx(e.windowSize)};
+`,pn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.showSecretInfo===!0?"none":"block"};
+  padding-left: ${t.Space.sp1};
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  margin-top: ${e=>be.maskedCardNumberMarginTop.valuePx(e.windowSize)};
+  margin-left: -2px;
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,un=s.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: ${t.Space.sp4};
+`,mn=s.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${t.Space.sp5};
+`,xn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.showSecretInfo?"none":"block"};
+  padding-left: ${t.Space.sp1};
+  opacity: 0.7;
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,hn=s.div`
+  display: flex;
+  flex-direction: column;
+`,gn=s(t.ChargeCardNumberText)`
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,Sn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.secretRevealed?"block":"none"};
+  color: ${e=>e.theme.colors.brandColorOnyx};
+  border-radius: ${t.Space.sp1};
+  opacity: 0.7;
+  padding-left: ${e=>e.secretRevealed===!0?t.Space.sp0:t.Space.sp1};
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,Cn=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`,fn=s.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp1};
+  width: 100%;
+  justify-content: center;
+  z-index: 1;
+`,yn=s(t.SmallRegular)`
+  color: ${t.Colors.primaryDark};
+  padding: 2px ${t.Space.sp2};
+  background-color: ${t.Colors.blackColor};
+`,{common:jn,spendManagement:{chargeCard:{cardDetails:je}}}=t.appLocale.getLocalizedStrings(),he={chargeCardWidth:384,chargeCardHeight:240,cardLoadingShineWidth:200,cardLoadingShineHeight:240,zeniLogoWidth:t.sp[6],zeniLogoHeight:t.sp[6],visaLogoWidth:t.sp[6],visaLogoHeight:13,cardTintIconWidth:277,cardTintIconHeight:242,colorPaletteLeftTransitionValue:-350,rightSectionWidth:384,rightSectionHeight:240,cardContainerContentGap:new t.ResponsiveSized(t.sp[4],t.sp[4],t.sp[4],t.sp[3])},Ko=({isChargeCardAdmin:e,chargeCardDetailView:n,productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,isOwnCard:m,vgsVaultId:u,showSecretInfo:S,controllerEmails:C,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:R,chargeCardCashbackDetailState:f,creditAccount:$,creditAccountRepayment:b,isShowingInDrawer:p,isSandboxEnv:P,isCardDetailErrored:y,signedInUserToken:A,selectedColor:H,cardDetailsFetchState:w,setCardDetailsFetchState:N,setIsCardDetailErrored:D,setShowSecretInfo:Z,setSecretRevealed:T,setShowPhoneNumberForOtp:Y,isCardDetailFetching:te,handleColorCodeClick:Q,onFireOnClickAnalytics:K,onUnlockChargeCard:B})=>{const[F,V]=i.useState(!1),[X,oe]=i.useState(!1),[se,k]=i.useState(!1),[ae,_]=i.useState(!1),[G,j]=i.useState(!1),[O,ne]=i.useState(!1),[q,v]=i.useState(()=>{const xe=n.chargeCard?.status.code;return xe==="locked"||xe==="closed"||xe==="closed_by_customer"}),[le,ee]=i.useState(!1),[M,ge]=i.useState(!1),ce=i.useRef(void 0),re=n.chargeCard?.type.code??"business_virtual_credit_card",{isMobileOrTabletScreen:U}=t.useDeviceDetect(),J=t.useWindowSizeContext(),I=p?.75:J==="small"?.85:1,$e=n.lockChargeCardsFetchState.fetchState,ye=t.usePrevious($e),ue=n.unlockChargeCardsFetchState.fetchState,Te=t.usePrevious(ue),Ne=n.closeChargeCardsFetchState.fetchState,De=t.usePrevious(Ne),de=n.chargeCard?.status.code==="locked",E=n.chargeCard?.status.code==="closed"||n.chargeCard?.status.code==="closed_by_customer",[ie]=t.useAnimation("UnlockCard"),[z]=t.useAnimation("LockCard"),[Fe]=t.useAnimation("CloseCard");i.useEffect(()=>{if(!(X&&de)){k(!1);return}const Ae=setTimeout(()=>{k(!0)},400);return()=>clearTimeout(Ae)},[X,de]),i.useEffect(()=>{(de||E)&&!q&&(v(!0),ee(!1))},[de,E]),i.useEffect(()=>{ye==="In-Progress"&&$e==="Completed"&&(ce.current&&clearTimeout(ce.current),_(!1),v(!1),ee(!0),setTimeout(()=>{_(!0)},0),ce.current=setTimeout(()=>{_(!1),v(!0)},1e3))},[$e,ye]),i.useEffect(()=>{Te==="In-Progress"&&ue==="Completed"&&(ce.current&&clearTimeout(ce.current),ge(!0),j(!1),setTimeout(()=>{j(!0)},0),ce.current=setTimeout(()=>{j(!1),v(!1),ge(!1)},1e3))},[ue,Te]),i.useEffect(()=>{De==="In-Progress"&&Ne==="Completed"&&(ce.current&&clearTimeout(ce.current),ne(!1),v(!1),ee(!0),setTimeout(()=>{ne(!0)},0),ce.current=setTimeout(()=>{ne(!1),v(!0)},1e3))},[Ne,De]);const Oe=U?je.tapCardCopyText:je.scanNowAndAddToWallet,et=U?je.tapCardCopyText:o.jsxRuntimeExports.jsxs(wn,{children:[o.jsxRuntimeExports.jsx(Kn,{}),je.clickTheCardToFetchDetailsText]}),ke=n.chargeCard?.isLockedByAdmin??!1,Ke=J==="small"?je.tapCardCopyText:je.clickTheCardToCopyDetailsText,nt=J==="small"?je.tapCardCopyText:je.clickTheCardToFetchDetailsText,tt=p?Oe:Ke,rt=p?et:nt,Pe=te(w)||n.updateFetchState.fetchState==="In-Progress"||n.unlockChargeCardsFetchState.fetchState==="In-Progress",_e=(w.cvv!==!0||w.number!==!0)&&m,Ge=!!n.chargeCard?.type.code.includes("debit");return o.jsxRuntimeExports.jsxs(Pn,{windowSize:J,scaleFactor:I,children:[o.jsxRuntimeExports.jsxs(An,{isCardLocked:de,isChargeCardAdmin:e,isLockedByAdmin:ke,unlockFetchState:n.unlockChargeCardsFetchState.fetchState,onClick:xe=>{xe.stopPropagation(),de&&ue!=="In-Progress"&&(e||!ke)&&B(e)},onMouseEnter:()=>{(e||!ke)&&ue!=="In-Progress"&&oe(!0)},onMouseLeave:()=>{(e||!ke)&&ue!=="In-Progress"&&oe(!1)},children:[l&&p?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(qn,{}),o.jsxRuntimeExports.jsx(Un,{}),o.jsxRuntimeExports.jsx(Yn,{}),o.jsxRuntimeExports.jsx(Dn,{})]}):null,o.jsxRuntimeExports.jsx(Mn,{play:q,animate:le,fadeOut:M,unlockInProgress:ue==="In-Progress"||M||Te==="In-Progress"&&ue==="Completed"}),G&&ie!=null?o.jsxRuntimeExports.jsx(o.LottiePlayer,{style:{width:56,height:56,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},animationData:ie,loop:!1,play:G,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):O&&Fe!=null?o.jsxRuntimeExports.jsx(o.LottiePlayer,{style:{width:56,height:56,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},animationData:Fe,loop:!1,play:O,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):q?E?o.jsxRuntimeExports.jsx(On,{}):ue==="In-Progress"?o.jsxRuntimeExports.jsx(Bn,{}):M||Te==="In-Progress"&&ue==="Completed"?null:o.jsxRuntimeExports.jsx(Fn,{isHovered:X&&de,children:o.jsxRuntimeExports.jsxs(Nn,{isHovered:X&&de,children:[o.jsxRuntimeExports.jsx(Xo,{}),o.jsxRuntimeExports.jsx(Hn,{isVisible:X&&de,shouldEnterLayout:se,children:je.moreOptions.unlock})]})}):ae&&z!=null?o.jsxRuntimeExports.jsx(o.LottiePlayer,{style:{width:72,height:72,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},animationData:z,loop:!1,play:ae,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):null,re.includes("virtual")?o.jsxRuntimeExports.jsxs(In,{isShowingInDrawer:p,isOwnCard:m,scaleFactor:I,bgColor:H?.toString(),showColorPalette:F,isDebitCard:Ge,"data-testid":t.generateDataTestId("virtual-charge-card-detail"),onClick:()=>{F===!1&&m===!0&&te(w)===!1&&ue!=="In-Progress"&&de===!1&&we.triggerOtpFlowToShowCardSecretInfo({signedInUserToken:A,showSecretInfo:S,setShowPhoneNumberPopup:Y,onFireOnClickAnalytics:K,setShowSecretInfo:Z})},enableClick:_e&&!de&&!E||de&&ue!=="In-Progress",cardDetailsFetchState:Pe||n.chargeCard?.cardColorCode===void 0,children:[o.jsxRuntimeExports.jsx(ho,{scaleFactor:I,shouldAppear:Pe||n.chargeCard?.cardColorCode===void 0}),o.jsxRuntimeExports.jsx(qs,{leftTransitionValue:I*he.colorPaletteLeftTransitionValue,hasBorderShadow:!1,tickStyles:{width:"12px",height:"12px"},colorInState:n.chargeCard?.cardColorCode!=null?new o.Color(n.chargeCard.cardColorCode):void 0,styles:{height:"100%",maxWidth:"78%",top:p?"unset":t.Space.sp0,left:F?t.Space.sp0:`${I*he.colorPaletteLeftTransitionValue}px`},coloredCircleStyles:{width:t.Space.sp4,height:t.Space.sp4,margin:"unset"},colorPaletteTitleStyles:{padding:`${t.Space.sp5} ${t.Space.sp7} ${t.Space.sp3} ${t.Space.sp5}`},closeStyles:{width:t.Space.sp3,height:t.Space.sp3},ColorListStyles:{gap:t.Space.sp3},isColorPaletteVisible:F,toggleColorPaletteVisibility:xe=>{V(xe)},handleColorClick:(xe,Ae)=>{Q(xe,Ae),Ae&&V(!1)}}),o.jsxRuntimeExports.jsx(Zn,{scaleFactor:I}),o.jsxRuntimeExports.jsx(mo,{productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,setSecretRevealed:T,onFireOnClickAnalytics:K,isCardColorUndefined:n.chargeCard?.cardColorCode==null,isCardColorUpdating:n.updateFetchState.fetchState==="In-Progress",isSandboxEnv:P,cardDetailsFetchState:w,setCardDetailsFetchState:N,isCardDetailErrored:y,setIsCardDetailErrored:D,chargeCard:n.chargeCard,vgsVaultId:u,showSecretInfo:S,creditAccountRepayment:b,token:A?.token,isDebitCard:Ge,depositAccountLimitFetchState:n.depositAccountLimitFetchState.fetchState,controllerEmails:C,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:R,creditAccount:$,chargeCardCashbackDetailState:f,cardInfoTitleStyles:{...t.textStyles.extraSmallRegular.cssObject},styles:{gap:`${t.Space.sp3}`,paddingLeft:`${t.Space.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${t.Space.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),o.jsxRuntimeExports.jsxs(go,{children:[o.jsxRuntimeExports.jsxs(_n,{children:[o.jsxRuntimeExports.jsx(So,{scaleFactor:I}),o.jsxRuntimeExports.jsx(kn,{onClick:xe=>{xe.stopPropagation(),m&&V(!F)},"data-testid":t.generateDataTestId("card-color-selector"),children:m?o.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,title:je.cardColours,placement:"left",children:o.jsxRuntimeExports.jsx(xo,{isShowingInDrawer:p})}):o.jsxRuntimeExports.jsx(xo,{isShowingInDrawer:p})})]}),o.jsxRuntimeExports.jsx(bn,{scaleFactor:I})]})]}):o.jsxRuntimeExports.jsxs(Xn,{scaleFactor:I,enableClick:_e&&!de&&!E||de&&ue!=="In-Progress",isOwnCard:m,isShowingInDrawer:p,onClick:()=>{m===!0&&de===!1&&ue!=="In-Progress"&&te(w)===!1&&we.triggerOtpFlowToShowCardSecretInfo({signedInUserToken:A,showSecretInfo:S,setShowPhoneNumberPopup:Y,onFireOnClickAnalytics:K,setShowSecretInfo:Z})},"data-testid":t.generateDataTestId("physical-charge-card-detail"),children:[o.jsxRuntimeExports.jsx(ho,{scaleFactor:I,shouldAppear:Pe}),o.jsxRuntimeExports.jsxs(Jn,{flipCard:l,children:[o.jsxRuntimeExports.jsx(Qn,{children:o.jsxRuntimeExports.jsx(t.PhysicalCardView,{scaleFactor:I,isClickable:_e,isLoading:Pe,isDebitCard:Ge})}),S?o.jsxRuntimeExports.jsxs(Vn,{isDebitCard:Ge,children:[o.jsxRuntimeExports.jsx(mo,{productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,setSecretRevealed:T,onFireOnClickAnalytics:K,isCardColorUndefined:n.chargeCard?.cardColorCode==null,isCardColorUpdating:n.updateFetchState.fetchState==="In-Progress",isSandboxEnv:P,cardDetailsFetchState:w,setCardDetailsFetchState:N,isCardDetailErrored:y,setIsCardDetailErrored:D,chargeCard:n.chargeCard,vgsVaultId:u,showSecretInfo:S,token:A?.token,isDebitCard:Ge,depositAccountLimitFetchState:n.depositAccountLimitFetchState.fetchState,controllerEmails:C,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:R,creditAccount:n.creditAccount,creditAccountRepayment:b,chargeCardCashbackDetailState:f,cardInfoTitleStyles:{...t.textStyles.extraSmallRegular.cssObject},styles:{gap:`${t.Space.sp3}`,paddingLeft:`${t.Space.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${t.Space.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),o.jsxRuntimeExports.jsx(go,{children:o.jsxRuntimeExports.jsx(Gn,{children:o.jsxRuntimeExports.jsx(So,{scaleFactor:I})})})]}):null]})]})]}),E?o.jsxRuntimeExports.jsx($n,{children:je.cardClosedMessage}):ke&&!e?o.jsxRuntimeExports.jsx(vn,{children:je.cardLockedByAdminMessage}):de?o.jsxRuntimeExports.jsx(bt,{children:je.cardLockedMessage}):m===!0&&!Pe?w.cvv===!0&&w.number===!0?o.jsxRuntimeExports.jsx(Wn,{children:jn.loading}):y?o.jsxRuntimeExports.jsx(Rn,{}):o.jsxRuntimeExports.jsx(bt,{children:l?tt:rt}):Pe?o.jsxRuntimeExports.jsx(bt,{children:je.loading}):null]})},$n=s(t.SmallRegular)`
+  color: ${t.Colors.important};
+`,vn=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,Rn=()=>o.jsxRuntimeExports.jsxs(Tn,{children:[o.jsxRuntimeExports.jsx(En,{}),o.jsxRuntimeExports.jsx(Ln,{children:je.failedToFetchCardWebText})]}),wn=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,bn=s(t.SvgVisa)`
+  width: ${e=>e.scaleFactor*he.visaLogoWidth}px;
+  height: ${e=>e.scaleFactor*he.visaLogoHeight}px;
+`,En=s(t.SvgAlertRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.alert};
+`,Ln=s(t.SmallRegular)`
+  color: ${t.Colors.alert};
+`,Tn=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp1};
+`,kn=s.div`
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,xo=s.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 ${t.Colors.backgroundThemeLight};
+  border-radius: 50%;
+`,Pn=s.div`
+  min-height: ${e=>`calc(${e.scaleFactor*he.rightSectionHeight}px + ${t.Space.sp2})`};
+  min-width: ${e=>`calc(${e.scaleFactor*he.rightSectionWidth}px + ${t.Space.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>he.cardContainerContentGap.valuePx(e.windowSize)};
+`,bt=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,zn=me.keyframes`
+	0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(180%);
+  }
+`,An=s.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: ${t.Space.sp2};
+  cursor: ${e=>e.isCardLocked&&e.unlockFetchState!=="In-Progress"&&(e.isChargeCardAdmin||!e.isLockedByAdmin)?"pointer":"default"};
+`,Mn=s.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":t.Colors.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;
+`,ho=s.div`
+  z-index: 1;
+  display: ${e=>e.shouldAppear?"block":"none"};
+  content: "";
+  width: ${e=>e.scaleFactor*he.cardLoadingShineWidth}px;
+  height: ${e=>e.scaleFactor*he.cardLoadingShineHeight}px;
+  position: absolute;
+  transform: translateX(-180%);
+  animation: ${zn} 1.5s infinite;
+  background: ${me.css`linear-gradient(to right, transparent 0%, ${t.Colors.backgroundThemeLight} 50%, transparent 100%)`};
+`,go=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 25%;
+  padding: ${t.Space.sp4} ${t.Space.sp0};
+`,In=s.div`
+  background: ${e=>e.cardDetailsFetchState?t.Colors.chargeCardFaded:e.bgColor??(e.isDebitCard?e.theme.colors.graphColor15:e.theme.colors.brandColorJade)};
+  border-radius: ${t.Space.sp2};
+  width: ${e=>e.scaleFactor*he.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*he.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: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1} ${e.theme.colors.dropShadowNormal};
+  `}
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?me.css`
+            box-shadow: 1px 3px ${t.Space.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${t.Space.sp1} solid ${t.Colors.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?me.css`
+            box-shadow: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${t.Space.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,Wn=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,So=s(t.SvgZeniIconOnly)`
+  height: ${e=>e.scaleFactor*he.zeniLogoHeight}px;
+  width: ${e=>e.scaleFactor*he.zeniLogoWidth}px;
+  color: ${t.Colors.neutralGrey5Light};
+`,Xo=s(t.SvgLock)`
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  min-width: ${t.Space.sp5};
+  min-height: ${t.Space.sp5};
+  box-sizing: content-box;
+  color: ${t.Colors.neutralGrey5Light};
+`,Bn=s(Xo)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  padding: ${t.Space.sp3};
+  border-radius: ${t.Space.sp11};
+  background: ${t.Colors.lockCardOverlayBackground};
+`,Hn=s(t.LargeRegular)`
+  color: ${t.Colors.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?t.Space.sp12:t.Space.sp0};
+  width: ${e=>e.shouldEnterLayout?"auto":t.Space.sp0};
+  margin: 0;
+  margin-left: ${e=>e.shouldEnterLayout?t.Space.sp1:t.Space.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);
+`,Nn=s.div`
+  display: flex;
+  align-items: center;
+  gap: 0;
+  position: relative;
+`,Fn=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t.Space.sp3};
+  padding-right: 20px;
+  border-radius: ${t.Space.sp11};
+  background: ${e=>e.isHovered?t.Colors.lockCardOverlayBackground:"transparent"};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: background 400ms ease-in-out;
+  pointer-events: none;
+`,On=s(Ws.SvgCloseCard)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  color: ${t.Colors.important};
+  background: ${t.Colors.importantLight};
+  padding: 12px;
+  border-radius: 50%;
+`,_n=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+`,Gn=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.Space.sp4};
+`,Zn=s(t.SvgCardTint)`
+  position: absolute;
+  width: ${e=>e.scaleFactor*he.cardTintIconWidth}px;
+  height: ${e=>e.scaleFactor*he.cardTintIconHeight}px;
+  top: -1px;
+`,qn=s(Ye.SvgCornerBorderTopRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp3};
+  top: -${t.Space.sp3};
+`,Un=s(Ye.SvgCornerBorderTopLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp3};
+  top: -${t.Space.sp3};
+`,Yn=s(Ye.SvgCornerBorderBottomRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp3};
+  bottom: -${t.Space.sp3};
+`,Dn=s(Ye.SvgCornerBorderBottomLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp3};
+  bottom: -${t.Space.sp3};
+`,Kn=s(t.SvgArrowTailTop)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,Xn=s.div`
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  width: ${e=>e.scaleFactor*he.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*he.chargeCardHeight}px;
+  overflow: hidden;
+  position: relative;
+  border-radius: ${t.Space.sp2};
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?me.css`
+            box-shadow: 1px 3px ${t.Space.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${t.Space.sp1} solid ${t.Colors.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?me.css`
+            box-shadow: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${t.Space.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,Jn=s.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  transform: ${e=>e.flipCard?"rotateY(180deg)":"rotateY(0deg)"};
+`,Qn=s.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+`,Vn=s.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: ${t.Space.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);
+`,fe={contentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[4],t.sp[8],t.sp[8]),bottomContentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[8]),rightSectionWidth:new t.ResponsiveSized(343,343,343,384),rightSectionHeight:new t.ResponsiveSized(214,214,214,240),cardContainerContentGap:new t.ResponsiveSized(t.sp[2],t.sp[2],t.sp[2],t.sp[3]),ownerAddressGap:new t.ResponsiveSized(t.sp[3],t.sp[5],t.sp[5],t.sp[7]),remainingAmountContainerGap:new t.ResponsiveSized(t.sp[1],t.sp[1]),leftRightSectionGap:new t.ResponsiveSized(t.sp[0],54,54,57),styledThunderIconContainerSize:new t.ResponsiveSized(t.sp[3],t.sp[4]),emailTooltipIconContainerMarginLeft:new t.ResponsiveSized(t.sp[1],t.sp[0]),cardBalanceSectionMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[4]),barRadius:new t.ResponsiveSized(2,t.sp[2]),topSectionPaddingBottom:new t.ResponsiveSized(t.sp[4],19),rightSectionGap:new t.ResponsiveSized(t.sp[4],t.sp[3]),addressSectionHeight:new t.ResponsiveSized(109,74),addressSectionGap:new t.ResponsiveSized(t.sp[2],t.sp[4]),navigationMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[0]),addressValueGap:new t.ResponsiveSized(t.sp[0],t.sp[1]),ownerWebMinWidth:new t.ResponsiveSized(110,187)},zt={remainingAmount:new t.ResponsiveSizedStyle("largeRegular","largeMedium"),spentAmount:new t.ResponsiveSizedStyle("h5Regular","h5Regular")},{common:Be,dateFormat:ot,spendManagement:er}=t.appLocale.getLocalizedStrings(),He=er.chargeCard,tr=({chargeCardDetailView:e,spent:n,controllerEmails:a,chargeCardCashbackDetailState:c,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:h,isDebitCardSetupEnabled:l,isChargeCardSetupEnabled:m,creditAccount:u,creditAccountRepayment:S,productInformation:C,cashbackInformation:r,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:R,cardIssuedByDepartmentName:f,cardHolderRoles:$,cardHolderDepartmentName:b,classListFetchState:p,cardOwnerName:P,secretRevealed:y,appleWalletLink:A,googleWalletLink:H,isCardNotPending:w,isOwnerNameCopied:N,isAddressCopied:D,addressToShow:Z,isOwnCard:T,vgsVaultId:Y,showSecretInfo:te,isSandboxEnv:Q,isCardDetailErrored:K,signedInUserToken:B,selectedColor:F,showUpdateSpendLimitAction:V,setShowPhoneNumberPopup:X,setShowChangeSpendLimitPopup:oe,cardDetailsFetchState:se,setCardDetailsFetchState:k,setIsCardDetailErrored:ae,setShowSecretInfo:_,setSecretRevealed:G,isCardDetailFetching:j,handleColorCodeClick:O,onFireOnClickAnalytics:ne,onOwnerNameCopyClick:q,onAddressCopyClick:v,onUnlockChargeCard:le,isDebitCard:ee})=>{const M=t.useWindowSizeContext(),ce=t.useToolkitContext().analytics,re=e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate!=null?e.chargeCardConfig.rePaymentInfo.cardLimitResetDate.format(ot.visual.MMMDFormat):Qe.dateNow().startOf("month").add(1,"month").format(ot.visual.MMMDFormat),U=e.chargeCard!=null?Math.round(n.amount*100/e.chargeCard.limit.amount):0,{isIPhoneScreen:J}=t.useIPhoneDeviceDetect(),I=e.chargeCard?.type.code==="business_physical_credit_card"&&(e.chargeCard?.status.code==="inactive"||e.chargeCard?.status.code==="request_on_hold"),$e=t.useGlobalInfoContext(),ye=Qe.hasChargeCardAdminLevelAccess($e?.loggedInUserRoleMap);return o.jsxRuntimeExports.jsxs(Sr,{windowSize:M,children:[o.jsxRuntimeExports.jsxs(gr,{windowSize:M,children:[o.jsxRuntimeExports.jsxs(Cr,{windowSize:M,children:[o.jsxRuntimeExports.jsx(ir,{children:Be.texts.spent}),o.jsxRuntimeExports.jsx(jo,{children:o.jsxRuntimeExports.jsx(fr,{windowSize:M,children:t.amountToString("0,0.[00]",n)})}),o.jsxRuntimeExports.jsx(Er,{windowSize:M,children:o.jsxRuntimeExports.jsx(Tr,{style:{width:`${U}%`,borderRadius:t.Space.sp1}})}),e.chargeCard!=null?o.jsxRuntimeExports.jsxs(jo,{children:[o.jsxRuntimeExports.jsxs(Lr,{children:[o.jsxRuntimeExports.jsxs(nr,{windowSize:M,children:[o.jsxRuntimeExports.jsx($o,{windowSize:M,children:t.amountToString("0,0.[00]",e.chargeCard.available)}),o.jsxRuntimeExports.jsx(vo,{windowSize:M,children:Be.texts.remaining})]}),V?o.jsxRuntimeExports.jsxs(jr,{windowSize:M,children:[o.jsxRuntimeExports.jsx($r,{children:He.updateSpendLimitPopup.unlockSpending}),o.jsxRuntimeExports.jsx(vr,{onClick:()=>{sr({chargeCardDetailView:e,classListFetchState:p,isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S,isDebitCard:ee,productInformation:C,creditAccountInformation:x,debitAccountInformation:g,controllerEmails:a,cardIssuedByRoles:R,cardIssuedByDepartmentName:f,cardHolderRoles:$,cardHolderDepartmentName:b,analytics:ce}),oe(!0)},"data-testid":t.generateDataTestId("update-spend-limit-button"),children:He.updateSpendLimitPopup.updateSpendLimit})]}):null]}),o.jsxRuntimeExports.jsxs(yr,{windowSize:M,children:[o.jsxRuntimeExports.jsxs(ar,{children:[o.jsxRuntimeExports.jsx($o,{windowSize:M,children:t.amountToString("0,0.[00]",e.chargeCard.limit)}),o.jsxRuntimeExports.jsx(vo,{windowSize:M,children:He.cardList.slashMonth})]}),e.chargeCard.status.code!=="request_on_hold"?o.jsxRuntimeExports.jsxs(Rr,{children:[o.jsxRuntimeExports.jsx(wr,{children:Be.texts.limitReset}),o.jsxRuntimeExports.jsx(br,{children:re})]}):null]})]}):null]}),o.jsxRuntimeExports.jsx(or,{chargeCardDetailView:e,classListFetchState:p,cardOwnerName:P,addressToShow:Z,isAddressCopied:D,isOwnerNameCopied:N,onOwnerNameCopyClick:q,onAddressCopyClick:v})]}),o.jsxRuntimeExports.jsx(xr,{windowSize:M,isOwnCard:T,children:M==="small"&&!T?null:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(hr,{windowSize:M,children:I?o.jsxRuntimeExports.jsx(t.PhysicalCardView,{}):o.jsxRuntimeExports.jsx(Ko,{isChargeCardAdmin:ye,chargeCardDetailView:e,productInformation:C,cashbackInformation:r,creditAccountInformation:x,debitAccountInformation:g,creditAccount:e.creditAccount,setShowSecretInfo:_,secretRevealed:y,isOwnCard:T,isShowingInDrawer:!1,vgsVaultId:Y,showSecretInfo:te,isSandboxEnv:Q,controllerEmails:a,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:h,isDebitCardSetupEnabled:l,isChargeCardSetupEnabled:m,chargeCardCashbackDetailState:c,isCardDetailErrored:K,signedInUserToken:B,selectedColor:F,cardDetailsFetchState:se,setCardDetailsFetchState:k,setIsCardDetailErrored:ae,setSecretRevealed:G,isCardDetailFetching:j,handleColorCodeClick:O,onFireOnClickAnalytics:ne,setShowPhoneNumberForOtp:X,onUnlockChargeCard:le,creditAccountRepayment:S})}),!T&&e.chargeCard?.status.code!=="closed"&&e.chargeCard?.status.code!=="closed_by_customer"&&e.chargeCard?.status.code!=="locked"?o.jsxRuntimeExports.jsx(rr,{children:He.cardDetails.adminsCannotAccess}):null,M==="small"&&T&&w&&ee===!1?J?o.jsxRuntimeExports.jsx(Pt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:e,classListFetchState:p,analytics:ce,isDebitCard:ee,isChargeCardAdmin:ye,productInformation:C,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:R,cardIssuedByDepartmentName:f,cardHolderRoles:$,cardHolderDepartmentName:b,controllerEmails:a,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S}),window.open(A,"_blank")}}):o.jsxRuntimeExports.jsx(kt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:e,classListFetchState:p,analytics:ce,isDebitCard:ee,isChargeCardAdmin:ye,productInformation:C,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:R,cardIssuedByDepartmentName:f,cardHolderRoles:$,cardHolderDepartmentName:b,controllerEmails:a,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S}),window.open(H,"_blank")}}):null]})})]})},or=({chargeCardDetailView:e,classListFetchState:n,cardOwnerName:a,addressToShow:c,isOwnerNameCopied:d,isAddressCopied:h,onOwnerNameCopyClick:l,onAddressCopyClick:m})=>{const u=t.useWindowSizeContext(),S=o.useTheme(),[C,r]=i.useState(0),[x,g]=i.useState(!0),[R,f]=i.useState(!1),[$,b]=i.useState(!1),[p,P]=i.useState(!1);i.useEffect(()=>{const A=[setTimeout(()=>{r(1)},500),setTimeout(()=>{r(0),P(!0)},1e3),setTimeout(()=>{g(!1),P(!1)},2e3),setTimeout(()=>{g(!0),r(1)},2500),setTimeout(()=>{r(0),P(!0)},3e3),setTimeout(()=>{g(!1),P(!1)},4e3)];return()=>{A.forEach(clearTimeout)}},[]);const y=`${e.connectedAccount?.accountName} ${e.connectedAccount?.maskedAccountNumber}`;return o.jsxRuntimeExports.jsxs(lr,{children:[o.jsxRuntimeExports.jsxs(cr,{windowSize:u,children:[o.jsxRuntimeExports.jsxs(dr,{shouldBounce:p,isActive:C==0,isAutoSlide:x,windowSize:u,children:[e.chargeCard?.cardHolderUser!=null?o.jsxRuntimeExports.jsxs(Co,{windowSize:u,onClick:l,"data-testid":t.generateDataTestId("owner-name-copy-click"),onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),children:[o.jsxRuntimeExports.jsxs(pt,{children:[He.cardDetails.owner,o.jsxRuntimeExports.jsxs(Lo,{children:[o.jsxRuntimeExports.jsx(Ro,{children:d===!0?o.jsxRuntimeExports.jsx(Eo,{}):o.jsxRuntimeExports.jsx(bo,{isHover:R})}),d||R?o.jsxRuntimeExports.jsx(wo,{children:d?Be.copyToClipBoard.copied:Be.copyToClipBoard.copy}):null]})]}),o.jsxRuntimeExports.jsx(fo,{children:o.jsxRuntimeExports.jsx(Et,{children:a})})]}):null,c!=null?o.jsxRuntimeExports.jsxs(yo,{windowSize:u,onClick:m,"data-testid":t.generateDataTestId("address-copy-click"),onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),children:[o.jsxRuntimeExports.jsxs(pt,{children:[He.cardDetails.address,o.jsxRuntimeExports.jsxs(Lo,{children:[o.jsxRuntimeExports.jsx(Ro,{children:h===!0?o.jsxRuntimeExports.jsx(Eo,{}):o.jsxRuntimeExports.jsx(bo,{isHover:$})}),h||$?o.jsxRuntimeExports.jsx(wo,{children:h?Be.copyToClipBoard.copied:Be.copyToClipBoard.copy}):null]})]}),o.jsxRuntimeExports.jsx(mr,{windowSize:u,children:o.jsxRuntimeExports.jsx(t.AddressValue,{address:c,isDisabled:"readonly",style:{padding:t.Space.sp0,...t.textStyles.smallRegular.cssObject,textTransform:"capitalize",alignItems:"flex-start",backgroundColor:S.colors.grey4,cursor:"pointer",flexDirection:u==="small"?"column":"row",gap:fe.addressValueGap.valuePx(u),textAlign:u==="small"?"left":"right"}})})]}):null]}),o.jsxRuntimeExports.jsxs(pr,{isActive:C==1,isAutoSlide:x,children:[e.chargeCard?.type.code.includes("debit")===!0?o.jsxRuntimeExports.jsxs(Co,{windowSize:u,children:[o.jsxRuntimeExports.jsx(pt,{children:He.connectedAccount}),o.jsxRuntimeExports.jsxs(ur,{children:[o.jsxRuntimeExports.jsx(kr,{children:o.jsxRuntimeExports.jsx(Pr,{})}),o.jsxRuntimeExports.jsx(Et,{children:y})]})]}):null,o.jsxRuntimeExports.jsxs(yo,{windowSize:u,children:[o.jsxRuntimeExports.jsx(pt,{children:He.department}),o.jsxRuntimeExports.jsx(fo,{children:o.jsxRuntimeExports.jsx(Et,{children:n==="In-Progress"||n==="Not-Started"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):e.chargeCard?.department?.className??Be.strings.hyphen})})]})]})]}),o.jsxRuntimeExports.jsx(Is.NavigationDots,{numberOfDots:2,activeIndex:C,handleClick:r,style:{marginTop:"12px",marginBottom:fe.navigationMarginBottom.valuePx(u)},dotStyle:{width:t.Space.sp2,height:t.Space.sp2},spendManagementPromoCardActive:!0,promoColor:S.colors.primary,promoColorHover:S.colors.grey1})]})},sr=({chargeCardDetailView:e,classListFetchState:n,isChargeCardFeatureEnabled:a,creditAccount:c,creditAccountRepayment:d,isDebitCard:h,controllerEmails:l,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,cardIssuedByRoles:C,cardIssuedByDepartmentName:r,cardHolderRoles:x,cardHolderDepartmentName:g,analytics:R})=>{if(e.chargeCard!=null&&n==="Completed"&&e.transactionStatistics.fetchState==="Completed"&&(!a||c.fetchState==="Completed"&&d.fetchState==="Completed")&&(!h||e.depositAccountLimitFetchState.fetchState==="Completed")){const f=e.chargeCard.type.code.includes("physical")?e.chargeCard.cardActivationAttemptHistory[0]?.timestamp:e.chargeCard.createTime;R.trackCardsUpdateSpendLimitInitiated(l,m,{cardId:e.chargeCard.id,cardName:e.chargeCard.cardName,cardType:we.getCardTypeForAnalytics(e.chargeCard.type.code),cardCategory:e.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:t.roundAmountIfNeeded(e.chargeCard.limit.amount),cardLastFourDigits:e.chargeCard.accountLast4,cardStatus:e.chargeCard.status.code,cardAssignedDate:e.chargeCard.createTime?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:e.chargeCard.providerCardCreateTime?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:f?.format(ot.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:e.chargeCard.creditLimitFrequency.name,cardSpentAmount:t.roundAmountIfNeeded(e.chargeCard.balance.amount),cardAvailableLimit:t.roundAmountIfNeeded(e.chargeCard.available.amount),cardUtilizationPercent:we.calculateCardUtilizationPercent(e.chargeCard.limit.amount,e.chargeCard.available.amount),cardUtilizationAmount:t.roundAmountIfNeeded(we.getCardUtilizedAmount(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:t.getFullName(e.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:e.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:e.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:C,cardIssuedByDepartment:r},{cardholderName:t.getFullName(e.chargeCard.cardHolderUser,!1),cardholderEmail:e.chargeCard.cardHolderUser?.email,cardholderRole:x,cardholderUserId:e.chargeCard.cardHolderUser?.userId,cardholderDepartment:g},"Card Detail","Hyperlink",(e?.chargeCard?.recommendations??[]).map($=>t.roundAmountIfNeeded($.creditLimit.amount)),u,S)}},nr=s.div`
+  display: flex;
+  align-items: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"flex-start":"center"};
+  gap: ${e=>fe.remainingAmountContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"column":"row"};
+`,rr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,ir=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,ar=s.div`
+  display: flex;
+  align-items: end;
+`,lr=s.div`
+  width: 100%;
+  overflow: hidden;
+`,cr=s.div`
+  width: 100%;
+  gap: ${t.Space.sp3};
+  background-color: ${e=>e.theme.colors.grey4};
+  border: 1px solid ${e=>e.theme.colors.background};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp3};
+  box-sizing: border-box;
+  position: relative;
+  height: ${e=>fe.addressSectionHeight.valuePx(e.windowSize)};
+`,dr=s.div`
+  display: flex;
+  justify-content: unset;
+  gap: ${e=>fe.addressSectionGap.valuePx(e.windowSize)};
+  position: absolute;
+  width: 100%;
+  ${({isActive:e,isAutoSlide:n})=>me.css`
+    transform: translateX(${e?"0%":n?"-10%":"-105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,shouldBounce:n})=>`${e?"0.5s":"0.3s"} ${n?"cubic-bezier(0.175, 0.885, 0.32, 1.125)":"ease-out"}`};
+`,pr=s.div`
+  display: flex;
+  justify-content: unset;
+  ${({isActive:e,isAutoSlide:n})=>me.css`
+    transform: translateX(${e?n?"95%":"0%":"105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,isActive:n})=>e&&n?"0.5s":"0.3s"}
+    ease-out;
+  gap: ${t.Space.sp8};
+`,Co=s.div`
+  min-width: ${e=>fe.ownerWebMinWidth.valuePx(e.windowSize)};
+  cursor: pointer;
+`,pt=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+`,fo=s.div``,ur=s.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${t.Space.sp1};
+`,mr=s.div`
+  ${({windowSize:e})=>e==="small"?me.css`
+          max-width: 220px;
+        `:null};
+`,Et=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,yo=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: "baseline";
+  justify-content: center;
+  cursor: pointer;
+`,xr=s.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"||!e.isOwnCard?"column":"row"};
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>fe.rightSectionGap.valuePx(e.windowSize)};
+  width: ${e=>e.windowSize==="small"?"100%":"max-content"};
+`,hr=s.div`
+  min-height: ${e=>`calc(${fe.rightSectionHeight.valuePx(e.windowSize)} + ${t.Space.sp2})`};
+  min-width: ${e=>`calc(${fe.rightSectionWidth.valuePx(e.windowSize)} + ${t.Space.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>fe.cardContainerContentGap.valuePx(e.windowSize)};
+`,gr=s.div`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+`,Sr=s.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  align-items: center;
+
+  justify-content: space-between;
+  padding-top: ${t.Space.sp3};
+  padding-right: ${e=>fe.contentContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${e=>fe.topSectionPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${e=>fe.contentContainerPadding.valuePx(e.windowSize)};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  background: ${e=>e.theme.colors.grey5};
+  gap: ${e=>fe.leftRightSectionGap.valuePx(e.windowSize)};
+`,Cr=s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: ${({windowSize:e})=>fe.cardBalanceSectionMarginBottom.valuePx(e)};
+`,jo=s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`,fr=s(t.StyledText)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${zt.spentAmount.style(e.windowSize)}`};
+`,yr=s.div`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  ${({windowSize:e})=>e==="small"?me.css`
+          margin-bottom: ${t.Space.sp4};
+        `:null};
+`,jr=s.div`
+  display: flex;
+  flex-direction: ${({windowSize:e})=>e==="small"?"column":"row"};
+  align-items: ${({windowSize:e})=>e==="small"?"flex-start":"flex-end"};
+`,$r=s(t.SmallRegularSp)`
+  color: ${e=>e.theme.colors.hero};
+  margin-right: ${t.Space.sp1};
+`,vr=s(t.SmallRegularBtn)`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${t.Space.sp0};
+  color: ${t.Colors.link};
+  &:hover {
+    text-decoration: underline;
+  }
+`,Rr=s.div`
+  display: flex;
+  align-items: flex-end;
+  gap: ${t.Space.sp1};
+`,wr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,br=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Er=s.div`
+  width: 100%;
+  height: ${t.Space.sp1};
+  display: flex;
+  margin: ${t.Space.sp2} ${t.Space.sp0};
+  border-radius: ${({windowSize:e})=>fe.barRadius.valuePx(e)};
+  background: ${e=>e.theme.colors.grey2};
+`,Lr=s.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  color: ${e=>e.theme.colors.primary};
+`,$o=s(t.StyledText)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${zt.remainingAmount.style(e.windowSize)}`};
+`,vo=s(t.LargeMedium)`
+  ${e=>`${zt.remainingAmount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+`,Tr=s.div`
+  background: ${t.Colors.success};
+  width: 0%;
+  height: ${t.Space.sp1};
+  transition: width 4s ease;
+`,Ro=s.span`
+  display: flex;
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,wo=s(t.ExtraSmallRegular)`
+  padding: ${t.Space.sp0} 2px;
+  color: ${t.Colors.heroDark};
+  background: ${t.Colors.blackColor};
+  border-radius: ${t.Space.sp1};
+  position: absolute;
+  left: 20px;
+`,bo=s(t.SvgCopy)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${t.Space.sp1};
+  color: ${e=>e.isHover?e.theme.colors.primary:e.theme.colors.grey2};
+  cursor: pointer;
+`,Eo=s(t.SvgTickRoundFill)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${t.Space.sp1};
+  color: ${t.Colors.success};
+`,kr=s.div`
+  width: 21px;
+  height: 21px;
+`,Pr=s(t.SvgZeniBrandCheckingAcc)`
+  color: ${t.Colors.brandColorOpal};
+  width: 100%;
+  height: 100%;
+`,Lo=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`,st=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cardDetails.header,zr={key:"merchant",value:st.merchant,sortOrder:"ascending",width:new t.ResponsiveSized(38,38)},Ar={key:"paymentDate",value:st.paymentDate,sortOrder:"ascending",width:new t.ResponsiveSized(21,21)},Mr={key:"receipts",value:st.receipts,sortOrder:"ascending",width:new t.ResponsiveSized(16,16)},Ir={key:"type",value:st.type,sortOrder:"ascending",width:new t.ResponsiveSized(14,14)},Wr={key:"amount",value:st.amount,sortOrder:"ascending",width:new t.ResponsiveSized(11,11)},Jo=()=>[zr,Ar,Mr,Ir,Wr],Je={headerLastColumnTopPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnRightPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerLastColumnBottomPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnLeftPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerHeight:new t.ResponsiveSized(po.HEADER_HEIGHT_MOBILE,po.HEADER_HEIGHT)};function Br({hideSorting:e,sortConfig:n,onColumnSortConfigChanged:a}){const c=o.useTheme(),d=t.useWindowSizeContext(),h=Jo(),l=(r,x)=>{let g=x;n.sortKey===r&&(g=x==="ascending"?"descending":"ascending"),a(r,g)},m=h.find(r=>r.key===n.sortKey)??h[0],u=r=>h.find(x=>x.key===r)?.value??"",S=h.map(r=>r.key),C=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cardList;return d==="small"?o.jsxRuntimeExports.jsxs(To,{windowSize:d,children:[o.jsxRuntimeExports.jsxs(Or,{children:[o.jsxRuntimeExports.jsx(Gr,{children:o.jsxRuntimeExports.jsx(_r,{})}),o.jsxRuntimeExports.jsx(t.Picker$1,{title:C.sortBy,placeholder:C.sortBy,pickerValues:S,valueToLabel:u,selectedValue:n.sortKey,onPickerSelectionChanged:r=>{l(r,"ascending")},optionTextStyle:t.textStyles.smallRegular,titleTextStyle:t.textStyles.smallRegular,titleColor:c.colors.primary,selectedOptionColor:c.colors.hero,optionBackgroundColor:c.colors.grey5,downChevronVisible:!1,backgroundColor:c.colors.grey4,isDisabled:e})]}),o.jsxRuntimeExports.jsxs(Ur,{hideSorting:e,onClick:()=>{e||l(m.key,m.sortOrder)},"data-testid":t.generateDataTestId("charge-card-trxn-small-header",n.sortKey),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:m.value}),e?null:o.jsxRuntimeExports.jsx(ko,{sortDataValue:n.sortKey,headerData:m,children:o.jsxRuntimeExports.jsx(Po,{})})]})]}):o.jsxRuntimeExports.jsx(To,{windowSize:d,children:h.map(r=>o.jsxRuntimeExports.jsxs(Nr,{hideSorting:e,sortDataValue:n.sortKey,actualDataValue:r.key,wrapperWidth:r.width,windowSize:d,children:[o.jsxRuntimeExports.jsxs(qr,{hideSorting:e,onClick:()=>{e||l(r.key,r.sortOrder)},"data-testid":t.generateDataTestId("charge-card-trxn-header",n.sortKey),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:r.value}),o.jsxRuntimeExports.jsx(ko,{sortDataValue:n.sortKey,headerData:r,children:e?null:o.jsxRuntimeExports.jsx(Po,{})})]}),o.jsxRuntimeExports.jsx(Zr,{sortDataValue:n.sortKey,windowSize:d,isVisible:e?!1:n.sortKey===r.key&&r.key!=="paymentDate",children:e?null:o.jsxRuntimeExports.jsx(Fr,{onClick:()=>{e||l("paymentDate","ascending")},"data-testid":t.generateDataTestId("charge-card-trxn-close-sort",n.sortKey)})})]},r.key))})}const Hr=i.memo(Br),To=s(t.SmallRegular)`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  min-height: ${e=>Je.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>Je.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${Je.headerLastColumnTopPadding.valuePx(e.windowSize)} ${Je.headerLastColumnRightPadding.valuePx(e.windowSize)} ${Je.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${Je.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`,Nr=s.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: ${t.Space.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${t.Space.sp0};
+  justify-content: ${e=>e.actualDataValue==="amount"?"flex-end":"flex-start"};
+  ${e=>e.actualDataValue==="paymentDate"?me.css`
+          flex: 1 1 auto;
+        `:me.css`
+          padding-left: ${t.Space.sp0};
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+`,Fr=s(t.SvgCloseRound)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,ko=s.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"}
+`,Po=s(t.SvgArrowTailTop)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,Or=s.div`
+  gap: ${t.Space.sp1};
+  display: flex;
+`,_r=s(t.SvgSortBy)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,Gr=s.div`
+  margin-right: ${t.Space.sp1};
+  display: flex;
+  align-items: center;
+`,Zr=s.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,qr=s.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?t.Space.sp0:"5px"};
+  &:hover {
+    color: ${e=>e.hideSorting?"inherit":e.theme.colors.primary};
+  }
+`,Ur=s.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?t.Space.sp0:"5px"};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.hideSorting?e.theme.colors.hero:e.theme.colors.primary};
+  }
+`;function Qo(e,n,a){return Yr(e,n,a)}async function Yr(e,n,a,c){const d=`${e}?query=${encodeURIComponent(JSON.stringify(a))}`,h=t.appLocale.getLocalizedStrings().downloadReport;try{const l=await o.fetch(d,{method:"GET",headers:{"zeni-user-id":n.userId,"zeni-tenant-id":n.tenantId,"zeni-session-id":n.sessionId}});if(l.ok){const m=c??t.getFileNameFromResponseHeaders(l.headers,"Charge Card Transaction Receipt.pdf"),u=await l.arrayBuffer();o.fileDownload(u,m)}else console.error(`${h.reportErrorMessage} ${l.statusText}`)}catch(l){console.error(`${h.reportErrorMessage} ${JSON.stringify(l)}`)}}async function Vo(e,n,a){const c=`${e}?query=${encodeURIComponent(JSON.stringify(a))}`,d=t.appLocale.getLocalizedStrings().downloadReport;try{const h=await fetch(c,{method:"GET",headers:{"zeni-user-id":n.userId,"zeni-tenant-id":n.tenantId,"zeni-session-id":n.sessionId}});if(h.ok)return await h.json();console.error(`${d.reportErrorMessage} ${h.statusText}`)}catch(h){throw console.error(`${d.reportErrorMessage} ${JSON.stringify(h)}`),h}return[]}const Dr=e=>L.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},L.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"}),L.createElement("path",{d:"M12 6.12244V17.8775",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),L.createElement("path",{d:"M17.8776 12H6.12245",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),es=e=>L.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},L.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"}),L.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"}),L.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"}),L.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"})),ts=e=>L.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},L.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"}),L.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"}),L.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"}),L.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:Kr,spendManagement:{chargeCard:{cardDetails:zo}},common:{strings:{hyphen:Xr},tooltips:{addMissingReceipt:Jr,addReceipt:Qr,viewReceipt:Vr}}}=t.appLocale.getLocalizedStrings(),We={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingTop:new t.ResponsiveSized(t.sp[2],t.sp[3]),containerPaddingBottom:new t.ResponsiveSized(t.sp[2],t.sp[3]),containerMarginLeft:new t.ResponsiveSized(t.sp[4],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},ei=(e,n)=>e.attachments!=null&&e.attachments.length>0?Vr:e.amount.amount<=n.amount?Qr:Jr,os=(e,n,a,c)=>e.attachments!=null&&e.attachments.length>0?o.jsxRuntimeExports.jsx(ji,{onClick:d=>{d.stopPropagation(),c()},"data-testid":t.generateDataTestId("card-transaction-row-view-receipt",e.id)}):e.amount.amount<=n.amount?o.jsxRuntimeExports.jsx(Ri,{onClick:d=>{d.stopPropagation(),a()},"data-testid":t.generateDataTestId("card-transaction-row-optional-upload-receipt",e.id)}):o.jsxRuntimeExports.jsx(vi,{onClick:d=>{d.stopPropagation(),a()},"data-testid":t.generateDataTestId("card-transaction-row-upload-receipt",e.id)}),ti=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:d,transactionAttachmentEndpointToDownload:h,cardId:l,uploadReceiptsFetchState:m,uploadReceiptsShowTick:u,isViewReceiptClickedImmediatelyAfterUpload:S,authParams:C,transaction:r,receiptRequiredAboveAmount:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:R,updateChargeCardTransactionUploadReceiptsFetchStatus:f,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:b,removeSnackbar:p,onChargeCardTransactionRowClick:P})=>{const y=t.useWindowSizeContext(),[A,H]=i.useState(!1),[w,N]=i.useState([]),[D,Z]=i.useState(null);i.useEffect(()=>{!a&&S&&(te(T[0]),X())},[a,S]);const T=r.attachments?.filter(U=>U.contentType!=null&&t.allowedDocumentPreviewContentType.includes(U.contentType))??[],[Y,te]=i.useState(T[0]),[Q,K]=i.useState([]),[B,F]=i.useState(void 0);i.useEffect(()=>{async function U(J){Q.includes(J.attachment_id)?console.warn(`Attachment with ID ${J.attachment_id} is already getting downloaded`):(K([J.attachment_id,...Q]),await Qo(h,C,J),K(o.Remove(Q,I=>I==J.attachment_id)))}B!=null&&(U({card_id:l,transaction_id:r.id,attachment_id:B}),F(void 0))},[B]);const V=()=>{b(r.id,l,!1),H(!1),Z(null),N([]),T.length>0&&te(T[0])},X=()=>{H(!0);const U=T.map(I=>I.id);async function J(I){return await Vo(d,C,I)}J({card_id:l,transaction_id:r.id,attachment_ids:U}).then(I=>{N(I),I.length>0&&Z(I[0])})},{merchant:oe,createTime:se,transactionType:k,thirdPartyTransactionId:ae}=r,_=()=>{a?(p(),b(r.id,l,!0)):(te(T[0]),X())},G=i.useRef(null);async function j(U,J){f(r.id,l,"In-Progress"),await Yo.uploadReceipts(`${e}/1.0/cards/transactions/${r.id}/attachments`,C,U,J).then(I=>{I!=null&&g(r.id,I),f(r.id,l,"Completed"),$(r.id,l,!0),setTimeout(()=>{$(r.id,l,!1),R(!0)},2e3)}).catch(I=>{f(r.id,l,"Error"),R(!1,I)})}const O=()=>{G.current?.click()},ne=U=>{if(U.target.files!=null){const J=U.target.files,I=[],$e=[];for(let ye=0;ye<J.length;ye++)I.push(J[ye].name),$e.push(J[ye]);j?.($e,I)}},q=Jo(),v=t.getChargeCardTransactionStatus(r.transactionStatus),le=c?oe.brandName??oe.name:oe.name,ee=t.amountToString("0,0.00",r.amount),M=k.code==="transfer",ge=ae!=null&&c,ce=M&&r.direction==="debit",re=M&&r.direction==="credit";return o.jsxRuntimeExports.jsxs(ii,{windowSize:y,isClickable:ge,"data-testid":t.generateDataTestId("card-transaction-row",r.id),onClick:U=>{U.stopPropagation(),ge&&P(k.code,ae)},children:[o.jsxRuntimeExports.jsx(ai,{children:o.jsxRuntimeExports.jsxs(li,{children:[o.jsxRuntimeExports.jsxs(ci,{windowSize:y,responsiveWidth:q[0].width,children:[ce?o.jsxRuntimeExports.jsx(xi,{}):re?o.jsxRuntimeExports.jsx(hi,{}):o.jsxRuntimeExports.jsx(gi,{src:oe.logo?.url?.toString()}),o.jsxRuntimeExports.jsx(di,{windowSize:y,hasMarginRight:v.code==="paid",children:le}),v.code!=="paid"?o.jsxRuntimeExports.jsxs(si,{children:[o.jsxRuntimeExports.jsx(ri,{windowSize:y}),o.jsxRuntimeExports.jsx(ni,{color:v.color,windowSize:y,children:v.value})]}):null]}),o.jsxRuntimeExports.jsx(mi,{windowSize:y,responsiveWidth:q[1].width,children:o.jsxRuntimeExports.jsx(Si,{children:se.format(Kr.visual.MMMDCommaYYYYformat)})}),o.jsxRuntimeExports.jsx(fi,{windowSize:y,responsiveWidth:q[2].width,children:r.transactionStatus.code==="declined"||r.transactionStatus.code==="canceled"?Xr:m?.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):u?o.jsxRuntimeExports.jsx($i,{}):o.jsxRuntimeExports.jsxs(t.Tooltip,{enterDelay:600,display:"flex",placement:"bottom",title:ei(r,x),children:[o.jsxRuntimeExports.jsx(oi,{"data-testid":t.generateDataTestId("card-transaction-row-upload-receipt",r.id),onClick:U=>{U.stopPropagation()},children:o.jsxRuntimeExports.jsx(t.FileInputElement,{name:"transactionLineAttachment",fileRef:G,sizeLimit:n,isSizeLimitForEachFile:!0,onFileChange:ne,multiple:!0,onFileSizeError:(U,J)=>{U&&R(!1,{code:500,message:J===!0?zo.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0)):zo.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0))})}})}),os(r,x,O,_)]})}),o.jsxRuntimeExports.jsx(Ci,{windowSize:y,responsiveWidth:q[3].width,children:o.jsxRuntimeExports.jsx(yi,{title:k.name,children:k.name})}),o.jsxRuntimeExports.jsx(pi,{windowSize:y,responsiveWidth:q[4].width,children:o.jsxRuntimeExports.jsx(ui,{windowSize:y,title:t.amountToString("0,0.[00]",r.amount),children:r.direction==="debit"?ee:`-${ee}`})})]})}),A&&T.length>0?Uo.createPortal(o.jsxRuntimeExports.jsx(t.DocumentWithThumbnailView,{allFiles:w,fileSource:D,file:Y,title:Y.fileName,attachments:T,setFileSource:Z,setShowFullScreenView:H,onCrossClick:V,setSelectedFileAttachment:te,onDownloadClick:U=>{F(U.id)},handleTouchStart:()=>{},handleTouchMove:()=>{},handleTouchEnd:()=>{}}),document.body):null]})},oi=s.div``,si=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  margin-right: ${t.Space.sp4};
+`,ni=s(t.ExtraSmallRegular)`
+  color: ${e=>e.color};
+`,ri=s.div`
+  display: ${e=>e.windowSize==="small"?"none":"block"};
+  width: ${t.Space.sp1};
+  height: ${t.Space.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,ii=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>We.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>We.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>We.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>We.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>e.theme.mode==="dark"?`${t.Colors.dropShadowNormalDark} ${t.Space.sp0} 2px ${t.Space.sp1}`:`${t.Space.sp0} 2px ${t.Space.sp1} ${t.Colors.dropShadowNormalLight}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${e=>We.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>We.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+  cursor: ${e=>e.isClickable?"pointer":"default"};
+`,ai=s.div`
+  display: block;
+  width: 100%;
+`,li=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,ci=s.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${t.Space.sp2};
+  align-items: center;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,di=s(t.StandardRegular)`
+  margin-right: ${e=>e.hasMarginRight?t.Space.sp3:t.Space.sp0};
+  color: inherit;
+  -webkit-line-clamp: ${e=>We.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,pi=s(t.StandardRegular)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,ui=s(t.StandardRegular)`
+  color: inherit;
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>We.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,mi=s.div`
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+`,ss=e=>me.css`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e.colors.hero};
+`,xi=s(ts)`
+  ${({theme:e})=>ss(e)}
+`,hi=s(es)`
+  ${({theme:e})=>ss(e)}
+`,gi=s.img`
+  display: flex;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Si=s(t.StandardRegular)`
+  color: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Ci=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,fi=s.div`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,yi=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${t.Space.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,ji=s(t.SvgDocuments)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,$i=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${t.Colors.success};
+`,vi=s(t.SvgAddRound)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.brandColorGoldDark};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ri=s(Dr)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,{dateFormat:wi,spendManagement:{chargeCard:{cardDetails:Lt}},common:{strings:{hyphen:bi}}}=t.appLocale.getLocalizedStrings(),Ei={webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},Li=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:d,transactionAttachmentEndpointToDownload:h,cardId:l,isViewReceiptClickedImmediatelyAfterUpload:m,uploadReceiptsShowTick:u,uploadReceiptsFetchState:S,authParams:C,transaction:r,receiptRequiredAboveAmount:x,onUploadReceiptComplete:g,updateChargeCardTransactionAttachments:R,updateChargeCardTransactionReceiptsShowTick:f,updateChargeCardTransactionIsViewReceiptClicked:$,updateChargeCardTransactionUploadReceiptsFetchStatus:b,removeSnackbar:p,onChargeCardTransactionRowClick:P})=>{const y=t.useWindowSizeContext(),[A,H]=i.useState(0),[w,N]=i.useState(0),[D,Z]=i.useState(0),T=E=>{Z(E),F(!0),_(k[E]),se(V[E])};function Y(E){H(E.targetTouches[0].clientX)}function te(E){N(E.targetTouches[0].clientX)}function Q(E){return E<0?k.length+E:E%k.length}function K(){A-w>50&&w!==0&&D<k.length-1?(T(Q(D+1)),H(0),N(0)):A-w<-50&&w!==0&&D>0&&(T(Q(D-1)),H(0),N(0))}const[B,F]=i.useState(!1),[V,X]=i.useState([]),[oe,se]=i.useState(null);i.useEffect(()=>{!a&&m&&(_(k[0]),v())},[a,m]);const k=r.attachments?.filter(E=>E.contentType!=null&&t.allowedDocumentPreviewContentType.includes(E.contentType))??[],[ae,_]=i.useState(k[0]),[G,j]=i.useState([]),[O,ne]=i.useState(void 0);i.useEffect(()=>{async function E(ie){G.includes(ie.attachment_id)?console.warn(`Attachment with ID ${ie.attachment_id} is already getting downloaded`):(j([ie.attachment_id,...G]),await Qo(h,C,ie),j(o.Remove(G,z=>z==ie.attachment_id)))}O!=null&&(E({card_id:l,transaction_id:r.id,attachment_id:O}),ne(void 0))},[O]);const q=()=>{$(r.id,l,!1),F(!1),se(null),X([]),k.length>0&&_(k[0])},v=()=>{F(!0);const E=k.map(z=>z.id);async function ie(z){return await Vo(d,C,z)}ie({card_id:l,transaction_id:r.id,attachment_ids:E}).then(z=>{X(z),z.length>0&&se(z[0])})},{merchant:le,createTime:ee,transactionType:M,thirdPartyTransactionId:ge}=r,ce=()=>{a?(p(),$(r.id,l,!0)):(_(k[0]),v())},re=i.useRef(null);async function U(E,ie){b(r.id,l,"In-Progress"),await Yo.uploadReceipts(`${e}/1.0/cards/transactions/${r.id}/attachments`,C,E,ie).then(z=>{z!=null&&R(r.id,z),b(r.id,l,"Completed"),g(!0),f(r.id,l,!0),setTimeout(()=>f(r.id,l,!1),2e3)}).catch(z=>{b(r.id,l,"Error"),g(!1,z)})}const J=()=>{re.current?.click()},I=E=>{if(E.target.files!=null){const ie=E.target.files,z=[],Fe=[];for(let Oe=0;Oe<ie.length;Oe++)z.push(ie[Oe].name),Fe.push(ie[Oe]);U?.(Fe,z)}},$e=t.getChargeCardTransactionStatus(r.transactionStatus),ye=c?le.brandName??le.name:le.name,ue=t.amountToString("0,0.00",r.amount),Te=M.code==="transfer",Ne=ge!=null&&c,De=Te&&r.direction==="debit",de=Te&&r.direction==="credit";return o.jsxRuntimeExports.jsxs(Ni,{windowSize:y,"data-testid":t.generateDataTestId("card-transaction-row-small",r.id),onClick:E=>{E.stopPropagation(),Ne&&P(M.code,ge)},children:[o.jsxRuntimeExports.jsx(Fi,{children:o.jsxRuntimeExports.jsxs(Oi,{children:[o.jsxRuntimeExports.jsxs(Zi,{children:[o.jsxRuntimeExports.jsx(Wi,{children:De?o.jsxRuntimeExports.jsx(Ti,{}):de?o.jsxRuntimeExports.jsx(ki,{}):o.jsxRuntimeExports.jsx(Ui,{src:le.logo?.url?.toString()})}),o.jsxRuntimeExports.jsxs(Yi,{children:[o.jsxRuntimeExports.jsxs(Pi,{children:[o.jsxRuntimeExports.jsx(_i,{windowSize:y,children:ye}),$e.code!=="paid"?o.jsxRuntimeExports.jsxs(zi,{children:[o.jsxRuntimeExports.jsx(Mi,{windowSize:y}),o.jsxRuntimeExports.jsx(Ai,{color:$e.color,windowSize:y,children:$e.value})]}):null]}),o.jsxRuntimeExports.jsx(Gi,{children:`${Lt.paymentDate} ${ee.format(wi.visual.MMMDCommaYYYYformat)}`})]})]}),o.jsxRuntimeExports.jsxs(qi,{children:[o.jsxRuntimeExports.jsx(Di,{children:r.direction==="debit"?ue:`-${ue}`}),o.jsxRuntimeExports.jsx(Hi,{title:M.name,children:M.name}),o.jsxRuntimeExports.jsx(Bi,{children:r.transactionStatus.code==="declined"||r.transactionStatus.code==="canceled"?bi:S?.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):u?o.jsxRuntimeExports.jsx(Ii,{}):o.jsxRuntimeExports.jsxs(Ao,{children:[o.jsxRuntimeExports.jsx(Ao,{"data-testid":t.generateDataTestId("card-transaction-row-small-upload-receipt",r.id),onClick:E=>{E.stopPropagation()},children:o.jsxRuntimeExports.jsx(t.FileInputElement,{name:"transactionLineAttachment",fileRef:re,sizeLimit:n,isSizeLimitForEachFile:!0,onFileChange:I,multiple:!0,onFileSizeError:(E,ie)=>{E&&g(!1,{code:500,message:ie===!0?Lt.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0)):Lt.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0))})}})}),os(r,x,J,ce)]})})]})]})}),B&&k.length>0?Uo.createPortal(o.jsxRuntimeExports.jsx(t.DocumentWithThumbnailView,{allFiles:V,fileSource:oe,file:ae,title:ae.fileName,attachments:k,setFileSource:se,setShowFullScreenView:F,onCrossClick:q,setSelectedFileAttachment:_,onDownloadClick:E=>{ne(E.id)},handleTouchStart:Y,handleTouchMove:te,handleTouchEnd:K}),document.body):null]})},ns=e=>me.css`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e.colors.hero};
+`,Ti=s(ts)`
+  ${({theme:e})=>ns(e)}
+`,ki=s(es)`
+  ${({theme:e})=>ns(e)}
+`,Ao=s.div``,Pi=s.div`
+  display: flex;
+  gap: ${t.Space.sp2};
+  align-items: flex-start;
+`,zi=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  min-height: ${t.Space.sp4};
+`,Ai=s(t.ExtraSmallRegular)`
+  color: ${e=>e.color};
+`,Mi=s.div`
+  display: block;
+  width: ${t.Space.sp1};
+  height: ${t.Space.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,Ii=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${t.Colors.success};
+`,Wi=s.div``,Bi=s.div`
+  margin-top: ${t.Space.sp2};
+`,Hi=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${t.Space.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,Ni=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: ${e=>` 1px solid ${e.theme.colors.grey3}`};
+  padding: ${t.Space.sp3};
+  box-shadow: ${e=>`${t.Space.sp0} 1px 2px ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${t.Space.sp3};
+  margin-left: ${t.Space.sp3};
+`,Fi=s.div`
+  display: block;
+  width: 100%;
+`,Oi=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,_i=s(t.StandardRegular)`
+  color: inherit;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>Ei.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+`,Gi=s(t.ExtraSmallRegular)`
+  color: inherit;
+  min-height: 18px;
+  margin-top: -${t.Space.sp1};
+`,Zi=s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.Space.sp2};
+`,qi=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,Ui=s.img`
+  display: flex;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Yi=s.div`
+  margin-bottom: 6px;
+`,Di=s(t.StandardRegular)`
+  color: inherit;
+`,Ki=e=>L.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},L.createElement("g",{clipPath:"url(#clip0_6421_22796)"},L.createElement("mask",{id:"mask0_6421_22796",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:0,width:90,height:90},L.createElement("rect",{width:90,height:90,fill:"#D9D9D9"})),L.createElement("g",{mask:"url(#mask0_6421_22796)"},L.createElement("rect",{x:.471703,y:15.6197,width:85.2829,height:54.9872,rx:3.30192,stroke:"#97C3B9",strokeWidth:.943405}),L.createElement("rect",{opacity:.2,x:3.77344,y:18.9216,width:86.2263,height:55.9306,rx:3.77362,fill:"#97C3B9"}),L.createElement("path",{d:"M13.8672 56.8781L72.3583 56.878",stroke:"#EEBA7D",strokeWidth:.943405,strokeLinecap:"round"}),L.createElement("path",{d:"M0.945312 30.8197C34.0042 22.3291 52.539 22.3291 85.5978 30.8197",stroke:"#97C3B9",strokeWidth:.943405,strokeLinecap:"round"}),L.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"}))),L.createElement("defs",null,L.createElement("clipPath",{id:"clip0_6421_22796"},L.createElement("rect",{width:90,height:90,fill:"white"})))),Xi=e=>L.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},L.createElement("g",{clipPath:"url(#clip0_6421_22782)"},L.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"}),L.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}),L.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"}),L.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"}),L.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}),L.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}),L.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"}),L.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"})),L.createElement("defs",null,L.createElement("clipPath",{id:"clip0_6421_22782"},L.createElement("rect",{width:90,height:90,fill:"white"})))),{spendManagement:{chargeCard:{cardDetails:Ve}},common:Ji}=t.appLocale.getLocalizedStrings();function Qi({transactions:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,uploadReceiptsFetchStateByTransactionId:c,uploadReceiptsShowTickByTransactionId:d,isViewReceiptClickedImmediatelyAfterUploadTransactionId:h,cardId:l,receiptRequiredAboveAmount:m,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:S,transactionAttachmentEndpointToDownload:C,cardsEndPoint:r,authParams:x,hideSorting:g,isOwnCard:R,uiState:f,fetchState:$,cardHolderUser:b,cardStatusCode:p="active",cardCodeType:P="business_virtual_credit_card",onReloadTransactions:y,onFetchChargeCardTransactionList:A,onColumnSortConfigChanged:H,removeSnackbar:w,onChargeCardTransactionRowClick:N,onUploadReceiptComplete:D,onUpdateScrollYOffset:Z,updateChargeCardTransactionAttachments:T,updateChargeCardTransactionUploadReceiptsFetchStatus:Y,updateChargeCardTransactionReceiptsShowTick:te,updateChargeCardTransactionIsViewReceiptClicked:Q}){const K=t.useWindowSizeContext(),B=i.useRef(null),[F,V]=i.useState(!1);i.useEffect(()=>{B.current?.resetAfterIndex(0)},[K,B]),i.useEffect(()=>{$==="Completed"&&V(!1)},[$]);const X=()=>K!=="small"?74:128,oe=(_,G)=>{A(_,G)},se=()=>{V(!0),oe(f.pageToken,f.pageTokenType)},k=_=>_<e.length,ae=()=>{f.pageToken!=null&&$==="Completed"&&se()};return o.jsxRuntimeExports.jsxs(ia,{isOwnCard:R,windowSize:K,isEmptyTransaction:e.length===0,children:[o.jsxRuntimeExports.jsx(aa,{windowSize:K,children:$==="Error"?o.jsxRuntimeExports.jsxs(da,{children:[o.jsxRuntimeExports.jsx(pa,{onClick:y,"data-testid":t.generateDataTestId("card-transaction-list-reload"),children:o.jsxRuntimeExports.jsx(t.SvgReload,{})}),o.jsxRuntimeExports.jsx(ua,{children:Ji.reloadPage.label})]}):$==="Not-Started"||$==="In-Progress"&&e.length===0?o.jsxRuntimeExports.jsx(xa,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):$==="Completed"||$==="In-Progress"&&e.length>0?p==="request_on_hold"?o.jsxRuntimeExports.jsx(ea,{cardType:P,cardHolderUser:b}):p==="inactive"?o.jsxRuntimeExports.jsx(ta,{cardHolderUser:b}):e.length===0?o.jsxRuntimeExports.jsx(Vi,{}):o.jsxRuntimeExports.jsx(ca,{windowSize:K,children:o.jsxRuntimeExports.jsx(o.AutoSizer,{children:({height:_,width:G})=>o.jsxRuntimeExports.jsx(o.InfiniteLoader,{isItemLoaded:k,itemCount:e.length+1,loadMoreItems:ae,children:({onItemsRendered:j})=>o.jsxRuntimeExports.jsx(o.VariableSizeList,{ref:B,height:_,itemCount:e.length,onItemsRendered:j,itemSize:X,itemKey:O=>e[O].id,width:G,style:{willChange:"auto"},innerElementType:O=>ra(O,g,f,$,H),onScroll:({scrollOffset:O})=>{Z?.(O)},initialScrollOffset:f.scrollYOffset,children:O=>o.jsxRuntimeExports.jsx(oa,{...O,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,cardsEndPoint:r,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:S,transactionAttachmentEndpointToDownload:C,uploadReceiptsFetchStateByTransactionId:c,uploadReceiptsShowTickByTransactionId:d,isViewReceiptClickedImmediatelyAfterUploadTransactionId:h,cardId:l,authParams:x,transactions:e,receiptRequiredAboveAmount:m,updateChargeCardTransactionAttachments:T,onUploadReceiptComplete:D,updateChargeCardTransactionUploadReceiptsFetchStatus:Y,updateChargeCardTransactionReceiptsShowTick:te,updateChargeCardTransactionIsViewReceiptClicked:Q,onChargeCardTransactionRowClick:N,removeSnackbar:w})})})})}):null}),F===!0?o.jsxRuntimeExports.jsx(ha,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0})}):null]})}const Vi=()=>{const e=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(At,{children:[o.jsxRuntimeExports.jsx(Bt,{children:o.jsxRuntimeExports.jsx(is,{})}),o.jsxRuntimeExports.jsxs(Mt,{children:[o.jsxRuntimeExports.jsx(It,{children:Ve.transactionTable.emptyTransactions.title}),o.jsxRuntimeExports.jsx(Wt,{windowSize:e,children:Ve.transactionTable.emptyTransactions.subTitle})]})]})},ea=({cardType:e,cardHolderUser:n})=>{const a=n!=null?n.firstName+" "+n.lastName:"",c=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(At,{children:[o.jsxRuntimeExports.jsx(Bt,{children:o.jsxRuntimeExports.jsx(Sa,{})}),o.jsxRuntimeExports.jsxs(Mt,{children:[o.jsxRuntimeExports.jsx(It,{children:Ve.transactionTable.pendingProfileCompletion.title}),o.jsxRuntimeExports.jsx(Wt,{windowSize:c,children:Ve.transactionTable.pendingProfileCompletion.subTitle[e].replace("__user__",a)})]})]})},ta=({cardHolderUser:e})=>{const n=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(At,{children:[o.jsxRuntimeExports.jsx(Bt,{children:o.jsxRuntimeExports.jsx(is,{})}),o.jsxRuntimeExports.jsxs(Mt,{children:[o.jsxRuntimeExports.jsx(It,{children:Ve.transactionTable.pendingActivation.title}),o.jsxRuntimeExports.jsx(Wt,{windowSize:n,children:Ve.transactionTable.pendingActivation.subTitle.replace("__user__",e?.firstName??"")})]})]})},oa=({index:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,style:c,transactions:d,isAiCategorizationEnabledForCardsTransactions:h,uploadReceiptsFetchStateByTransactionId:l,uploadReceiptsShowTickByTransactionId:m,isViewReceiptClickedImmediatelyAfterUploadTransactionId:u,cardId:S,cardsEndPoint:C,transactionAttachmentsEndpointToFetch:r,transactionAttachmentEndpointToDownload:x,receiptRequiredAboveAmount:g,authParams:R,updateChargeCardTransactionAttachments:f,onUploadReceiptComplete:$,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:P,onChargeCardTransactionRowClick:y,removeSnackbar:A})=>o.jsxRuntimeExports.jsx(ma,{style:{...c,width:"100%"},className:"spend-management-list-item",children:o.jsxRuntimeExports.jsx(na,{documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,cardId:S,isAiCategorizationEnabledForCardsTransactions:h,cardsEndPoint:C,transactionAttachmentsEndpointToFetch:r,transactionAttachmentEndpointToDownload:x,authParams:R,receiptRequiredAboveAmount:g,transaction:d[e],uploadReceiptsFetchState:l?.[d[e].id],uploadReceiptsShowTick:m?.[d[e].id],isViewReceiptClickedImmediatelyAfterUpload:u?.[d[e].id],updateChargeCardTransactionAttachments:f,onUploadReceiptComplete:$,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:P,onChargeCardTransactionRowClick:y,removeSnackbar:A},d[e].id)}),sa=({transaction:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,uploadReceiptsFetchState:d,uploadReceiptsShowTick:h,isViewReceiptClickedImmediatelyAfterUpload:l,cardsEndPoint:m,transactionAttachmentsEndpointToFetch:u,transactionAttachmentEndpointToDownload:S,cardId:C,receiptRequiredAboveAmount:r,authParams:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:R,updateChargeCardTransactionUploadReceiptsFetchStatus:f,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:b,onChargeCardTransactionRowClick:p,removeSnackbar:P})=>{const A=t.useWindowSizeContext()==="small"?Li:ti;return o.jsxRuntimeExports.jsx(A,{isSnackbarOpen:a,documentAiReceiptMaxSizeLimit:n,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:u,transactionAttachmentEndpointToDownload:S,uploadReceiptsFetchState:d,uploadReceiptsShowTick:h,isViewReceiptClickedImmediatelyAfterUpload:l,transaction:e,cardId:C,receiptRequiredAboveAmount:r,cardsEndPoint:m,authParams:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:R,updateChargeCardTransactionUploadReceiptsFetchStatus:f,updateChargeCardTransactionReceiptsShowTick:$,updateChargeCardTransactionIsViewReceiptClicked:b,onChargeCardTransactionRowClick:p,removeSnackbar:P})},na=i.memo(sa),ra=(e,n,a,c,d)=>o.jsxRuntimeExports.jsx(rs,{...e,onColumnSortConfigChanged:d,hideSorting:n,uiState:{sortKey:a.sortKey,sortOrder:a.sortOrder},fetchState:c}),rs=i.forwardRef((e,n)=>{const{children:a,style:c,uiState:d,onColumnSortConfigChanged:h,hideSorting:l,...m}=e;return o.jsxRuntimeExports.jsxs(ga,{ref:n,style:{...c,width:"auto"},...m,children:[o.jsxRuntimeExports.jsx(Hr,{onColumnSortConfigChanged:h,sortConfig:{sortKey:d.sortKey,sortOrder:d.sortOrder},hideSorting:l}),o.jsxRuntimeExports.jsx(la,{children:a})]})});rs.displayName="Charge Card Transaction list View inner element type";const ia=s.div`
+  display: block;
+  height: ${e=>e.isEmptyTransaction?"calc(100vh - 436px)":"calc(100vh - 224px)"};
+  width: 100%;
+`,aa=s.div`
+  height: 100%;
+`,la=s.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,ca=s.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,da=s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,pa=s.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${t.Space.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,ua=s(t.SmallRegularSp)`
+  margin-top: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,ma=s.div`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  padding-bottom: ${t.Space.sp3};
+  box-sizing: border-box;
+`,xa=s.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${t.Space.sp3};
+  margin-bottom: ${t.Space.sp3};
+`,ha=s.div`
+  display: flex;
+  width: 100%;
+  height: auto;
+  padding-bottom: ${t.Space.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`,At=s.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${t.Space.sp2};
+  height: 100%;
+  margin: ${t.Space.sp0} ${t.Space.sp3};
+`,Mt=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,It=s(t.H6Regular)`
+  color: ${e=>e.theme.colors.brandColorJade};
+`,Wt=s(t.LargeRegular)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>e.windowSize!=="small"?me.css`
+          white-space: pre;
+        `:null};
+  text-align: center;
+`,Bt=s.div``,ga=s.div``,is=s(Ki)``,Sa=s(Xi)``,{spendManagement:Ca}=t.appLocale.getLocalizedStrings(),{cardDetails:ze}=Ca.chargeCard,fa=me.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`,ya=e=>{switch(e){case"slide-in-right-to-left-add-to-wallet":return fa;default:return null}},ja=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: inherit;
+`,$a=s(ja)`
+  animation: ${e=>ya(e.className)} 0.3s forwards;
+`,va=({isChargeCardAdmin:e,chargeCardDetailView:n,walletType:a,secretRevealed:c,isDrawerOpen:d,vgsVaultId:h,showSecretInfo:l,changePinInProcess:m,isSandboxEnv:u,controllerEmails:S,isChargeCardFeatureEnabled:C,isDebitCardFeatureEnabled:r,isDebitCardSetupEnabled:x,isChargeCardSetupEnabled:g,chargeCardCashbackDetailState:R,isCardDetailErrored:f,creditAccountRepayment:$,productInformation:b,creditAccountInformation:p,debitAccountInformation:P,cashbackInformation:y,signedInUserToken:A,selectedColor:H,showDrawerAnimation:w,cardDetailsFetchState:N,setCardDetailsFetchState:D,setIsCardDetailErrored:Z,setShowSecretInfo:T,setSecretRevealed:Y,setShowChangePinPopup:te,setIsAddToWalletDrawerOpen:Q,isCardDetailFetching:K,handleColorCodeClick:B,onFireOnClickAnalytics:F,onVerifyOtp:V,onVerifyOtpSuccess:X,onResendOtp:oe,onFireVerifyPopOnClickAnalytics:se,onGetOtp:k})=>{const ae=o.useTheme(),[_,G]=i.useState(!1),[j,O]=i.useState(!1),ne=w.current;return i.useEffect(()=>{d?document.body.style.overflow="hidden":document.body.style.overflow="unset"},[d,w]),o.jsxRuntimeExports.jsx(o.Drawer,{onClose:()=>{Q(!1)},anchor:"right",open:!0,PaperProps:{style:{maxWidth:"512px",boxShadow:"none",background:"transparent"}},style:{backgroundColor:t.Colors.drawerBackground,display:d?"unset":"none"},disableScrollLock:!d,transitionDuration:250,"data-testid":t.generateDataTestId("add-card-to-wallet-drawer"),children:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(t.OtpPopupSection,{phoneNumberPopupDescription:ze.verifyPhoneNumberDescription,showOtpPopup:_,showPhoneNumberPopup:j,twoFactorAuthenticationView:n.twoFAView,loggedInUserPhone:n.loggedInUserPhone,onVerifyOtp:V,onVerifyOtpSuccess:q=>{X(q),m?te(!0):T(!0)},onFireVerifyPopOnClickAnalytics:se,setShowOtpPopup:G,onResendOtp:oe,setShowPhoneNumberPopup:O,onGetOtp:k}),o.jsxRuntimeExports.jsxs($a,{className:ne,children:[o.jsxRuntimeExports.jsx(t.NavBarWithClose,{title:a==="apple"?ze.addCardToAppleWallet:ze.addCardToGoogleWallet,style:{zIndex:4},backgroundColor:ae.colors.grey4,onCloseClick:()=>Q(!1)}),o.jsxRuntimeExports.jsxs(wa,{children:[o.jsxRuntimeExports.jsxs(Ta,{children:[o.jsxRuntimeExports.jsxs(ba,{children:[o.jsxRuntimeExports.jsx(Wa,{children:o.jsxRuntimeExports.jsx(Ha,{})}),o.jsxRuntimeExports.jsx(Pa,{children:ze.openWalletAppOnPhone})]}),o.jsxRuntimeExports.jsx(za,{children:a==="apple"?ze.openWalletDescriptionApple:ze.openWalletDescriptionGoogle}),o.jsxRuntimeExports.jsx(Ko,{isChargeCardAdmin:e,onUnlockChargeCard:()=>{},chargeCardDetailView:n,creditAccountRepayment:$,creditAccount:n.creditAccount,setShowSecretInfo:T,secretRevealed:c,isOwnCard:!0,controllerEmails:S,isChargeCardFeatureEnabled:C,isDebitCardFeatureEnabled:r,isDebitCardSetupEnabled:x,isChargeCardSetupEnabled:g,chargeCardCashbackDetailState:R,isShowingInDrawer:!0,vgsVaultId:h,showSecretInfo:l,isSandboxEnv:u,isCardDetailErrored:f,signedInUserToken:A,productInformation:b,creditAccountInformation:p,debitAccountInformation:P,cashbackInformation:y,selectedColor:H,cardDetailsFetchState:N,setCardDetailsFetchState:D,setIsCardDetailErrored:Z,setSecretRevealed:Y,isCardDetailFetching:K,handleColorCodeClick:B,onFireOnClickAnalytics:F,setShowPhoneNumberForOtp:O})]}),o.jsxRuntimeExports.jsx(La,{}),o.jsxRuntimeExports.jsxs(ka,{children:[o.jsxRuntimeExports.jsxs(Ea,{children:[o.jsxRuntimeExports.jsx(Ia,{children:o.jsxRuntimeExports.jsx(Ba,{})}),o.jsxRuntimeExports.jsx(Aa,{children:ze.verifyCard})]}),o.jsxRuntimeExports.jsx(Ra,{children:o.jsxRuntimeExports.jsx(Ma,{children:a==="apple"?ze.VerifyCardDescriptionApple:ze.VerifyCardDescriptionGoogle})})]})]})]})]})})},Ra=s.div`
+  display: flex;
+  justify-content: end;
+`,wa=s.div`
+  margin: ${t.Space.sp3} ${t.Space.sp8};
+`,ba=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`,Ea=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`,La=s.div`
+  height: ${t.Space.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  width: ${t.Space.sp0};
+  margin-left: ${t.Space.sp8};
+`,Ta=s.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp4} ${t.Space.sp5};
+  box-shadow: ${t.Space.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,ka=s.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp4} ${t.Space.sp5};
+  box-shadow: ${t.Space.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,Pa=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+`,za=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${t.Space.sp9};
+  padding-bottom: ${t.Space.sp4};
+`,Aa=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+`,Ma=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 274px;
+`,Ia=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${t.Colors.successLight};
+  display: flex;
+`,Wa=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${e=>e.theme.colors.graphColor16Light};
+  display: flex;
+`,Ba=s(t.SvgVerified)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Ha=s(Ye.SvgAddToWallet)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.graphColor16Dark};
+`,{spendManagement:{chargeCard:{cardDetails:qe}},common:{strings:Na}}=t.appLocale.getLocalizedStrings(),Ht={iFrameWidth:new t.ResponsiveSized(188,188)};function Fa({isSandboxEnv:e,cardProviderID:n,vgsVaultId:a,signedInUserToken:c,onCancelClick:d,onUpdateDebitCardPinAttempt:h,onChangePinSuccess:l}){const m=t.useWindowSizeContext(),u=o.useTheme(),[S,C]=i.useState({}),[r,x]=i.useState(!1),[g,R]=i.useState(!1),[f,$]=i.useState(!0),[b,p]=i.useState(!0),[P,y]=i.useState(!1),[A,H]=i.useState(!1),[w,N]=i.useState(!1),[D,Z]=i.useState(!1),[T,Y]=i.useState(!1),[te,Q]=i.useState(!1),[K,B]=i.useState(!1),[F,V]=i.useState(null),[X,oe]=i.useState(null),[se]=t.useScript("https://js.verygoodvault.com/vgs-collect/2.27.0/vgs-collect.js"),k=e?"SANDBOX":"live";i.useEffect(()=>{if(se){const G=window.VGSCollect.create(a,k,ne=>{const q=ne["data.attributes.oldPin"],v=ne["data.attributes.newPin"];q?.isTouched===!0&&q?.isValid===!1&&q?.isFocused===!1?Z(!0):(q?.isTouched===!0&&q?.isValid===!0&&q?.isFocused===!1||q?.isTouched===!0&&q?.isValid===!0&&q?.isFocused===!0)&&(Z(!1),B(!1)),v?.isTouched===!0&&v?.isValid===!1&&v?.isFocused===!1?Y(!0):(v?.isTouched===!0&&v?.isValid===!0&&v?.isFocused===!1||v?.isTouched===!0&&v?.isValid===!0&&v?.isFocused===!0)&&Y(!1)}),j=G.field("#oldPin",{type:"text",name:"data.attributes.oldPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...t.textStyles.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:u.colors.primary,height:t.Space.sp6,padding:`${t.Space.sp0} ${t.Space.sp3}`,textAlign:"right","&::placeholder":{color:u.colors.grey1,...t.textStyles.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:t.Colors.important,background:t.Colors.importantLight},"&:focus":{background:`${u.colors.background} !important`,textAlign:"left",color:`${u.colors.primary} !important`}}}),O=G.field("#newPin",{type:"text",name:"data.attributes.newPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...t.textStyles.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:u.colors.primary,height:t.Space.sp6,padding:`${t.Space.sp0} ${t.Space.sp3}`,textAlign:"right","&::placeholder":{color:u.colors.grey1,...t.textStyles.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:t.Colors.important,background:t.Colors.importantLight},"&:focus":{background:`${u.colors.background} !important`,textAlign:"left",color:`${u.colors.primary} !important`}}});V(j),oe(O),C(G),Promise.all([j.promise,O.promise]).then(function(){R(!0)})}},[se]),i.useEffect(()=>{F?.update({hideValue:f})},[F,f]),i.useEffect(()=>{X?.update({hideValue:b})},[X,b]);const ae=G=>{x(!0),B(!1),S.submit?.("/cards/"+n+"/secure-data/pin",{method:"PUT",mapDotToObject:"true",headers:{"Content-Type":"application/vnd.api+json",Authorization:"Bearer "+G?.token}},function(j,O){j===200?(y(!1),H(!1),l(),h("success")):(Z(!0),h("failed"),O.errors?.[0].title.toLowerCase().includes("max")?Q(!0):O.errors?.[0].title.toLowerCase().includes("invalid")&&B(!0),x(!1))},j=>{console.log("error",j),x(!1)})},_={onOkClick:()=>{if(!S.state)return;const G=S.state["data.attributes.newPin"]?.isValid,j=S.state["data.attributes.oldPin"]?.isValid;N(!0),G===!0&&j===!0&&ae(c)},onCancelClick:d};return o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(Oa,{children:qe.moreOptions.changePin}),descriptionComponent:o.jsxRuntimeExports.jsxs(_a,{children:[o.jsxRuntimeExports.jsxs(Ya,{children:[o.jsxRuntimeExports.jsxs(Fo,{showFieldError:D,windowSize:m,isFirstField:!0,validation:w,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),oldPinInputHighlighted:P,children:[o.jsxRuntimeExports.jsx(Bo,{children:qe.existingPin}),o.jsxRuntimeExports.jsxs(Ho,{windowSize:m,children:[o.jsxRuntimeExports.jsx(Ua,{id:"oldPin",className:"cc-old-pin-form-field",windowSize:m}),o.jsxRuntimeExports.jsx(Mo,{onClick:()=>$(!f),"data-testid":t.generateDataTestId("cc-old-pin-show-text"),children:f?o.jsxRuntimeExports.jsx(Io,{}):o.jsxRuntimeExports.jsx(Wo,{})})]})]}),o.jsxRuntimeExports.jsx(Za,{}),o.jsxRuntimeExports.jsxs(Fo,{showFieldError:T,windowSize:m,isFirstField:!1,validation:w,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),newPinInputHighlighted:A,children:[o.jsxRuntimeExports.jsx(Bo,{children:qe.newPin}),o.jsxRuntimeExports.jsxs(Ho,{windowSize:m,children:[o.jsxRuntimeExports.jsx(qa,{id:"newPin",className:"cc-new-pin-form-field",windowSize:m}),o.jsxRuntimeExports.jsx(Mo,{onClick:()=>p(!b),"data-testid":t.generateDataTestId("cc-new-pin-show-text"),children:b?o.jsxRuntimeExports.jsx(Io,{}):o.jsxRuntimeExports.jsx(Wo,{})})]})]})]}),K?o.jsxRuntimeExports.jsx(No,{children:qe.incorrectCurrentPIN}):null,te?o.jsxRuntimeExports.jsx(No,{children:qe.pinAttemptsReached}):null]}),primaryButtonText:"Change",primaryButtonWidth:87,isLoading:r,isDisabled:g===!1||te,secondaryButtonWidth:87,buttonContainerStyle:{paddingTop:t.Space.sp3,paddingBottom:t.Space.sp2},secondaryButtonText:"Cancel",action:_,containerStyle:{maxWidth:"544px"},footerHelperComponent:o.jsxRuntimeExports.jsxs(t.ConfirmationPopUpFooterHelper,{children:[o.jsxRuntimeExports.jsx(Ga,{children:qe.forgotYourPin}),Na.space,qe.callTollFree]})})}const Oa=s(t.H6Medium)`
+  margin-top: ${t.Space.sp7};
+  padding-left: ${t.Space.sp8};
+  padding-right: ${t.Space.sp8};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,_a=s(t.ConfirmationPopUpDescription)`
+  margin-top: ${t.Space.sp5};
+  margin-bottom: ${t.Space.sp5};
+`,Ga=s.span`
+  color: ${e=>e.theme.colors.primary};
+`,Mo=s.div`
+  cursor: pointer;
+  margin-left: ${t.Space.sp2};
+`,Io=s(t.SvgVisibleOn)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Wo=s(t.SvgVisibleOff)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Bo=s.label`
+  margin-top: ${t.Space.sp2};
+`,Ho=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 220px;
+`,No=s(t.StandardRegular)`
+  color: ${t.Colors.important};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: right;
+  margin-top: ${t.Space.sp3};
+`,Za=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,qa=s.div`
+  border-radius: ${t.Space.sp1};
+  height: ${t.Space.sp6};
+  width: ${e=>Ht.iFrameWidth.valuePx(e.windowSize)};
+`,Ua=s.div`
+  border-radius: ${t.Space.sp1};
+  height: ${t.Space.sp6};
+  width: ${e=>Ht.iFrameWidth.valuePx(e.windowSize)};
+`,Ya=s.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+`,Fo=s.div`
+  display: flex;
+  padding: ${t.Space.sp2};
+  padding-left: ${t.Space.sp4};
+  align-items: start;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.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=>Ht.iFrameWidth.valuePx(e.windowSize)};
+  }
+  .cc-new-pin-form-field {
+    background: ${e=>e.showFieldError?t.Colors.importantLight:e.newPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  .cc-old-pin-form-field {
+    background: ${e=>e.showFieldError?t.Colors.importantLight:e.oldPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  ${e=>e.isFirstField?me.css`
+          border-bottom-left-radius: ${t.Space.sp0};
+          border-bottom-right-radius: ${t.Space.sp0};
+        `:me.css`
+          border-top-left-radius: ${t.Space.sp0};
+          border-top-right-radius: ${t.Space.sp0};
+        `}
+  ${e=>e.validation?me.css`
+          .vgs-collect-container__invalid:not(.vgs-collect-container__focused) {
+            background: ${t.Colors.importantLight};
+          }
+          .vgs-collect-container__focused) {
+            background: ${e.theme.colors.background};
+          }
+        `:null}
+`,Ee={bottomContentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[8]),styledAIIconContainerSize:new t.ResponsiveSized(t.sp[3],t.sp[3]),bannerWrapperMarginLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),payNowSectionPaddingLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[0]),styledHighImportanceIconMarginRight:new t.ResponsiveSized(t.sp[0],t.sp[1])},{common:ve,spendManagement:Da,dateFormat:Ka}=t.appLocale.getLocalizedStrings(),pe=Da.chargeCard,Xa=({chargeCardDetailView:e,onUnlockChargeCard:n,onCloseChargeCard:a,cardsEndPoint:c,classListFetchState:d,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:l,authParams:m,hideSorting:u,cardId:S,vgsVaultId:C,controllerEmails:r,isCardControlsEnabled:x,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:R,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:$,chargeCardCashbackDetailState:b,onFetchChargeCardsRecurringExpenses:p,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,creditAccount:w,cardIssuedByRoles:N,cardIssuedByDepartmentName:D,cardHolderRoles:Z,cardHolderDepartmentName:T,loggedInUserRole:Y,appleWalletLink:te,googleWalletLink:Q,signedInUser:K,signedInUserToken:B,chargeCardsRecurringExpensesState:F,isSandboxEnv:V,isEarlyPayEnabled:X,documentAiReceiptMaxSizeLimit:oe,isSnackbarOpen:se,onFireOnClickAnalytics:k,onUpdateDebitCardPinAttempt:ae,onFireVerifyPopOnClickAnalytics:_,onBackClick:G,onReloadTransactions:j,onFetchChargeCardTransactionList:O,onGetOtp:ne,onLockChargeCard:q,onResendOtp:v,onVerifyOtp:le,updateChargeCardName:ee,onVerifyOtpSuccess:M,onColorCodeChange:ge,onColumnSortConfigChanged:ce,updateChargeCardTransactionAttachments:re,updateChargeCardTransactionUploadReceiptsFetchStatus:U,updateChargeCardTransactionReceiptsShowTick:J,updateChargeCardTransactionIsViewReceiptClicked:I,onUploadReceiptComplete:$e,removeSnackbar:ye,onChargeCardTransactionRowClick:ue,onChargeCardRevokeInviteClick:Te,onUpdateScrollYOffset:Ne,updateSpendLimit:De,shouldOpenCreditCardPaymentDrawer:de})=>{const E=i.useRef(!0),ie=o.useTheme(),z=t.useWindowSizeContext(),Fe=t.useGlobalInfoContext(),et=t.useToolkitContext().analytics,[,ke]=t.useCopyToClipboard(),[Ke,nt]=i.useState(!1),[tt,rt]=i.useState(!1),[Pe,_e]=i.useState(!1),[Ge,xe]=i.useState(!1),[Ae,Nt]=i.useState(!1),[ut,Ft]=i.useState(!1),[ls,cs]=i.useState(!1),[ds,Ot]=i.useState(!1),[ps,it]=i.useState(!1),[us,mt]=i.useState(!1),[ms,at]=i.useState(!1),[xs,lt]=i.useState(!1),[Xe,xt]=i.useState(!1),[_t,ht]=i.useState(!1),[Gt,Zt]=i.useState(!1),[hs,qt]=i.useState(!1),[gs,Ss]=i.useState("apple"),[Ut,Yt]=i.useState({number:!1,cvv:!1});i.useEffect(()=>{Xe===!1&&ht(!1)},[Xe]);const Dt=i.useRef("noAnimation"),Me=e.chargeCard?.cardHolderUserId===K.userId,gt=`${e.chargeCard?.cardHolderUser?.firstName??""} ${e.chargeCard?.cardHolderUser?.lastName??""}`,Kt=e.chargeCard?.billingAddress,Se=Qe.hasChargeCardAdminLevelAccess(Fe.loggedInUserRoleMap),{text1:Cs,text2:fs}=t.getAddressTexts(Kt),Xt=`${Cs} ${fs}`,St=e.chargeCard?.isDeclinedTransaction===!0,ys=()=>{Tt({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Re,isChargeCardAdmin:Se,analytics:et,controllerEmails:r,actionField:"Receipt Email",actionDetails:e.chargeCardConfig.receiptBotEmail}),ke(e.chargeCardConfig.receiptBotEmail),nt(!0)},js=()=>{k("card owner copied"),Tt({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Re,isChargeCardAdmin:Se,analytics:et,controllerEmails:r,actionField:"Card Owner",actionDetails:gt}),ke(gt),Nt(!0)},$s=()=>{k("billing address copied"),Tt({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:Re,isChargeCardAdmin:Se,analytics:et,controllerEmails:r,actionField:"Billing Address",actionDetails:Xt}),ke(Xt),Ft(!0)};i.useEffect(()=>{Ke===!0&&setTimeout(()=>{nt(!1)},800),Ae===!0&&setTimeout(()=>{Nt(!1)},800),ut===!0&&setTimeout(()=>{Ft(!1)},800)},[Ae,ut,Ke]);const[wl,vs]=i.useState(!1),[Jt,Qt]=i.useState(e.chargeCard?.cardColorCode!=null?new o.Color(e.chargeCard.cardColorCode):void 0);i.useEffect(()=>{e.chargeCard?.cardColorCode!=null&&Qt(new o.Color(e.chargeCard.cardColorCode))},[e.chargeCard?.cardColorCode]);const Vt={amount:e.chargeCard!=null?e.chargeCard.balance.amount:0,currencyCode:e.chargeCard!=null?e.chargeCard.balance.currencyCode:ve.currency.countryCode,currencySymbol:e.chargeCard!=null?e.chargeCard.balance.currencySymbol:ve.currency.currencySymbol};i.useEffect(()=>{E.current===!0?E.current=!1:k(Xe===!1?"card details hidden":"card detail revealed")},[Xe]);const eo=(W,Ce)=>{if(Ce===!0){const Ie=we.convertRGBToHex(W.toString())??ve.strings.empty;k("color selected",Ie),ge(Ie),vs(!1)}Qt(W)},to=W=>{const{cvv:Ce,number:Ie}=W;return Ce===!0||Ie===!0},{isMobileOrTabletScreen:oo}=t.useDeviceDetect(),Ct=e.chargeCard?.status.code!=="request_on_hold"&&e.chargeCard?.status.code!=="inactive",ft=e.updateChargeCardLimitFetchState.fetchState,yt=e.updateChargeCardNameFetchState.fetchState,jt=e.lockChargeCardsFetchState.fetchState,$t=e.closeChargeCardsFetchState.fetchState,so=t.usePrevious(ft),no=t.usePrevious(yt),ro=t.usePrevious(jt),io=t.usePrevious($t);i.useEffect(()=>{so==="In-Progress"&&ft==="Completed"?it(!1):no==="In-Progress"&&yt==="Completed"?mt(!1):ro==="In-Progress"&&jt==="Completed"?at(!1):io==="In-Progress"&&$t==="Completed"&&lt(!1)},[ft,yt,jt,$t,so,no,ro,io]);const Re=e.chargeCard?.type.code==="business_physical_debit_card"||e.chargeCard?.type.code==="business_virtual_debit_card",Rs=Se&&(e.chargeCard?.status.code==="active"||e.chargeCard?.status.code==="locked")&&Vt.amount<(Re?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit.amount??0:e.creditAccount.limit.amount),ws=e.creditAccountRepayment.initiatedRepayments.amount>0&&Se&&St,bs=()=>{if(!x)return[{value:"changePin",label:pe.cardDetails.moreOptions.changePin}];const W=[{value:"changePin",label:pe.cardDetails.moreOptions.changePin},{value:"unlock",label:pe.cardDetails.moreOptions.unlock},{value:"updateSpendLimit",label:pe.cardDetails.moreOptions.updateSpendLimit},{value:"rename",label:pe.cardDetails.moreOptions.rename},{value:"lock",label:pe.cardDetails.moreOptions.lock},{value:"close",label:pe.cardDetails.moreOptions.close},{value:"revokeInvite",label:pe.cardDetails.moreOptions.revokeInvite}],Ce=e.chargeCard?.status.code,Ie=Ce==="locked",ks=Ce==="inactive",Ps=Ce==="request_on_hold",zs=e.chargeCard?.isLockedByAdmin===!0,co=Re&&Me,ct=Se;if(Ps){const Le=[];return ct&&Le.push("revokeInvite"),Le.push("rename"),W.filter(vt=>Le.includes(vt.value))}if(ks){const Le=[];return Le.push("rename"),co&&Le.push("changePin"),ct&&Le.push("close"),W.filter(vt=>Le.includes(vt.value))}const As={changePin:co&&!Ie,lock:!Ie,unlock:Ie&&(Se||!zs),rename:!0,updateSpendLimit:ct,close:ct};return W.filter(Le=>As[Le.value])},ao=o.jsxRuntimeExports.jsx("div",{children:o.jsxRuntimeExports.jsx(Ms.MoreMenuButton,{entity:"debit_cards",isDisabled:e.unlockChargeCardsFetchState.fetchState==="In-Progress"?"disabled":void 0,onOptionSelection:W=>{W==="changePin"?(B==null||B.expiry.isBefore(new Date)?ne(e.loggedInUserPhone):xe(!0),_e(!0)):W==="updateSpendLimit"?it(!0):W==="rename"?mt(!0):W==="lock"?(at(!0),p()):W==="close"?(lt(!0),p()):W==="unlock"?n(Se):W==="revokeInvite"&&Te()},isMoreOption:!0,options:bs(),customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}}),valueContainer:W=>({...W,display:"flex",alignItems:"center"})}})}),lo=W=>W.reasonType==="other"?W.reason:W.reasonType,Es=W=>{const Ce=lo(W);q(Se,Ce)},Ls=W=>{const Ce=lo(W);a(Ce)},Ts=()=>{const W=e.chargeCard?.status.code;if(W==="closed"||W==="closed_by_customer")return null;if(!x)return Me&&Re?ao:null;if(!Me&&!Se)return null;const Ce=e.chargeCard?.isLockedByAdmin===!0;return Me&&!Se&&Ce&&W==="locked"?null:ao};return o.jsxRuntimeExports.jsxs(dl,{children:[ms&&e.chargeCard!=null&&o.jsxRuntimeExports.jsx(dt.LockCardPage,{showLockCardDrawer:!0,onCloseLockCardDrawer:()=>at(!1),isChargeCardAdmin:Se,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:F.recurringExpenses},cardRecurringExpenseFetchState:F.fetchState,lockCardFetchState:e.lockChargeCardsFetchState.fetchState,onConfirmClick:Es,onDismissClick:()=>at(!1),onRemoveCardClick:()=>{}}),xs&&e.chargeCard!=null&&o.jsxRuntimeExports.jsx(dt.CloseCardPage,{showCloseCardDrawer:!0,onCloseCloseCardDrawer:()=>lt(!1),isChargeCardAdmin:Se,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:F.recurringExpenses},cardRecurringExpenseFetchState:F.fetchState,closeCardFetchState:e.closeChargeCardsFetchState.fetchState,onConfirmClick:Ls,onDismissClick:()=>lt(!1),onRemoveCardClick:()=>{}}),Ge&&e.chargeCard?.cardProviderID!=null?o.jsxRuntimeExports.jsx(Fa,{signedInUserToken:B,vgsVaultId:C,onCancelClick:()=>{xe(!1),_e(!0)},isSandboxEnv:!0,cardProviderID:e.chargeCard?.cardProviderID,onChangePinSuccess:()=>{xe(!1),_e(!0)},onUpdateDebitCardPinAttempt:ae}):null,oo?null:o.jsxRuntimeExports.jsx(va,{isChargeCardAdmin:Se,controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:R,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:$,chargeCardCashbackDetailState:b,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,creditAccount:e.creditAccount,selectedColor:Jt,walletType:gs,onFireOnClickAnalytics:k,isSandboxEnv:V,chargeCardDetailView:e,vgsVaultId:C,signedInUserToken:B,showSecretInfo:Xe,changePinInProcess:Pe,setShowChangePinPopup:xe,isCardDetailErrored:Gt,cardDetailsFetchState:Ut,setCardDetailsFetchState:Yt,setIsCardDetailErrored:Zt,isCardDetailFetching:to,handleColorCodeClick:eo,isDrawerOpen:hs,setIsAddToWalletDrawerOpen:qt,onVerifyOtp:le,onVerifyOtpSuccess:M,onFireVerifyPopOnClickAnalytics:_,onResendOtp:v,setShowSecretInfo:xt,secretRevealed:_t,setSecretRevealed:ht,onGetOtp:ne,showDrawerAnimation:Dt}),o.jsxRuntimeExports.jsx(t.NavBar,{rightSideComponent:Ts(),navBarContainerStyles:{paddingTop:t.sp[2],alignItems:"center",paddingBottom:t.sp[2]},source:"ChargeCardDetailPage",title:e.chargeCard?.cardName??ve.strings.empty,subTitle:e.fetchState==="Completed"&&e.chargeCard!=null?o.jsxRuntimeExports.jsx(Bs.CardNumberSubText,{cardDetail:e.chargeCard,forDetailPage:!0}):void 0,showBackButton:!0,showMenuIcon:!1,backgroundColor:ie.colors.grey5,style:{zIndex:3},onBackClick:G,titleStyle:{marginTop:t.sp[0],...z==="small"&&{textAlign:"left"}},leftComponentStyle:z==="small"?{width:"10%"}:void 0,middleComponentStyle:z==="small"?{width:"80%"}:void 0,rightComponentStyle:z==="small"?{width:"10%"}:void 0}),o.jsxRuntimeExports.jsx(t.OtpPopupSection,{phoneNumberPopupDescription:pe.cardDetails.verifyPhoneNumberDescription,showOtpPopup:ls,showPhoneNumberPopup:ds,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:le,onVerifyOtpSuccess:W=>{M(W),Pe?xe(!0):xt(!0)},onFireVerifyPopOnClickAnalytics:_,setShowOtpPopup:cs,onResendOtp:v,setShowPhoneNumberPopup:Ot,onGetOtp:ne}),us&&o.jsxRuntimeExports.jsx(dt.RenamePopup,{currentCardName:e.chargeCard?.cardName??"",renameFetchState:e.updateChargeCardNameFetchState.fetchState,onCancelClick:()=>mt(!1),onSubmitClick:W=>{e.chargeCard&&ee(Se,W)}}),ps&&e.chargeCard!=null?o.jsxRuntimeExports.jsx(dt.UpdateSpendLimitPopup,{controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:R,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:$,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,cardDetail:e.chargeCard,transactionStatistics:e.transactionStatistics,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,signedInUser:K,isDebitCard:Re,cardIssuedByRoles:N,cardHolderRoles:Z,loggedInUserRole:Y,cardIssuedByDepartmentName:D,cardHolderDepartmentName:T,classListFetchState:d,currentLimitAmount:e.chargeCard?.limit??{amount:0,currencyCode:ve.currency.countryCode,currencySymbol:ve.currency.currencySymbol},currentSpentAmount:e.chargeCard?.balance??{amount:0,currencyCode:ve.currency.countryCode,currencySymbol:ve.currency.currencySymbol},maxLimitAmount:Re?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit:e.creditAccount.limit,isDisabled:Re&&e.depositAccountLimitFetchState.fetchState!=="Completed",updateLimitFetchState:e.updateChargeCardLimitFetchState.fetchState,onCancelClick:()=>it(!1),onSubmitClick:W=>{if(e.chargeCard){const Ce={amount:W,currencyCode:e.chargeCard.limit.currencyCode,currencySymbol:e.chargeCard.limit.currencySymbol};De(e.chargeCard.id,Ce,e.chargeCard.creditLimitFrequency,t.amountToString("0,0.[00]",Ce))}},recommendations:e?.chargeCard?.recommendations}):null,e.fetchState==="Error"?o.jsxRuntimeExports.jsxs(nl,{windowSize:z,children:[o.jsxRuntimeExports.jsx(al,{onClick:j,"data-testid":t.generateDataTestId("reload-card-detail"),children:o.jsxRuntimeExports.jsx(cl,{})}),o.jsxRuntimeExports.jsx(ll,{children:ve.reloadPage.label})]}):o.jsxRuntimeExports.jsxs(Ja,{children:[o.jsxRuntimeExports.jsx(tr,{controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:R,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:$,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,isDebitCard:Re,chargeCardCashbackDetailState:b,cardIssuedByRoles:N,cardIssuedByDepartmentName:D,cardHolderRoles:Z,cardHolderDepartmentName:T,classListFetchState:d,chargeCardDetailView:e,spent:Vt,isCardNotPending:Ct,cardOwnerName:gt,appleWalletLink:te,googleWalletLink:Q,addressToShow:Kt,secretRevealed:_t,isOwnCard:Me,vgsVaultId:C,showSecretInfo:Xe,isSandboxEnv:V,isCardDetailErrored:Gt,signedInUserToken:B,selectedColor:Jt,cardDetailsFetchState:Ut,setCardDetailsFetchState:Yt,setIsCardDetailErrored:Zt,setSecretRevealed:ht,isCardDetailFetching:to,handleColorCodeClick:eo,onFireOnClickAnalytics:k,setShowPhoneNumberPopup:Ot,setShowChangeSpendLimitPopup:it,setShowSecretInfo:xt,isOwnerNameCopied:Ae,isAddressCopied:ut,onOwnerNameCopyClick:js,onAddressCopyClick:$s,showUpdateSpendLimitAction:Rs,onUnlockChargeCard:n}),X?ws?o.jsxRuntimeExports.jsxs(Va,{windowSize:z,children:[o.jsxRuntimeExports.jsx(xl,{}),o.jsxRuntimeExports.jsx(tl,{children:` ${pe.payEarly.paymentOf} ${t.amountToString("0,0.[00]",e.creditAccountRepayment.initiatedRepayments)} ${pe.payEarly.madeOn} ${e.creditAccountRepayment.initiatedRepaymentDate?.format(Ka.visual.MMMDFormat)} ${pe.payEarly.isProcessing} ${pe.payEarly.theCompanyCreditLimitWillUpdateIn23BusinessDays}`})]}):St?Se?o.jsxRuntimeExports.jsxs(as,{onClick:()=>{de(!0)},windowSize:z,children:[o.jsxRuntimeExports.jsx(Oo,{windowSize:z}),o.jsxRuntimeExports.jsxs(rl,{children:[o.jsxRuntimeExports.jsx(_o,{children:pe.payEarly.transactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLow}),o.jsxRuntimeExports.jsxs(ol,{className:"pay-now-button",children:[pe.payEarly.payNow,o.jsxRuntimeExports.jsx(el,{})]})]})]}):o.jsxRuntimeExports.jsxs(Qa,{windowSize:z,children:[o.jsxRuntimeExports.jsx(Oo,{windowSize:z}),o.jsxRuntimeExports.jsx(il,{children:o.jsxRuntimeExports.jsx(_o,{children:pe.payEarly.yourTransactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLowWeHaveNotifiedYourAdmin})})]}):null:null,Me&&z!=="small"&&Ct&&Re===!1?o.jsxRuntimeExports.jsx(Ns,{style:{marginTop:St?t.Space.sp5:t.Space.sp4},classListFetchState:d,controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:R,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:$,chargeCardDetailView:e,creditAccount:w,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:y,creditAccountInformation:A,debitAccountInformation:H,cardIssuedByRoles:N,cardHolderRoles:Z,cardIssuedByDepartmentName:D,cardHolderDepartmentName:T,isDebitCard:Re,appleWalletLink:te,googleWalletLink:Q,setWalletType:Ss,setIsAddToWalletDrawerOpen:qt,showDrawerAnimation:Dt}):null,o.jsxRuntimeExports.jsxs(Rl,{windowSize:z,isOwnCard:Me,isMobileOrTabletScreen:oo,children:[Ct&&e.transactions.length>0?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsxs(ul,{windowSize:z,children:[pe.cardDetails.transactionListTitle,o.jsxRuntimeExports.jsx(t.Tooltip,{display:"flex",placement:"right",title:o.jsxRuntimeExports.jsx(hl,{children:pe.cardDetails.transactionListTooltip.replace("__receiptRequiredAboveAmount__",e.chargeCardConfig.receiptRequiredAboveAmount.amount.toString())}),children:o.jsxRuntimeExports.jsx(ml,{})})]}),o.jsxRuntimeExports.jsxs(gl,{windowSize:z,children:[o.jsxRuntimeExports.jsx(yl,{windowSize:z,children:o.jsxRuntimeExports.jsx(jl,{})}),o.jsxRuntimeExports.jsxs(pl,{windowSize:z,children:[o.jsxRuntimeExports.jsxs(Sl,{children:[o.jsxRuntimeExports.jsx(sl,{children:pe.aiCardAgentText}),ve.strings.space,pe.receiptBotMessage,ve.strings.space]}),o.jsxRuntimeExports.jsxs(fl,{"data-testid":t.generateDataTestId("charge-card-detail-copy-email"),onClick:ys,onMouseEnter:()=>rt(!0),onMouseLeave:()=>rt(!1),children:[o.jsxRuntimeExports.jsx(Cl,{children:e.chargeCardConfig.receiptBotEmail}),Ke===!0?o.jsxRuntimeExports.jsxs(Zo,{children:[o.jsxRuntimeExports.jsx(vl,{}),o.jsxRuntimeExports.jsx(Go,{children:o.jsxRuntimeExports.jsx(qo,{shouldDisplay:tt||Ke,color:t.Colors.primaryDark,children:ve.copyToClipBoard.copied})})]}):o.jsxRuntimeExports.jsxs(Zo,{children:[o.jsxRuntimeExports.jsx($l,{color:tt?ie.colors.primary:void 0}),o.jsxRuntimeExports.jsx(Go,{children:o.jsxRuntimeExports.jsx(qo,{shouldDisplay:tt&&z!=="small",children:ve.copyToClipBoard.copy})})]})]})]})]})]}):null,o.jsxRuntimeExports.jsx(Qi,{cardStatusCode:e.chargeCard?.status.code,cardCodeType:e.chargeCard?.type.code,cardId:S,documentAiReceiptMaxSizeLimit:oe,uploadReceiptsFetchStateByTransactionId:e.uploadReceiptsFetchStateByTransactionId,isSnackbarOpen:se,uploadReceiptsShowTickByTransactionId:e.uploadReceiptsShowTickByTransactionId,isViewReceiptClickedImmediatelyAfterUploadTransactionId:e.isViewReceiptClickedImmediatelyAfterUploadTransactionId,receiptRequiredAboveAmount:e.chargeCardConfig.receiptRequiredAboveAmount,cardsEndPoint:c,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:l,authParams:m,hideSorting:u,transactions:e.transactions,cardHolderUser:e.chargeCard?.cardHolderUser,uiState:e.uiState,fetchState:e.transactionListFetchState.fetchState,isAiCategorizationEnabledForCardsTransactions:e.chargeCardConfig.isAiCategorizationEnabledForCardsTransactions,onReloadTransactions:j,onFetchChargeCardTransactionList:O,isOwnCard:Me,onColumnSortConfigChanged:ce,removeSnackbar:ye,onChargeCardTransactionRowClick:ue,onUpdateScrollYOffset:Ne,onUploadReceiptComplete:$e,updateChargeCardTransactionAttachments:re,updateChargeCardTransactionUploadReceiptsFetchStatus:U,updateChargeCardTransactionReceiptsShowTick:J,updateChargeCardTransactionIsViewReceiptClicked:I})]})]})]})},Tt=({chargeCardDetailView:e,chargeCardCashbackDetailState:n,isChargeCardFeatureEnabled:a,productInformation:c,cashbackInformation:d,creditAccountInformation:h,debitAccountInformation:l,creditAccount:m,creditAccountRepayment:u,isDebitCard:S,isChargeCardAdmin:C,analytics:r,controllerEmails:x,actionDetails:g,actionField:R})=>{e.chargeCard!=null&&n.fetchState==="Completed"&&(!a||m.fetchState==="Completed"&&u.fetchState==="Completed")&&(!(S&&C)||e.depositAccountLimitFetchState.fetchState==="Completed")&&r.trackCardsCopyIconClick(x,c,"Cards Detail","Copy","copied",R,g,d,h,l)},Ja=s.div``,as=s.div`
+  background: ${t.Colors.important};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${t.Space.sp3};
+  padding-bottom: ${t.Space.sp3};
+  padding-left: ${({windowSize:e})=>Ee.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>Ee.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${t.Space.sp1};
+  align-items: start;
+  cursor: pointer;
+  :hover {
+    .pay-now-button {
+      text-decoration: underline;
+    }
+  }
+`,Qa=s(as)``,Va=s.div`
+  background: ${t.Colors.alertLight};
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  padding-top: ${t.Space.sp3};
+  padding-bottom: ${t.Space.sp3};
+  padding-left: ${({windowSize:e})=>Ee.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>Ee.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${t.Space.sp2};
+`,Oo=s(t.SvgHighImportanceFilled)`
+  color: ${e=>e.theme.colors.grey5};
+  margin-right: ${({windowSize:e})=>Ee.styledHighImportanceIconMarginRight.valuePx(e)};
+  min-width: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  path:nth-child(2),
+  path:nth-child(3) {
+    stroke: ${t.Colors.important};
+  }
+`,el=s(t.SvgArrowRight)`
+  color: ${e=>e.theme.colors.grey5};
+  min-width: 12px;
+  width: 12px;
+  height: 12px;
+`,_o=s(t.StandardRegularSp)`
+  color: ${e=>e.theme.colors.grey5};
+`,tl=s(t.StandardRegularSp)`
+  color: ${t.Colors.brandColorGoldDark};
+`,ol=s(t.StandardMediumSp)`
+  color: ${e=>e.theme.colors.grey5};
+  gap: ${t.Space.sp1};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+`,sl=s(t.StandardSemiBoldSp)`
+  color: ${e=>e.theme.colors.brandColorSapphire};
+  ${({theme:e})=>e.mode==="dark"&&`color: ${t.Colors.brandColorPearl};`}
+`,nl=s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - ${e=>t.navBarHeight.valuePx(e.windowSize)});
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${e=>e.theme.colors.grey5};
+`,rl=s.div``,il=s.div``,al=s.div`
+  height: ${t.Space.sp12};
+  width: ${t.Space.sp12};
+  background: ${e=>e.theme.colors.background};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${t.Space.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,ll=s(t.SmallRegularSp)`
+  margin-top: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,cl=s(t.SvgReload)`
+  height: ${t.Space.sp5};
+  width: ${t.Space.sp5};
+  margin: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,dl=s.div`
+  background: ${e=>e.theme.colors.grey4};
+`,pl=s.div`
+  width: 100%;
+  max-width: ${e=>e.windowSize==="small"?"calc(100% - 20px)":"unset"};
+`,ul=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${t.Space.sp3};
+  display: flex;
+  align-items: center;
+  margin-right: ${e=>Ee.bottomContentContainerPadding.valuePx(e.windowSize)};
+  margin-left: ${e=>Ee.bottomContentContainerPadding.valuePx(e.windowSize)};
+`,ml=s(t.SvgInfo)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  margin-left: ${t.Space.sp2};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,xl=s(t.SvgInfo)`
+  color: ${t.Colors.brandColorGoldDark};
+  min-width: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,hl=s(t.SmallRegular)`
+  padding: 2px ${t.Space.sp2};
+  box-sizing: content-box;
+  color: ${e=>e.theme.colors.hero};
+  background: ${e=>e.theme.colors.black};
+  border-radius: ${t.Space.sp1};
+  max-width: 178px;
+  text-align: left;
+`,gl=s.div`
+  display: flex;
+  border: 1.25px solid transparent;
+  background: ${e=>`linear-gradient(${e.theme.colors.grey4}, ${e.theme.colors.grey4}) padding-box,
+    ${t.Colors.receiptAgentLinearGradient}
+      border-box`};
+  padding: ${t.Space.sp3} ${t.Space.sp4};
+  border-radius: ${t.Space.sp2};
+  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
+  gap: ${t.Space.sp1};
+  margin: 0
+    ${e=>Ee.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
+`,Sl=s(t.StandardRegularSp)`
+  color: ${e=>e.theme.colors.primary};
+`,Cl=s(t.StandardMediumSp)`
+  color: ${e=>e.theme.colors.primary};
+`,fl=s.span`
+  cursor: pointer;
+`,Go=s.span`
+  position: absolute;
+  bottom: -${t.Space.sp5};
+  z-index: 10;
+  left: ${t.Space.sp2};
+`,Zo=s.span`
+  position: relative;
+  margin-left: ${t.Space.sp1};
+  top: 2px;
+`,qo=s(t.SmallRegular)`
+  position: relative;
+  background: ${e=>e.theme.colors.black};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.grey1};
+  padding: 2px ${t.Space.sp2};
+  z-index: 10;
+  border-radius: ${t.Space.sp1};
+  left: -50%;
+  display: ${e=>e.shouldDisplay?"block":"none"};
+`,yl=s.div`
+  width: ${e=>Ee.styledAIIconContainerSize.valuePx(e.windowSize)};
+  min-width: ${e=>Ee.styledAIIconContainerSize.valuePx(e.windowSize)};
+  height: ${e=>Ee.styledAIIconContainerSize.valuePx(e.windowSize)};
+  top: ${t.Space.sp1};
+  position: ${e=>e.windowSize==="small"?"relative":"static"};
+`,jl=s(t.SvgAiIcon)`
+  color: ${e=>e.theme.colors.brandColorJade};
+  width: 100%;
+  height: 100%;
+`,$l=s(t.SvgCopy)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,vl=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`,Rl=s.div`
+  padding-top: ${e=>e.isOwnCard?e.isMobileOrTabletScreen?t.Space.sp3:t.Space.sp4:t.Space.sp5};
+  padding-bottom: ${t.Space.sp4};
+`;exports.default=Xa;