@frigear-nu/subscriptions 0.0.9 → 0.1.0

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

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<{}, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

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

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

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

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

@@ -6,6 +6,6 @@ type __VLS_Props = {
         } | null;
     };
 };
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -6,6 +6,6 @@ type __VLS_Props = {
         } | null;
     };
 };
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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

package/dist/runtime/menus.js

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