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

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

@@ -1,12 +1,2596 @@
-import { defineComponent, renderSlot, unref, computed, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, withCtx, createTextVNode, toDisplayString, withKeys, normalizeClass, createCommentVNode, createBlock, normalizeProps, guardReactiveProps } from "vue";
+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-C7BHqB0g.mjs";
-import { u as useService } from "../../useService-B4qv5N2D.mjs";
-import { c as createPaymentsService } from "../../payments-NTHUh5je.mjs";
-import { b as useIntl, Q as useToggleList, R as _sfc_main$2q, _ as _sfc_main$2$1, S as InvoiceTable, U as _sfc_main$t, V as _sfc_main$u, m as _sfc_main$4$1, d as _sfc_main$1g, W as _sfc_main$1J, X as _sfc_main$e, Y as _sfc_main$w, k as _sfc_main$z, o as _sfc_main$7, p as defineCustomElement, n as getComponentName } from "../../component-DI3AxwdD.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$5 } from "../../InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-BWXmZmGZ.mjs";
-import { _ as _sfc_main$6 } from "../../PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-BSn_Zy0Y.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);
@@ -205,9 +2789,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             return openBlock(), createElementBlock("section", {
               key: period.id
             }, [
-              createVNode(unref(_sfc_main$2q), { class: "mt-4" }, {
+              createVNode(unref(_sfc_main$B), { class: "mt-4" }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$A), {
                     tag: "h3",
                     variant: "caps-heading"
                   }, {
@@ -222,7 +2806,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               createVNode(unref(InvoiceTable), { class: "mt-3" }, {
                 default: withCtx(() => [
                   createElementVNode("tr", null, [
-                    createVNode(unref(_sfc_main$t), {
+                    createVNode(unref(_sfc_main$l), {
                       left: "",
                       class: "text-gray-600"
                     }, {
@@ -249,9 +2833,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                           withKeys(($event) => unref(toggle)(row.id), ["space"])
                         ]
                       }, [
-                        createVNode(unref(_sfc_main$u), { class: "p-0" }, {
+                        createVNode(unref(_sfc_main$m), { class: "p-0" }, {
                           default: withCtx(() => [
-                            createVNode(unref(_sfc_main$4$1), {
+                            createVNode(unref(_sfc_main$r), {
                               icon: "keyboard_arrow_down",
                               size: "md",
                               class: normalizeClass(["absolute -translate-x-7 text-slate-400", { "-rotate-90": !unref(getIsOpen)(row.id) }])
@@ -268,7 +2852,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                             createVNode(unref(InvoiceTable), null, {
                               default: withCtx(() => [
                                 createElementVNode("tr", null, [
-                                  createVNode(unref(_sfc_main$t), {
+                                  createVNode(unref(_sfc_main$l), {
                                     left: "",
                                     class: "w-2/5"
                                   }, {
@@ -281,7 +2865,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$t), {
+                                  createVNode(unref(_sfc_main$l), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
@@ -294,7 +2878,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$t), {
+                                  createVNode(unref(_sfc_main$l), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
@@ -307,7 +2891,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                                     ]),
                                     _: 1
                                   }),
-                                  createVNode(unref(_sfc_main$t), {
+                                  createVNode(unref(_sfc_main$l), {
                                     right: "",
                                     class: "w-1/5"
                                   }, {
@@ -326,25 +2910,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                                     key: breakdownRow.id,
                                     class: "border-t"
                                   }, [
-                                    createVNode(unref(_sfc_main$u), null, {
+                                    createVNode(unref(_sfc_main$m), null, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.label), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$u), { number: "" }, {
+                                    createVNode(unref(_sfc_main$m), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.available), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$u), { number: "" }, {
+                                    createVNode(unref(_sfc_main$m), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.used), 1)
                                       ]),
                                       _: 2
                                     }, 1024),
-                                    createVNode(unref(_sfc_main$u), { number: "" }, {
+                                    createVNode(unref(_sfc_main$m), { number: "" }, {
                                       default: withCtx(() => [
                                         createTextVNode(toDisplayString(breakdownRow.left), 1)
                                       ]),
@@ -380,7 +2964,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const { width } = useWindowSize();
     const isSmallScreen = computed(() => width.value <= 768);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$C), {
         title: unref($t)({
           defaultMessage: "Invoice",
           description: "Title for the invoice block on the invoice details page",
@@ -392,7 +2976,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass({ "p-6 pt-2": !isSmallScreen.value })
           }, [
-            isSmallScreen.value ? (openBlock(), createBlock(unref(_sfc_main$1J), {
+            isSmallScreen.value ? (openBlock(), createBlock(unref(_sfc_main$o), {
               key: 0,
               variant: "default",
               "has-icon": "",
@@ -407,7 +2991,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$e), {
+            createVNode(unref(_sfc_main$5), {
               invoice: __props.invoice,
               "is-expandable": !isSmallScreen.value
             }, {
@@ -440,7 +3024,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$w), {
+        createVNode(unref(_sfc_main$9), {
           class: "mb-6",
           "payment-attempts": __props.payments ?? [],
           invoice: __props.invoice,
@@ -454,13 +3038,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             invoice: __props.invoice
           }, null, 8, ["invoice"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2, [
-            createVNode(_sfc_main$5, { 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$6, {
+            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, {
               key: 0,
               "payment-attempts": __props.payments,
               customer: __props.invoice.customer
             }, null, 8, ["payment-attempts", "customer"])) : createCommentVNode("", true),
-            __props.configuration.enableCustomerBillingInformation ? (openBlock(), createBlock(unref(_sfc_main$z), {
+            __props.configuration.enableCustomerBillingInformation ? (openBlock(), createBlock(unref(_sfc_main$F), {
               key: 1,
               customer: __props.invoice.customer,
               title: unref($t)({
@@ -512,7 +3096,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }));
     return (_ctx, _cache) => {
       var _a2, _b, _c, _d;
-      return openBlock(), createBlock(unref(_sfc_main$7), {
+      return openBlock(), createBlock(unref(_sfc_main$G), {
         "custom-element-name": unref(COMPONENT_NAME),
         environment: __props.environment,
         locale: __props.locale,