35 lines
1 KiB
Vue
35 lines
1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{ plan: string; label: string }>();
|
|
const router = useRouter();
|
|
const busy = ref(false);
|
|
const error = ref<string | null>(null);
|
|
|
|
async function upgrade() {
|
|
busy.value = true;
|
|
error.value = null;
|
|
try {
|
|
const { url } = await $fetch<{ url: string }>('/api/billing/checkout', { method: 'POST', body: { plan: props.plan } });
|
|
await router.push(url.replace(/^https?:\/\/[^/]+/, ''));
|
|
await refreshNuxtData('current-user');
|
|
} catch (err: unknown) {
|
|
const status = (err as { statusCode?: number })?.statusCode;
|
|
if (status === 401) {
|
|
await router.push('/login?next=/pricing');
|
|
return;
|
|
}
|
|
error.value = 'Checkout failed';
|
|
} finally {
|
|
busy.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-6">
|
|
<button type="button" class="btn-primary w-full" :disabled="busy" @click="upgrade">
|
|
{{ busy ? 'Working…' : label }}
|
|
</button>
|
|
<p v-if="error" class="mt-2 text-sm text-red-600">{{ error }}</p>
|
|
</div>
|
|
</template>
|