@frigear-nu/subscriptions 0.0.10 → 0.1.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/subscriptions",
   "configKey": "subscriptions",
-  "version": "0.0.10",
+  "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>

package/dist/runtime/app/pages/cancel.vue.d.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/membership.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/membership.vue

@@ -9,27 +9,25 @@ const { loggedIn } = useUserSession();
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody class="space-y-8">
-        <SubscriptionStatus v-if="isActive" />
-        <div
-          v-else-if="loggedIn"
-          class="space-y-2 text-center"
-        >
-          <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
-            {{ t("status.heroTitle", "Join the team today") }}
-          </h1>
-          <p class="text-muted">
-            {{ t("status.heroDescription", "Set up your membership to get started!") }}
-          </p>
-        </div>
-        <UPageHeader
-          v-if="cancelsAt"
-          :title="t('plans.resubscribe', 'Resubscribe')"
-        />
-        <SubscriptionPlans confirm-change />
-      </UPageBody>
-    </UPage>
-  </UContainer>
+  <div class="flex flex-col gap-6">
+    <SubscriptionStatus v-if="isActive" />
+    <div
+      v-else-if="loggedIn"
+      class="flex flex-col gap-1"
+    >
+      <h2 class="text-highlighted text-lg font-semibold">
+        {{ t("status.heroTitle", "Join the team today") }}
+      </h2>
+      <p class="text-muted text-sm">
+        {{ t("status.heroDescription", "Set up your membership to get started!") }}
+      </p>
+    </div>
+    <h2
+      v-if="cancelsAt"
+      class="text-highlighted text-lg font-semibold"
+    >
+      {{ t("plans.resubscribe", "Resubscribe") }}
+    </h2>
+    <SubscriptionPlans confirm-change />
+  </div>
 </template>

package/dist/runtime/app/pages/membership.vue.d.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/success.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/success.vue

@@ -1,9 +1,9 @@
 <script setup>
-import SubscriptionStatus from "../components/SubscriptionStatus.vue";
 import { useSubscription } from "../composables/useSubscription";
 defineOptions({ name: "SubscriptionSuccessPage" });
 const t = useModuleT("subscriptions.success");
 const { refresh, isActive } = useSubscription();
+const { localize } = useLocaleLink();
 const membership = useRuntimeConfig().public.subscriptions?.pages?.membership;
 const MAX_ATTEMPTS = 40;
 const INTERVAL_MS = 3e3;
@@ -20,20 +20,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody class="space-y-6">
-        <UPageHeader
-          :title="t('title', 'Thank you!')"
-          :description="isActive ? t('activeBody', 'Your subscription is now active.') : t('body', 'Your subscription is being activated. This can take a few seconds.')"
-        />
-        <SubscriptionStatus />
-        <UButton
-          v-if="membership"
-          :to="membership"
-          :label="t('continue', 'Continue')"
-        />
-      </UPageBody>
-    </UPage>
-  </UContainer>
+  <UEmpty
+    :icon="isActive ? 'i-lucide-circle-check' : 'i-lucide-loader-circle'"
+    :title="t('title', 'Thank you!')"
+    :description="isActive ? t('activeBody', 'Your subscription is now active.') : t('body', 'Your subscription is being activated. This can take a few seconds.')"
+    :actions="membership ? [{ label: t('back', 'Back to membership'), to: localize(membership) }] : []"
+  />
 </template>

package/dist/runtime/app/pages/success.vue.d.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/tabs/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/tabs/Membership.vue

@@ -5,14 +5,16 @@ const props = defineProps({
 });
 const emit = defineEmits(["refresh"]);
 const t = useModuleT("subscriptions.admin");
+const format = useFormat();
+const UBadge = resolveComponent("UBadge");
 const { data: history, refresh: refreshHistory, status } = useLazyFetch(
   () => `/api/admin/users/${props.user.id}/subscriptions`,
   { key: () => `admin-subscriptions-${props.user.id}` }
 );
-const date = (value) => value ? new Date(value).toLocaleDateString() : "\u2013";
+const date = (value) => format.date(value) || "\u2013";
 const columns = computed(() => [
   { accessorKey: "planKey", header: t("history.plan", "Plan"), cell: ({ row }) => row.original.planKey ?? row.original.priceId },
-  { accessorKey: "status", header: t("history.status", "Status") },
+  { accessorKey: "status", header: t("history.status", "Status"), cell: ({ row }) => h(UBadge, { label: row.original.status, variant: "subtle", color: statusColor(row.original.status) }) },
   { accessorKey: "source", header: t("history.source", "Source"), cell: ({ row }) => row.original.source === "manual" ? t("free", "Free of charge") : t("paid", "Paid (Stripe)") },
   { accessorKey: "currentPeriodStart", header: t("history.started", "Started"), cell: ({ row }) => date(row.original.currentPeriodStart) },
   { accessorKey: "currentPeriodEnd", header: t("history.periodEnd", "Period end"), cell: ({ row }) => date(row.original.currentPeriodEnd) },
@@ -25,29 +27,32 @@ async function changed() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
-    <AdminSection :title="t('membership', 'Membership')">
+  <div class="flex flex-col gap-4">
+    <SectionCard :title="t('membership', 'Membership')">
       <UsersAdminMembership
         :user="user"
         @refresh="changed"
       />
-    </AdminSection>
+    </SectionCard>
 
-    <AdminSection :title="t('history.title', 'Subscription history')">
-      <template #flush>
-        <UTable
-          :data="history?.subscriptions ?? []"
-          :columns="columns"
-          :loading="status === 'pending'"
-        >
-          <template #empty>
-            <AdminEmpty
-              icon="i-lucide-badge-check"
-              :title="t('history.empty', 'No subscriptions yet.')"
-            />
-          </template>
-        </UTable>
-      </template>
-    </AdminSection>
+    <SectionCard
+      :title="t('history.title', 'Subscription history')"
+      flush
+    >
+      <UTable
+        :data="history?.subscriptions ?? []"
+        :columns="columns"
+        :loading="status === 'pending'"
+        :ui="tableUi({ tr: '' })"
+      >
+        <template #empty>
+          <UEmpty
+            variant="naked"
+            icon="i-lucide-badge-check"
+            :title="t('history.empty', 'No subscriptions yet.')"
+          />
+        </template>
+      </UTable>
+    </SectionCard>
   </div>
 </template>

package/dist/runtime/app/tabs/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/widgets/AdminCurrentSubscription.d.vue.ts

@@ -6,6 +6,6 @@ type __VLS_Props = {
         } | null;
     };
 };
-declare const __VLS_export: 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_export: 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 _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/widgets/AdminCurrentSubscription.vue

@@ -7,17 +7,21 @@ const t = useModuleT("subscriptions.admin");
 </script>
 
 <template>
-  <AdminStatCard
+  <StatCard
     :label="t('currentSubscription', 'Current subscription')"
+    icon="i-lucide-badge-check"
     :empty="t('none', 'No active membership.')"
   >
-    <template v-if="user.subscription">
+    <template
+      v-if="user.subscription"
+      #default
+    >
       <UBadge
         variant="subtle"
-        :color="['active', 'trialing'].includes(user.subscription.status) ? 'success' : 'neutral'"
+        :color="statusColor(user.subscription.status)"
         :label="user.subscription.planKey ?? user.subscription.status"
       />
-      <span class="text-muted">{{ user.subscription.status }}</span>
+      <span class="text-muted text-sm font-normal">{{ user.subscription.status }}</span>
     </template>
-  </AdminStatCard>
+  </StatCard>
 </template>

package/dist/runtime/app/widgets/AdminCurrentSubscription.vue.d.ts

@@ -6,6 +6,6 @@ type __VLS_Props = {
         } | null;
     };
 };
-declare const __VLS_export: 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_export: 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 _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/widgets/MembershipSummary.d.vue.ts

@@ -0,0 +1,3 @@
+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/widgets/MembershipSummary.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { usePlans } from "../composables/usePlans";
+import { useSubscription } from "../composables/useSubscription";
+defineOptions({ name: "SubscriptionsMembershipSummary" });
+const t = useModuleT("subscriptions.overview");
+const ts = useModuleT("subscriptions.status");
+const tp = useModuleT("subscriptions.catalog");
+const format = useFormat();
+const { localize } = useLocaleLink();
+const { plans } = usePlans();
+const { subscription, plan, status, isActive, cancelsAt } = useSubscription();
+const membership = useRuntimeConfig().public.subscriptions?.pages?.membership;
+const planLabel = computed(() => {
+  if (!plan.value) return "";
+  return tp(`${plan.value}.label`, plans.value.find((p) => p.key === plan.value)?.label ?? plan.value);
+});
+const hint = computed(() => {
+  const end = subscription.value?.currentPeriodEnd;
+  if (!end) return void 0;
+  const date = format.date(end);
+  if (subscription.value?.source === "manual") return ts("freeUntil", "Free membership until {date}", { date });
+  return cancelsAt.value ? ts("cancels", "Ends on {date}", { date }) : ts("renews", "Renews on {date}", { date });
+});
+</script>
+
+<template>
+  <StatCard
+    :label="t('label', 'Membership')"
+    icon="i-lucide-credit-card"
+    :to="membership ? localize(membership) : void 0"
+    :loading="status === 'pending' && !subscription"
+    :value="isActive ? planLabel : void 0"
+    :hint="isActive ? hint : void 0"
+    :empty="t('none', 'No active membership')"
+  />
+</template>

package/dist/runtime/app/widgets/MembershipSummary.vue.d.ts

@@ -0,0 +1,3 @@
+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/i18n/lang/da.json

@@ -20,7 +20,8 @@
       "confirmDowngrade": "Hvis du nedgraderer, kører dit nuværende abonnement til næste forfaldsdato, hvorefter det skifter.",
       "subscribeTo": "Du abonnerer nu på:",
       "changeTitle": "Opdatér abonnement",
-      "checkoutTitle": "Bliv medlem"
+      "checkoutTitle": "Bliv medlem",
+      "confirmResume": "Dit medlemskab fornyes som hidtil."
     },
     "interval": {
       "day": "dag",
@@ -61,12 +62,12 @@
       "title": "Tak!",
       "body": "Dit abonnement bliver aktiveret. Det kan tage et par sekunder.",
       "activeBody": "Dit abonnement er aktiveret.",
-      "continue": "Fortsæt"
+      "back": "Tilbage til medlemskab"
     },
     "cancel": {
       "title": "Betaling annulleret",
       "body": "Der blev ikke foretaget ændringer, og du er ikke blevet opkrævet.",
-      "back": "Tilbage til planer"
+      "back": "Tilbage til medlemskab"
     },
     "errors": {
       "checkout": "Kunne ikke starte betalingen.",
@@ -113,7 +114,18 @@
         "started": "Startet",
         "periodEnd": "Periodeslut",
         "ended": "Afsluttet"
-      }
+      },
+      "type": "Type",
+      "validUntil": "Gyldigt til",
+      "status": "Status",
+      "revokeTitle": "Fjern det gratis medlemskab for {name}?",
+      "revokeBody": "Brugeren mister medlemsfordelene med det samme. Et betalt abonnement påvirkes ikke.",
+      "revokeConfirm": "Fjern gratis medlemskab"
+    },
+    "overview": {
+      "label": "Medlemskab",
+      "none": "Intet aktivt medlemskab",
+      "manage": "Administrér medlemskab"
     }
   }
 }

package/dist/runtime/i18n/lang/en.json

@@ -20,7 +20,8 @@
       "confirmDowngrade": "If you downgrade, your current subscription runs until the next due date, then switches.",
       "subscribeTo": "You will now subscribe to:",
       "changeTitle": "Update subscription",
-      "checkoutTitle": "Get a membership"
+      "checkoutTitle": "Get a membership",
+      "confirmResume": "Your membership will keep renewing as before."
     },
     "interval": {
       "day": "day",
@@ -61,12 +62,12 @@
       "title": "Thank you!",
       "body": "Your subscription is being activated. This can take a few seconds.",
       "activeBody": "Your subscription is now active.",
-      "continue": "Continue"
+      "back": "Back to membership"
     },
     "cancel": {
       "title": "Checkout canceled",
       "body": "No changes were made and you have not been charged.",
-      "back": "Back to plans"
+      "back": "Back to membership"
     },
     "errors": {
       "checkout": "Failed to start checkout.",
@@ -113,7 +114,18 @@
         "started": "Started",
         "periodEnd": "Period end",
         "ended": "Ended"
-      }
+      },
+      "type": "Type",
+      "validUntil": "Valid until",
+      "status": "Status",
+      "revokeTitle": "Revoke the free membership of {name}?",
+      "revokeBody": "They lose the membership benefits right away. A paid subscription is not affected.",
+      "revokeConfirm": "Revoke free membership"
+    },
+    "overview": {
+      "label": "Membership",
+      "none": "No active membership",
+      "manage": "Manage membership"
     }
   }
 }

package/dist/runtime/menus.js

@@ -2,7 +2,7 @@ import { defineMenuItem, defineMenuSource, extendMenuItem } from "@frigear-nu/me
 export default defineMenuSource(() => {
   const config = useRuntimeConfig().public.subscriptions;
   if (config?.pages?.membership) {
-    const item = defineMenuItem({
+    extendMenuItem("account", defineMenuItem({
       id: "subscription",
       label: "Subscription",
       labelKey: "subscriptions.menu.subscription.label",
@@ -10,9 +10,7 @@ export default defineMenuSource(() => {
       descriptionKey: "subscriptions.menu.subscription.description",
       icon: "i-lucide-credit-card",
       to: config.pages.membership,
-      order: 30
-    });
-    extendMenuItem("account", item);
-    extendMenuItem("dashboard.account", item);
+      order: 15
+    }));
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/subscriptions",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "Recurring subscriptions (plans, checkout, upgrade/downgrade, billing portal and entitlements) for the frigear ecosystem, built on @frigear-nu/stripe.",
   "homepage": "https://docs.frigear.dev/modules/subscriptions",
   "repository": {
@@ -30,14 +30,14 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/auth": "0.0.5",
-    "@frigear-nu/mcp": "0.0.5",
-    "@frigear-nu/module-kit": "1.0.1",
-    "@frigear-nu/stripe": "0.0.10",
-    "@frigear-nu/ui": "0.0.9",
-    "@frigear-nu/users": "1.0.11",
+    "@frigear-nu/auth": "0.1.0",
+    "@frigear-nu/mcp": "0.1.0",
+    "@frigear-nu/module-kit": "1.1.0",
+    "@frigear-nu/stripe": "0.1.0",
+    "@frigear-nu/ui": "0.1.0",
+    "@frigear-nu/users": "1.1.0",
     "@libsql/client": "^0.18.0",
-    "@nuxt/kit": "^4.6.0",
+    "@nuxt/kit": "^4.6.1",
     "@vueuse/core": "^15.0.0",
     "drizzle-kit": "^0.31.11",
     "drizzle-orm": "^0.45.3",
@@ -47,9 +47,9 @@
     "zod": "^4.6.5"
   },
   "peerDependencies": {
-    "@frigear-nu/menu": "0.0.11",
-    "@frigear-nu/widget": "0.0.4",
-    "@nuxt/ui": "^4.10.0",
+    "@frigear-nu/menu": "0.1.0",
+    "@frigear-nu/widget": "0.1.0",
+    "@nuxt/ui": "^4.11.2",
     "@nuxthub/core": "^0.10.8"
   },
   "peerDependenciesMeta": {
@@ -64,21 +64,21 @@
     }
   },
   "devDependencies": {
-    "@frigear-nu/menu": "0.0.11",
-    "@frigear-nu/widget": "0.0.4",
+    "@frigear-nu/menu": "0.1.0",
+    "@frigear-nu/widget": "0.1.0",
     "@nuxt/devtools": "^3.4.2",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/module-builder": "^1.0.3",
-    "@nuxt/schema": "^4.6.0",
+    "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.0",
+    "@nuxt/ui": "^4.11.2",
     "@nuxthub/core": "^0.10.8",
-    "@types/node": "latest",
+    "@types/node": "^26.6.5",
     "changelogen": "^0.6.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.12.0",
     "nuxt": "^4.6.1",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.1",
+    "vitest": "^5.0.2",
     "vue-tsc": "^3.3.11"
   },
   "scripts": {