opnform/client/pages/settings/billing.vue

50 lines
1.2 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">
Billing details
</h3>
<template v-if="user.has_customer_id">
<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>
</template>
<app-sumo-billing class="mt-4" />
</div>
</template>
<script setup>
2023-12-09 14:47:03 +00:00
import { computed } from 'vue'
import { useAuthStore } from '../../stores/auth'
import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
useOpnSeoMeta({
title: 'Billing'
})
definePageMeta({
middleware: "auth"
})
const authStore = useAuthStore()
let user = computed(() => authStore.user)
let billingLoading = false
const openBillingDashboard = () => {
billingLoading = true
opnFetch('/subscription/billing-portal').then((data) => {
const url = data.portal_url
window.location = url
}).catch((error) => {
useAlert().error(error.response.data.message)
}).finally(() => {
billingLoading = false
})
2023-12-09 14:47:03 +00:00
}
</script>