opnform/resources/js/pages/settings/billing.vue

42 lines
1.0 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">Billing details</h3>
<small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it at any time.</small>
<div class="mt-4">
<v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
Manage Subscription
</v-button>
</div>
</div>
2022-09-20 19:59:52 +00:00
</template>
<script>
import axios from 'axios'
import VButton from '../../components/common/Button.vue'
import SeoMeta from '../../mixins/seo-meta.js'
2022-09-20 19:59:52 +00:00
export default {
components: { VButton },
scrollToTop: false,
mixins: [SeoMeta],
2022-09-20 19:59:52 +00:00
data: () => ({
metaTitle: 'Billing',
2022-09-20 19:59:52 +00:00
billingLoading: false
}),
methods: {
openBillingDashboard () {
this.billingLoading = true
axios.get('/api/subscription/billing-portal').then((response) => {
const url = response.data.portal_url
window.location = url
}).finally(() => {
this.billingLoading = false
})
}
}
}
</script>