@zeniai/web-components 3.16.99 → 3.17.2

package/dist/ReviewDetailsPage-BY2O3fGR.js

@@ -1,1073 +0,0 @@
-import { j as t, D as jt, G as Me } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as J, useEffect as bt } from "react";
-import o from "@emotion/styled";
-import { toAmount as Le, NEW_INTERNATIONAL_METHOD_SUBTEXT as I, defaultVendorCurrency as Re, isPaymentMethodOutsideZeni as Pt, checkIfCreatorIsApprover as It, zeniDate as re, getNextNthWorkingDay as At } from "@zeniai/client-epic-state";
-import { u as Bt, dB as kt, R as m, hk as Mt, a as Lt, hl as Rt, hm as Ft, hn as Nt, ho as ie, hp as Ot, hq as Dt, e as S, hr as Et, a2 as k, hs as zt, ht as Wt, hu as Fe, hv as Ne, t as K, hw as E, hx as z, hy as W, C, hz as Vt, hA as Gt, hB as Zt, Z as Oe, S as n, ao as Yt, D as c, af as _t, G as Kt, aw as Ut, J as qt, hC as Ht, _ as Jt, o as ce, E as de, hD as Xt, hE as Qt, eG as en, ai as tn, w as nn, hF as on, V as et, ag as an, F as tt, a9 as rn, hG as ln } from "./index-CD9fwr4J.js";
-import { P as sn, L as cn } from "./LowBalancePopup-BvyAMt5m.js";
-import { L as V } from "./LabeledText-TLCIeXeJ.js";
-const nt = ["small", "medium-compact", "medium-regular"], p = {
-  largeLabelWidth: new m(150, 215, 215),
-  paddingBottom: new m(c[3], c[2]),
-  infoMinWidth: new m(0, 0, 0, 142, 142),
-  infoMarginRight: new m(0, 0, 0, c[2], c[2]),
-  footerButtonWidth: new m(120, 165),
-  iconContainerMarginTop: new m(6, c[1]),
-  navBarContainerPaddingTop: new m(10, c[3]),
-  navBarContainerPaddingBottom: new m(9, c[3]),
-  sectionTitleMarginLeft: new m(c[3], c[0]),
-  reviewContainerMarginLeft: new m(c[3], c[6]),
-  reviewContainerMarginRight: new m(c[3], c[8]),
-  footerRightIconMarginRight: new m(c[0], c[0], c[7]),
-  infoLabelPaddingRight: new m(c[0], c[3]),
-  infoLabelMarginTop: new m(c[1], c[0])
-}, dn = {
-  sectionTitle: new Ut("h6Medium", "h5Medium")
-}, {
-  dateFormat: De,
-  common: {
-    currency: $,
-    labels: Ee,
-    edit: mn,
-    strings: { empty: h }
-  },
-  spendManagement: { billPay: pn }
-} = Lt.getLocalizedStrings(), { billDetails: a, paymentDetails: ze } = pn, We = ({ attachment: e }) => {
-  const [w, g] = J(!1), M = () => {
-    g(!1);
-  }, j = e.fileId?.length === 0;
-  return /* @__PURE__ */ t.jsxs(
-    zn,
-    {
-      isDisabled: e.fileId?.length === 0,
-      "data-testid": S("attachment-tag", e.fileName),
-      onClick: () => j === !1 ? g(!0) : null,
-      children: [
-        w && e?.fileDownloadUrl != null ? /* @__PURE__ */ t.jsx(
-          Xt,
-          {
-            title: e.fileName,
-            file: e,
-            onCrossClick: () => M(),
-            setShowFullScreenView: g
-          }
-        ) : null,
-        /* @__PURE__ */ t.jsx(Wn, { children: /* @__PURE__ */ t.jsx(Qt, { contentType: e.contentType }) })
-      ]
-    }
-  );
-}, ro = ({
-  billDetails: e,
-  billpayApprovalView: w,
-  isBillPayCommentingEnabled: g,
-  currentTenant: M,
-  isInternationalPaymentShaVsOurEnabled: j,
-  isLocalCurrencyEnabled: ot,
-  style: at,
-  analytics: v,
-  isRecurringBillsFeatureEnabled: rt,
-  isApprovalRequiredForMarkAsPaid: it,
-  isDetectInsufficientFundsEnabled: lt,
-  billId: f,
-  onClickEdit: me,
-  discardBillDetailsFromLocalStore: pe,
-  saveBillDetails: ue,
-  discardOutsideZeniPaymentData: st,
-  updateBillDetailSaveBillCode: he,
-  redirectToBillsScreen: ye,
-  onAttachmentClick: X,
-  retryPayment: ct
-}) => {
-  const s = Bt(), d = kt(), L = {
-    application: "dashboard",
-    companyId: d.currentTenant?.companyId,
-    tab: "bill",
-    entityId: f
-  }, R = g && f != null, F = `dashboard_${d.currentTenant?.companyId}`, N = p.largeLabelWidth.value(s), O = e.saveStatus, Q = e.zeniAssistRetryStatus, ee = e.vendor?.vendorCurrencyCode, i = Mt(
-    j,
-    ot,
-    e.billPayConfigList.filter(
-      (r) => r.method.includes(
-        e.paymentDetailsSection?.withdrawFrom?.accType ?? "depositAccount"
-      )
-    ),
-    e.paymentDetailsSection?.internationalTransferFeeBearerPaymentMethod,
-    e.paymentDetailsSection?.paymentType,
-    ee
-  ), b = De.visual.MMMDCommaYYYYformat, ge = {
-    amount: e.recipientTotalAmount.amount / (e.paymentDetailsSection?.conversionRate ?? 1) * 100 / 100,
-    currencyCode: $.currencyCode,
-    currencySymbol: $.currencySymbol
-  }, u = {
-    amount: i?.method.includes("international") === !0 ? Rt(ge, i) : e.recipientTotalAmount.amount + (i?.fee.amount ?? 0),
-    currencyCode: $.currencyCode,
-    currencySymbol: $.currencySymbol
-  }, D = {
-    amount: i?.method.includes("international") === !0 ? Ft(ge, i) : i?.fee.amount ?? 0,
-    currencyCode: $.currencyCode,
-    currencySymbol: $.currencySymbol
-  }, [dt, fe] = J(!1), [mt, xe] = J(!1), we = () => fe(!1), pt = () => {
-    v.trackBillPayMagicLinkPreviewEmail("review_bill"), fe(!0);
-  }, ut = e.isCollectToAccountInfoFromVendorContact ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    `${a.magicLink.collectFrom} ${e.toAccountVendorEmail}`,
-    /* @__PURE__ */ t.jsx(On, { size: s, children: /* @__PURE__ */ t.jsx(Nn, {}) })
-  ] }) : Nt(e.paymentDetailsSection?.paymentTo);
-  bt(() => {
-    (O?.fetchState === "Completed" || Q?.fetchState === "Completed") && (pe(), he(), ye());
-  }, [
-    O,
-    Q,
-    ye,
-    pe,
-    he
-  ]);
-  const T = e.billPayInfo?.stage, A = e.billPayInfo?.billStatus, G = e.billPayInfo?.billPaymentStatus, ht = e.billPayInfo?.billPaymentRefundStatus, te = T?.code === "paid" ? T : A?.code == "approved" && G?.code ? G : A, yt = e.billPayInfo?.isRefundInitiated === !0 ? ht : A?.code == "approved" && G?.code ? G : A, ne = () => {
-    me();
-  }, ve = () => {
-    me();
-  }, Z = e.paymentDetailsSection?.paymentDate, oe = ie(
-    i?.method ?? ""
-  ), Te = oe.replace("Same Day", ""), gt = e.isCollectToAccountInfoFromVendorContact ? /* @__PURE__ */ t.jsx(
-    Ot,
-    {
-      paymentTypeLabel: Te,
-      onClick: pt
-    }
-  ) : a.addedByZeni, Y = w.allApprovalRules.length > 0, ft = Le(
-    i?.method != null && (i.method.includes(I) || i?.fee.amount != null && i.fee.amount !== 0) ? u.amount - D.amount : u.amount,
-    i?.fee.currencyCode ?? Re.currencyCode,
-    i?.fee.currencySymbol ?? Re.currencySymbol
-  ), y = Pt(
-    e.paymentDetailsSection?.paymentType?.method
-  ), xt = (r) => {
-    v.trackBillPayMarkAsPaidSubmit(
-      r.paymentMode ?? "other",
-      T?.code ?? "draft",
-      te?.code ?? ""
-    ), ue(!0, r);
-  }, $e = () => {
-    xe(!0), v.trackBillPayMarkAsPaid(
-      T?.code ?? "draft",
-      te?.code ?? ""
-    );
-  }, wt = () => {
-    st(), xe(!1);
-  }, B = y && (T?.code != null ? T.code === "draft" || A?.code === "approved" : !0), x = B && !it, Se = Ve(
-    x,
-    Y,
-    e.isBillMarkedForRetry
-  ), vt = () => y ? x ? void 0 : a.paymentOutsideZeni.reviewInfo : i?.method != null && i.method.includes(I) && e.paymentDetailsSection?.internationalTransferFeeBearerPaymentMethod != null && j && ee === $.currencyCode ? on(
-    e.paymentDetailsSection.internationalTransferFeeBearerPaymentMethod
-  ) : void 0, ae = lt && e.paymentDetailsSection != null ? Dt(
-    u,
-    e.paymentDetailsSection.withdrawFrom,
-    e.paymentDetailsSection.paymentDate
-  ) : void 0, Tt = () => {
-    const r = e.paymentDetailsSection?.paymentDate, l = e.isCollectToAccountInfoFromVendorContact, P = e.recurringConfig, St = e.recipientTotalAmount;
-    if (e.isInvoiceDateAutoUpdated === !0 && v.trackBillPayAutoDateChange(f ?? "new_bill"), i?.method != null && r != null) {
-      const Ct = y ? a.paymentOutsideZeni.offline : ie(i.method);
-      if (v.trackBillPaySendForApproval(
-        Ct,
-        r.format(De.analytics.MMMDashDDDashYYYYFormat),
-        l,
-        e.isRecurring,
-        f,
-        e.paymentDetailsSection?.internationalTransferFeeBearerPaymentMethod,
-        {
-          startDate: re(
-            P?.startDate?.toString() ?? ""
-          ).format(b),
-          endDate: re(
-            P?.endDate?.toString() ?? ""
-          ).format(b),
-          frequency: P?.frequency ?? "monthly",
-          totalAmount: St.amount,
-          totalPaymentCycles: P?.totalPaymentCycles ?? 0,
-          isApprovalRequired: P?.isApprovalRequired ?? !1,
-          updateCurrentBill: e.recurringConfig?.id != null ? P?.updateRecurringBills === "current" : void 0,
-          updateFutureRecurringBills: e.recurringConfig?.id != null ? P?.updateRecurringBills === "all" : void 0
-        }
-      ), ae != null) {
-        const be = T?.code ?? "draft", Pe = A?.code ?? "", Ie = e.isRecurring ? ["Recurring"] : ["One-Time"], Ae = e.invoiceNumber ?? "", Be = ln(d.loggedInUser), ke = e.paymentDetailsSection?.withdrawFrom?.accType === "depositAccount" ? "ZA" : "External Account";
-        Se === a.scheduleBill ? v.trackLowBalanceAccountSchedule(
-          be,
-          Pe,
-          Ie,
-          Ae,
-          Be,
-          ke
-        ) : Se === a.sendForApproval && v.trackLowBalanceAccountSentForApproval(
-          be,
-          Pe,
-          Ie,
-          Ae,
-          Be,
-          ke
-        );
-      }
-    }
-  }, Ce = () => {
-    je === !0 && _(!1), e.isBillMarkedForRetry === !0 ? (ct(), v.trackRetryConfirmClick(
-      te?.code ?? "",
-      T?.code ?? "",
-      yt?.description ?? "",
-      e.isRecurring ? ["Recurring"] : ["One-Time"],
-      e.invoiceNumber ?? ""
-    )) : e.vendor != null && (Tt(), ue(!1, {}));
-  }, $t = It(
-    u.amount,
-    w.allApprovalRules,
-    d.loggedInUser
-  ), [je, _] = J(!1);
-  return /* @__PURE__ */ t.jsxs($n, { children: [
-    mt ? /* @__PURE__ */ t.jsx(
-      sn,
-      {
-        onCancel: wt,
-        onProceedForMarkAsPaid: xt,
-        saveDetailsFetchState: O?.fetchState,
-        paymentData: e.outsideZeniPaymentInfo
-      }
-    ) : null,
-    je ? /* @__PURE__ */ t.jsx(
-      cn,
-      {
-        withdrawFrom: e.paymentDetailsSection?.withdrawFrom,
-        paymentDate: e.paymentDetailsSection?.paymentDate,
-        onOkClick: Ce,
-        onCancelClick: () => {
-          _(!1), ne();
-        },
-        onClickAway: () => {
-          _(!1);
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsx(
-      jt,
-      {
-        anchor: "right",
-        open: dt,
-        onClose: we,
-        transitionDuration: 250,
-        "data-testid": S("vendor-email-preview-drawer"),
-        children: /* @__PURE__ */ t.jsx(
-          Et,
-          {
-            companyName: zt(M.company?.companyInfo),
-            vendor: e.vendor?.name,
-            paymentDate: Z?.format(b) ?? "",
-            paymentType: Te,
-            amount: k("0,0[.]00", u),
-            isInvoiceAttached: !!e.file,
-            onClose: we
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(Sn, { windowSize: s, style: at, children: [
-      s === "small" ? /* @__PURE__ */ t.jsxs(Fn, { windowSize: s, children: [
-        /* @__PURE__ */ t.jsx(
-          qe,
-          {
-            onClick: ve,
-            "data-testid": S(
-              "review-detail-nav-bar-small-back"
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(Ye, { windowSize: s, children: a.oneLastLook })
-      ] }) : /* @__PURE__ */ t.jsx(
-        Rn,
-        {
-          "data-testid": S("review-details-nav-bar-back"),
-          children: /* @__PURE__ */ t.jsx(qe, { onClick: ve })
-        }
-      ),
-      s !== "small" ? /* @__PURE__ */ t.jsx(jn, { children: /* @__PURE__ */ t.jsx(Ye, { windowSize: s, children: a.oneLastLook }) }) : null,
-      e.duplicateBillTransactions.length > 0 ? /* @__PURE__ */ t.jsxs(bn, { children: [
-        /* @__PURE__ */ t.jsxs(Pn, { children: [
-          /* @__PURE__ */ t.jsx(Kn, {}),
-          /* @__PURE__ */ t.jsxs(In, { children: [
-            /* @__PURE__ */ t.jsx(Bn, { children: a.duplicateBillPayWarning }),
-            /* @__PURE__ */ t.jsxs(An, { children: [
-              a.duplicateBillPayWarningSubHeading,
-              /* @__PURE__ */ t.jsxs(
-                "span",
-                {
-                  "data-testid": S(
-                    "review-detail-attachment-button"
-                  ),
-                  onClick: () => X(
-                    e.duplicateBillTransactions[0].id,
-                    e.duplicateBillTransactions[0].billPayInfo.stage.code
-                  ),
-                  style: { textDecoration: "underline", cursor: "pointer" },
-                  children: [
-                    a.viewBill,
-                    e.duplicateBillTransactions[0].documentId
-                  ]
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Zn, { children: [
-          /* @__PURE__ */ t.jsx(_n, { children: a.duplicateInvoiceFound }),
-          e.duplicateBillTransactions.map((r) => {
-            const l = Wt(r);
-            return r != null ? /* @__PURE__ */ t.jsx(Yn, { children: nt.includes(s) ? /* @__PURE__ */ t.jsxs(_e, { windowSize: s, children: [
-              /* @__PURE__ */ t.jsxs(kn, { children: [
-                /* @__PURE__ */ t.jsxs(Mn, { children: [
-                  r.attachments && r.attachments.length > 0 ? /* @__PURE__ */ t.jsx(We, { attachment: r.attachments[0] }) : /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(Je, {}) }),
-                  /* @__PURE__ */ t.jsx(q, { children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                    r.documentId != null ? a.invoiceNo : null,
-                    r.documentId
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ t.jsx(Xe, { windowSize: s, children: k(
-                  "0,0[.]00",
-                  r.recipientTotalAmount
-                ) })
-              ] }),
-              /* @__PURE__ */ t.jsxs(
-                Vn,
-                {
-                  "data-testid": S(
-                    "review-detail-mobile-info"
-                  ),
-                  onClick: () => X(
-                    r.id,
-                    r.billPayInfo.stage.code
-                  ),
-                  children: [
-                    /* @__PURE__ */ t.jsxs(q, { children: [
-                      r.dueDate != null ? a.due : null,
-                      " ",
-                      r.dueDate?.format(b)
-                    ] }),
-                    /* @__PURE__ */ t.jsx(Qe, { children: l != null ? Fe.includes(l.code) ? /* @__PURE__ */ t.jsx(
-                      Me,
-                      {
-                        style: { padding: "2px 5px" },
-                        title: l.value,
-                        placement: "top",
-                        children: /* @__PURE__ */ t.jsx(
-                          H,
-                          {
-                            color: l.color,
-                            bgColor: l.bgColor,
-                            borderColor: l.borderColor,
-                            children: l.value
-                          }
-                        )
-                      }
-                    ) : /* @__PURE__ */ t.jsx(
-                      H,
-                      {
-                        color: l.color,
-                        bgColor: l.bgColor,
-                        borderColor: l.borderColor,
-                        children: l.value
-                      }
-                    ) : null })
-                  ]
-                }
-              )
-            ] }) : /* @__PURE__ */ t.jsxs(_e, { windowSize: s, children: [
-              r.attachments && r.attachments.length > 0 ? /* @__PURE__ */ t.jsx(We, { attachment: r.attachments[0] }) : /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(Je, {}) }),
-              /* @__PURE__ */ t.jsxs(
-                Gn,
-                {
-                  "data-testid": S("review-detail-info"),
-                  onClick: () => X(
-                    r.id,
-                    r.billPayInfo.stage.code
-                  ),
-                  children: [
-                    /* @__PURE__ */ t.jsx(q, { style: { width: "50%" }, children: /* @__PURE__ */ t.jsxs("div", { children: [
-                      r.documentId != null ? a.invoiceNo : null,
-                      " ",
-                      r.documentId
-                    ] }) }),
-                    /* @__PURE__ */ t.jsxs(q, { style: { width: "25%" }, children: [
-                      r.dueDate != null ? a.due : null,
-                      " ",
-                      r.dueDate?.format(b)
-                    ] }),
-                    /* @__PURE__ */ t.jsx(Xe, { style: { width: "25%" }, windowSize: s, children: k("0,0[.]00", r.amount) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ t.jsx(Qe, { children: l != null ? Fe.includes(l.code) ? /* @__PURE__ */ t.jsx(
-                Me,
-                {
-                  style: { padding: "2px 5px" },
-                  title: l.value,
-                  placement: "top",
-                  children: /* @__PURE__ */ t.jsx(
-                    H,
-                    {
-                      color: l.color,
-                      bgColor: l.bgColor,
-                      borderColor: l.borderColor,
-                      children: l.value
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ t.jsx(
-                H,
-                {
-                  color: l.color,
-                  bgColor: l.bgColor,
-                  borderColor: l.borderColor,
-                  children: l.value
-                }
-              ) : null })
-            ] }) }, r.id) : null;
-          })
-        ] })
-      ] }) : null,
-      /* @__PURE__ */ t.jsxs(Ln, { children: [
-        /* @__PURE__ */ t.jsx(Ke, { children: a.pay }),
-        /* @__PURE__ */ t.jsx(Ue, { children: /* @__PURE__ */ t.jsx(
-          Ne,
-          {
-            amount: ft,
-            integerStyles: K.largeMedium.cssObject,
-            decimalStyles: K.smallMedium.cssObject
-          }
-        ) }),
-        /* @__PURE__ */ t.jsx(Ke, { children: a.to }),
-        /* @__PURE__ */ t.jsx(Ue, { children: e.vendor?.name })
-      ] }),
-      /* @__PURE__ */ t.jsxs(Cn, { children: [
-        y ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              isThreadAllowed: R,
-              entityId: f,
-              dashboardTabKey: W({
-                type: "details",
-                key: "withdrawFrom"
-              }),
-              roomId: F,
-              companyId: d.currentTenant?.companyId ?? h,
-              companyName: d.currentTenant?.companyName ?? h,
-              dashboardOptionType: "bill",
-              filterMetaData: {
-                ...L,
-                entityType: `bill.details.${z("withdrawFrom")}`
-              },
-              children: /* @__PURE__ */ t.jsx(
-                V,
-                {
-                  label: {
-                    label: a.withdrawFrom,
-                    width: N
-                  },
-                  style: { width: "auto" },
-                  value: e.paymentDetailsSection?.withdrawFrom != null ? Vt(
-                    e.paymentDetailsSection.withdrawFrom,
-                    s
-                  ) : h,
-                  infoLabelStyle: {
-                    textAlign: s === "small" ? "left" : "right",
-                    paddingRight: p.infoLabelPaddingRight.valuePx(s),
-                    marginTop: p.infoLabelMarginTop.valuePx(s),
-                    color: C.brandColorGoldDark
-                  },
-                  additionalInfoLabel: ae
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsx(U, {})
-        ] }),
-        /* @__PURE__ */ t.jsx(
-          E,
-          {
-            isThreadAllowed: R,
-            entityId: f,
-            dashboardTabKey: W({
-              type: "details",
-              key: "paymentType"
-            }),
-            roomId: F,
-            companyId: d.currentTenant?.companyId ?? h,
-            companyName: d.currentTenant?.companyName ?? h,
-            dashboardOptionType: "bill",
-            filterMetaData: {
-              ...L,
-              entityType: `bill.details.${z("paymentType")}`
-            },
-            children: /* @__PURE__ */ t.jsx(
-              V,
-              {
-                label: {
-                  label: a.paymentMethod,
-                  width: N
-                },
-                style: { width: "auto" },
-                value: ie(
-                  i?.method ?? ""
-                ),
-                additionalInfoLabel: vt()
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(U, {}),
-        !y && Z != null ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              isThreadAllowed: R,
-              entityId: f,
-              dashboardTabKey: W({
-                type: "details",
-                key: "paymentDate"
-              }),
-              roomId: F,
-              companyId: d.currentTenant?.companyId ?? h,
-              companyName: d.currentTenant?.companyName ?? h,
-              dashboardOptionType: "bill",
-              filterMetaData: {
-                ...L,
-                entityType: `bill.details.${z("paymentDate")}`
-              },
-              children: /* @__PURE__ */ t.jsx(
-                V,
-                {
-                  label: {
-                    label: a.paymentDate,
-                    width: N
-                  },
-                  style: { width: "auto" },
-                  value: Z.format(b),
-                  additionalInfoLabel: `${a.estimatedArrival}${re(
-                    At(
-                      Z.toDate(),
-                      [0, 6],
-                      i?.maxPeriod.value ?? 0
-                    ).toDateString()
-                  ).format(b)} - (${oe.length > 0 ? `${oe} ` : ""}${a.deliveryTimeLabel} = ${i?.maxPeriod.value ?? "0"} ${a.deliveryTimeUnits})`
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsx(U, {})
-        ] }) : null,
-        y ? null : /* @__PURE__ */ t.jsx(
-          E,
-          {
-            isThreadAllowed: R,
-            entityId: f,
-            dashboardTabKey: W({
-              type: "details",
-              key: "paymentTo"
-            }),
-            roomId: F,
-            companyId: d.currentTenant?.companyId ?? h,
-            companyName: d.currentTenant?.companyName ?? h,
-            dashboardOptionType: "bill",
-            filterMetaData: {
-              ...L,
-              entityType: `bill.details.${z("paymentTo")}`
-            },
-            children: /* @__PURE__ */ t.jsx(
-              V,
-              {
-                label: {
-                  label: a.paymentTo,
-                  width: N
-                },
-                style: { width: "auto" },
-                value: ut ?? "",
-                additionalInfoLabel: gt
-              }
-            )
-          }
-        ),
-        y || rt ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(U, {}),
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              isThreadAllowed: R,
-              entityId: f,
-              dashboardTabKey: W({
-                type: "details",
-                key: "recurringPaymentType"
-              }),
-              roomId: F,
-              companyId: d.currentTenant?.companyId ?? h,
-              companyName: d.currentTenant?.companyName ?? h,
-              dashboardOptionType: "bill",
-              filterMetaData: {
-                ...L,
-                entityType: `bill.details.${z("recurringPaymentType")}`
-              },
-              children: /* @__PURE__ */ t.jsx(
-                V,
-                {
-                  label: {
-                    label: a.paymentType,
-                    width: N
-                  },
-                  style: { width: "auto" },
-                  value: Zt(
-                    e.isRecurring,
-                    y,
-                    e.recurringBillInstance ?? 1,
-                    e.recurringConfig?.totalPaymentCycles ?? 0
-                  ),
-                  additionalInfoLabel: Gt(
-                    s,
-                    e.isRecurring,
-                    y,
-                    e.recurringConfig
-                  )
-                }
-              )
-            }
-          )
-        ] }) : null
-      ] }),
-      !y && i?.method != null && (i.method.includes(I) || i?.fee.amount != null && i.fee.amount !== 0) ? /* @__PURE__ */ t.jsx(xn, { children: /* @__PURE__ */ t.jsxs(wn, { windowSize: s, children: [
-        /* @__PURE__ */ t.jsxs(vn, { children: [
-          /* @__PURE__ */ t.jsx(yn, { children: a.total }),
-          /* @__PURE__ */ t.jsx(
-            Oe,
-            {
-              style: {
-                padding: `12px ${n.sp3}`,
-                lineHeight: "18px"
-              },
-              maxWidth: "312px",
-              title: /* @__PURE__ */ t.jsxs(fn, { children: [
-                /* @__PURE__ */ t.jsxs(Ze, { children: [
-                  /* @__PURE__ */ t.jsx(se, { children: i.method.includes(
-                    I
-                  ) && ee !== $.currencyCode ? ze.conversionAmountColon : Ee.invoiceAmount }),
-                  /* @__PURE__ */ t.jsx(le, { children: k("0,0[.]00", {
-                    amount: u.amount - D.amount,
-                    currencySymbol: D.currencySymbol
-                  }) })
-                ] }),
-                /* @__PURE__ */ t.jsxs(Ze, { children: [
-                  /* @__PURE__ */ t.jsx(se, { children: ze.transactionFee }),
-                  /* @__PURE__ */ t.jsx(le, { children: k("0,0[.]00", {
-                    amount: D.amount,
-                    currencySymbol: D.currencySymbol
-                  }) })
-                ] }),
-                /* @__PURE__ */ t.jsx(gn, {}),
-                /* @__PURE__ */ t.jsxs(hn, { children: [
-                  /* @__PURE__ */ t.jsx(se, { children: Ee.total }),
-                  /* @__PURE__ */ t.jsx(le, { children: k("0,0[.]00", {
-                    amount: u.amount,
-                    currencyCode: u.currencyCode,
-                    currencySymbol: u.currencySymbol
-                  }) })
-                ] })
-              ] }),
-              placement: "top-end",
-              children: /* @__PURE__ */ t.jsx(un, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t.jsx(Tn, { children: /* @__PURE__ */ t.jsx(
-          Ne,
-          {
-            amount: Le(
-              u.amount,
-              u.currencyCode,
-              u.currencySymbol
-            ),
-            integerStyles: K.h6Medium.cssObject,
-            decimalStyles: K.standardMedium.cssObject
-          }
-        ) })
-      ] }) }) : null
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      Yt,
-      {
-        cancelBtn: {
-          label: B && !x ? a.paymentOutsideZeni.markAsPaid : a.editBill,
-          onClick: B && !x ? $e : ne,
-          style: {
-            width: Ge(
-              !1,
-              B,
-              x,
-              Y,
-              s
-            )
-          }
-        },
-        primaryBtn: {
-          label: Ve(
-            x,
-            Y,
-            e.isBillMarkedForRetry
-          ),
-          isLoading: O?.fetchState === "In-Progress" || Q?.fetchState === "In-Progress",
-          onClick: x ? $e : () => {
-            $t && ae != null ? _(!0) : Ce();
-          },
-          style: {
-            width: Ge(
-              !0,
-              B,
-              x,
-              Y,
-              s
-            )
-          }
-        },
-        rightSideComponent: B && !x && O.fetchState !== "In-Progress" ? /* @__PURE__ */ t.jsx(Un, { windowSize: s, children: /* @__PURE__ */ t.jsx(
-          Oe,
-          {
-            style: {
-              color: C.heroDark,
-              padding: `2px ${n.sp2}`
-            },
-            display: "flex",
-            title: mn,
-            placement: "top",
-            children: /* @__PURE__ */ t.jsx(
-              Hn,
-              {
-                onClick: ne,
-                "data-testid": S(
-                  "review-detail-edit-bill-button"
-                ),
-                children: /* @__PURE__ */ t.jsx(qn, {})
-              }
-            )
-          }
-        ) }) : null,
-        style: {
-          minHeight: e.paymentDetailsSection?.paymentType?.method != null && e.paymentDetailsSection.paymentType.method.includes(
-            I
-          ) ? 127 : 62,
-          ...e.paymentDetailsSection?.paymentType?.method != null && e.paymentDetailsSection.paymentType.method.includes(
-            I
-          ) && {
-            padding: n.sp3,
-            rowGap: n.sp3
-          }
-        },
-        children: e.paymentDetailsSection?.paymentType?.method != null && e.paymentDetailsSection.paymentType.method.includes(
-          I
-        ) ? /* @__PURE__ */ t.jsxs(Dn, { children: [
-          a.internationalText1,
-          /* @__PURE__ */ t.jsx(
-            En,
-            {
-              href: "https://www.nium.com/legal/end-customer-terms",
-              target: "_Blank",
-              rel: "noopener noreferrer",
-              children: a.internationalTerms
-            }
-          ),
-          a.internationalText2
-        ] }) : null
-      }
-    )
-  ] });
-}, Ve = (e, w, g) => e ? a.paymentOutsideZeni.markAsPaid : g === !0 ? a.retryPayment : w ? a.sendForApproval : a.scheduleBill, Ge = (e, w, g, M, j) => g ? 128 : w && !e && j === "small" ? "auto" : M ? 165 : p.footerButtonWidth.value(j), un = o(an)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ze = o(tt)`
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: ${n.sp1};
-`, le = o.div`
-  color: ${(e) => e.theme.colors.brandColorPearl};
-`, se = o.div`
-  color: ${(e) => e.theme.colors.hero};
-`, hn = o(tt)`
-  display: flex;
-  justify-content: space-between;
-  padding-top: ${n.sp1};
-`, yn = o.div``, gn = o.div`
-  background-color: ${C.neutralGrey3Dark};
-  height: 1px;
-  width: 280px;
-`, fn = o.div``, xn = o.div`
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-`, wn = o.div`
-  width: 100%;
-  padding: ${n.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: ${n.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${n.sp2};
-`, vn = o(et)`
-  gap: ${n.sp1};
-  display: flex;
-  width: 100%;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-`, Tn = o(et)`
-  display: flex;
-  width: calc(100% - 176px);
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-`, $n = o.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`, Sn = o.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin-left: ${(e) => p.reviewContainerMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${(e) => p.reviewContainerMarginRight.valuePx(e.windowSize)};
-  padding-top: ${n.sp3};
-`, Cn = o.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${n.sp2};
-  margin-bottom: ${n.sp3};
-  margin-top: ${n.sp3};
-`, U = o.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Ye = o(qt)`
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${dn.sectionTitle.style(e.windowSize)}`};
-  margin-left: ${(e) => p.sectionTitleMarginLeft.valuePx(e.windowSize)};
-`, jn = o.div`
-  display: flex;
-  margin-bottom: ${n.sp3};
-  margin-top: ${n.sp3};
-`, bn = o.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: ${n.sp2};
-  padding: ${n.sp3} ${n.sp4};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
-`, Pn = o.div`
-  background-color: ${C.alertLight};
-  border-radius: ${n.sp2};
-  width: 100%;
-  display: flex;
-`, In = o.div`
-  display: flex;
-  flex-direction: column;
-  padding-left: ${n.sp2};
-`, An = o(ce)`
-  padding-bottom: ${n.sp3};
-  color: ${C.brandColorGoldDark};
-`, Bn = o(Jt)`
-  padding-top: ${n.sp3};
-  color: ${C.brandColorGoldDark};
-`, _e = o.div`
-  display: flex;
-  flex-direction: ${(e) => nt.includes(e.windowSize) ? "column" : "row"};
-  width: 100%;
-`, kn = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  column-gap: ${n.sp1};
-`, Mn = o.div`
-  display: flex;
-  column-gap: ${n.sp2};
-  align-items: center;
-`, Ln = o.div`
-  display: flex;
-  padding-top: ${n.sp3};
-`, Ke = o(tn)`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  margin-right: ${n.sp1};
-`, Ue = o(nn)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  margin-right: ${n.sp1};
-`, qe = o(Kt)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Rn = o.div`
-  margin-bottom: ${n.sp3};
-`, Fn = o.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${(e) => e.showAutofill === !0 ? n.sp8 : "unset"};
-  position: absolute;
-  width: 100%;
-  top: ${n.sp0};
-  padding-top: ${(e) => p.navBarContainerPaddingTop.valuePx(e.windowSize)};
-  padding-right: 33px;
-  padding-bottom: ${(e) => p.navBarContainerPaddingTop.valuePx(e.windowSize)};
-  padding-left: ${n.sp0};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Nn = o(_t)`
-  height: ${n.sp3};
-  width: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, On = o.span`
-  display: flex;
-  align-items: center;
-  margin-left: ${n.sp2};
-  margin-top: ${(e) => p.iconContainerMarginTop.valuePx(e.size)};
-  align-self: ${(e) => e.size === "small" ? "baseline" : "center"};
-`, Dn = o(de)`
-  color: ${(e) => e.theme.colors.grey1};
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-`, En = o.a`
-  color: ${(e) => e.theme.colors.grey1};
-  text-decoration: underline;
-  margin-right: ${n.sp1};
-  margin-left: ${n.sp1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, zn = o.div`
-  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
-  display: flex;
-  flex-direction: row;
-
-  align-items: center;
-  color: ${(e) => e.theme.colors.hero};
-  margin-right: ${n.sp2};
-  &:hover {
-    svg {
-      color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.theme.colors.primary};
-    }
-  }
-`, Wn = o.div`
-  width: ${n.sp4};
-  height: ${n.sp4};
-  display: flex;
-`, He = o.div`
-  cursor: default;
-  display: flex;
-  align-items: center;
-  margin-right: ${n.sp1};
-`, Je = o(en)`
-  cursor: pointer;
-  width: ${n.sp4};
-  height: ${n.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, q = o(ce)`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  align-items: center;
-  min-width: 142px;
-  flex-grow: 1;
-`, Xe = o(ce)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  margin-right: ${(e) => p.infoMarginRight.valuePx(e.windowSize)};
-  min-width: ${(e) => p.infoMinWidth.valuePx(e.windowSize)};
-  justify-content: flex-end;
-`, Vn = o.div`
-  display: flex;
-  cursor: pointer;
-  column-gap: ${n.sp1};
-  margin-left: ${n.sp5};
-`, Qe = o.div`
-  width: 120px;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-`, Gn = o.div`
-  display: flex;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-`, H = o(de)`
-  display: flex;
-  color: ${(e) => e.borderColor};
-  height: 20px;
-  text-align: center;
-  max-width: 84px;
-  display: block;
-  cursor: default;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 1px 6px;
-  border: ${(e) => `1px solid ${e.borderColor}`};
-  border-radius: ${n.sp1};
-`, Zn = o.div`
-  display: flex;
-  flex-direction: column;
-`, Yn = o.div`
-  display: flex;
-  width: 100%;
-  flex-flow: column;
-  padding-top: ${n.sp2};
-  padding-bottom: ${n.sp2};
-  border-bottom: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-`, _n = o(de)`
-  margin-top: ${n.sp3};
-  color: ${C.alert};
-`, Kn = o(Ht)`
-  min-width: ${n.sp4};
-  height: ${n.sp4};
-  width: ${n.sp4};
-  margin-top: ${n.sp3};
-  margin-left: ${n.sp4};
-  color: ${C.brandColorGoldDark};
-`, Un = o.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-right: ${(e) => p.footerRightIconMarginRight.valuePx(e.windowSize)};
-`, qn = o(rn)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${n.sp4};
-  height: ${n.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Hn = o.div`
-  display: flex;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.grey1};
-  margin-left: ${n.sp2};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`;
-export {
-  ro as default
-};