@zeniai/web-components 3.16.78 → 3.16.79

package/dist/BillDetailPage-DOPcVvpf.js

@@ -1,1798 +0,0 @@
-import { u as Zn, j as t, D as _n, C as ct, L as Vn } from "./vendor-.pnpm-DtFedGku.js";
-import * as E from "react";
-import { useState as $, useContext as Un, useMemo as dt, useCallback as pt, useEffect as we, useRef as Kn } from "react";
-import a from "@emotion/styled";
-import { RoomProvider as Hn } from "@liveblocks/react";
-import { getActualPaymentDate as Gn, zeniDate as Xn, getNextNthWorkingDay as qn, isBulkProcessing as Yn, isPaymentMethodOutsideZeni as Jn, NEW_INTERNATIONAL_METHOD_SUBTEXT as Qn, dateNow as eo } from "@zeniai/client-epic-state";
-import { u as to, dB as no, T as oo, fw as ao, i as io, N as ro, fa as so, aD as lo, a as co, R as u, hn as ut, ho as po, S as o, hp as uo, j as h, hq as mo, a5 as Se, hr as yo, aE as mt, k as yt, ae as ht, aP as gt, aQ as ft, aR as xt, ik as ho, il as go, im as fo, io as xo, hv as C, hw as A, hx as j, ao as P, hu as To, t as Tt, C as ie, hy as Et, hE as bo, hz as wo, hA as vo, ip as Io, iq as Co, ap as Ao, Z as ve, m as jo, ir as F, D as s, ah as Po, F as So, e as $o, b as ko, fO as Bo, is as bt, hF as wt, av as Ro, fu as Mo, _ as Lo, L as Do, y as No, aj as Fo, e_ as Wt, it as Oo, G as Zt, r as zo, a3 as Eo, fN as Wo, p as Zo } from "./index-CSlpdR5S.js";
-import { L as _o, P as Vo } from "./LowBalancePopup-CuZguc50.js";
-const Uo = (e) => /* @__PURE__ */ E.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...e }, /* @__PURE__ */ E.createElement("g", { id: "Layer_1" }, /* @__PURE__ */ E.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" })), /* @__PURE__ */ E.createElement("g", { id: "Layer_2" }, /* @__PURE__ */ E.createElement("g", null, /* @__PURE__ */ E.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" }), /* @__PURE__ */ E.createElement("path", { fill: "none", stroke: "#f3f7f7", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", d: "M23.8,9.4v-4.6" }), /* @__PURE__ */ E.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" })))), Ko = {
-  formTitle: new Ro("h6Medium", "h5Medium")
-}, p = {
-  containerPaddingLeft: new u(s[3], s[6], s[6]),
-  containerPaddingRight: new u(s[3], s[6], s[8]),
-  marginBottom: new u(s[3], s[3]),
-  labelWidth: new u(120, 160, 160),
-  formTitlePaddingLeftRight: new u(30, 0),
-  marginTop: new u(s[1], 0),
-  rightIconsGap: new u(s[4], s[5]),
-  closeContainerMarginTop: new u(s[1], 0),
-  formTitleMarginTopBottom: new u(0, 0),
-  footerButtonWidth: new u(120, 120, 120, 165, 165),
-  right: new u(s[3], s[0]),
-  actionsContainerRight: new u(s[0], s[3], s[3], s[6], s[6]),
-  otherActionsIconContainerMarginLeft: new u(
-    s[5],
-    s[4],
-    s[4],
-    s[5]
-  ),
-  otherActionsContainerBottom: new u(58, 44),
-  iconContainerMarginTop: new u(2, s[1]),
-  recurringSchedulePaddingLeft: new u(s[2], 0),
-  paddingRight: new u(s[2], s[3]),
-  labelMarginRight: new u(s[0], s[3]),
-  textPadding: new u(s[0], s[3]),
-  additionalTextMarginTop: new u(-s[1], 0),
-  refundPopupWidth: new u(300, 420, 420),
-  drawerSectionPaddingLeftRight: new u(s[4], s[5]),
-  infoLabelPaddingRight: new u(s[3], s[3]),
-  infoLabelMarginTop: new u(s[1], s[0]),
-  navBarHeight: new u(0, 0, s[8]),
-  navBarContainerWidth: new u(100, 58)
-}, {
-  dateFormat: Ho,
-  common: {
-    noText: k,
-    strings: { empty: c },
-    currency: vt,
-    via: Go,
-    more: Xo,
-    edit: qo
-  },
-  spendManagement: {
-    billPay: {
-      billDetails: n,
-      billsByTabs: $e,
-      bulkActions: It,
-      vendorCreation: Ct,
-      insufficientFunds: _t
-    }
-  },
-  collaboration: {
-    threads: {
-      placeholder: At,
-      tooltip: jt,
-      title: { comments: Yo }
-    }
-  }
-} = co.getLocalizedStrings(), Ie = Ho.visual.MMMDCommaYYYYformat, za = ({
-  billDetails: e,
-  currentTenant: f,
-  showApproveRejectBtns: g,
-  isShowDeletedBillsEnabled: V,
-  signedInUser: re,
-  isAdmin: Vt,
-  isRealTimeApprovalEnabled: Ut,
-  isInternationalPaymentShaVsOurEnabled: Kt,
-  hasZeniAssistAccess: Ht,
-  analytics: D,
-  showMarkAsPaidButtonToCreator: U,
-  showMarkAsPaidButtonToApprover: ke,
-  isBillPayCommentingEnabled: Be,
-  isZeniUser: Gt,
-  showBackButton: Re = !0,
-  isDetectInsufficientFundsEnabled: Xt,
-  redirectToEditableBillScreen: qt,
-  redirectToBillsScreen: Y,
-  discardBillDetailsFromLocalStore: Me,
-  deleteBill: Yt,
-  cancelAndDeleteBill: Le,
-  approveOrRejectBill: De,
-  onAddNewRule: Jt,
-  onAttachmentClick: Ne,
-  saveBillDetails: Qt,
-  discardOutsideZeniPaymentData: en,
-  onBackClick: Fe,
-  updateEditRealTimeApproverClicked: tn,
-  onSaveRealTimeApprovals: nn,
-  onRetryPaymentClick: on,
-  onRefundPaymentClick: an
-}) => {
-  const i = to(), r = no(), Oe = Zn(), [rn, K] = $(!1), [ze, se] = $(!1), [le, ce] = $(!1), [Ee, de] = $(!1), [sn, pe] = $(!1), [We, J] = $(!1), y = e.transactionDetails?.id, ln = Gt ? oo : ao, { requestToOpenThread: ue, setRequestToOpenThread: Ze, setOpenThread: Q } = Un(ln), [cn, H] = $(!1), b = {
-    application: "dashboard",
-    companyId: r.currentTenant?.companyId,
-    tab: "bill",
-    entityId: y,
-    isGlobalComment: !1
-  }, { threads: G, isLoading: B } = io(
-    b,
-    "both",
-    !1
-  ), x = Be && y != null, _e = dt(() => y == null ? [] : G.filter(
-    (d) => d.resolved === !1 && !d.id.includes(ro)
-  ), [G, y]).length, w = `dashboard_${r.currentTenant?.companyId}`, dn = pt(
-    (d, m) => {
-      Q(m), H(!1);
-    },
-    [Q, H]
-  );
-  we(() => {
-    ue?.threadId != null && G.length > 0 && !B && (Q(ue.threadId), Ze(null));
-  }, [
-    ue,
-    G,
-    B,
-    Q,
-    Ze
-  ]), so({
-    componentName: "bill.details"
-  });
-  const [N, ee] = $({
-    title: "",
-    description: "",
-    primaryButtonText: "",
-    secondaryButtonText: ""
-  }), [Ve, Ue] = $("approved"), [pn, Ke] = $(!1), [un, He] = $(!1), [Ge, Xe] = $(!1), qe = () => Ke(!1), mn = () => Ke(!0), Ye = lo(
-    e.zeniAssist?.refundStatus.fetchState
-  ), te = pt(() => {
-    Y();
-  }, [Y]);
-  we(() => {
-    (e.deleteStatus.fetchState === "Completed" || e.approvalUpdateStatus.fetchState === "Completed" || e.cancelAndDeleteStatus.fetchState === "Completed" || e.billSaveStatus === "Completed") && (Me(), Y());
-  }, [e, Y, Me]), we(() => {
-    Ye === "In-Progress" && (e.zeniAssist?.refundStatus.fetchState === "Completed" || e.zeniAssist?.refundStatus.fetchState === "Error") && (ce(!1), te());
-  }, [Ye, e.zeniAssist?.refundStatus, te]);
-  const T = e.transactionDetails?.billPayInfo.stage, ne = e.transactionDetails?.billPayInfo.billStatus, X = e.transactionDetails?.billPayInfo.billPaymentStatus, yn = e.transactionDetails?.billPayInfo.billPaymentRefundStatus, me = T?.code === "paid", v = me ? T : ne?.code == "approved" && X?.code ? X : ne, S = Jo(v, e.transactionDetails), O = e.transactionDetails?.billPayInfo.isRefundInitiated === !0 ? yn : X?.code != null && (ne?.code == "approved" || X.code === "mark_as_paid") ? X : ne, ye = e.transactionDetails?.vendor?.name, R = e.isRecurring, Je = () => {
-    e.transactionDetails?.id != null && qt(e.transactionDetails?.id ?? "");
-  }, hn = () => {
-    ee({
-      title: R ? n.recurringBill.deleteRecurringTitle : n.deleteBillTitle,
-      description: R ? n.recurringBill.deleteRecurringAlertText : n.deleteAlertDescription,
-      primaryButtonText: n.delete,
-      secondaryButtonText: n.cancel
-    }), K(!0);
-  }, gn = () => {
-    ee({
-      title: n.cancelBillTitle,
-      description: n.cancelAlertDescription,
-      primaryButtonText: n.yes,
-      secondaryButtonText: n.no
-    }), K(!0);
-  }, fn = () => {
-    ee({
-      title: R ? n.recurringBill.cancelAndDeleteRecurringTitle : n.cancelAndDeleteBillTitle,
-      description: R ? n.recurringBill.cancelAndDeleteRecurringAlertText : n.cancelAndDeleteAlertDescription,
-      primaryButtonText: n.yes,
-      secondaryButtonText: n.no
-    }), K(!0);
-  }, xn = () => {
-    D.trackRefundClick(
-      v?.code ?? "",
-      T?.code ?? "",
-      O?.description ?? "",
-      R ? ["Recurring"] : ["One-Time"],
-      e.transactionDetails?.documentId ?? ""
-    ), ee({
-      title: n.zeniAssist.refundTitle,
-      description: n.zeniAssist.refundDescription,
-      primaryButtonText: n.zeniAssist.proceed,
-      secondaryButtonText: n.cancel
-    }), ce(!0);
-  }, Tn = {
-    onOkClick: () => {
-      K(!1), N.primaryButtonText === n.delete ? Yt?.(e.isRecurring) : N.title === n.cancelBillTitle ? Le?.(e.isRecurring) : N.title === n.cancelAndDeleteBillTitle || N.title === n.recurringBill.cancelAndDeleteRecurringTitle ? Le?.(e.isRecurring, !0) : N.primaryButtonText === n.zeniAssist.proceed && (D.trackRefundConfirmClick(
-        v?.code ?? "",
-        T?.code ?? "",
-        O?.description ?? "",
-        R ? ["Recurring"] : ["One-Time"],
-        e.transactionDetails?.documentId ?? ""
-      ), an());
-    },
-    onCancelClick: () => {
-      K(!1), ce(!1);
-    }
-  }, bn = {
-    onOkClick: (d) => {
-      pe(!1), De({
-        billId: e.transactionDetails?.id ?? "",
-        type: "rejected",
-        description: d
-      });
-    },
-    onCancelClick: () => {
-      pe(!1);
-    }
-  }, wn = () => {
-    const [d] = zo("ZeniAssist");
-    return d != null ? /* @__PURE__ */ t.jsx(
-      Vn,
-      {
-        "data-testid": h(
-          "bill-details-zeni-assist-icon",
-          y
-        ),
-        onClick: () => {
-          de(!Ee), D.trackZeniAssistClick(
-            v?.code ?? "",
-            T?.code ?? "",
-            O?.description ?? "",
-            R ? ["Recurring"] : ["One-Time"],
-            e.transactionDetails?.documentId ?? ""
-          );
-        },
-        style: {
-          width: `${o.sp5}`,
-          height: `${o.sp5}`,
-          marginBottom: `${o.sp2}`
-        },
-        animationData: d,
-        loop: !0,
-        play: !0,
-        rendererSettings: {
-          preserveAspectRatio: "xMidYMid slice"
-        }
-      }
-    ) : null;
-  }, oe = {
-    invoiceNumber: e.transactionDetails?.documentId ?? "",
-    invoiceDate: e.transactionDetails?.date,
-    billDueDate: e.transactionDetails?.dueDate,
-    memo: e.transactionDetails?.memo,
-    currencyCode: e.vendorCurrency ?? vt.currencyCode
-  }, he = e.transactionDetails?.lines?.map((d, m) => {
-    const M = d;
-    return {
-      lineIndex: m,
-      lineId: M.id,
-      account: M.account,
-      class: M.class,
-      amount: M.amount.amount,
-      billable: M.billable,
-      customer: M.customer,
-      lineDescription: M.lineDescription,
-      recipientAmount: M.recipientAmount?.amount
-    };
-  }) ?? [], vn = e.transactionDetails?.recipientTotalAmount.amount ?? 0, ge = e.transactionDetails?.recipientTotalAmount, l = {
-    paymentType: e.paymentMethodType,
-    paymentDate: e.transactionDetails?.billPayInfo.paymentDate,
-    internationalTransferFeeBearerPaymentMethod: e.transactionDetails?.billPayInfo.internationalTransferFeeBearerPaymentMethod,
-    paymentToBankAccount: e.bankAccount,
-    paymentToPI: e.paymentInstrument
-  }, I = p.labelWidth.value(i), In = (d) => d === "billable" || d === "has_been_billed" ? n.yes : n.no, Cn = 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
-  ) : "", An = l.paymentToBankAccount?.bankAccountName != null && l.paymentToBankAccount?.bankAccountName != "" ? l.paymentToBankAccount?.bankAccountName : `${e.transactionDetails?.vendor?.name} - ${l.paymentToBankAccount?.bankName} XXXX${Cn}`, jn = e.transactionDetails?.billPayInfo?.isCollectToAccountInfoFromVendorContact ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    `${n.magicLink.collectFrom} ${e.transactionDetails?.billPayInfo?.toAccountVendorEmail}`,
-    /* @__PURE__ */ t.jsx(ja, { windowSize: i, children: /* @__PURE__ */ t.jsx(Aa, {}) })
-  ] }) : void 0, Qe = e.transactionDetails?.date != null && e.transactionDetails.bookCloseDate != null && e.transactionDetails.date.isBefore(
-    e.transactionDetails.bookCloseDate
-  ), Pn = () => `${Ct.achDetails.bankRoutingNumber} ${l?.paymentToBankAccount?.bankRoutingNumberAch}, ${l?.paymentToBankAccount?.bankName}
-      ${Ct.achDetails.bankAccountNumber} ${l?.paymentToBankAccount?.bankAccountNumber}`, ae = e.transactionDetails?.billPayInfo != null ? Gn(e.transactionDetails?.billPayInfo) : void 0, Sn = ae != null && e.paymentMethodType?.maxPeriod?.value != null ? Xn(
-    qn(
-      ae?.toDate(),
-      [0, 6],
-      e.paymentMethodType?.maxPeriod.value
-    ).toDateString()
-  ) : void 0, et = e.transactionDetails?.billPayInfo.expectedDepositDate ?? Sn, tt = ut(
-    l?.paymentType?.method ?? ""
-  ).replace("Same Day", ""), $n = (l?.paymentToBankAccount != null || l?.paymentToPI) != null ? n.addedByZeni : e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact ? /* @__PURE__ */ t.jsx(
-    po,
-    {
-      paymentTypeLabel: tt,
-      onClick: mn,
-      style: { marginTop: `${i === "small" ? o.sp2 : o.sp0}` }
-    }
-  ) : void 0, kn = () => l?.paymentToBankAccount == null && l?.paymentToPI == null && l?.paymentType?.method != null && e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact && e.transactionDetails?.billPayInfo.paymentDate != null ? /* @__PURE__ */ t.jsx(
-    Oo,
-    {
-      paymentType: l?.paymentType?.method,
-      paymentDate: e.transactionDetails?.billPayInfo.paymentDate
-    }
-  ) : null, nt = e.transactionDetails?.lines?.some((d) => {
-    const m = d.account;
-    return m?.isDeleted === !0 && m?.isBillEditableCoaAccountType === !1;
-  }) ?? !1, fe = !(v?.code === "processing" || e.transactionDetails?.billPayInfo.isRefundInitiated === !0 || e.transactionDetails?.billPayInfo.isRefundComplete === !0 || (T?.code === "scheduled" || T?.code === "pending_approval") && nt), ot = !((T?.code === "scheduled" || T?.code === "pending_approval") && nt), xe = e.zeniAssist?.isEligibleForRetryIBT === !0 || e.zeniAssist?.isEligibleForRetryOBP === !0, Te = e.zeniAssist?.isEligibleForRefund === !0, Bn = e?.transactionDetails?.billPayInfo.billPaymentMethodType.code === "wire" && e?.transactionDetails?.billPayInfo.billPaymentMethodType.subCode === "international", Rn = Ht && e.transactionDetails?.billPayInfo.billPaymentStatus.code != null && ["failed", "cancelled", "returned"].includes(
-    e.transactionDetails.billPayInfo.billPaymentStatus.code
-  ) && (xe || Te) && Bn === !1, be = xe || Te, Mn = e.transactionDetails?.billPayInfo.isRefundInitiated === !0 && e.transactionDetails?.billPayInfo.isRefundComplete === !1, W = v?.code, Ln = !Mn && (!Qe || v?.code === "processing" && !R), at = !Qe, it = [
-    "small",
-    "medium-compact",
-    "medium-regular"
-  ].includes(i), q = Yn(
-    e.transactionDetails?.bulkProcessingDetail?.type
-  ), z = Jn(
-    e.paymentMethodType?.method
-  ), Dn = !q && (W !== "processing" && ot || W === "processing" && !R || W === "processing" && at || g && z && ke), Nn = (d) => {
-    D.trackBillPayMarkAsPaidSubmit(
-      d.paymentMode ?? "other",
-      T?.code ?? "",
-      v?.code ?? ""
-    ), Qt(!0, Ge, d);
-  }, rt = () => {
-    He(!0), D.trackBillPayMarkAsPaid(
-      T?.code ?? "",
-      v?.code ?? ""
-    );
-  }, Fn = () => {
-    Xe(!0), rt();
-  }, On = () => {
-    en(), He(!1), Ge && Xe(!1);
-  }, zn = dt(
-    () => ({
-      companyId: r.currentTenant?.companyId ?? c,
-      companyName: r.currentTenant?.companyName ?? c,
-      entityType: "bill.details",
-      entityId: y ?? c,
-      // This won't be the case for existing bills - empty is to solve typescript error
-      isGlobalComment: !1,
-      application: "dashboard",
-      tab: "bill",
-      url: window.location.href
-    }),
-    [r.currentTenant, y]
-  ), Z = Xt && e.transactionDetails?.totalAmountWithFeesInUSD != null && T?.code !== "paid" && v?.code !== "failed" && v?.code !== "processing" && v?.code !== "cancelled" && v?.code !== "returned" && v?.code !== "rejected" ? uo(
-    e.transactionDetails?.totalAmountWithFeesInUSD,
-    e.withdrawFrom,
-    l.paymentDate
-  ) : void 0, st = () => {
-    Ue("approved"), We === !0 && J(!1), Z != null && D.trackLowBalanceAccountApprove(
-      T?.code ?? "",
-      e.transactionDetails?.billPayInfo.billPaymentStatus.code ?? "",
-      e.isRecurring ? ["Recurring"] : ["One-Time"],
-      e.transactionDetails?.documentId ?? "",
-      wt(r.loggedInUser),
-      e.withdrawFrom?.accType === "depositAccount" ? "ZA" : "External Account"
-    ), De({
-      billId: e.transactionDetails?.id ?? "",
-      type: "approved"
-    });
-  }, En = () => {
-    Ue("rejected"), Z != null && D.trackLowBalanceAccountReject(
-      T?.code ?? "",
-      e.transactionDetails?.billPayInfo.billPaymentStatus.code ?? "",
-      e.isRecurring ? ["Recurring"] : ["One-Time"],
-      e.transactionDetails?.documentId ?? "",
-      wt(r.loggedInUser),
-      e.withdrawFrom?.accType === "depositAccount" ? "ZA" : "External Account"
-    ), pe(!0);
-  }, lt = Kn(null);
-  return /* @__PURE__ */ t.jsxs(ua, { windowSize: i, ref: lt, children: [
-    /* @__PURE__ */ t.jsx(
-      _n,
-      {
-        anchor: "right",
-        open: pn,
-        onClose: qe,
-        transitionDuration: 250,
-        "data-testid": h("vendor-email-preview-drawer"),
-        children: /* @__PURE__ */ t.jsx(
-          mo,
-          {
-            companyName: yo(f.company?.companyInfo),
-            vendor: e.transactionDetails?.vendor?.name,
-            paymentDate: l.paymentDate?.format(Ie) ?? "",
-            paymentType: tt,
-            amount: Se("0,0.[00]", ge),
-            isInvoiceAttached: !!e.transactionDetails?.attachments?.length,
-            onClose: qe
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(ga, { windowSize: i, children: [
-      /* @__PURE__ */ t.jsx($a, { windowSize: i, children: i === "small" ? /* @__PURE__ */ t.jsx(
-        mt,
-        {
-          "data-testid": h("bill-detail-nav-bar-mobile"),
-          title: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            ye,
-            e.isRecurring ? /* @__PURE__ */ t.jsx(Pe, { width: o.sp4, height: o.sp4 }) : null
-          ] }),
-          backgroundColor: Oe.colors.grey4,
-          rightSideComponent: /* @__PURE__ */ t.jsxs(Rt, { windowSize: i, children: [
-            x ? /* @__PURE__ */ t.jsxs(
-              Ot,
-              {
-                isDisabled: B,
-                "data-testid": h("bill-comment-button"),
-                onClick: B ? () => null : (d) => {
-                  d.preventDefault(), d.stopPropagation(), H(!0), D.trackCommentActivity(
-                    "bill",
-                    "clicked",
-                    r.currentTenant?.companyName ?? "",
-                    r.controllersList.controllers.map(
-                      (m) => ht(m)
-                    ),
-                    void 0,
-                    void 0,
-                    "page icon"
-                  );
-                },
-                children: [
-                  /* @__PURE__ */ t.jsx(
-                    yt,
-                    {
-                      count: B ? void 0 : _e,
-                      isLoading: B,
-                      style: { left: "12px" }
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx(zt, {})
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ t.jsx(
-              Mt,
-              {
-                onClick: () => te(),
-                "data-testid": h(
-                  "bill-detail-nav-bar-small-close-button"
-                ),
-                children: /* @__PURE__ */ t.jsx(Bt, {})
-              }
-            )
-          ] }),
-          leftSideComponent: /* @__PURE__ */ t.jsx(
-            kt,
-            {
-              windowSize: i,
-              onClick: Fe,
-              "data-testid": h(
-                "bill-detail-nav-bar-small-back-button"
-              ),
-              style: {
-                visibility: `${Re ? "visible" : "hidden"}`
-              },
-              children: /* @__PURE__ */ t.jsx($t, {})
-            }
-          ),
-          source: "BillDetailPage"
-        }
-      ) : /* @__PURE__ */ t.jsx(
-        mt,
-        {
-          "data-testid": h("bill-detail-nav-bar"),
-          title: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            ye,
-            e.isRecurring ? /* @__PURE__ */ t.jsx(Pe, { width: o.sp4, height: o.sp4 }) : null
-          ] }),
-          rightSideComponent: /* @__PURE__ */ t.jsxs(Rt, { windowSize: i, children: [
-            x ? /* @__PURE__ */ t.jsxs(
-              Ot,
-              {
-                isDisabled: B,
-                "data-testid": h("bill-comment-button"),
-                onClick: B ? () => null : (d) => {
-                  d.preventDefault(), d.stopPropagation(), H(!0), D.trackCommentActivity(
-                    "bill",
-                    "clicked",
-                    r.currentTenant?.companyName ?? "",
-                    r.controllersList.controllers.map(
-                      (m) => ht(m)
-                    ),
-                    void 0,
-                    void 0,
-                    "page icon"
-                  );
-                },
-                children: [
-                  /* @__PURE__ */ t.jsx(
-                    yt,
-                    {
-                      count: B ? void 0 : _e,
-                      isLoading: B,
-                      style: { left: "12px" }
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx(zt, {})
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ t.jsx(
-              Mt,
-              {
-                onClick: () => te(),
-                "data-testid": h(
-                  "bill-detail-nav-bar-close-button"
-                ),
-                children: /* @__PURE__ */ t.jsx(Bt, {})
-              }
-            )
-          ] }),
-          leftSideComponent: /* @__PURE__ */ t.jsx(
-            kt,
-            {
-              windowSize: i,
-              onClick: Fe,
-              "data-testid": h(
-                "bill-detail-nav-bar-back-button"
-              ),
-              style: {
-                visibility: `${Re ? "visible" : "hidden"}`
-              },
-              children: /* @__PURE__ */ t.jsx($t, {})
-            }
-          ),
-          enableTitleOnScroll: !0,
-          scrollableContent: lt,
-          source: "BillDetailPage"
-        }
-      ) }),
-      /* @__PURE__ */ t.jsxs(fa, { windowSize: i, children: [
-        We ? /* @__PURE__ */ t.jsx(
-          _o,
-          {
-            withdrawFrom: e.withdrawFrom,
-            paymentDate: e?.transactionDetails?.billPayInfo.paymentDate,
-            onOkClick: st,
-            onCancelClick: () => {
-              J(!1), Je();
-            },
-            onClickAway: () => {
-              J(!1);
-            }
-          }
-        ) : null,
-        un ? /* @__PURE__ */ t.jsx(
-          Vo,
-          {
-            onCancel: On,
-            onProceedForMarkAsPaid: Nn,
-            saveDetailsFetchState: e.billSaveStatus,
-            paymentData: e.outsideZeniPaymentInfo
-          }
-        ) : null,
-        rn || le ? /* @__PURE__ */ t.jsx(
-          gt,
-          {
-            titleComponent: /* @__PURE__ */ t.jsx(xt, { children: N.title }),
-            descriptionComponent: /* @__PURE__ */ t.jsx(ft, { children: N.description }),
-            primaryButtonText: N.primaryButtonText,
-            proceedButtonVariant: le ? "primary" : "danger",
-            secondaryButtonText: N.secondaryButtonText,
-            action: Tn,
-            isEditPopup: !0,
-            isLoading: e.zeniAssist?.refundStatus.fetchState === "In-Progress",
-            children: le ? Qo(i, e) : null
-          }
-        ) : null,
-        sn ? /* @__PURE__ */ t.jsx(
-          gt,
-          {
-            titleComponent: /* @__PURE__ */ t.jsx(xt, { children: n.rejectBillTitlePrefix + " " + (e.transactionDetails?.vendor?.name != null ? e.transactionDetails.vendor.name : "") }),
-            descriptionComponent: /* @__PURE__ */ t.jsx(ft, { children: n.rejectBillDescription }),
-            primaryButtonText: n.send,
-            secondaryButtonText: n.cancel,
-            action: bn,
-            isEditPopup: !0,
-            isNotesIncluded: !0,
-            notesPlaceholder: n.rejectBillReasonPlaceholder
-          }
-        ) : null,
-        i !== "small" || S ? /* @__PURE__ */ t.jsxs(Ta, { windowSize: i, children: [
-          i !== "small" ? /* @__PURE__ */ t.jsxs(ba, { windowSize: i, children: [
-            ye,
-            e.isRecurring ? /* @__PURE__ */ t.jsx(Pe, { height: o.sp5, width: o.sp5 }) : null
-          ] }) : null,
-          V && S != null && S.code === "deleted" ? /* @__PURE__ */ t.jsx(
-            Lt,
-            {
-              color: S.color,
-              bgColor: S.bgColor,
-              borderColor: S.borderColor,
-              children: S.value
-            }
-          ) : S?.value === $e.tabsById.overdue ? /* @__PURE__ */ t.jsx(
-            Lt,
-            {
-              color: S.color,
-              bgColor: S.bgColor,
-              borderColor: S.borderColor,
-              children: S.value
-            }
-          ) : null
-        ] }) : null,
-        O != null && O.code ? i === "small" ? /* @__PURE__ */ t.jsx(
-          ho,
-          {
-            progressSectionObj: O,
-            createDate: e.transactionDetails?.createTime,
-            paymentDate: et,
-            scheduleDate: ae,
-            approvedDate: e.latestApprovedDate,
-            isFrozen: e.transactionDetails?.isDeleted
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          go,
-          {
-            progressSectionObj: O,
-            createDate: e.transactionDetails?.createTime,
-            paymentDate: et,
-            scheduleDate: ae,
-            approvedDate: e.latestApprovedDate,
-            isFrozen: e.transactionDetails?.isDeleted
-          }
-        ) : null,
-        na(
-          q,
-          e,
-          Z
-        ),
-        /* @__PURE__ */ t.jsx(
-          fo,
-          {
-            sectionId: xo,
-            currentVendorOption: {
-              defaultOptions: []
-            },
-            billId: y,
-            isBillPayCommentingEnabled: Be,
-            isBillPaid: me,
-            disableVendorActions: !0,
-            vendor: e.transactionDetails?.vendor,
-            prevBills: e.previousBills,
-            onAttachmentClick: Ne,
-            isVendorRecommendationEnabled: !1,
-            showVendorGptRecommendationText: !1
-          }
-        ),
-        l.paymentType?.method?.includes("ach"),
-        /* @__PURE__ */ t.jsxs(Ae, { children: [
-          /* @__PURE__ */ t.jsx(je, { children: n.whatForTitle }),
-          /* @__PURE__ */ t.jsxs(Ce, { children: [
-            /* @__PURE__ */ t.jsx(
-              C,
-              {
-                isThreadAllowed: x,
-                entityId: y,
-                dashboardTabKey: j({
-                  type: "details",
-                  key: "invoiceNumber"
-                }),
-                roomId: w,
-                companyId: r.currentTenant?.companyId ?? c,
-                companyName: r.currentTenant?.companyName ?? c,
-                dashboardOptionType: "bill",
-                filterMetaData: {
-                  ...b,
-                  entityType: `bill.details.${A("invoiceNumber")}`
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  P,
-                  {
-                    label: {
-                      label: n.invoiceNumber,
-                      width: I
-                    },
-                    text: oe.invoiceNumber ?? k,
-                    style: { width: "auto" }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ t.jsx(L, {}),
-            /* @__PURE__ */ t.jsx(
-              C,
-              {
-                isThreadAllowed: x,
-                entityId: y,
-                dashboardTabKey: j({
-                  type: "details",
-                  key: "invoiceDate"
-                }),
-                roomId: w,
-                companyId: r.currentTenant?.companyId ?? c,
-                companyName: r.currentTenant?.companyName ?? c,
-                dashboardOptionType: "bill",
-                filterMetaData: {
-                  ...b,
-                  entityType: `bill.details.${A("invoiceDate")}`
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  P,
-                  {
-                    label: {
-                      label: n.invoiceDate,
-                      width: I
-                    },
-                    text: oe.invoiceDate?.format(Ie) ?? k,
-                    style: { width: "auto" }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ t.jsx(L, {}),
-            /* @__PURE__ */ t.jsx(
-              C,
-              {
-                isThreadAllowed: x,
-                entityId: y,
-                dashboardTabKey: j({
-                  type: "details",
-                  key: "billDueDate"
-                }),
-                roomId: w,
-                companyId: r.currentTenant?.companyId ?? c,
-                companyName: r.currentTenant?.companyName ?? c,
-                dashboardOptionType: "bill",
-                filterMetaData: {
-                  ...b,
-                  entityType: `bill.details.${A("billDueDate")}`
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  P,
-                  {
-                    label: {
-                      label: n.billDueDate,
-                      width: I
-                    },
-                    text: oe.billDueDate?.format(Ie) ?? k,
-                    style: { width: "auto" }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ t.jsx(L, {}),
-            /* @__PURE__ */ t.jsx(
-              C,
-              {
-                isThreadAllowed: x,
-                entityId: y,
-                dashboardTabKey: j({
-                  type: "details",
-                  key: "memo"
-                }),
-                roomId: w,
-                companyId: r.currentTenant?.companyId ?? c,
-                companyName: r.currentTenant?.companyName ?? c,
-                dashboardOptionType: "bill",
-                filterMetaData: {
-                  ...b,
-                  entityType: `bill.details.${A("memo")}`
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  P,
-                  {
-                    label: {
-                      label: n.memo,
-                      width: I
-                    },
-                    text: oe.memo ?? k,
-                    style: { width: "auto" }
-                  }
-                )
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Ae, { children: [
-          /* @__PURE__ */ t.jsx(xa, { windowSize: i, children: /* @__PURE__ */ t.jsx(je, { children: n.lineItemsTitle }) }),
-          he.length > 0 ? he.map((d, m) => {
-            const M = e?.transactionDetails?.lines?.find(
-              (Wn) => Wn.id === d.lineId
-            )?.recipientAmount;
-            return /* @__PURE__ */ t.jsxs(ma, { children: [
-              he.length > 1 ? /* @__PURE__ */ t.jsx(ya, { windowSize: i, children: /* @__PURE__ */ t.jsx(ha, { windowSize: i, children: `${n.line} # ${m + 1}` }) }) : null,
-              /* @__PURE__ */ t.jsxs(Ce, { children: [
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.recipientAmount`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("recipientAmount", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.amount,
-                          width: I
-                        },
-                        text: M != null ? Se("0,0[.]00", M) : k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(L, {}),
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.lineDescription`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("lineDescription", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.description,
-                          width: I
-                        },
-                        text: d.lineDescription ?? k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(L, {}),
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.account`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("account", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.category,
-                          width: I
-                        },
-                        text: d.account?.accountName ?? k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(L, {}),
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.class`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("class", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.class,
-                          width: I
-                        },
-                        text: d.class?.className ?? k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(L, {}),
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.billable`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("billable", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.billable,
-                          width: I
-                        },
-                        text: d.billable != null ? In(d.billable) : k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(L, {}),
-                /* @__PURE__ */ t.jsx(
-                  C,
-                  {
-                    isThreadAllowed: x,
-                    entityId: y,
-                    dashboardTabKey: j({
-                      type: "details",
-                      key: `${m}.customer`
-                    }),
-                    roomId: w,
-                    companyId: r.currentTenant?.companyId ?? c,
-                    companyName: r.currentTenant?.companyName ?? c,
-                    dashboardOptionType: "bill",
-                    filterMetaData: {
-                      ...b,
-                      entityType: `bill.details.${A("customer", m)}`
-                    },
-                    children: /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.customer,
-                          width: I
-                        },
-                        text: d.customer?.name ?? k,
-                        style: { width: "auto" }
-                      }
-                    )
-                  }
-                )
-              ] })
-            ] }, m);
-          }) : null
-        ] }),
-        /* @__PURE__ */ t.jsxs(wa, { windowSize: i, children: [
-          /* @__PURE__ */ t.jsx(va, { children: n.total }),
-          /* @__PURE__ */ t.jsx(Ia, { children: ge != null ? /* @__PURE__ */ t.jsx(
-            To,
-            {
-              amount: ge,
-              integerStyles: Tt.h6Medium.cssObject,
-              decimalStyles: Tt.standardMedium.cssObject
-            }
-          ) : k })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Ae, { children: [
-          /* @__PURE__ */ t.jsx(je, { children: n.paymentDetailsTitle }),
-          /* @__PURE__ */ t.jsxs(Ce, { children: [
-            z ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsx(
-                C,
-                {
-                  isThreadAllowed: x,
-                  entityId: y,
-                  dashboardTabKey: j({
-                    type: "details",
-                    key: "withdrawFrom"
-                  }),
-                  roomId: w,
-                  companyId: r.currentTenant?.companyId ?? c,
-                  companyName: r.currentTenant?.companyName ?? c,
-                  dashboardOptionType: "bill",
-                  filterMetaData: {
-                    ...b,
-                    entityType: `bill.details.${A("withdrawFrom")}`
-                  },
-                  children: /* @__PURE__ */ t.jsx(
-                    P,
-                    {
-                      label: {
-                        label: n.withdrawFrom,
-                        width: I
-                      },
-                      text: e.withdrawFrom != null ? Et(
-                        e.withdrawFrom,
-                        i
-                      ) : c,
-                      style: { width: "auto" },
-                      additionalInfoLabelStyles: {
-                        textAlign: "right",
-                        paddingRight: p.infoLabelPaddingRight.valuePx(i),
-                        marginTop: p.infoLabelMarginTop.valuePx(i),
-                        color: ie.brandColorGoldDark
-                      },
-                      additionalInfoLabel: Z != null && T?.code === "pending_approval" ? _t.addMoney : Z
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ t.jsx(L, {})
-            ] }),
-            /* @__PURE__ */ t.jsx(
-              C,
-              {
-                isThreadAllowed: x,
-                entityId: y,
-                dashboardTabKey: j({
-                  type: "details",
-                  key: "paymentType"
-                }),
-                roomId: w,
-                companyId: r.currentTenant?.companyId ?? c,
-                companyName: r.currentTenant?.companyName ?? c,
-                dashboardOptionType: "bill",
-                filterMetaData: {
-                  ...b,
-                  entityType: `bill.details.${A("paymentType")}`
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  P,
-                  {
-                    additionalInfoLabel: l.paymentType?.method != null && l.paymentType.method.includes(
-                      Qn
-                    ) && Kt && l.internationalTransferFeeBearerPaymentMethod != null ? /* @__PURE__ */ t.jsx(aa, { children: bo(
-                      l.internationalTransferFeeBearerPaymentMethod
-                    ) }) : void 0,
-                    label: {
-                      label: n.paymentMethod,
-                      width: I
-                    },
-                    text: z && e.outsideZeniPaymentInfo != null ? ta(
-                      e.outsideZeniPaymentInfo
-                    ) : ut(
-                      l.paymentType?.method ?? ""
-                    ),
-                    style: { width: "auto" }
-                  }
-                )
-              }
-            ),
-            z ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsx(L, {}),
-              /* @__PURE__ */ t.jsx(
-                C,
-                {
-                  isThreadAllowed: x,
-                  entityId: y,
-                  dashboardTabKey: j({
-                    type: "details",
-                    key: "paymentTo"
-                  }),
-                  roomId: w,
-                  companyId: r.currentTenant?.companyId ?? c,
-                  companyName: r.currentTenant?.companyName ?? c,
-                  dashboardOptionType: "bill",
-                  filterMetaData: {
-                    ...b,
-                    entityType: `bill.details.${A("paymentTo")}`
-                  },
-                  children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                    /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.paymentTo,
-                          width: I
-                        },
-                        text: l.paymentToBankAccount != null ? An : l.paymentToPI != null ? l.paymentToPI.displayText : jn,
-                        style: { width: "auto" },
-                        showEyeIcon: l.paymentToBankAccount != null && !!l.paymentType?.method?.includes(
-                          "ach"
-                        ),
-                        showAdditionalInfoLabel: !!e.transactionDetails?.billPayInfo.isCollectToAccountInfoFromVendorContact || l.paymentType?.method?.includes(
-                          "ach"
-                        ),
-                        tooltipText: Pn(),
-                        additionalInfoLabel: /* @__PURE__ */ t.jsx(oa, { children: $n })
-                      }
-                    ),
-                    kn()
-                  ] })
-                }
-              )
-            ] }),
-            z || e.isRecurring ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsx(L, {}),
-              /* @__PURE__ */ t.jsx(
-                C,
-                {
-                  isThreadAllowed: x,
-                  entityId: y,
-                  dashboardTabKey: j({
-                    type: "details",
-                    key: "recurringPaymentType"
-                  }),
-                  roomId: w,
-                  companyId: r.currentTenant?.companyId ?? c,
-                  companyName: r.currentTenant?.companyName ?? c,
-                  dashboardOptionType: "bill",
-                  filterMetaData: {
-                    ...b,
-                    entityType: `bill.details.${A("recurringPaymentType")}`
-                  },
-                  children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                    /* @__PURE__ */ t.jsx(
-                      P,
-                      {
-                        label: {
-                          label: n.paymentType,
-                          width: I
-                        },
-                        labelStyles: {
-                          marginRight: p.labelMarginRight.valuePx(i)
-                        },
-                        style: { width: "auto" },
-                        text: vo(
-                          e.isRecurring,
-                          z,
-                          e.transactionDetails?.recurringBillInstance ?? 1,
-                          e.recurringBillConfigDetail?.totalPaymentCycles ?? 0
-                        ),
-                        textStyles: {
-                          paddingLeft: p.textPadding.valuePx(i),
-                          paddingRight: p.textPadding.valuePx(i)
-                        },
-                        additionalInfoLabel: wo(
-                          i,
-                          e.isRecurring,
-                          z,
-                          e.recurringBillConfigDetail
-                        ),
-                        additionalInfoLabelStyles: {
-                          paddingRight: p.paddingRight.valuePx(i),
-                          marginTop: p.additionalTextMarginTop.valuePx(i)
-                        }
-                      }
-                    ),
-                    e.recurringBillInstances != null && e.recurringBillInstances.length > 0 ? /* @__PURE__ */ t.jsx(
-                      Pa,
-                      {
-                        style: {
-                          paddingLeft: p.recurringSchedulePaddingLeft.valuePx(
-                            i
-                          )
-                        },
-                        children: /* @__PURE__ */ t.jsx(
-                          Io,
-                          {
-                            onAttachmentClick: Ne,
-                            currencySymbol: e.transactionDetails?.recipientTotalAmount.currencySymbol ?? vt.currencySymbol,
-                            recurringBillInstances: e.recurringBillInstances
-                          }
-                        )
-                      }
-                    ) : null
-                  ] })
-                }
-              )
-            ] }) : null
-          ] })
-        ] }),
-        e.transactionDetails && e.transactionDetails.id && /* @__PURE__ */ t.jsx(
-          Co,
-          {
-            amount: vn,
-            activities: e.billActivities,
-            stage: T?.code ?? "draft",
-            onAddNewRule: Jt,
-            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: Vt,
-              signedInUserId: re?.userId,
-              showRealTimeApproval: Ut,
-              entityApprovalId: e.billActivities[0]?.entityApprovalId ?? e.transactionDetails.entityApprovalId,
-              updateEditMode: tn,
-              onSaveRealTimeApprovals: nn
-            },
-            historicActivities: e.billHistory.activities
-          }
-        ),
-        /* @__PURE__ */ t.jsx(Ca, {})
-      ] }),
-      e.transactionDetails?.vendor != null && !me && !e.transactionDetails.isDeleted ? /* @__PURE__ */ t.jsx(
-        Ao,
-        {
-          separatorStyle: { marginRight: o.sp4 },
-          showPrimaryButton: U || g,
-          showCancel: !U && g,
-          cancelBtn: {
-            label: it ? n.buttons.reject : n.buttons.rejectBill,
-            isLoading: Ve === "rejected" && e.approvalUpdateStatus.fetchState === "In-Progress",
-            onClick: En,
-            style: { width: p.footerButtonWidth.value(i) },
-            reverseSpinnerColor: !1
-          },
-          primaryBtn: {
-            label: ea(
-              U,
-              it
-            ),
-            isLoading: Ve === "approved" && e.approvalUpdateStatus.fetchState === "In-Progress",
-            onClick: U ? rt : () => {
-              Z != null ? J(!0) : st();
-            },
-            isDisabled: e.billSaveStatus === "In-Progress" || e.approvalUpdateStatus.fetchState === "In-Progress" || e.realTimeApproval.isEditMode === !0,
-            style: {
-              width: U ? "auto" : p.footerButtonWidth.value(i)
-            }
-          },
-          rightSideComponent: /* @__PURE__ */ t.jsx(ia, { children: /* @__PURE__ */ t.jsxs(pa, { windowSize: i, children: [
-            !q && ze ? /* @__PURE__ */ t.jsx(
-              ct,
-              {
-                onClickAway: () => {
-                  se(!1), de(!1);
-                },
-                children: /* @__PURE__ */ t.jsxs(
-                  St,
-                  {
-                    windowSize: i,
-                    "data-testid": h(
-                      "bill-actions-container"
-                    ),
-                    children: [
-                      W !== "processing" && ot ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: hn,
-                          "data-testid": h(
-                            "delete-bill-action-item"
-                          ),
-                          children: n.buttons.deleteBill
-                        }
-                      ) : null,
-                      W === "processing" && !R ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: gn,
-                          "data-testid": h(
-                            "cancel-bill-action-item"
-                          ),
-                          children: n.buttons.cancel
-                        }
-                      ) : null,
-                      W === "processing" && at ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: fn,
-                          "data-testid": h(
-                            "cancel-and-delete-bill-action-item"
-                          ),
-                          children: n.buttons.cancelAndDelete
-                        }
-                      ) : null,
-                      g && z && ke ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: Fn,
-                          "data-testid": h(
-                            "mark-as-paid-action-item"
-                          ),
-                          children: n.paymentOutsideZeni.markAsPaid
-                        }
-                      ) : null
-                    ]
-                  }
-                )
-              }
-            ) : null,
-            Ee ? /* @__PURE__ */ t.jsx(
-              ct,
-              {
-                onClickAway: () => {
-                  se(!1), de(!1);
-                },
-                children: /* @__PURE__ */ t.jsxs(
-                  St,
-                  {
-                    windowSize: i,
-                    "data-testid": h(
-                      "bill-actions-with-zeni-assist-container"
-                    ),
-                    children: [
-                      xe ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: () => {
-                            D.trackRetryClick(
-                              v?.code ?? "",
-                              T?.code ?? "",
-                              O?.description ?? "",
-                              R ? ["Recurring"] : ["One-Time"],
-                              e.transactionDetails?.documentId ?? ""
-                            ), on();
-                          },
-                          "data-testid": h(
-                            "retry-bill-action-item"
-                          ),
-                          children: n.buttons.retry
-                        }
-                      ) : null,
-                      Te ? /* @__PURE__ */ t.jsx(
-                        _,
-                        {
-                          onClick: xn,
-                          "data-testid": h(
-                            "refund-bill-action-item"
-                          ),
-                          children: n.buttons.refund
-                        }
-                      ) : null
-                    ]
-                  }
-                )
-              }
-            ) : null,
-            /* @__PURE__ */ t.jsxs(da, { windowSize: i, children: [
-              Rn === !0 ? /* @__PURE__ */ t.jsx(
-                ve,
-                {
-                  enterDelay: 600,
-                  style: {
-                    color: ie.heroDark,
-                    padding: `2px ${o.sp2}`
-                  },
-                  display: "flex",
-                  title: be ? n.zeniAssist.tooltip : n.zeniAssist.connectToTeamTooltip,
-                  placement: "top",
-                  maxWidth: "267px",
-                  children: /* @__PURE__ */ t.jsx(
-                    Pt,
-                    {
-                      windowSize: i,
-                      showEditIcon: fe,
-                      isIconClickable: be,
-                      "data-testid": h(
-                        "other-actions-icon-container"
-                      ),
-                      children: be ? /* @__PURE__ */ t.jsx(wn, {}) : /* @__PURE__ */ t.jsx(sa, {})
-                    }
-                  )
-                }
-              ) : null,
-              !q && fe === !0 ? /* @__PURE__ */ t.jsx(
-                ve,
-                {
-                  enterDelay: 600,
-                  style: {
-                    color: ie.heroDark,
-                    padding: `2px ${o.sp2}`
-                  },
-                  display: "flex",
-                  title: qo,
-                  placement: "top",
-                  children: /* @__PURE__ */ t.jsx(
-                    ca,
-                    {
-                      onClick: Je,
-                      "data-testid": h(
-                        "edit-bill-icon-container"
-                      ),
-                      children: /* @__PURE__ */ t.jsx(la, {})
-                    }
-                  )
-                }
-              ) : null,
-              !q && Ln === !0 && Dn ? /* @__PURE__ */ t.jsx(
-                ve,
-                {
-                  enterDelay: 600,
-                  style: {
-                    color: ie.heroDark,
-                    padding: `2px ${o.sp2}`
-                  },
-                  display: "flex",
-                  title: Xo,
-                  placement: "top",
-                  children: /* @__PURE__ */ t.jsx(
-                    Pt,
-                    {
-                      windowSize: i,
-                      showEditIcon: fe,
-                      isIconClickable: !0,
-                      "data-testid": h(
-                        "more-details-icon-container"
-                      ),
-                      children: /* @__PURE__ */ t.jsx(
-                        ra,
-                        {
-                          onClick: () => se(!ze)
-                        }
-                      )
-                    }
-                  )
-                }
-              ) : null
-            ] })
-          ] }) }),
-          style: { minHeight: 62 }
-        }
-      ) : null
-    ] }),
-    x ? /* @__PURE__ */ t.jsx(Hn, { id: w, children: /* @__PURE__ */ t.jsx(
-      jo,
-      {
-        isDrawerOpen: cn,
-        allowComposer: !0,
-        drawerTitle: Yo,
-        threads: G,
-        filter: b,
-        autoExpand: !0,
-        autoFocus: !1,
-        isLoading: B,
-        textOverrides: {
-          composerPlaceholder: At.addANewComment,
-          replyComposerPlaceholder: At.replyAComment,
-          threadResolve: jt.resolveComment,
-          threadUnResolve: jt.unResolveComment
-        },
-        threadMetadata: zn,
-        onThreadClick: dn,
-        onCloseAllThreadsDrawer: () => H(!1),
-        drawerSectionStyle: {
-          width: i === "small" ? "100%" : "400px",
-          boxSizing: i === "small" ? "border-box" : "content-box",
-          padding: `${o.sp0} ${p.drawerSectionPaddingLeftRight.valuePx(i)}`,
-          backgroundColor: Oe.colors.background
-        },
-        collapsibleThreadStyle: {
-          width: i === "small" ? "100%" : "360px"
-        }
-      }
-    ) }) : null
-  ] });
-}, Jo = (e, f) => {
-  const g = e?.code;
-  if (e != null && g != null)
-    return f?.isDeleted === !0 ? {
-      value: $e.tabsById.deleted,
-      color: F.deleted.color,
-      bgColor: F.deleted.bgColor,
-      borderColor: F.deleted.borderColor,
-      code: "deleted"
-    } : g === "pending_approval" && f?.dueDate?.isBefore(eo(), "date") === !0 ? {
-      value: $e.tabsById.overdue,
-      color: F.overdue.color,
-      bgColor: F.overdue.bgColor,
-      borderColor: F.overdue.borderColor
-    } : {
-      value: e.name,
-      color: F[g].color,
-      bgColor: F[g].bgColor,
-      borderColor: F[g].borderColor
-    };
-}, Qo = (e, f) => {
-  const g = f.transactionDetails?.recipientTotalAmount;
-  return /* @__PURE__ */ t.jsxs(Sa, { windowSize: e, children: [
-    /* @__PURE__ */ t.jsxs(Dt, { windowSize: e, children: [
-      /* @__PURE__ */ t.jsx(Nt, { children: n.zeniAssist.accountNumber }),
-      /* @__PURE__ */ t.jsx(Ft, { children: f.withdrawFrom != null ? Et(f.withdrawFrom, e) : c })
-    ] }),
-    /* @__PURE__ */ t.jsxs(Dt, { windowSize: e, children: [
-      /* @__PURE__ */ t.jsx(Nt, { children: n.zeniAssist.amount }),
-      /* @__PURE__ */ t.jsx(Ft, { children: g != null ? Se("0,0[.]00", g) : k })
-    ] })
-  ] });
-}, ea = (e, f) => e ? n.paymentOutsideZeni.markAsPaid : f ? n.buttons.approve : n.buttons.approveBill, ta = (e) => {
-  const f = e.paymentMode, g = n.paymentOutsideZeni.offline;
-  if (f == null || f === "other")
-    return g;
-  const V = n.paymentOutsideZeni.paymentModeOptions.find(
-    (re) => re.value === f
-  )?.label;
-  return `${g} ${Go} ${V}`;
-}, na = (e, f, g) => {
-  if (e)
-    return /* @__PURE__ */ t.jsx(
-      bt,
-      {
-        variant: "warning",
-        style: { marginTop: o.sp5, marginBottom: o.sp3 },
-        title: It.duplicateWarning.title,
-        description: It.duplicateWarning.description
-      }
-    );
-  if (g != null) {
-    const V = `${f.withdrawFrom?.label ?? ""} ${f.withdrawFrom?.maskedAccountNumber ?? ""}`;
-    return /* @__PURE__ */ t.jsx(
-      bt,
-      {
-        variant: "low-balance",
-        style: { marginTop: o.sp2, marginBottom: o.sp3 },
-        title: `${_t.lowBalanceIn.replace("__account__", V)}`,
-        description: g.replace("Low balance! ", "")
-      }
-    );
-  } else
-    return null;
-}, oa = a.div``, aa = a.div``, ia = a.div`
-  display: flex;
-  justify-content: flex-end;
-`, ra = a(Wo)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${o.sp4};
-  height: ${o.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Pt = a.div`
-  display: flex;
-  margin-left: ${(e) => e.windowSize === "small" ? e.showEditIcon === !0 ? o.sp3 : o.sp4 : p.otherActionsIconContainerMarginLeft.valuePx(e.windowSize)};
-  cursor: ${(e) => e.isIconClickable === !0 ? "pointer" : "default"};
-  color: ${(e) => e.theme.colors.grey1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, sa = a(Uo)`
-  color: ${(e) => e.theme.colors.hero};
-  width: ${o.sp5};
-  height: ${o.sp5};
-  margin-bottom: ${o.sp2};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, la = a(Eo)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${o.sp4};
-  height: ${o.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, ca = a.div`
-  display: flex;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.grey1};
-  margin-left: ${o.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, da = a.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, St = 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: ${o.sp1};
-  padding-bottom: ${o.sp1};
-  position: absolute;
-  bottom: ${(e) => p.otherActionsContainerBottom.valuePx(e.windowSize)};
-  z-index: 3;
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-radius: ${o.sp1};
-  right: ${(e) => p.right.valuePx(e.windowSize)};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.grey1}3D`};
-`, pa = a.div`
-  width: auto;
-  justify-content: flex-end;
-  position: ${(e) => e.windowSize === "small" ? "static" : "relative"};
-  right: ${(e) => p.actionsContainerRight.valuePx(e.windowSize)};
-  height: 100%;
-  display: flex;
-`, _ = a(Zt)`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding-left: ${o.sp3};
-  padding-right: ${o.sp3};
-  height: ${o.sp6};
-  box-sizing: border-box;
-  &:hover {
-    background-color: ${(e) => e.theme.colors.background};
-  }
-`, $t = a(So)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, kt = a.div`
-  margin-top: ${(e) => p.marginTop.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-`, Bt = a(ko)`
-  cursor: pointer;
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Rt = a.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${(e) => p.rightIconsGap.valuePx(e.windowSize)};
-  margin-top: ${(e) => p.closeContainerMarginTop.valuePx(e.windowSize)};
-`, Mt = a.div`
-  float: right;
-  width: ${o.sp4};
-  height: ${o.sp4};
-  display: flex;
-`, ua = a.div`
-  height: 100%;
-  overflow: scroll;
-`, Ce = 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) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${o.sp2};
-  margin: ${o.sp3} 0;
-`, Ae = a.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${o.sp3};
-`, ma = a.div``, je = a(Do)`
-  color: ${(e) => e.theme.colors.primary};
-`, L = a.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, ya = a(No)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: ${(e) => e.theme.colors.champion};
-  margin-top: ${o.sp2};
-  height: 31px;
-`, ha = a(Fo)`
-  color: ${(e) => e.theme.colors.champion};
-`, ga = a.div`
-  display: flex;
-  flex-direction: column;
-`, fa = a.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  padding-left: ${(e) => p.containerPaddingLeft.valuePx(e.windowSize)};
-  padding-right: ${(e) => p.containerPaddingRight.valuePx(e.windowSize)};
-  overflow-x: hidden;
-  margin-top: ${(e) => p.navBarHeight.valuePx(e.windowSize)};
-`, xa = 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"};
-`, Ta = a.div`
-  display: flex;
-  margin-bottom: ${o.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"};
-`, ba = a(Mo)`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  ${(e) => `${Ko.formTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${(e) => p.formTitleMarginTopBottom.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => p.formTitleMarginTopBottom.valuePx(e.windowSize)};
-  word-break: break-all;
-  padding: ${(e) => `${o.sp0} ${p.formTitlePaddingLeftRight.valuePx(e.windowSize)}`};
-`, wa = a.div`
-  padding: ${o.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: ${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${(e) => p.marginBottom.valuePx(e.windowSize)};
-`, va = a(Wt)`
-  display: flex;
-  width: 176px;
-  color: ${(e) => e.theme.colors.primary};
-`, Ia = a(Wt)`
-  display: flex;
-  width: calc(100% - 176px);
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-`, Lt = a(Lo)`
-  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: ${o.sp1};
-  min-width: fit-content;
-`, Ca = a.div`
-  display: flex;
-  flex-direction: column;
-  height: ${o.sp11};
-`, Aa = a(Po)`
-  height: ${o.sp3};
-  width: ${o.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, ja = a.div`
-  display: flex;
-  align-items: center;
-  margin-left: ${o.sp2};
-  margin-top: ${(e) => p.iconContainerMarginTop.valuePx(e.windowSize)};
-  align-self: center;
-`, Pe = a(Bo)`
-  margin-left: ${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-`, Pa = a.div``, Sa = a.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${o.sp2};
-  margin: ${(e) => e.windowSize === "small" ? `0 ${o.sp3} ${o.sp6} ${o.sp3}` : `0 ${o.sp8} ${o.sp5} ${o.sp8}`};
-`, Dt = a.div`
-  display: flex;
-  justify-content: space-between;
-  width: ${(e) => p.refundPopupWidth.valuePx(e.windowSize)};
-`, Nt = a(Zt)`
-  text-align: left;
-  color: ${(e) => e.theme.colors.grey1};
-`, Ft = a(Zo)`
-  justify-content: end;
-  display: flex;
-  flex: 1;
-`, Ot = 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 ? 0.5 : 1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, zt = a($o)`
-  display: flex;
-  width: ${o.sp4};
-  height: ${o.sp4};
-  align-items: center;
-  justify-content: center;
-`, $a = a.div`
-  display: flex;
-  justify-content: space-evenly;
-  margin-top: 0px;
-  position: fixed;
-  top: 0px;
-  width: ${(e) => p.navBarContainerWidth.valuePercentage(e.windowSize)};
-  z-index: 3;
-`;
-export {
-  za as default
-};