@frigear-nu/subscriptions 0.1.2 → 0.2.0

package/README.md

@@ -13,7 +13,7 @@ webhook) and [`@frigear-nu/users`](../users). One-off payments are out of scope.
 - 🔐 Entitlement utils (`hasActiveSubscription`, `getUserSubscription`) and a `subscription` route middleware.
 - 🧩 `usePlans` / `useSubscription` composables, `SubscriptionPlans` / `SubscriptionStatus` components with slots and
   optional i18n, and opt-in membership/success/cancel pages (built with [`@nuxt/ui`](https://ui.nuxt.com)).
-- 🗂️ Contributes a "Subscription" item to `@frigear-nu/menu` (when installed).
+- 🗂️ Contributes a "Membership" item to `@frigear-nu/menu` (when installed).
 
 ## Quick Setup
 
@@ -77,12 +77,12 @@ a local user are logged and ignored.
 
 - `GET /api/subscriptions/plans` - public; `{ plans }` with live prices, after the `subscriptions:plans:filter` hook.
 - `GET /api/subscriptions/me` - `{ subscriptions, activePlan }` (401 when signed out).
-- `POST /api/subscriptions/checkout` - body `{ planKey?, priceId?, successUrl?, cancelUrl? }` (one of `planKey`/`priceId`
+- `POST /api/subscriptions/me/checkout` - session only (a bearer token gets 403 `session_required`); body `{ planKey?, priceId?, successUrl?, cancelUrl? }` (one of `planKey`/`priceId`
   required; a multi-price plan needs `priceId`). Returns `{ url }` (new Checkout Session) or
   `{ updated: true, kind: 'upgrade' | 'downgrade' }`. A higher rank upgrades immediately (`always_invoice` proration);
   a lower or equal rank (including monthly to yearly of one plan) is scheduled for period end. `400` for unknown or hidden
   plans/prices and URLs outside the request origin, `409` when already on that price.
-- `POST /api/subscriptions/portal` - body `{ returnUrl? }`; returns `{ url }` of a billing portal session.
+- `POST /api/subscriptions/me/portal` - session only; body `{ returnUrl? }`; returns `{ url }` of a billing portal session.
 
 ## Policy hooks
 

package/dist/module.d.mts

@@ -140,7 +140,7 @@ type PlansFilterContext = {
     /** The plans about to be returned. Mutate or reassign `plans` to hide / reorder them. */
     plans: ResolvedPlan[];
 };
-/** `GET /api/admin/users/:id/subscription` (staff). */
+/** `GET /api/admin/users/:id/membership` (staff). */
 type AdminMembershipResponse = {
     plans: Array<{
         key: string;
@@ -156,7 +156,7 @@ type AdminMembershipResponse = {
         cancelAtPeriodEnd: boolean;
     } | null;
 };
-/** `POST /api/admin/users/:id/subscription/payment-link` (staff). */
+/** `POST /api/admin/users/:id/membership/payment-link` (staff). */
 type AdminPaymentLinkResponse = {
     url: string;
     emailed: boolean;

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,5 @@
-import { defineNuxtModule, createResolver, hasNuxtModule, addServerHandler, addServerImportsDir, addImports, addComponentsDir, addRouteMiddleware } from '@nuxt/kit';
-import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, moduleApiUrl, registerBootstrapProvider, inlineModuleRuntime, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
+import { defineNuxtModule, createResolver, hasNuxtModule, addServerImportsDir, addImports, addComponentsDir, addRouteMiddleware } from '@nuxt/kit';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, addModuleRoutes, registerBootstrapProvider, inlineModuleRuntime, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 import { addAuthScope } from '@frigear-nu/auth/utils';
 import { extendUsersAdmin } from '@frigear-nu/users/utils';
 import { addMcpDefinitions } from '@frigear-nu/mcp/utils';
@@ -37,8 +37,7 @@ const module$1 = defineNuxtModule({
     registerModule(MODULE_NAME, nuxt);
     addAuthScope(
       nuxt,
-      { name: "subscriptions:read", description: "Read your subscription and plans" },
-      { name: "subscriptions:write", description: "Start a subscription checkout" }
+      { name: "subscriptions:read", description: "Read your subscription and plans" }
     );
     const resolver = createResolver(import.meta.url);
     registerTailwindSource(nuxt, resolver.resolve("./runtime/app"));
@@ -87,44 +86,30 @@ const module$1 = defineNuxtModule({
         handler: resolver.resolve("./runtime/server/stripe/invoice-events")
       });
     }
-    addServerHandler({
-      route: moduleApiUrl("subscriptions", "plans"),
-      method: "get",
-      handler: resolver.resolve("./runtime/server/routes/subscriptions/plans.get")
-    });
-    addServerHandler({
-      route: moduleApiUrl("subscriptions", "me"),
-      method: "get",
-      handler: resolver.resolve("./runtime/server/routes/subscriptions/me.get")
-    });
+    addModuleRoutes(resolver, [
+      { method: "get", path: "plans", file: "subscriptions/plans.get" },
+      { method: "get", path: "me", file: "subscriptions/me.get" },
+      { method: "post", path: "me/checkout", file: "me/checkout.post" },
+      { method: "post", path: "me/portal", file: "me/portal.post" }
+    ], { base: "/api/subscriptions" });
     registerBootstrapProvider(nuxt, {
       scope: "account",
       key: "subscriptions:me",
       handler: resolver.resolve("./runtime/server/bootstrap/my-subscriptions")
     });
-    addServerHandler({
-      route: moduleApiUrl("subscriptions", "checkout"),
-      method: "post",
-      handler: resolver.resolve("./runtime/server/routes/subscriptions/checkout.post")
-    });
-    addServerHandler({
-      route: moduleApiUrl("subscriptions", "portal"),
-      method: "post",
-      handler: resolver.resolve("./runtime/server/routes/subscriptions/portal.post")
-    });
     await extendUsersAdmin(nuxt, {
       routes: [
-        ["get", "subscription", "subscription.get"],
-        ["get", "subscriptions", "subscriptions.get"],
-        ["post", "subscription", "subscription.post"],
-        ["delete", "subscription", "subscription.delete"],
-        ["post", "subscription/payment-link", "payment-link.post"]
+        ["get", "membership", "membership.get"],
+        ["get", "membership/history", "membership-history.get"],
+        ["post", "membership", "membership.post"],
+        ["delete", "membership", "membership.delete"],
+        ["post", "membership/payment-link", "payment-link.post"]
       ].map(([method, path, file]) => ({ method, path, handler: resolver.resolve(`./runtime/server/routes/admin/${file}`) })),
       tab: {
-        id: "subscription",
+        id: "membership",
         component: resolver.resolve("./runtime/app/tabs/Membership.vue"),
         order: 10,
-        label: "Subscription",
+        label: "Membership",
         labelKey: "subscriptions.admin.tab",
         icon: "i-lucide-badge-check"
       },

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

@@ -34,12 +34,58 @@ declare var __VLS_14: {
     pending: any;
     select: () => void;
 }, __VLS_35: {}, __VLS_37: {}, __VLS_66: {
-    plan: any;
-    price: any;
+    plan: {
+        key: string;
+        label: string;
+        description?: string | undefined;
+        rank: number;
+        features?: string[] | undefined;
+        prices: {
+            id: string;
+            amount: number | null;
+            currency: string;
+            interval: "day" | "week" | "month" | "year";
+            intervalCount: number;
+            trialPeriodDays: number | null;
+            lookupKey: string | null;
+        }[];
+    } | undefined;
+    price: {
+        id: string;
+        amount: number | null;
+        currency: string;
+        interval: "day" | "week" | "month" | "year";
+        intervalCount: number;
+        trialPeriodDays: number | null;
+        lookupKey: string | null;
+    } | undefined;
 }, __VLS_74: {
-    plan: any;
-    price: any;
-    confirm: () => any;
+    plan: {
+        key: string;
+        label: string;
+        description?: string | undefined;
+        rank: number;
+        features?: string[] | undefined;
+        prices: {
+            id: string;
+            amount: number | null;
+            currency: string;
+            interval: "day" | "week" | "month" | "year";
+            intervalCount: number;
+            trialPeriodDays: number | null;
+            lookupKey: string | null;
+        }[];
+    } | undefined;
+    price: {
+        id: string;
+        amount: number | null;
+        currency: string;
+        interval: "day" | "week" | "month" | "year";
+        intervalCount: number;
+        trialPeriodDays: number | null;
+        lookupKey: string | null;
+    } | undefined;
+    confirm: () => Promise<void> | null;
 };
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_14) => any;

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

@@ -3,6 +3,7 @@ import { createReusableTemplate } from "@vueuse/core";
 import { formatMoney } from "@frigear-nu/ui/money";
 import { usePlans } from "../composables/usePlans";
 import { useSubscription } from "../composables/useSubscription";
+import { computed, navigateTo, ref, useAuthPages, useFormat, useModuleT, useRoute, useRuntimeConfig, useUserSession, watch, watchEffect } from "#imports";
 defineOptions({ name: "SubscriptionPlans" });
 const props = defineProps({
   locale: { type: String, required: false },
@@ -54,8 +55,7 @@ const showGrid = computed(() => props.mode !== "tabs");
 const activeTab = ref();
 const tabItems = computed(() => visible.value.map((plan) => ({
   value: plan.key,
-  label: priceFor(plan) ? `/ ${intervalLabel(priceFor(plan))}` : labelOf(plan),
-  plan
+  label: priceFor(plan) ? `/ ${intervalLabel(priceFor(plan))}` : labelOf(plan)
 })));
 watchEffect(() => {
   if (!activeTab.value || !visible.value.some((p) => p.key === activeTab.value)) {
@@ -131,12 +131,10 @@ watch([visible, subscriptionStatus, loggedIn], () => {
         :highlight="!preview && highlighted(plan)"
         :badge="!preview && stateOf(plan) === 'current' ? t('current', 'Current plan') : void 0"
         :tagline="priceFor(plan)?.trialPeriodDays ? t('trial', '{days}-day free trial', { days: priceFor(plan).trialPeriodDays }) : void 0"
-        variant="subtle"
+        variant="outline"
         :ui="{
-  root: 'rounded-xl transition-shadow hover:shadow-lg',
   title: 'text-lg font-semibold',
-  price: 'text-4xl font-extrabold text-primary',
-  billingCycle: 'uppercase ml-1 text-muted',
+  billingCycle: 'ml-1 text-muted',
   terms: 'text-xs text-muted'
 }"
       >
@@ -195,7 +193,6 @@ watch([visible, subscriptionStatus, loggedIn], () => {
             <UButton
               block
               size="lg"
-              class="uppercase"
               :loading="pending || loggedIn && subscriptionLoading"
               :disabled="stateOf(plan) === 'current' || !priceFor(plan)"
               :variant="stateOf(plan) === 'current' ? 'subtle' : 'solid'"
@@ -234,11 +231,9 @@ watch([visible, subscriptionStatus, loggedIn], () => {
 
     <template v-if="visible.length">
       <template v-if="showTabs">
-        <UTabs
+        <PageTabs
           v-model="activeTab"
           :items="tabItems"
-          :content="false"
-          class="w-full"
           :class="{ 'sm:hidden': showGrid }"
         />
         <div
@@ -253,7 +248,7 @@ watch([visible, subscriptionStatus, loggedIn], () => {
       </template>
       <div
         v-if="showGrid"
-        class="items-stretch gap-6 sm:grid-cols-2"
+        class="items-stretch gap-4 sm:grid-cols-2"
         :class="[showTabs ? 'hidden sm:grid' : 'grid', visible.length >= 3 ? 'lg:grid-cols-3' : '']"
       >
         <ReuseCard

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

@@ -34,12 +34,58 @@ declare var __VLS_14: {
     pending: any;
     select: () => void;
 }, __VLS_35: {}, __VLS_37: {}, __VLS_66: {
-    plan: any;
-    price: any;
+    plan: {
+        key: string;
+        label: string;
+        description?: string | undefined;
+        rank: number;
+        features?: string[] | undefined;
+        prices: {
+            id: string;
+            amount: number | null;
+            currency: string;
+            interval: "day" | "week" | "month" | "year";
+            intervalCount: number;
+            trialPeriodDays: number | null;
+            lookupKey: string | null;
+        }[];
+    } | undefined;
+    price: {
+        id: string;
+        amount: number | null;
+        currency: string;
+        interval: "day" | "week" | "month" | "year";
+        intervalCount: number;
+        trialPeriodDays: number | null;
+        lookupKey: string | null;
+    } | undefined;
 }, __VLS_74: {
-    plan: any;
-    price: any;
-    confirm: () => any;
+    plan: {
+        key: string;
+        label: string;
+        description?: string | undefined;
+        rank: number;
+        features?: string[] | undefined;
+        prices: {
+            id: string;
+            amount: number | null;
+            currency: string;
+            interval: "day" | "week" | "month" | "year";
+            intervalCount: number;
+            trialPeriodDays: number | null;
+            lookupKey: string | null;
+        }[];
+    } | undefined;
+    price: {
+        id: string;
+        amount: number | null;
+        currency: string;
+        interval: "day" | "week" | "month" | "year";
+        intervalCount: number;
+        trialPeriodDays: number | null;
+        lookupKey: string | null;
+    } | undefined;
+    confirm: () => Promise<void> | null;
 };
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_14) => any;

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

@@ -7,12 +7,22 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
     subscription: any;
 }, __VLS_15: {
     subscription: any;
-    badge: any;
-}, __VLS_23: {
+    badge: {
+        status: any;
+        label: any;
+        color: any;
+        icon: string;
+    } | {
+        status: any;
+        label: any;
+        color: any;
+        icon: undefined;
+    };
+}, __VLS_22: {
     subscription: any;
     cancelsAt: any;
     dateText: any;
-}, __VLS_25: {}, __VLS_33: {
+}, __VLS_24: {}, __VLS_32: {
     manage: () => any;
     resubscribe: () => any;
     cancelling: boolean;
@@ -27,11 +37,11 @@ type __VLS_Slots = {} & {
 } & {
     badge?: (props: typeof __VLS_15) => any;
 } & {
-    dates?: (props: typeof __VLS_23) => any;
+    dates?: (props: typeof __VLS_22) => any;
 } & {
-    empty?: (props: typeof __VLS_25) => any;
+    empty?: (props: typeof __VLS_24) => any;
 } & {
-    actions?: (props: typeof __VLS_33) => any;
+    actions?: (props: typeof __VLS_32) => 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>;

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

@@ -2,6 +2,7 @@
 import { formatDate as formatDateValue } from "@frigear-nu/ui/utils";
 import { usePlans } from "../composables/usePlans";
 import { useSubscription } from "../composables/useSubscription";
+import { computed, statusColor, useFormat, useModuleT } from "#imports";
 defineOptions({ name: "SubscriptionStatus" });
 const props = defineProps({
   locale: { type: String, required: false }
@@ -17,12 +18,12 @@ 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: 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) };
+  if (cancelsAt.value) return { status: "cancelling", label: t("cancelling", "Membership is ending"), color: "warning", icon: "i-lucide-battery-warning" };
+  if (value === "active") return { status: value, label: t("active", "Active"), color: statusColor(value), icon: "i-lucide-shield-check" };
+  if (value === "trialing") return { status: value, label: t("trialing", "Trial"), color: statusColor(value), icon: void 0 };
+  if (value === "past_due" || value === "unpaid") return { status: "past_due", label: t("pastDue", "Past due"), color: statusColor("past_due"), icon: void 0 };
+  if (value === "canceled") return { status: value, label: t("canceled", "Canceled"), color: statusColor(value), icon: void 0 };
+  return { status: value, label: t("other", "Inactive"), color: statusColor(value), icon: void 0 };
 });
 const formatDate = (value) => formatDateValue(value, props.locale ?? format.locale.value, { dateStyle: "long" });
 const isManual = computed(() => subscription.value?.source === "manual");
@@ -38,8 +39,9 @@ const manage = () => openPortal().catch(() => void 0);
 
 <template>
   <SectionCard
-    :title="t('title', 'Your subscription')"
+    :title="t('title', 'Your membership')"
     icon="i-lucide-credit-card"
+    :loading="loading && !$slots.loading"
   >
     <template
       v-if="$slots.header"
@@ -53,7 +55,7 @@ const manage = () => openPortal().catch(() => void 0);
       name="loading"
     >
       <p class="text-muted text-sm">
-        {{ t("loading", "Loading subscription\u2026") }}
+        {{ t("loading", "Loading membership\u2026") }}
       </p>
     </slot>
 
@@ -78,13 +80,12 @@ const manage = () => openPortal().catch(() => void 0);
           :subscription="subscription"
           :badge="badge"
         >
-          <UBadge
-            :color="badge.color"
+          <StatusBadge
+            :status="badge.status"
+            :label="badge.label"
             :icon="badge.icon"
-            variant="subtle"
-          >
-            {{ badge.label }}
-          </UBadge>
+            :colors="{ cancelling: 'warning' }"
+          />
         </slot>
       </div>
       <slot
@@ -107,7 +108,7 @@ const manage = () => openPortal().catch(() => void 0);
       name="empty"
     >
       <p class="text-muted text-sm">
-        {{ t("none", "You do not have an active subscription.") }}
+        {{ t("none", "You do not have an active membership.") }}
       </p>
     </slot>
 
@@ -130,23 +131,16 @@ const manage = () => openPortal().catch(() => void 0);
         :cancelling="!!cancelsAt"
         :pending="pending"
       >
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-wrap justify-end gap-2">
           <UButton
             v-if="!cancelsAt"
             color="error"
-            variant="soft"
+            variant="outline"
             icon="i-lucide-x"
             :loading="pending"
             :label="t('cancel', 'Cancel membership')"
             @click="manage"
           />
-          <UButton
-            v-else
-            icon="i-lucide-rotate-ccw"
-            :loading="pending"
-            :label="t('resubscribe', 'Resubscribe')"
-            @click="resubscribe"
-          />
           <UButton
             color="neutral"
             variant="outline"
@@ -155,6 +149,13 @@ const manage = () => openPortal().catch(() => void 0);
             :label="t('changePaymentMethod', 'Change payment method')"
             @click="manage"
           />
+          <UButton
+            v-if="cancelsAt"
+            icon="i-lucide-rotate-ccw"
+            :loading="pending"
+            :label="t('resubscribe', 'Resubscribe')"
+            @click="resubscribe"
+          />
         </div>
       </slot>
     </template>

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

@@ -7,12 +7,22 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
     subscription: any;
 }, __VLS_15: {
     subscription: any;
-    badge: any;
-}, __VLS_23: {
+    badge: {
+        status: any;
+        label: any;
+        color: any;
+        icon: string;
+    } | {
+        status: any;
+        label: any;
+        color: any;
+        icon: undefined;
+    };
+}, __VLS_22: {
     subscription: any;
     cancelsAt: any;
     dateText: any;
-}, __VLS_25: {}, __VLS_33: {
+}, __VLS_24: {}, __VLS_32: {
     manage: () => any;
     resubscribe: () => any;
     cancelling: boolean;
@@ -27,11 +37,11 @@ type __VLS_Slots = {} & {
 } & {
     badge?: (props: typeof __VLS_15) => any;
 } & {
-    dates?: (props: typeof __VLS_23) => any;
+    dates?: (props: typeof __VLS_22) => any;
 } & {
-    empty?: (props: typeof __VLS_25) => any;
+    empty?: (props: typeof __VLS_24) => any;
 } & {
-    actions?: (props: typeof __VLS_33) => any;
+    actions?: (props: typeof __VLS_32) => 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>;

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

@@ -1,4 +1,6 @@
 <script setup>
+import { subscriptionsApi } from "../../../../utils/api";
+import { $fetch, computed, ref, useAction, useConfirmDialog, useCopyToClipboard, useFormat, useLazyFetch, useModuleT, useToast, watchEffect } from "#imports";
 defineOptions({ name: "UsersAdminMembership" });
 const props = defineProps({
   user: { type: Object, required: true }
@@ -12,7 +14,7 @@ const toast = useToast();
 const grantAction = useAction();
 const linkAction = useAction();
 const revokeAction = useAction();
-const base = computed(() => `/api/admin/users/${props.user.id}/subscription`);
+const base = computed(() => subscriptionsApi.admin.membership(props.user.id));
 const { data, refresh, status } = useLazyFetch(() => base.value, { key: () => `admin-membership-${props.user.id}` });
 const loading = computed(() => status.value === "pending" && !data.value);
 const planKey = ref(void 0);
@@ -60,7 +62,7 @@ async function revoke() {
   }, { success: t("revoked", "Membership revoked."), error: t("error", "Something went wrong.") });
 }
 async function sendLink() {
-  const result = await linkAction.run(() => $fetch(`${base.value}/payment-link`, {
+  const result = await linkAction.run(() => $fetch(subscriptionsApi.admin.paymentLink(props.user.id), {
     method: "POST",
     body: { planKey: planKey.value, email: emailUser.value }
   }), { error: t("error", "Something went wrong.") });

package/dist/runtime/app/composables/usePlans.js

@@ -1,7 +1,9 @@
+import { subscriptionsApi } from "../../utils/api.js";
+import { computed, useCachedFetch } from "#imports";
 export const PLANS_CLIENT_CACHE_MS = 5 * 60 * 1e3;
 export const PLANS_KEY = "subscriptions:plans";
 export const usePlans = () => {
-  const fetched = useCachedFetch("/api/subscriptions/plans", {
+  const fetched = useCachedFetch(subscriptionsApi.plans, {
     key: PLANS_KEY,
     ttl: PLANS_CLIENT_CACHE_MS
   });

package/dist/runtime/app/composables/useSubscription.js

@@ -1,3 +1,5 @@
+import { subscriptionsApi } from "../../utils/api.js";
+import { $fetch, computed, navigateTo, ref, toValue, useCachedFetch, useModuleT, useRuntimeConfig, useUserSession, watch } from "#imports";
 const ACTIVE_STATUSES = ["active", "trialing"];
 const CLIENT_CACHE_MS = 60 * 1e3;
 const ME_KEY = "subscriptions:me";
@@ -10,7 +12,7 @@ export const useSubscription = () => {
   const t = useModuleT("subscriptions");
   const pending = ref(false);
   const error = ref(null);
-  const fetched = useCachedFetch("/api/subscriptions/me", {
+  const fetched = useCachedFetch(subscriptionsApi.me.subscriptions, {
     key: ME_KEY,
     ttl: CLIENT_CACHE_MS,
     immediate: loggedIn.value,
@@ -51,7 +53,7 @@ export const useSubscription = () => {
     const origin = import.meta.client ? window.location.origin : "";
     const absolute = (path) => path ? `${origin}${path}` : void 0;
     return run(async () => {
-      const result = await $fetch("/api/subscriptions/checkout", {
+      const result = await $fetch(subscriptionsApi.me.checkout, {
         method: "POST",
         body: {
           ...isPrice ? { priceId: planKeyOrPriceId } : { planKey: planKeyOrPriceId },
@@ -69,7 +71,7 @@ export const useSubscription = () => {
   }
   function openPortal(returnUrl) {
     return run(async () => {
-      const { url } = await $fetch("/api/subscriptions/portal", {
+      const { url } = await $fetch(subscriptionsApi.me.portal, {
         method: "POST",
         body: { returnUrl: returnUrl ?? (import.meta.client ? window.location.href : void 0) }
       });

package/dist/runtime/app/middleware/subscription.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").RouteMiddleware;
 export default _default;

package/dist/runtime/app/middleware/subscription.js

@@ -1,3 +1,4 @@
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig, useSubscription } from "#imports";
 export default defineNuxtRouteMiddleware(async (to) => {
   const meta = to.meta.subscription;
   const config = useRuntimeConfig().public.subscriptions;

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

@@ -1,15 +1,28 @@
 <script setup>
+import { computed, useLocaleLink, useModuleT, useRuntimeConfig } from "#imports";
 defineOptions({ name: "SubscriptionCancelPage" });
 const t = useModuleT("subscriptions.cancel");
 const { localize } = useLocaleLink();
+const tm = useModuleT("subscriptions.menu.membership");
 const membership = useRuntimeConfig().public.subscriptions?.pages?.membership;
+const breadcrumb = computed(() => [
+  ...membership ? [{ label: tm("label", "Membership"), to: localize(membership) }] : [],
+  { label: t("crumb", "Checkout canceled") }
+]);
 </script>
 
 <template>
-  <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) }] : []"
-  />
+  <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="tm('label', 'Membership')"
+      :description="tm('description', 'Manage your plan and billing.')"
+      :breadcrumb="breadcrumb"
+    />
+    <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) }] : []"
+    />
+  </div>
 </template>