chore: wip

Author: glennmichael123

resources/functions/billing/payments.ts

@@ -80,7 +80,6 @@ export function useBillable() {
     })
 
     const res: any = await response.json()
-    
 
     return res
   }
@@ -99,15 +98,15 @@ export function useBillable() {
       },
     )
 
-    if (error)
-      console.error(error.message) // Display or handle error for the user
+    if (error) {
+      console.error(error.message)
+    } // Display or handle error for the user
     else {
-      if (! paymentStore.hasPaymentMethods)
+      if (!paymentStore.hasPaymentMethods)
         await setDefaultPaymentMethod(setupIntent.payment_method)
 
       alert('Successfully saved payment method!')
     }
-    
   }
 
   function isEmpty(object: any) {

resources/stores/payment.ts

@@ -1,16 +1,15 @@
+import type Stripe from 'stripe'
 import type { StripePaymentMethod } from '../types/billing'
-import Stripe from 'stripe'
 
 const apiUrl = `http://localhost:3008`
 
-
 export const usePaymentStore = defineStore('payment', {
   state: (): any => {
     return {
       paymentMethods: [] as StripePaymentMethod[],
       defaultPaymentMethod: {} as StripePaymentMethod,
       stripeCustomer: {} as Stripe.Customer,
-      paymentPlans: [] as any[]
+      paymentPlans: [] as any[],
     }
   },
 
@@ -29,9 +28,9 @@ export const usePaymentStore = defineStore('payment', {
 
     async deletePaymentMethod(paymentMethod: string): Promise<string> {
       const url = 'http://localhost:3008/stripe/delete-payment-method'
-  
+
       const body = { paymentMethod }
-  
+
       const response = await fetch(url, {
         method: 'POST',
         headers: {
@@ -40,10 +39,9 @@ export const usePaymentStore = defineStore('payment', {
         },
         body: JSON.stringify(body),
       })
-  
+
       const res: any = await response.json()
-      
-  
+
       return res
     },
 
@@ -86,7 +84,7 @@ export const usePaymentStore = defineStore('payment', {
     },
     getStripeCustomer(state): any {
       return state.stripeCustomer
-    }
+    },
   },
 })
 

resources/views/dashboard/components/billing/payment-method-list.vue

@@ -36,8 +36,8 @@ async function deletePayment(paymentMethodId: string) {
             <button
               aria-label="delete"
               type="button"
-              @click="deletePayment(method.id)"
               class="border rounded-md bg-white px-2 py-1 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-50 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
+              @click="deletePayment(method.id)"
             >
               <svg class="h-4 w-4 text-gray-700" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />

resources/views/dashboard/components/billing/payment-method.vue

@@ -30,7 +30,6 @@ async function submitPaymentMethod(clientSecret: string, elements: any) {
 
   showStripe.value = false
   stripeLoading.value = true
-  
 }
 
 function cancelPaymentForm() {

resources/views/dashboard/components/billing/plans.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useBillable } from '../../../../functions/billing/payments'
 import { saas } from '@stacksjs/browser'
-
+import { useBillable } from '../../../../functions/billing/payments'
 
 const checkedPlanType = ref('monthly')
 const selectedPlan = ref('')
@@ -12,15 +11,15 @@ const { subscribeToPlan } = useBillable()
 const loading = ref(true)
 
 const monthlyPricing = computed(() =>
-  saas.plans.flatMap(product => product.pricing).filter(price => price.interval === 'month')
+  saas.plans.flatMap(product => product.pricing).filter(price => price.interval === 'month'),
 )
 
 const yearlyPricing = computed(() =>
-  saas.plans.flatMap(product => product.pricing).filter(price => price.interval === 'year')
+  saas.plans.flatMap(product => product.pricing).filter(price => price.interval === 'year'),
 )
 
 const noIntervalPricing = computed(() =>
-  saas.plans.flatMap(product => product.pricing).filter(price => !price.interval)
+  saas.plans.flatMap(product => product.pricing).filter(price => !price.interval),
 )
 
 const perText = computed(() => {
@@ -39,7 +38,6 @@ const hobbyPrice = computed(() => {
 
     return ((plan?.price || 3900) / 100)
   }
-  
 
   if (checkedPlanType.value === 'annually') {
     const plan = yearlyPricing.value.find(monthly => monthly.key === 'stacks_hobby_yearly')
@@ -58,7 +56,6 @@ const proPrice = computed(() => {
 
     return ((plan?.price || 5900) / 100)
   }
-  
 
   if (checkedPlanType.value === 'annually') {
     const plan = yearlyPricing.value.find(monthly => monthly.key === 'stacks_pro_yearly')
@@ -68,7 +65,7 @@ const proPrice = computed(() => {
 
   const plan = noIntervalPricing.value.find(monthly => monthly.key === 'stacks_pro_lifetime')
 
-return ((plan?.price || 74900) / 100)
+  return ((plan?.price || 74900) / 100)
 })
 
 const getPlanTypeKey = computed(() => {
@@ -90,7 +87,7 @@ const getPlanTypeKey = computed(() => {
 async function subscribePlan() {
   const subscriptionIntent = await subscribeToPlan({
     type: getPlanTypeKey.value,
-    plan: selectedPlan.value
+    plan: selectedPlan.value,
   })
 
   // TODO: fire a toast or something
@@ -143,8 +140,9 @@ async function subscribePlan() {
       <div class="pt-8">
         <fieldset>
           <div class="space-y-4">
-            <label 
-              class="relative block cursor-pointer border rounded-lg bg-white px-6 py-4 shadow-sm sm:flex sm:justify-between focus:outline-none">
+            <label
+              class="relative block cursor-pointer border rounded-lg bg-white px-6 py-4 shadow-sm sm:flex sm:justify-between focus:outline-none"
+            >
               <input v-model="selectedPlan" type="radio" value="hobby" class="sr-only">
               <span class="flex items-center">
                 <span class="flex flex-col text-sm">

storage/framework/core/components/combobox/src/components/Styling.vue

@@ -48,7 +48,7 @@ async function handleCopyCode() {
     <div class="mt-5">
       <p class="my-3 text-base">
         Each component exposes information about its current state via <a class="text-blue-500" href="https://vuejs.org/guide/essentials/slots.html#slot-props" target="_blank">slot props</a> that you can use to conditionally apply different styles or render different content.
-        <br /><br />
+        <br><br>
         For example, the <code><b>ComboboxOption</b></code> component exposes an <code><b>active</b></code> state, which tells you if the item is currently focused via the mouse or keyboard.
       </p>
 

storage/framework/core/components/radio-group/src/App.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import Example from './components/Example.vue'
 import Footer from './components/Footer.vue'
 import Hero from './components/Hero.vue'
 import Installation from './components/Installation.vue'
 import Styling from './components/Styling.vue'
-import Example from './components/Example.vue'
 import { useSEOHeader } from './composables/useSEOHeader'
 
 useSEOHeader()

storage/framework/core/components/radio-group/src/components/Example.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { RadioGroup, RadioGroupOption, RadioGroupLabel } from '../components'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '../components'
 
 const plans = [
   {
@@ -26,20 +26,21 @@ const plans = [
 const selected = ref(plans[0])
 </script>
 
-
 <template>
   <section id="example">
     <div class="w-full px-4 pt-5">
-      <div class="mx-auto w-full max-w-md">
+      <div class="mx-auto max-w-md w-full">
         <RadioGroup v-model="selected">
-          <RadioGroupLabel class="sr-only">Server size</RadioGroupLabel>
+          <RadioGroupLabel class="sr-only">
+            Server size
+          </RadioGroupLabel>
           <div class="space-y-2">
             <RadioGroupOption
-              as="template"
               v-for="plan in plans"
               :key="plan.name"
-              :value="plan"
               v-slot="{ active, checked }"
+              as="template"
+              :value="plan"
             >
               <div
                 :class="[
@@ -50,7 +51,7 @@ const selected = ref(plans[0])
                 ]"
                 class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none"
               >
-                <div class="flex w-full items-center justify-between">
+                <div class="w-full flex items-center justify-between">
                   <div class="flex items-center">
                     <div class="text-sm">
                       <RadioGroupLabel

storage/framework/core/components/radio-group/src/components/Styling.vue

@@ -56,7 +56,7 @@ async function handleCopyCode() {
     <div class="mt-5">
       <p class="my-3 text-base">
         Each component exposes information about its current state via <a class="text-blue-500" href="https://vuejs.org/guide/essentials/slots.html#slot-props" target="_blank">slot props</a> that you can use to conditionally apply different styles or render different content.
-        <br /><br />
+        <br><br>
         For example, the <code>RadioGroupOption</code> component exposes an <code>active</code> state, which tells you if the item is currently focused via the mouse or keyboard.
       </p>
 

storage/framework/core/components/radio-group/src/components/index.ts

@@ -1,8 +1,8 @@
 import {
   RadioGroup,
-  RadioGroupLabel,
   RadioGroupDescription,
+  RadioGroupLabel,
   RadioGroupOption,
 } from '@headlessui/vue'
 
-export { RadioGroup, RadioGroupLabel, RadioGroupDescription, RadioGroupOption }
+export { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption }