@frigear-nu/subscriptions 0.0.7 → 0.0.8

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

@@ -1,4 +1,6 @@
 <script setup>
+import { createReusableTemplate } from "@vueuse/core";
+import { formatMoney } from "@frigear-nu/ui/money";
 import { usePlans } from "../composables/usePlans";
 import { useSubscription } from "../composables/useSubscription";
 defineOptions({ name: "SubscriptionPlans" });
@@ -7,14 +9,19 @@ const props = defineProps({
   currency: { type: String, required: false },
   interval: { type: String, required: false },
   plans: { type: Array, required: false },
-  confirmChange: { type: Boolean, required: false, default: false }
+  confirmChange: { type: Boolean, required: false, default: false },
+  mode: { type: String, required: false, default: "auto" },
+  highlight: { type: String, required: false }
 });
 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, pending, subscribe, error } = useSubscription();
+const { plan: currentPlan, isActive, cancelsAt, pending, subscribe, error, status: subscriptionStatus } = useSubscription();
+const { loggedIn } = useUserSession();
+const route = useRoute();
+const [DefineCard, ReuseCard] = createReusableTemplate();
 const visible = computed(() => allPlans.value.filter((p) => !props.plans || props.plans.includes(p.key)));
 const currentRank = computed(() => allPlans.value.find((p) => p.key === currentPlan.value)?.rank ?? null);
 function priceFor(plan) {
@@ -22,14 +29,12 @@ function priceFor(plan) {
 }
 function formatPrice(price) {
   if (price.amount === null) return "";
-  return new Intl.NumberFormat(props.locale, {
-    style: "currency",
-    currency: (props.currency ?? price.currency).toUpperCase()
-  }).format(price.amount / 100);
+  return formatMoney(price.amount, props.currency ?? price.currency, props.locale);
 }
 function intervalLabel(price) {
   const singular = { day: "day", week: "week", month: "month", year: "year" };
   const unit = singular[price.interval];
+  if (price.interval === "month" && price.intervalCount === 3) return ti("quarter", "quarter");
   if (price.intervalCount <= 1) return ti(unit, unit);
   return `${price.intervalCount} ${ti(`${unit}s`, `${unit}s`)}`;
 }
@@ -37,11 +42,28 @@ const labelOf = (plan) => tp(`${plan.key}.label`, plan.label);
 const descriptionOf = (plan) => plan.description ? tp(`${plan.key}.description`, plan.description) : "";
 function stateOf(plan) {
   if (!isActive.value) return "subscribe";
-  if (plan.key === currentPlan.value) return "current";
+  if (plan.key === currentPlan.value) return cancelsAt.value ? "resume" : "current";
   if (currentRank.value === null) return "subscribe";
   return plan.rank > currentRank.value ? "upgrade" : "downgrade";
 }
-const stateLabel = (state) => t(state, { current: "Current plan", subscribe: "Subscribe", upgrade: "Upgrade", downgrade: "Downgrade" }[state]);
+const stateLabel = (state) => t(state, { current: "Current plan", resume: "Resubscribe", subscribe: "Subscribe", upgrade: "Upgrade", downgrade: "Downgrade" }[state]);
+const showTabs = computed(() => props.mode !== "list");
+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
+})));
+watchEffect(() => {
+  if (!activeTab.value || !visible.value.some((p) => p.key === activeTab.value)) {
+    activeTab.value = (visible.value.find((p) => p.key === currentPlan.value) ?? visible.value[visible.value.length - 1])?.key;
+  }
+});
+const highlighted = (plan) => props.highlight ? props.highlight === plan.key : stateOf(plan) === "current";
+function featuresOf(plan) {
+  return plan.features?.length ? plan.features : void 0;
+}
 const confirming = ref(null);
 const confirmOpen = computed({
   get: () => confirming.value !== null,
@@ -54,16 +76,135 @@ async function go(plan, price) {
   confirming.value = null;
   await subscribe(plan.key).catch(() => void 0);
 }
+function signUpTarget(plan) {
+  const authPages = useAuthPages();
+  const pages = useRuntimeConfig().public;
+  const entry = authPages.register ?? authPages.login;
+  const back = `${pages.subscriptions?.pages?.membership ?? route.path}?plan=${encodeURIComponent(plan.key)}`;
+  return entry ? `${entry}?redirect=${encodeURIComponent(back)}` : null;
+}
 function choose(plan) {
   const price = priceFor(plan);
   if (!price) return;
+  if (!loggedIn.value) {
+    const target = signUpTarget(plan);
+    if (target) navigateTo(target);
+    return;
+  }
+  if (stateOf(plan) === "current") return;
   if (props.confirmChange && isActive.value) confirming.value = { plan, price };
   else go(plan, price);
 }
+const confirmKind = computed(() => confirming.value ? stateOf(confirming.value.plan) : "subscribe");
+const confirmText = computed(() => ({
+  upgrade: t("confirmUpgrade", "Upgrading moves you to the higher plan immediately and charges the difference."),
+  downgrade: t("confirmDowngrade", "Downgrading keeps your current plan until the next due date."),
+  resume: t("confirmResume", "Your membership will keep renewing as before."),
+  subscribe: t("confirmCheckout", "You will now be taken to Stripe to confirm."),
+  current: ""
+})[confirmKind.value]);
+const handledPlanQuery = ref(false);
+watch([visible, subscriptionStatus, loggedIn], () => {
+  const key = route.query.plan;
+  if (handledPlanQuery.value || typeof key !== "string" || !loggedIn.value || subscriptionStatus.value === "pending") return;
+  const plan = visible.value.find((p) => p.key === key);
+  if (!plan) return;
+  handledPlanQuery.value = true;
+  if (stateOf(plan) !== "current") choose(plan);
+  navigateTo({ path: route.path, query: { ...route.query, plan: void 0 } }, { replace: true });
+}, { immediate: true });
 </script>
 
 <template>
   <div class="space-y-4">
+    <DefineCard v-slot="{ plan, preview }">
+      <UPricingPlan
+        :data-plan="plan.key"
+        :title="labelOf(plan)"
+        :description="descriptionOf(plan)"
+        :price="priceFor(plan) ? formatPrice(priceFor(plan)) : void 0"
+        :billing-cycle="priceFor(plan) ? `/ ${intervalLabel(priceFor(plan))}` : void 0"
+        :features="featuresOf(plan)"
+        :terms="t('feeIncluded', '*Payment fees are included in the amount')"
+        :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"
+        :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',
+  terms: 'text-xs text-muted'
+}"
+      >
+        <template
+          v-if="$slots.header"
+          #header
+        >
+          <slot
+            name="header"
+            :plan="plan"
+            :state="stateOf(plan)"
+          />
+        </template>
+        <template
+          v-if="$slots.badge"
+          #badge
+        >
+          <slot
+            name="badge"
+            :plan="plan"
+            :state="stateOf(plan)"
+          />
+        </template>
+        <template
+          v-if="$slots.price"
+          #price
+        >
+          <slot
+            name="price"
+            :plan="plan"
+            :price="priceFor(plan)"
+            :format-price="formatPrice"
+            :interval-label="intervalLabel"
+          />
+        </template>
+        <template
+          v-if="$slots.features"
+          #features
+        >
+          <slot
+            name="features"
+            :plan="plan"
+          />
+        </template>
+        <template
+          v-if="!preview"
+          #button
+        >
+          <slot
+            name="action"
+            :plan="plan"
+            :state="stateOf(plan)"
+            :pending="pending"
+            :select="() => choose(plan)"
+          >
+            <UButton
+              block
+              size="lg"
+              class="uppercase"
+              :loading="pending"
+              :disabled="stateOf(plan) === 'current' || !priceFor(plan)"
+              :variant="stateOf(plan) === 'current' ? 'subtle' : 'solid'"
+              :label="loggedIn ? stateLabel(stateOf(plan)) : t('subscribe', 'Subscribe')"
+              @click="choose(plan)"
+            />
+          </slot>
+        </template>
+      </UPricingPlan>
+    </DefineCard>
+
     <slot
       v-if="status === 'pending' && !visible.length"
       name="loading"
@@ -89,98 +230,41 @@ function choose(plan) {
       :description="error"
     />
 
-    <div
-      v-if="visible.length"
-      class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-    >
-      <UCard
-        v-for="plan in visible"
-        :key="plan.key"
-        :data-plan="plan.key"
-      >
-        <template #header>
-          <slot
-            name="header"
-            :plan="plan"
-            :state="stateOf(plan)"
-          >
-            <div class="flex items-center justify-between gap-2">
-              <h3 class="font-semibold">
-                {{ labelOf(plan) }}
-              </h3>
-              <slot
-                name="badge"
-                :plan="plan"
-                :state="stateOf(plan)"
-              >
-                <UBadge
-                  v-if="stateOf(plan) === 'current'"
-                  color="primary"
-                  variant="subtle"
-                >
-                  {{ t("current", "Current plan") }}
-                </UBadge>
-              </slot>
-            </div>
-            <p
-              v-if="descriptionOf(plan)"
-              class="mt-1 text-sm text-muted"
-            >
-              {{ descriptionOf(plan) }}
-            </p>
-          </slot>
-        </template>
-
-        <slot
-          name="price"
-          :plan="plan"
-          :price="priceFor(plan)"
-          :format-price="formatPrice"
-          :interval-label="intervalLabel"
+    <template v-if="visible.length">
+      <template v-if="showTabs">
+        <UTabs
+          v-model="activeTab"
+          :items="tabItems"
+          :content="false"
+          class="w-full"
+          :class="{ 'sm:hidden': showGrid }"
+        />
+        <div
+          class="pt-2"
+          :class="{ 'sm:hidden': showGrid }"
         >
-          <template v-if="priceFor(plan)">
-            <p class="text-2xl font-bold">
-              {{ formatPrice(priceFor(plan)) }}
-              <span class="text-sm font-normal text-muted">/ {{ intervalLabel(priceFor(plan)) }}</span>
-            </p>
-            <p
-              v-if="priceFor(plan).trialPeriodDays"
-              class="mt-1 text-sm text-muted"
-            >
-              {{ t("trial", "{days}-day free trial", { days: priceFor(plan).trialPeriodDays }) }}
-            </p>
-          </template>
-        </slot>
-
-        <slot
-          name="features"
+          <ReuseCard
+            v-if="visible.find((p) => p.key === activeTab)"
+            :plan="visible.find((p) => p.key === activeTab)"
+          />
+        </div>
+      </template>
+      <div
+        v-if="showGrid"
+        class="items-stretch gap-6 sm:grid-cols-2"
+        :class="[showTabs ? 'hidden sm:grid' : 'grid', visible.length >= 3 ? 'lg:grid-cols-3' : '']"
+      >
+        <ReuseCard
+          v-for="plan in visible"
+          :key="plan.key"
           :plan="plan"
         />
-
-        <template #footer>
-          <slot
-            name="action"
-            :plan="plan"
-            :state="stateOf(plan)"
-            :pending="pending"
-            :select="() => choose(plan)"
-          >
-            <UButton
-              block
-              :loading="pending"
-              :disabled="stateOf(plan) === 'current' || !priceFor(plan)"
-              :variant="stateOf(plan) === 'current' ? 'outline' : 'solid'"
-              :label="stateLabel(stateOf(plan))"
-              @click="choose(plan)"
-            />
-          </slot>
-        </template>
-      </UCard>
-    </div>
+      </div>
+    </template>
 
     <UModal
       v-model:open="confirmOpen"
-      :title="t('confirmTitle', 'Change plan')"
+      :title="confirmKind === 'subscribe' ? t('checkoutTitle', 'Get a membership') : t('changeTitle', 'Update subscription')"
     >
       <template #body>
         <slot
@@ -188,7 +272,19 @@ function choose(plan) {
           :plan="confirming?.plan"
           :price="confirming?.price"
         >
-          <p>{{ t("confirmBody", "Switch to {plan}? Your subscription will be updated.", { plan: confirming ? labelOf(confirming.plan) : "" }) }}</p>
+          <div class="space-y-4">
+            <p class="text-muted">
+              {{ t("subscribeTo", "You will now subscribe to:") }}
+            </p>
+            <ReuseCard
+              v-if="confirming"
+              :plan="confirming.plan"
+              preview
+            />
+            <p class="text-sm text-muted">
+              {{ confirmText }}
+            </p>
+          </div>
         </slot>
       </template>
       <template #footer>
@@ -198,16 +294,18 @@ function choose(plan) {
           :price="confirming?.price"
           :confirm="() => confirming && go(confirming.plan, confirming.price)"
         >
-          <UButton
-            variant="outline"
-            :label="t('cancel', 'Cancel')"
-            @click="confirming = null"
-          />
-          <UButton
-            :label="t('confirm', 'Confirm')"
-            :loading="pending"
-            @click="confirming && go(confirming.plan, confirming.price)"
-          />
+          <div class="flex w-full justify-end gap-2">
+            <UButton
+              variant="outline"
+              :label="t('cancel', 'Cancel')"
+              @click="confirming = null"
+            />
+            <UButton
+              :label="t('confirm', 'Confirm')"
+              :loading="pending"
+              @click="confirming && go(confirming.plan, confirming.price)"
+            />
+          </div>
         </slot>
       </template>
     </UModal>

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

@@ -8,59 +8,63 @@ type __VLS_Props = {
     plans?: string[];
     /** Ask for confirmation (modal) before changing an existing subscription. */
     confirmChange?: boolean;
+    /** `list` shows all plans side by side, `tabs` one at a time. `auto` uses tabs on small screens. */
+    mode?: 'auto' | 'list' | 'tabs';
+    /** Plan key to emphasise (defaults to the current plan, when subscribed). */
+    highlight?: string;
 };
 declare function formatPrice(price: SubscriptionPlanPrice): string;
 declare function intervalLabel(price: SubscriptionPlanPrice): any;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_17: {
-    plan: any;
-    state: "upgrade" | "downgrade" | "subscribe" | "current";
-}, __VLS_19: {
-    plan: any;
-    state: "upgrade" | "downgrade" | "subscribe" | "current";
-}, __VLS_27: {
-    plan: any;
+declare var __VLS_14: {
+    plan: SubscriptionPlan;
+    state: "upgrade" | "downgrade" | "resume" | "subscribe" | "current";
+}, __VLS_17: {
+    plan: SubscriptionPlan;
+    state: "upgrade" | "downgrade" | "resume" | "subscribe" | "current";
+}, __VLS_20: {
+    plan: SubscriptionPlan;
     price: SubscriptionPlanPrice | undefined;
     formatPrice: typeof formatPrice;
     intervalLabel: typeof intervalLabel;
-}, __VLS_29: {
-    plan: any;
-}, __VLS_32: {
-    plan: any;
-    state: "upgrade" | "downgrade" | "subscribe" | "current";
+}, __VLS_23: {
+    plan: SubscriptionPlan;
+}, __VLS_26: {
+    plan: SubscriptionPlan;
+    state: "upgrade" | "downgrade" | "resume" | "subscribe" | "current";
     pending: any;
     select: () => void;
-}, __VLS_48: {
+}, __VLS_35: {}, __VLS_37: {}, __VLS_66: {
     plan: any;
     price: any;
-}, __VLS_51: {
+}, __VLS_74: {
     plan: any;
     price: any;
     confirm: () => any;
 };
 type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_1) => any;
+    header?: (props: typeof __VLS_14) => any;
 } & {
-    empty?: (props: typeof __VLS_3) => any;
+    badge?: (props: typeof __VLS_17) => any;
 } & {
-    header?: (props: typeof __VLS_17) => any;
+    price?: (props: typeof __VLS_20) => any;
 } & {
-    badge?: (props: typeof __VLS_19) => any;
+    features?: (props: typeof __VLS_23) => any;
 } & {
-    price?: (props: typeof __VLS_27) => any;
+    action?: (props: typeof __VLS_26) => any;
 } & {
-    features?: (props: typeof __VLS_29) => any;
+    loading?: (props: typeof __VLS_35) => any;
 } & {
-    action?: (props: typeof __VLS_32) => any;
+    empty?: (props: typeof __VLS_37) => any;
 } & {
-    confirm?: (props: typeof __VLS_48) => any;
+    confirm?: (props: typeof __VLS_66) => any;
 } & {
-    'confirm-actions'?: (props: typeof __VLS_51) => any;
+    'confirm-actions'?: (props: typeof __VLS_74) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
     select: (plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -33,7 +33,7 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_33) => 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_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -15,7 +15,8 @@ const planLabel = computed(() => {
 });
 const badge = computed(() => {
   const value = subscription.value?.status;
-  if (value === "active") return { label: t("active", "Active"), color: "success" };
+  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: "success", icon: "i-lucide-shield-check" };
   if (value === "trialing") return { label: t("trialing", "Trial"), color: "info" };
   if (value === "past_due" || value === "unpaid") return { label: t("pastDue", "Past due"), color: "warning" };
   if (value === "canceled") return { label: t("canceled", "Canceled"), color: "neutral" };
@@ -24,17 +25,19 @@ const badge = computed(() => {
 function formatDate(value) {
   return value ? new Intl.DateTimeFormat(props.locale, { dateStyle: "long" }).format(new Date(value)) : "";
 }
+const isManual = computed(() => subscription.value?.source === "manual");
 const dateText = computed(() => {
-  if (cancelsAt.value) return t("cancels", "Ends on {date}", { date: formatDate(cancelsAt.value) });
   const end = subscription.value?.currentPeriodEnd;
-  return end ? t("renews", "Renews on {date}", { date: formatDate(end) }) : "";
+  if (isManual.value) return end ? t("freeUntil", "Free membership until {date}", { date: formatDate(end) }) : t("free", "Free membership");
+  if (cancelsAt.value) return t("cancelsAt", "Ending at {date}", { date: formatDate(cancelsAt.value) });
+  return end ? t("renewsAutomaticallyAt", "Renews automatically on {date}", { date: formatDate(end) }) : "";
 });
 const resubscribe = () => subscription.value?.planKey ? subscribe(subscription.value.planKey).catch(() => void 0) : subscribe(subscription.value?.priceId ?? "").catch(() => void 0);
 const manage = () => openPortal().catch(() => void 0);
 </script>
 
 <template>
-  <UCard>
+  <UCard :ui="{ root: 'rounded-xl' }">
     <template #header>
       <slot name="header">
         <h3 class="font-semibold">
@@ -52,16 +55,22 @@ const manage = () => openPortal().catch(() => void 0);
       </p>
     </slot>
 
-    <template v-else-if="isActive && subscription">
-      <div class="flex flex-wrap items-center gap-2">
-        <slot
-          name="plan"
-          :plan="plan"
-          :label="planLabel"
-          :subscription="subscription"
-        >
-          <span class="font-medium">{{ planLabel }}</span>
-        </slot>
+    <div
+      v-else-if="isActive && subscription"
+      class="flex flex-col gap-4"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex flex-col">
+          <span class="text-sm text-muted">{{ t("currentPlan", "Current plan") }}</span>
+          <slot
+            name="plan"
+            :plan="plan"
+            :label="planLabel"
+            :subscription="subscription"
+          >
+            <span class="text-lg font-semibold">{{ planLabel }}</span>
+          </slot>
+        </div>
         <slot
           name="badge"
           :subscription="subscription"
@@ -69,7 +78,8 @@ const manage = () => openPortal().catch(() => void 0);
         >
           <UBadge
             :color="badge.color"
-            variant="subtle"
+            :icon="badge.icon"
+            variant="soft"
           >
             {{ badge.label }}
           </UBadge>
@@ -81,14 +91,14 @@ const manage = () => openPortal().catch(() => void 0);
         :cancels-at="cancelsAt"
         :date-text="dateText"
       >
-        <p
+        <div
           v-if="dateText"
-          class="mt-2 text-sm text-muted"
+          class="rounded-md bg-muted/50 px-4 py-3 text-sm"
         >
           {{ dateText }}
-        </p>
+        </div>
       </slot>
-    </template>
+    </div>
 
     <slot
       v-else
@@ -108,7 +118,7 @@ const manage = () => openPortal().catch(() => void 0);
     />
 
     <template
-      v-if="isActive"
+      v-if="isActive && !isManual"
       #footer
     >
       <slot
@@ -118,19 +128,30 @@ const manage = () => openPortal().catch(() => void 0);
         :cancelling="!!cancelsAt"
         :pending="pending"
       >
-        <div class="flex flex-wrap gap-2">
+        <div class="flex flex-wrap gap-3">
           <UButton
+            v-if="!cancelsAt"
+            color="error"
+            variant="soft"
+            icon="i-lucide-x"
             :loading="pending"
-            :label="t('manage', 'Manage billing')"
+            :label="t('cancel', 'Cancel membership')"
             @click="manage"
           />
           <UButton
-            v-if="cancelsAt"
-            variant="outline"
+            v-else
+            icon="i-lucide-rotate-ccw"
             :loading="pending"
             :label="t('resubscribe', 'Resubscribe')"
             @click="resubscribe"
           />
+          <UButton
+            variant="outline"
+            icon="i-lucide-credit-card"
+            :loading="pending"
+            :label="t('changePaymentMethod', 'Change payment method')"
+            @click="manage"
+          />
         </div>
       </slot>
     </template>

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

@@ -33,7 +33,7 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_33) => 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_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Users/Admin/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;