@zeniai/web-components 3.16.96 → 3.16.97

package/dist/BillDetailPage-DYc_nZRU.js

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