@zeniai/web-components 3.17.10 → 3.17.11

package/dist/BillDetailPage-DQnrZRqb.js

@@ -0,0 +1,1806 @@
+import { u as Hn, j as t, D as Gn, C as ut, L as Xn } from "./vendor-.pnpm-B2klaOGU.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, dB as ro, T as so, fx as lo, d as co, N as po, fa as uo, aD as mo, a as yo, R as m, ho as ht, hp as ho, S as o, hq as go, e as h, hr as fo, a2 as ke, hs as xo, aE as gt, h as ft, ae as xt, aP as Tt, aQ as bt, aR as wt, il as To, im as bo, io as wo, ip as vo, hw as C, hx as A, hy as j, an as P, hv as Io, t as vt, C as ie, hz as Zt, hF as Co, hA as Ao, hB as jo, iq as Po, ir as So, ao as $o, Z as Ie, i as ko, is as F, D as l, af as Bo, G as Ro, l as Mo, b as Lo, fP as Do, it as It, hG as Ct, aw as No, fv as Fo, _ as Oo, k as zo, w as Eo, ai as Wo, e_ as _t, iu as Zo, fs as _o, F as Ut, r as Uo, a9 as Vo, fO as Ko, o as Ho } from "./index-Dg4HzhKR.js";
+import { L as Go, P as Xo } from "./LowBalancePopup-Hh8l-iSG.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 }
+    }
+  }
+} = yo.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 !== "" ? _o(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(
+    ho,
+    {
+      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(
+    Zo,
+    {
+      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" ? go(
+    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 ?? "",
+      Ct(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 ?? "",
+      Ct(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(
+          fo,
+          {
+            companyName: xo(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(
+          To,
+          {
+            progressSectionObj: O,
+            createDate: e.transactionDetails?.createTime,
+            paymentDate: ot,
+            scheduleDate: ae,
+            approvedDate: e.latestApprovedDate,
+            isFrozen: e.transactionDetails?.isDeleted
+          }
+        ) : /* @__PURE__ */ t.jsx(
+          bo,
+          {
+            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(
+          wo,
+          {
+            sectionId: vo,
+            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: j({
+                  type: "details",
+                  key: "invoiceNumber"
+                }),
+                roomId: w,
+                companyId: r.currentTenant?.companyId ?? d,
+                companyName: r.currentTenant?.companyName ?? d,
+                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 ?? d,
+                companyName: r.currentTenant?.companyName ?? d,
+                dashboardOptionType: "bill",
+                filterMetaData: {
+                  ...b,
+                  entityType: `bill.details.${A("invoiceDate")}`
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  P,
+                  {
+                    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: j({
+                  type: "details",
+                  key: "billDueDate"
+                }),
+                roomId: w,
+                companyId: r.currentTenant?.companyId ?? d,
+                companyName: r.currentTenant?.companyName ?? d,
+                dashboardOptionType: "bill",
+                filterMetaData: {
+                  ...b,
+                  entityType: `bill.details.${A("billDueDate")}`
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  P,
+                  {
+                    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: j({
+                  type: "details",
+                  key: "memo"
+                }),
+                roomId: w,
+                companyId: r.currentTenant?.companyId ?? d,
+                companyName: r.currentTenant?.companyName ?? d,
+                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(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: j({
+                      type: "details",
+                      key: `${u}.recipientAmount`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("recipientAmount", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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: j({
+                      type: "details",
+                      key: `${u}.lineDescription`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("lineDescription", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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: j({
+                      type: "details",
+                      key: `${u}.account`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("account", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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: j({
+                      type: "details",
+                      key: `${u}.class`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("class", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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: j({
+                      type: "details",
+                      key: `${u}.billable`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("billable", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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: j({
+                      type: "details",
+                      key: `${u}.customer`
+                    }),
+                    roomId: w,
+                    companyId: r.currentTenant?.companyId ?? d,
+                    companyName: r.currentTenant?.companyName ?? d,
+                    dashboardOptionType: "bill",
+                    filterMetaData: {
+                      ...b,
+                      entityType: `bill.details.${A("customer", u)}`
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      P,
+                      {
+                        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(
+            Io,
+            {
+              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: j({
+                    type: "details",
+                    key: "withdrawFrom"
+                  }),
+                  roomId: w,
+                  companyId: r.currentTenant?.companyId ?? d,
+                  companyName: r.currentTenant?.companyName ?? d,
+                  dashboardOptionType: "bill",
+                  filterMetaData: {
+                    ...b,
+                    entityType: `bill.details.${A("withdrawFrom")}`
+                  },
+                  children: /* @__PURE__ */ t.jsx(
+                    P,
+                    {
+                      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: j({
+                  type: "details",
+                  key: "paymentType"
+                }),
+                roomId: w,
+                companyId: r.currentTenant?.companyId ?? d,
+                companyName: r.currentTenant?.companyName ?? d,
+                dashboardOptionType: "bill",
+                filterMetaData: {
+                  ...b,
+                  entityType: `bill.details.${A("paymentType")}`
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  P,
+                  {
+                    additionalInfoLabel: c.paymentType?.method != null && c.paymentType.method.includes(
+                      oo
+                    ) && Gt && c.internationalTransferFeeBearerPaymentMethod != null ? /* @__PURE__ */ t.jsx(ca, { children: Co(
+                      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: j({
+                    type: "details",
+                    key: "paymentTo"
+                  }),
+                  roomId: w,
+                  companyId: r.currentTenant?.companyId ?? d,
+                  companyName: r.currentTenant?.companyName ?? d,
+                  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: 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: j({
+                    type: "details",
+                    key: "recurringPaymentType"
+                  }),
+                  roomId: w,
+                  companyId: r.currentTenant?.companyId ?? d,
+                  companyName: r.currentTenant?.companyName ?? d,
+                  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: jo(
+                          e.isRecurring,
+                          z,
+                          e.transactionDetails?.recurringBillInstance ?? 1,
+                          e.recurringBillConfigDetail?.totalPaymentCycles ?? 0
+                        ),
+                        textStyles: {
+                          paddingLeft: p.textPadding.valuePx(i),
+                          paddingRight: p.textPadding.valuePx(i)
+                        },
+                        additionalInfoLabel: Ao(
+                          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(
+                          Po,
+                          {
+                            onAttachmentClick: Oe,
+                            currencySymbol: e.transactionDetails?.recipientTotalAmount.currencySymbol ?? At.currencySymbol,
+                            recurringBillInstances: e.recurringBillInstances
+                          }
+                        )
+                      }
+                    ) : null
+                  ] })
+                }
+              )
+            ] }) : null
+          ] })
+        ] }),
+        e.transactionDetails && e.transactionDetails.id && /* @__PURE__ */ t.jsx(
+          So,
+          {
+            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(
+        $o,
+        {
+          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(
+      ko,
+      {
+        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(
+      It,
+      {
+        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(
+      It,
+      {
+        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
+};