@frigear-nu/subscriptions 0.0.6 → 0.0.8

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

@@ -0,0 +1,192 @@
+<script setup>
+defineOptions({ name: "UsersAdminMembership" });
+const props = defineProps({
+  user: { type: Object, required: true }
+});
+const emit = defineEmits(["refresh"]);
+const t = useModuleT("subscriptions.admin");
+const toast = useToast();
+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);
+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" });
+}
+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 () => {
+  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`, {
+    method: "POST",
+    body: { planKey: planKey.value, email: emailUser.value }
+  });
+  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);
+  }
+}
+</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>
+        <UButton
+          v-if="current.source === 'manual'"
+          color="error"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-user-x"
+          :loading="busy === 'revoke'"
+          :label="t('revoke', 'Revoke free membership')"
+          @click="revoke"
+        />
+      </template>
+      <p
+        v-else
+        class="text-muted"
+      >
+        {{ t("none", "No active membership.") }}
+      </p>
+    </div>
+
+    <p
+      v-if="!loading && current && current.source !== 'manual'"
+      class="text-muted text-sm"
+    >
+      {{ t("paidHint", "Paid subscriptions are managed in Stripe.") }}
+    </p>
+    <div
+      v-else-if="!loading && planItems.length"
+      class="space-y-3"
+    >
+      <div class="flex flex-wrap items-end gap-3">
+        <UFormField :label="t('plan', 'Plan')">
+          <USelect
+            v-model="planKey"
+            :items="planItems"
+            :placeholder="t('planPlaceholder', 'Choose a plan')"
+            class="min-w-48"
+          />
+        </UFormField>
+        <UFormField :label="t('endsAt', 'Ends on (optional)')">
+          <UInput
+            v-model="endsAt"
+            type="date"
+          />
+        </UFormField>
+        <UButton
+          icon="i-lucide-gift"
+          :disabled="!planKey"
+          :loading="busy === 'grant'"
+          :label="t('grant', 'Grant free')"
+          @click="grant"
+        />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-link"
+          :disabled="!planKey"
+          :loading="busy === 'link'"
+          :label="t('sendLink', 'Send payment link')"
+          @click="sendLink"
+        />
+        <UCheckbox
+          v-model="emailUser"
+          :label="t('emailUser', 'Email the link to the user')"
+        />
+      </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>
+    </div>
+  </div>
+</template>

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

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

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

@@ -13,8 +13,19 @@ export interface SubscriptionPlan {
     label: string;
     description?: string;
     rank: number;
+    features?: string[];
     prices: SubscriptionPlanPrice[];
 }
+export type PlansResponse = {
+    plans: SubscriptionPlan[];
+};
+/** 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;

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

@@ -1,7 +1,15 @@
+export const PLANS_CLIENT_CACHE_MS = 5 * 60 * 1e3;
+export const usePlansCache = () => useState("subscriptions:plans:cache", () => null);
 export const usePlans = () => {
+  const cache = usePlansCache();
   const { data, status, error, refresh } = useFetch("/api/subscriptions/plans", {
     key: "subscriptions:plans",
-    default: () => ({ 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 plans = computed(
     () => [...data.value?.plans ?? []].sort((a, b) => a.rank - b.rank)

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

@@ -8,6 +8,7 @@ export interface UserSubscription {
     currentPeriodStart: string | null;
     currentPeriodEnd: string | null;
     endedAt: string | null;
+    source?: 'stripe' | 'manual';
 }
 export declare const useSubscription: () => {
     subscription: any;

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

@@ -1,22 +1,36 @@
 const ACTIVE_STATUSES = ["active", "trialing"];
+const CLIENT_CACHE_MS = 60 * 1e3;
+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());
+}
 export const useSubscription = () => {
   const { loggedIn } = useUserSession();
   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 }),
     immediate: loggedIn.value,
-    watch: false
+    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(loggedIn, (value) => {
     if (value) refresh();
-    else data.value = { subscriptions: [], activePlan: null };
+    else {
+      cache.value = null;
+      data.value = { subscriptions: [], activePlan: null };
+    }
   });
   const subscription = computed(() => {
     const list = data.value?.subscriptions ?? [];
-    return list.find((item) => ACTIVE_STATUSES.includes(item.status)) ?? null;
+    return list.find(isEntitled) ?? null;
   });
   const plan = computed(() => data.value?.activePlan ?? subscription.value?.planKey ?? null);
   const isActive = computed(() => subscription.value !== null);

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

@@ -1,3 +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 __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 _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +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 __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 _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").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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 _default: typeof __VLS_export;
 export default _default;

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

@@ -3,7 +3,9 @@ import SubscriptionPlans from "../components/SubscriptionPlans.vue";
 import SubscriptionStatus from "../components/SubscriptionStatus.vue";
 import { useSubscription } from "../composables/useSubscription";
 defineOptions({ name: "SubscriptionMembershipPage" });
-const { isActive } = useSubscription();
+const t = useModuleT("subscriptions");
+const { isActive, cancelsAt } = useSubscription();
+const { loggedIn } = useUserSession();
 </script>
 
 <template>
@@ -11,6 +13,21 @@ const { isActive } = useSubscription();
     <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>

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

@@ -1,3 +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 __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 _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").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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 _default: typeof __VLS_export;
 export default _default;

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

@@ -5,10 +5,16 @@ defineOptions({ name: "SubscriptionSuccessPage" });
 const t = useModuleT("subscriptions.success");
 const { refresh, isActive } = useSubscription();
 const membership = useRuntimeConfig().public.subscriptions?.pages?.membership;
+const MAX_ATTEMPTS = 40;
+const INTERVAL_MS = 3e3;
+let stopped = false;
+onBeforeUnmount(() => {
+  stopped = true;
+});
 onMounted(async () => {
-  for (let attempt = 0; attempt < 5 && !isActive.value; attempt++) {
+  for (let attempt = 0; attempt < MAX_ATTEMPTS && !stopped && !isActive.value; attempt++) {
     await refresh();
-    if (!isActive.value) await new Promise((resolve) => setTimeout(resolve, 2e3));
+    if (!isActive.value && !stopped) await new Promise((resolve) => setTimeout(resolve, INTERVAL_MS));
   }
 });
 </script>
@@ -19,7 +25,7 @@ onMounted(async () => {
       <UPageBody class="space-y-6">
         <UPageHeader
           :title="t('title', 'Thank you!')"
-          :description="t('body', 'Your subscription is being activated. This can take a few seconds.')"
+          :description="isActive ? t('activeBody', 'Your subscription is now active.') : t('body', 'Your subscription is being activated. This can take a few seconds.')"
         />
         <SubscriptionStatus />
         <UButton

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

@@ -1,3 +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 __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 _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/plugins/warm-plans.client.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Pre-loads the plans once the app is interactive, so the first client-side navigation to a page with the pricing
+ * table (from a page that never fetched them) renders instantly instead of waiting for a round trip.
+ */
+declare const _default: any;
+export default _default;

package/dist/runtime/app/plugins/warm-plans.client.js

@@ -0,0 +1,12 @@
+import { PLANS_CLIENT_CACHE_MS, usePlansCache } from "../composables/usePlans.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook("app:mounted", () => {
+    const cache = usePlansCache();
+    if (cache.value && Date.now() - cache.value.at < PLANS_CLIENT_CACHE_MS) return;
+    const warm = () => $fetch("/api/subscriptions/plans").then((data) => {
+      cache.value = { at: Date.now(), data };
+    }).catch(() => void 0);
+    if ("requestIdleCallback" in window) window.requestIdleCallback(() => void warm());
+    else setTimeout(() => void warm(), 1e3);
+  });
+});

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

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

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

@@ -0,0 +1,53 @@
+<script setup>
+defineOptions({ name: "UsersAdminMembershipTab" });
+const props = defineProps({
+  user: { type: Object, required: true }
+});
+const emit = defineEmits(["refresh"]);
+const t = useModuleT("subscriptions.admin");
+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 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: "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) },
+  { accessorKey: "endedAt", header: t("history.ended", "Ended"), cell: ({ row }) => date(row.original.endedAt) }
+]);
+async function changed() {
+  await refreshHistory();
+  emit("refresh");
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <AdminSection :title="t('membership', 'Membership')">
+      <UsersAdminMembership
+        :user="user"
+        @refresh="changed"
+      />
+    </AdminSection>
+
+    <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>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    user: {
+        subscription?: {
+            planKey: string | null;
+            status: string;
+        } | 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 _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+<script setup>
+defineOptions({ name: "UsersAdminCurrentSubscription" });
+defineProps({
+  user: { type: Object, required: true }
+});
+const t = useModuleT("subscriptions.admin");
+</script>
+
+<template>
+  <AdminStatCard
+    :label="t('currentSubscription', 'Current subscription')"
+    :empty="t('none', 'No active membership.')"
+  >
+    <template v-if="user.subscription">
+      <UBadge
+        variant="subtle"
+        :color="['active', 'trialing'].includes(user.subscription.status) ? 'success' : 'neutral'"
+        :label="user.subscription.planKey ?? user.subscription.status"
+      />
+      <span class="text-muted">{{ user.subscription.status }}</span>
+    </template>
+  </AdminStatCard>
+</template>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    user: {
+        subscription?: {
+            planKey: string | null;
+            status: string;
+        } | 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 _default: typeof __VLS_export;
+export default _default;