@zeniai/web-components 3.17.3 → 3.17.4

package/dist/BillDetailPage-Dm88TduI.cjs

@@ -0,0 +1,266 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),x=require("react"),a=require("@emotion/styled"),hn=require("@liveblocks/react"),D=require("@zeniai/client-epic-state"),t=require("./index-DFkWjm-c.cjs"),Qe=require("./LowBalancePopup-OoYz7HXs.cjs");function gn(e){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const u in e)if(u!=="default"){const P=Object.getOwnPropertyDescriptor(e,u);Object.defineProperty(y,u,P.get?P:{enumerable:!0,get:()=>e[u]})}}return y.default=e,Object.freeze(y)}const B=gn(x),Tn=e=>B.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",...e},B.createElement("g",{id:"Layer_1"},B.createElement("path",{fill:"none",stroke:"#757d7e",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round",d:"M4.4,30.6l6-5.9c1,.6,2.1.9,3.3,1,1.1.1,2.3,0,3.4-.4,1.1-.4,2.1-.9,2.9-1.7.9-.8,1.5-1.7,2-2.7,0-.1,0-.2,0-.4,0-.1,0-.2-.1-.3,0-.1-.2-.2-.3-.2-.1,0-.2,0-.4,0h-4.6c-.8,0-1.6-.3-2.1-.9-.6-.6-.9-1.3-.9-2.1s.3-1.5.9-2.1c.6-.6,1.3-.9,2.1-.9h3.8c.1,0,.3,0,.4-.1s.2-.2.3-.3c0-.1,0-.3,0-.4,0-.1,0-.3-.1-.4-1.3-1.6-3.1-2.7-5.2-3.1-2.1-.4-4.2,0-5.9,1.2-1.8,1.1-3,2.8-3.5,4.8s-.2,4.1.8,5.9l-6.1,5.7,3.3,3.3Z"})),B.createElement("g",{id:"Layer_2"},B.createElement("g",null,B.createElement("path",{fill:"#c27419",stroke:"#f3f7f7",strokeWidth:1.2,strokeLinecap:"round",strokeLinejoin:"round",d:"M31,8c0,1.9-.7,3.8-2.1,5.1-1.3,1.4-3.2,2.2-5.1,2.2-.9,0-1.9-.2-2.7-.5-.9-.3-1.7-.9-2.3-1.5-.7-.7-1.2-1.4-1.6-2.3-.4-.9-.6-1.8-.6-2.7,0-1.9.7-3.8,2.1-5.1,1.3-1.4,3.2-2.2,5.1-2.2.9,0,1.9.2,2.7.5.9.3,1.7.9,2.3,1.5.7.7,1.2,1.4,1.6,2.3.4.9.6,1.8.6,2.7Z"}),B.createElement("path",{fill:"none",stroke:"#f3f7f7",strokeWidth:1.2,strokeLinecap:"round",strokeLinejoin:"round",d:"M23.8,9.4v-4.6"}),B.createElement("path",{fill:"none",stroke:"#f3f7f7",strokeWidth:1.2,strokeLinecap:"round",strokeLinejoin:"round",d:"M23.8,11.4s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.1,0,0,0,0,.1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1,0,0,0,0-.1,0h0"})))),fn={formTitle:new t.ResponsiveSizedStyle("h6Medium","h5Medium")},d={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[6],t.sp[6]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[6],t.sp[8]),marginBottom:new t.ResponsiveSized(t.sp[3],t.sp[3]),labelWidth:new t.ResponsiveSized(120,160,160),formTitlePaddingLeftRight:new t.ResponsiveSized(30,0),marginTop:new t.ResponsiveSized(t.sp[1],0),rightIconsGap:new t.ResponsiveSized(t.sp[4],t.sp[5]),closeContainerMarginTop:new t.ResponsiveSized(t.sp[1],0),formTitleMarginTopBottom:new t.ResponsiveSized(0,0),footerButtonWidth:new t.ResponsiveSized(120,120,120,165,165),right:new t.ResponsiveSized(t.sp[3],t.sp[0]),actionsContainerRight:new t.ResponsiveSized(t.sp[0],t.sp[3],t.sp[3],t.sp[6],t.sp[6]),otherActionsIconContainerMarginLeft:new t.ResponsiveSized(t.sp[5],t.sp[4],t.sp[4],t.sp[5]),otherActionsContainerBottom:new t.ResponsiveSized(58,44),iconContainerMarginTop:new t.ResponsiveSized(2,t.sp[1]),recurringSchedulePaddingLeft:new t.ResponsiveSized(t.sp[2],0),paddingRight:new t.ResponsiveSized(t.sp[2],t.sp[3]),labelMarginRight:new t.ResponsiveSized(t.sp[0],t.sp[3]),textPadding:new t.ResponsiveSized(t.sp[0],t.sp[3]),additionalTextMarginTop:new t.ResponsiveSized(-t.sp[1],0),refundPopupWidth:new t.ResponsiveSized(300,420,420),drawerSectionPaddingLeftRight:new t.ResponsiveSized(t.sp[4],t.sp[5]),infoLabelPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[3]),infoLabelMarginTop:new t.ResponsiveSized(t.sp[1],t.sp[0]),navBarHeight:new t.ResponsiveSized(0,0,t.sp[8]),navBarContainerWidth:new t.ResponsiveSized(100,58)},{dateFormat:jn,common:{noText:S,strings:{empty:c},currency:et,via:bn,more:Rn,edit:Sn},spendManagement:{billPay:{billDetails:o,billsByTabs:fe,bulkActions:tt,vendorCreation:me,insufficientFunds:gt}},collaboration:{threads:{placeholder:nt,tooltip:ot,title:{comments:wn}}}}=t.appLocale.getLocalizedStrings(),xe=jn.visual.MMMDCommaYYYYformat,vn=({billDetails:e,currentTenant:y,showApproveRejectBtns:u,isShowDeletedBillsEnabled:P,signedInUser:J,isAdmin:Tt,isRealTimeApprovalEnabled:ft,isInternationalPaymentShaVsOurEnabled:jt,hasZeniAssistAccess:bt,analytics:E,showMarkAsPaidButtonToCreator:z,showMarkAsPaidButtonToApprover:je,isBillPayCommentingEnabled:be,isZeniUser:Rt,showBackButton:Re=!0,isDetectInsufficientFundsEnabled:St,redirectToEditableBillScreen:wt,redirectToBillsScreen:q,discardBillDetailsFromLocalStore:Se,deleteBill:vt,cancelAndDeleteBill:we,approveOrRejectBill:ve,onAddNewRule:It,onAttachmentClick:Ie,saveBillDetails:Ct,discardOutsideZeniPaymentData:Et,onBackClick:Ce,updateEditRealTimeApproverClicked:At,onSaveRealTimeApprovals:Pt,onRetryPaymentClick:kt,onRefundPaymentClick:$t})=>{const i=t.useWindowSizeContext(),s=t.useGlobalInfoContext(),Ee=n.useTheme(),[Bt,O]=x.useState(!1),[Ae,Q]=x.useState(!1),[ee,te]=x.useState(!1),[Pe,ne]=x.useState(!1),[Dt,oe]=x.useState(!1),[ke,Z]=x.useState(!1),m=e.transactionDetails?.id,Mt=Rt?t.ThreadsContext:t.NonZeniUsersThreadsContext,{requestToOpenThread:ae,setRequestToOpenThread:$e,setOpenThread:U}=x.useContext(Mt),[Lt,N]=x.useState(!1),T={application:"dashboard",companyId:s.currentTenant?.companyId,tab:"bill",entityId:m,isGlobalComment:!1},{threads:K,isLoading:w}=t.useFilteredThreads(T,"both",!1),h=be&&m!=null,Be=x.useMemo(()=>m==null?[]:K.filter(r=>r.resolved===!1&&!r.id.includes(t.NEW_THREAD_SUFFIX)),[K,m]).length,f=`dashboard_${s.currentTenant?.companyId}`,Ft=x.useCallback((r,p)=>{U(p),N(!1)},[U,N]);x.useEffect(()=>{ae?.threadId!=null&&K.length>0&&!w&&(U(ae.threadId),$e(null))},[ae,K,w,U,$e]),t.useSentryPerformanceTracking({componentName:"bill.details"});const[A,V]=x.useState({title:"",description:"",primaryButtonText:"",secondaryButtonText:""}),[De,Me]=x.useState("approved"),[zt,Le]=x.useState(!1),[Ot,Fe]=x.useState(!1),[ze,Oe]=x.useState(!1),Ne=()=>Le(!1),Nt=()=>Le(!0),Ke=t.usePrevious(e.zeniAssist?.refundStatus.fetchState),H=x.useCallback(()=>{q()},[q]);x.useEffect(()=>{(e.deleteStatus.fetchState==="Completed"||e.approvalUpdateStatus.fetchState==="Completed"||e.cancelAndDeleteStatus.fetchState==="Completed"||e.billSaveStatus==="Completed")&&(Se(),q())},[e,q,Se]),x.useEffect(()=>{Ke==="In-Progress"&&(e.zeniAssist?.refundStatus.fetchState==="Completed"||e.zeniAssist?.refundStatus.fetchState==="Error")&&(te(!1),H())},[Ke,e.zeniAssist?.refundStatus,H]);const g=e.transactionDetails?.billPayInfo.stage,G=e.transactionDetails?.billPayInfo.billStatus,W=e.transactionDetails?.billPayInfo.billPaymentStatus,Kt=e.transactionDetails?.billPayInfo.billPaymentRefundStatus,ie=g?.code==="paid",j=ie?g:G?.code=="approved"&&W?.code?W:G,R=In(j,e.transactionDetails),k=e.transactionDetails?.billPayInfo.isRefundInitiated===!0?Kt:W?.code!=null&&(G?.code=="approved"||W.code==="mark_as_paid")?W:G,se=e.transactionDetails?.vendor?.name,v=e.isRecurring,We=()=>{e.transactionDetails?.id!=null&&wt(e.transactionDetails?.id??"")},Wt=()=>{V({title:v?o.recurringBill.deleteRecurringTitle:o.deleteBillTitle,description:v?o.recurringBill.deleteRecurringAlertText:o.deleteAlertDescription,primaryButtonText:o.delete,secondaryButtonText:o.cancel}),O(!0)},_t=()=>{V({title:o.cancelBillTitle,description:o.cancelAlertDescription,primaryButtonText:o.yes,secondaryButtonText:o.no}),O(!0)},qt=()=>{V({title:v?o.recurringBill.cancelAndDeleteRecurringTitle:o.cancelAndDeleteBillTitle,description:v?o.recurringBill.cancelAndDeleteRecurringAlertText:o.cancelAndDeleteAlertDescription,primaryButtonText:o.yes,secondaryButtonText:o.no}),O(!0)},Zt=()=>{E.trackRefundClick(j?.code??"",g?.code??"",k?.description??"",v?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??""),V({title:o.zeniAssist.refundTitle,description:o.zeniAssist.refundDescription,primaryButtonText:o.zeniAssist.proceed,secondaryButtonText:o.cancel}),te(!0)},Ut={onOkClick:()=>{O(!1),A.primaryButtonText===o.delete?vt?.(e.isRecurring):A.title===o.cancelBillTitle?we?.(e.isRecurring):A.title===o.cancelAndDeleteBillTitle||A.title===o.recurringBill.cancelAndDeleteRecurringTitle?we?.(e.isRecurring,!0):A.primaryButtonText===o.zeniAssist.proceed&&(E.trackRefundConfirmClick(j?.code??"",g?.code??"",k?.description??"",v?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??""),$t())},onCancelClick:()=>{O(!1),te(!1)}},Vt={onOkClick:r=>{oe(!1),ve({billId:e.transactionDetails?.id??"",type:"rejected",description:r})},onCancelClick:()=>{oe(!1)}},Ht=()=>{const[r]=t.useAnimation("ZeniAssist");return r!=null?n.jsxRuntimeExports.jsx(n.Lottie,{"data-testid":t.generateDataTestId("bill-details-zeni-assist-icon",m),onClick:()=>{ne(!Pe),E.trackZeniAssistClick(j?.code??"",g?.code??"",k?.description??"",v?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??"")},style:{width:`${t.Space.sp5}`,height:`${t.Space.sp5}`,marginBottom:`${t.Space.sp2}`},animationData:r,loop:!0,play:!0,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):null},X={invoiceNumber:e.transactionDetails?.documentId??"",invoiceDate:e.transactionDetails?.date,billDueDate:e.transactionDetails?.dueDate,memo:e.transactionDetails?.memo,currencyCode:e.vendorCurrency??et.currencyCode},re=e.transactionDetails?.lines?.map((r,p)=>{const I=r;return{lineIndex:p,lineId:I.id,account:I.account,class:I.class,amount:I.amount.amount,billable:I.billable,customer:I.customer,lineDescription:I.lineDescription,recipientAmount:I.recipientAmount?.amount}})??[],Gt=e.transactionDetails?.recipientTotalAmount.amount??0,le=e.transactionDetails?.recipientTotalAmount,l={paymentType:e.paymentMethodType,paymentDate:e.transactionDetails?.billPayInfo.paymentDate,internationalTransferFeeBearerPaymentMethod:e.transactionDetails?.billPayInfo.internationalTransferFeeBearerPaymentMethod,paymentToBankAccount:e.bankAccount,paymentToPI:e.paymentInstrument},b=d.labelWidth.value(i),Xt=r=>r==="billable"||r==="has_been_billed"?o.yes:o.no,Yt=l.paymentToBankAccount?.bankAccountNumber?l.paymentToBankAccount?.bankAccountNumber?.slice(l.paymentToBankAccount?.bankAccountNumber?.length-4):l.paymentType?.method?.includes("international")&&l.paymentToBankAccount?.bankAccountIban?l.paymentToBankAccount?.bankAccountIban?.slice(l.paymentToBankAccount?.bankAccountIban.length-4):"",Jt=l.paymentToBankAccount?.bankAccountName!=null&&l.paymentToBankAccount?.bankAccountName!=""?l.paymentToBankAccount?.bankAccountName:`${e.transactionDetails?.vendor?.name} - ${l.paymentToBankAccount?.bankName} XXXX${Yt}`,Qt=e.transactionDetails?.billPayInfo?.isCollectToAccountInfoFromVendorContact?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[`${o.magicLink.collectFrom} ${e.transactionDetails?.billPayInfo?.toAccountVendorEmail}`,n.jsxRuntimeExports.jsx(eo,{windowSize:i,children:n.jsxRuntimeExports.jsx(Qn,{})})]}):void 0,_e=e.transactionDetails?.date!=null&&e.transactionDetails.bookCloseDate!=null&&e.transactionDetails.date.isBefore(e.transactionDetails.bookCloseDate),en=()=>{const r=l?.paymentToBankAccount?.bankAccountType,p=r!=null&&r!==""?t.formatToSentenceCase(r.toLowerCase()):r??"";return`${me.achDetails.bankRoutingNumber} ${l?.paymentToBankAccount?.bankRoutingNumberAch}, ${l?.paymentToBankAccount?.bankName}
+      ${me.achDetails.bankAccountNumber} ${l?.paymentToBankAccount?.bankAccountNumber}, ${me.achDetails.accountTypeLabel} ${p}`},Y=e.transactionDetails?.billPayInfo!=null?D.getActualPaymentDate(e.transactionDetails?.billPayInfo):void 0,tn=Y!=null&&e.paymentMethodType?.maxPeriod?.value!=null?D.zeniDate(D.getNextNthWorkingDay(Y?.toDate(),[0,6],e.paymentMethodType?.maxPeriod.value).toDateString()):void 0,qe=e.transactionDetails?.billPayInfo.expectedDepositDate??tn,Ze=t.paymentMethodValueToPaymentMethodLabel(l?.paymentType?.method??"").replace("Same Day",""),nn=(l?.paymentToBankAccount!=null||l?.paymentToPI)!=null?o.addedByZeni:e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact?n.jsxRuntimeExports.jsx(t.EmailOptionAdditionalInfo,{paymentTypeLabel:Ze,onClick:Nt,style:{marginTop:`${i==="small"?t.Space.sp2:t.Space.sp0}`}}):void 0,on=()=>l?.paymentToBankAccount==null&&l?.paymentToPI==null&&l?.paymentType?.method!=null&&e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact&&e.transactionDetails?.billPayInfo.paymentDate!=null?n.jsxRuntimeExports.jsx(t.DelayedPaymentMessage,{paymentType:l?.paymentType?.method,paymentDate:e.transactionDetails?.billPayInfo.paymentDate}):null,Ue=e.transactionDetails?.lines?.some(r=>{const p=r.account;return p?.isDeleted===!0&&p?.isBillEditableCoaAccountType===!1})??!1,ce=!(j?.code==="processing"||e.transactionDetails?.billPayInfo.isRefundInitiated===!0||e.transactionDetails?.billPayInfo.isRefundComplete===!0||(g?.code==="scheduled"||g?.code==="pending_approval")&&Ue),Ve=!((g?.code==="scheduled"||g?.code==="pending_approval")&&Ue),de=e.zeniAssist?.isEligibleForRetryIBT===!0||e.zeniAssist?.isEligibleForRetryOBP===!0,pe=e.zeniAssist?.isEligibleForRefund===!0,an=e?.transactionDetails?.billPayInfo.billPaymentMethodType.code==="wire"&&e?.transactionDetails?.billPayInfo.billPaymentMethodType.subCode==="international",sn=bt&&e.transactionDetails?.billPayInfo.billPaymentStatus.code!=null&&["failed","cancelled","returned"].includes(e.transactionDetails.billPayInfo.billPaymentStatus.code)&&(de||pe)&&an===!1,ue=de||pe,rn=e.transactionDetails?.billPayInfo.isRefundInitiated===!0&&e.transactionDetails?.billPayInfo.isRefundComplete===!1,M=j?.code,ln=!rn&&(!_e||j?.code==="processing"&&!v),He=!_e,Ge=["small","medium-compact","medium-regular"].includes(i),_=D.isBulkProcessing(e.transactionDetails?.bulkProcessingDetail?.type),$=D.isPaymentMethodOutsideZeni(e.paymentMethodType?.method),cn=!_&&(M!=="processing"&&Ve||M==="processing"&&!v||M==="processing"&&He||u&&$&&je),dn=r=>{E.trackBillPayMarkAsPaidSubmit(r.paymentMode??"other",g?.code??"",j?.code??""),Ct(!0,ze,r)},Xe=()=>{Fe(!0),E.trackBillPayMarkAsPaid(g?.code??"",j?.code??"")},pn=()=>{Oe(!0),Xe()},un=()=>{Et(),Fe(!1),ze&&Oe(!1)},mn=x.useMemo(()=>({companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,entityType:"bill.details",entityId:m??c,isGlobalComment:!1,application:"dashboard",tab:"bill",url:window.location.href}),[s.currentTenant,m]),L=St&&e.transactionDetails?.totalAmountWithFeesInUSD!=null&&g?.code!=="paid"&&j?.code!=="failed"&&j?.code!=="processing"&&j?.code!=="cancelled"&&j?.code!=="returned"&&j?.code!=="rejected"?t.getLowBalanceAdditionalInfo(e.transactionDetails?.totalAmountWithFeesInUSD,e.withdrawFrom,l.paymentDate):void 0,Ye=()=>{Me("approved"),ke===!0&&Z(!1),L!=null&&E.trackLowBalanceAccountApprove(g?.code??"",e.transactionDetails?.billPayInfo.billPaymentStatus.code??"",e.isRecurring?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??"",t.getLoggedInUserName(s.loggedInUser),e.withdrawFrom?.accType==="depositAccount"?"ZA":"External Account"),ve({billId:e.transactionDetails?.id??"",type:"approved"})},xn=()=>{Me("rejected"),L!=null&&E.trackLowBalanceAccountReject(g?.code??"",e.transactionDetails?.billPayInfo.billPaymentStatus.code??"",e.isRecurring?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??"",t.getLoggedInUserName(s.loggedInUser),e.withdrawFrom?.accType==="depositAccount"?"ZA":"External Account"),oe(!0)},Je=x.useRef(null);return n.jsxRuntimeExports.jsxs(Nn,{windowSize:i,ref:Je,children:[n.jsxRuntimeExports.jsx(n.Drawer,{anchor:"right",open:zt,onClose:Ne,transitionDuration:250,"data-testid":t.generateDataTestId("vendor-email-preview-drawer"),children:n.jsxRuntimeExports.jsx(t.VendorEmailPreview,{companyName:t.getCompanyName(y.company?.companyInfo),vendor:e.transactionDetails?.vendor?.name,paymentDate:l.paymentDate?.format(xe)??"",paymentType:Ze,amount:t.amountToString("0,0.[00]",le),isInvoiceAttached:!!e.transactionDetails?.attachments?.length,onClose:Ne})}),n.jsxRuntimeExports.jsxs(qn,{windowSize:i,children:[n.jsxRuntimeExports.jsx(oo,{windowSize:i,children:i==="small"?n.jsxRuntimeExports.jsx(t.NavBar,{"data-testid":t.generateDataTestId("bill-detail-nav-bar-mobile"),title:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[se,e.isRecurring?n.jsxRuntimeExports.jsx(Te,{width:t.Space.sp4,height:t.Space.sp4}):null]}),backgroundColor:Ee.colors.grey4,rightSideComponent:n.jsxRuntimeExports.jsxs(ct,{windowSize:i,children:[h?n.jsxRuntimeExports.jsxs(yt,{isDisabled:w,"data-testid":t.generateDataTestId("bill-comment-button"),onClick:w?()=>null:r=>{r.preventDefault(),r.stopPropagation(),N(!0),E.trackCommentActivity("bill","clicked",s.currentTenant?.companyName??"",s.controllersList.controllers.map(p=>t.getFullName(p)),void 0,void 0,"page icon")},children:[n.jsxRuntimeExports.jsx(t.CommentsAndNotesCount,{count:w?void 0:Be,isLoading:w,style:{left:"12px"}}),n.jsxRuntimeExports.jsx(ht,{})]}):null,n.jsxRuntimeExports.jsx(dt,{onClick:()=>H(),"data-testid":t.generateDataTestId("bill-detail-nav-bar-small-close-button"),children:n.jsxRuntimeExports.jsx(lt,{})})]}),leftSideComponent:n.jsxRuntimeExports.jsx(rt,{windowSize:i,onClick:Ce,"data-testid":t.generateDataTestId("bill-detail-nav-bar-small-back-button"),style:{visibility:`${Re?"visible":"hidden"}`},children:n.jsxRuntimeExports.jsx(st,{})}),source:"BillDetailPage"}):n.jsxRuntimeExports.jsx(t.NavBar,{"data-testid":t.generateDataTestId("bill-detail-nav-bar"),title:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[se,e.isRecurring?n.jsxRuntimeExports.jsx(Te,{width:t.Space.sp4,height:t.Space.sp4}):null]}),rightSideComponent:n.jsxRuntimeExports.jsxs(ct,{windowSize:i,children:[h?n.jsxRuntimeExports.jsxs(yt,{isDisabled:w,"data-testid":t.generateDataTestId("bill-comment-button"),onClick:w?()=>null:r=>{r.preventDefault(),r.stopPropagation(),N(!0),E.trackCommentActivity("bill","clicked",s.currentTenant?.companyName??"",s.controllersList.controllers.map(p=>t.getFullName(p)),void 0,void 0,"page icon")},children:[n.jsxRuntimeExports.jsx(t.CommentsAndNotesCount,{count:w?void 0:Be,isLoading:w,style:{left:"12px"}}),n.jsxRuntimeExports.jsx(ht,{})]}):null,n.jsxRuntimeExports.jsx(dt,{onClick:()=>H(),"data-testid":t.generateDataTestId("bill-detail-nav-bar-close-button"),children:n.jsxRuntimeExports.jsx(lt,{})})]}),leftSideComponent:n.jsxRuntimeExports.jsx(rt,{windowSize:i,onClick:Ce,"data-testid":t.generateDataTestId("bill-detail-nav-bar-back-button"),style:{visibility:`${Re?"visible":"hidden"}`},children:n.jsxRuntimeExports.jsx(st,{})}),enableTitleOnScroll:!0,scrollableContent:Je,source:"BillDetailPage"})}),n.jsxRuntimeExports.jsxs(Zn,{windowSize:i,children:[ke?n.jsxRuntimeExports.jsx(Qe.LowBalancePopup,{withdrawFrom:e.withdrawFrom,paymentDate:e?.transactionDetails?.billPayInfo.paymentDate,onOkClick:Ye,onCancelClick:()=>{Z(!1),We()},onClickAway:()=>{Z(!1)}}):null,Ot?n.jsxRuntimeExports.jsx(Qe.PaymentOutsideZeniPopup,{onCancel:un,onProceedForMarkAsPaid:dn,saveDetailsFetchState:e.billSaveStatus,paymentData:e.outsideZeniPaymentInfo}):null,Bt||ee?n.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:n.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:A.title}),descriptionComponent:n.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:A.description}),primaryButtonText:A.primaryButtonText,proceedButtonVariant:ee?"primary":"danger",secondaryButtonText:A.secondaryButtonText,action:Ut,isEditPopup:!0,isLoading:e.zeniAssist?.refundStatus.fetchState==="In-Progress",children:ee?Cn(i,e):null}):null,Dt?n.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:n.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:o.rejectBillTitlePrefix+" "+(e.transactionDetails?.vendor?.name!=null?e.transactionDetails.vendor.name:"")}),descriptionComponent:n.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:o.rejectBillDescription}),primaryButtonText:o.send,secondaryButtonText:o.cancel,action:Vt,isEditPopup:!0,isNotesIncluded:!0,notesPlaceholder:o.rejectBillReasonPlaceholder}):null,i!=="small"||R?n.jsxRuntimeExports.jsxs(Vn,{windowSize:i,children:[i!=="small"?n.jsxRuntimeExports.jsxs(Hn,{windowSize:i,children:[se,e.isRecurring?n.jsxRuntimeExports.jsx(Te,{height:t.Space.sp5,width:t.Space.sp5}):null]}):null,P&&R!=null&&R.code==="deleted"?n.jsxRuntimeExports.jsx(pt,{color:R.color,bgColor:R.bgColor,borderColor:R.borderColor,children:R.value}):R?.value===fe.tabsById.overdue?n.jsxRuntimeExports.jsx(pt,{color:R.color,bgColor:R.bgColor,borderColor:R.borderColor,children:R.value}):null]}):null,k!=null&&k.code?i==="small"?n.jsxRuntimeExports.jsx(t.VerticalProgressBarSectionMemo,{progressSectionObj:k,createDate:e.transactionDetails?.createTime,paymentDate:qe,scheduleDate:Y,approvedDate:e.latestApprovedDate,isFrozen:e.transactionDetails?.isDeleted}):n.jsxRuntimeExports.jsx(t.ProgressBarSectionMemo,{progressSectionObj:k,createDate:e.transactionDetails?.createTime,paymentDate:qe,scheduleDate:Y,approvedDate:e.latestApprovedDate,isFrozen:e.transactionDetails?.isDeleted}):null,Pn(_,e,L),n.jsxRuntimeExports.jsx(t.VendorSection,{sectionId:t.whosItForSectionId,currentVendorOption:{defaultOptions:[]},billId:m,isBillPayCommentingEnabled:be,isBillPaid:ie,disableVendorActions:!0,vendor:e.transactionDetails?.vendor,prevBills:e.previousBills,onAttachmentClick:Ie,isVendorRecommendationEnabled:!1,showVendorGptRecommendationText:!1}),l.paymentType?.method?.includes("ach"),n.jsxRuntimeExports.jsxs(he,{children:[n.jsxRuntimeExports.jsx(ge,{children:o.whatForTitle}),n.jsxRuntimeExports.jsxs(ye,{children:[n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"invoiceNumber"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("invoiceNumber")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.invoiceNumber,width:b},text:X.invoiceNumber??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"invoiceDate"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("invoiceDate")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.invoiceDate,width:b},text:X.invoiceDate?.format(xe)??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"billDueDate"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("billDueDate")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.billDueDate,width:b},text:X.billDueDate?.format(xe)??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"memo"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("memo")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.memo,width:b},text:X.memo??S,style:{width:"auto"}})})]})]}),n.jsxRuntimeExports.jsxs(he,{children:[n.jsxRuntimeExports.jsx(Un,{windowSize:i,children:n.jsxRuntimeExports.jsx(ge,{children:o.lineItemsTitle})}),re.length>0?re.map((r,p)=>{const I=e?.transactionDetails?.lines?.find(yn=>yn.id===r.lineId)?.recipientAmount;return n.jsxRuntimeExports.jsxs(Kn,{children:[re.length>1?n.jsxRuntimeExports.jsx(Wn,{windowSize:i,children:n.jsxRuntimeExports.jsx(_n,{windowSize:i,children:`${o.line} # ${p+1}`})}):null,n.jsxRuntimeExports.jsxs(ye,{children:[n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.recipientAmount`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("recipientAmount",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.amount,width:b},text:I!=null?t.amountToString("0,0[.]00",I):S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.lineDescription`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("lineDescription",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.description,width:b},text:r.lineDescription??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.account`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("account",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.category,width:b},text:r.account?.accountName??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.class`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("class",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.class,width:b},text:r.class?.className??S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.billable`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("billable",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.billable,width:b},text:r.billable!=null?Xt(r.billable):S,style:{width:"auto"}})}),n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:`${p}.customer`}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("customer",p)}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.customer,width:b},text:r.customer?.name??S,style:{width:"auto"}})})]})]},p)}):null]}),n.jsxRuntimeExports.jsxs(Gn,{windowSize:i,children:[n.jsxRuntimeExports.jsx(Xn,{children:o.total}),n.jsxRuntimeExports.jsx(Yn,{children:le!=null?n.jsxRuntimeExports.jsx(t.AmountBalance,{amount:le,integerStyles:t.textStyles.h6Medium.cssObject,decimalStyles:t.textStyles.standardMedium.cssObject}):S})]}),n.jsxRuntimeExports.jsxs(he,{children:[n.jsxRuntimeExports.jsx(ge,{children:o.paymentDetailsTitle}),n.jsxRuntimeExports.jsxs(ye,{children:[$?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"withdrawFrom"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("withdrawFrom")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.withdrawFrom,width:b},text:e.withdrawFrom!=null?t.getWithdrawFromReadOnlyLabel(e.withdrawFrom,i):c,style:{width:"auto"},additionalInfoLabelStyles:{textAlign:"right",paddingRight:d.infoLabelPaddingRight.valuePx(i),marginTop:d.infoLabelMarginTop.valuePx(i),color:t.Colors.brandColorGoldDark},additionalInfoLabel:L!=null&&g?.code==="pending_approval"?gt.addMoney:L})}),n.jsxRuntimeExports.jsx(C,{})]}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"paymentType"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("paymentType")}`},children:n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{additionalInfoLabel:l.paymentType?.method!=null&&l.paymentType.method.includes(D.NEW_INTERNATIONAL_METHOD_SUBTEXT)&&jt&&l.internationalTransferFeeBearerPaymentMethod!=null?n.jsxRuntimeExports.jsx($n,{children:t.getInternationalTransferPaymentMethodLabel(l.internationalTransferFeeBearerPaymentMethod)}):void 0,label:{label:o.paymentMethod,width:b},text:$&&e.outsideZeniPaymentInfo!=null?An(e.outsideZeniPaymentInfo):t.paymentMethodValueToPaymentMethodLabel(l.paymentType?.method??""),style:{width:"auto"}})}),$?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"paymentTo"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("paymentTo")}`},children:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.paymentTo,width:b},text:l.paymentToBankAccount!=null?Jt:l.paymentToPI!=null?l.paymentToPI.displayText:Qt,style:{width:"auto"},showEyeIcon:l.paymentToBankAccount!=null&&!!l.paymentType?.method?.includes("ach"),showAdditionalInfoLabel:!!e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact||l.paymentType?.method?.includes("ach"),tooltipText:en(),additionalInfoLabel:n.jsxRuntimeExports.jsx(kn,{children:nn})}),on()]})})]}),$||e.isRecurring?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(C,{}),n.jsxRuntimeExports.jsx(t.FieldThread,{isThreadAllowed:h,entityId:m,dashboardTabKey:t.toDashboardTabKeys({type:"details",key:"recurringPaymentType"}),roomId:f,companyId:s.currentTenant?.companyId??c,companyName:s.currentTenant?.companyName??c,dashboardOptionType:"bill",filterMetaData:{...T,entityType:`bill.details.${t.uniqueBillPayTabKey("recurringPaymentType")}`},children:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(t.LabeledReadOnlyTextField,{label:{label:o.paymentType,width:b},labelStyles:{marginRight:d.labelMarginRight.valuePx(i)},style:{width:"auto"},text:t.getRecurringCycleInfo(e.isRecurring,$,e.transactionDetails?.recurringBillInstance??1,e.recurringBillConfigDetail?.totalPaymentCycles??0),textStyles:{paddingLeft:d.textPadding.valuePx(i),paddingRight:d.textPadding.valuePx(i)},additionalInfoLabel:t.getAdditionalRecurringInfo(i,e.isRecurring,$,e.recurringBillConfigDetail),additionalInfoLabelStyles:{paddingRight:d.paddingRight.valuePx(i),marginTop:d.additionalTextMarginTop.valuePx(i)}}),e.recurringBillInstances!=null&&e.recurringBillInstances.length>0?n.jsxRuntimeExports.jsx(to,{style:{paddingLeft:d.recurringSchedulePaddingLeft.valuePx(i)},children:n.jsxRuntimeExports.jsx(t.RecurringPaymentSchedule,{onAttachmentClick:Ie,currencySymbol:e.transactionDetails?.recipientTotalAmount.currencySymbol??et.currencySymbol,recurringBillInstances:e.recurringBillInstances})}):null]})})]}):null]})]}),e.transactionDetails&&e.transactionDetails.id&&n.jsxRuntimeExports.jsx(t.ActivitySection,{amount:Gt,activities:e.billActivities,stage:g?.code??"draft",onAddNewRule:It,entity:"bill_pay",realTimeApproval:{allApprovers:e.filteredApprovers,filteredAttributes:e.filteredAttributes,isRealTimeApproverEditMode:e.realTimeApproval.isEditMode,realTimeApprovalSaveStatus:{fetchState:e.realTimeApproval.fetchState,error:e.realTimeApproval.error},approvalListFetchState:e.approverListFetchState.fetchState,allAccountingClass:e.allAccountingClasses,vendorOwnerId:e.vendorOwnerId??"",isAdmin:Tt,signedInUserId:J?.userId,showRealTimeApproval:ft,entityApprovalId:e.billActivities[0]?.entityApprovalId??e.transactionDetails.entityApprovalId,updateEditMode:At,onSaveRealTimeApprovals:Pt},historicActivities:e.billHistory.activities}),n.jsxRuntimeExports.jsx(Jn,{})]}),e.transactionDetails?.vendor!=null&&!ie&&!e.transactionDetails.isDeleted?n.jsxRuntimeExports.jsx(t.Footer,{separatorStyle:{marginRight:t.Space.sp4},showPrimaryButton:z||u,showCancel:!z&&u,cancelBtn:{label:Ge?o.buttons.reject:o.buttons.rejectBill,isLoading:De==="rejected"&&e.approvalUpdateStatus.fetchState==="In-Progress",onClick:xn,style:{width:d.footerButtonWidth.value(i)},reverseSpinnerColor:!1},primaryBtn:{label:En(z,Ge),isLoading:De==="approved"&&e.approvalUpdateStatus.fetchState==="In-Progress",onClick:z?Xe:()=>{L!=null?Z(!0):Ye()},isDisabled:e.billSaveStatus==="In-Progress"||e.approvalUpdateStatus.fetchState==="In-Progress"||e.realTimeApproval.isEditMode===!0,style:{width:z?"auto":d.footerButtonWidth.value(i)}},rightSideComponent:n.jsxRuntimeExports.jsx(Bn,{children:n.jsxRuntimeExports.jsxs(On,{windowSize:i,children:[!_&&Ae?n.jsxRuntimeExports.jsx(n.ClickAwayListener,{onClickAway:()=>{Q(!1),ne(!1)},children:n.jsxRuntimeExports.jsxs(it,{windowSize:i,"data-testid":t.generateDataTestId("bill-actions-container"),children:[M!=="processing"&&Ve?n.jsxRuntimeExports.jsx(F,{onClick:Wt,"data-testid":t.generateDataTestId("delete-bill-action-item"),children:o.buttons.deleteBill}):null,M==="processing"&&!v?n.jsxRuntimeExports.jsx(F,{onClick:_t,"data-testid":t.generateDataTestId("cancel-bill-action-item"),children:o.buttons.cancel}):null,M==="processing"&&He?n.jsxRuntimeExports.jsx(F,{onClick:qt,"data-testid":t.generateDataTestId("cancel-and-delete-bill-action-item"),children:o.buttons.cancelAndDelete}):null,u&&$&&je?n.jsxRuntimeExports.jsx(F,{onClick:pn,"data-testid":t.generateDataTestId("mark-as-paid-action-item"),children:o.paymentOutsideZeni.markAsPaid}):null]})}):null,Pe?n.jsxRuntimeExports.jsx(n.ClickAwayListener,{onClickAway:()=>{Q(!1),ne(!1)},children:n.jsxRuntimeExports.jsxs(it,{windowSize:i,"data-testid":t.generateDataTestId("bill-actions-with-zeni-assist-container"),children:[de?n.jsxRuntimeExports.jsx(F,{onClick:()=>{E.trackRetryClick(j?.code??"",g?.code??"",k?.description??"",v?["Recurring"]:["One-Time"],e.transactionDetails?.documentId??""),kt()},"data-testid":t.generateDataTestId("retry-bill-action-item"),children:o.buttons.retry}):null,pe?n.jsxRuntimeExports.jsx(F,{onClick:Zt,"data-testid":t.generateDataTestId("refund-bill-action-item"),children:o.buttons.refund}):null]})}):null,n.jsxRuntimeExports.jsxs(zn,{windowSize:i,children:[sn===!0?n.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,style:{color:t.Colors.heroDark,padding:`2px ${t.Space.sp2}`},display:"flex",title:ue?o.zeniAssist.tooltip:o.zeniAssist.connectToTeamTooltip,placement:"top",maxWidth:"267px",children:n.jsxRuntimeExports.jsx(at,{windowSize:i,showEditIcon:ce,isIconClickable:ue,"data-testid":t.generateDataTestId("other-actions-icon-container"),children:ue?n.jsxRuntimeExports.jsx(Ht,{}):n.jsxRuntimeExports.jsx(Mn,{})})}):null,!_&&ce===!0?n.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,style:{color:t.Colors.heroDark,padding:`2px ${t.Space.sp2}`},display:"flex",title:Sn,placement:"top",children:n.jsxRuntimeExports.jsx(Fn,{onClick:We,"data-testid":t.generateDataTestId("edit-bill-icon-container"),children:n.jsxRuntimeExports.jsx(Ln,{})})}):null,!_&&ln===!0&&cn?n.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,style:{color:t.Colors.heroDark,padding:`2px ${t.Space.sp2}`},display:"flex",title:Rn,placement:"top",children:n.jsxRuntimeExports.jsx(at,{windowSize:i,showEditIcon:ce,isIconClickable:!0,"data-testid":t.generateDataTestId("more-details-icon-container"),children:n.jsxRuntimeExports.jsx(Dn,{onClick:()=>Q(!Ae)})})}):null]})]})}),style:{minHeight:62}}):null]}),h?n.jsxRuntimeExports.jsx(hn.RoomProvider,{id:f,children:n.jsxRuntimeExports.jsx(t.AllThreadsDrawer,{isDrawerOpen:Lt,allowComposer:!0,drawerTitle:wn,threads:K,filter:T,autoExpand:!0,autoFocus:!1,isLoading:w,textOverrides:{composerPlaceholder:nt.addANewComment,replyComposerPlaceholder:nt.replyAComment,threadResolve:ot.resolveComment,threadUnResolve:ot.unResolveComment},threadMetadata:mn,onThreadClick:Ft,onCloseAllThreadsDrawer:()=>N(!1),drawerSectionStyle:{width:i==="small"?"100%":"400px",boxSizing:i==="small"?"border-box":"content-box",padding:`${t.Space.sp0} ${d.drawerSectionPaddingLeftRight.valuePx(i)}`,backgroundColor:Ee.colors.background},collapsibleThreadStyle:{width:i==="small"?"100%":"360px"}})}):null]})},In=(e,y)=>{const u=e?.code;if(e!=null&&u!=null)return y?.isDeleted===!0?{value:fe.tabsById.deleted,color:t.statusToColorMap.deleted.color,bgColor:t.statusToColorMap.deleted.bgColor,borderColor:t.statusToColorMap.deleted.borderColor,code:"deleted"}:u==="pending_approval"&&y?.dueDate?.isBefore(D.dateNow(),"date")===!0?{value:fe.tabsById.overdue,color:t.statusToColorMap.overdue.color,bgColor:t.statusToColorMap.overdue.bgColor,borderColor:t.statusToColorMap.overdue.borderColor}:{value:e.name,color:t.statusToColorMap[u].color,bgColor:t.statusToColorMap[u].bgColor,borderColor:t.statusToColorMap[u].borderColor}},Cn=(e,y)=>{const u=y.transactionDetails?.recipientTotalAmount;return n.jsxRuntimeExports.jsxs(no,{windowSize:e,children:[n.jsxRuntimeExports.jsxs(ut,{windowSize:e,children:[n.jsxRuntimeExports.jsx(mt,{children:o.zeniAssist.accountNumber}),n.jsxRuntimeExports.jsx(xt,{children:y.withdrawFrom!=null?t.getWithdrawFromReadOnlyLabel(y.withdrawFrom,e):c})]}),n.jsxRuntimeExports.jsxs(ut,{windowSize:e,children:[n.jsxRuntimeExports.jsx(mt,{children:o.zeniAssist.amount}),n.jsxRuntimeExports.jsx(xt,{children:u!=null?t.amountToString("0,0[.]00",u):S})]})]})},En=(e,y)=>e?o.paymentOutsideZeni.markAsPaid:y?o.buttons.approve:o.buttons.approveBill,An=e=>{const y=e.paymentMode,u=o.paymentOutsideZeni.offline;if(y==null||y==="other")return u;const P=o.paymentOutsideZeni.paymentModeOptions.find(J=>J.value===y)?.label;return`${u} ${bn} ${P}`},Pn=(e,y,u)=>{if(e)return n.jsxRuntimeExports.jsx(t.WarningBanner,{variant:"warning",style:{marginTop:t.Space.sp5,marginBottom:t.Space.sp3},title:tt.duplicateWarning.title,description:tt.duplicateWarning.description});if(u!=null){const P=`${y.withdrawFrom?.label??""} ${y.withdrawFrom?.maskedAccountNumber??""}`;return n.jsxRuntimeExports.jsx(t.WarningBanner,{variant:"low-balance",style:{marginTop:t.Space.sp2,marginBottom:t.Space.sp3},title:`${gt.lowBalanceIn.replace("__account__",P)}`,description:u.replace("Low balance! ","")})}else return null},kn=a.div``,$n=a.div``,Bn=a.div`
+  display: flex;
+  justify-content: flex-end;
+`,Dn=a(t.SvgMore)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,at=a.div`
+  display: flex;
+  margin-left: ${e=>e.windowSize==="small"?e.showEditIcon===!0?t.Space.sp3:t.Space.sp4:d.otherActionsIconContainerMarginLeft.valuePx(e.windowSize)};
+  cursor: ${e=>e.isIconClickable===!0?"pointer":"default"};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Mn=a(Tn)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  margin-bottom: ${t.Space.sp2};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ln=a(t.SvgEdit)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Fn=a.div`
+  display: flex;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.grey1};
+  margin-left: ${t.Space.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,zn=a.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,it=a.div`
+  display: flex;
+  width: max-content;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey5};
+  color: ${e=>e.theme.colors.hero};
+  cursor: pointer;
+  padding-top: ${t.Space.sp1};
+  padding-bottom: ${t.Space.sp1};
+  position: absolute;
+  bottom: ${e=>d.otherActionsContainerBottom.valuePx(e.windowSize)};
+  z-index: 3;
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${t.Space.sp1};
+  right: ${e=>d.right.valuePx(e.windowSize)};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.grey1}3D`};
+`,On=a.div`
+  width: auto;
+  justify-content: flex-end;
+  position: ${e=>e.windowSize==="small"?"static":"relative"};
+  right: ${e=>d.actionsContainerRight.valuePx(e.windowSize)};
+  height: 100%;
+  display: flex;
+`,F=a(t.SmallRegular)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-left: ${t.Space.sp3};
+  padding-right: ${t.Space.sp3};
+  height: ${t.Space.sp6};
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${e=>e.theme.colors.background};
+  }
+`,st=a(t.SvgArrowLeft)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,rt=a.div`
+  margin-top: ${e=>d.marginTop.valuePx(e.windowSize)};
+  display: flex;
+  align-items: center;
+`,lt=a(t.SvgClose)`
+  cursor: pointer;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,ct=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${e=>d.rightIconsGap.valuePx(e.windowSize)};
+  margin-top: ${e=>d.closeContainerMarginTop.valuePx(e.windowSize)};
+`,dt=a.div`
+  float: right;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  display: flex;
+`,Nn=a.div`
+  height: 100%;
+  overflow: scroll;
+`,ye=a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  margin: ${t.Space.sp3} 0;
+`,he=a.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${t.Space.sp3};
+`,Kn=a.div``,ge=a(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+`,C=a.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,Wn=a(t.LargeMedium)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${e=>e.theme.colors.champion};
+  margin-top: ${t.Space.sp2};
+  height: 31px;
+`,_n=a(t.LargeRegular)`
+  color: ${e=>e.theme.colors.champion};
+`,qn=a.div`
+  display: flex;
+  flex-direction: column;
+`,Zn=a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  padding-left: ${e=>d.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>d.containerPaddingRight.valuePx(e.windowSize)};
+  overflow-x: hidden;
+  margin-top: ${e=>d.navBarHeight.valuePx(e.windowSize)};
+`,Un=a.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  align-items: ${e=>e.windowSize==="small"?"unset":"center"};
+  width: ${e=>e.windowSize==="small"?"fit-content":"unset"};
+`,Vn=a.div`
+  display: flex;
+  margin-bottom: ${t.Space.sp3};
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  align-items: ${e=>e.windowSize==="small"?"unset":"center"};
+  width: ${e=>e.windowSize==="small"?"fit-content":"unset"};
+`,Hn=a(t.H5Medium)`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  ${e=>`${fn.formTitle.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${e=>d.formTitleMarginTopBottom.valuePx(e.windowSize)};
+  margin-bottom: ${e=>d.formTitleMarginTopBottom.valuePx(e.windowSize)};
+  word-break: break-all;
+  padding: ${e=>`${t.Space.sp0} ${d.formTitlePaddingLeftRight.valuePx(e.windowSize)}`};
+`,Gn=a.div`
+  padding: ${t.Space.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${e=>e.theme.colors.grey3};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${e=>d.marginBottom.valuePx(e.windowSize)};
+`,Xn=a(t.H6Medium)`
+  display: flex;
+  width: 176px;
+  color: ${e=>e.theme.colors.primary};
+`,Yn=a(t.H6Medium)`
+  display: flex;
+  width: calc(100% - 176px);
+  justify-content: flex-end;
+  color: ${e=>e.theme.colors.primary};
+`,pt=a(t.StandardMedium)`
+  display: flex;
+  color: ${e=>e.borderColor};
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1px 6px 1px 6px;
+  border: ${e=>`1px solid ${e.borderColor}`};
+  border-radius: ${t.Space.sp1};
+  min-width: fit-content;
+`,Jn=a.div`
+  display: flex;
+  flex-direction: column;
+  height: ${t.Space.sp11};
+`,Qn=a(t.SvgEmail)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,eo=a.div`
+  display: flex;
+  align-items: center;
+  margin-left: ${t.Space.sp2};
+  margin-top: ${e=>d.iconContainerMarginTop.valuePx(e.windowSize)};
+  align-self: center;
+`,Te=a(t.SvgRecurringCycle)`
+  margin-left: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+`,to=a.div``,no=a.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.Space.sp2};
+  margin: ${e=>e.windowSize==="small"?`0 ${t.Space.sp3} ${t.Space.sp6} ${t.Space.sp3}`:`0 ${t.Space.sp8} ${t.Space.sp5} ${t.Space.sp8}`};
+`,ut=a.div`
+  display: flex;
+  justify-content: space-between;
+  width: ${e=>d.refundPopupWidth.valuePx(e.windowSize)};
+`,mt=a(t.SmallRegular)`
+  text-align: left;
+  color: ${e=>e.theme.colors.grey1};
+`,xt=a(t.StandardRegular)`
+  justify-content: end;
+  display: flex;
+  flex: 1;
+`,yt=a.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  color: ${e=>e.theme.colors.hero};
+  opacity: ${e=>e.isDisabled?.5:1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,ht=a(t.SvgComment)`
+  display: flex;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  align-items: center;
+  justify-content: center;
+`,oo=a.div`
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 0px;
+  position: fixed;
+  top: 0px;
+  width: ${e=>d.navBarContainerWidth.valuePercentage(e.windowSize)};
+  z-index: 3;
+`;exports.default=vn;

package/dist/BillPayApprovalRuleDetailPage-B2cRU_MI.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./vendor-.pnpm-D0ILHvHB.cjs"),L=require("react"),y=require("@emotion/styled"),t=require("./index-DFkWjm-c.cjs"),d=require("./FollowStepsSection-Ce3RRedC.cjs"),U="billPayApprovalRuleDetailPage",$="lowerBound",q="upperBound",I="steps",b="applyToExistingBills",_={footerPadding:new t.ResponsiveSized(t.sp[2],t.sp[2])};function k({localData:e,approvalUpdateActionType:s,onBackClick:r,onApprovalRuleDataUpdated:n,onResetClick:a,isLowerBoundDisabled:x=!1,isUpperBoundDisabled:c=!0,hideUpperBoundField:f=!1,onSaveRuleClick:C,onSaveRuleSuccess:j}){const A=t.useWindowSizeContext(),o=t.appLocale.getLocalizedStrings().commonSetUp.approval,R=t.appLocale.getLocalizedStrings().spendManagement.billPay.billPayApproval,S=D(e,s==="approval_create"&&!x),v=l.useForm({mode:"all",reValidateMode:"onChange",defaultValues:S}),m=e.billPaySetupApproverViewUpdateData?.updateStatus,E=t.usePrevious(m?.fetchState),{upperBound:B}=S,{allApprovalRules:p,allAccountingClasses:T,billPaySetupApproverViewUpdateData:h}=e;let g=p.length>1?p.length-1:0,P=p.length>0?p[g].criteria[0].range.min.amount:0;if(h!=null&&h.type==="approval_update"&&h.data!=null){const{approvalRuleId:i}=h.data;g=p.findIndex(u=>u.approvalRuleId===i),P=g>0?p[g-1].criteria[0].range.min.amount:0}const F=v.handleSubmit(()=>{C()}),O=async(i,u)=>{n(u)};return L.useEffect(()=>{const i=v.watch((u,{name:N})=>{if(N!=null&&u!=null){const V=l.cloneDeep(u);l.defer(()=>O(N,V))}});return()=>{i.unsubscribe()}}),L.useEffect(()=>{E==="In-Progress"&&m?.fetchState==="Completed"&&j()},[E,m?.fetchState,j]),l.jsxRuntimeExports.jsxs(H,{children:[l.jsxRuntimeExports.jsx(t.NavBar,{title:s==="approval_create"?o.newApproval:o.editApproval,style:{zIndex:4},onBackClick:()=>{r()},source:"BillPayApprovalRuleDetailPage"}),l.jsxRuntimeExports.jsxs(l.FormProvider,{...v,children:[l.jsxRuntimeExports.jsx(J,{children:l.jsxRuntimeExports.jsx("form",{id:w(U),onSubmit:F,children:l.jsxRuntimeExports.jsxs(X,{children:[l.jsxRuntimeExports.jsx(d.LabeledMultiTextField,{label:{label:f?R.amountPerBillGreaterLabel:R.amountPerBillLabel},firstText:{type:"number",name:$,placeholder:"$0",options:{required:!0,max:B===1/0?Number.MAX_SAFE_INTEGER-1:B-1,min:P,validate:i=>x?!0:i!=null&&i>P},isDisabled:x,additionalInfoLabel:o.firstRuleLowerBoundInfoLabel,additionalErrorLabel:o.firstRuleErrorInfoLabel},secondText:{type:"number",name:q,placeholder:"Infinity",isDisabled:c,hideField:f,additionalInfoLabel:o.upperBoundInfoLabel}}),l.jsxRuntimeExports.jsx(K,{}),l.jsxRuntimeExports.jsx(d.FollowStepsSection,{sectionId:I,label:{label:o.followStepsLabel},approversPlaceholder:o.approversPlaceholder,notifiersPlaceholder:o.notifiersPlaceholder,allUserWithRoles:e.allApprovers,filteredApprovers:e.filteredApprovers.map(i=>i.user),allAttributes:e.allAttributes,filteredAttributes:e.filteredAttributes,allAccountingClasses:T,stepsInfo:S[I],userSelectPlaceholder:o.userSelectPlaceholder,approveNotifyPlaceholder:o.approveNotifyPlaceholder,productType:"zeni_bill_pay"})]})})}),l.jsxRuntimeExports.jsx(t.Footer,{formId:w(U),primaryBtn:{label:o.saveBtnText,isLoading:m?.fetchState==="In-Progress",isDisabled:m?.fetchState==="In-Progress",style:{width:"85px",minWidth:"auto"}},topComponent:s==="approval_create"?null:l.jsxRuntimeExports.jsx(t.LabeledGroupedCheckBoxField,{name:b,mode:"always_on",checkBoxes:[{value:b,label:o.applyToExistingBills,defaultChecked:!0,groupLabel:!1}],style:{width:"100%"}}),showCancel:!0,cancelBtn:{label:o.cancelBtnText,isLoading:!1,style:{width:"85px",minWidth:"auto"},onClick:a},containerStyle:{justifyContent:A==="small"?"space-between":"center"},style:{padding:_.footerPadding.valuePx(A)},separatorStyle:{marginRight:t.Space.sp4}})]})]})}const D=(e,s)=>{const{criteria:r,steps:n}=e.billPaySetupApproverViewUpdateData?.data??{};return{[b]:[b],[I]:z(e.allApprovers.map(a=>a.user),e.filteredApprovers.map(a=>a.user),d.getNonUserOptions(e.allAttributes),d.getNonUserOptions(e.filteredAttributes),n??[])??[],[$]:s?void 0:r!=null?r.range.min.amount??0:0,[q]:r!=null?r.range.max==null?1/0:r.range.max.amount:1/0}},z=(e,s,r,n,a)=>a&&a.length>0?a.map((c,f)=>({stepIndex:f,stepType:{selectedOption:c.action,allOptions:d.requireAndNotifyOptions},actors:{allUsers:s,selectedUsers:M(e,c.actors),allNonUsers:n,selectedNonUsers:W(r,c.actors)}})):[{stepIndex:0,stepType:{selectedOption:"require_approval",allOptions:d.requireAndNotifyOptions},actors:{allUsers:s,selectedUsers:[],allNonUsers:n,selectedNonUsers:[]}}],M=(e,s)=>e.filter(r=>r.userId!=null&&s.findIndex(n=>n.userId===r.userId)>-1),W=(e,s)=>e.filter(r=>s.findIndex(n=>n.subType===r.value)>-1),w=e=>`${e}_form`,G=e=>`${e}`,H=y.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+`,X=y.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+`,J=y.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,K=y.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`;exports.D=_;exports.default=k;exports.uniqueFormName=w;exports.uniqueName=G;

package/dist/BillPayApprovalRuleDetailPage-D6XrQooX.js

@@ -0,0 +1,266 @@
+import { g as M, i as O, h as W, j as a, F as G } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as j } from "react";
+import b from "@emotion/styled";
+import { R as H, D as R, u as X, a as $, aD as J, aE as K, ao as Q, S as d, fN as Y } from "./index-CR2Dmphx.js";
+import { L as Z, F as ee, g as U, r as E } from "./FollowStepsSection-RQr300lQ.js";
+const C = "billPayApprovalRuleDetailPage", F = "lowerBound", T = "upperBound", P = "steps", g = "applyToExistingBills", te = {
+  footerPadding: new H(R[2], R[2])
+};
+function he({
+  localData: e,
+  approvalUpdateActionType: r,
+  onBackClick: t,
+  onApprovalRuleDataUpdated: o,
+  onResetClick: s,
+  isLowerBoundDisabled: f = !1,
+  isUpperBoundDisabled: u = !0,
+  hideUpperBoundField: m = !1,
+  onSaveRuleClick: D,
+  onSaveRuleSuccess: I
+}) {
+  const w = X(), l = $.getLocalizedStrings().commonSetUp.approval, A = $.getLocalizedStrings().spendManagement.billPay.billPayApproval, y = le(
+    e,
+    r === "approval_create" && !f
+  ), v = M({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: y
+  }), c = e.billPaySetupApproverViewUpdateData?.updateStatus, B = J(c?.fetchState), { upperBound: L } = y, {
+    allApprovalRules: i,
+    allAccountingClasses: V,
+    billPaySetupApproverViewUpdateData: h
+  } = e;
+  let x = i.length > 1 ? i.length - 1 : 0, S = i.length > 0 ? i[x].criteria[0].range.min.amount : 0;
+  if (h != null && h.type === "approval_update" && h.data != null) {
+    const { approvalRuleId: n } = h.data;
+    x = i.findIndex(
+      (p) => p.approvalRuleId === n
+    ), S = x > 0 ? i[x - 1].criteria[0].range.min.amount : 0;
+  }
+  const k = v.handleSubmit(() => {
+    D();
+  }), z = async (n, p) => {
+    o(p);
+  };
+  return j(() => {
+    const n = v.watch((p, { name: N }) => {
+      if (N != null && p != null) {
+        const q = O(p);
+        W(
+          () => z(
+            N,
+            q
+          )
+        );
+      }
+    });
+    return () => {
+      n.unsubscribe();
+    };
+  }), j(() => {
+    B === "In-Progress" && c?.fetchState === "Completed" && I();
+  }, [B, c?.fetchState, I]), /* @__PURE__ */ a.jsxs(se, { children: [
+    /* @__PURE__ */ a.jsx(
+      K,
+      {
+        title: r === "approval_create" ? l.newApproval : l.editApproval,
+        style: { zIndex: 4 },
+        onBackClick: () => {
+          t();
+        },
+        source: "BillPayApprovalRuleDetailPage"
+      }
+    ),
+    /* @__PURE__ */ a.jsxs(G, { ...v, children: [
+      /* @__PURE__ */ a.jsx(ie, { children: /* @__PURE__ */ a.jsx(
+        "form",
+        {
+          id: _(C),
+          onSubmit: k,
+          children: /* @__PURE__ */ a.jsxs(ne, { children: [
+            /* @__PURE__ */ a.jsx(
+              Z,
+              {
+                label: {
+                  label: m ? A.amountPerBillGreaterLabel : A.amountPerBillLabel
+                },
+                firstText: {
+                  type: "number",
+                  name: F,
+                  placeholder: "$0",
+                  options: {
+                    required: !0,
+                    max: L === 1 / 0 ? Number.MAX_SAFE_INTEGER - 1 : L - 1,
+                    min: S,
+                    validate: (n) => f ? !0 : n != null && n > S
+                  },
+                  isDisabled: f,
+                  additionalInfoLabel: l.firstRuleLowerBoundInfoLabel,
+                  additionalErrorLabel: l.firstRuleErrorInfoLabel
+                },
+                secondText: {
+                  type: "number",
+                  name: T,
+                  placeholder: "Infinity",
+                  isDisabled: u,
+                  hideField: m,
+                  additionalInfoLabel: l.upperBoundInfoLabel
+                }
+              }
+            ),
+            /* @__PURE__ */ a.jsx(pe, {}),
+            /* @__PURE__ */ a.jsx(
+              ee,
+              {
+                sectionId: P,
+                label: {
+                  label: l.followStepsLabel
+                },
+                approversPlaceholder: l.approversPlaceholder,
+                notifiersPlaceholder: l.notifiersPlaceholder,
+                allUserWithRoles: e.allApprovers,
+                filteredApprovers: e.filteredApprovers.map(
+                  (n) => n.user
+                ),
+                allAttributes: e.allAttributes,
+                filteredAttributes: e.filteredAttributes,
+                allAccountingClasses: V,
+                stepsInfo: y[P],
+                userSelectPlaceholder: l.userSelectPlaceholder,
+                approveNotifyPlaceholder: l.approveNotifyPlaceholder,
+                productType: "zeni_bill_pay"
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ a.jsx(
+        Q,
+        {
+          formId: _(C),
+          primaryBtn: {
+            label: l.saveBtnText,
+            isLoading: c?.fetchState === "In-Progress",
+            isDisabled: c?.fetchState === "In-Progress",
+            style: {
+              width: "85px",
+              minWidth: "auto"
+            }
+          },
+          topComponent: r === "approval_create" ? null : /* @__PURE__ */ a.jsx(
+            Y,
+            {
+              name: g,
+              mode: "always_on",
+              checkBoxes: [
+                {
+                  value: g,
+                  label: l.applyToExistingBills,
+                  defaultChecked: !0,
+                  groupLabel: !1
+                }
+              ],
+              style: { width: "100%" }
+            }
+          ),
+          showCancel: !0,
+          cancelBtn: {
+            label: l.cancelBtnText,
+            isLoading: !1,
+            style: {
+              width: "85px",
+              minWidth: "auto"
+            },
+            onClick: s
+          },
+          containerStyle: {
+            justifyContent: w === "small" ? "space-between" : "center"
+          },
+          style: { padding: te.footerPadding.valuePx(w) },
+          separatorStyle: { marginRight: d.sp4 }
+        }
+      )
+    ] })
+  ] });
+}
+const le = (e, r) => {
+  const { criteria: t, steps: o } = e.billPaySetupApproverViewUpdateData?.data ?? {};
+  return {
+    [g]: [g],
+    [P]: re(
+      e.allApprovers.map((s) => s.user),
+      e.filteredApprovers.map((s) => s.user),
+      U(e.allAttributes),
+      U(e.filteredAttributes),
+      o ?? []
+    ) ?? [],
+    [F]: r ? void 0 : t != null ? t.range.min.amount ?? 0 : 0,
+    [T]: t != null ? t.range.max == null ? 1 / 0 : t.range.max.amount : 1 / 0
+  };
+}, re = (e, r, t, o, s) => s && s.length > 0 ? s.map((u, m) => ({
+  stepIndex: m,
+  stepType: {
+    selectedOption: u.action,
+    allOptions: E
+  },
+  actors: {
+    allUsers: r,
+    selectedUsers: ae(e, u.actors),
+    allNonUsers: o,
+    selectedNonUsers: oe(t, u.actors)
+  }
+})) : [
+  {
+    stepIndex: 0,
+    stepType: {
+      selectedOption: "require_approval",
+      allOptions: E
+    },
+    actors: {
+      allUsers: r,
+      selectedUsers: [],
+      allNonUsers: o,
+      selectedNonUsers: []
+    }
+  }
+], ae = (e, r) => e.filter(
+  (t) => t.userId != null && r.findIndex(
+    (o) => o.userId === t.userId
+  ) > -1
+), oe = (e, r) => e.filter(
+  (t) => r.findIndex(
+    (o) => o.subType === t.value
+  ) > -1
+), _ = (e) => `${e}_form`, xe = (e) => `${e}`, se = b.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+  box-shadow: ${(e) => `${d.sp0} 2px ${d.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, ne = b.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${d.sp0} 2px ${d.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${d.sp2};
+`, ie = b.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, pe = b.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`;
+export {
+  te as D,
+  he as default,
+  _ as uniqueFormName,
+  xe as uniqueName
+};