@zeniai/web-components 3.16.31 → 3.16.32

package/dist/LockCardPage-CFJUervf.cjs

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

package/dist/LowBalancePopup-BdgNYIdm.cjs

@@ -0,0 +1,34 @@
+"use strict";const o=require("./vendor-.pnpm-B6vI-hvj.cjs"),d=require("@emotion/styled"),p=require("@zeniai/client-epic-state"),e=require("./index-B5Auxr4x.cjs"),l={labelWidth:new e.ResponsiveSized(152,176,176),paddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[2]),sideMargin:new e.ResponsiveSized(e.sp[3],e.sp[8],e.sp[8]),width:new e.ResponsiveSized(300,420,420),paddingRight:new e.ResponsiveSized(e.sp[4],e.sp[3])},L=d.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+  margin: ${t=>t.windowSize==="small"?`${e.Space.sp5} ${e.Space.sp3} ${e.Space.sp6} ${e.Space.sp3}`:`${e.Space.sp5} ${e.Space.sp8} ${e.Space.sp6} ${e.Space.sp8}`};
+`,F=d.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`;function C({saveDetailsFetchState:t,paymentData:a,onProceedForMarkAsPaid:u,onCancel:m}){const{spendManagement:{billPay:{billDetails:{paymentOutsideZeni:x,paymentDate:h,cancel:i}}},dateFormat:{visual:S,analytics:g}}=e.appLocale.getLocalizedStrings(),{popUpTitle:y,paymentModeLabel:j,markAsPaid:$,defaultDateInfo:R,paymentModeOptions:f,selectDate:v,selectMethod:M}=x,s=e.useWindowSizeContext(),b="payment-outside-zeni-form",r="paymentMode",c="paymentDate",w=o.useForm({mode:"all",values:{[r]:{selectedOption:a?.paymentMode,allOptions:f.map(n=>n.value)},[c]:a?.paymentDate?.toDate()}}),B=w.handleSubmit(n=>{u({paymentDate:n[c]!=null?p.zeniDate(n[c].toString()):p.zeniDate(p.dateNow().startOf("month").format(g.YYYYDashMMDashDDFormat).toString()),paymentMode:n[r]?.selectedOption!=null?p.toOutsideZeniPaymentModeType(n[r]?.selectedOption):"other"})}),D=n=>f.find(E=>E.value===n)?.label??"";return o.jsxRuntimeExports.jsx(o.FormProvider,{...w,children:o.jsxRuntimeExports.jsx("form",{id:b,onSubmit:B,children:o.jsxRuntimeExports.jsx(e.ConfirmationPopup,{formId:b,titleComponent:o.jsxRuntimeExports.jsx(e.ConfirmationPopUpTitle,{children:y}),primaryButtonText:$,primaryButtonWidth:128,secondaryButtonWidth:128,secondaryButtonText:i,isLoading:t==="In-Progress",isDisabled:t==="In-Progress",isEditPopup:!0,shouldClickAway:t!=="In-Progress",action:{onOkClick:()=>null,onCancelClick:m},children:o.jsxRuntimeExports.jsxs(L,{windowSize:s,children:[o.jsxRuntimeExports.jsx(e.LabeledSingleSelectField,{label:{label:j,width:l.labelWidth.value(s)},style:{width:l.width.valuePx(s)},singleSelectField:{singleSelect:{getLabelForId:D,showTickMark:!1,alwaysShowEyeTooltip:!1,name:r,placeholder:M,showValueEyeIcon:!1,showEyeIconOnSelect:!1},defaultValue:{selectedOption:a?.paymentMode,allOptions:f?.map(n=>n.value)??[]}},isFunctional:!0}),o.jsxRuntimeExports.jsx(F,{}),o.jsxRuntimeExports.jsx(e.LabeledDatePickerField,{label:{label:h,width:l.labelWidth.value(s)},style:{paddingBottom:l.paddingBottom.valuePx(s),width:l.width.valuePx(s),borderRadius:e.Space.sp0},additionalPaymentInfoLabel:R,additionalPaymentInfoLabelStyle:{borderBottomRightRadius:e.Space.sp2,borderBottomLeftRadius:e.Space.sp2,paddingTop:e.Space.sp1,paddingBottom:e.Space.sp1,paddingLeft:e.Space.sp3,paddingRight:l.paddingRight.valuePx(s),textAlign:"left"},dateField:{name:c,placeholder:v,defaultValue:a?.paymentDate,dateFormat:S.defaultInput,maxDate:p.dateNow(),minDate:p.zeniDate("01 Jan 1900"),autoComplete:"off"}})]})})})})}const k=({withdrawFrom:t,paymentDate:a,onOkClick:u,onCancelClick:m,onClickAway:x})=>{const{dateFormat:h,spendManagement:{billPay:i},common:{strings:S}}=e.appLocale.getLocalizedStrings();if(t!=null&&a!=null){const g=`${t?.label} ${t?.maskedAccountNumber}`,y=o.jsxRuntimeExports.jsx(z,{children:o.jsxRuntimeExports.jsxs(O,{children:[o.jsxRuntimeExports.jsx(P,{children:g}),i.insufficientFunds.popUp.hasLowBalance,S.space,i.insufficientFunds.popUp.addMoney,o.jsxRuntimeExports.jsx(P,{children:a?.format(h.visual.MMMDFormat)}),i.insufficientFunds.popUp.avoidFailure]})});return o.jsxRuntimeExports.jsx(e.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(I,{children:i.insufficientFunds.popUp.title}),primaryButtonText:i.billDetails.buttons.approveAnyways,secondaryButtonText:i.billDetails.editBill,containerStyle:{maxWidth:474},descriptionComponent:y,action:{onOkClick:u,onCancelClick:m,onClickAway:x},secondaryButtonWidth:166,primaryButtonWidth:"auto",showLine:!1,buttonSeparatorStyle:{width:e.Space.sp3},buttonContainerStyle:{paddingBottom:e.Space.sp6}})}},z=d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-left: ${e.Space.sp7};
+  padding-right: ${e.Space.sp7};
+  margin-top: ${e.Space.sp3};
+  white-space: pre-line;
+`,O=d(e.StandardRegularSp)`
+  color: ${t=>t.theme.colors.hero};
+`,P=d(e.StandardMediumSp)`
+  color: ${t=>t.theme.colors.primary};
+`,I=d(e.H6Medium)`
+  margin-top: ${e.Space.sp6};
+  padding-left: ${e.Space.sp8};
+  padding-right: ${e.Space.sp8};
+  color: ${t=>t.theme.colors.primary};
+  word-break: break-word;
+`;exports.LowBalancePopup=k;exports.PaymentOutsideZeniPopup=C;