appmax-client-vue3 5.5.0 → 5.6.0

package/dist/DetailSubscriptionRecurring-uNiHLtHK.js

@@ -0,0 +1,1314 @@
+import { _ as _export_sfc, g as createElementBlock, h as openBlock, a6 as renderSlot, aJ as commonjsGlobal, aK as getDefaultExportFromCjs, e as computed, r as ref, az as toRefs, z as reactive, b as useRoute, aq as toaster, G as ApiService, ab as defineComponent, c as useRouter, av as useUserStore, u as useI18n, v as createBlock, w as withCtx, j as createBaseVNode, i as createVNode, l as unref, y, m as createTextVNode, t as toDisplayString, C as w, k as createCommentVNode, F as Fragment, q as renderList, n as normalizeClass, d as useBreakpoint, aC as P, $, p as _, aA as isRef, o as onMounted } from "./main-Co25L4rd.js";
+import { a as script, s as script$1, b as script$2 } from "./index-Cu1wLOM1.js";
+import { _ as _sfc_main$7, a as _sfc_main$8 } from "./AmEmptyState.vue_vue_type_script_setup_true_lang-DbEYzfCw.js";
+import { O as OrderStatusChip } from "./OrderStatusChip-CpGRd3tE.js";
+import { R as RecurringListService, a as useFormatters, u as useRecurringTable, r as recurringListService$1 } from "./useRecurringTable-DNyJLk8k.js";
+import { d as dayjs } from "./dayjs.min-lile4sr9.js";
+import { s as script$3 } from "./index-BYuDmJME.js";
+import { C as ConfirmationModal } from "./ConfirmationModal-DFvvpakq.js";
+const _sfc_main$6 = {
+  name: "SubscriptionDetailsCard"
+};
+const _hoisted_1$6 = { class: "flex flex-col items-start gap-[2px] self-stretch p-6 rounded-[10px] bg-white shadow-[2px_2px_12px_0px_rgba(51,51,51,0.16)]" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const SubscriptionDetailsCard = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
+const STATUS_MAP = {
+  "active": "Ativo",
+  "overdue": "Em atraso",
+  "canceled": "Cancelado"
+};
+const getTranslatedStatus = (status) => {
+  return STATUS_MAP[status.toLowerCase()] || status;
+};
+var customParseFormat$1 = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t();
+  }(commonjsGlobal, function() {
+    var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
+      return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
+    };
+    var f = function(e2) {
+      return function(t2) {
+        this[e2] = +t2;
+      };
+    }, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
+      (this.zone || (this.zone = {})).offset = function(e3) {
+        if (!e3) return 0;
+        if ("Z" === e3) return 0;
+        var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
+        return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
+      }(e2);
+    }], u = function(e2) {
+      var t2 = s[e2];
+      return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
+    }, d = function(e2, t2) {
+      var n2, r2 = s.meridiem;
+      if (r2) {
+        for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r2(i2, 0, t2)) > -1) {
+          n2 = i2 > 12;
+          break;
+        }
+      } else n2 = e2 === (t2 ? "pm" : "PM");
+      return n2;
+    }, c = { A: [o, function(e2) {
+      this.afternoon = d(e2, false);
+    }], a: [o, function(e2) {
+      this.afternoon = d(e2, true);
+    }], Q: [n, function(e2) {
+      this.month = 3 * (e2 - 1) + 1;
+    }], S: [n, function(e2) {
+      this.milliseconds = 100 * +e2;
+    }], SS: [r, function(e2) {
+      this.milliseconds = 10 * +e2;
+    }], SSS: [/\d{3}/, function(e2) {
+      this.milliseconds = +e2;
+    }], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r, f("day")], Do: [o, function(e2) {
+      var t2 = s.ordinal, n2 = e2.match(/\d+/);
+      if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
+    }], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
+      var t2 = u("months"), n2 = (u("monthsShort") || t2.map(function(e3) {
+        return e3.slice(0, 3);
+      })).indexOf(e2) + 1;
+      if (n2 < 1) throw new Error();
+      this.month = n2 % 12 || n2;
+    }], MMMM: [o, function(e2) {
+      var t2 = u("months").indexOf(e2) + 1;
+      if (t2 < 1) throw new Error();
+      this.month = t2 % 12 || t2;
+    }], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
+      this.year = a(e2);
+    }], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
+    function l(n2) {
+      var r2, i2;
+      r2 = n2, i2 = s && s.formats;
+      for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r3) {
+        var o3 = r3 && r3.toUpperCase();
+        return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) {
+          return t3 || n4.slice(1);
+        });
+      })).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
+        var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
+        o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
+      }
+      return function(e2) {
+        for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
+          var i3 = o2[n3];
+          if ("string" == typeof i3) r3 += i3.length;
+          else {
+            var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
+            f3.call(t2, u3), e2 = e2.replace(u3, "");
+          }
+        }
+        return function(e3) {
+          var t3 = e3.afternoon;
+          if (void 0 !== t3) {
+            var n4 = e3.hours;
+            t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
+          }
+        }(t2), t2;
+      };
+    }
+    return function(e2, t2, n2) {
+      n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
+      var r2 = t2.prototype, i2 = r2.parse;
+      r2.parse = function(e3) {
+        var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
+        this.$u = r3;
+        var a2 = o2[1];
+        if ("string" == typeof a2) {
+          var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
+          h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = function(e4, t4, n3, r4) {
+            try {
+              if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
+              var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
+              o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
+              var D, w2 = f3 || 0, g = h3 || 0, y2 = u3 || 0, L = d3 || 0;
+              return c3 ? new Date(Date.UTC(p, v, Y, w2, g, y2, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w2, g, y2, L)) : (D = new Date(p, v, Y, w2, g, y2, L), m2 && (D = r4(D).week(m2).toDate()), D);
+            } catch (e5) {
+              return /* @__PURE__ */ new Date("");
+            }
+          }(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
+        } else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
+          o2[1] = a2[m - 1];
+          var M = n2.apply(this, o2);
+          if (M.isValid()) {
+            this.$d = M.$d, this.$L = M.$L, this.init();
+            break;
+          }
+          m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
+        }
+        else i2.call(this, e3);
+      };
+    };
+  });
+})(customParseFormat$1);
+var customParseFormatExports = customParseFormat$1.exports;
+const customParseFormat = /* @__PURE__ */ getDefaultExportFromCjs(customParseFormatExports);
+dayjs.extend(customParseFormat);
+const recurringListService = new RecurringListService(ApiService);
+const loading = ref(true);
+const tableLoading = ref(true);
+const hasError = ref(false);
+const hasTableError = ref(false);
+const isInitialized = ref(false);
+const lastSubscriptionId = ref(null);
+const currentPage = ref(0);
+const rowsPerPage = ref(10);
+const totalRecords = ref(0);
+const state = reactive({
+  rawInvoices: [],
+  customer: {},
+  product: {
+    site_name: "",
+    product_name: "",
+    interval: "",
+    payment: {
+      name: "",
+      info: {
+        brand: "",
+        final: "",
+        installments: void 0
+      }
+    },
+    next_charge_at: ""
+  },
+  status: "",
+  showCancelSubscriptionModal: false
+});
+const invoices = computed(() => {
+  return state.rawInvoices.map((invoice) => ({
+    code: invoice.order_id.toString(),
+    name: invoice.product_name,
+    order_hash: invoice.order_hash,
+    amount: `R$ ${Number(invoice.value).toFixed(2).replace(".", ",")}`,
+    billingDate: invoice.charged_at,
+    status: invoice.status
+  }));
+});
+const showPaginator = computed(() => {
+  return totalRecords.value > rowsPerPage.value;
+});
+const columns = [
+  {
+    id: "code",
+    header: "ID do Pedido",
+    getter: (invoice) => ({ text: invoice.code }),
+    className: "w-32"
+  },
+  {
+    id: "name",
+    header: "Produto",
+    getter: (invoice) => ({ text: invoice.name })
+  },
+  {
+    id: "amount",
+    header: "Valor",
+    getter: (invoice) => ({ text: invoice.amount })
+  },
+  {
+    id: "billingDate",
+    header: "Faturamento",
+    getter: (invoice) => ({ text: invoice.billingDate })
+  }
+];
+const getSubscriptionInvoiceHistory = async (subscriptionId, page = 1) => {
+  try {
+    tableLoading.value = true;
+    const { charges, pagination } = await recurringListService.getSubscriptionCharges(subscriptionId, page);
+    state.rawInvoices = charges;
+    totalRecords.value = pagination.total;
+    currentPage.value = pagination.current_page - 1;
+    rowsPerPage.value = pagination.per_page;
+  } catch (error) {
+    hasTableError.value = true;
+  } finally {
+    tableLoading.value = false;
+  }
+};
+const onPageChange = async (event) => {
+  const route = useRoute();
+  const subscriptionId = Number(route.params.id);
+  currentPage.value = event.page;
+  rowsPerPage.value = event.rows;
+  await getSubscriptionInvoiceHistory(subscriptionId, event.page + 1);
+};
+const getSubscriptionDetails = async (subscriptionId) => {
+  try {
+    loading.value = true;
+    const result = await recurringListService.getSubscriptionDetails(subscriptionId);
+    const normalized = normalizeSubscriptionDetails(result);
+    state.customer = {
+      ...normalized.customer,
+      created_at: formatDateTime(normalized.customer.created_at),
+      updated_at: formatDateTime(normalized.customer.updated_at)
+    };
+    state.product = normalized.product;
+    state.status = getTranslatedStatus(normalized.status);
+  } catch (error) {
+    hasError.value = true;
+  } finally {
+    loading.value = false;
+  }
+};
+const formatDateTime = (dateString) => {
+  const formattedDate = dayjs(dateString, "DD/MM/YYYY HH:mm:ss").format("DD/MM/YYYY, HH[h]mm");
+  return formattedDate;
+};
+const normalizeSubscriptionDetails = (data) => {
+  return {
+    customer: data.customer,
+    product: {
+      site_name: data.site_name,
+      product_name: data.product_name,
+      interval: data.interval,
+      payment: data.payment,
+      next_charge_at: dayjs(data.next_charge_at).format("DD/MM/YYYY"),
+      panel_url: data.panel_url
+    },
+    status: data.status
+  };
+};
+const subscriptionCancel = async () => {
+  try {
+    const route = useRoute();
+    const subscriptionId = Number(route.params.id);
+    const result = await recurringListService.cancelSubscription(subscriptionId);
+    if (result.code === 200) {
+      const customerName = `${state.customer.first_name} ${state.customer.last_name}`;
+      const productName = state.product.product_name;
+      toaster.success(
+        "Sucesso",
+        `A assinatura ${productName} de ${customerName} foi cancelada com sucesso.`
+      );
+    }
+    state.showCancelSubscriptionModal = false;
+  } catch (error) {
+    hasError.value = true;
+    toaster.error(
+      "Erro",
+      "Houve um problema no cancelamento da assinatura. Por favor, tente novamente mais tarde."
+    );
+  }
+};
+const resetState = () => {
+  loading.value = true;
+  tableLoading.value = true;
+  hasError.value = false;
+  hasTableError.value = false;
+  isInitialized.value = false;
+  currentPage.value = 0;
+  totalRecords.value = 0;
+  state.rawInvoices = [];
+  state.customer = {};
+  state.product = {
+    site_name: "",
+    product_name: "",
+    interval: "",
+    payment: {
+      name: "",
+      info: {
+        brand: "",
+        final: "",
+        installments: void 0
+      }
+    },
+    next_charge_at: "",
+    panel_url: ""
+  };
+  state.status = "";
+  state.showCancelSubscriptionModal = false;
+  lastSubscriptionId.value = null;
+};
+const initialize = async () => {
+  const route = useRoute();
+  const subscriptionId = Number(route.params.id);
+  if (lastSubscriptionId.value === subscriptionId && isInitialized.value) {
+    return;
+  }
+  if (lastSubscriptionId.value !== subscriptionId) {
+    resetState();
+  }
+  lastSubscriptionId.value = subscriptionId;
+  await getSubscriptionInvoiceHistory(subscriptionId, currentPage.value + 1);
+  await getSubscriptionDetails(subscriptionId);
+  isInitialized.value = true;
+};
+const useRecurringSubscriptionDetails = () => {
+  return {
+    ...toRefs(state),
+    loading,
+    tableLoading,
+    hasError,
+    hasTableError,
+    isInitialized,
+    invoices,
+    columns,
+    currentPage,
+    rowsPerPage,
+    totalRecords,
+    initialize,
+    getSubscriptionInvoiceHistory,
+    subscriptionCancel,
+    onPageChange,
+    showPaginator
+  };
+};
+const _hoisted_1$5 = { class: "flex items-center gap-2 mb-4" };
+const _hoisted_2$4 = {
+  key: 3,
+  class: "min-h-full w-full"
+};
+const _hoisted_3$3 = { class: "py-3 px-4" };
+const _hoisted_4$3 = {
+  key: 0,
+  class: "flex justify-end mt-4"
+};
+const __default__$5 = { name: "SubscriptionInvoiceHistory" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
+  setup(__props) {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const { t } = useI18n();
+    const {
+      tableLoading: tableLoading2,
+      hasTableError: hasTableError2,
+      columns: columns2,
+      invoices: invoices2,
+      currentPage: currentPage2,
+      rowsPerPage: rowsPerPage2,
+      totalRecords: totalRecords2,
+      onPageChange: onPageChange2,
+      showPaginator: showPaginator2
+    } = useRecurringSubscriptionDetails();
+    const { getStatusSeverity } = useFormatters();
+    const redirectToDetails = (e) => {
+      const { data } = e;
+      const sidebarMenuList = userStore.getUserSidebarItems();
+      const orderMenuItem = sidebarMenuList.find((item) => item.label === "Pedidos");
+      if (orderMenuItem) {
+        router.push({
+          path: `${orderMenuItem.href}/${data.order_hash}`
+        });
+      } else {
+        router.push({
+          path: `/v2/client/integration/orders/${data.order_hash}`
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SubscriptionDetailsCard, null, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$5, [
+            createVNode(unref(y), {
+              variant: "title",
+              size: "small",
+              "is-strong": ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("subscription.detail.invoiceHistory")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          unref(hasTableError2) ? (openBlock(), createBlock(_sfc_main$7, {
+            key: 0,
+            noretry: ""
+          })) : unref(tableLoading2) ? (openBlock(), createBlock(unref(w), {
+            key: 1,
+            class: "min-h-40 w-full"
+          })) : !unref(invoices2).length ? (openBlock(), createBlock(_sfc_main$8, { key: 2 })) : (openBlock(), createElementBlock("div", _hoisted_2$4, [
+            createVNode(unref(script), {
+              "selection-mode": "single",
+              "data-key": "id",
+              "meta-key-selection": false,
+              value: unref(invoices2),
+              class: "min-w-full",
+              "row-hover": "",
+              onRowSelect: redirectToDetails
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns2), ({ id, className, header, getter }) => {
+                  return openBlock(), createBlock(unref(script$1), {
+                    key: id,
+                    header,
+                    class: normalizeClass(className),
+                    field: id,
+                    body: getter,
+                    pt: { bodyCell: { "data-test": `subscription-invoice-column-${id}` } }
+                  }, null, 8, ["header", "class", "field", "body", "pt"]);
+                }), 128)),
+                createVNode(unref(script$1), {
+                  header: "Status da transação",
+                  class: "w-40"
+                }, {
+                  body: withCtx(({ data: invoice }) => [
+                    createBaseVNode("div", _hoisted_3$3, [
+                      createVNode(OrderStatusChip, {
+                        "data-test": "invoice-status-chip",
+                        status: invoice.status,
+                        type: unref(getStatusSeverity)(invoice.status),
+                        label: invoice.status
+                      }, null, 8, ["status", "type", "label"])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            unref(showPaginator2) ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+              createVNode(unref(script$2), {
+                disabled: unref(tableLoading2),
+                rows: unref(rowsPerPage2),
+                first: unref(currentPage2) * unref(rowsPerPage2),
+                "total-records": unref(totalRecords2),
+                "rows-per-page-options": [5, 10, 20, 50],
+                template: "PrevPageLink PageLinks NextPageLink RowsPerPageDropdown",
+                onPage: unref(onPageChange2)
+              }, null, 8, ["disabled", "rows", "first", "total-records", "onPage"])
+            ])) : createCommentVNode("", true)
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const _hoisted_1$4 = { class: "invoice-history-mobile" };
+const _hoisted_2$3 = { class: "flex items-center gap-2 mb-4" };
+const _hoisted_3$2 = { key: 3 };
+const _hoisted_4$2 = ["onClick"];
+const _hoisted_5$2 = { class: "flex flex-column gap-2" };
+const _hoisted_6$2 = { class: "flex flex-col gap-2" };
+const _hoisted_7$1 = {
+  key: 0,
+  class: "flex justify-end mt-4"
+};
+const __default__$4 = { name: "SubscriptionInvoiceHistoryMobile" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  setup(__props) {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const { t } = useI18n();
+    const {
+      invoices: invoices2,
+      hasTableError: hasTableError2,
+      tableLoading: tableLoading2,
+      currentPage: currentPage2,
+      rowsPerPage: rowsPerPage2,
+      totalRecords: totalRecords2,
+      onPageChange: onPageChange2,
+      showPaginator: showPaginator2
+    } = useRecurringSubscriptionDetails();
+    const { getStatusSeverity } = useFormatters();
+    const redirectToDetails = (invoice) => {
+      const sidebarMenuList = userStore.getUserSidebarItems();
+      const orderMenuItem = sidebarMenuList.find((item) => item.label === "Pedidos");
+      if (orderMenuItem) {
+        router.push({
+          path: `${orderMenuItem.href}/${invoice.order_hash}`
+        });
+      } else {
+        router.push({
+          path: `/v2/client/integration/orders/${invoice.order_hash}`
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createVNode(SubscriptionDetailsCard, null, {
+          default: withCtx(() => [
+            createBaseVNode("div", _hoisted_2$3, [
+              createVNode(unref(y), {
+                variant: "title",
+                size: "small",
+                "is-strong": ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("subscription.detail.invoiceHistory")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            unref(hasTableError2) ? (openBlock(), createBlock(_sfc_main$7, {
+              key: 0,
+              noretry: ""
+            })) : unref(tableLoading2) ? (openBlock(), createBlock(unref(w), {
+              key: 1,
+              class: "min-h-40 w-full"
+            })) : !unref(invoices2).length ? (openBlock(), createBlock(_sfc_main$8, { key: 2 })) : (openBlock(), createElementBlock("div", _hoisted_3$2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(invoices2), (invoice) => {
+                return openBlock(), createElementBlock("div", {
+                  key: invoice.code,
+                  class: "w-full invoice-item cursor-pointer",
+                  onClick: ($event) => redirectToDetails(invoice)
+                }, [
+                  createBaseVNode("div", _hoisted_5$2, [
+                    createBaseVNode("div", _hoisted_6$2, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList([
+                        invoice.code,
+                        invoice.name,
+                        invoice.amount,
+                        invoice.billingDate
+                      ], (text, idx) => {
+                        return openBlock(), createBlock(unref(y), {
+                          key: idx,
+                          class: "text-[#858585]",
+                          size: "small"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(text), 1)
+                          ]),
+                          _: 2
+                        }, 1024);
+                      }), 128)),
+                      createBaseVNode("div", null, [
+                        createVNode(OrderStatusChip, {
+                          "data-test": "invoice-status-chip",
+                          status: invoice.status,
+                          type: unref(getStatusSeverity)(invoice.status),
+                          label: invoice.status
+                        }, null, 8, ["status", "type", "label"])
+                      ])
+                    ])
+                  ]),
+                  _cache[0] || (_cache[0] = createBaseVNode("hr", { class: "w-full my-3" }, null, -1))
+                ], 8, _hoisted_4$2);
+              }), 128)),
+              unref(showPaginator2) ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+                createVNode(unref(script$2), {
+                  disabled: unref(tableLoading2),
+                  rows: unref(rowsPerPage2),
+                  first: unref(currentPage2) * unref(rowsPerPage2),
+                  "total-records": unref(totalRecords2),
+                  "rows-per-page-options": [5, 10, 20, 50],
+                  template: "PrevPageLink PageLinks NextPageLink RowsPerPageDropdown",
+                  onPage: unref(onPageChange2)
+                }, null, 8, ["disabled", "rows", "first", "total-records", "onPage"])
+              ])) : createCommentVNode("", true)
+            ]))
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const SubscriptionInvoiceHistoryMobile = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e204830f"]]);
+const _hoisted_1$3 = { class: "w-full flex items-center justify-between" };
+const _hoisted_2$2 = {
+  key: 1,
+  class: "flex gap-2"
+};
+const __default__$3 = { name: "SubscriptionClientInfo" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  setup(__props) {
+    const {
+      getStatusSeverity
+    } = useRecurringTable();
+    const { t } = useI18n();
+    const isDesktopSize = useBreakpoint("desktop");
+    const { customer, status, loading: loading2 } = useRecurringSubscriptionDetails();
+    const handleEditClient = () => {
+      window.location.href = `/customer/${customer.value.hash}/edit`;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SubscriptionDetailsCard, null, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$3, [
+            createBaseVNode("div", {
+              class: normalizeClass(["flex items-center gap-2", { "justify-between w-full": !unref(isDesktopSize) }])
+            }, [
+              unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                key: 0,
+                width: "10rem",
+                class: normalizeClass({ "mb-2": !unref(isDesktopSize) })
+              }, null, 8, ["class"])) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  size: "small",
+                  "is-strong": ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(`${unref(t)("subscription.detail.userFullName", { name: unref(customer).first_name, lastName: unref(customer).last_name })}`), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(P), {
+                  closable: false,
+                  disabled: false,
+                  text: unref(status),
+                  type: unref(getStatusSeverity)(unref(status))
+                }, null, 8, ["text", "type"])
+              ]))
+            ], 2),
+            unref(isDesktopSize) ? (openBlock(), createBlock(unref($), {
+              key: 0,
+              icon: "edit",
+              size: "small",
+              text: "",
+              disabled: unref(loading2),
+              onClick: handleEditClient
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("subscription.detail.clientEdit")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])) : createCommentVNode("", true)
+          ]),
+          unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+            key: 0,
+            width: "15rem"
+          })) : (openBlock(), createBlock(unref(y), {
+            key: 1,
+            class: "pt-2 text-[#858585]",
+            variant: "body",
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(`${unref(t)("subscription.detail.clientUpdateDescription", { createdAt: unref(customer).created_at, updatedAt: unref(customer).updated_at })}`), 1)
+            ]),
+            _: 1
+          })),
+          !unref(isDesktopSize) ? (openBlock(), createBlock(unref($), {
+            key: 2,
+            icon: "edit",
+            size: "small",
+            text: "",
+            onClick: handleEditClient
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("subscription.detail.clientEdit")), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const _hoisted_1$2 = { class: "flex-1 flex flex-col gap-2" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_3$1 = {
+  key: 0,
+  class: "flex-1 flex flex-col gap-2"
+};
+const _hoisted_4$1 = {
+  key: 0,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_5$1 = { class: "flex-1 flex flex-col gap-2" };
+const _hoisted_6$1 = {
+  key: 0,
+  class: "flex flex-col gap-2"
+};
+const __default__$2 = {
+  name: "SubscriptionClientDetails"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  setup(__props) {
+    const isDesktopSize = useBreakpoint("desktop");
+    const { t } = useI18n();
+    const { customer, loading: loading2 } = useRecurringSubscriptionDetails();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(SubscriptionDetailsCard, null, {
+          default: withCtx(() => [
+            createBaseVNode("div", {
+              class: normalizeClass(["flex flex-col gap-6 w-full", { "flex-row": unref(isDesktopSize) }])
+            }, [
+              createBaseVNode("div", _hoisted_1$2, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  size: "small",
+                  "is-strong": ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("subscription.detail.registrationData")), 1)
+                  ]),
+                  _: 1
+                }),
+                unref(loading2) ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "15rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  }),
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "20rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  }),
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "12rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  })
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t)("subscription.detail.documentNumber", { documentNumber: unref(customer).document_number })), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t)("subscription.detail.email", { email: unref(customer).email })), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t)("subscription.detail.telephone", { telephone: unref(customer).telephone })), 1)
+                    ]),
+                    _: 1
+                  })
+                ], 64))
+              ]),
+              _cache[0] || (_cache[0] = createBaseVNode("div", { class: "hidden md:block w-px bg-gray-200" }, null, -1)),
+              unref(isDesktopSize) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  size: "small",
+                  "is-strong": ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("subscription.detail.address")), 1)
+                  ]),
+                  _: 1
+                }),
+                unref(loading2) ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "18rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  }),
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "12rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  }),
+                  createVNode(unref(script$3), {
+                    class: "mb-2",
+                    width: "10rem",
+                    height: "1.5rem",
+                    animation: "wave"
+                  })
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  unref(customer).address.city ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createVNode(unref(y), {
+                      class: "text-[#858585]",
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(customer).address.street), 1)
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(y), {
+                      class: "text-[#858585]",
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(customer).address.city) + ", " + toDisplayString(unref(customer).address.state), 1)
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(y), {
+                      class: "text-[#858585]",
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(" CEP: " + toDisplayString(unref(customer).address.postcode), 1)
+                      ]),
+                      _: 1
+                    })
+                  ], 64)) : (openBlock(), createBlock(unref(y), {
+                    key: 1,
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t)("subscription.detail.noAddress")), 1)
+                    ]),
+                    _: 1
+                  }))
+                ], 64))
+              ])) : createCommentVNode("", true)
+            ], 2)
+          ]),
+          _: 1
+        }),
+        !unref(isDesktopSize) ? (openBlock(), createBlock(SubscriptionDetailsCard, { key: 0 }, {
+          default: withCtx(() => [
+            createBaseVNode("div", _hoisted_5$1, [
+              createVNode(unref(y), {
+                variant: "title",
+                size: "small",
+                "is-strong": ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("subscription.detail.address")), 1)
+                ]),
+                _: 1
+              }),
+              unref(loading2) ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+                createVNode(unref(script$3), {
+                  class: "mb-2",
+                  width: "18rem",
+                  height: "1.5rem",
+                  animation: "wave"
+                }),
+                createVNode(unref(script$3), {
+                  class: "mb-2",
+                  width: "12rem",
+                  height: "1.5rem",
+                  animation: "wave"
+                }),
+                createVNode(unref(script$3), {
+                  class: "mb-2",
+                  width: "10rem",
+                  height: "1.5rem",
+                  animation: "wave"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                unref(customer).address ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(customer).address.street), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(customer).address.city) + ", " + toDisplayString(unref(customer).address.state), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(y), {
+                    class: "text-[#858585]",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(" CEP: " + toDisplayString(unref(customer).address.postcode), 1)
+                    ]),
+                    _: 1
+                  })
+                ], 64)) : (openBlock(), createBlock(unref(y), {
+                  key: 1,
+                  class: "text-[#858585]",
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("subscription.detail.noAddress")), 1)
+                  ]),
+                  _: 1
+                }))
+              ], 64))
+            ])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "flex justify-between w-full" };
+const _hoisted_2 = { class: "flex flex-col gap-6 mt-4" };
+const _hoisted_3 = { class: "flex flex-col gap-4" };
+const _hoisted_4 = {
+  key: 1,
+  class: "flex gap-1"
+};
+const _hoisted_5 = { class: "vertical-spacer" };
+const _hoisted_6 = { class: "vertical-spacer" };
+const _hoisted_7 = { class: "vertical-spacer" };
+const _hoisted_8 = {
+  key: 0,
+  class: "mt-4"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "-mb-4"
+};
+const _hoisted_10 = { key: 2 };
+const __default__$1 = {
+  name: "SubscriptionProductInfo"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  setup(__props) {
+    const isDesktopSize = useBreakpoint("desktop");
+    const route = useRoute();
+    const { t } = useI18n();
+    const { loading: loading2, product, showCancelSubscriptionModal, customer, initialize: initialize2, status } = useRecurringSubscriptionDetails();
+    const cancelLoading = ref(false);
+    const isCanceled = computed(() => {
+      var _a;
+      const normalizedStatus = ((_a = status.value) == null ? void 0 : _a.toLowerCase()) || "";
+      return normalizedStatus === "cancelado" || normalizedStatus === "canceled";
+    });
+    const customerFullName = computed(() => {
+      var _a, _b;
+      if (!((_a = customer.value) == null ? void 0 : _a.first_name) || !((_b = customer.value) == null ? void 0 : _b.last_name)) return "";
+      return `${customer.value.first_name} ${customer.value.last_name}`;
+    });
+    const productName = computed(() => {
+      var _a;
+      return ((_a = product.value) == null ? void 0 : _a.product_name) || "";
+    });
+    const siteName = computed(() => {
+      var _a;
+      return ((_a = product.value) == null ? void 0 : _a.site_name) || "";
+    });
+    const interval = computed(() => {
+      var _a;
+      return ((_a = product.value) == null ? void 0 : _a.interval) || "";
+    });
+    const nextChargeAt = computed(() => {
+      var _a;
+      return ((_a = product.value) == null ? void 0 : _a.next_charge_at) || "";
+    });
+    const paymentInfo = computed(() => {
+      var _a, _b;
+      if (!((_b = (_a = product.value) == null ? void 0 : _a.payment) == null ? void 0 : _b.info)) return null;
+      return {
+        brand: product.value.payment.info.brand,
+        final: product.value.payment.info.final,
+        installments: product.value.payment.info.installments
+      };
+    });
+    const paymentName = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = product.value) == null ? void 0 : _a.payment) == null ? void 0 : _b.name) || "";
+    });
+    const handleCancelSubscription = async () => {
+      try {
+        cancelLoading.value = true;
+        const subscriptionId = Number(route.params.id);
+        await recurringListService$1.cancelSubscription(subscriptionId);
+        toaster.success(
+          "Sucesso",
+          `A assinatura ${productName.value} de ${customerFullName.value} foi cancelada com sucesso.`
+        );
+        await initialize2();
+      } catch (error) {
+        console.error("Error canceling subscription:", error);
+        toaster.error(
+          "Erro",
+          "Não foi possível cancelar a assinatura"
+        );
+      } finally {
+        cancelLoading.value = false;
+        showCancelSubscriptionModal.value = false;
+      }
+    };
+    const copyLink = () => {
+      var _a;
+      const link = ((_a = product.value) == null ? void 0 : _a.panel_url) || "";
+      if (!link) {
+        toaster.error(
+          "Erro",
+          "Link da área do assinante não disponível"
+        );
+        return;
+      }
+      try {
+        const tempInput = document.createElement("input");
+        tempInput.value = link;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        document.execCommand("copy");
+        document.body.removeChild(tempInput);
+        toaster.success(
+          "Sucesso",
+          "Link copiado para a área do assinante"
+        );
+      } catch (error) {
+        console.error("Erro ao copiar link:", error);
+        toaster.error(
+          "Erro",
+          "Não foi possível copiar o link"
+        );
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(SubscriptionDetailsCard, null, {
+          default: withCtx(() => {
+            var _a, _b, _c, _d;
+            return [
+              createBaseVNode("div", _hoisted_1$1, [
+                unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                  key: 0,
+                  width: "10rem"
+                })) : (openBlock(), createBlock(unref(y), {
+                  key: 1,
+                  variant: "title",
+                  size: "small",
+                  "is-strong": ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(`${unref(t)("subscription.detail.product", { productName: productName.value })}`), 1)
+                  ]),
+                  _: 1
+                })),
+                unref(isDesktopSize) ? (openBlock(), createBlock(unref($), {
+                  key: 2,
+                  size: "small",
+                  text: "",
+                  disabled: unref(loading2) || isCanceled.value,
+                  class: "text-purple-500 hover:text-purple-600",
+                  onClick: _cache[0] || (_cache[0] = ($event) => showCancelSubscriptionModal.value = true)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("subscription.detail.subscriptionCancel")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : createCommentVNode("", true)
+              ]),
+              createBaseVNode("div", _hoisted_2, [
+                createBaseVNode("div", _hoisted_3, [
+                  createBaseVNode("div", null, [
+                    unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                      key: 0,
+                      width: "10rem"
+                    })) : (openBlock(), createElementBlock("div", _hoisted_4, [
+                      createVNode(unref(y), {
+                        size: "small",
+                        variant: "subtitle",
+                        class: "text-gray-500"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(unref(t)("subscription.detail.site")), 1)
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(unref(y), {
+                        variant: "subtitle",
+                        size: "small",
+                        class: "text-gray-500"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(siteName.value), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]))
+                  ]),
+                  createBaseVNode("div", {
+                    class: normalizeClass(["flex gap-8", { "flex-col": !unref(isDesktopSize) }])
+                  }, [
+                    createBaseVNode("div", _hoisted_5, [
+                      unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                        key: 0,
+                        width: "10rem"
+                      })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createVNode(unref(y), {
+                          size: "small",
+                          class: "text-gray-500 main-title"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("subscription.detail.recurrence")), 1)
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(unref(y), {
+                          variant: "title",
+                          size: "small",
+                          "is-strong": ""
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(interval.value), 1)
+                          ]),
+                          _: 1
+                        })
+                      ], 64))
+                    ]),
+                    createBaseVNode("div", _hoisted_6, [
+                      unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                        key: 0,
+                        width: "10rem"
+                      })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createVNode(unref(y), {
+                          size: "small",
+                          class: "text-gray-500 main-title"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("subscription.detail.nextChargeAt")), 1)
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(unref(y), {
+                          variant: "title",
+                          size: "small",
+                          "is-strong": ""
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(nextChargeAt.value), 1)
+                          ]),
+                          _: 1
+                        })
+                      ], 64))
+                    ]),
+                    createBaseVNode("div", _hoisted_7, [
+                      unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                        key: 0,
+                        width: "10rem"
+                      })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createVNode(unref(y), {
+                          size: "small",
+                          class: "text-gray-500 main-title"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("subscription.detail.payment")), 1)
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(unref(y), {
+                          variant: "title",
+                          size: "small",
+                          "is-strong": "",
+                          class: "flex items-center gap-2"
+                        }, {
+                          default: withCtx(() => {
+                            var _a2, _b2;
+                            return [
+                              paymentInfo.value ? (openBlock(), createBlock(unref(_), {
+                                key: 0,
+                                variant: "svg",
+                                icon: paymentInfo.value.brand.toLocaleLowerCase(),
+                                size: "2xl",
+                                class: "text-primary"
+                              }, null, 8, ["icon"])) : createCommentVNode("", true),
+                              createTextVNode(" " + toDisplayString(`${unref(t)("subscription.detail.paymentData", { name: paymentName.value, info: (_a2 = paymentInfo.value) == null ? void 0 : _a2.final })}${((_b2 = paymentInfo.value) == null ? void 0 : _b2.installments) ? ` (${paymentInfo.value.installments}x)` : ""}`), 1)
+                            ];
+                          }),
+                          _: 1
+                        })
+                      ], 64))
+                    ])
+                  ], 2),
+                  ((_a = unref(product)) == null ? void 0 : _a.panel_url) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                    unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                      key: 0,
+                      width: "10rem"
+                    })) : (openBlock(), createBlock(unref(y), {
+                      key: 1,
+                      variant: "title",
+                      size: "small",
+                      "is-strong": ""
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("subscription.detail.subscriberArea")), 1)
+                      ]),
+                      _: 1
+                    }))
+                  ])) : createCommentVNode("", true),
+                  ((_b = unref(product)) == null ? void 0 : _b.panel_url) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                      key: 0,
+                      width: "10rem"
+                    })) : (openBlock(), createBlock(unref($), {
+                      key: 1,
+                      icon: "content_copy",
+                      class: "text-copy-link",
+                      size: "small",
+                      text: "",
+                      "icon-pos": "",
+                      disabled: unref(loading2) || ((_c = unref(status)) == null ? void 0 : _c.toLowerCase()) === "cancelado",
+                      onClick: copyLink
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("subscription.detail.copyLink")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"]))
+                  ])) : createCommentVNode("", true),
+                  ((_d = unref(product)) == null ? void 0 : _d.panel_url) ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                    unref(loading2) ? (openBlock(), createBlock(unref(script$3), {
+                      key: 0,
+                      width: "10rem"
+                    })) : (openBlock(), createBlock(unref(y), {
+                      key: 1,
+                      size: "small",
+                      variant: "body"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("subscription.detail.exclusiveAccess")), 1)
+                      ]),
+                      _: 1
+                    }))
+                  ])) : createCommentVNode("", true)
+                ])
+              ])
+            ];
+          }),
+          _: 1
+        }),
+        createVNode(ConfirmationModal, {
+          visible: unref(showCancelSubscriptionModal),
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isRef(showCancelSubscriptionModal) ? showCancelSubscriptionModal.value = $event : null),
+          loading: cancelLoading.value,
+          "customer-name": customerFullName.value,
+          onConfirm: handleCancelSubscription
+        }, null, 8, ["visible", "loading", "customer-name"])
+      ], 64);
+    };
+  }
+});
+const SubscriptionProductInfo = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2913cab3"]]);
+const _hoisted_1 = { class: "flex flex-col gap-4" };
+const __default__ = { name: "DetailSubscriptionRecurring" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  setup(__props) {
+    const isDesktopSize = useBreakpoint("desktop");
+    const { initialize: initialize2 } = useRecurringSubscriptionDetails();
+    onMounted(initialize2);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$3),
+        createVNode(_sfc_main$2),
+        createVNode(SubscriptionProductInfo),
+        unref(isDesktopSize) ? (openBlock(), createBlock(_sfc_main$5, { key: 0 })) : (openBlock(), createBlock(SubscriptionInvoiceHistoryMobile, { key: 1 }))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};