@zeniai/web-components 3.16.66 → 3.16.68

package/dist/BillDetailPage-CO80h8Jo.js

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