@zeniai/web-components 3.16.91 → 3.16.92

package/dist/ReviewDetailsPage-XS6whpgN.js

@@ -0,0 +1,1073 @@
+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-B_vMG-7O.js";
+import { P as sn, L as cn } from "./LowBalancePopup-e4M9kUU3.js";
+import { L as V } from "./LabeledText-Dw-5v7lD.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
+};