Appsumo (#232)

* Implemented webhooks

* oAuth wip

* Implement the whole auth flow

* Implement file upload limit depending on appsumo license

resources/js/pages/settings/billing.vue

@@ -1,14 +1,21 @@
 <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>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Billing details
+    </h3>
 
-    <div class="mt-4">
-      <v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
-        Manage Subscription
-      </v-button>
-    </div>
+    <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>
 
@@ -16,11 +23,13 @@
 import axios from 'axios'
 import VButton from '../../components/common/Button.vue'
 import SeoMeta from '../../mixins/seo-meta.js'
+import { mapGetters } from 'vuex'
+import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
 
 export default {
-  components: {VButton},
-  scrollToTop: false,
+  components: { AppSumoBilling, VButton },
   mixins: [SeoMeta],
+  scrollToTop: false,
 
   data: () => ({
     metaTitle: 'Billing',
@@ -28,7 +37,7 @@ export default {
   }),
 
   methods: {
-    openBillingDashboard() {
+    openBillingDashboard () {
       this.billingLoading = true
       axios.get('/api/subscription/billing-portal').then((response) => {
         const url = response.data.portal_url
@@ -39,6 +48,12 @@ export default {
         this.billingLoading = false
       })
     }
+  },
+
+  computed: {
+    ...mapGetters({
+      user: 'auth/user'
+    })
   }
 }
 </script>