@solvimon/solvimon-web 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/components/Invoice/Invoice.es.js

@@ -1,2625 +1,10 @@
-import { ref, defineComponent, useAttrs, computed, toRefs, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementVNode, normalizeClass, unref, renderSlot, createCommentVNode, mergeDefaults, createPropsRestProxy, createSlots, createElementBlock, createTextVNode, toDisplayString, Fragment, renderList, createVNode, withKeys, normalizeProps, guardReactiveProps, isRef } from "vue";
-import { u as useLoadInitialData } from "../../useLoadInitialData-Dm48tlSO.mjs";
-import { c as createInvoicesService } from "../../invoices-CNK1Ushv.mjs";
-import { u as useService } from "../../useService-DG_zedHV.mjs";
-import { c as createPaymentsService } from "../../payments-CE9U7aKK.mjs";
-import { a as useIntl, _ as _sfc_main$A, f as formatTimezone, b as _sfc_main$G, d as defineCustomElement, g as getComponentName } from "../../component-dpA83LIN.mjs";
-import { _ as _sfc_main$F } from "../../CustomerBillingInformation.vue.es-DBMl01Es.mjs";
-import { _ as _sfc_main$u, u as useToggleList, a as _sfc_main$z } from "../../Comparators.vue.es-DdTKGB80.mjs";
-import { b as _export_sfc, _ as _sfc_main$w } from "../../Chip.vue.es-DcW2CjUA.mjs";
-import { u as useBreakpoints, b as breakpointsTailwind } from "../../index.es-LCAKs4tH.mjs";
-import { u as useButtonClasses, a as _sfc_main$r, b as buttonPropsDefault, _ as _sfc_main$s } from "../../Button.vue.es-6sBk5tBL.mjs";
-import { _ as _sfc_main$t } from "../../FormMessage.vue.es-DFQXxiSC.mjs";
-import { _ as _sfc_main$C } from "../../Section.vue.es-3-H1pUTB.mjs";
-import { _ as _sfc_main$v } from "../../Amount.vue.es-C6JE5rL8.mjs";
-import { g as getCustomerName } from "../../customer.es-LIW2YmLL.mjs";
-import { g as getComposedString } from "../../Avatar.vue.es-Ba8ZGfm4.mjs";
-import { a as formatAmount, f as formatEnum } from "../../formatting.es-D5H_ySFv.mjs";
-import { _ as _sfc_main$x, T as TooltipContent, a as _sfc_main$y } from "../../TooltipParagraph.vue.es-DVJLF9Kv.mjs";
-import { _ as _sfc_main$B } from "../../DividerText.vue.es-B7oa5Xpn.mjs";
-import { i as isEmpty } from "../../isEmpty.es-Bp1SbWFu.mjs";
-import { u as useWindowSize } from "../../index-D3v7hAtc.mjs";
-import { _ as _sfc_main$D } from "../../InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-DsrBsrtk.mjs";
-import { _ as _sfc_main$E } from "../../PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-BnKwmJ2s.mjs";
-const useSimpleToggleList = (initialToggledItems = []) => {
-  const toggledItems = ref(initialToggledItems);
-  const toggle = (index) => {
-    const match = toggledItems.value.find((groupIndex) => groupIndex === index);
-    if (typeof match === "number") {
-      toggledItems.value = toggledItems.value.filter((groupIndex) => groupIndex !== index);
-    } else {
-      toggledItems.value = [...toggledItems.value, index];
-    }
-  };
-  return [toggledItems, toggle];
-};
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "Link",
-  props: /* @__PURE__ */ mergeDefaults({
-    external: { type: Boolean },
-    showOnHover: { type: Boolean },
-    button: { type: Boolean },
-    to: {},
-    target: {},
-    custom: { type: Boolean },
-    activeClass: {},
-    exactActiveClass: {},
-    ariaCurrentValue: {},
-    viewTransition: { type: Boolean },
-    replace: { type: Boolean },
-    type: {},
-    variant: {},
-    color: {},
-    size: {},
-    pill: { type: Boolean },
-    square: { type: Boolean },
-    loading: { type: Boolean },
-    disabled: { type: Boolean },
-    iconPrefix: {},
-    iconSuffix: {},
-    tag: {}
-  }, {
-    external: false,
-    showOnHover: false,
-    button: false,
-    //props for button styling
-    ...buttonPropsDefault
-  }),
-  setup(__props) {
-    const props = __props;
-    const attrs = useAttrs();
-    const isExternal = ref(!!attrs.href);
-    const derivedTarget = computed(() => props.target === null ? "_self" : "_blank");
-    const currentComponent = computed(() => {
-      const customProps = isExternal.value ? {
-        rel: "noopener noreferrer",
-        target: derivedTarget.value
-      } : { to: props.to, target: props.target || null };
-      return {
-        tag: isExternal.value ? "a" : "RouterLink",
-        props: { ...attrs, ...customProps }
-      };
-    });
-    const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props));
-    const linkClass = computed(
-      () => props.button ? `inline-flex text-center hover:no-underline ${wrapperClasses.value} text-sm` : `group hover:text-blue-600 hover:underline ${props.showOnHover ? "hover:text-blue-600" : "text-blue-600"}`
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(currentComponent.value.tag), mergeProps(currentComponent.value.props, { class: linkClass.value }), {
-        default: withCtx(() => [
-          createElementVNode("span", {
-            class: normalizeClass({ [`${unref(spanClasses)} flex items-center grow`]: props.button })
-          }, [
-            renderSlot(_ctx.$slots, "default"),
-            __props.external && !__props.button ? (openBlock(), createBlock(unref(_sfc_main$r), {
-              key: 0,
-              icon: "arrow_outward",
-              size: "xs",
-              class: normalizeClass(["ml-0.5", { "invisible group-hover:visible": props.showOnHover }])
-            }, null, 8, ["class"])) : createCommentVNode("", true)
-          ], 2)
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-const _hoisted_1$k = {
-  key: 1,
-  class: "flex flex-col items-end gap-1"
-};
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "DownloadButton",
-  props: {
-    downloadService: { type: Function },
-    mobileIconOnly: { type: Boolean, default: false },
-    type: {},
-    variant: { default: "outline" },
-    color: { default: "gray" },
-    size: { default: "md" },
-    pill: { type: Boolean },
-    square: { type: Boolean },
-    loading: { type: Boolean },
-    disabled: { type: Boolean },
-    iconPrefix: {},
-    iconSuffix: {},
-    tag: {}
-  },
-  setup(__props) {
-    const { $t } = useIntl();
-    const buttonProps = createPropsRestProxy(__props, ["downloadService", "size", "color", "mobileIconOnly", "variant"]);
-    const isFailed = ref(false);
-    const isLoading = ref(false);
-    const breakpoints = useBreakpoints(breakpointsTailwind);
-    const isMobile = breakpoints.smaller("md");
-    const isIconOnly = computed(() => __props.mobileIconOnly && isMobile.value);
-    const handleDownload = async () => {
-      isLoading.value = true;
-      isFailed.value = false;
-      try {
-        await __props.downloadService();
-      } catch {
-        isFailed.value = true;
-      } finally {
-        isLoading.value = false;
-      }
-    };
-    return (_ctx, _cache) => {
-      return !isFailed.value ? (openBlock(), createBlock(unref(_sfc_main$s), mergeProps({ key: 0 }, { ...buttonProps, size: __props.size, color: __props.color }, {
-        disabled: isLoading.value,
-        loading: isLoading.value,
-        variant: __props.variant,
-        type: "button",
-        "icon-prefix": "download",
-        onClick: handleDownload
-      }), createSlots({ _: 2 }, [
-        _ctx.$slots.default && !isIconOnly.value ? {
-          name: "default",
-          fn: withCtx(() => [
-            !!_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["disabled", "loading", "variant"])) : (openBlock(), createElementBlock("div", _hoisted_1$k, [
-        !isFailed.value ? (openBlock(), createBlock(unref(_sfc_main$s), mergeProps({ key: 0 }, { ...buttonProps, size: __props.size, color: __props.color }, {
-          disabled: isLoading.value,
-          loading: isLoading.value,
-          type: "button",
-          "icon-prefix": "download",
-          onClick: handleDownload
-        }), createSlots({ _: 2 }, [
-          _ctx.$slots.default && !isIconOnly.value ? {
-            name: "default",
-            fn: withCtx(() => [
-              !!_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["disabled", "loading"])) : createCommentVNode("", true),
-        isFailed.value ? (openBlock(), createBlock(unref(_sfc_main$t), { key: 1 }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref($t)({
-              id: "download_button.download_failed_message",
-              defaultMessage: "Download failed, please try again later",
-              description: "Error message when a download fails"
-            })), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ]));
-    };
-  }
-});
-const _hoisted_1$j = { class: "flex items-start gap-2" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  __name: "InfoBlock",
-  props: {
-    variant: { default: "default" },
-    hasIcon: { type: Boolean }
-  },
-  setup(__props) {
-    const iconMapping = {
-      default: "info",
-      warning: "error",
-      danger: "error"
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["px-4 py-3 rounded border text-sm flex justify-between items-center gap-2", {
-          "bg-blue-50 border-blue-100 text-blue-700": __props.variant === "default",
-          "bg-red-50 border-red-100 text-red-700": __props.variant === "danger",
-          "bg-yellow-50 border-yellow-100 text-yellow-700": __props.variant === "warning"
-        }])
-      }, [
-        createElementVNode("div", _hoisted_1$j, [
-          __props.hasIcon ? (openBlock(), createBlock(unref(_sfc_main$r), {
-            key: 0,
-            icon: iconMapping[__props.variant],
-            size: "xs",
-            class: "shrink-0"
-          }, null, 8, ["icon"])) : createCommentVNode("", true),
-          createElementVNode("div", null, [
-            renderSlot(_ctx.$slots, "default")
-          ])
-        ]),
-        createElementVNode("div", null, [
-          renderSlot(_ctx.$slots, "cta")
-        ])
-      ], 2);
-    };
-  }
-});
-const _sfc_main$n = {};
-const _hoisted_1$i = { class: "w-full" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("table", _hoisted_1$i, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-const InvoiceTable = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render]]);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceTableData",
-  props: {
-    number: { type: Boolean, default: false },
-    hasPadding: { type: Boolean, default: true }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", {
-        class: normalizeClass({
-          "text-right tabular-nums": __props.number,
-          "py-2": __props.hasPadding
-        })
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceTableHeader",
-  props: {
-    left: { type: Boolean, default: false },
-    right: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("th", {
-        class: normalizeClass(["py-1.5 font-bold border-b text-gray-400 text-xs uppercase", { "text-left": __props.left, "text-right": __props.right }])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-const _hoisted_1$h = { class: "flex items-center" };
-const _hoisted_2$b = {
-  key: 0,
-  class: "text-xs text-gray-400"
-};
-const _hoisted_3$7 = { class: "flex items-center" };
-const _hoisted_4$7 = { key: 0 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceSubLineRow",
-  props: {
-    subLines: {},
-    isOpen: { type: Boolean },
-    lineOrder: {},
-    periodOrder: {},
-    groupOrder: {},
-    processingOnlyCustomers: {}
-  },
-  setup(__props) {
-    const { formatMessage } = useIntl();
-    const props = __props;
-    const getCustomerName$1 = (customerId) => {
-      var _a;
-      const childCustomer = (_a = props.processingOnlyCustomers) == null ? void 0 : _a.find(
-        (childCustomer2) => childCustomer2.id === customerId
-      );
-      if (!childCustomer) {
-        return formatMessage({
-          id: "generic.not_available",
-          defaultMessage: "N/A",
-          description: "Used in scenarios where no data is available to be displayed"
-        });
-      }
-      return getCustomerName(childCustomer);
-    };
-    const getSubLineConditions = (subLine) => {
-      var _a;
-      return ((_a = subLine.usage_based_conversion) == null ? void 0 : _a.conditions) ?? subLine.conditions;
-    };
-    return (_ctx, _cache) => {
-      return __props.subLines && __props.isOpen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        !__props.processingOnlyCustomers ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.subLines, (subLine, subLineIndex) => {
-          return openBlock(), createElementBlock("tr", {
-            key: subLineIndex,
-            class: normalizeClass(subLineIndex > 0 ? "border-t" : "")
-          }, [
-            createVNode(_sfc_main$m, { class: "w-1/3" }, {
-              default: withCtx(() => {
-                var _a, _b, _c, _d, _e, _f;
-                return [
-                  createElementVNode("div", _hoisted_1$h, [
-                    renderSlot(_ctx.$slots, "invoice-line-prefix", {
-                      lineOrder: __props.lineOrder,
-                      periodOrder: __props.periodOrder,
-                      groupOrder: __props.groupOrder
-                    }),
-                    createElementVNode("div", null, [
-                      createElementVNode("div", null, [
-                        subLine.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString(subLine.description), 1)
-                        ], 64)) : subLine.details.description ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createTextVNode(toDisplayString(subLine.details.description), 1)
-                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          createTextVNode(" N/A ")
-                        ], 64))
-                      ]),
-                      ((_a = getSubLineConditions(subLine)) == null ? void 0 : _a.name) || ((_b = getSubLineConditions(subLine)) == null ? void 0 : _b.meter_properties) ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
-                        ((_c = getSubLineConditions(subLine)) == null ? void 0 : _c.name) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString((_d = getSubLineConditions(subLine)) == null ? void 0 : _d.name), 1)
-                        ], 64)) : ((_e = getSubLineConditions(subLine)) == null ? void 0 : _e.meter_properties) ? (openBlock(), createBlock(unref(_sfc_main$u), {
-                          key: 1,
-                          comparators: (_f = getSubLineConditions(subLine)) == null ? void 0 : _f.meter_properties
-                        }, null, 8, ["comparators"])) : createCommentVNode("", true)
-                      ])) : createCommentVNode("", true)
-                    ])
-                  ])
-                ];
-              }),
-              _: 2
-            }, 1024),
-            createVNode(_sfc_main$m, {
-              number: "",
-              class: "w-1/7 text-right tabular-nums"
-            }, {
-              default: withCtx(() => {
-                var _a, _b;
-                return [
-                  createTextVNode(toDisplayString(((_b = (_a = subLine.details.conversion) == null ? void 0 : _a.credits) == null ? void 0 : _b.quantity) ?? "N/A"), 1)
-                ];
-              }),
-              _: 2
-            }, 1024),
-            createVNode(_sfc_main$m, { class: "w-1/7 text-right tabular-nums" }, {
-              default: withCtx(() => {
-                var _a, _b;
-                return [
-                  ((_a = subLine.details.band) == null ? void 0 : _a.amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 0,
-                    value: subLine.details.band.amount
-                  }, null, 8, ["value"])) : ((_b = subLine.details.band) == null ? void 0 : _b.percentage) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createTextVNode(toDisplayString(subLine.details.band.percentage) + "% ", 1)
-                  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                    createTextVNode(" N/A ")
-                  ], 64))
-                ];
-              }),
-              _: 2
-            }, 1024),
-            createVNode(_sfc_main$m, null, {
-              default: withCtx(() => [..._cache[0] || (_cache[0] = [
-                createTextVNode(" ", -1)
-              ])]),
-              _: 1
-            }),
-            subLine.details.amount ? (openBlock(), createBlock(_sfc_main$m, {
-              key: 0,
-              class: "w-1/7 text-right tabular-nums"
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$v, {
-                  value: subLine.details.amount
-                }, null, 8, ["value"])
-              ]),
-              _: 2
-            }, 1024)) : createCommentVNode("", true)
-          ], 2);
-        }), 128)) : createCommentVNode("", true),
-        __props.processingOnlyCustomers ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.subLines, (subLine, i) => {
-          return openBlock(), createElementBlock("tr", {
-            key: i,
-            tabindex: void 0,
-            class: normalizeClass(["group", { "border-t": i !== 0 }])
-          }, [
-            createVNode(_sfc_main$m, { class: "pl-4" }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_3$7, [
-                  subLine.processing_only_customer_resource_id ? (openBlock(), createElementBlock("div", _hoisted_4$7, toDisplayString(getCustomerName$1(
-                    subLine.processing_only_customer_resource_id
-                  )), 1)) : createCommentVNode("", true)
-                ])
-              ]),
-              _: 2
-            }, 1024),
-            renderSlot(_ctx.$slots, "subline-content", {
-              details: subLine.details,
-              hideTaxDetails: true
-            })
-          ], 2);
-        }), 128)) : createCommentVNode("", true)
-      ], 64)) : createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$g = ["tabindex", "onClick"];
-const _hoisted_2$a = { class: "flex items-center" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceCommitment",
-  props: {
-    commitments: {},
-    groupOrder: {},
-    invoicePeriodOrder: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    const { getIsOpen, toggle } = useToggleList();
-    const toggleLine = (groupOrder, invoiceLineOrder) => {
-      toggle(formatIndex(groupOrder, invoiceLineOrder));
-    };
-    const formatIndex = (rootIndex, index) => `${rootIndex}-line-${index}`;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(InvoiceTable, null, {
-        default: withCtx(() => [
-          createElementVNode("tr", null, [
-            createVNode(_sfc_main$l, {
-              left: "",
-              colspan: "5"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.unit",
-                  defaultMessage: "Unit",
-                  description: "Table header for the column containing the number of units of invoice groups"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, {
-              right: "",
-              class: "w-60"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.sub_total",
-                  defaultMessage: "Subtotal",
-                  description: "Table header for the column containing the subtotal for invoices"
-                })), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.commitments, (line, lineIndex) => {
-            return openBlock(), createElementBlock(Fragment, { key: lineIndex }, [
-              createElementVNode("tr", {
-                class: normalizeClass(["border-t", { "cursor-pointer": line.sub_lines }]),
-                tabindex: line.sub_lines ? 0 : void 0,
-                onClick: ($event) => toggleLine(__props.groupOrder, line["line_order"])
-              }, [
-                createVNode(_sfc_main$m, { colspan: "2" }, {
-                  default: withCtx(() => {
-                    var _a, _b;
-                    return [
-                      line.sub_lines ? (openBlock(), createBlock(_sfc_main$r, {
-                        key: 0,
-                        icon: "keyboard_arrow_down",
-                        size: "md",
-                        class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                          "-rotate-90": !unref(getIsOpen)(formatIndex(__props.groupOrder, line["line_order"]))
-                        }])
-                      }, null, 8, ["class"])) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_2$a, [
-                        renderSlot(_ctx.$slots, "invoice-line-prefix", {
-                          lineOrder: line.line_order,
-                          periodOrder: __props.invoicePeriodOrder,
-                          groupOrder: __props.groupOrder
-                        }),
-                        line.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString(line.description), 1)
-                        ], 64)) : ((_a = line.details) == null ? void 0 : _a.description) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createTextVNode(toDisplayString((_b = line.details) == null ? void 0 : _b.description), 1)
-                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          createTextVNode(toDisplayString(unref(intl).$t({
-                            id: "generic.not_available",
-                            defaultMessage: "N/A",
-                            description: "Used in scenarios where no data is available to be displayed"
-                          })), 1)
-                        ], 64))
-                      ])
-                    ];
-                  }),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { colspan: "3" }, {
-                  default: withCtx(() => [..._cache[0] || (_cache[0] = [
-                    createTextVNode(" ", -1)
-                  ])]),
-                  _: 1
-                }),
-                createVNode(_sfc_main$m, { number: "" }, {
-                  default: withCtx(() => {
-                    var _a, _b;
-                    return [
-                      ((_a = line.details) == null ? void 0 : _a.amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                        key: 0,
-                        value: (_b = line.details) == null ? void 0 : _b.amount
-                      }, null, 8, ["value"])) : createCommentVNode("", true)
-                    ];
-                  }),
-                  _: 2
-                }, 1024)
-              ], 10, _hoisted_1$g),
-              createVNode(_sfc_main$k, {
-                ref_for: true,
-                ref: formatIndex(__props.groupOrder, line["line_order"]),
-                "sub-lines": line.sub_lines ?? [],
-                "line-order": line["line_order"],
-                "period-order": __props.invoicePeriodOrder,
-                "group-order": __props.groupOrder,
-                "is-open": unref(getIsOpen)(formatIndex(__props.groupOrder, line["line_order"]))
-              }, null, 8, ["sub-lines", "line-order", "period-order", "group-order", "is-open"])
-            ], 64);
-          }), 128))
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const _hoisted_1$f = ["tabindex", "onClick"];
-const _hoisted_2$9 = { class: "flex items-center" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceDiscountMarkup",
-  props: {
-    lines: {},
-    type: {},
-    handleToggleItems: { type: Function },
-    formatIndex: { type: Function },
-    expandedItems: {},
-    isExpandable: { type: Boolean },
-    invoicePeriodOrder: {},
-    groupOrder: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    const { getIsOpen, toggle } = useToggleList();
-    const toggleLine = (groupOrder, invoiceLineOrder) => {
-      toggle(formatIndex(groupOrder, invoiceLineOrder));
-    };
-    const formatIndex = (rootIndex, index) => `${rootIndex}-line-${index}`;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(InvoiceTable, null, {
-        default: withCtx(() => [
-          createElementVNode("tr", null, [
-            createVNode(_sfc_main$l, {
-              left: "",
-              class: "w-3/5"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.quantity",
-                  defaultMessage: "Quantity",
-                  description: "Table header for quantity column"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, { colspan: "2" }, {
-              default: withCtx(() => [..._cache[0] || (_cache[0] = [
-                createTextVNode(" ", -1)
-              ])]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, {
-              left: "",
-              class: "w-1/5"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(__props.type === "DISCOUNT" ? unref(intl).$t({
-                  id: "invoice.table_header.discount",
-                  defaultMessage: "Discount",
-                  description: "Table header for discount column"
-                }) : unref(intl).$t({
-                  id: "invoice.table_header.markup",
-                  defaultMessage: "Markup",
-                  description: "Table header for markup column"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, {
-              left: "",
-              class: "w-1/5"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(__props.type === "DISCOUNT" ? unref(intl).$t({
-                  id: "invoice.table_header.total",
-                  defaultMessage: "Total",
-                  description: "Table header for total column"
-                }) : " "), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, {
-              right: "",
-              class: "w-1/5"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.sub_total",
-                  defaultMessage: "Subtotal",
-                  description: "Table header for the column containing the subtotal for invoices"
-                })), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.lines, (line, lineIndex) => {
-            return openBlock(), createElementBlock(Fragment, { key: lineIndex }, [
-              createElementVNode("tr", {
-                class: normalizeClass(["border-t", { "cursor-pointer": __props.isExpandable }]),
-                tabindex: __props.isExpandable ? 0 : void 0,
-                onClick: ($event) => toggleLine(__props.groupOrder, line["line_order"])
-              }, [
-                createVNode(_sfc_main$m, { class: "w-3/5" }, {
-                  default: withCtx(() => {
-                    var _a, _b;
-                    return [
-                      line.sub_lines ? (openBlock(), createBlock(_sfc_main$r, {
-                        key: 0,
-                        icon: "keyboard_arrow_down",
-                        size: "md",
-                        class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                          "-rotate-90": !unref(getIsOpen)(formatIndex(__props.groupOrder, line["line_order"]))
-                        }])
-                      }, null, 8, ["class"])) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_2$9, [
-                        renderSlot(_ctx.$slots, "invoice-line-prefix", {
-                          lineOrder: line.line_order,
-                          periodOrder: __props.invoicePeriodOrder,
-                          groupOrder: __props.groupOrder
-                        }),
-                        line.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString(line.description), 1)
-                        ], 64)) : ((_a = line.details) == null ? void 0 : _a.description) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createTextVNode(toDisplayString((_b = line.details) == null ? void 0 : _b.description), 1)
-                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          createTextVNode("N/A")
-                        ], 64))
-                      ])
-                    ];
-                  }),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { colspan: "2" }, {
-                  default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                    createTextVNode(" ", -1)
-                  ])]),
-                  _: 1
-                }),
-                createVNode(_sfc_main$m, { class: "tabular-nums w-1/5" }, {
-                  default: withCtx(() => {
-                    var _a, _b, _c;
-                    return [
-                      createTextVNode(toDisplayString(((_b = (_a = line.details) == null ? void 0 : _a.band) == null ? void 0 : _b.percentage) ? `${(_c = line.details) == null ? void 0 : _c.band.percentage}%` : " "), 1)
-                    ];
-                  }),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { class: "w-1/5" }, {
-                  default: withCtx(() => [..._cache[2] || (_cache[2] = [
-                    createTextVNode(" ", -1)
-                  ])]),
-                  _: 1
-                }),
-                createVNode(_sfc_main$m, {
-                  number: "",
-                  class: "w-1/5"
-                }, {
-                  default: withCtx(() => {
-                    var _a;
-                    return [
-                      ((_a = line.details) == null ? void 0 : _a.amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                        key: 0,
-                        value: line.details.amount
-                      }, null, 8, ["value"])) : createCommentVNode("", true)
-                    ];
-                  }),
-                  _: 2
-                }, 1024)
-              ], 10, _hoisted_1$f),
-              createVNode(_sfc_main$k, {
-                ref_for: true,
-                ref: formatIndex(__props.groupOrder, line["line_order"]),
-                "sub-lines": line.sub_lines ?? [],
-                "line-order": line["line_order"],
-                "is-open": unref(getIsOpen)(formatIndex(__props.groupOrder, line["line_order"])),
-                "period-order": __props.invoicePeriodOrder,
-                "group-order": __props.groupOrder
-              }, null, 8, ["sub-lines", "line-order", "is-open", "period-order", "group-order"])
-            ], 64);
-          }), 128))
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const _hoisted_1$e = ["tabindex"];
-const _hoisted_2$8 = { key: 0 };
-const _hoisted_3$6 = {
-  colspan: "2",
-  class: "p-0"
-};
-const _hoisted_4$6 = { class: "px-9 py-3 -mx-9 bg-gray-50 text-xs" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceGroupCommitment",
-  props: {
-    group: {},
-    expandedItems: {},
-    handleToggleItems: { type: Function },
-    formatIndex: { type: Function },
-    invoicePeriodOrder: {},
-    groupOrder: {},
-    isExpandable: { type: Boolean },
-    amountType: {},
-    processingOnlyCustomers: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("tr", {
-          class: normalizeClass(["border-t", { "cursor-pointer": __props.isExpandable }]),
-          tabindex: __props.isExpandable ? 0 : void 0,
-          onClick: _cache[0] || (_cache[0] = ($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder))),
-          onKeyup: [
-            _cache[1] || (_cache[1] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["enter"])),
-            _cache[2] || (_cache[2] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["space"]))
-          ]
-        }, [
-          createVNode(_sfc_main$m, { class: "p-0" }, {
-            default: withCtx(() => [
-              __props.isExpandable ? (openBlock(), createBlock(_sfc_main$r, {
-                key: 0,
-                icon: "keyboard_arrow_down",
-                size: "md",
-                class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                  "-rotate-90": !__props.expandedItems.includes(
-                    __props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)
-                  )
-                }])
-              }, null, 8, ["class"])) : createCommentVNode("", true),
-              createTextVNode(" " + toDisplayString(unref(intl).$t({
-                id: "invoice.commitment_heading",
-                defaultMessage: "Commitment",
-                description: "Heading used for commitment in invoice tables"
-              })), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(_sfc_main$m, { number: "" }, {
-            default: withCtx(() => [
-              __props.amountType === "INCLUDING_TAX" ? (openBlock(), createBlock(_sfc_main$v, {
-                key: 0,
-                value: __props.group.amount_including_tax
-              }, null, 8, ["value"])) : (openBlock(), createBlock(_sfc_main$v, {
-                key: 1,
-                value: __props.group.amount_excluding_tax
-              }, null, 8, ["value"]))
-            ]),
-            _: 1
-          })
-        ], 42, _hoisted_1$e),
-        __props.expandedItems.includes(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)) && __props.group.lines ? (openBlock(), createElementBlock("tr", _hoisted_2$8, [
-          createElementVNode("td", _hoisted_3$6, [
-            createElementVNode("div", _hoisted_4$6, [
-              createVNode(_sfc_main$j, {
-                commitments: __props.group.lines,
-                "format-index": __props.formatIndex,
-                "handle-toggle-items": __props.handleToggleItems,
-                "expanded-items": __props.expandedItems,
-                "is-expandable": __props.isExpandable,
-                "invoice-period-order": __props.invoicePeriodOrder,
-                "group-order": __props.groupOrder
-              }, {
-                "invoice-line-prefix": withCtx((linePrefixProps) => [
-                  renderSlot(_ctx.$slots, "invoice-line-prefix", normalizeProps(guardReactiveProps(linePrefixProps)))
-                ]),
-                _: 3
-              }, 8, ["commitments", "format-index", "handle-toggle-items", "expanded-items", "is-expandable", "invoice-period-order", "group-order"])
-            ])
-          ])
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$d = ["tabindex"];
-const _hoisted_2$7 = { key: 0 };
-const _hoisted_3$5 = {
-  colspan: "2",
-  class: "p-0"
-};
-const _hoisted_4$5 = { class: "px-9 py-3 -mx-9 bg-gray-50 text-xs" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceGroupDiscountMarkup",
-  props: {
-    heading: {},
-    group: {},
-    expandedItems: {},
-    handleToggleItems: { type: Function },
-    formatIndex: { type: Function },
-    invoicePeriodOrder: {},
-    groupOrder: {},
-    isExpandable: { type: Boolean },
-    amountType: {},
-    processingOnlyCustomers: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("tr", {
-          class: normalizeClass(["border-t", { "cursor-pointer": __props.isExpandable }]),
-          tabindex: __props.isExpandable ? 0 : void 0,
-          onClick: _cache[0] || (_cache[0] = ($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder))),
-          onKeyup: [
-            _cache[1] || (_cache[1] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["enter"])),
-            _cache[2] || (_cache[2] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["space"]))
-          ]
-        }, [
-          createVNode(_sfc_main$m, { class: "p-0" }, {
-            default: withCtx(() => [
-              __props.isExpandable ? (openBlock(), createBlock(_sfc_main$r, {
-                key: 0,
-                icon: "keyboard_arrow_down",
-                size: "md",
-                class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                  "-rotate-90": !__props.expandedItems.includes(
-                    __props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)
-                  )
-                }])
-              }, null, 8, ["class"])) : createCommentVNode("", true),
-              createTextVNode(" " + toDisplayString(__props.heading), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(_sfc_main$m, { number: "" }, {
-            default: withCtx(() => [
-              __props.amountType === "INCLUDING_TAX" ? (openBlock(), createBlock(_sfc_main$v, {
-                key: 0,
-                value: __props.group.amount_including_tax
-              }, null, 8, ["value"])) : (openBlock(), createBlock(_sfc_main$v, {
-                key: 1,
-                value: __props.group.amount_excluding_tax
-              }, null, 8, ["value"]))
-            ]),
-            _: 1
-          })
-        ], 42, _hoisted_1$d),
-        __props.expandedItems.includes(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)) && __props.group.lines ? (openBlock(), createElementBlock("tr", _hoisted_2$7, [
-          createElementVNode("td", _hoisted_3$5, [
-            createElementVNode("div", _hoisted_4$5, [
-              createVNode(_sfc_main$i, {
-                type: __props.group.type,
-                lines: __props.group.lines,
-                "format-index": __props.formatIndex,
-                "handle-toggle-items": __props.handleToggleItems,
-                "expanded-items": __props.expandedItems,
-                "is-expandable": __props.isExpandable,
-                "invoice-period-order": __props.invoicePeriodOrder,
-                "group-order": __props.groupOrder
-              }, {
-                "invoice-line-prefix": withCtx((linePrefixProps) => [
-                  renderSlot(_ctx.$slots, "invoice-line-prefix", normalizeProps(guardReactiveProps(linePrefixProps)))
-                ]),
-                _: 3
-              }, 8, ["type", "lines", "format-index", "handle-toggle-items", "expanded-items", "is-expandable", "invoice-period-order", "group-order"])
-            ])
-          ])
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$c = { class: "flex gap-4" };
-const _hoisted_2$6 = { class: "flex gap-2 items-center" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "PricingClauseChip",
-  props: {
-    iconName: {},
-    chipColor: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createVNode(_sfc_main$w, { color: __props.chipColor }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_2$6, [
-              createVNode(_sfc_main$r, {
-                icon: __props.iconName,
-                size: "xs"
-              }, null, 8, ["icon"]),
-              createElementVNode("span", null, [
-                renderSlot(_ctx.$slots, "chip-content")
-              ])
-            ])
-          ]),
-          _: 3
-        }, 8, ["color"]),
-        renderSlot(_ctx.$slots, "chip-postfix")
-      ]);
-    };
-  }
-});
-const _hoisted_1$b = { class: "flex flex-col gap-2" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "InvoicePricingClauseChip",
-  props: {
-    clauseType: {},
-    priceDetailsBand: {},
-    invoiceLineDescription: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("span", null, toDisplayString(__props.invoiceLineDescription), 1),
-        __props.clauseType === "DISCOUNT" && __props.priceDetailsBand ? (openBlock(), createBlock(unref(_sfc_main$f), {
-          key: 0,
-          "icon-name": "south_east",
-          "chip-color": "yellow"
-        }, createSlots({ _: 2 }, [
-          __props.priceDetailsBand.amount ? {
-            name: "chip-content",
-            fn: withCtx(() => [
-              createTextVNode(toDisplayString(unref(intl).$t(
-                {
-                  id: "invoice.amount_discount",
-                  defaultMessage: "{amount} discount",
-                  description: "Represents a certain amount of discount, where {amount} is replaced with the amount"
-                },
-                {
-                  amount: unref(formatAmount)(__props.priceDetailsBand.amount)
-                }
-              ).toUpperCase()), 1)
-            ]),
-            key: "0"
-          } : __props.priceDetailsBand.percentage ? {
-            name: "chip-content",
-            fn: withCtx(() => [
-              createTextVNode(toDisplayString(unref(intl).$t(
-                {
-                  id: "invoice.percentage_discount",
-                  defaultMessage: "{percentage}% discount",
-                  description: "Represents a certain percentage of discount, where {percentage} is replaced with the percentage (number only)"
-                },
-                {
-                  percentage: __props.priceDetailsBand.percentage ?? "0"
-                }
-              ).toUpperCase()), 1)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1024)) : __props.clauseType === "ADJUSTMENT" ? (openBlock(), createBlock(unref(_sfc_main$f), {
-          key: 1,
-          "icon-name": "info",
-          "chip-color": "yellow"
-        }, {
-          "chip-content": withCtx(() => [
-            createTextVNode(toDisplayString(unref(intl).$t({
-              id: "invoice.adjustment_chip_body",
-              defaultMessage: "Adjustment",
-              description: "Used on invoice lines to mark as adjusted"
-            }).toUpperCase()), 1)
-          ]),
-          _: 1
-        })) : __props.clauseType === "MARKUP" ? (openBlock(), createBlock(unref(_sfc_main$f), {
-          key: 2,
-          "icon-name": "north_east",
-          "chip-color": "teal-light"
-        }, {
-          "chip-content": withCtx(() => {
-            var _a;
-            return [
-              createTextVNode(toDisplayString(unref(intl).$t(
-                {
-                  id: "invoice.markup_percentage",
-                  defaultMessage: "{percentage}% markup",
-                  description: "Markup percentage, where {percentage} is replaced with the percentage (number only)"
-                },
-                { percentage: ((_a = __props.priceDetailsBand) == null ? void 0 : _a.percentage) ?? "0" }
-              ).toUpperCase()), 1)
-            ];
-          }),
-          _: 1
-        })) : __props.clauseType === "COMMITMENT" ? (openBlock(), createBlock(unref(_sfc_main$f), {
-          key: 3,
-          "icon-name": "sell",
-          "chip-color": "orange"
-        }, {
-          "chip-content": withCtx(() => [
-            createTextVNode(toDisplayString(unref(intl).$t({
-              id: "invoice.commitment",
-              defaultMessage: "commitment",
-              description: "Used on invoice lines to mark as commitment"
-            }).toUpperCase()), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const _hoisted_1$a = { class: "items-left flex flex-col gap-1 leading-none" };
-const _hoisted_2$5 = { class: "flex items-center" };
-const _hoisted_3$4 = {
-  key: 0,
-  class: "ml-1 text-xs text-gray-400"
-};
-const _hoisted_4$4 = { key: 0 };
-const _hoisted_5$4 = {
-  key: 1,
-  class: "text-xs text-gray-400"
-};
-const _hoisted_6$3 = {
-  key: 2,
-  class: "text-xs text-gray-400"
-};
-const _hoisted_7$2 = { class: "text-[9pt] text-slate-600" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceLineRow",
-  props: {
-    data: {},
-    isLast: { type: Boolean },
-    periodOrder: {},
-    groupOrder: {},
-    groupType: {},
-    isExpanded: { type: Boolean }
-  },
-  setup(__props) {
-    const { $t } = useIntl();
-    const props = __props;
-    const formattedTier = (band) => {
-      var _a, _b;
-      if (!band) return "";
-      let lowerBound = "0";
-      let topBound = " +";
-      if (band.tier_lower_bound && "number" in band.tier_lower_bound) {
-        lowerBound = ((_a = band.tier_lower_bound) == null ? void 0 : _a.number) ?? "0";
-      } else if (band.tier_lower_bound && "amount" in band.tier_lower_bound) {
-        const { quantity, currency } = band.tier_lower_bound.amount;
-        lowerBound = `${currency} ${quantity ?? 0}`;
-      }
-      if (band.tier_top_bound && "number" in band.tier_top_bound) {
-        topBound = ` - ${(_b = band.tier_top_bound) == null ? void 0 : _b.number}`;
-      } else if (band.tier_top_bound && "amount" in band.tier_top_bound) {
-        const { quantity, currency } = band.tier_top_bound.amount;
-        topBound = ` - ${currency} ${quantity}`;
-      }
-      return lowerBound + topBound;
-    };
-    const includedVolumeDetails = computed(() => {
-      var _a;
-      return (_a = props.data.details) == null ? void 0 : _a.included_volume_details;
-    });
-    const invoiceLineName = computed(() => {
-      var _a, _b;
-      if ((_a = props.data) == null ? void 0 : _a.product_items) {
-        return getComposedString(props.data.product_items.map((item) => item.name));
-      }
-      return ((_b = props.data) == null ? void 0 : _b.description) ?? "N/A";
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$m, { class: "align-top" }, {
-          default: withCtx(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
-            return [
-              createElementVNode("div", _hoisted_1$a, [
-                createElementVNode("div", null, [
-                  __props.data.sub_lines ? (openBlock(), createBlock(_sfc_main$r, {
-                    key: 0,
-                    icon: "keyboard_arrow_down",
-                    size: "md",
-                    class: normalizeClass(["absolute -translate-x-7 -translate-y-2 text-slate-400", {
-                      "-rotate-90": !__props.isExpanded
-                    }])
-                  }, null, 8, ["class"])) : createCommentVNode("", true),
-                  createElementVNode("div", _hoisted_2$5, [
-                    renderSlot(_ctx.$slots, "invoice-line-prefix", {
-                      lineOrder: __props.data.line_order,
-                      periodOrder: __props.periodOrder,
-                      groupOrder: __props.groupOrder
-                    }),
-                    ["PRICING", "REVENUE", "ONE_OFF"].includes(__props.data.type) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createTextVNode(toDisplayString(invoiceLineName.value) + " ", 1),
-                      __props.data.type === "ONE_OFF" && __props.groupType !== "ONE_OFF" ? (openBlock(), createElementBlock("div", _hoisted_3$4, toDisplayString(unref(formatEnum)(__props.data.type)), 1)) : createCommentVNode("", true)
-                    ], 64)) : (openBlock(), createBlock(_sfc_main$e, {
-                      key: 1,
-                      "invoice-line-description": invoiceLineName.value,
-                      "clause-type": __props.data.type,
-                      "price-details-band": (_a = __props.data.details) == null ? void 0 : _a.band
-                    }, null, 8, ["invoice-line-description", "clause-type", "price-details-band"]))
-                  ])
-                ]),
-                ["TIERED", "STAIR_STEP", "TOP_TIERED"].includes(__props.data.pricing_type) && !includedVolumeDetails.value && ((_b = __props.data.details) == null ? void 0 : _b.band) ? (openBlock(), createElementBlock("div", _hoisted_4$4, toDisplayString(formattedTier((_c = __props.data.details) == null ? void 0 : _c.band)), 1)) : createCommentVNode("", true),
-                ((_e = (_d = __props.data.details) == null ? void 0 : _d.split_pricing) == null ? void 0 : _e.meter_properties) ? (openBlock(), createElementBlock("span", _hoisted_5$4, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList((_g = (_f = __props.data.details) == null ? void 0 : _f.split_pricing) == null ? void 0 : _g.meter_properties, (meterProperty, index) => {
-                    return openBlock(), createElementBlock(Fragment, null, [
-                      createTextVNode(toDisplayString(meterProperty.meter_property.name) + ": " + toDisplayString(meterProperty.value), 1),
-                      index < __props.data.details.split_pricing.meter_properties.length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString(", "))
-                      ], 64)) : createCommentVNode("", true)
-                    ], 64);
-                  }), 256))
-                ])) : createCommentVNode("", true),
-                ((_h = __props.data.conditions) == null ? void 0 : _h.name) || ((_i = __props.data.conditions) == null ? void 0 : _i.meter_properties) ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
-                  __props.data.conditions.name ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createTextVNode(toDisplayString(__props.data.conditions.name), 1)
-                  ], 64)) : __props.data.conditions.meter_properties ? (openBlock(), createBlock(unref(_sfc_main$u), {
-                    key: 1,
-                    comparators: __props.data.conditions.meter_properties
-                  }, null, 8, ["comparators"])) : createCommentVNode("", true)
-                ])) : createCommentVNode("", true)
-              ]),
-              createElementVNode("span", _hoisted_7$2, [
-                ((_j = __props.data.details) == null ? void 0 : _j.price_bound) === "BELOW_MINIMUM_AMOUNT" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice.line.band_minimum_amount",
-                    defaultMessage: "Band minimum amount",
-                    description: "Minimum amount specified in a band"
-                  })) + " ", 1),
-                  ((_k = __props.data.details.band) == null ? void 0 : _k.minimum_amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 0,
-                    value: __props.data.details.band.minimum_amount
-                  }, null, 8, ["value"])) : createCommentVNode("", true)
-                ], 64)) : ((_l = __props.data.details) == null ? void 0 : _l.price_bound) === "NOT_HIT" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice.line.price_bound_within_bounds",
-                    defaultMessage: "Within bounds",
-                    description: "Label used when min and max bounds are specified but reached"
-                  })), 1)
-                ], 64)) : ((_m = __props.data.details) == null ? void 0 : _m.price_bound) === "ABOVE_MAXIMUM_AMOUNT" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice.line.price_bound_maximum_amount",
-                    defaultMessage: "Maximum amount",
-                    description: "Minimum amount specified in a band"
-                  })) + " ", 1),
-                  ((_n = __props.data.details.band) == null ? void 0 : _n.maximum_amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 0,
-                    value: __props.data.details.band.maximum_amount
-                  }, null, 8, ["value"])) : createCommentVNode("", true)
-                ], 64)) : ((_o = __props.data.details) == null ? void 0 : _o.price_bound) === "BELOW_MINIMUM_NUMBER" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice.line.band_minimum_number",
-                    defaultMessage: "Minimum number",
-                    description: "Minimum number of units specified in a band"
-                  })) + " " + toDisplayString((_p = __props.data.details.band) == null ? void 0 : _p.minimum_number), 1)
-                ], 64)) : ((_q = __props.data.details) == null ? void 0 : _q.price_bound) === "ABOVE_MAXIMUM_NUMBER" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice.line.band_maximum_number",
-                    defaultMessage: "Maximum number",
-                    description: "Maximum number of units specified in a band"
-                  })) + " " + toDisplayString((_r = __props.data.details.band) == null ? void 0 : _r.maximum_number), 1)
-                ], 64)) : createCommentVNode("", true)
-              ])
-            ];
-          }),
-          _: 3
-        }),
-        renderSlot(_ctx.$slots, "line-content", {
-          details: __props.data.details
-        })
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$9 = {
-  key: 4,
-  class: "text-xs text-gray-400"
-};
-const _hoisted_2$4 = {
-  key: 1,
-  class: "tabular-nums"
-};
-const _hoisted_3$3 = { class: "text-2xs text-gray-500" };
-const _hoisted_4$3 = {
-  key: 0,
-  class: "flex justify-end"
-};
-const _hoisted_5$3 = { class: "flex gap-1 items-center justify-end" };
-const _hoisted_6$2 = {
-  key: 0,
-  class: "text-2xs text-gray-500 tabular-nums"
-};
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceRowContent",
-  props: {
-    pricingType: {},
-    details: {},
-    taxCategories: {},
-    amountType: {},
-    hideTaxDetails: { type: Boolean }
-  },
-  setup(__props) {
-    const intl = useIntl();
-    const props = __props;
-    const includedVolumeDetails = computed(() => {
-      var _a;
-      return (_a = props.details) == null ? void 0 : _a.included_volume_details;
-    });
-    const availableIncludedVolume = computed(
-      () => {
-        var _a;
-        return (_a = includedVolumeDetails.value) == null ? void 0 : _a.available_included_volume;
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$m, {
-          number: "",
-          class: "align-top"
-        }, {
-          default: withCtx(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-            return [
-              __props.pricingType !== "PASS_THROUGH" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                ((_a = __props.details) == null ? void 0 : _a.price_bound) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  ((_b = __props.details) == null ? void 0 : _b.price_bound) === "BELOW_MINIMUM_AMOUNT" || ((_c = __props.details) == null ? void 0 : _c.price_bound) === "ABOVE_MAXIMUM_AMOUNT" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createTextVNode(toDisplayString((_d = __props.details) == null ? void 0 : _d.meter_value.count), 1)
-                  ], 64)) : ((_e = __props.details) == null ? void 0 : _e.price_bound) === "NOT_HIT" && "amount" in __props.details.meter_value && ((_g = (_f = __props.details) == null ? void 0 : _f.meter_value) == null ? void 0 : _g.amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 1,
-                    value: (_i = (_h = __props.details) == null ? void 0 : _h.meter_value) == null ? void 0 : _i.amount
-                  }, null, 8, ["value"])) : ((_j = __props.details) == null ? void 0 : _j.price_bound) === "NOT_HIT" && "number" in __props.details.meter_value && ((_l = (_k = __props.details) == null ? void 0 : _k.meter_value) == null ? void 0 : _l.number) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                    createTextVNode(toDisplayString((_n = (_m = __props.details) == null ? void 0 : _m.meter_value) == null ? void 0 : _n.number), 1)
-                  ], 64)) : ((_o = __props.details) == null ? void 0 : _o.price_bound) === "RATIO" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                    createTextVNode(toDisplayString((_p = __props.details) == null ? void 0 : _p.meter_value.number), 1)
-                  ], 64)) : ((_q = __props.details) == null ? void 0 : _q.price_bound) === "BELOW_MINIMUM_NUMBER" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
-                    createTextVNode(toDisplayString((_s = (_r = __props.details) == null ? void 0 : _r.band) == null ? void 0 : _s.minimum_number), 1)
-                  ], 64)) : ((_t = __props.details) == null ? void 0 : _t.price_bound) === "ABOVE_MAXIMUM_NUMBER" ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [
-                    createTextVNode(toDisplayString((_v = (_u = __props.details) == null ? void 0 : _u.band) == null ? void 0 : _v.maximum_number), 1)
-                  ], 64)) : createCommentVNode("", true)
-                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  ((_w = __props.details) == null ? void 0 : _w.meter_value) && "number" in __props.details.meter_value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createTextVNode(toDisplayString(__props.details.meter_value.number), 1)
-                  ], 64)) : ((_x = __props.details) == null ? void 0 : _x.price_bound) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createTextVNode(toDisplayString(__props.details.total_count), 1)
-                  ], 64)) : ((_y = __props.details) == null ? void 0 : _y.meter_value) && "amount" in __props.details.meter_value ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 2,
-                    value: __props.details.meter_value.amount
-                  }, null, 8, ["value"])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                    createTextVNode("1")
-                  ], 64)),
-                  availableIncludedVolume.value ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-                    availableIncludedVolume.value.type === "AMOUNT" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createVNode(_sfc_main$v, {
-                        value: availableIncludedVolume.value.amount
-                      }, null, 8, ["value"]),
-                      createTextVNode(" " + toDisplayString(unref(intl).$t({
-                        id: "invoice.line.included",
-                        defaultMessage: "included",
-                        description: "Used to specify an included amount. Should be lowercase."
-                      })), 1)
-                    ], 64)) : availableIncludedVolume.value.type === "NUMBER" ? (openBlock(), createElementBlock("span", _hoisted_2$4, toDisplayString(availableIncludedVolume.value.number) + " " + toDisplayString(unref(intl).$t({
-                      id: "invoice.line.units_included",
-                      defaultMessage: "units included",
-                      description: "Used to specify an included units. Should be lowercase."
-                    })), 1)) : createCommentVNode("", true)
-                  ])) : createCommentVNode("", true)
-                ], 64))
-              ], 64)) : createCommentVNode("", true)
-            ];
-          }),
-          _: 1
-        }),
-        __props.pricingType === "PASS_THROUGH" ? (openBlock(), createBlock(_sfc_main$m, {
-          key: 0,
-          class: "align-top text-right"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(intl).$t({
-              id: "invoice.line.pass_through",
-              defaultMessage: "Pass through",
-              description: "Name of the pass through pricing type"
-            })), 1)
-          ]),
-          _: 1
-        })) : (openBlock(), createBlock(_sfc_main$m, {
-          key: 1,
-          number: "",
-          class: "align-top"
-        }, {
-          default: withCtx(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-            return [
-              ((_a = __props.details) == null ? void 0 : _a.price_bound) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                ((_b = __props.details) == null ? void 0 : _b.price_bound) === "BELOW_MINIMUM_AMOUNT" && ((_d = (_c = __props.details) == null ? void 0 : _c.band) == null ? void 0 : _d.minimum_amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                  key: 0,
-                  value: __props.details.band.minimum_amount
-                }, null, 8, ["value"])) : ((_e = __props.details) == null ? void 0 : _e.price_bound) === "ABOVE_MAXIMUM_AMOUNT" && ((_g = (_f = __props.details) == null ? void 0 : _f.band) == null ? void 0 : _g.maximum_amount) ? (openBlock(), createBlock(_sfc_main$v, {
-                  key: 1,
-                  value: __props.details.band.maximum_amount
-                }, null, 8, ["value"])) : ["NOT_HIT", "RATIO", "BELOW_MINIMUM_NUMBER", "ABOVE_MAXIMUM_NUMBER"].includes(
-                  (_h = __props.details) == null ? void 0 : _h.price_bound
-                ) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                  ((_i = __props.details) == null ? void 0 : _i.band) && __props.details.band.amount ? (openBlock(), createBlock(_sfc_main$v, {
-                    key: 0,
-                    value: __props.details.band.amount
-                  }, null, 8, ["value"])) : createCommentVNode("", true),
-                  ((_j = __props.details) == null ? void 0 : _j.band) && "percentage" in __props.details.band ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createTextVNode(toDisplayString(__props.details.band.percentage) + "% ", 1)
-                  ], 64)) : createCommentVNode("", true)
-                ], 64)) : createCommentVNode("", true)
-              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                ((_k = __props.details) == null ? void 0 : _k.band) && __props.details.band.amount ? (openBlock(), createBlock(_sfc_main$v, {
-                  key: 0,
-                  value: __props.details.band.amount
-                }, null, 8, ["value"])) : createCommentVNode("", true),
-                ((_l = __props.details) == null ? void 0 : _l.band) && "percentage" in __props.details.band ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(__props.details.band.percentage) + "% ", 1)
-                ], 64)) : createCommentVNode("", true)
-              ], 64))
-            ];
-          }),
-          _: 1
-        })),
-        createVNode(_sfc_main$m, {
-          number: "",
-          class: "align-top"
-        }, {
-          default: withCtx(() => [
-            !__props.hideTaxDetails ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.taxCategories, (taxCategory, taxCategoryIndex) => {
-              return openBlock(), createElementBlock("div", {
-                key: taxCategoryIndex,
-                class: "tabular-nums"
-              }, [
-                createElementVNode("div", null, toDisplayString(taxCategory.percentage) + "%", 1),
-                createElementVNode("div", _hoisted_3$3, [
-                  createVNode(_sfc_main$v, {
-                    value: taxCategory.tax_amount
-                  }, null, 8, ["value"])
-                ])
-              ]);
-            }), 128)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }),
-        createVNode(_sfc_main$m, {
-          number: "",
-          class: "align-top"
-        }, {
-          default: withCtx(() => {
-            var _a, _b, _c, _d;
-            return [
-              ((_b = (_a = __props.details) == null ? void 0 : _a.amount) == null ? void 0 : _b.currency) && ((_d = (_c = __props.details) == null ? void 0 : _c.amount) == null ? void 0 : _d.quantity) ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.taxCategories, (taxCategory, taxCategoryIndex) => {
-                  var _a2;
-                  return openBlock(), createElementBlock("div", {
-                    key: taxCategoryIndex,
-                    class: "inline-block"
-                  }, [
-                    createElementVNode("div", _hoisted_5$3, [
-                      createVNode(_sfc_main$v, {
-                        value: __props.details.amount
-                      }, null, 8, ["value"]),
-                      ((_a2 = __props.details) == null ? void 0 : _a2.pricing_amount.quantity) !== __props.details.amount.quantity ? (openBlock(), createBlock(_sfc_main$x, {
-                        key: 0,
-                        placement: "top-end"
-                      }, {
-                        tooltip: withCtx(() => [
-                          createVNode(TooltipContent, null, {
-                            default: withCtx(() => [
-                              createVNode(_sfc_main$y, null, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(intl).$t({
-                                    id: "invoice.line.original_currency",
-                                    defaultMessage: "Original currency",
-                                    description: "Original currency"
-                                  })) + " ", 1),
-                                  createVNode(_sfc_main$v, {
-                                    value: __props.details.pricing_amount,
-                                    class: "font-semibold"
-                                  }, null, 8, ["value"])
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        default: withCtx(() => [
-                          createVNode(_sfc_main$r, {
-                            icon: "info",
-                            size: "2xs"
-                          })
-                        ]),
-                        _: 1
-                      })) : createCommentVNode("", true)
-                    ]),
-                    !__props.hideTaxDetails ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
-                      __props.amountType === "INCLUDING_TAX" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString(unref(intl).$t({
-                          id: "invoice.line.excl.tax",
-                          defaultMessage: "Excl. tax",
-                          description: "Value excludes tax"
-                        })) + " ", 1),
-                        createVNode(_sfc_main$v, {
-                          value: taxCategory.base_amount
-                        }, null, 8, ["value"])
-                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                        createTextVNode(toDisplayString(unref(intl).$t({
-                          id: "invoice.line.incl.tax",
-                          defaultMessage: "Incl. tax",
-                          description: "Value includes tax"
-                        })) + " ", 1),
-                        createVNode(_sfc_main$v, {
-                          value: taxCategory.total_amount
-                        }, null, 8, ["value"])
-                      ], 64))
-                    ])) : createCommentVNode("", true)
-                  ]);
-                }), 128)),
-                renderSlot(_ctx.$slots, "one-off-line-context-menu")
-              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createTextVNode("-")
-              ], 64))
-            ];
-          }),
-          _: 3
-        })
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$8 = ["tabindex", "onClick"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceLineGroup",
-  props: {
-    group: {},
-    startDate: {},
-    endDate: {},
-    total: {},
-    amountType: {},
-    invoicePeriodOrder: {},
-    processingOnlyCustomers: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const sortedLines = computed(
-      () => {
-        var _a;
-        return (_a = [...props.group.lines ?? []]) == null ? void 0 : _a.sort((a, b) => a.line_order - b.line_order);
-      }
-    );
-    const intl = useIntl();
-    const { getIsOpen, toggle } = useToggleList();
-    const toggleLine = (groupOrder, invoiceLineOrder) => {
-      toggle(formatIndex(groupOrder, invoiceLineOrder));
-    };
-    const formatIndex = (rootIndex, index) => `${rootIndex}-line-${index}`;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createVNode(InvoiceTable, null, {
-          default: withCtx(() => [
-            createElementVNode("tr", null, [
-              createVNode(_sfc_main$l, {
-                left: "",
-                class: "text-gray-400 w-1/5"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.table_header.unit",
-                    defaultMessage: "Unit",
-                    description: "Table header for the column containing the number of units of invoice groups"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$l, {
-                right: "",
-                class: "text-gray-400 w-1/5"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.table_header.quantity",
-                    defaultMessage: "Quantity",
-                    description: "Table header for quantity column"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$l, {
-                right: "",
-                class: "text-gray-400 w-1/5"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.table_header.price",
-                    defaultMessage: "Price",
-                    description: "Table header for the column containing the number of units of invoice groups"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$l, {
-                right: "",
-                class: "text-gray-400 w-1/5"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.table_header.tax_rate",
-                    defaultMessage: "Tax rate",
-                    description: "Table header for the column containing the tax percentage of invoice groups"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$l, {
-                right: "",
-                class: "text-gray-400 w-1/5"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.table_header.sub_total",
-                    defaultMessage: "Subtotal",
-                    description: "Table header for the column containing the subtotal for invoices"
-                  })), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(sortedLines.value, (line, i) => {
-              return openBlock(), createElementBlock(Fragment, { key: i }, [
-                createElementVNode("tr", {
-                  tabindex: line.sub_lines ? 0 : void 0,
-                  class: normalizeClass(["group", { "cursor-pointer": line.sub_lines, "border-t": i !== 0 }]),
-                  onClick: ($event) => toggleLine(__props.group.group_order, line["line_order"])
-                }, [
-                  (openBlock(), createBlock(_sfc_main$d, {
-                    key: i,
-                    data: line,
-                    "is-first-in-group": i === 0,
-                    "period-order": __props.invoicePeriodOrder,
-                    "group-order": __props.group.group_order,
-                    "is-last": i === sortedLines.value.length - 1,
-                    "group-type": __props.group.type,
-                    "is-expanded": unref(getIsOpen)(formatIndex(__props.group.group_order, line["line_order"]))
-                  }, {
-                    "invoice-line-prefix": withCtx((linePrefixProps) => [
-                      renderSlot(_ctx.$slots, "invoice-line-prefix", mergeProps({ ref_for: true }, linePrefixProps))
-                    ]),
-                    "line-content": withCtx((lineContentProps) => [
-                      createVNode(_sfc_main$c, {
-                        details: lineContentProps.details,
-                        "pricing-type": line.pricing_type,
-                        "tax-categories": line.tax_categories,
-                        "amount-type": __props.amountType
-                      }, createSlots({ _: 2 }, [
-                        line.type === "ONE_OFF" ? {
-                          name: "one-off-line-context-menu",
-                          fn: withCtx((oneOffGroupProps) => [
-                            renderSlot(_ctx.$slots, "one-off-line-context-menu", mergeProps({ ref_for: true }, oneOffGroupProps, {
-                              lineOrder: line.line_order
-                            }))
-                          ]),
-                          key: "0"
-                        } : void 0
-                      ]), 1032, ["details", "pricing-type", "tax-categories", "amount-type"])
-                    ]),
-                    _: 2
-                  }, 1032, ["data", "is-first-in-group", "period-order", "group-order", "is-last", "group-type", "is-expanded"]))
-                ], 10, _hoisted_1$8),
-                createVNode(_sfc_main$k, {
-                  ref_for: true,
-                  ref: formatIndex(__props.group.group_order, line["line_order"]),
-                  "sub-lines": line.sub_lines ?? [],
-                  "processing-only-customers": __props.processingOnlyCustomers,
-                  "line-order": line["line_order"],
-                  "is-open": unref(getIsOpen)(formatIndex(__props.group.group_order, line["line_order"])),
-                  "period-order": __props.invoicePeriodOrder,
-                  "group-order": __props.group.group_order
-                }, {
-                  "invoice-line-prefix": withCtx((linePrefixProps) => [
-                    renderSlot(_ctx.$slots, "invoice-line-prefix", mergeProps({ ref_for: true }, linePrefixProps))
-                  ]),
-                  "subline-content": withCtx((sublineContentProps) => [
-                    createVNode(_sfc_main$c, {
-                      details: sublineContentProps.details,
-                      "hide-tax-details": sublineContentProps.hideTaxDetails,
-                      "pricing-type": line.pricing_type,
-                      "tax-categories": line.tax_categories,
-                      "amount-type": __props.amountType
-                    }, null, 8, ["details", "hide-tax-details", "pricing-type", "tax-categories", "amount-type"])
-                  ]),
-                  _: 2
-                }, 1032, ["sub-lines", "processing-only-customers", "line-order", "is-open", "period-order", "group-order"])
-              ], 64);
-            }), 128))
-          ]),
-          _: 3
-        })
-      ]);
-    };
-  }
-});
-const _hoisted_1$7 = ["tabindex"];
-const _hoisted_2$3 = {
-  key: 2,
-  class: "inline-flex justify-center items-center w-3.5 h-3.5 rounded-full bg-blue-100 text-blue-600 text-2xs ml-1 font-bold"
-};
-const _hoisted_3$2 = { key: 0 };
-const _hoisted_4$2 = {
-  colspan: "2",
-  class: "p-0"
-};
-const _hoisted_5$2 = { class: "px-9 py-3 -mx-9 bg-gray-50 text-xs" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceGroupRevenue",
-  props: {
-    group: {},
-    expandedItems: {},
-    handleToggleItems: { type: Function },
-    formatIndex: { type: Function },
-    invoicePeriodOrder: {},
-    groupOrder: {},
-    isExpandable: { type: Boolean },
-    amountType: {},
-    processingOnlyCustomers: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("tr", {
-          class: normalizeClass(["border-t", { "cursor-pointer": __props.isExpandable }]),
-          tabindex: __props.isExpandable ? 0 : void 0,
-          onClick: _cache[0] || (_cache[0] = ($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder))),
-          onKeyup: [
-            _cache[1] || (_cache[1] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["enter"])),
-            _cache[2] || (_cache[2] = withKeys(($event) => __props.handleToggleItems(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)), ["space"]))
-          ]
-        }, [
-          createVNode(_sfc_main$m, { class: "p-0" }, {
-            default: withCtx(() => {
-              var _a, _b, _c, _d;
-              return [
-                __props.isExpandable ? (openBlock(), createBlock(_sfc_main$r, {
-                  key: 0,
-                  icon: "keyboard_arrow_down",
-                  size: "md",
-                  class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                    "-rotate-90": !__props.expandedItems.includes(
-                      __props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)
-                    )
-                  }])
-                }, null, 8, ["class"])) : createCommentVNode("", true),
-                ((_a = __props.group.pricing) == null ? void 0 : _a.name) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(__props.group.pricing.name) + " ", 1),
-                  ((_b = __props.group.products) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createTextVNode(" - ")
-                  ], 64)) : createCommentVNode("", true)
-                ], 64)) : createCommentVNode("", true),
-                createTextVNode(" " + toDisplayString(unref(getComposedString)(((_c = __props.group.products) == null ? void 0 : _c.map((item) => item.name)) ?? [])) + " ", 1),
-                __props.isExpandable ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString((_d = __props.group.lines) == null ? void 0 : _d.length), 1)) : createCommentVNode("", true)
-              ];
-            }),
-            _: 1
-          }),
-          createVNode(_sfc_main$m, { number: "" }, {
-            default: withCtx(() => [
-              __props.amountType === "INCLUDING_TAX" ? (openBlock(), createBlock(_sfc_main$v, {
-                key: 0,
-                value: __props.group.amount_including_tax
-              }, null, 8, ["value"])) : (openBlock(), createBlock(_sfc_main$v, {
-                key: 1,
-                value: __props.group.amount_excluding_tax
-              }, null, 8, ["value"]))
-            ]),
-            _: 1
-          })
-        ], 42, _hoisted_1$7),
-        __props.expandedItems.includes(__props.formatIndex(__props.invoicePeriodOrder, __props.groupOrder)) ? (openBlock(), createElementBlock("tr", _hoisted_3$2, [
-          createElementVNode("td", _hoisted_4$2, [
-            createElementVNode("div", _hoisted_5$2, [
-              createVNode(_sfc_main$b, {
-                "invoice-period-order": __props.invoicePeriodOrder,
-                "start-date": __props.group.start_at,
-                "end-date": __props.group.end_at,
-                total: __props.group.amount_excluding_tax,
-                group: __props.group,
-                "amount-type": __props.amountType,
-                "processing-only-customers": __props.processingOnlyCustomers
-              }, {
-                "invoice-line-prefix": withCtx((linePrefixProps) => [
-                  renderSlot(_ctx.$slots, "invoice-line-prefix", normalizeProps(guardReactiveProps(linePrefixProps)))
-                ]),
-                "one-off-line-context-menu": withCtx((oneOffGroupProps) => [
-                  renderSlot(_ctx.$slots, "one-off-line-context-menu", mergeProps(oneOffGroupProps, { groupOrder: __props.groupOrder }))
-                ]),
-                _: 3
-              }, 8, ["invoice-period-order", "start-date", "end-date", "total", "group", "amount-type", "processing-only-customers"])
-            ])
-          ])
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$6 = { class: "flex items-center justify-between md:py-2" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceHeader",
-  props: {
-    invoice: {},
-    paymentAttempts: {},
-    downloadService: {},
-    showDownloadButton: { type: Boolean },
-    variant: { default: "internal" }
-  },
-  setup(__props) {
-    const props = __props;
-    const { $t, formatDate } = useIntl();
-    const lastAuthorizedPaymentAttempt = computed(
-      () => props.paymentAttempts.findLast((payment) => payment.result === "AUTHORIZED")
-    );
-    const dueDate = computed(
-      () => $t(
-        {
-          defaultMessage: "Due on {date}",
-          description: "Label for due date, where {date} gets replaced with the due date",
-          id: "invoice.due_on_label"
-        },
-        {
-          date: formatDate({
-            date: props.invoice.due_date,
-            format: "date",
-            offsetType: "offsetted",
-            timezone: props.invoice.customer.timezone
-          })
-        }
-      )
-    );
-    const invoiceDate = computed(
-      () => formatDate({
-        date: props.invoice.invoice_date,
-        format: "date",
-        offsetType: "offsetted",
-        timezone: props.invoice.customer.timezone
-      })
-    );
-    const title = computed(() => {
-      if (props.variant === "external") {
-        return invoiceDate.value;
-      }
-      return props.invoice.invoice_number || "N/A";
-    });
-    const paidOn = computed(() => {
-      if (!props.invoice.paid || !lastAuthorizedPaymentAttempt.value) {
-        return void 0;
-      }
-      return $t(
-        {
-          defaultMessage: "Paid on {date}",
-          description: "Label for payment date, where {date} gets replaced with the date",
-          id: "invoice.paid_on_label"
-        },
-        {
-          date: formatDate({
-            date: lastAuthorizedPaymentAttempt.value.created_at,
-            format: "date",
-            offsetType: "offsetted",
-            timezone: props.invoice.customer.timezone
-          })
-        }
-      );
-    });
-    const subTitle = computed(() => {
-      if (props.variant === "external") {
-        return [props.invoice.invoice_number, paidOn.value || dueDate.value].join(" - ");
-      }
-      return paidOn.value || dueDate.value;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createVNode(_sfc_main$z, { title: title.value }, {
-          suffix: withCtx(() => [
-            __props.invoice.paid ? (openBlock(), createBlock(_sfc_main$w, {
-              key: 0,
-              color: "green",
-              class: "ml-2"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref($t)({
-                  defaultMessage: "Paid",
-                  description: "The paid chip label text for a paid invoice",
-                  id: "invoice.paid_chip"
-                })), 1)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ]),
-          subTitle: withCtx(() => [
-            createVNode(_sfc_main$A, {
-              variant: "body-xs",
-              class: "flex gap-1"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(subTitle.value), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["title"]),
-        __props.showDownloadButton ? (openBlock(), createBlock(_sfc_main$p, {
-          key: 0,
-          size: "lg",
-          variant: "outline",
-          "download-service": __props.downloadService,
-          "mobile-icon-only": ""
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref($t)({
-              defaultMessage: "Download PDF",
-              description: "Title for button download pdf invoice",
-              id: "invoice.download_pdf_button"
-            })), 1)
-          ]),
-          _: 1
-        }, 8, ["download-service"])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-function toValue(r) {
-  return typeof r === "function" ? r() : unref(r);
-}
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-function useToggle(initialValue = false, options = {}) {
-  const {
-    truthyValue = true,
-    falsyValue = false
-  } = options;
-  const valueIsRef = isRef(initialValue);
-  const _value = ref(initialValue);
-  function toggle(value) {
-    if (arguments.length) {
-      _value.value = value;
-      return _value.value;
-    } else {
-      const truthy = toValue(truthyValue);
-      _value.value = _value.value === truthy ? toValue(falsyValue) : truthy;
-      return _value.value;
-    }
-  }
-  if (valueIsRef)
-    return toggle;
-  else
-    return [_value, toggle];
-}
-const _hoisted_1$5 = {
-  key: 0,
-  totals: "",
-  class: "border-t"
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceSummaryTotalExcludingTax",
-  props: {
-    baseAmount: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    return (_ctx, _cache) => {
-      return __props.baseAmount ? (openBlock(), createElementBlock("tr", _hoisted_1$5, [
-        createVNode(_sfc_main$m, null, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(intl).$t({
-              id: "invoice.table_header.total_excluding_taxes",
-              defaultMessage: "Total excluding taxes",
-              description: "Table row header for the total excluding taxes column in the invoice table"
-            })), 1)
-          ]),
-          _: 1
-        }),
-        createVNode(_sfc_main$m, { number: "" }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$v, { value: __props.baseAmount }, null, 8, ["value"])
-          ]),
-          _: 1
-        })
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$4 = {
-  key: 0,
-  class: "font-bold border-t"
-};
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceSummaryTotalIncludingTax",
-  props: {
-    totalAmount: {},
-    isCustomerFacing: { type: Boolean }
-  },
-  setup(__props) {
-    const intl = useIntl();
-    return (_ctx, _cache) => {
-      return __props.totalAmount ? (openBlock(), createElementBlock("tr", _hoisted_1$4, [
-        createVNode(_sfc_main$m, { class: "font-bold" }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.isCustomerFacing ? unref(intl).$t({
-              id: "invoice.table_header.total_including_taxes_customer_facing",
-              defaultMessage: "Total due today",
-              description: "Table row header for the total including taxes column in the invoice table for a customer facing component"
-            }) : unref(intl).$t({
-              id: "invoice.table_header.total_including_taxes",
-              defaultMessage: "Total including taxes",
-              description: "Table row header for the total including taxes column in the invoice table"
-            })), 1)
-          ]),
-          _: 1
-        }),
-        createVNode(_sfc_main$m, { number: "" }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$v, { value: __props.totalAmount }, null, 8, ["value"])
-          ]),
-          _: 1
-        })
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$3 = {
-  key: 0,
-  colspan: "4",
-  class: "p-0"
-};
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceTaxes",
-  props: {
-    taxCategories: {}
-  },
-  setup(__props) {
-    const intl = useIntl();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(InvoiceTable, { class: "table-fixed" }, {
-        default: withCtx(() => [
-          createElementVNode("tr", null, [
-            createVNode(_sfc_main$l, { left: "" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.tax type",
-                  defaultMessage: "Tax type",
-                  description: "Table header for the column containing the tax type"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, { right: "" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.base amount",
-                  defaultMessage: "Base amount",
-                  description: "Table header for the column containing the base amount"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, { right: "" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.tax_percentage",
-                  defaultMessage: "Percentage",
-                  description: "Table header for the column containing the tax percentage"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$l, { right: "" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(intl).$t({
-                  id: "invoice.table_header.tax amount",
-                  defaultMessage: "Tax amount",
-                  description: "Table header for the column containing the tax amount"
-                })), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.taxCategories, (taxCategory, taxCategoryIndex) => {
-            return openBlock(), createElementBlock("tr", { key: taxCategoryIndex }, [
-              taxCategory.rates ? (openBlock(), createElementBlock("td", _hoisted_1$3, [
-                createVNode(InvoiceTable, { class: "table-fixed" }, {
-                  default: withCtx(() => [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(taxCategory.rates, (rate, rateIndex) => {
-                      return openBlock(), createElementBlock("tr", { key: rateIndex }, [
-                        createVNode(_sfc_main$m, null, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(rate.name) + " (" + toDisplayString(taxCategory.category) + ") ", 1)
-                          ]),
-                          _: 2
-                        }, 1024),
-                        createVNode(_sfc_main$m, { number: "" }, {
-                          default: withCtx(() => [
-                            createVNode(_sfc_main$v, {
-                              value: taxCategory.base_amount
-                            }, null, 8, ["value"])
-                          ]),
-                          _: 2
-                        }, 1024),
-                        createVNode(_sfc_main$m, { number: "" }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(rate.percentage) + "%", 1)
-                          ]),
-                          _: 2
-                        }, 1024),
-                        createVNode(_sfc_main$m, { number: "" }, {
-                          default: withCtx(() => [
-                            createVNode(_sfc_main$v, {
-                              value: rate.tax_amount
-                            }, null, 8, ["value"])
-                          ]),
-                          _: 2
-                        }, 1024)
-                      ]);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1024)
-              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$m, null, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(taxCategory.name) + " (" + toDisplayString(taxCategory.category) + ") ", 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { number: "" }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$v, {
-                      value: taxCategory.base_amount
-                    }, null, 8, ["value"])
-                  ]),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { number: "" }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(taxCategory.percentage) + "%", 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                createVNode(_sfc_main$m, { number: "" }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$v, {
-                      value: taxCategory.tax_amount
-                    }, null, 8, ["value"])
-                  ]),
-                  _: 2
-                }, 1024)
-              ], 64))
-            ]);
-          }), 128))
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-const _hoisted_1$2 = { class: "flex justify-between items-start" };
-const _hoisted_2$2 = {
-  key: 0,
-  class: "max-h-9"
-};
-const _hoisted_3$1 = { class: "flex flex-col gap-2" };
-const _hoisted_4$1 = { key: 0 };
-const _hoisted_5$1 = ["tabindex"];
-const _hoisted_6$1 = {
-  key: 1,
-  class: "inline-flex justify-center items-center w-3.5 h-3.5 rounded-full bg-blue-100 text-blue-600 text-2xs ml-1 font-bold"
-};
-const _hoisted_7$1 = { key: 3 };
-const _hoisted_8 = {
-  colspan: "2",
-  class: "p-0"
-};
-const _hoisted_9 = { class: "px-9 py-3 -mx-9 bg-gray-50 text-xs" };
-const _hoisted_10 = ["tabindex", "onClick", "onKeyup"];
-const _hoisted_11 = {
-  key: 1,
-  class: "inline-flex justify-center items-center w-3.5 h-3.5 rounded-full bg-blue-100 text-blue-600 text-2xs ml-1 font-bold"
-};
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = {
-  colspan: "2",
-  class: "p-0"
-};
-const _hoisted_14 = { class: "px-9 py-3 -mx-9 bg-gray-50 text-xs" };
-const _hoisted_15 = {
-  key: 0,
-  class: "font-bold border-t"
-};
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "InvoiceSummary",
-  props: {
-    invoice: {},
-    isExpandable: { type: Boolean, default: false },
-    isInvoiceLineCreatable: { type: Boolean, default: false },
-    showRenderedServicesHeader: { type: Boolean, default: true },
-    isCustomerFacing: { type: Boolean }
-  },
-  setup(__props) {
-    const intl = useIntl();
-    const props = __props;
-    const [expandedItems, toggleItems] = useSimpleToggleList();
-    const [expandedDeductions, toggleDeductions] = useSimpleToggleList();
-    const [expandedTaxes, toggleTaxes] = useToggle();
-    const handleToggleItems = (...params) => {
-      if (!props.isExpandable) return;
-      toggleItems(...params);
-    };
-    const handleToggleDeductions = (index) => {
-      if (!props.isExpandable) return;
-      toggleDeductions(index);
-    };
-    const handleToggleTaxes = () => {
-      if (!props.invoice.tax_categories || !props.isExpandable) return;
-      toggleTaxes();
-    };
-    const formatIndex = (rootIndex, itemIndex) => +`${rootIndex}${itemIndex}`;
-    const getTitle = (invoicePeriod) => {
-      return intl.$t(
-        {
-          id: "invoice.service_period_heading",
-          defaultMessage: "Service period - {start_at} - {end_at}",
-          description: "Heading for rendered services where {start_at} is replaced for the start date and {end_at} for the end date in invoice summary"
-        },
-        {
-          start_at: intl.formatDate({
-            date: invoicePeriod.start_at,
-            format: "date",
-            timezone: formatTimezone(props.invoice.customer.timezone),
-            offsetType: "offsetted"
-          }),
-          end_at: intl.formatDate({
-            date: invoicePeriod.end_at,
-            format: "date",
-            timezone: formatTimezone(props.invoice.customer.timezone),
-            offsetType: "offsetted"
-          })
-        }
-      );
-    };
-    const getTableHeading = (invoiceGroupType) => {
-      switch (invoiceGroupType) {
-        case "PRICING":
-        case "REVENUE": {
-          return intl.$t({
-            id: "invoice.table_heading.products",
-            defaultMessage: "Products",
-            description: "Table heading for the column containing the products of the invoice"
-          });
-        }
-        case "COMMITMENT":
-          return intl.$t({
-            id: "invoice.table_heading.commitments",
-            defaultMessage: "Commitments",
-            description: "Table heading for the column containing the commitments of the invoice"
-          });
-        case "DISCOUNT":
-          return intl.$t({
-            id: "invoice.table_heading.discounts",
-            defaultMessage: "Discounts",
-            description: "Table heading for the column containing the discounts of the invoice"
-          });
-        case "MARKUP":
-          return intl.$t({
-            id: "invoice.table_heading.markups",
-            defaultMessage: "Markups",
-            description: "Table heading for the column containing the markups of the invoice"
-          });
-        case "ONE_OFF":
-          return intl.$t({
-            id: "invoice.table_heading.one_offs",
-            defaultMessage: "One-off's",
-            description: "Table heading for the column containing the one-offs of the invoice"
-          });
-      }
-    };
-    const getInvoiceGroupsByType = (invoicePeriod) => {
-      return invoicePeriod.groups.reduce(
-        (acc, invoiceGroup) => {
-          if (!(invoiceGroup.type in acc)) {
-            return { ...acc, [invoiceGroup.type]: [invoiceGroup] };
-          }
-          return {
-            ...acc,
-            [invoiceGroup.type]: [...acc[invoiceGroup.type], invoiceGroup]
-          };
-        },
-        {}
-      );
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$2, [
-          _ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
-            renderSlot(_ctx.$slots, "logo")
-          ])) : (openBlock(), createBlock(_sfc_main$z, {
-            key: 1,
-            title: unref(intl).$t({
-              id: "invoice.title",
-              defaultMessage: "Details",
-              description: "Title for the invoice summary"
-            }),
-            variant: "neutral",
-            icon: "draft"
-          }, null, 8, ["title"])),
-          _ctx.$slots.intro ? renderSlot(_ctx.$slots, "intro", { key: 2 }) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$1, [
-            ["ONE_OFF", "STANDARD", "ONE_OFF_CREDIT"].includes(__props.invoice.type) && ["DRAFT", "OPEN"].includes(__props.invoice.status) && __props.isInvoiceLineCreatable ? (openBlock(), createBlock(_sfc_main$q, {
-              key: 0,
-              to: { name: "invoice-add-line", params: { id: __props.invoice.id } },
-              class: "text-sm font-semibold"
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$r, {
-                  icon: "add",
-                  size: "md",
-                  class: "mr-1"
-                }),
-                createElementVNode("span", null, toDisplayString(unref(intl).$t({
-                  id: "invoice.add_invoice_line",
-                  defaultMessage: "Add invoice line",
-                  description: "Label for adding lines to an invoice"
-                })), 1)
-              ]),
-              _: 1
-            }, 8, ["to"])) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "child-customers-selector")
-          ])
-        ]),
-        _ctx.$slots.total ? renderSlot(_ctx.$slots, "total", { key: 0 }) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "notes"),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.invoice.periods, (invoicePeriod, invoicePeriodIndex) => {
-          return openBlock(), createElementBlock(Fragment, { key: invoicePeriodIndex }, [
-            __props.showRenderedServicesHeader ? (openBlock(), createBlock(_sfc_main$B, {
-              key: 0,
-              class: "mt-6"
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$A, {
-                  tag: "h2",
-                  variant: "caps-heading"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(getTitle(invoicePeriod)), 1)
-                  ]),
-                  _: 2
-                }, 1024)
-              ]),
-              _: 2
-            }, 1024)) : createCommentVNode("", true),
-            invoicePeriod.groups ? (openBlock(), createBlock(InvoiceTable, {
-              key: 1,
-              class: normalizeClass({ "mt-3": __props.showRenderedServicesHeader })
-            }, {
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(
-                  getInvoiceGroupsByType(invoicePeriod)
-                ), ([groupType, groups], index) => {
-                  return openBlock(), createElementBlock(Fragment, { key: groupType }, [
-                    index > 0 ? (openBlock(), createElementBlock("tr", _hoisted_4$1, [..._cache[0] || (_cache[0] = [
-                      createElementVNode("td", null, [
-                        createElementVNode("div", { class: "h-4" })
-                      ], -1)
-                    ])])) : createCommentVNode("", true),
-                    createElementVNode("tr", null, [
-                      createVNode(_sfc_main$l, {
-                        left: "",
-                        class: "text-gray-600"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(getTableHeading(groupType)), 1)
-                        ]),
-                        _: 2
-                      }, 1024),
-                      createVNode(_sfc_main$l, {
-                        right: "",
-                        class: "text-gray-600"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(unref(intl).$t({
-                            id: "invoice.amount_table_heading",
-                            defaultMessage: "Amount",
-                            description: "Table heading for the amount column in the invoice table"
-                          })), 1)
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(groups, (group, groupIndex) => {
-                      return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [
-                        groupType === "REVENUE" || groupType === "PRICING" || groupType === "ONE_OFF" ? (openBlock(), createBlock(_sfc_main$a, {
-                          key: 0,
-                          group,
-                          "expanded-items": unref(expandedItems),
-                          "handle-toggle-items": handleToggleItems,
-                          "is-expandable": __props.isExpandable,
-                          "format-index": formatIndex,
-                          "invoice-period-order": invoicePeriod.period_order,
-                          "group-order": group.group_order,
-                          "amount-type": __props.invoice.pricing_amount_type,
-                          "processing-only-customers": __props.invoice.processing_only_customers
-                        }, {
-                          "invoice-line-prefix": withCtx((linePrefixProps) => [
-                            renderSlot(_ctx.$slots, "invoice-line-prefix", mergeProps({ ref_for: true }, linePrefixProps))
-                          ]),
-                          "one-off-line-context-menu": withCtx((oneOffGroupProps) => [
-                            renderSlot(_ctx.$slots, "one-off-line-context-menu", mergeProps({ ref_for: true }, oneOffGroupProps, {
-                              periodOrder: invoicePeriod.period_order
-                            }))
-                          ]),
-                          _: 2
-                        }, 1032, ["group", "expanded-items", "is-expandable", "invoice-period-order", "group-order", "amount-type", "processing-only-customers"])) : groupType === "DISCOUNT" || groupType === "MARKUP" ? (openBlock(), createBlock(_sfc_main$g, {
-                          key: 1,
-                          group,
-                          "expanded-items": unref(expandedItems),
-                          "handle-toggle-items": handleToggleItems,
-                          "is-expandable": __props.isExpandable,
-                          "format-index": formatIndex,
-                          "invoice-period-order": invoicePeriod.period_order,
-                          "group-order": group.group_order,
-                          "amount-type": __props.invoice.pricing_amount_type,
-                          heading: groupType === "DISCOUNT" ? unref(intl).$t({
-                            id: "invoice.discounts_table_heading",
-                            defaultMessage: "Discounts",
-                            description: "Heading for discounts in the invoice table"
-                          }) : unref(intl).$t({
-                            id: "invoice.markups_table_heading",
-                            defaultMessage: "Markups",
-                            description: "Heading for markups in the invoice table"
-                          })
-                        }, {
-                          "invoice-line-prefix": withCtx((linePrefixProps) => [
-                            renderSlot(_ctx.$slots, "invoice-line-prefix", mergeProps({ ref_for: true }, linePrefixProps))
-                          ]),
-                          _: 3
-                        }, 8, ["group", "expanded-items", "is-expandable", "invoice-period-order", "group-order", "amount-type", "heading"])) : groupType === "COMMITMENT" ? (openBlock(), createBlock(_sfc_main$h, {
-                          key: 2,
-                          group,
-                          "expanded-items": unref(expandedItems),
-                          "handle-toggle-items": handleToggleItems,
-                          "is-expandable": __props.isExpandable,
-                          "format-index": formatIndex,
-                          "invoice-period-order": invoicePeriod.period_order,
-                          "group-order": group.group_order,
-                          "amount-type": __props.invoice.pricing_amount_type
-                        }, {
-                          "invoice-line-prefix": withCtx((linePrefixProps) => [
-                            renderSlot(_ctx.$slots, "invoice-line-prefix", mergeProps({ ref_for: true }, linePrefixProps))
-                          ]),
-                          _: 3
-                        }, 8, ["group", "expanded-items", "is-expandable", "invoice-period-order", "group-order", "amount-type"])) : createCommentVNode("", true)
-                      ], 64);
-                    }), 128))
-                  ], 64);
-                }), 128))
-              ]),
-              _: 2
-            }, 1032, ["class"])) : createCommentVNode("", true)
-          ], 64);
-        }), 128)),
-        __props.invoice.tax_summary ? (openBlock(), createBlock(InvoiceTable, {
-          key: 1,
-          class: "mt-6"
-        }, {
-          default: withCtx(() => [
-            createElementVNode("tr", null, [
-              createVNode(_sfc_main$l, {
-                left: "",
-                class: "text-gray-600"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.totals_table_heading",
-                    defaultMessage: "Totals",
-                    description: "Table heading for the totals column in the invoice table"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$l, {
-                right: "",
-                class: "text-gray-600"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.amount_table_heading",
-                    defaultMessage: "Amount",
-                    description: "Table heading for the amount column in the invoice table"
-                  })), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            __props.invoice.pricing_amount_type === "INCLUDING_TAX" ? (openBlock(), createBlock(_sfc_main$7, {
-              key: 0,
-              "total-amount": __props.invoice.tax_summary.total_amount,
-              "is-customer-facing": __props.isCustomerFacing
-            }, null, 8, ["total-amount", "is-customer-facing"])) : (openBlock(), createBlock(_sfc_main$8, {
-              key: 1,
-              "base-amount": __props.invoice.tax_summary.base_amount
-            }, null, 8, ["base-amount"])),
-            __props.invoice.tax_summary.tax_amount ? (openBlock(), createElementBlock("tr", {
-              key: 2,
-              class: normalizeClass([{ "cursor-pointer": __props.invoice.tax_categories && __props.isExpandable }, "border-t"]),
-              tabindex: __props.isExpandable ? 0 : void 0,
-              onClick: handleToggleTaxes,
-              onKeyup: [
-                withKeys(handleToggleTaxes, ["enter"]),
-                withKeys(handleToggleTaxes, ["space"])
-              ]
-            }, [
-              createVNode(_sfc_main$m, null, {
-                default: withCtx(() => [
-                  __props.isExpandable && __props.invoice.tax_categories && __props.invoice.tax_categories.length ? (openBlock(), createBlock(_sfc_main$r, {
-                    key: 0,
-                    icon: "keyboard_arrow_down",
-                    size: "md",
-                    class: normalizeClass(["-translate-x-7 absolute text-slate-400", { "-rotate-90": !unref(expandedTaxes) }])
-                  }, null, 8, ["class"])) : createCommentVNode("", true),
-                  createTextVNode(" " + toDisplayString(unref(intl).$t({
-                    id: "invoice.taxes_table_heading",
-                    defaultMessage: "Taxes",
-                    description: "Table heading for the taxes column in the invoice table"
-                  })) + " ", 1),
-                  __props.isExpandable && __props.invoice.tax_categories ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(__props.invoice.tax_categories.length), 1)) : createCommentVNode("", true)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$m, { number: "" }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$v, {
-                    value: __props.invoice.tax_summary.tax_amount
-                  }, null, 8, ["value"])
-                ]),
-                _: 1
-              })
-            ], 42, _hoisted_5$1)) : createCommentVNode("", true),
-            unref(expandedTaxes) && __props.invoice.tax_categories ? (openBlock(), createElementBlock("tr", _hoisted_7$1, [
-              createElementVNode("td", _hoisted_8, [
-                createElementVNode("div", _hoisted_9, [
-                  createVNode(_sfc_main$6, {
-                    "tax-categories": __props.invoice.tax_categories
-                  }, null, 8, ["tax-categories"])
-                ])
-              ])
-            ])) : createCommentVNode("", true),
-            __props.invoice.pricing_amount_type === "INCLUDING_TAX" ? (openBlock(), createBlock(_sfc_main$8, {
-              key: 4,
-              "base-amount": __props.invoice.tax_summary.base_amount
-            }, null, 8, ["base-amount"])) : (openBlock(), createBlock(_sfc_main$7, {
-              key: 5,
-              "total-amount": __props.invoice.tax_summary.total_amount
-            }, null, 8, ["total-amount"]))
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        !unref(isEmpty)(__props.invoice.closed_periods) ? (openBlock(), createBlock(InvoiceTable, {
-          key: 2,
-          class: "mt-6"
-        }, {
-          default: withCtx(() => [
-            createElementVNode("tr", null, [
-              createVNode(_sfc_main$l, {
-                left: "",
-                class: "text-gray-600"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.already_deducted_table_heading",
-                    defaultMessage: "Already deducted",
-                    description: "Table heading for the already deducted rows in the invoice table"
-                  })), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.invoice.closed_periods, (rootGroup, rootGroupIndex) => {
-              return openBlock(), createElementBlock(Fragment, { key: rootGroupIndex }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(rootGroup.groups, (group, groupIndex) => {
-                  return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [
-                    createElementVNode("tr", {
-                      class: normalizeClass(["border-t", { "pt-6": rootGroupIndex === 0, "cursor-pointer": __props.isExpandable }]),
-                      tabindex: __props.isExpandable ? 0 : void 0,
-                      onClick: ($event) => handleToggleDeductions(formatIndex(rootGroupIndex, groupIndex)),
-                      onKeyup: [
-                        withKeys(($event) => handleToggleDeductions(formatIndex(rootGroupIndex, groupIndex)), ["enter"]),
-                        withKeys(($event) => handleToggleDeductions(formatIndex(rootGroupIndex, groupIndex)), ["space"])
-                      ]
-                    }, [
-                      createVNode(_sfc_main$m, { class: "p-0" }, {
-                        default: withCtx(() => {
-                          var _a, _b;
-                          return [
-                            __props.isExpandable ? (openBlock(), createBlock(_sfc_main$r, {
-                              key: 0,
-                              icon: "keyboard_arrow_down",
-                              size: "md",
-                              class: normalizeClass(["-translate-x-7 absolute text-slate-400", {
-                                "-rotate-90": !unref(expandedDeductions).includes(
-                                  formatIndex(rootGroupIndex, groupIndex)
-                                )
-                              }])
-                            }, null, 8, ["class"])) : createCommentVNode("", true),
-                            createTextVNode(" " + toDisplayString(unref(getComposedString)(((_a = group.products) == null ? void 0 : _a.map((item) => item.name)) ?? [])) + " ", 1),
-                            __props.isExpandable ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString((_b = group.lines) == null ? void 0 : _b.length), 1)) : createCommentVNode("", true)
-                          ];
-                        }),
-                        _: 2
-                      }, 1024),
-                      createVNode(_sfc_main$m, { number: "" }, {
-                        default: withCtx(() => [
-                          createVNode(_sfc_main$v, {
-                            value: group.amount_excluding_tax
-                          }, null, 8, ["value"])
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ], 42, _hoisted_10),
-                    unref(expandedDeductions).includes(formatIndex(rootGroupIndex, groupIndex)) ? (openBlock(), createElementBlock("tr", _hoisted_12, [
-                      createElementVNode("td", _hoisted_13, [
-                        createElementVNode("div", _hoisted_14, [
-                          createVNode(_sfc_main$b, {
-                            "start-date": group.start_at,
-                            "end-date": group.end_at,
-                            total: group.amount_excluding_tax,
-                            group,
-                            "amount-type": __props.invoice.pricing_amount_type
-                          }, null, 8, ["start-date", "end-date", "total", "group", "amount-type"])
-                        ])
-                      ])
-                    ])) : createCommentVNode("", true)
-                  ], 64);
-                }), 128))
-              ], 64);
-            }), 128)),
-            __props.invoice.open_invoice_amount && !__props.invoice.paid ? (openBlock(), createElementBlock("tr", _hoisted_15, [
-              createVNode(_sfc_main$m, { class: "font-bold" }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(intl).$t({
-                    id: "invoice.amount_due_table_heading",
-                    defaultMessage: "Amount due",
-                    description: "Table heading for the amount due row in the invoice table"
-                  })), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$m, { number: "" }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$v, {
-                    value: __props.invoice.open_invoice_amount
-                  }, null, 8, ["value"])
-                ]),
-                _: 1
-              })
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-function useInvoice({ invoiceId }) {
-  const { getInvoice, getInvoicePdf: downloadInvoicePdf } = createInvoicesService();
-  const service = () => getInvoice(invoiceId);
-  const {
-    data,
-    execute: get,
-    apiStatus,
-    error,
-    isPending
-  } = useService({
-    service
-  });
-  return {
-    invoice: data,
-    downloadInvoicePdf,
-    apiStatus,
-    error,
-    get,
-    isPending
-  };
-}
-function usePayments() {
-  const { getPayments } = createPaymentsService();
-  const { data, execute: get, error, apiStatus, isPending } = useService({
-    service: getPayments,
-    isCollection: true
-  });
-  return { payments: data, get, error, apiStatus, isPending };
-}
+import { defineComponent, renderSlot, unref, computed, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, withCtx, createTextVNode, toDisplayString, withKeys, normalizeClass, createCommentVNode, createBlock, defineAsyncComponent, normalizeProps, guardReactiveProps } from "vue";
+import { u as useLoadInitialData } from "../../useLoadInitialData-5sgImpzc.mjs";
+import { u as useInvoice, a as usePayments } from "../../usePayments-Cw5PPEJa.mjs";
+import { _ as _sfc_main$g, d as defineCustomElement, g as getComponentName } from "../../component-Djrf1L-Z.mjs";
+import { u as useIntl, C as useToggleList, D as _sfc_main$5, _ as _sfc_main$6, I as InvoiceTable, E as _sfc_main$7, F as _sfc_main$8, l as _sfc_main$9, b as _sfc_main$a, G as _sfc_main$b, y as _sfc_main$c, z as _sfc_main$d, c as _sfc_main$f } from "../../vendor-ui-C0K3osvz.mjs";
+import { u as useViewport } from "../../useViewport-Bu0cyeSi.mjs";
+import { _ as _sfc_main$e } from "../../InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-Bc2hkpTb.mjs";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Invoice.entry.view",
   props: {
@@ -2627,7 +12,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     locale: { type: String },
     dateLocale: { type: String },
     messages: { type: Object },
-    showTimezones: { type: Boolean },
     primaryColor: { type: String },
     secondaryColor: { type: String },
     isShadowRoot: { type: Boolean },
@@ -2636,7 +20,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     onLog: { type: Function },
     allowedPortalTypes: { type: Array },
     portalObject: { type: Object },
-    customElementName: { type: String },
+    cssOverrides: { type: [String, Array] },
     branding: { type: Object },
     configuration: { type: Object }
   },
@@ -2715,7 +99,7 @@ const _hoisted_1$1 = {
   class: "mt-8"
 };
 const _hoisted_2$1 = { class: "flex flex-col gap-6" };
-const _hoisted_3 = ["onClick", "onKeyup"];
+const _hoisted_3$1 = ["onClick", "onKeyup"];
 const _hoisted_4 = { class: "ml-1 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full bg-blue-100 text-2xs font-bold text-blue-600" };
 const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { class: "p-0" };
@@ -2740,7 +124,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const getPeriodTitle = (period) => formatMessage(
       {
         defaultMessage: "Service period - {startAt} - {endAt}",
-        id: "kFCxC4",
+        id: "wallet_balance.service_period_heading",
         description: "Heading shown above wallet balance details for an invoice period"
       },
       {
@@ -2763,7 +147,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (!(credits == null ? void 0 : credits.credit_type_id)) {
         return formatMessage({
           defaultMessage: "Credits",
-          id: "K2fM1n",
+          id: "wallet_balance.credit_type_fallback_label",
           description: "Fallback label for wallet balance credit types when no name is available"
         });
       }
@@ -2771,7 +155,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     const formatQuantity = (quantity) => quantity ? formatNumber(Number(quantity)) : formatMessage({
       defaultMessage: "-",
-      id: "dHb0fN",
+      id: "empty_value_placeholder",
       description: "Placeholder shown when a wallet balance quantity is missing"
     });
     const periodsWithCredits = computed(
@@ -2789,9 +173,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             return openBlock(), createElementBlock("section", {
               key: period.id
             }, [
-              createVNode(unref(_sfc_main$B), { class: "mt-4" }, {
+              createVNode(unref(_sfc_main$5), { class: "mt-4" }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$A), {
+                  createVNode(unref(_sfc_main$6), {
                     tag: "h3",
                     variant: "caps-heading"
                   }, {
@@ -2806,14 +190,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               createVNode(unref(InvoiceTable), { class: "mt-3" }, {
                 default: withCtx(() => [
                   createElementVNode("tr", null, [
-                    createVNode(unref(_sfc_main$l), {
+                    createVNode(unref(_sfc_main$7), {
                       left: "",
                       class: "text-gray-600"
                     }, {
                       default: withCtx(() => [
                         createTextVNode(toDisplayString(unref($t)({
                           defaultMessage: "Wallet balance",
-                          id: "j2d7b2",
+                          id: "wallet_balance.details.header",
                           description: "Section header for invoice wallet balance details"
                         })), 1)
                       ]),
@@ -2833,9 +217,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                           withKeys(($event) => unref(toggle)(row.id), ["space"])
                         ]
                       }, [
-                        createVNode(unref(_sfc_main$m), { class: "p-0" }, {
+                        createVNode(unref(_sfc_main$8), { class: "p-0" }, {
                           default: withCtx(() => [
-                            createVNode(unref(_sfc_main$r), {
+                            createVNode(unref(_sfc_main$9), {
                               icon: "keyboard_arrow_down",
                               size: "md",
                               class: normalizeClass(["absolute -translate-x-7 text-slate-400", { "-rotate-90": !unref(getIsOpen)(row.id) }])
@@ -2845,60 +229,60 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                           ]),
                           _: 2
                         }, 1024)
-                      ], 40, _hoisted_3),
+                      ], 40, _hoisted_3$1),
                       unref(getIsOpen)(row.id) ? (openBlock(), createElementBlock("tr", _hoisted_5, [
                         createElementVNode("td", _hoisted_6, [
                           createElementVNode("div", _hoisted_7, [
                             createVNode(unref(InvoiceTable), null, {
                               default: withCtx(() => [
                                 createElementVNode("tr", null, [
-                                  createVNode(unref(_sfc_main$l), {
+                                  createVNode(unref(_sfc_main$7), {
                                     left: "",
                                     class: "w-2/5"
                                   }, {
                                     default: withCtx(() => [
                                       createTextVNode(toDisplayString(unref($t)({
                                         defaultMessage: "Credit breakdown",
-                                        id: "65I4e4",
+                                        id: "invoice_credits.credit_breakdown.table_header",
                                         description: "Column header for wallet balance credit type details"
                                       })), 1)
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$l), {
+                                  createVNode(unref(_sfc_main$7), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
                                     default: withCtx(() => [
                                       createTextVNode(toDisplayString(unref($t)({
                                         defaultMessage: "Balance",
-                                        id: "4UjRe6",
+                                        id: "invoice_credits.balance.table_header",
                                         description: "Column header for the available wallet balance amount"
                                       })), 1)
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$l), {
+                                  createVNode(unref(_sfc_main$7), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
                                     default: withCtx(() => [
                                       createTextVNode(toDisplayString(unref($t)({
                                         defaultMessage: "Used",
-                                        id: "rUy4Lk",
+                                        id: "invoice_credits.used.table_header",
                                         description: "Column header for the used wallet credit amount"
                                       })), 1)
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$l), {
+                                  createVNode(unref(_sfc_main$7), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
                                     default: withCtx(() => [
                                       createTextVNode(toDisplayString(unref($t)({
                                         defaultMessage: "Remaining",
-                                        id: "C8F4/r",
+                                        id: "invoice_credits.remaining.table_header",
                                         description: "Column header for the remaining wallet credit amount"
                                       })), 1)
                                     ]),
@@ -2910,25 +294,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                                     key: breakdownRow.id,
                                     class: "border-t"
                                   }, [
-                                    createVNode(unref(_sfc_main$m), null, {
+                                    createVNode(unref(_sfc_main$8), null, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.label), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$m), { number: "" }, {
+                                    createVNode(unref(_sfc_main$8), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.available), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$m), { number: "" }, {
+                                    createVNode(unref(_sfc_main$8), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.used), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$m), { number: "" }, {
+                                    createVNode(unref(_sfc_main$8), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.left), 1)
                                       ]),
@@ -2961,26 +345,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const { $t } = useIntl();
-    const { width } = useWindowSize();
-    const isSmallScreen = computed(() => width.value <= 768);
+    const { isMobileViewport: isSmallScreen } = useViewport();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$C), {
+      return openBlock(), createBlock(unref(_sfc_main$a), {
+        class: "sv-invoice__summary grow",
         title: unref($t)({
           defaultMessage: "Invoice",
           description: "Title for the invoice block on the invoice details page",
           id: "sdk.invoice_details.invoice.title"
-        }),
-        class: "grow"
+        })
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
-            class: normalizeClass({ "p-6 pt-2": !isSmallScreen.value })
+            class: normalizeClass(["sv-invoice__summary-body", { "p-6 pt-2": !unref(isSmallScreen) }])
           }, [
-            isSmallScreen.value ? (openBlock(), createBlock(unref(_sfc_main$o), {
+            unref(isSmallScreen) ? (openBlock(), createBlock(unref(_sfc_main$b), {
               key: 0,
               variant: "default",
               "has-icon": "",
-              class: "justify-center bg-gray-50 border-gray-100 text-gray-800 font-semibold"
+              class: "sv-invoice__download-hint justify-center border-gray-100 bg-gray-50 font-semibold text-gray-800"
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref($t)({
@@ -2991,16 +374,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$5), {
+            createVNode(unref(_sfc_main$c), {
+              class: "sv-invoice__summary-content",
               invoice: __props.invoice,
-              "is-expandable": !isSmallScreen.value
+              "is-expandable": !unref(isSmallScreen)
             }, {
               logo: withCtx(() => [
                 renderSlot(_ctx.$slots, "logo")
               ]),
               _: 3
             }, 8, ["invoice", "is-expandable"]),
-            createVNode(_sfc_main$3, { invoice: __props.invoice }, null, 8, ["invoice"])
+            createVNode(_sfc_main$3, {
+              class: "sv-invoice__credits-breakdown",
+              invoice: __props.invoice
+            }, null, 8, ["invoice"])
           ], 2)
         ]),
         _: 3
@@ -3008,8 +395,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "flex flex-col gap-3 lg:flex-row lg:gap-6" };
-const _hoisted_2 = { class: "flex shrink-0 flex-col gap-8 lg:w-72 lg:gap-6" };
+const _hoisted_1 = { class: "sv-invoice sv-root sv-component" };
+const _hoisted_2 = { class: "sv-invoice__body flex flex-col gap-3 lg:flex-row lg:gap-6" };
+const _hoisted_3 = { class: "sv-invoice__aside flex shrink-0 flex-col gap-8 lg:w-72 lg:gap-6" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Invoice",
   props: {
@@ -3020,32 +408,41 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     configuration: { type: Object }
   },
   setup(__props) {
+    const PaymentHistoryBlock = defineAsyncComponent(
+      () => import("../../PaymentHistoryBlock-D_B099M7.mjs")
+    );
     const { $t } = useIntl();
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$9), {
-          class: "mb-6",
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(_sfc_main$d), {
+          class: "sv-invoice__header mb-6",
           "payment-attempts": __props.payments ?? [],
           invoice: __props.invoice,
           "download-service": () => __props.invoiceDownloadService(__props.invoice.id),
           "show-download-button": __props.configuration.enableDownloadButton,
           variant: "external"
         }, null, 8, ["payment-attempts", "invoice", "download-service", "show-download-button"]),
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
           __props.invoice ? (openBlock(), createBlock(_sfc_main$2, {
             key: 0,
+            class: "sv-invoice__main",
             invoice: __props.invoice
           }, null, 8, ["invoice"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2, [
-            createVNode(_sfc_main$D, { invoice: __props.invoice }, null, 8, ["invoice"]),
-            ((_a = __props.configuration) == null ? void 0 : _a.enablePaymentAttempts) && ((_b = __props.payments) == null ? void 0 : _b.length) ? (openBlock(), createBlock(_sfc_main$E, {
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$e, {
+              class: "sv-invoice__details",
+              invoice: __props.invoice
+            }, null, 8, ["invoice"]),
+            ((_a = __props.configuration) == null ? void 0 : _a.enablePaymentAttempts) && ((_b = __props.payments) == null ? void 0 : _b.length) ? (openBlock(), createBlock(unref(PaymentHistoryBlock), {
               key: 0,
+              class: "sv-invoice__payment-history",
               "payment-attempts": __props.payments,
               customer: __props.invoice.customer
             }, null, 8, ["payment-attempts", "customer"])) : createCommentVNode("", true),
-            __props.configuration.enableCustomerBillingInformation ? (openBlock(), createBlock(unref(_sfc_main$F), {
+            __props.configuration.enableCustomerBillingInformation ? (openBlock(), createBlock(unref(_sfc_main$f), {
               key: 1,
+              class: "sv-invoice__billing-information",
               customer: __props.invoice.customer,
               title: unref($t)({
                 defaultMessage: "Your billing information",
@@ -3055,7 +452,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["customer", "title"])) : createCommentVNode("", true)
           ])
         ])
-      ], 64);
+      ]);
     };
   }
 });
@@ -3066,7 +463,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     locale: { type: String },
     dateLocale: { type: String },
     messages: { type: Object },
-    showTimezones: { type: Boolean },
     primaryColor: { type: String },
     secondaryColor: { type: String },
     isShadowRoot: { type: Boolean },
@@ -3075,7 +471,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLog: { type: Function },
     allowedPortalTypes: { type: Array },
     portalObject: { type: Object },
-    customElementName: { type: String },
+    cssOverrides: { type: [String, Array] },
     branding: { type: Object },
     configuration: { type: Object }
   },
@@ -3096,7 +492,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }));
     return (_ctx, _cache) => {
       var _a2, _b, _c, _d;
-      return openBlock(), createBlock(unref(_sfc_main$G), {
+      return openBlock(), createBlock(unref(_sfc_main$g), {
         "custom-element-name": unref(COMPONENT_NAME),
         environment: __props.environment,
         locale: __props.locale,
@@ -3107,6 +503,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "experimental-features": __props.experimentalFeatures,
         "log-level": __props.logLevel,
         "on-log": __props.onLog,
+        "css-overrides": __props.cssOverrides,
         onError: _cache[0] || (_cache[0] = (error) => _ctx.$emit("error", error))
       }, {
         default: withCtx(() => [
@@ -3125,7 +522,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 16)
         ]),
         _: 1
-      }, 8, ["custom-element-name", "environment", "locale", "portal-object", "primary-color", "secondary-color", "experimental-features", "log-level", "on-log"]);
+      }, 8, ["custom-element-name", "environment", "locale", "portal-object", "primary-color", "secondary-color", "experimental-features", "log-level", "on-log", "css-overrides"]);
     };
   }
 });