chore: wip

resources/functions/billing/payments.ts

@@ -1,5 +1,6 @@
 import { loadStripe } from '@stripe/stripe-js'
 
+
 export const publishableKey = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY
 
 const stripe = ref(null as any)

resources/stores/payment.ts

@@ -1,3 +1,5 @@
+import { test } from '@stacksjs/browser'
+
 const apiUrl = `http://localhost:3008`
 
 interface StripePaymentMethod {

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CardBrands from './card-brands.vue'
+import PaymentMethodList from './payment-method-list.vue'
 
 import { useBillable } from '../../../../functions/billing/payments'
 
@@ -54,28 +55,14 @@ onMounted(async () => {
             <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-sm text-xs text-indigo-700 font-medium ring-1 ring-indigo-700/10 ring-inset">Default</span>
           </div>
         </div>
-
-        <div class="flex justify-end space-x-4">
-          <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
-            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="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" />
-            </svg>
-          </button>
-        </div>
       </div>
     </div>
 
+
+    <PaymentMethodList />
+
+
+
     <div v-show="!stripeLoading || showStripe">
       <form id="payment-form">
         <div id="payment-element" />

storage/framework/core/browser/src/index.ts

@@ -1 +1,2 @@
 export * from './utils/'
+

storage/framework/core/browser/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './retry'
 export * from './sleep'
 export * from './throttle'
 export * from './vendors'
+export * from './plans'

storage/framework/core/browser/src/utils/plans.ts

@@ -0,0 +1,3 @@
+import { saas } from '@stacksjs/config'
+
+export const plans: any = saas.plans

storage/framework/core/payments/src/billable/payment-method.ts

@@ -62,21 +62,29 @@ export const managePaymentMethod: ManagePaymentMethod = (() => {
     return await stripe.paymentMethod.update(paymentMethodId, updateParams)
   }
 
-  async function listPaymentMethods(user: UserModel, cardType?: string): Promise<Stripe.Response<Stripe.ApiList<Stripe.PaymentMethod>>> {
+  async function listPaymentMethods(
+    user: UserModel,
+    cardType?: string
+  ): Promise<Stripe.Response<Stripe.ApiList<Stripe.PaymentMethod>>> {
     if (!user.hasStripeId()) {
-      throw new Error('Customer does not exist in Stripe')
+      throw new Error('Customer does not exist in Stripe');
     }
 
+    const defaultPayment = await user?.defaultPaymentMethod()
+
     const paymentMethods = await stripe.paymentMethod.list({
       customer: user.stripe_id,
       type: 'card',
-    })
-
-    if (cardType) {
-      paymentMethods.data = paymentMethods.data.filter(method => method.card?.brand === cardType)
-    }
-
-    return paymentMethods
+    });
+
+    // Filter by card type if provided, and exclude the default payment method ID if it's available
+    paymentMethods.data = paymentMethods.data.filter(
+      (method) =>
+        (!cardType || method.card?.brand === cardType) &&
+        (defaultPayment?.id !== method.id) // Ensure defaultPayment is not null or undefined
+    );
+
+    return paymentMethods;
   }
 
   async function retrievePaymentMethod(user: UserModel, paymentMethodId: string): Promise<Stripe.Response<Stripe.PaymentMethod>> {