guestguard/frontend/pages/dashboard/billing.vue

<script setup lang="ts">
definePageMeta({ middleware: ['auth'] })

const route = useRoute()
const billing = useBilling()
const switching = ref<'pro' | 'business' | null>(null)
const portalLoading = ref(false)
const error = ref<string | null>(null)
const toast = ref<string | null>(null)
let toastTimer: ReturnType<typeof setTimeout> | null = null

function showToast(text: string) {
  toast.value = text
  if (toastTimer) clearTimeout(toastTimer)
  toastTimer = setTimeout(() => { toast.value = null }, 5000)
}

onMounted(async () => {
  await billing.fetchStatus()

  // Handle return-from-Stripe query params. ?billing=success means the
  // checkout completed; Stripe also fires the webhook server-side so we
  // refetch status to pick up the new tier without a hard reload.
  const flag = route.query.billing
  if (flag === 'success') {
    showToast('Subscription updated — welcome aboard!')
    // Stripe's webhook may take ~1s to land. Poll a couple of times.
    for (let i = 0; i < 3; i++) {
      await new Promise((r) => setTimeout(r, 1500))
      await billing.fetchStatus()
      if (billing.status.value?.tier !== 'free') break
    }
  } else if (flag === 'cancelled') {
    showToast('No worries — your plan is unchanged.')
  }
})

async function upgrade(tier: 'pro' | 'business') {
  switching.value = tier
  error.value = null
  try {
    await billing.startCheckout(tier)
  } catch (e: any) {
    if (e?.response?.status === 503) {
      error.value = 'Billing isn\'t enabled on this environment yet — contact support.'
    } else {
      error.value = useErrMessage(e, 'Could not start checkout')
    }
  } finally {
    switching.value = null
  }
}

async function manageSubscription() {
  portalLoading.value = true
  error.value = null
  try {
    await billing.openPortal()
  } catch (e: any) {
    if (e?.response?.status === 503) {
      error.value = 'Billing isn\'t enabled on this environment yet.'
    } else {
      error.value = useErrMessage(e, 'Could not open the billing portal')
    }
  } finally {
    portalLoading.value = false
  }
}

// Usage bar percentage — clamps to [0, 100] for the progress indicator.
const eventsUsagePct = computed(() => {
  const s = billing.status.value
  if (!s) return 0
  const limit = s.limits.events_per_month
  if (limit < 0) return 0 // unlimited — show empty bar
  if (limit === 0) return 100
  return Math.min(100, Math.round((s.usage.events_this_month / limit) * 100))
})

function formatLimit(n: number): string {
  return n < 0 ? 'Unlimited' : n.toLocaleString()
}

function periodEndLabel(iso?: string): string {
  if (!iso) return ''
  try {
    return new Date(iso).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
  } catch {
    return iso
  }
}
</script>

<template>
  <section class="space-y-6">
    <div>
      <NuxtLink to="/dashboard" class="mb-2 inline-block text-sm text-zinc-400 hover:text-zinc-200">
        ← Back to events
      </NuxtLink>
      <h1 class="text-2xl font-semibold">Billing &amp; plan</h1>
      <p class="mt-1 text-sm text-zinc-400">
        Change your plan, see your usage, or update your payment method.
      </p>
    </div>

    <ClientOnly>
      <!-- Current plan + usage -->
      <div class="card">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div>
            <p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Current plan</p>
            <div class="mt-1 flex items-baseline gap-2">
              <span class="text-2xl font-semibold capitalize text-zinc-100">{{ billing.status.value?.tier || '—' }}</span>
              <span
                v-if="billing.status.value && billing.status.value.tier !== 'free'"
                class="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-400"
              >{{ billing.status.value.status }}</span>
            </div>
            <p
              v-if="billing.status.value?.current_period_end && billing.status.value.tier !== 'free'"
              class="mt-1 text-xs text-zinc-500"
            >
              <template v-if="billing.status.value.cancel_at_period_end">
                Cancels on {{ periodEndLabel(billing.status.value.current_period_end) }}.
              </template>
              <template v-else>
                Renews on {{ periodEndLabel(billing.status.value.current_period_end) }}.
              </template>
            </p>
          </div>
          <button
            v-if="billing.status.value?.portal_available"
            type="button"
            class="rounded-md border border-zinc-700 px-3 py-1.5 text-sm text-zinc-200 transition hover:border-zinc-500 hover:bg-zinc-800 disabled:opacity-50"
            :disabled="portalLoading"
            @click="manageSubscription"
          >
            {{ portalLoading ? 'Opening…' : 'Manage subscription' }}
          </button>
        </div>

        <!-- Usage bar -->
        <div class="mt-5">
          <div class="mb-1.5 flex items-center justify-between text-xs">
            <span class="text-zinc-300">Events this month</span>
            <span class="tabular-nums text-zinc-400">
              {{ billing.status.value?.usage.events_this_month ?? 0 }}
              of
              {{ formatLimit(billing.status.value?.limits.events_per_month ?? 0) }}
            </span>
          </div>
          <div class="h-2 w-full overflow-hidden rounded-full bg-zinc-800">
            <div
              class="h-full rounded-full transition-all"
              :class="eventsUsagePct >= 90 ? 'bg-amber-400' : 'bg-brand-500'"
              :style="{ width: `${eventsUsagePct}%` }"
            ></div>
          </div>
          <p class="mt-1.5 text-xs text-zinc-500">
            Guest cap per event: {{ formatLimit(billing.status.value?.limits.guests_per_event ?? 0) }}.
          </p>
        </div>
      </div>

      <!-- Pricing cards -->
      <div class="grid gap-4 md:grid-cols-3">
        <div
          v-for="t in TIER_CARDS"
          :key="t.id"
          class="card relative flex flex-col gap-4"
          :class="t.highlight ? 'border-brand-700/60 bg-brand-500/[0.04]' : ''"
        >
          <span
            v-if="t.id === billing.status.value?.tier"
            class="absolute right-3 top-3 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-300"
          >Current</span>
          <span
            v-else-if="t.highlight"
            class="absolute right-3 top-3 rounded-full bg-brand-500 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-950"
          >Most popular</span>

          <div>
            <h3 class="text-lg font-semibold capitalize text-zinc-100">{{ t.name }}</h3>
            <p class="mt-1 text-xs text-zinc-500">{{ t.tagline }}</p>
          </div>

          <div>
            <span class="text-3xl font-semibold tabular-nums text-zinc-100">{{ t.price }}</span>
            <span class="ml-1 text-xs text-zinc-500">{{ t.priceSubtitle }}</span>
          </div>

          <ul class="space-y-1.5 text-sm text-zinc-300">
            <li v-for="f in t.features" :key="f" class="flex items-start gap-2">
              <svg class="mt-0.5 h-3.5 w-3.5 shrink-0 text-brand-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 5.296a1 1 0 010 1.408l-8 8a1 1 0 01-1.408 0l-4-4a1 1 0 011.408-1.408L8 12.592l7.296-7.296a1 1 0 011.408 0z" clip-rule="evenodd" />
              </svg>
              <span>{{ f }}</span>
            </li>
          </ul>

          <div class="mt-auto pt-2">
            <button
              v-if="t.id === billing.status.value?.tier"
              type="button"
              class="w-full cursor-default rounded-md border border-zinc-800 px-3 py-2 text-sm text-zinc-500"
              disabled
            >Current plan</button>
            <button
              v-else-if="t.id === 'free'"
              type="button"
              class="w-full cursor-default rounded-md border border-zinc-800 px-3 py-2 text-sm text-zinc-500"
              disabled
            >Downgrade in the billing portal</button>
            <button
              v-else
              type="button"
              class="btn-primary w-full disabled:opacity-50"
              :disabled="switching === t.id"
              @click="upgrade(t.id)"
            >
              {{ switching === t.id ? 'Opening checkout…' : `Upgrade to ${t.name}` }}
            </button>
          </div>
        </div>
      </div>

      <p v-if="error" class="text-sm text-red-400">{{ error }}</p>

      <p class="text-xs text-zinc-500">
        Receipts and invoices are emailed automatically by Stripe.
        Need to cancel? Use <a href="#" class="text-brand-400 hover:text-brand-300" @click.prevent="manageSubscription">Manage subscription</a> above.
        Data export and account deletion now live on the <NuxtLink to="/dashboard/account" class="text-brand-400 hover:text-brand-300">Account</NuxtLink> page.
      </p>

      <template #fallback>
        <div class="card text-sm text-zinc-500">Loading…</div>
      </template>
    </ClientOnly>

    <!-- Toast for return-from-Stripe -->
    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="translate-y-2 opacity-0"
      enter-to-class="translate-y-0 opacity-100"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="translate-y-0 opacity-100"
      leave-to-class="translate-y-2 opacity-0"
    >
      <button
        v-if="toast"
        type="button"
        class="fixed bottom-6 right-6 z-50 max-w-sm rounded-lg border border-brand-700/60 bg-brand-950/90 px-4 py-3 text-left text-sm text-brand-100 shadow-lg backdrop-blur"
        @click="toast = null"
      >
        <span aria-hidden="true" class="mr-2">✓</span>{{ toast }}
      </button>
    </Transition>
  </section>
</template>