@frigear-nu/subscriptions 0.1.1 → 0.1.3

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
 
@@ -119,8 +119,8 @@ Redirects to `redirectTo` (else the membership page) with `?redirect=<route>`; a
 
 ## Composables and components
 
-- `usePlans()` - `{ plans, status, error, refresh }`.
-- `useSubscription()` - `{ subscription, plan, status, isActive, cancelsAt, has(plan), pending, error, refresh, subscribe(planKeyOrPriceId, { successUrl?, cancelUrl? }), openPortal(returnUrl?) }`.
+- `usePlans()` - `{ plans, status, loading, error, refresh }`.
+- `useSubscription()` - `{ subscription, plan, status, loading, loadError, isActive, cancelsAt, has(plan), pending, error, refresh, subscribe(planKeyOrPriceId, { successUrl?, cancelUrl? }), openPortal(returnUrl?) }`.
 - `<SubscriptionPlans>` - props `locale`, `currency`, `interval`, `plans`, `confirmChange`; slots `loading`,
   `empty`, `header`, `badge`, `price`, `features`, `action`, `confirm`, `confirm-actions`.
 - `<SubscriptionStatus>` - props `locale`; slots `header`, `loading`, `empty`, `plan`, `badge`, `dates`, `actions`.

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.1",
+  "version": "0.1.3",
   "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, addPlugin, addRouteMiddleware } from '@nuxt/kit';
-import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, moduleApiUrl, 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,39 +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")
-    });
-    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")
+    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")
     });
     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"
       },
@@ -139,7 +129,6 @@ const module$1 = defineNuxtModule({
       { name: "useSubscription", from: resolver.resolve("./runtime/app/composables/useSubscription") }
     ]);
     addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
-    addPlugin({ src: resolver.resolve("./runtime/app/plugins/warm-plans.client"), mode: "client" });
     addRouteMiddleware({
       name: "subscription",
       path: resolver.resolve("./runtime/app/middleware/subscription")

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

@@ -17,8 +17,8 @@ const emit = defineEmits(["select"]);
 const t = useModuleT("subscriptions.plans");
 const tp = useModuleT("subscriptions.catalog");
 const ti = useModuleT("subscriptions.interval");
-const { plans: allPlans, status } = usePlans();
-const { plan: currentPlan, isActive, cancelsAt, pending, subscribe, error, status: subscriptionStatus } = useSubscription();
+const { plans: allPlans, loading: plansLoading } = usePlans();
+const { plan: currentPlan, isActive, cancelsAt, pending, subscribe, error, status: subscriptionStatus, loading: subscriptionLoading } = useSubscription();
 const { loggedIn } = useUserSession();
 const format = useFormat();
 const route = useRoute();
@@ -54,8 +54,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 +130,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,8 +192,7 @@ watch([visible, subscriptionStatus, loggedIn], () => {
             <UButton
               block
               size="lg"
-              class="uppercase"
-              :loading="pending"
+              :loading="pending || loggedIn && subscriptionLoading"
               :disabled="stateOf(plan) === 'current' || !priceFor(plan)"
               :variant="stateOf(plan) === 'current' ? 'subtle' : 'solid'"
               :label="loggedIn ? stateLabel(stateOf(plan)) : t('subscribe', 'Subscribe')"
@@ -208,7 +204,7 @@ watch([visible, subscriptionStatus, loggedIn], () => {
     </DefineCard>
 
     <slot
-      v-if="status === 'pending' && !visible.length"
+      v-if="plansLoading && !visible.length"
       name="loading"
     >
       <p class="text-center text-sm text-muted">
@@ -234,11 +230,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 +247,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/SubscriptionStatus.d.vue.ts

@@ -8,18 +8,13 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
 }, __VLS_15: {
     subscription: any;
     badge: any;
-}, __VLS_23: {
+}, __VLS_22: {
     subscription: any;
     cancelsAt: any;
     dateText: any;
-}, __VLS_25: {}, __VLS_33: {
-    manage: () => Promise<void | undefined>;
-    resubscribe: () => Promise<({
-        url: string;
-    } | {
-        updated: true;
-        kind: "upgrade" | "downgrade" | "resume";
-    }) | undefined>;
+}, __VLS_24: {}, __VLS_32: {
+    manage: () => any;
+    resubscribe: () => any;
     cancelling: boolean;
     pending: any;
 };
@@ -32,11 +27,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

@@ -10,19 +10,19 @@ 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 { subscription, plan, isActive, cancelsAt, loading, pending, error, subscribe, openPortal } = useSubscription();
 const planLabel = computed(() => {
   const found = plans.value.find((p) => p.key === plan.value);
   return plan.value ? tp(`${plan.value}.label`, found?.label ?? plan.value) : plan.value;
 });
 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 +38,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"
@@ -49,11 +50,11 @@ const manage = () => openPortal().catch(() => void 0);
     </template>
 
     <slot
-      v-if="status === 'pending' && !subscription"
+      v-if="loading"
       name="loading"
     >
       <p class="text-muted text-sm">
-        {{ t("loading", "Loading subscription\u2026") }}
+        {{ t("loading", "Loading membership\u2026") }}
       </p>
     </slot>
 
@@ -78,13 +79,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 +107,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 +130,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 +148,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

@@ -8,18 +8,13 @@ declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
 }, __VLS_15: {
     subscription: any;
     badge: any;
-}, __VLS_23: {
+}, __VLS_22: {
     subscription: any;
     cancelsAt: any;
     dateText: any;
-}, __VLS_25: {}, __VLS_33: {
-    manage: () => Promise<void | undefined>;
-    resubscribe: () => Promise<({
-        url: string;
-    } | {
-        updated: true;
-        kind: "upgrade" | "downgrade" | "resume";
-    }) | undefined>;
+}, __VLS_24: {}, __VLS_32: {
+    manage: () => any;
+    resubscribe: () => any;
     cancelling: boolean;
     pending: any;
 };
@@ -32,11 +27,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,5 @@
 <script setup>
+import { subscriptionsApi } from "../../../../utils/api";
 defineOptions({ name: "UsersAdminMembership" });
 const props = defineProps({
   user: { type: Object, required: true }
@@ -12,7 +13,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 +61,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.d.ts

@@ -21,14 +21,7 @@ export type PlansResponse = {
 };
 /** Matches the server-side KV cache (`CACHE_TTL_SECONDS`), so a client-side hit is never older than the server's own. */
 export declare const PLANS_CLIENT_CACHE_MS: number;
-export type PlansCache = {
-    at: number;
-    data: PlansResponse;
-} | null;
-export declare const usePlansCache: () => any;
-export declare const usePlans: () => {
-    plans: any;
-    status: any;
-    error: any;
-    refresh: any;
-};
+/** The `useCachedFetch` key of the plans. */
+export declare const PLANS_KEY = "subscriptions:plans";
+/** The plans, sorted by rank. Awaitable, like `useSubscription`. */
+export declare const usePlans: () => any;

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

@@ -1,18 +1,15 @@
+import { subscriptionsApi } from "../../utils/api.js";
 export const PLANS_CLIENT_CACHE_MS = 5 * 60 * 1e3;
-export const usePlansCache = () => useState("subscriptions:plans:cache", () => null);
+export const PLANS_KEY = "subscriptions:plans";
 export const usePlans = () => {
-  const cache = usePlansCache();
-  const { data, status, error, refresh } = useFetch("/api/subscriptions/plans", {
-    key: "subscriptions:plans",
-    default: () => ({ plans: [] }),
-    getCachedData: (_key, _nuxtApp, ctx) => ctx.cause !== "refresh:manual" && cache.value && Date.now() - cache.value.at < PLANS_CLIENT_CACHE_MS ? cache.value.data : void 0,
-    transform: (response) => {
-      cache.value = { at: Date.now(), data: response };
-      return response;
-    }
+  const fetched = useCachedFetch(subscriptionsApi.plans, {
+    key: PLANS_KEY,
+    ttl: PLANS_CLIENT_CACHE_MS
   });
+  const { data, status, error, loading, refresh } = fetched;
   const plans = computed(
     () => [...data.value?.plans ?? []].sort((a, b) => a.rank - b.rank)
   );
-  return { plans, status, error, refresh };
+  const api = { plans, status, error, loading, refresh };
+  return Object.assign(fetched.then(() => api), api);
 };

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

@@ -1,4 +1,3 @@
-import type { MaybeRefOrGetter } from 'vue';
 export interface UserSubscription {
     id: string;
     planKey: string | null;
@@ -10,26 +9,9 @@ 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;
-    status: any;
-    isActive: any;
-    cancelsAt: any;
-    has: (planKey: MaybeRefOrGetter<string>) => any;
-    pending: any;
-    error: any;
-    refresh: any;
-    subscribe: (planKeyOrPriceId: string, options?: {
-        successUrl?: string;
-        cancelUrl?: string;
-    }) => Promise<CheckoutResponse>;
-    openPortal: (returnUrl?: string) => Promise<void>;
-};
-export {};
+/**
+ * The signed-in user's subscription and the checkout / billing-portal actions. Awaitable: `await useSubscription()` in
+ * a page renders the subscription on the server; components and widgets can use it without `await` and show a
+ * placeholder while `loading`.
+ */
+export declare const useSubscription: () => any;

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

@@ -1,5 +1,7 @@
+import { subscriptionsApi } from "../../utils/api.js";
 const ACTIVE_STATUSES = ["active", "trialing"];
 const CLIENT_CACHE_MS = 60 * 1e3;
+const ME_KEY = "subscriptions:me";
 function isEntitled(item) {
   if (!ACTIVE_STATUSES.includes(item.status) || item.endedAt) return false;
   return !(item.source === "manual" && item.currentPeriodEnd && new Date(item.currentPeriodEnd).getTime() <= Date.now());
@@ -9,24 +11,16 @@ export const useSubscription = () => {
   const t = useModuleT("subscriptions");
   const pending = ref(false);
   const error = ref(null);
-  const cache = useState("subscriptions:me:cache", () => null);
-  const { data, status, refresh } = useFetch("/api/subscriptions/me", {
-    key: "subscriptions:me",
-    default: () => ({ subscriptions: [], activePlan: null }),
+  const fetched = useCachedFetch(subscriptionsApi.me.subscriptions, {
+    key: ME_KEY,
+    ttl: CLIENT_CACHE_MS,
     immediate: loggedIn.value,
-    watch: false,
-    getCachedData: (_key, _nuxtApp, ctx) => ctx.cause !== "refresh:manual" && cache.value && Date.now() - cache.value.at < CLIENT_CACHE_MS ? cache.value.data : void 0,
-    transform: (response) => {
-      cache.value = { at: Date.now(), data: response };
-      return response;
-    }
+    watch: false
   });
+  const { data, status, error: loadError, loading, refresh, clear } = fetched;
   watch(loggedIn, (value) => {
     if (value) refresh();
-    else {
-      cache.value = null;
-      data.value = { subscriptions: [], activePlan: null };
-    }
+    else clear();
   });
   const subscription = computed(() => {
     const list = data.value?.subscriptions ?? [];
@@ -58,7 +52,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 },
@@ -76,12 +70,13 @@ 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) }
       });
       await navigateTo(url, { external: true });
     }, t("errors.portal", "Failed to open the billing portal."));
   }
-  return { subscription, plan, status, isActive, cancelsAt, has, pending, error, refresh, subscribe, openPortal };
+  const api = { subscription, plan, status, loading, loadError, isActive, cancelsAt, has, pending, error, refresh, subscribe, openPortal };
+  return Object.assign(fetched.then(() => api), api);
 };

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

@@ -3,12 +3,8 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const config = useRuntimeConfig().public.subscriptions;
   const target = meta?.redirectTo ?? config?.pages?.membership;
   if (!target || to.path === target) return;
-  const { loggedIn } = useUserSession();
-  let activePlan = null;
-  if (loggedIn.value) {
-    const me = await useRequestFetch()("/api/subscriptions/me").catch(() => null);
-    activePlan = me?.activePlan ?? null;
-  }
+  const { plan } = await useSubscription();
+  const activePlan = plan.value;
   const allowed = activePlan !== null && (!meta?.plans?.length || meta.plans.includes(activePlan));
   if (!allowed) return navigateTo({ path: target, query: { redirect: to.fullPath } });
 });

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

@@ -2,14 +2,26 @@
 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>