@frigear-nu/subscriptions 0.0.9 → 0.1.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/subscriptions",
   "configKey": "subscriptions",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -22,11 +22,13 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/mcp": { version: ">=0.0.1" },
     "@frigear-nu/users": { version: ">=0.0.1" },
     "@frigear-nu/stripe": { version: ">=0.0.1" },
+    // The pages and admin pieces are built from its components and composables (`SectionCard`, `useFormat`, ...).
+    "@frigear-nu/ui": { version: ">=0.0.1" },
     "@frigear-nu/menu": { version: ">=0.0.1", optional: true },
     // Membership invoices are only announced (and stored as payments) when it is installed.
     "@frigear-nu/payments": { version: ">=0.0.0", optional: true },
     "@frigear-nu/widget": { version: ">=0.0.0", optional: true },
-    // The admin user tab and card are built from its components, so they are only added with it.
+    // The admin user tab and card live on its admin user page, so they are only added with it.
     "@frigear-nu/admin": { version: ">=0.0.0", optional: true }
   },
   async setup(options, nuxt) {
@@ -63,8 +65,7 @@ const module$1 = defineNuxtModule({
       plans: planEntries.map(([key, plan]) => ({ key, label: plan.label ?? key, description: plan.description, rank: plan.rank, features: plan.features })).sort((a, b) => a.rank - b.rank),
       allowChangeInPortal: settings.allowChangeInPortal === true
     };
-    await registerDatabaseTable(nuxt, {
-      name: "subscriptions",
+    registerDatabaseTable(nuxt, {
       resolver,
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
@@ -145,7 +146,11 @@ const module$1 = defineNuxtModule({
       { name: "subscriptions-success", path: successPath, file: "./runtime/app/pages/success.vue" },
       { name: "subscriptions-cancel", path: cancelPath, file: "./runtime/app/pages/cancel.vue" }
     ]);
-    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "account" });
+    if (membershipPath && hasNuxtModule("@frigear-nu/widget", nuxt)) {
+      const { extendWidgets } = await import('@frigear-nu/widget/utils');
+      extendWidgets(nuxt, "account.overview", { id: "subscriptions-membership", component: resolver.resolve("./runtime/app/widgets/MembershipSummary.vue"), order: 10 });
+    }
   }
 });
 

package/dist/runtime/app/components/SubscriptionPlans.d.vue.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
     /** Plan key to emphasise (defaults to the current plan, when subscribed). */
     highlight?: string;
 };
-declare function formatPrice(price: SubscriptionPlanPrice): string;
+declare function formatPrice(price: SubscriptionPlanPrice): any;
 declare function intervalLabel(price: SubscriptionPlanPrice): any;
 declare var __VLS_14: {
     plan: SubscriptionPlan;
@@ -60,11 +60,11 @@ type __VLS_Slots = {} & {
 } & {
     'confirm-actions'?: (props: typeof __VLS_74) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/SubscriptionPlans.vue

@@ -20,6 +20,7 @@ const ti = useModuleT("subscriptions.interval");
 const { plans: allPlans, status } = usePlans();
 const { plan: currentPlan, isActive, cancelsAt, pending, subscribe, error, status: subscriptionStatus } = useSubscription();
 const { loggedIn } = useUserSession();
+const format = useFormat();
 const route = useRoute();
 const [DefineCard, ReuseCard] = createReusableTemplate();
 const visible = computed(() => allPlans.value.filter((p) => !props.plans || props.plans.includes(p.key)));
@@ -29,7 +30,8 @@ function priceFor(plan) {
 }
 function formatPrice(price) {
   if (price.amount === null) return "";
-  return formatMoney(price.amount, props.currency ?? price.currency, props.locale);
+  const currency = props.currency ?? price.currency;
+  return props.locale ? formatMoney(price.amount, currency, props.locale) : format.money(price.amount, currency);
 }
 function intervalLabel(price) {
   const singular = { day: "day", week: "week", month: "month", year: "year" };
@@ -296,6 +298,7 @@ watch([visible, subscriptionStatus, loggedIn], () => {
         >
           <div class="flex w-full justify-end gap-2">
             <UButton
+              color="neutral"
               variant="outline"
               :label="t('cancel', 'Cancel')"
               @click="confirming = null"

package/dist/runtime/app/components/SubscriptionPlans.vue.d.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
     /** Plan key to emphasise (defaults to the current plan, when subscribed). */
     highlight?: string;
 };
-declare function formatPrice(price: SubscriptionPlanPrice): string;
+declare function formatPrice(price: SubscriptionPlanPrice): any;
 declare function intervalLabel(price: SubscriptionPlanPrice): any;
 declare var __VLS_14: {
     plan: SubscriptionPlan;
@@ -60,11 +60,11 @@ type __VLS_Slots = {} & {
 } & {
     'confirm-actions'?: (props: typeof __VLS_74) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/SubscriptionStatus.d.vue.ts

@@ -14,7 +14,12 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
     dateText: any;
 }, __VLS_25: {}, __VLS_33: {
     manage: () => Promise<void | undefined>;
-    resubscribe: () => Promise<any>;
+    resubscribe: () => Promise<({
+        url: string;
+    } | {
+        updated: true;
+        kind: "upgrade" | "downgrade" | "resume";
+    }) | undefined>;
     cancelling: boolean;
     pending: any;
 };
@@ -33,7 +38,7 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_33) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/SubscriptionStatus.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { formatDate as formatDateValue } from "@frigear-nu/ui/utils";
 import { usePlans } from "../composables/usePlans";
 import { useSubscription } from "../composables/useSubscription";
 defineOptions({ name: "SubscriptionStatus" });
@@ -7,6 +8,7 @@ const props = defineProps({
 });
 const t = useModuleT("subscriptions.status");
 const tp = useModuleT("subscriptions.catalog");
+const format = useFormat();
 const { plans } = usePlans();
 const { subscription, plan, status, isActive, cancelsAt, pending, error, subscribe, openPortal } = useSubscription();
 const planLabel = computed(() => {
@@ -16,15 +18,13 @@ const planLabel = computed(() => {
 const badge = computed(() => {
   const value = subscription.value?.status;
   if (cancelsAt.value) return { label: t("cancelling", "Subscription is ending"), color: "warning", icon: "i-lucide-battery-warning" };
-  if (value === "active") return { label: t("active", "Active"), color: "success", icon: "i-lucide-shield-check" };
-  if (value === "trialing") return { label: t("trialing", "Trial"), color: "info" };
-  if (value === "past_due" || value === "unpaid") return { label: t("pastDue", "Past due"), color: "warning" };
-  if (value === "canceled") return { label: t("canceled", "Canceled"), color: "neutral" };
-  return { label: t("other", "Inactive"), color: "neutral" };
+  if (value === "active") return { label: t("active", "Active"), color: statusColor(value), icon: "i-lucide-shield-check" };
+  if (value === "trialing") return { label: t("trialing", "Trial"), color: statusColor(value) };
+  if (value === "past_due" || value === "unpaid") return { label: t("pastDue", "Past due"), color: statusColor("past_due") };
+  if (value === "canceled") return { label: t("canceled", "Canceled"), color: statusColor(value) };
+  return { label: t("other", "Inactive"), color: statusColor(value) };
 });
-function formatDate(value) {
-  return value ? new Intl.DateTimeFormat(props.locale, { dateStyle: "long" }).format(new Date(value)) : "";
-}
+const formatDate = (value) => formatDateValue(value, props.locale ?? format.locale.value, { dateStyle: "long" });
 const isManual = computed(() => subscription.value?.source === "manual");
 const dateText = computed(() => {
   const end = subscription.value?.currentPeriodEnd;
@@ -37,20 +37,22 @@ const manage = () => openPortal().catch(() => void 0);
 </script>
 
 <template>
-  <UCard :ui="{ root: 'rounded-xl' }">
-    <template #header>
-      <slot name="header">
-        <h3 class="font-semibold">
-          {{ t("title", "Your subscription") }}
-        </h3>
-      </slot>
+  <SectionCard
+    :title="t('title', 'Your subscription')"
+    icon="i-lucide-credit-card"
+  >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
     </template>
 
     <slot
       v-if="status === 'pending' && !subscription"
       name="loading"
     >
-      <p class="text-sm text-muted">
+      <p class="text-muted text-sm">
         {{ t("loading", "Loading subscription\u2026") }}
       </p>
     </slot>
@@ -61,14 +63,14 @@ const manage = () => openPortal().catch(() => void 0);
     >
       <div class="flex items-center justify-between gap-2">
         <div class="flex flex-col">
-          <span class="text-sm text-muted">{{ t("currentPlan", "Current plan") }}</span>
+          <span class="text-muted text-sm">{{ t("currentPlan", "Current plan") }}</span>
           <slot
             name="plan"
             :plan="plan"
             :label="planLabel"
             :subscription="subscription"
           >
-            <span class="text-lg font-semibold">{{ planLabel }}</span>
+            <span class="text-highlighted text-lg font-semibold">{{ planLabel }}</span>
           </slot>
         </div>
         <slot
@@ -79,7 +81,7 @@ const manage = () => openPortal().catch(() => void 0);
           <UBadge
             :color="badge.color"
             :icon="badge.icon"
-            variant="soft"
+            variant="subtle"
           >
             {{ badge.label }}
           </UBadge>
@@ -93,7 +95,7 @@ const manage = () => openPortal().catch(() => void 0);
       >
         <div
           v-if="dateText"
-          class="rounded-md bg-muted/50 px-4 py-3 text-sm"
+          class="bg-muted/50 rounded-md px-4 py-3 text-sm"
         >
           {{ dateText }}
         </div>
@@ -104,7 +106,7 @@ const manage = () => openPortal().catch(() => void 0);
       v-else
       name="empty"
     >
-      <p class="text-sm text-muted">
+      <p class="text-muted text-sm">
         {{ t("none", "You do not have an active subscription.") }}
       </p>
     </slot>
@@ -146,6 +148,7 @@ const manage = () => openPortal().catch(() => void 0);
             @click="resubscribe"
           />
           <UButton
+            color="neutral"
             variant="outline"
             icon="i-lucide-credit-card"
             :loading="pending"
@@ -155,5 +158,5 @@ const manage = () => openPortal().catch(() => void 0);
         </div>
       </slot>
     </template>
-  </UCard>
+  </SectionCard>
 </template>

package/dist/runtime/app/components/SubscriptionStatus.vue.d.ts

@@ -14,7 +14,12 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
     dateText: any;
 }, __VLS_25: {}, __VLS_33: {
     manage: () => Promise<void | undefined>;
-    resubscribe: () => Promise<any>;
+    resubscribe: () => Promise<({
+        url: string;
+    } | {
+        updated: true;
+        kind: "upgrade" | "downgrade" | "resume";
+    }) | undefined>;
     cancelling: boolean;
     pending: any;
 };
@@ -33,7 +38,7 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_33) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Users/Admin/Membership.d.vue.ts

@@ -5,10 +5,10 @@ type __VLS_Props = {
         email: string;
     };
 };
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     refresh: () => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRefresh?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Users/Admin/Membership.vue

@@ -5,7 +5,13 @@ const props = defineProps({
 });
 const emit = defineEmits(["refresh"]);
 const t = useModuleT("subscriptions.admin");
+const format = useFormat();
+const confirm = useConfirmDialog();
+const { copy } = useCopyToClipboard();
 const toast = useToast();
+const grantAction = useAction();
+const linkAction = useAction();
+const revokeAction = useAction();
 const base = computed(() => `/api/admin/users/${props.user.id}/subscription`);
 const { data, refresh, status } = useLazyFetch(() => base.value, { key: () => `admin-membership-${props.user.id}` });
 const loading = computed(() => status.value === "pending" && !data.value);
@@ -13,106 +19,100 @@ const planKey = ref(void 0);
 const endsAt = ref("");
 const emailUser = ref(true);
 const link = ref(null);
-const busy = ref(null);
 const planItems = computed(() => (data.value?.plans ?? []).map((plan) => ({ label: plan.label, value: plan.key })));
 watchEffect(() => {
   if (!planKey.value && planItems.value.length) planKey.value = planItems.value[0].value;
 });
 const current = computed(() => data.value?.current ?? null);
 const planLabel = (key) => planItems.value.find((item) => item.value === key)?.label ?? key ?? "\u2013";
-const formatDate = (value) => new Date(value).toLocaleDateString();
-function fail(cause) {
-  toast.add({ title: cause.statusMessage ?? t("error", "Something went wrong."), color: "error" });
-}
+const details = computed(() => [
+  { key: "plan", label: t("plan", "Plan") },
+  { key: "type", label: t("type", "Type"), value: current.value?.source === "manual" ? t("free", "Free of charge") : t("paid", "Paid (Stripe)") },
+  {
+    key: "validUntil",
+    label: t("validUntil", "Valid until"),
+    value: current.value?.currentPeriodEnd ? format.date(current.value.currentPeriodEnd) : t("openEnded", "No end date")
+  }
+]);
 async function changed() {
   await refresh();
   emit("refresh");
 }
-async function run(kind, action) {
-  busy.value = kind;
-  try {
-    await action();
-  } catch (cause) {
-    fail(cause);
-  } finally {
-    busy.value = null;
-  }
-}
-const grant = () => run("grant", async () => {
+const grant = () => grantAction.run(async () => {
   await $fetch(base.value, {
     method: "POST",
     body: { planKey: planKey.value, endsAt: endsAt.value ? (/* @__PURE__ */ new Date(`${endsAt.value}T23:59:59`)).toISOString() : null }
   });
   link.value = null;
-  toast.add({ title: t("granted", "Membership granted."), color: "success" });
   await changed();
-});
-const revoke = () => run("revoke", async () => {
-  await $fetch(base.value, { method: "DELETE" });
-  toast.add({ title: t("revoked", "Membership revoked."), color: "success" });
-  await changed();
-});
-const sendLink = () => run("link", async () => {
-  const result = await $fetch(`${base.value}/payment-link`, {
+}, { success: t("granted", "Membership granted."), error: t("error", "Something went wrong.") });
+async function revoke() {
+  const confirmed = await confirm({
+    title: t("revokeTitle", "Revoke the free membership of {name}?", { name: props.user.name }),
+    description: t("revokeBody", "They lose the membership benefits right away. A paid subscription is not affected."),
+    confirmText: t("revokeConfirm", "Revoke free membership"),
+    destructive: true
+  });
+  if (!confirmed) return;
+  await revokeAction.run(async () => {
+    await $fetch(base.value, { method: "DELETE" });
+    await changed();
+  }, { success: t("revoked", "Membership revoked."), error: t("error", "Something went wrong.") });
+}
+async function sendLink() {
+  const result = await linkAction.run(() => $fetch(`${base.value}/payment-link`, {
     method: "POST",
     body: { planKey: planKey.value, email: emailUser.value }
-  });
+  }), { error: t("error", "Something went wrong.") });
+  if (!result) return;
   link.value = result.url;
-  toast.add({ title: result.emailed ? t("linkEmailed", "Payment link created and emailed.") : t("linkCreated", "Payment link created."), color: "success" });
-});
-async function copy() {
-  if (!link.value) return;
-  try {
-    await navigator.clipboard.writeText(link.value);
-    toast.add({ title: t("copied", "Link copied."), color: "success" });
-  } catch (cause) {
-    fail(cause);
-  }
+  toast.add({
+    title: result.emailed ? t("linkEmailed", "Payment link created and emailed.") : t("linkCreated", "Payment link created."),
+    color: "success",
+    icon: "i-lucide-check"
+  });
 }
 </script>
 
 <template>
-  <div class="space-y-4">
-    <div
-      v-if="loading"
-      class="space-y-2"
-    >
-      <USkeleton class="h-6 w-1/2" />
-      <USkeleton class="h-9 w-2/3" />
-    </div>
-    <div
-      v-else
-      class="flex flex-wrap items-center gap-2 text-sm"
-    >
-      <template v-if="current">
-        <UBadge
-          variant="subtle"
-          :color="current.source === 'manual' ? 'info' : 'success'"
-          :label="planLabel(current.planKey)"
-        />
-        <span class="text-muted">
-          {{ current.source === "manual" ? t("free", "Free of charge") : t("paid", "Paid (Stripe)") }}
-          ·
-          {{ current.currentPeriodEnd ? t("until", "until {date}", { date: formatDate(current.currentPeriodEnd) }) : t("openEnded", "No end date") }}
-        </span>
+  <div class="flex flex-col gap-4">
+    <template v-if="current">
+      <DescriptionList
+        :items="details"
+      >
+        <template #plan>
+          <UBadge
+            variant="subtle"
+            :color="current.source === 'manual' ? 'info' : statusColor('active')"
+            :label="planLabel(current.planKey)"
+          />
+        </template>
+      </DescriptionList>
+      <div v-if="current.source === 'manual'">
         <UButton
-          v-if="current.source === 'manual'"
           color="error"
           variant="soft"
           size="sm"
           icon="i-lucide-user-x"
-          :loading="busy === 'revoke'"
+          :loading="revokeAction.busy.value"
           :label="t('revoke', 'Revoke free membership')"
           @click="revoke"
         />
-      </template>
-      <p
-        v-else
-        class="text-muted"
-      >
-        {{ t("none", "No active membership.") }}
-      </p>
+      </div>
+    </template>
+    <div
+      v-else-if="loading"
+      class="space-y-2"
+    >
+      <USkeleton class="h-6 w-1/2" />
+      <USkeleton class="h-9 w-2/3" />
     </div>
+    <p
+      v-else
+      class="text-muted text-sm"
+    >
+      {{ t("none", "No active membership.") }}
+    </p>
 
     <p
       v-if="!loading && current && current.source !== 'manual'"
@@ -122,7 +122,7 @@ async function copy() {
     </p>
     <div
       v-else-if="!loading && planItems.length"
-      class="space-y-3"
+      class="flex flex-col gap-3"
     >
       <div class="flex flex-wrap items-end gap-3">
         <UFormField :label="t('plan', 'Plan')">
@@ -142,7 +142,7 @@ async function copy() {
         <UButton
           icon="i-lucide-gift"
           :disabled="!planKey"
-          :loading="busy === 'grant'"
+          :loading="grantAction.busy.value"
           :label="t('grant', 'Grant free')"
           @click="grant"
         />
@@ -154,7 +154,7 @@ async function copy() {
           variant="outline"
           icon="i-lucide-link"
           :disabled="!planKey"
-          :loading="busy === 'link'"
+          :loading="linkAction.busy.value"
           :label="t('sendLink', 'Send payment link')"
           @click="sendLink"
         />
@@ -164,29 +164,25 @@ async function copy() {
         />
       </div>
 
-      <div
-        v-if="link"
-        class="flex items-center gap-2"
-      >
-        <UInput
-          :model-value="link"
-          readonly
-          class="flex-1"
-        />
-        <UButton
-          color="neutral"
-          variant="soft"
-          icon="i-lucide-copy"
-          :label="t('copy', 'Copy link')"
-          @click="copy"
-        />
-      </div>
-      <p
-        v-if="link"
-        class="text-muted text-xs"
-      >
-        {{ t("linkHint", "The link is valid for 24 hours.") }}
-      </p>
+      <template v-if="link">
+        <div class="flex items-center gap-2">
+          <UInput
+            :model-value="link"
+            readonly
+            class="flex-1"
+          />
+          <UButton
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-copy"
+            :label="t('copy', 'Copy link')"
+            @click="copy(link, t('copied', 'Link copied.'))"
+          />
+        </div>
+        <p class="text-muted text-xs">
+          {{ t("linkHint", "The link is valid for 24 hours.") }}
+        </p>
+      </template>
     </div>
   </div>
 </template>

package/dist/runtime/app/components/Users/Admin/Membership.vue.d.ts

@@ -5,10 +5,10 @@ type __VLS_Props = {
         email: string;
     };
 };
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     refresh: () => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRefresh?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/composables/useSubscription.d.ts

@@ -10,6 +10,12 @@ export interface UserSubscription {
     endedAt: string | null;
     source?: 'stripe' | 'manual';
 }
+type CheckoutResponse = {
+    url: string;
+} | {
+    updated: true;
+    kind: 'upgrade' | 'downgrade' | 'resume';
+};
 export declare const useSubscription: () => {
     subscription: any;
     plan: any;
@@ -23,6 +29,7 @@ export declare const useSubscription: () => {
     subscribe: (planKeyOrPriceId: string, options?: {
         successUrl?: string;
         cancelUrl?: string;
-    }) => Promise<any>;
+    }) => Promise<CheckoutResponse>;
     openPortal: (returnUrl?: string) => Promise<void>;
 };
+export {};

package/dist/runtime/app/pages/cancel.d.vue.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/pages/cancel.vue

@@ -1,23 +1,15 @@
 <script setup>
 defineOptions({ name: "SubscriptionCancelPage" });
 const t = useModuleT("subscriptions.cancel");
+const { localize } = useLocaleLink();
 const membership = useRuntimeConfig().public.subscriptions?.pages?.membership;
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody class="space-y-6">
-        <UPageHeader
-          :title="t('title', 'Checkout canceled')"
-          :description="t('body', 'No changes were made and you have not been charged.')"
-        />
-        <UButton
-          v-if="membership"
-          :to="membership"
-          :label="t('back', 'Back to plans')"
-        />
-      </UPageBody>
-    </UPage>
-  </UContainer>
+  <UEmpty
+    icon="i-lucide-circle-x"
+    :title="t('title', 'Checkout canceled')"
+    :description="t('body', 'No changes were made and you have not been charged.')"
+    :actions="membership ? [{ label: t('back', 'Back to membership'), to: localize(membership) }] : []"
+  />
 </template>