chore: wip

Author: glennmichael123

resources/stores/payment.ts

@@ -49,7 +49,7 @@ export const usePaymentStore = defineStore('payment', {
       return client
     },
 
-    async cancelPlan(): Promise<string> {
+    async cancelPlan(): Promise<void> {
       const url = 'http://localhost:3008/stripe/cancel-subscription'
 
       const providerId = this.getCurrentPlan.subscription.provider_id
@@ -169,6 +169,8 @@ export const usePaymentStore = defineStore('payment', {
         const res = await response.json()
 
         this.activeSubscription = res
+      } else {
+        this.activeSubscription = {}
       }
     },
   },

resources/views/dashboard/components/billing/active-plan.vue

@@ -10,6 +10,20 @@ async function cancelPlan() {
 
   await paymentStore.fetchUserActivePlan()
 }
+
+const subscriptionType = computed(() => {
+  const type = paymentStore.getCurrentPlan.subscription.type
+
+  return type.charAt(0).toUpperCase() + type.slice(1)
+})
+
+const nextPayment = computed(() => {
+  return convertUnixTimestampToDate(paymentStore.getCurrentPlan.providerSubscription.current_period_end)
+})
+
+const unitPrice = computed(() => {
+  return paymentStore.getCurrentPlan.subscription.unit_price / 100
+})
 </script>
 
 <template>
@@ -20,15 +34,15 @@ async function cancelPlan() {
 
     <div class="pt-2">
       <p class="text-gray-700 font-bold">
-        {{ paymentStore.getCurrentPlan.subscription.type }} Plan
+        {{ subscriptionType }} Plan
       </p>
 
       <p class="pt-2 text-sm text-gray-500 font-normal italic">
         {{ paymentStore.getCurrentPlan.subscription.description }}
       </p>
 
       <p class="pt-4 text-sm text-gray-700 font-semibold">
-        Next payment of ${{ paymentStore.getCurrentPlan.subscription.unit_price / 100 }} occurs on {{ convertUnixTimestampToDate(paymentStore.getCurrentPlan.providerSubscription.current_period_end) }}
+        Next payment of ${{ unitPrice }} occurs on {{ nextPayment }}
       </p>
     </div>
 

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

@@ -41,15 +41,6 @@ async function makeDefault(paymentMethodId: string) {
               </svg>
             </button>
 
-            <button
-              type="button"
-              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"
-            >
-              <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
-              </svg>
-            </button>
-
             <button
               aria-label="delete"
               type="button"