@zeniai/web-components 3.17.3 → 3.17.4

package/dist/LockCardPage-4qaZ3uSx.cjs

@@ -1,623 +0,0 @@
-"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),K=require("react"),s=require("@emotion/styled"),e=require("./index-gTpRqqAW.cjs"),Fe=require("@zeniai/client-epic-state"),be=require("./RoleWithToolTip-DLjgWlHq.cjs"),ye=require("./CardNumberSubText-Ci_g5UTN.cjs"),G="cardName",se=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.renamePopup;function Oe({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(He,{windowSize:l,role:"presentation",children:o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>c(),children:o.jsxRuntimeExports.jsxs(We,{windowSize:l,children:[o.jsxRuntimeExports.jsx(o.FormProvider,{...a,children:o.jsxRuntimeExports.jsxs(Ve,{id:S,onSubmit:h=>{h.preventDefault(),F()},children:[o.jsxRuntimeExports.jsx(_e,{windowSize:l,children:se.heading}),o.jsxRuntimeExports.jsx(Ae,{hasError:z,children:o.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:se.newName,width:T},style:{width:"auto"},text:{type:"text",name:G,defaultValue:t,placeholder:se.placeholder,options:{required:!0,validate:h=>h!=null}}})})]})}),o.jsxRuntimeExports.jsx(Be,{children:o.jsxRuntimeExports.jsxs(De,{children:[o.jsxRuntimeExports.jsx(e.Button,{label:r.cancel,onClick:m,style:{width:84}}),o.jsxRuntimeExports.jsx(Ue,{}),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])},He=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};
-`,We=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;
-`,_e=s(e.H6Medium)`
-  color: ${t=>t.theme.colors.primary};
-  margin-bottom: ${e.Space.sp3};
-`,De=s.div`
-  display: flex;
-  justify-content: center;
-  padding-top: ${e.Space.sp4};
-`,Ue=s.div`
-  width: ${e.Space.sp3};
-`,Be=s.div`
-  display: flex;
-  flex-direction: column;
-`,Ae=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;
-    }
-  }
-`,Ve=s.form`
-  display: contents;
-`,X="spendLimit",Y=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup,{dateFormat:re}=e.appLocale.getLocalizedStrings();function qe({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",ve=e.useGlobalInfoContext();Fe.hasChargeCardAdminLevelAccess(ve.loggedInUserRoleMap);const Q=o.useForm({mode:"onBlur",reValidateMode:"onBlur",defaultValues:{[X]:void 0}}),{control:Ee,formState:{errors:Te}}=Q,[Ce,ze]=K.useState(void 0),I=o.useWatch({control:Ee,name:X}),pe=S?.type.code.includes("physical")===!0?S.cardActivationAttemptHistory[0]?.timestamp:S?.createTime,ce=(S?.recommendations??[]).map(u=>u.creditLimit.amount),Pe=()=>{S!=null&&me({analytics:L,controllerEmails:t,isChargeCardFeatureEnabled:g,cardDetail:S,transactionStatistics:a,depositAccountLimitFetchState:m,creditAccount:F,creditAccountRepayment:z,signedInUser:r,isDebitCard:T,classListFetchState:h,currentLimitAmount:_,recommendedLimitAmounts:ce,cardActivationDate:pe,cardIssuedByRoles:A,cardHolderRoles:x,cardIssuedByDepartmentName:C,cardHolderDepartmentName:i,loggedInUserRole:k,clickItem:"Cancel",newSpendLimitAmount:I,productInformation:$,creditAccountInformation:U,debitAccountInformation:B}),f()},ke=Q.handleSubmit(()=>{const u=Q.getValues(X);u!=null&&(me({analytics:L,controllerEmails:t,isChargeCardFeatureEnabled:g,cardDetail:S,transactionStatistics:a,depositAccountLimitFetchState:m,creditAccount:F,creditAccountRepayment:z,signedInUser:r,isDebitCard:T,classListFetchState:h,currentLimitAmount:_,recommendedLimitAmounts:ce,cardActivationDate:pe,cardIssuedByRoles:A,cardHolderRoles:x,cardIssuedByDepartmentName:C,cardHolderDepartmentName:i,loggedInUserRole:k,productInformation:$,creditAccountInformation:U,debitAccountInformation:B,clickItem:"Update",newSpendLimitAmount:u}),n(u))}),Le=u=>{Q.setValue(X,u,{shouldValidate:!0})},de=o.has(Te,X),oe=e.appLocale.getLocalizedStrings().common,Ne=te.largeLabelWidth.value(j);K.useEffect(()=>{ze(Ye(D,O,I))},[I,D,O]);const Me=(u,J)=>o.jsxRuntimeExports.jsxs(ot,{isSelected:I===u.amount,onClick:()=>Le(u.amount),"data-testid":e.generateDataTestId("quick-amount-button",J.toString()),children:[J===1&&o.jsxRuntimeExports.jsx(st,{}),e.amountToString("0,0.[00]",u)]},J);return o.jsxRuntimeExports.jsx(Ge,{windowSize:j,role:"presentation","data-testid":e.generateDataTestId("update-spend-limit-popup"),children:o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>f(),children:o.jsxRuntimeExports.jsxs(Xe,{windowSize:j,children:[o.jsxRuntimeExports.jsx(o.FormProvider,{...Q,children:o.jsxRuntimeExports.jsxs(rt,{id:Z,onSubmit:u=>{u.preventDefault(),ke()},children:[o.jsxRuntimeExports.jsx(Qe,{windowSize:j,children:Y.heading}),o.jsxRuntimeExports.jsxs(Je,{windowSize:j,children:[Y.currentLimit,oe.strings.space," ",e.amountToString("0,0.[00]",_),Y.slashMonth]}),o.jsxRuntimeExports.jsxs(et,{hasError:de,children:[o.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:Y.newLimit,width:Ne},showAdditionalInfoLabel:de,additionalInfoLabel:Ce,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(tt,{windowSize:j,children:P?.map((u,J)=>Me(u.creditLimit,J))}):null]})]})}),o.jsxRuntimeExports.jsx(Ie,{children:o.jsxRuntimeExports.jsxs(Ke,{children:[o.jsxRuntimeExports.jsx(e.Button,{label:oe.cancel,onClick:Pe,style:{width:84},"data-testid":e.generateDataTestId("update-spend-limit-cancel-button")}),o.jsxRuntimeExports.jsx(Ze,{}),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 Ye=(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))}},me=({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:e.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(re.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:a.providerCardCreateTime?.format(re.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:U?.format(re.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:a.creditLimitFrequency.name,cardSpentAmount:e.roundAmountIfNeeded(a.balance.amount),cardAvailableLimit:e.roundAmountIfNeeded(a.available.amount),cardUtilizationPercent:e.calculateCardUtilizationPercent(a.limit.amount,a.available.amount),cardUtilizationAmount:e.roundAmountIfNeeded(e.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])},Ge=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};
-`,Xe=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;
-`,Qe=s(e.H6Medium)`
-  color: ${t=>t.theme.colors.primary};
-  margin-bottom: ${e.Space.sp2};
-`,Je=s(e.StandardRegular)`
-  color: ${t=>t.theme.colors.hero};
-  margin-bottom: ${e.Space.sp3};
-`,Ke=s.div`
-  display: flex;
-  justify-content: center;
-  padding-top: ${e.Space.sp4};
-`,Ze=s.div`
-  width: ${e.Space.sp3};
-`,Ie=s.div`
-  display: flex;
-  flex-direction: column;
-`,et=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;
-    }
-  }
-`,tt=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};
-`,ot=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}`};
-  }
-`,st=s(e.SvgAutofill3)`
-  color: ${e.Colors.brandColorJade};
-  fill: ${e.Colors.brandColorJade};
-  width: ${e.Space.sp3};
-  height: ${e.Space.sp3};
-`,rt=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",xe="closeCardPage",N=(t,g)=>`${t}.${g}`,ue=t=>`${t}_form`,{common:ie,dateFormat:it,cockpit:nt}=e.appLocale.getLocalizedStrings(),at=({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(lt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(pt,{windowSize:r,children:[o.jsxRuntimeExports.jsx(ct,{windowSize:r,children:o.jsxRuntimeExports.jsx(mt,{onClick:()=>{z()}})}),r==="small"?o.jsxRuntimeExports.jsx(wt,{windowSize:r,children:x?H.closeCards:H.closeCard}):o.jsxRuntimeExports.jsx(Rt,{children:x?H.closeCards:H.closeCard}),S==="Completed"?o.jsxRuntimeExports.jsx(o.FormProvider,{...$,children:o.jsxRuntimeExports.jsxs("form",{id:ue(xe),onSubmit:A,children:[o.jsxRuntimeExports.jsxs(ft,{children:[o.jsxRuntimeExports.jsx(bt,{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(Ut,{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(yt,{onClick:()=>n?D(i):void 0,isMoreThanOneCard:x,isLastCard:f===Object.keys(l).length-1,children:[o.jsxRuntimeExports.jsxs(Et,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Tt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Ct,{windowSize:r,children:[p[i].cardHolderUser?.photo!==void 0?o.jsxRuntimeExports.jsx(xt,{src:p[i].cardHolderUser?.photo.href,alt:nt.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(vt,{children:V(i)}),o.jsxRuntimeExports.jsx(zt,{children:o.jsxRuntimeExports.jsx(be.RoleWithToolTip,{roles:p[i].cardHolderRoles.userRoles})})]})]}),r==="small"&&n&&(h[i]?o.jsxRuntimeExports.jsx(ge,{}):o.jsxRuntimeExports.jsx(Se,{}))]}),o.jsxRuntimeExports.jsxs(Pt,{windowSize:r,children:[p[i].cardName,o.jsxRuntimeExports.jsx(ye.CardNumberSubText,{cardDetail:p[i],forDetailPage:!0,styles:{...e.textStyles.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),o.jsxRuntimeExports.jsxs(kt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Wt,{children:[o.jsxRuntimeExports.jsx(_t,{children:l[i].length}),o.jsxRuntimeExports.jsx(Ht,{children:w.recurringExpenses})]}),r!=="small"&&n&&(h[i]?o.jsxRuntimeExports.jsx(ge,{}):o.jsxRuntimeExports.jsx(Se,{}))]})]}),x&&o.jsxRuntimeExports.jsx(gt,{children:o.jsxRuntimeExports.jsx(e.Tooltip,{variant:"standard",title:ie.remove,children:o.jsxRuntimeExports.jsx(ht,{onClick:()=>m(i)})})}),h[i]&&n&&o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(he,{}),o.jsxRuntimeExports.jsxs(Lt,{children:[o.jsxRuntimeExports.jsxs(Dt,{children:[o.jsxRuntimeExports.jsx(ae,{width:r==="small"?112:240,children:w.merchant}),o.jsxRuntimeExports.jsx(ae,{width:r==="small"?112:104,children:w.nextPaymentDate}),o.jsxRuntimeExports.jsx(Bt,{width:r==="small"?100:312,children:w.amount})]}),l[i].map((d,L)=>o.jsxRuntimeExports.jsxs("div",{children:[L>0&&o.jsxRuntimeExports.jsx(he,{}),o.jsxRuntimeExports.jsxs(Nt,{children:[o.jsxRuntimeExports.jsxs(Mt,{windowSize:r,children:[o.jsxRuntimeExports.jsx(St,{src:d.merchant.logo?.url?.href}),o.jsxRuntimeExports.jsx(ut,{windowSize:r,children:d.merchant.brandName??d.merchant.name})]}),o.jsxRuntimeExports.jsx(Ft,{windowSize:r,children:d.nextPaymentDate.format(it.visual.MMMDCommaYYYYformat)}),o.jsxRuntimeExports.jsx(Ot,{windowSize:r,children:e.amountToString("0,0.00",d.amount)})]},d.merchant.name)]},d.merchant.name))]})]})]},i)})]}),o.jsxRuntimeExports.jsx(Vt,{windowSize:r,children:w.letUsKnowWhy}),o.jsxRuntimeExports.jsxs(At,{isReasonTextFieldVisible:P==="other",children:[o.jsxRuntimeExports.jsxs($t,{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(jt,{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(dt,{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:ue(xe),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:ie.confirm,isLoading:a==="In-Progress",variant:"danger"},cancelBtn:{label:ie.cancel,style:{width:"90px"},onClick:()=>{z?.()}}})]})})},lt=s.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${t=>t.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100vh;
-  width: 100%;
-`,pt=s.div`
-  height: auto;
-  padding-left: ${t=>`${v.containerPaddingLeft.valuePx(t.windowSize)}`};
-  padding-right: ${t=>`${v.containerPaddingRight.valuePx(t.windowSize)}`};
-  margin-bottom: auto;
-`,ct=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};
-`,dt=s(e.SmallRegular)`
-  color: ${t=>t.theme.colors.important};
-  text-align: end;
-`,mt=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};
-  }
-`,xt=s.img`
-  height: ${e.Space.sp6};
-  width: ${e.Space.sp6};
-  border-radius: 50%;
-  justify-content: center;
-  color: ${t=>t.theme.colors.hero};
-`,ut=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;
-`,ht=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};
-  }
-`,gt=s.div`
-  position: absolute;
-  right: -${e.Space.sp2};
-  top: -${e.Space.sp2};
-`,St=s.img`
-  display: flex;
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-  min-width: ${e.Space.sp4};
-`,$t=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"};
-`,jt=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;
-    `}
-`,wt=s(e.H6Medium)`
-  color: ${t=>t.theme.colors.primary};
-  margin-top: ${e.Space.sp3};
-  margin-bottom: ${e.Space.sp0};
-  margin-right: ${e.Space.sp3};
-`,Rt=s(e.H5Regular)`
-  color: ${t=>t.theme.colors.primary};
-  margin-top: ${e.Space.sp3};
-  margin-bottom: ${e.Space.sp2};
-`,ft=s.div``,bt=s(e.StandardRegular)`
-  color: ${t=>t.theme.colors.hero};
-  margin-bottom: ${e.Space.sp3};
-`,yt=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};
-    }
-  }
-`,vt=s(e.StandardRegular)`
-  color: inherit;
-`,Et=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)}`};
-`,Tt=s.div`
-  display: flex;
-  justify-content: space-between;
-`,Ct=s.div`
-  width: 200px;
-  color: inherit;
-  display: flex;
-  gap: ${e.Space.sp2};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,zt=s(e.SmallRegular)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`,Pt=s(e.StandardRegular)`
-  width: 216px;
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: ${t=>`${v.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
-`,kt=s.div`
-  width: 163px;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  gap: ${e.Space.sp3};
-  margin-left: ${t=>`${v.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
-`,Lt=s.div`
-  margin: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp0} ${e.Space.sp4};
-  padding-bottom: ${e.Space.sp2};
-`,Nt=s.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${e.Space.sp2} ${e.Space.sp0};
-`,he=s.div`
-  background-color: ${t=>t.theme.mode==="light"?t.theme.colors.background:e.Colors.neutralGrey3Dark};
-  min-height: 1px;
-  max-height: 1px;
-  width: 100%;
-`,Mt=s(e.StandardRegular)`
-  width: ${t=>`${v.recurringExpenseMerchantWidth.valuePx(t.windowSize)}`};
-  text-align: left;
-  color: inherit;
-  display: flex;
-  gap: ${e.Space.sp2};
-`,Ft=s(e.StandardRegular)`
-  width: ${t=>`${v.recurringExpenseNextPaymentDateWidth.valuePx(t.windowSize)}`};
-  text-align: left;
-  color: inherit;
-`,Ot=s(e.StandardRegular)`
-  width: ${t=>`${v.recurringExpenseAmountWidth.valuePx(t.windowSize)}`};
-  text-align: right;
-  color: inherit;
-`,Ht=s(e.SmallRegular)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`,Wt=s(e.SmallRegular)`
-  color: inherit;
-`,_t=s(e.StandardRegular)`
-  color: inherit;
-`,Dt=s.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${e.Space.sp1} ${e.Space.sp0};
-`,Ut=s(e.LargeSemiBold)`
-  color: ${t=>t.theme.colors.primary};
-  padding: ${e.Space.sp3} ${e.Space.sp0};
-`,ge=s(e.SvgArrowBottom)`
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-  min-width: ${e.Space.sp4};
-  min-height: ${e.Space.sp4};
-  color: inherit;
-`,Se=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;
-`,ae=s(e.ExtraSmallRegular)`
-  width: ${t=>t.width}px;
-  color: ${t=>t.theme.colors.hero};
-`,Bt=s(ae)`
-  text-align: right;
-`,At=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};
-    }
-  }
-`,Vt=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",$e="lockCardPage",M=(t,g)=>`${t}.${g}`,je=t=>`${t}_form`,{common:ne,dateFormat:qt,cockpit:Yt}=e.appLocale.getLocalizedStrings(),Gt=({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(Xt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Qt,{windowSize:r,children:[o.jsxRuntimeExports.jsx(Zt,{windowSize:r,children:o.jsxRuntimeExports.jsx(eo,{onClick:()=>{z()}})}),r==="small"?o.jsxRuntimeExports.jsx(ao,{windowSize:r,children:x?W.lockCards:W.lockCard}):o.jsxRuntimeExports.jsx(lo,{children:x?W.lockCards:W.lockCard}),S==="Completed"?o.jsxRuntimeExports.jsx(o.FormProvider,{...$,children:o.jsxRuntimeExports.jsxs("form",{id:je($e),onSubmit:A,children:[o.jsxRuntimeExports.jsxs(po,{children:[o.jsxRuntimeExports.jsx(co,{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(Co,{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(mo,{onClick:()=>L?D(n):void 0,isMoreThanOneCard:x,isLastCard:d===Object.keys(l).length-1,children:[o.jsxRuntimeExports.jsxs(uo,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(Kt,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(ho,{windowSize:r,children:[p[n].cardHolderUser?.photo!==void 0?o.jsxRuntimeExports.jsx(to,{src:p[n].cardHolderUser?.photo.href,alt:Yt.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(xo,{children:V(n)}),o.jsxRuntimeExports.jsx(go,{children:o.jsxRuntimeExports.jsx(be.RoleWithToolTip,{roles:p[n].cardHolderRoles.userRoles})})]})]}),r==="small"&&L&&(h[n]?o.jsxRuntimeExports.jsx(Re,{}):o.jsxRuntimeExports.jsx(fe,{}))]}),o.jsxRuntimeExports.jsxs(So,{windowSize:r,children:[p[n].cardName,o.jsxRuntimeExports.jsx(ye.CardNumberSubText,{cardDetail:p[n],forDetailPage:!0,styles:{...e.textStyles.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),o.jsxRuntimeExports.jsxs($o,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(yo,{children:[o.jsxRuntimeExports.jsx(Eo,{children:l[n].length}),o.jsxRuntimeExports.jsx(vo,{children:R.recurringExpenses})]}),r!=="small"&&L&&(h[n]?o.jsxRuntimeExports.jsx(Re,{}):o.jsxRuntimeExports.jsx(fe,{}))]})]}),x&&o.jsxRuntimeExports.jsx(Jt,{children:o.jsxRuntimeExports.jsx(e.Tooltip,{variant:"standard",title:ne.remove,children:o.jsxRuntimeExports.jsx(so,{onClick:()=>m(n)})})}),h[n]&&L&&o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(we,{}),o.jsxRuntimeExports.jsxs(jo,{children:[o.jsxRuntimeExports.jsxs(To,{children:[o.jsxRuntimeExports.jsx(le,{width:r==="small"?112:240,children:R.merchant}),o.jsxRuntimeExports.jsx(le,{width:r==="small"?112:104,children:R.nextPaymentDate}),o.jsxRuntimeExports.jsx(zo,{width:r==="small"?100:312,children:R.amount})]}),l[n].map((j,Z)=>o.jsxRuntimeExports.jsxs("div",{children:[Z>0&&o.jsxRuntimeExports.jsx(we,{}),o.jsxRuntimeExports.jsxs(wo,{children:[o.jsxRuntimeExports.jsxs(Ro,{windowSize:r,children:[o.jsxRuntimeExports.jsx(ro,{src:j.merchant.logo?.url?.href}),o.jsxRuntimeExports.jsx(oo,{windowSize:r,children:j.merchant.brandName??j.merchant.name})]}),o.jsxRuntimeExports.jsx(fo,{windowSize:r,children:j.nextPaymentDate.format(qt.visual.MMMDCommaYYYYformat)}),o.jsxRuntimeExports.jsx(bo,{windowSize:r,children:e.amountToString("0,0.00",j.amount)})]},j.merchant.name)]},j.merchant.name))]})]})]},n)})]}),o.jsxRuntimeExports.jsx(ko,{windowSize:r,children:R.letUsKnowWhy}),o.jsxRuntimeExports.jsxs(Po,{isReasonTextFieldVisible:P==="other",children:[o.jsxRuntimeExports.jsxs(io,{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(no,{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(It,{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:je($e),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:ne.confirm,isLoading:a==="In-Progress"},cancelBtn:{label:ne.cancel,style:{width:"90px"},onClick:()=>{z?.()}}})]})})},Xt=s.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${t=>t.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100vh;
-  width: 100%;
-`,Qt=s.div`
-  height: auto;
-  padding-left: ${t=>`${E.containerPaddingLeft.valuePx(t.windowSize)}`};
-  padding-right: ${t=>`${E.containerPaddingRight.valuePx(t.windowSize)}`};
-  margin-bottom: auto;
-`,Jt=s.div`
-  position: absolute;
-  right: -${e.Space.sp2};
-  top: -${e.Space.sp2};
-`,Kt=s.div`
-  display: flex;
-  justify-content: space-between;
-`,Zt=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};
-`,It=s(e.SmallRegular)`
-  color: ${t=>t.theme.colors.important};
-  text-align: end;
-`,eo=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};
-  }
-`,to=s.img`
-  height: ${e.Space.sp6};
-  width: ${e.Space.sp6};
-  border-radius: 50%;
-  justify-content: center;
-  color: ${t=>t.theme.colors.hero};
-`,oo=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;
-`,so=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};
-  }
-`,ro=s.img`
-  display: flex;
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-`,io=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"};
-`,no=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;
-    `}
-`,ao=s(e.H6Medium)`
-  color: ${t=>t.theme.colors.primary};
-  margin-top: ${e.Space.sp3};
-  margin-bottom: ${e.Space.sp0};
-  margin-right: ${e.Space.sp3};
-`,lo=s(e.H5Regular)`
-  color: ${t=>t.theme.colors.primary};
-  margin-top: ${e.Space.sp3};
-  margin-bottom: ${e.Space.sp2};
-`,po=s.div``,co=s(e.StandardRegular)`
-  color: ${t=>t.theme.colors.hero};
-  margin-bottom: ${e.Space.sp3};
-`,mo=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};
-    }
-  }
-`,xo=s(e.StandardRegular)`
-  color: inherit;
-`,uo=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)}`};
-`,ho=s.div`
-  width: 200px;
-  color: inherit;
-  display: flex;
-  gap: ${e.Space.sp2};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`,go=s(e.SmallRegular)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`,So=s(e.StandardRegular)`
-  width: 216px;
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: ${t=>`${E.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
-`,$o=s.div`
-  width: 163px;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  gap: ${e.Space.sp3};
-  margin-left: ${t=>`${E.cardNameSectionMarginLeft.valuePx(t.windowSize)}`};
-`,jo=s.div`
-  margin: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp0} ${e.Space.sp4};
-  padding-bottom: ${e.Space.sp2};
-`,wo=s.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${e.Space.sp2} ${e.Space.sp0};
-`,we=s.div`
-  background-color: ${t=>t.theme.mode==="light"?t.theme.colors.background:e.Colors.neutralGrey3Dark};
-  min-height: 1px;
-  max-height: 1px;
-  width: 100%;
-`,Ro=s(e.StandardRegular)`
-  width: ${t=>`${E.recurringExpenseMerchantWidth.valuePx(t.windowSize)}`};
-  text-align: left;
-  color: inherit;
-  display: flex;
-  gap: ${e.Space.sp2};
-`,fo=s(e.StandardRegular)`
-  width: ${t=>`${E.recurringExpenseNextPaymentDateWidth.valuePx(t.windowSize)}`};
-  text-align: left;
-  color: inherit;
-`,bo=s(e.StandardRegular)`
-  width: ${t=>`${E.recurringExpenseAmountWidth.valuePx(t.windowSize)}`};
-  text-align: right;
-  color: inherit;
-`,yo=s(e.SmallRegular)`
-  color: inherit;
-`,vo=s(e.SmallRegular)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`,Eo=s(e.StandardRegular)`
-  color: inherit;
-`,To=s.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${e.Space.sp1} ${e.Space.sp0};
-`,Co=s(e.LargeSemiBold)`
-  color: ${t=>t.theme.colors.primary};
-  padding: ${e.Space.sp3} ${e.Space.sp0};
-`,Re=s(e.SvgArrowBottom)`
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-  min-width: ${e.Space.sp4};
-  min-height: ${e.Space.sp4};
-  color: inherit;
-`,fe=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};
-`,zo=s(le)`
-  text-align: right;
-`,Po=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};
-    }
-  }
-`,ko=s(e.LargeSemiBold)`
-  margin-bottom: ${e.Space.sp3};
-  margin-top: ${e.Space.sp7};
-  color: ${t=>t.theme.colors.primary};
-`;exports.CloseCardPage=at;exports.LockCardPage=Gt;exports.RenamePopup=Oe;exports.UpdateSpendLimitPopup=qe;