@zeniai/web-components 3.17.24 → 3.17.25

package/dist/BillDetailPage-DA1djKtd.js

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