@zeniai/web-components 3.17.1 → 3.17.2

package/dist/LockCardPage-4qaZ3uSx.cjs

@@ -0,0 +1,623 @@
+"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;