@frigear-nu/subscriptions 0.1.2 → 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
 

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.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, 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.vue

@@ -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,7 +192,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 +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,11 +8,11 @@ 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: {
+}, __VLS_24: {}, __VLS_32: {
     manage: () => any;
     resubscribe: () => any;
     cancelling: boolean;
@@ -27,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

@@ -17,12 +17,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 +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"
@@ -53,7 +54,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 +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,11 +8,11 @@ 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: {
+}, __VLS_24: {}, __VLS_32: {
     manage: () => any;
     resubscribe: () => any;
     cancelling: boolean;
@@ -27,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.js

@@ -1,7 +1,8 @@
+import { subscriptionsApi } from "../../utils/api.js";
 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,4 @@
+import { subscriptionsApi } from "../../utils/api.js";
 const ACTIVE_STATUSES = ["active", "trialing"];
 const CLIENT_CACHE_MS = 60 * 1e3;
 const ME_KEY = "subscriptions:me";
@@ -10,7 +11,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 +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 },
@@ -69,7 +70,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/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>

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

@@ -4,16 +4,22 @@ import SubscriptionStatus from "../components/SubscriptionStatus.vue";
 import { useSubscription } from "../composables/useSubscription";
 defineOptions({ name: "SubscriptionMembershipPage" });
 const t = useModuleT("subscriptions");
+const tm = useModuleT("subscriptions.menu.membership");
 const { isActive, cancelsAt, loading, loadError, refresh } = await useSubscription();
 const { loggedIn } = useUserSession();
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
-    <!-- Until the subscription is known, a placeholder the size of the status card: never the "join" hero. -->
+  <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="tm('label', 'Membership')"
+      :description="tm('description', 'Manage your plan and billing.')"
+    />
+
+    <!-- Until the subscription is known, a placeholder the size of the status card: never the "join" empty state. -->
     <SectionCard
       v-if="loading"
-      :title="t('status.title', 'Your subscription')"
+      :title="t('status.title', 'Your membership')"
       icon="i-lucide-credit-card"
       loading
     />
@@ -25,23 +31,28 @@ const { loggedIn } = useUserSession();
       :description="errorMessage(loadError, '')"
       :actions="[{ label: t('status.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
     />
-    <div
+    <SectionCard
       v-else-if="loggedIn"
-      class="flex flex-col gap-1"
+      :title="t('status.title', 'Your membership')"
+      icon="i-lucide-credit-card"
     >
-      <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
+      <UEmpty
+        variant="naked"
+        icon="i-lucide-badge-check"
+        :title="t('status.emptyTitle', 'No membership yet')"
+        :description="t('status.emptyDescription', 'Set up your membership to get started!')"
+      />
+    </SectionCard>
+
+    <SectionCard
       v-if="cancelsAt"
-      class="text-highlighted text-lg font-semibold"
+      :title="t('plans.resubscribe', 'Resubscribe')"
     >
-      {{ t("plans.resubscribe", "Resubscribe") }}
-    </h2>
-    <SubscriptionPlans confirm-change />
+      <SubscriptionPlans confirm-change />
+    </SectionCard>
+    <SubscriptionPlans
+      v-else
+      confirm-change
+    />
   </div>
 </template>

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

@@ -4,7 +4,12 @@ defineOptions({ name: "SubscriptionSuccessPage" });
 const t = useModuleT("subscriptions.success");
 const { refresh, isActive } = await useSubscription();
 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 complete") }
+]);
 const MAX_ATTEMPTS = 40;
 const INTERVAL_MS = 3e3;
 let stopped = false;
@@ -20,10 +25,17 @@ onMounted(async () => {
 </script>
 
 <template>
-  <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) }] : []"
-  />
+  <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="tm('label', 'Membership')"
+      :description="tm('description', 'Manage your plan and billing.')"
+      :breadcrumb="breadcrumb"
+    />
+    <UEmpty
+      :icon="isActive ? 'i-lucide-circle-check' : 'i-lucide-loader-circle'"
+      :title="t('title', 'Thank you!')"
+      :description="isActive ? t('activeBody', 'Your membership is now active.') : t('body', 'Your membership is being activated. This can take a few seconds.')"
+      :actions="membership ? [{ label: t('back', 'Back to membership'), to: localize(membership) }] : []"
+    />
+  </div>
 </template>

package/dist/runtime/app/tabs/Membership.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { subscriptionsApi } from "../../utils/api";
 defineOptions({ name: "UsersAdminMembershipTab" });
 const props = defineProps({
   user: { type: Object, required: true }
@@ -6,16 +7,16 @@ const props = defineProps({
 const emit = defineEmits(["refresh"]);
 const t = useModuleT("subscriptions.admin");
 const format = useFormat();
-const UBadge = resolveComponent("UBadge");
+const StatusBadge = resolveComponent("StatusBadge");
 const { data: history, refresh: refreshHistory, status, error } = useLazyFetch(
-  () => `/api/admin/users/${props.user.id}/subscriptions`,
+  () => subscriptionsApi.admin.history(props.user.id),
   { key: () => `admin-subscriptions-${props.user.id}` }
 );
 const loading = computed(() => status.value === "pending" && !history.value);
-const date = (value) => format.date(value) || "\u2013";
+const date = (value) => format.date(value) || emptyCell();
 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"), cell: ({ row }) => h(UBadge, { label: row.original.status, variant: "subtle", color: statusColor(row.original.status) }) },
+  { accessorKey: "status", header: t("history.status", "Status"), cell: ({ row }) => h(StatusBadge, { status: 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) },
@@ -36,15 +37,14 @@ async function changed() {
       />
     </SectionCard>
 
-    <SectionCard
+    <TableCard
       :title="t('history.title', 'Subscription history')"
-      flush
       :loading="loading"
+      :refreshing="status === 'pending' && !loading"
     >
       <UTable
         :data="history?.subscriptions ?? []"
         :columns="columns"
-        :loading="status === 'pending' && !loading"
         :ui="tableUi({ tr: '' })"
       >
         <template #empty>
@@ -63,6 +63,6 @@ async function changed() {
           />
         </template>
       </UTable>
-    </SectionCard>
+    </TableCard>
   </div>
 </template>