@zeniai/web-components 3.16.55 → 3.16.57

package/dist/LockCardPage-CHbw90AT.cjs

@@ -0,0 +1,623 @@
+"use strict";const o=require("./vendor-.pnpm-BW93Fnli.cjs"),K=require("react"),s=require("@emotion/styled"),e=require("./index-C8marfrT.cjs"),Oe=require("@zeniai/client-epic-state"),se=require("./ChargeCardUtils-CyQT0vH9.cjs"),ye=require("./RoleWithToolTip-B3Pd437z.cjs"),ve=require("./CardNumberSubText-lrW7Z41n.cjs"),G="cardName",re=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.renamePopup;function He({currentCardName:t,renameFetchState:g,onCancelClick:c,onSubmitClick:p}){const l=e.useWindowSizeContext(),S="RenameCardForm",a=o.useForm({mode:"all",defaultValues:{[G]:t},values:{[G]:t}});K.useEffect(()=>{a.setFocus(G)},[]);const m=()=>{c()},F=a.handleSubmit(()=>{const h=a.getValues(G);h!=null&&p(h)}),z=o.has(a.formState.errors,G),r=e.appLocale.getLocalizedStrings().common,T=ee.largeLabelWidth.value(l);return o.jsxRuntimeExports.jsx(We,{windowSize:l,role:"presentation",children:o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>c(),children:o.jsxRuntimeExports.jsxs(_e,{windowSize:l,children:[o.jsxRuntimeExports.jsx(o.FormProvider,{...a,children:o.jsxRuntimeExports.jsxs(qe,{id:S,onSubmit:h=>{h.preventDefault(),F()},children:[o.jsxRuntimeExports.jsx(De,{windowSize:l,children:re.heading}),o.jsxRuntimeExports.jsx(Ve,{hasError:z,children:o.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:re.newName,width:T},style:{width:"auto"},text:{type:"text",name:G,defaultValue:t,placeholder:re.placeholder,options:{required:!0,validate:h=>h!=null}}})})]})}),o.jsxRuntimeExports.jsx(Ae,{children:o.jsxRuntimeExports.jsxs(Ue,{children:[o.jsxRuntimeExports.jsx(e.Button,{label:r.cancel,onClick:m,style:{width:84}}),o.jsxRuntimeExports.jsx(Be,{}),o.jsxRuntimeExports.jsx(e.Button,{variant:"primary",label:r.texts.update,style:{width:84,whiteSpace:"nowrap"},loading:g==="In-Progress",type:"submit",form:S})]})})]})})})}const ee={width:new e.ResponsiveSized(343,500,500),largeLabelWidth:new e.ResponsiveSized(108,108,108),popupLeftRightPadding:new e.ResponsiveSized(e.sp[5],e.sp[6]),popupTopBottomPadding:new e.ResponsiveSized(e.sp[5],e.sp[5])},We=s.div`
+  position: fixed;
+  top: ${e.Space.sp0};
+  left: ${e.Space.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${e.Colors.overlayDark};
+`,_e=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${t=>t.theme.colors.grey4};
+  border-radius: ${e.Space.sp2};
+  position: relative;
+  margin: auto;
+  width: ${t=>ee.width.valuePx(t.windowSize)};
+  padding: ${t=>`${ee.popupTopBottomPadding.valuePx(t.windowSize)} ${ee.popupLeftRightPadding.valuePx(t.windowSize)}`};
+  box-sizing: border-box;
+`,De=s(e.H6Medium)`
+  color: ${t=>t.theme.colors.primary};
+  margin-bottom: ${e.Space.sp3};
+`,Ue=s.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${e.Space.sp4};
+`,Be=s.div`
+  width: ${e.Space.sp3};
+`,Ae=s.div`
+  display: flex;
+  flex-direction: column;
+`,Ve=s.div`
+  border: ${t=>`1px solid ${t.theme.colors.grey3}`};
+  box-shadow: ${t=>`${e.Space.sp0} 1px 2px ${e.Space.sp0} ${t.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${e.Space.sp2};
+  background-color: ${t=>t.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${t=>`1px solid ${t.theme.colors.primary}`};
+    input {
+      background-color: ${t=>t.hasError?e.Colors.importantLight:t.theme.colors.background} !important;
+    }
+  }
+`,qe=s.form`
+  display: contents;
+`,X="spendLimit",Y=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup,{dateFormat:ie}=e.appLocale.getLocalizedStrings();function Ye({controllerEmails:t,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:c,isDebitCardSetupEnabled:p,isChargeCardSetupEnabled:l,cardDetail:S,transactionStatistics:a,depositAccountLimitFetchState:m,creditAccount:F,creditAccountRepayment:z,signedInUser:r,isDebitCard:T,classListFetchState:h,currentLimitAmount:_,currentSpentAmount:D,productInformation:$,creditAccountInformation:U,debitAccountInformation:B,maxLimitAmount:O,isDisabled:V,updateLimitFetchState:q,recommendations:P,cardIssuedByRoles:A,cardHolderRoles:x,loggedInUserRole:k,cardIssuedByDepartmentName:C,cardHolderDepartmentName:i,onCancelClick:f,onSubmitClick:n}){const L=e.useToolkitContext().analytics,j=e.useWindowSizeContext(),Z="SpendLimitForm",Ee=e.useGlobalInfoContext();Oe.hasChargeCardAdminLevelAccess(Ee.loggedInUserRoleMap);const Q=o.useForm({mode:"onBlur",reValidateMode:"onBlur",defaultValues:{[X]:void 0}}),{control:Te,formState:{errors:Ce}}=Q,[ze,Pe]=K.useState(void 0),I=o.useWatch({control:Te,name:X}),ce=S?.type.code.includes("physical")===!0?S.cardActivationAttemptHistory[0]?.timestamp:S?.createTime,de=(S?.recommendations??[]).map(u=>u.creditLimit.amount),ke=()=>{S!=null&&xe({analytics:L,controllerEmails:t,isChargeCardFeatureEnabled:g,cardDetail:S,transactionStatistics:a,depositAccountLimitFetchState:m,creditAccount:F,creditAccountRepayment:z,signedInUser:r,isDebitCard:T,classListFetchState:h,currentLimitAmount:_,recommendedLimitAmounts:de,cardActivationDate:ce,cardIssuedByRoles:A,cardHolderRoles:x,cardIssuedByDepartmentName:C,cardHolderDepartmentName:i,loggedInUserRole:k,clickItem:"Cancel",newSpendLimitAmount:I,productInformation:$,creditAccountInformation:U,debitAccountInformation:B}),f()},Le=Q.handleSubmit(()=>{const u=Q.getValues(X);u!=null&&(xe({analytics:L,controllerEmails:t,isChargeCardFeatureEnabled:g,cardDetail:S,transactionStatistics:a,depositAccountLimitFetchState:m,creditAccount:F,creditAccountRepayment:z,signedInUser:r,isDebitCard:T,classListFetchState:h,currentLimitAmount:_,recommendedLimitAmounts:de,cardActivationDate:ce,cardIssuedByRoles:A,cardHolderRoles:x,cardIssuedByDepartmentName:C,cardHolderDepartmentName:i,loggedInUserRole:k,productInformation:$,creditAccountInformation:U,debitAccountInformation:B,clickItem:"Update",newSpendLimitAmount:u}),n(u))}),Ne=u=>{Q.setValue(X,u,{shouldValidate:!0})},me=o.has(Ce,X),oe=e.appLocale.getLocalizedStrings().common,Me=te.largeLabelWidth.value(j);K.useEffect(()=>{Pe(Ge(D,O,I))},[I,D,O]);const Fe=(u,J)=>o.jsxRuntimeExports.jsxs(st,{isSelected:I===u.amount,onClick:()=>Ne(u.amount),"data-testid":e.generateDataTestId("quick-amount-button",J.toString()),children:[J===1&&o.jsxRuntimeExports.jsx(rt,{}),e.amountToString("0,0.[00]",u)]},J);return o.jsxRuntimeExports.jsx(Xe,{windowSize:j,role:"presentation","data-testid":e.generateDataTestId("update-spend-limit-popup"),children:o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>f(),children:o.jsxRuntimeExports.jsxs(Qe,{windowSize:j,children:[o.jsxRuntimeExports.jsx(o.FormProvider,{...Q,children:o.jsxRuntimeExports.jsxs(it,{id:Z,onSubmit:u=>{u.preventDefault(),Le()},children:[o.jsxRuntimeExports.jsx(Je,{windowSize:j,children:Y.heading}),o.jsxRuntimeExports.jsxs(Ke,{windowSize:j,children:[Y.currentLimit,oe.strings.space," ",e.amountToString("0,0.[00]",_),Y.slashMonth]}),o.jsxRuntimeExports.jsxs(tt,{hasError:me,children:[o.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:Y.newLimit,width:Me},showAdditionalInfoLabel:me,additionalInfoLabel:ze,formattedTextField:{type:"number",name:X,defaultValue:void 0,placeholder:Y.placeholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:u=>!!u&&u>0&&u>D.amount&&(O!=null?u<=O.amount:!0)},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto"},showOutlineOnFocus:!1}),P?.length?o.jsxRuntimeExports.jsx(ot,{windowSize:j,children:P?.map((u,J)=>Fe(u.creditLimit,J))}):null]})]})}),o.jsxRuntimeExports.jsx(et,{children:o.jsxRuntimeExports.jsxs(Ze,{children:[o.jsxRuntimeExports.jsx(e.Button,{label:oe.cancel,onClick:ke,style:{width:84},"data-testid":e.generateDataTestId("update-spend-limit-cancel-button")}),o.jsxRuntimeExports.jsx(Ie,{}),o.jsxRuntimeExports.jsx(e.Button,{variant:"primary",label:oe.texts.update,style:{width:84,whiteSpace:"nowrap"},loading:q==="In-Progress",type:"submit",form:Z,"data-testid":e.generateDataTestId("update-spend-limit-submit-button"),disabled:V})]})})]})})})}const Ge=(t,g,c)=>{if(c!=null){if(c<=t.amount)return Y.amountBelowError.replace("_amount_",e.amountToString("0,0.[00]",t));if(g!=null&&c>g.amount)return Y.amountExceedError.replace("_amount_",e.amountToString("0,0.[00]",g))}},xe=({analytics:t,controllerEmails:g,isChargeCardFeatureEnabled:c,productInformation:p,creditAccountInformation:l,debitAccountInformation:S,cardDetail:a,transactionStatistics:m,depositAccountLimitFetchState:F,creditAccount:z,creditAccountRepayment:r,signedInUser:T,isDebitCard:h,classListFetchState:_,currentLimitAmount:D,recommendedLimitAmounts:$,cardActivationDate:U,cardIssuedByRoles:B,cardHolderRoles:O,cardIssuedByDepartmentName:V,cardHolderDepartmentName:q,loggedInUserRole:P,clickItem:A,newSpendLimitAmount:x})=>{a!=null&&_==="Completed"&&m!=null&&m.fetchState==="Completed"&&(!c||z.fetchState==="Completed"&&r.fetchState==="Completed")&&(!h||F==="Completed")&&t.trackCardsUpdateSpendLimitClick(g,p,{cardId:a.id,cardName:a.cardName,cardType:se.getCardTypeForAnalytics(a.type.code),cardCategory:a.type.code.includes("physical")?"physical":"virtual",cardLimit:e.roundAmountIfNeeded(a.limit.amount),cardLastFourDigits:a.accountLast4,cardStatus:a.status.code,cardAssignedDate:a.createTime?.format(ie.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:a.providerCardCreateTime?.format(ie.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:U?.format(ie.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:a.creditLimitFrequency.name,cardSpentAmount:e.roundAmountIfNeeded(a.balance.amount),cardAvailableLimit:e.roundAmountIfNeeded(a.available.amount),cardUtilizationPercent:se.calculateCardUtilizationPercent(a.limit.amount,a.available.amount),cardUtilizationAmount:e.roundAmountIfNeeded(se.getCardUtilizedAmount(a)),totalNumberOfDeclinedTransactions:m.statistics.totalNumberOfDeclinedTransactions,numberOfDeclinedTransactionsCurrentMonth:m.statistics.numberOfDeclinedTransactionsCurrentMonth,totalNumberOfPaidTransactions:m.statistics.totalNumberOfPaidTransactions,numberOfPaidTransactionsCurrentMonth:m.statistics.numberOfPaidTransactionsCurrentMonth,totalNumberOfCanceledTransactions:m.statistics.totalNumberOfCanceledTransactions,numberOfCanceledTransactionsCurrentMonth:m.statistics.numberOfCanceledTransactionsCurrentMonth,totalNumberOfAuthorizedTransactions:m.statistics.totalNumberOfAuthorizedTransactions,numberOfAuthorizedTransactionsCurrentMonth:m.statistics.numberOfAuthorizedTransactionsCurrentMonth,totalNumberOfTransactionsWithReceipts:m.statistics.totalNumberOfTransactionsWithReceipts,numberOfTransactionsWithReceiptsCurrentMonth:m.statistics.numberOfTransactionsWithReceiptsCurrentMonth},{cardIssuedByName:e.getFullName(a.cardCreatedByUser,!1),cardIssuedByEmail:a.cardCreatedByUser?.email,cardIssuedByUserId:a.cardCreatedByUser?.userId,cardIssuedByRole:B,cardIssuedByDepartment:V},{cardholderName:e.getFullName(a.cardHolderUser,!1),cardholderEmail:a.cardHolderUser?.email,cardholderRole:O,cardholderUserId:a.cardHolderUser?.userId,cardholderDepartment:q},{cardLimitUpdatedByName:e.getLoggedInUserName(T),cardLimitUpdatedByEmail:T.userEmail,cardLimitUpdatedByRole:P,cardLimitUpdatedByUserId:T.userId},A,e.roundAmountIfNeeded(D.amount),$,x!=null?$.includes(x):!1,x,l,S)},te={width:new e.ResponsiveSized(343,500,500),largeLabelWidth:new e.ResponsiveSized(108,108,108),popupLeftRightPadding:new e.ResponsiveSized(e.sp[5],e.sp[6]),popupTopBottomPadding:new e.ResponsiveSized(e.sp[5],e.sp[5])},Xe=s.div`
+  position: fixed;
+  top: ${e.Space.sp0};
+  left: ${e.Space.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${e.Colors.overlayDark};
+`,Qe=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${t=>t.theme.colors.grey4};
+  border-radius: ${e.Space.sp2};
+  position: relative;
+  margin: auto;
+  width: ${t=>te.width.valuePx(t.windowSize)};
+  padding: ${t=>`${te.popupTopBottomPadding.valuePx(t.windowSize)} ${te.popupLeftRightPadding.valuePx(t.windowSize)}`};
+  box-sizing: border-box;
+`,Je=s(e.H6Medium)`
+  color: ${t=>t.theme.colors.primary};
+  margin-bottom: ${e.Space.sp2};
+`,Ke=s(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin-bottom: ${e.Space.sp3};
+`,Ze=s.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${e.Space.sp4};
+`,Ie=s.div`
+  width: ${e.Space.sp3};
+`,et=s.div`
+  display: flex;
+  flex-direction: column;
+`,tt=s.div`
+  border: ${t=>`1px solid ${t.theme.colors.grey3}`};
+  box-shadow: ${t=>`${e.Space.sp0} 1px 2px ${e.Space.sp0} ${t.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${e.Space.sp2};
+  background-color: ${t=>t.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${t=>`1px solid ${t.theme.colors.primary}`};
+    input {
+      background-color: ${t=>t.hasError?e.Colors.importantLight:t.theme.colors.background} !important;
+    }
+  }
+`,ot=s.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${e.Space.sp2};
+  margin: ${e.Space.sp0} ${e.Space.sp4} ${e.Space.sp3} ${e.Space.sp4};
+`,st=s(e.StandardRegular)`
+  color: ${t=>t.isSelected?t.theme.colors.primary:t.theme.colors.hero};
+  border: 1px solid
+    ${t=>t.isSelected?t.theme.colors.primary:t.theme.colors.grey2};
+  border-radius: ${e.Space.sp1};
+  padding: 2px ${e.Space.sp2};
+  background-color: ${t=>t.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  :hover {
+    color: ${t=>t.theme.colors.primary};
+    border: ${t=>`1px solid ${t.theme.colors.primary}`};
+  }
+`,rt=s(e.SvgAutofill3)`
+  color: ${e.Colors.brandColorJade};
+  fill: ${e.Colors.brandColorJade};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+`,it=s.form`
+  display: contents;
+`,v={navBarContainerPaddingXaxis:new e.ResponsiveSized(10,19),containerPaddingLeft:new e.ResponsiveSized(16,40,56),containerPaddingRight:new e.ResponsiveSized(16,40,56),successContentMargin:new e.ResponsiveSized(e.sp[3],e.sp[12]),buttonTrayGap:new e.ResponsiveSized(e.sp[4],e.sp[5]),largeLabelWidth:new e.ResponsiveSized(120,120,200),webkitLineClamp:new e.ResponsiveSized(2,1,1,1,1),overlayWidth:new e.ResponsiveSized(100,100,58),cardHolderDetailsPaddingX:new e.ResponsiveSized(e.sp[3],e.sp[4]),cardNameSectionMarginLeft:new e.ResponsiveSized(e.sp[7],0),cardHolderDetailsGap:new e.ResponsiveSized(e.sp[1],0),recurringExpenseMerchantWidth:new e.ResponsiveSized(112,240),recurringExpenseNextPaymentDateWidth:new e.ResponsiveSized(112,104),recurringExpenseAmountWidth:new e.ResponsiveSized(100,312),reasonTextFieldMarginTop:new e.ResponsiveSized(e.sp[3],0)},{common:w,closeCard:H}=e.appLocale.getLocalizedStrings().spendManagement.chargeCard,b="reasonSection",ue="closeCardPage",N=(t,g)=>`${t}.${g}`,he=t=>`${t}_form`,{common:ne,dateFormat:nt,cockpit:at}=e.appLocale.getLocalizedStrings(),lt=({showCloseCardDrawer:t,onCloseCloseCardDrawer:g,isChargeCardAdmin:c,chargeCardsByCardId:p,cardRecurringExpensesByCardId:l,cardRecurringExpenseFetchState:S,closeCardFetchState:a,onRemoveCardClick:m,onConfirmClick:F,onDismissClick:z})=>{const r=e.useWindowSizeContext(),T=o.useTheme(),[h,_]=K.useState(Object.fromEntries(Object.keys(l).map((i,f)=>[i,f===0]))),D=i=>{_(f=>f[i]?{...f,[i]:!1}:{...Object.fromEntries(Object.keys(f).map(n=>[n,!1])),[i]:!0})},$=o.useForm({mode:"all",reValidateMode:"onBlur",defaultValues:{[b]:{reason:void 0,reasonType:void 0}},values:{[b]:{reason:void 0,reasonType:void 0}}}),U=v.largeLabelWidth.value(r),{isValid:B,errors:O}=$.formState,V=i=>`${p[i].cardHolderUser?.firstName??""} ${p[i].cardHolderUser?.lastName??""}`,q=o.has(O,N(b,"reasonType")),P=$.watch("reasonSection.reasonType"),A=$.handleSubmit(()=>{if(B){const i=$.getValues(),f={reason:i[b].reason,reasonType:i[b].reasonType};F(f)}}),x=Object.keys(l).length>1,k=Object.keys(l).length,C=Object.values(l).reduce((i,f)=>i+f.length,0);return o.jsxRuntimeExports.jsx(o.Drawer,{anchor:"right",open:t,onClose:g,PaperProps:{style:{width:v.overlayWidth.valuePercentage(r),boxShadow:"none"}},slotProps:{backdrop:{style:{backgroundColor:T.colors.black,opacity:.75,cursor:"pointer"}}},transitionDuration:250,children:o.jsxRuntimeExports.jsxs(pt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(ct,{windowSize:r,children:[o.jsxRuntimeExports.jsx(dt,{windowSize:r,children:o.jsxRuntimeExports.jsx(xt,{onClick:()=>{z()}})}),r==="small"?o.jsxRuntimeExports.jsx(Rt,{windowSize:r,children:x?H.closeCards:H.closeCard}):o.jsxRuntimeExports.jsx(ft,{children:x?H.closeCards:H.closeCard}),S==="Completed"?o.jsxRuntimeExports.jsx(o.FormProvider,{...$,children:o.jsxRuntimeExports.jsxs("form",{id:he(ue),onSubmit:A,children:[o.jsxRuntimeExports.jsxs(bt,{children:[o.jsxRuntimeExports.jsx(yt,{windowSize:r,children:x?C>0?`${H.multipleCardsHasRecurringExpenses.replace("_number_of_cards_",k.toString()).replace("_number_of_recurring_expenses_",C.toString())} ${C===1?w.expense:w.expenses} ${H.multipleCardsHasRecurringExpensesSuffix}`:H.multipleCardsNoRecurringExpenses.replace("_number_of_cards_",k.toString()):H.firstCardHasRecurringExpenses.replace("_number_of_recurring_expenses_",C.toString()).replace("_expense_",C===1?w.expense:w.expenses)}),x&&o.jsxRuntimeExports.jsx(Bt,{children:`${k} ${k===1?w.card:w.cards} ${w.selected}`}),Object.keys(l).map((i,f)=>{const n=l[i].length>0;return o.jsxRuntimeExports.jsxs(vt,{onClick:()=>n?D(i):void 0,isMoreThanOneCard:x,isLastCard:f===Object.keys(l).length-1,children:[o.jsxRuntimeExports.jsxs(Tt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Ct,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(zt,{windowSize:r,children:[p[i].cardHolderUser?.photo!==void 0?o.jsxRuntimeExports.jsx(ut,{src:p[i].cardHolderUser?.photo.href,alt:at.userProfileAltText,onError:({currentTarget:d})=>{d.onerror=null,d.src=e.AvatarSVG},loading:"lazy"}):o.jsxRuntimeExports.jsx(e.EntityAvatarWithInitials,{firstName:p[i].cardHolderUser?.firstName??"",lastName:p[i].cardHolderUser?.lastName??"",size:e.Space.sp6}),o.jsxRuntimeExports.jsxs("div",{children:[o.jsxRuntimeExports.jsx(Et,{children:V(i)}),o.jsxRuntimeExports.jsx(Pt,{children:o.jsxRuntimeExports.jsx(ye.RoleWithToolTip,{roles:p[i].cardHolderRoles.userRoles})})]})]}),r==="small"&&n&&(h[i]?o.jsxRuntimeExports.jsx(Se,{}):o.jsxRuntimeExports.jsx($e,{}))]}),o.jsxRuntimeExports.jsxs(kt,{windowSize:r,children:[p[i].cardName,o.jsxRuntimeExports.jsx(ve.CardNumberSubText,{cardDetail:p[i],forDetailPage:!0,styles:{...e.textStyles.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),o.jsxRuntimeExports.jsxs(Lt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(_t,{children:[o.jsxRuntimeExports.jsx(Dt,{children:l[i].length}),o.jsxRuntimeExports.jsx(Wt,{children:w.recurringExpenses})]}),r!=="small"&&n&&(h[i]?o.jsxRuntimeExports.jsx(Se,{}):o.jsxRuntimeExports.jsx($e,{}))]})]}),x&&o.jsxRuntimeExports.jsx(St,{children:o.jsxRuntimeExports.jsx(e.Tooltip,{variant:"standard",title:ne.remove,children:o.jsxRuntimeExports.jsx(gt,{onClick:()=>m(i)})})}),h[i]&&n&&o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(ge,{}),o.jsxRuntimeExports.jsxs(Nt,{children:[o.jsxRuntimeExports.jsxs(Ut,{children:[o.jsxRuntimeExports.jsx(le,{width:r==="small"?112:240,children:w.merchant}),o.jsxRuntimeExports.jsx(le,{width:r==="small"?112:104,children:w.nextPaymentDate}),o.jsxRuntimeExports.jsx(At,{width:r==="small"?100:312,children:w.amount})]}),l[i].map((d,L)=>o.jsxRuntimeExports.jsxs("div",{children:[L>0&&o.jsxRuntimeExports.jsx(ge,{}),o.jsxRuntimeExports.jsxs(Mt,{children:[o.jsxRuntimeExports.jsxs(Ft,{windowSize:r,children:[o.jsxRuntimeExports.jsx($t,{src:d.merchant.logo?.url?.href}),o.jsxRuntimeExports.jsx(ht,{windowSize:r,children:d.merchant.brandName??d.merchant.name})]}),o.jsxRuntimeExports.jsx(Ot,{windowSize:r,children:d.nextPaymentDate.format(nt.visual.MMMDCommaYYYYformat)}),o.jsxRuntimeExports.jsx(Ht,{windowSize:r,children:e.amountToString("0,0.00",d.amount)})]},d.merchant.name)]},d.merchant.name))]})]})]},i)})]}),o.jsxRuntimeExports.jsx(qt,{windowSize:r,children:w.letUsKnowWhy}),o.jsxRuntimeExports.jsxs(Vt,{isReasonTextFieldVisible:P==="other",children:[o.jsxRuntimeExports.jsxs(jt,{size:r,children:[o.jsxRuntimeExports.jsx(e.Label,{label:w.reasonLabel,htmlFor:N(b,"reasonType"),style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,width:"fit-content"}}),o.jsxRuntimeExports.jsxs(wt,{labelWidth:U,size:r,children:[o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:w.reason.lost},style:{width:"auto"},radioField:{name:N(b,"reasonType"),id:`${N(b,"reasonType")}.Lost or stolen`,value:"Lost or stolen",style:{height:e.Space.sp3,width:e.Space.sp3},registerOptions:{required:!c,validate:i=>c?!0:!!i},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:w.reason.fraud},style:{width:"auto"},radioField:{name:N(b,"reasonType"),id:`${N(b,"reasonType")}.Fraud detected`,value:"Fraud detected",style:{height:e.Space.sp3,width:e.Space.sp3},registerOptions:{required:!c,validate:i=>c?!0:!!i},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:w.reason.not_needed},style:{width:"auto"},radioField:{name:N(b,"reasonType"),id:`${N(b,"reasonType")}.Not needed`,value:"Not needed",style:{height:e.Space.sp3,width:e.Space.sp3},registerOptions:{required:!c,validate:i=>c?!0:!!i},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:w.reason.other},style:{width:"auto"},radioField:{name:N(b,"reasonType"),id:`${N(b,"reasonType")}.other`,value:"other",style:{height:e.Space.sp3,width:e.Space.sp3},registerOptions:{required:!c,validate:i=>c?!0:!!i},radioSize:"small"}})]})]}),P==="other"?o.jsxRuntimeExports.jsx(e.TextField,{style:{height:e.Space.sp6,width:"100%",backgroundColor:T.colors.background,marginTop:`${v.reasonTextFieldMarginTop.valuePx(r)}`},type:"text",name:N(b,"reason"),placeholder:H.reasonPlaceholder,className:"reason-text-field",registerOptions:{required:!c,validate:i=>c?!0:!!i}}):P==null&&!c&&q?o.jsxRuntimeExports.jsx(mt,{children:H.youNeedToProvideReasonToCloseCard}):null]})]})}):o.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Standard",start:!0,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"calc(100vh - 210px)"}})]}),S==="Completed"&&o.jsxRuntimeExports.jsx(e.Footer,{style:{zIndex:4,paddingTop:e.Space.sp3,paddingBottom:e.Space.sp3},formId:he(ue),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:ne.confirm,isLoading:a==="In-Progress",variant:"danger"},cancelBtn:{label:ne.cancel,style:{width:"90px"},onClick:()=>{z?.()}}})]})})},pt=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`,ct=s.div`
+  height: auto;
+  padding-left: ${t=>`${v.containerPaddingLeft.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${v.containerPaddingRight.valuePx(t.windowSize)}`};
+  margin-bottom: auto;
+`,dt=s.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${e.Space.sp0};
+  padding: ${t=>`${v.navBarContainerPaddingXaxis.valuePx(t.windowSize)} ${e.Space.sp0}`};
+  z-index: 2;
+  background-color: ${t=>t.theme.colors.grey4};
+`,mt=s(e.SmallRegular)`
+  color: ${t=>t.theme.colors.important};
+  text-align: end;
+`,xt=s(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,ut=s.img`
+  height: ${e.Space.sp6};
+  width: ${e.Space.sp6};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${t=>t.theme.colors.hero};
+`,ht=s(e.StandardRegular)`
+  margin-right: ${e.Space.sp3};
+  color: inherit;
+  -webkit-line-clamp: ${t=>v.webkitLineClamp.value(t.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,gt=s(e.SvgCloseRound)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  min-height: ${e.Space.sp3};
+  background-color: ${t=>t.theme.colors.grey5};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,St=s.div`
+  position: absolute;
+  right: -${e.Space.sp2};
+  top: -${e.Space.sp2};
+`,$t=s.img`
+  display: flex;
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-width: ${e.Space.sp4};
+`,jt=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-top: ${e.Space.sp2};
+  align-items: ${t=>t.size==="small"?"flex-start":"center"};
+  flex-direction: ${t=>t.size==="small"?"column":"row"};
+`,wt=s.div`
+  display: flex;
+  flex-direction: row;
+  width: ${t=>`calc(100% - ${t.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${e.Space.sp6};
+  align-items: center;
+  gap: ${e.Space.sp5};
+  ${t=>t.size==="small"&&`
+
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: unset;
+    height: unset;
+    justify-content: start;
+    height: ${e.Space.sp11};
+    align-items: start;
+    `}
+`,Rt=s(e.H6Medium)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp0};
+  margin-right: ${e.Space.sp3};
+`,ft=s(e.H5Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp2};
+`,bt=s.div``,yt=s(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin-bottom: ${e.Space.sp3};
+`,vt=s.div`
+  cursor: pointer;
+  background-color: ${t=>t.theme.colors.grey5};
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  position: relative;
+  margin-bottom: ${t=>t.isLastCard?e.Space.sp0:e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  box-shadow: 0px 1px 2px 0px ${t=>t.theme.colors.dropShadowHover};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    .cardName {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+`,Et=s(e.StandardRegular)`
+  color: inherit;
+`,Tt=s.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: ${e.Space.sp3};
+  padding-bottom: ${e.Space.sp3};
+  padding-left: ${t=>`${v.cardHolderDetailsPaddingX.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${v.cardHolderDetailsPaddingX.valuePx(t.windowSize)}`};
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  gap: ${t=>`${v.cardHolderDetailsGap.valuePx(t.windowSize)}`};
+`,Ct=s.div`
+  display: flex;
+  justify-content: space-between;
+`,zt=s.div`
+  width: 200px;
+  color: inherit;
+  display: flex;
+  gap: ${e.Space.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Pt=s(e.SmallRegular)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,kt=s(e.StandardRegular)`
+  width: 216px;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: ${t=>`${v.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
+`,Lt=s.div`
+  width: 163px;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: ${e.Space.sp3};
+  margin-left: ${t=>`${v.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
+`,Nt=s.div`
+  margin: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp0} ${e.Space.sp4};
+  padding-bottom: ${e.Space.sp2};
+`,Mt=s.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${e.Space.sp2} ${e.Space.sp0};
+`,ge=s.div`
+  background-color: ${t=>t.theme.mode==="light"?t.theme.colors.background:e.Colors.neutralGrey3Dark};
+  min-height: 1px;
+  max-height: 1px;
+  width: 100%;
+`,Ft=s(e.StandardRegular)`
+  width: ${t=>`${v.recurringExpenseMerchantWidth.valuePx(t.windowSize)}`};
+  text-align: left;
+  color: inherit;
+  display: flex;
+  gap: ${e.Space.sp2};
+`,Ot=s(e.StandardRegular)`
+  width: ${t=>`${v.recurringExpenseNextPaymentDateWidth.valuePx(t.windowSize)}`};
+  text-align: left;
+  color: inherit;
+`,Ht=s(e.StandardRegular)`
+  width: ${t=>`${v.recurringExpenseAmountWidth.valuePx(t.windowSize)}`};
+  text-align: right;
+  color: inherit;
+`,Wt=s(e.SmallRegular)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,_t=s(e.SmallRegular)`
+  color: inherit;
+`,Dt=s(e.StandardRegular)`
+  color: inherit;
+`,Ut=s.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${e.Space.sp1} ${e.Space.sp0};
+`,Bt=s(e.LargeSemiBold)`
+  color: ${t=>t.theme.colors.primary};
+  padding: ${e.Space.sp3} ${e.Space.sp0};
+`,Se=s(e.SvgArrowBottom)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-width: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  color: inherit;
+`,$e=s(e.SvgArrowRight)`
+  cursor: pointer;
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-width: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  color: inherit;
+`,le=s(e.ExtraSmallRegular)`
+  width: ${t=>t.width}px;
+  color: ${t=>t.theme.colors.hero};
+`,At=s(le)`
+  text-align: right;
+`,Vt=s.div`
+  border-radius: ${e.Space.sp2};
+  padding-left: ${e.Space.sp4};
+  padding-right: ${e.Space.sp4};
+  padding-bottom: ${t=>t.isReasonTextFieldVisible?e.Space.sp3:e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: 0px 1px 2px 0px ${t=>t.theme.colors.dropShadowHover};
+  background: ${t=>t.theme.colors.grey5};
+  margin-bottom: ${e.Space.sp6};
+  &:hover {
+    z-index: 1;
+    border: 1px solid ${t=>t.theme.colors.primary};
+    .reason-text-field > input {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,qt=s(e.LargeSemiBold)`
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp7};
+  color: ${t=>t.theme.colors.primary};
+`,E={navBarContainerPaddingXaxis:new e.ResponsiveSized(10,19),containerPaddingLeft:new e.ResponsiveSized(16,40,56),containerPaddingRight:new e.ResponsiveSized(16,40,56),successContentMargin:new e.ResponsiveSized(e.sp[3],e.sp[12]),buttonTrayGap:new e.ResponsiveSized(e.sp[4],e.sp[5]),largeLabelWidth:new e.ResponsiveSized(120,120,200),webkitLineClamp:new e.ResponsiveSized(2,1,1,1,1),overlayWidth:new e.ResponsiveSized(100,100,58),cardHolderDetailsPaddingX:new e.ResponsiveSized(e.sp[3],e.sp[4]),cardNameSectionMarginLeft:new e.ResponsiveSized(e.sp[7],0),cardHolderDetailsGap:new e.ResponsiveSized(e.sp[1],0),recurringExpenseMerchantWidth:new e.ResponsiveSized(112,240),recurringExpenseNextPaymentDateWidth:new e.ResponsiveSized(112,104),recurringExpenseAmountWidth:new e.ResponsiveSized(100,312),reasonTextFieldMarginTop:new e.ResponsiveSized(e.sp[3],0)},{lockCard:W,common:R}=e.appLocale.getLocalizedStrings().spendManagement.chargeCard,y="reasonSection",je="lockCardPage",M=(t,g)=>`${t}.${g}`,we=t=>`${t}_form`,{common:ae,dateFormat:Yt,cockpit:Gt}=e.appLocale.getLocalizedStrings(),Xt=({showLockCardDrawer:t,onCloseLockCardDrawer:g,isChargeCardAdmin:c,chargeCardsByCardId:p,cardRecurringExpensesByCardId:l,cardRecurringExpenseFetchState:S,lockCardFetchState:a,onRemoveCardClick:m,onConfirmClick:F,onDismissClick:z})=>{const r=e.useWindowSizeContext(),T=o.useTheme(),[h,_]=K.useState(Object.fromEntries(Object.keys(l).map((n,d)=>[n,d===0]))),D=n=>{_(d=>d[n]?{...d,[n]:!1}:{...Object.fromEntries(Object.keys(d).map(L=>[L,!1])),[n]:!0})},$=o.useForm({mode:"all",reValidateMode:"onBlur",defaultValues:{[y]:{reason:void 0,reasonType:void 0}},values:{[y]:{reason:void 0,reasonType:void 0}}}),U=E.largeLabelWidth.value(r),{isValid:B,errors:O}=$.formState,V=n=>`${p[n].cardHolderUser?.firstName??""} ${p[n].cardHolderUser?.lastName??""}`,q=o.has(O,M(y,"reasonType")),P=$.watch("reasonSection.reasonType"),A=$.handleSubmit(()=>{if(B){const n=$.getValues(),d={reason:n[y].reason,reasonType:n[y].reasonType};F(d)}}),x=Object.keys(l).length>1,k=Object.keys(l).length,C=Object.values(l).reduce((n,d)=>n+d.length,0),f=l[Object.keys(l)[0]].length>0;return o.jsxRuntimeExports.jsx(o.Drawer,{anchor:"right",open:t,onClose:g,PaperProps:{style:{width:E.overlayWidth.valuePercentage(r),boxShadow:"none"}},slotProps:{backdrop:{style:{backgroundColor:T.colors.black,opacity:.75,cursor:"pointer"}}},transitionDuration:250,children:o.jsxRuntimeExports.jsxs(Qt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Jt,{windowSize:r,children:[o.jsxRuntimeExports.jsx(It,{windowSize:r,children:o.jsxRuntimeExports.jsx(to,{onClick:()=>{z()}})}),r==="small"?o.jsxRuntimeExports.jsx(lo,{windowSize:r,children:x?W.lockCards:W.lockCard}):o.jsxRuntimeExports.jsx(po,{children:x?W.lockCards:W.lockCard}),S==="Completed"?o.jsxRuntimeExports.jsx(o.FormProvider,{...$,children:o.jsxRuntimeExports.jsxs("form",{id:we(je),onSubmit:A,children:[o.jsxRuntimeExports.jsxs(co,{children:[o.jsxRuntimeExports.jsx(mo,{windowSize:r,children:x?C>0?`${W.multipleCardsHasRecurringExpenses.replace("_number_of_cards_",k.toString()).replace("_number_of_recurring_expenses_",C.toString())} ${C===1?R.expense:R.expenses}.`:W.multipleCardsNoRecurringExpenses.replace("_number_of_cards_",k.toString()):f?W.firstCardHasRecurringExpenses.replace("_number_of_recurring_expenses_",C.toString()).replace("_expense_",C===1?R.expense:R.expenses):W.firstCardNoRecurringExpenses}),x&&o.jsxRuntimeExports.jsx(zo,{children:`${k} ${k===1?R.card:R.cards} ${R.selected}`}),Object.keys(l).map((n,d)=>{const L=l[n].length>0;return o.jsxRuntimeExports.jsxs(xo,{onClick:()=>L?D(n):void 0,isMoreThanOneCard:x,isLastCard:d===Object.keys(l).length-1,children:[o.jsxRuntimeExports.jsxs(ho,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Zt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(go,{windowSize:r,children:[p[n].cardHolderUser?.photo!==void 0?o.jsxRuntimeExports.jsx(oo,{src:p[n].cardHolderUser?.photo.href,alt:Gt.userProfileAltText,onError:({currentTarget:j})=>{j.onerror=null,j.src=e.AvatarSVG},loading:"lazy"}):o.jsxRuntimeExports.jsx(e.EntityAvatarWithInitials,{firstName:p[n].cardHolderUser?.firstName??"",lastName:p[n].cardHolderUser?.lastName??"",size:e.Space.sp6}),o.jsxRuntimeExports.jsxs("div",{children:[o.jsxRuntimeExports.jsx(uo,{children:V(n)}),o.jsxRuntimeExports.jsx(So,{children:o.jsxRuntimeExports.jsx(ye.RoleWithToolTip,{roles:p[n].cardHolderRoles.userRoles})})]})]}),r==="small"&&L&&(h[n]?o.jsxRuntimeExports.jsx(fe,{}):o.jsxRuntimeExports.jsx(be,{}))]}),o.jsxRuntimeExports.jsxs($o,{windowSize:r,children:[p[n].cardName,o.jsxRuntimeExports.jsx(ve.CardNumberSubText,{cardDetail:p[n],forDetailPage:!0,styles:{...e.textStyles.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),o.jsxRuntimeExports.jsxs(jo,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(vo,{children:[o.jsxRuntimeExports.jsx(To,{children:l[n].length}),o.jsxRuntimeExports.jsx(Eo,{children:R.recurringExpenses})]}),r!=="small"&&L&&(h[n]?o.jsxRuntimeExports.jsx(fe,{}):o.jsxRuntimeExports.jsx(be,{}))]})]}),x&&o.jsxRuntimeExports.jsx(Kt,{children:o.jsxRuntimeExports.jsx(e.Tooltip,{variant:"standard",title:ae.remove,children:o.jsxRuntimeExports.jsx(ro,{onClick:()=>m(n)})})}),h[n]&&L&&o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Re,{}),o.jsxRuntimeExports.jsxs(wo,{children:[o.jsxRuntimeExports.jsxs(Co,{children:[o.jsxRuntimeExports.jsx(pe,{width:r==="small"?112:240,children:R.merchant}),o.jsxRuntimeExports.jsx(pe,{width:r==="small"?112:104,children:R.nextPaymentDate}),o.jsxRuntimeExports.jsx(Po,{width:r==="small"?100:312,children:R.amount})]}),l[n].map((j,Z)=>o.jsxRuntimeExports.jsxs("div",{children:[Z>0&&o.jsxRuntimeExports.jsx(Re,{}),o.jsxRuntimeExports.jsxs(Ro,{children:[o.jsxRuntimeExports.jsxs(fo,{windowSize:r,children:[o.jsxRuntimeExports.jsx(io,{src:j.merchant.logo?.url?.href}),o.jsxRuntimeExports.jsx(so,{windowSize:r,children:j.merchant.brandName??j.merchant.name})]}),o.jsxRuntimeExports.jsx(bo,{windowSize:r,children:j.nextPaymentDate.format(Yt.visual.MMMDCommaYYYYformat)}),o.jsxRuntimeExports.jsx(yo,{windowSize:r,children:e.amountToString("0,0.00",j.amount)})]},j.merchant.name)]},j.merchant.name))]})]})]},n)})]}),o.jsxRuntimeExports.jsx(Lo,{windowSize:r,children:R.letUsKnowWhy}),o.jsxRuntimeExports.jsxs(ko,{isReasonTextFieldVisible:P==="other",children:[o.jsxRuntimeExports.jsxs(no,{size:r,children:[o.jsxRuntimeExports.jsx(e.Label,{label:R.reasonLabel,htmlFor:M(y,"reasonType"),style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,width:"fit-content"}}),o.jsxRuntimeExports.jsxs(ao,{labelWidth:U,size:r,children:[o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:R.reason.lost},style:{width:"auto"},radioField:{name:M(y,"reasonType"),id:`${M(y,"reasonType")}.Lost or stolen`,value:"Lost or stolen",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:R.reason.fraud},style:{width:"auto"},radioField:{name:M(y,"reasonType"),id:`${M(y,"reasonType")}.Fraud detected`,value:"Fraud detected",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:R.reason.not_needed},style:{width:"auto"},radioField:{name:M(y,"reasonType"),id:`${M(y,"reasonType")}.Not needed`,value:"Not needed",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}}),o.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:R.reason.other},style:{width:"auto"},radioField:{name:M(y,"reasonType"),id:`${M(y,"reasonType")}.other`,value:"other",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}})]})]}),P==="other"?o.jsxRuntimeExports.jsx(e.TextField,{style:{height:e.Space.sp6,width:"100%",backgroundColor:T.colors.background,marginTop:`${E.reasonTextFieldMarginTop.valuePx(r)}`},type:"text",name:M(y,"reason"),placeholder:W.reasonPlaceholder,className:"reason-text-field"}):P==null&&!c&&q?o.jsxRuntimeExports.jsx(eo,{children:W.youNeedToProvideReasonToLockCard}):null]})]})}):o.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Standard",start:!0,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"calc(100vh - 210px)"}})]}),S==="Completed"&&o.jsxRuntimeExports.jsx(e.Footer,{style:{zIndex:4,paddingTop:e.Space.sp3,paddingBottom:e.Space.sp3},formId:we(je),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:ae.confirm,isLoading:a==="In-Progress"},cancelBtn:{label:ae.cancel,style:{width:"90px"},onClick:()=>{z?.()}}})]})})},Qt=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`,Jt=s.div`
+  height: auto;
+  padding-left: ${t=>`${E.containerPaddingLeft.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${E.containerPaddingRight.valuePx(t.windowSize)}`};
+  margin-bottom: auto;
+`,Kt=s.div`
+  position: absolute;
+  right: -${e.Space.sp2};
+  top: -${e.Space.sp2};
+`,Zt=s.div`
+  display: flex;
+  justify-content: space-between;
+`,It=s.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${e.Space.sp0};
+  padding: ${t=>`${E.navBarContainerPaddingXaxis.valuePx(t.windowSize)} ${e.Space.sp0}`};
+  z-index: 2;
+  background-color: ${t=>t.theme.colors.grey4};
+`,eo=s(e.SmallRegular)`
+  color: ${t=>t.theme.colors.important};
+  text-align: end;
+`,to=s(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,oo=s.img`
+  height: ${e.Space.sp6};
+  width: ${e.Space.sp6};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${t=>t.theme.colors.hero};
+`,so=s(e.StandardRegular)`
+  margin-right: ${e.Space.sp3};
+  color: inherit;
+  -webkit-line-clamp: ${t=>E.webkitLineClamp.value(t.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,ro=s(e.SvgCloseRound)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  min-height: ${e.Space.sp3};
+  background-color: ${t=>t.theme.colors.grey5};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,io=s.img`
+  display: flex;
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+`,no=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-top: ${e.Space.sp2};
+  align-items: ${t=>t.size==="small"?"flex-start":"center"};
+  flex-direction: ${t=>t.size==="small"?"column":"row"};
+`,ao=s.div`
+  display: flex;
+  flex-direction: row;
+  width: ${t=>`calc(100% - ${t.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${e.Space.sp6};
+  align-items: center;
+  gap: ${e.Space.sp5};
+  ${t=>t.size==="small"&&`
+
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: unset;
+    height: unset;
+    justify-content: start;
+    height: ${e.Space.sp11};
+    align-items: start;
+    `}
+`,lo=s(e.H6Medium)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp0};
+  margin-right: ${e.Space.sp3};
+`,po=s(e.H5Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp2};
+`,co=s.div``,mo=s(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin-bottom: ${e.Space.sp3};
+`,xo=s.div`
+  cursor: pointer;
+  background-color: ${t=>t.theme.colors.grey5};
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  position: relative;
+  margin-bottom: ${t=>t.isLastCard?e.Space.sp0:e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  box-shadow: 0px 1px 2px 0px ${t=>t.theme.colors.dropShadowHover};
+  &:hover {
+    z-index: 1;
+    border: 1px solid ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    .cardName {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+`,uo=s(e.StandardRegular)`
+  color: inherit;
+`,ho=s.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: ${e.Space.sp3};
+  padding-bottom: ${e.Space.sp3};
+  padding-left: ${t=>`${E.cardHolderDetailsPaddingX.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${E.cardHolderDetailsPaddingX.valuePx(t.windowSize)}`};
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+  gap: ${t=>`${E.cardHolderDetailsGap.valuePx(t.windowSize)}`};
+`,go=s.div`
+  width: 200px;
+  color: inherit;
+  display: flex;
+  gap: ${e.Space.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,So=s(e.SmallRegular)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,$o=s(e.StandardRegular)`
+  width: 216px;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: ${t=>`${E.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
+`,jo=s.div`
+  width: 163px;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: ${e.Space.sp3};
+  margin-left: ${t=>`${E.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
+`,wo=s.div`
+  margin: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp0} ${e.Space.sp4};
+  padding-bottom: ${e.Space.sp2};
+`,Ro=s.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${e.Space.sp2} ${e.Space.sp0};
+`,Re=s.div`
+  background-color: ${t=>t.theme.mode==="light"?t.theme.colors.background:e.Colors.neutralGrey3Dark};
+  min-height: 1px;
+  max-height: 1px;
+  width: 100%;
+`,fo=s(e.StandardRegular)`
+  width: ${t=>`${E.recurringExpenseMerchantWidth.valuePx(t.windowSize)}`};
+  text-align: left;
+  color: inherit;
+  display: flex;
+  gap: ${e.Space.sp2};
+`,bo=s(e.StandardRegular)`
+  width: ${t=>`${E.recurringExpenseNextPaymentDateWidth.valuePx(t.windowSize)}`};
+  text-align: left;
+  color: inherit;
+`,yo=s(e.StandardRegular)`
+  width: ${t=>`${E.recurringExpenseAmountWidth.valuePx(t.windowSize)}`};
+  text-align: right;
+  color: inherit;
+`,vo=s(e.SmallRegular)`
+  color: inherit;
+`,Eo=s(e.SmallRegular)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,To=s(e.StandardRegular)`
+  color: inherit;
+`,Co=s.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${e.Space.sp1} ${e.Space.sp0};
+`,zo=s(e.LargeSemiBold)`
+  color: ${t=>t.theme.colors.primary};
+  padding: ${e.Space.sp3} ${e.Space.sp0};
+`,fe=s(e.SvgArrowBottom)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-width: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  color: inherit;
+`,be=s(e.SvgArrowRight)`
+  cursor: pointer;
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-width: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  color: inherit;
+`,pe=s(e.ExtraSmallRegular)`
+  width: ${t=>t.width}px;
+  color: ${t=>t.theme.colors.hero};
+`,Po=s(pe)`
+  text-align: right;
+`,ko=s.div`
+  border-radius: ${e.Space.sp2};
+  padding-left: ${e.Space.sp4};
+  padding-right: ${e.Space.sp4};
+  padding-bottom: ${t=>t.isReasonTextFieldVisible?e.Space.sp3:e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: 0px 1px 2px 0px ${t=>t.theme.colors.dropShadowHover};
+  background: ${t=>t.theme.colors.grey5};
+  margin-bottom: ${e.Space.sp6};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    .reason-text-field > input {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,Lo=s(e.LargeSemiBold)`
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp7};
+  color: ${t=>t.theme.colors.primary};
+`;exports.CloseCardPage=lt;exports.LockCardPage=Xt;exports.RenamePopup=He;exports.UpdateSpendLimitPopup=Ye;