chore: wip

.env.example

@@ -40,3 +40,5 @@ MEILISEARCH_KEY=masterKey
 # FRONTEND_* variables should not contain any sensitive information
 FRONTEND_APP_ENV="${APP_ENV}"
 FRONTEND_APP_URL="${APP_URL}"
+
+FRONTEND_STRIPE_PUBLIC_KEY=

package.json

@@ -74,8 +74,5 @@
     "storage/framework/libs/components/*",
     "storage/framework/views/*",
     "storage/framework/server"
-  ],
-  "devDependencies": {
-    "@stacksjs/eslint-plugin": "^0.1.3"
-  }
+  ]
 }

resources/stores/payment.ts

@@ -0,0 +1,33 @@
+import Stripe from 'stripe'
+const apiUrl = `http://localhost:3008`
+
+export const usePaymentStore = defineStore('payment', {
+  state: (): any => {
+    return {
+      paymentMethods: [] as Stripe.PaymentMethod[]
+    }
+  },
+
+  actions: {
+    async fetchUserPaymentMethods(): Promise<void> {
+      const response: any = await fetch(`${apiUrl}/stripe/user-payment-methods`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+      }).then((res) => res.json())
+
+      this.paymentMethods = response.data
+    },
+  },
+
+  getters: {
+    getPaymentMethods(state): Stripe.PaymentMethod[] {
+      return state.paymentMethods
+    },
+  },
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(usePaymentStore, import.meta.hot))

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useBillable } from '../../../../functions/billing/payments'
+const paymentStore = usePaymentStore()
 
 const stripeLoading = ref(true)
 const showStripe = ref(false)
@@ -18,6 +19,10 @@ function cancelPaymentForm() {
   showStripe.value = false
   stripeLoading.value = true
 }
+
+onMounted(async () => {
+  await paymentStore.fetchUserPaymentMethods()
+})
 </script>
 
 <template>
@@ -27,15 +32,15 @@ function cancelPaymentForm() {
     </h2>
 
     <ul v-if="stripeLoading || !showStripe" role="list" class="grid grid-cols-1 mt-8 gap-6 lg:grid-cols-1 sm:grid-cols-1">
-      <li class="col-span-1 border rounded-lg bg-white shadow divide-y divide-gray-200">
+      <li v-for="(method, index) in paymentStore.getPaymentMethods" :key="index" class="col-span-1 border rounded-lg bg-white shadow divide-y divide-gray-200">
         <div class="w-full p-4">
           <div class="flex space-x-4">
             <div class="h-24 w-24">
               <img src="/images/logos/mastercard.svg" alt="Mastercard Logo" class="border">
             </div>
             <h2 class="text-xl text-gray-600">
-              Mastercard •••• 4242 <br>
-              <span class="text-xs text-gray-500 italic">Expires 10/30</span>
+              {{ method.card.brand }} •••• {{ method.card.last4 }} <br>
+              <span class="text-xs text-gray-500 italic">Expires {{ method.card.exp_month }} /  {{ method.card.exp_year }} </span>
             </h2>
           </div>
 

storage/framework/.eslintrc-auto-import.json

@@ -414,6 +414,7 @@
     "withIndices": true,
     "word": true,
     "wordBoundary": true,
-    "wordChar": true
+    "wordChar": true,
+    "usePaymentStore": true
   }
 }

storage/framework/core/components/transition/src/App.vue

@@ -1,8 +1,8 @@
 <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 Example from './components/Example.vue'
 import { useSEOHeader } from './composables/useSEOHeader'
 
 useSEOHeader()

storage/framework/core/components/transition/src/components/Example.vue

@@ -1,82 +1,81 @@
 <script setup lang="ts">
-  import { ref, computed } from 'vue'
-  import { useCopyCode } from '../composables/useCopyCode'
-
-  import {
-    TransitionRoot,
-    TransitionChild,
-    Dialog,
-    DialogPanel,
-    DialogTitle,
-  } from '@headlessui/vue'
-
-  type TransitionClass = {
-    enter: string
-    enterFrom: string
-    enterTo: string
-    leave: string
-    leaveFrom: string
-    leaveTo: string
-  }
-
-  const transitionList = ref<string[]>([
-    'fade',
-    'slideInRight',
-    'slideInDown',
-    'pop'
-  ])
-
-  const showCheckIcon = ref(false)
-  const currentTransition = ref(transitionList.value[0])
-  const isOpen = ref(false)
-
-  const transitionClass = computed<TransitionClass>(() => {
-
-    if (currentTransition.value === 'slideInRight') {
-      return {
-        enter: 'transition-transform transition-opacity duration-500 ease-out',
-        enterFrom: 'opacity-0 translate-x-full',
-        enterTo: 'opacity-100 translate-x-0',
-        leave: 'transition-transform transition-opacity duration-500 ease-out',
-        leaveFrom: 'opacity-100 translate-x-0',
-        leaveTo: 'opacity-0 translate-x-full',
-      }
-    }
-
-    if (currentTransition.value === 'slideInDown') {
-      return {
-        enter: 'transition-transform transition-opacity duration-500 ease-out',
-        enterFrom: 'opacity-0 -translate-y-full',
-        enterTo: 'opacity-100 translate-y-0',
-        leave: 'transition-transform transition-opacity duration-500 ease-out',
-        leaveFrom: 'opacity-100 translate-y-0',
-        leaveTo: 'opacity-0 -translate-y-full',
-      }
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import { computed, ref } from 'vue'
+
+import { useCopyCode } from '../composables/useCopyCode'
+
+interface TransitionClass {
+  enter: string
+  enterFrom: string
+  enterTo: string
+  leave: string
+  leaveFrom: string
+  leaveTo: string
+}
+
+const transitionList = ref<string[]>([
+  'fade',
+  'slideInRight',
+  'slideInDown',
+  'pop',
+])
+
+const showCheckIcon = ref(false)
+const currentTransition = ref(transitionList.value[0])
+const isOpen = ref(false)
+
+const transitionClass = computed<TransitionClass>(() => {
+  if (currentTransition.value === 'slideInRight') {
+    return {
+      enter: 'transition-transform transition-opacity duration-500 ease-out',
+      enterFrom: 'opacity-0 translate-x-full',
+      enterTo: 'opacity-100 translate-x-0',
+      leave: 'transition-transform transition-opacity duration-500 ease-out',
+      leaveFrom: 'opacity-100 translate-x-0',
+      leaveTo: 'opacity-0 translate-x-full',
     }
+  }
 
-    if (currentTransition.value === 'pop') {
-      return {
-        enter: 'transition-transform duration-300',
-        enterFrom: 'transform scale-0',
-        enterTo: 'transform scale-100',
-        leave: 'transition-transform duration-300',
-        leaveFrom: 'transform scale-100',
-        leaveTo: 'transform scale-0',
-      }
+  if (currentTransition.value === 'slideInDown') {
+    return {
+      enter: 'transition-transform transition-opacity duration-500 ease-out',
+      enterFrom: 'opacity-0 -translate-y-full',
+      enterTo: 'opacity-100 translate-y-0',
+      leave: 'transition-transform transition-opacity duration-500 ease-out',
+      leaveFrom: 'opacity-100 translate-y-0',
+      leaveTo: 'opacity-0 -translate-y-full',
     }
+  }
 
+  if (currentTransition.value === 'pop') {
     return {
-      enter: 'transition-opacity duration-300',
-      enterFrom: 'opacity-0',
-      enterTo: 'opacity-100',
-      leave: 'transition-opacity duration-300',
-      leaveFrom: 'opacity-100',
-      leaveTo: 'opacity-0',
+      enter: 'transition-transform duration-300',
+      enterFrom: 'transform scale-0',
+      enterTo: 'transform scale-100',
+      leave: 'transition-transform duration-300',
+      leaveFrom: 'transform scale-100',
+      leaveTo: 'transform scale-0',
     }
-  })
+  }
 
-  const renderedCode = computed(() => {
-    return `
+  return {
+    enter: 'transition-opacity duration-300',
+    enterFrom: 'opacity-0',
+    enterTo: 'opacity-100',
+    leave: 'transition-opacity duration-300',
+    leaveFrom: 'opacity-100',
+    leaveTo: 'opacity-0',
+  }
+})
+
+const renderedCode = computed(() => {
+  return `
 <TransitionRoot appear :show="isOpen">
   <Dialog :open="isOpen" @close="setIsOpen" class="relative z-50">
     <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
@@ -104,20 +103,20 @@
   </Dialog>
 </TransitionRoot>
     `
-  })
+})
 
-  function setIsOpen(value: boolean) {
-    isOpen.value = value
-  }
+function setIsOpen(value: boolean) {
+  isOpen.value = value
+}
 
-  function handleClick(trans: string) {
-    setIsOpen(true)
-    currentTransition.value = trans
-  }
+function handleClick(trans: string) {
+  setIsOpen(true)
+  currentTransition.value = trans
+}
 
-  async function handleCopyCode() {
-    await useCopyCode({ code: renderedCode.value, checkIconRef: showCheckIcon })
-  }
+async function handleCopyCode() {
+  await useCopyCode({ code: renderedCode.value, checkIconRef: showCheckIcon })
+}
 </script>
 
 <template>
@@ -162,17 +161,14 @@
     </div>
 
     <div class="flex flex-col gap-4">
-
       <TransitionRoot
         appear
         :show="isOpen"
       >
-        <Dialog :open="isOpen" @close="setIsOpen" class="relative z-50">
+        <Dialog :open="isOpen" class="relative z-50" @close="setIsOpen">
           <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
 
-
-        <div class="fixed inset-0 flex w-screen items-center justify-center p-4">
-
+          <div class="fixed inset-0 w-screen flex items-center justify-center p-4">
             <TransitionChild
               :enter="transitionClass.enter"
               :enter-from="transitionClass.enterFrom"
@@ -181,7 +177,7 @@
               :leave-from="transitionClass.leaveFrom"
               :leave-to="transitionClass.leaveTo"
             >
-              <DialogPanel class="w-full max-w-sm rounded bg-white p-5">
+              <DialogPanel class="max-w-sm w-full rounded bg-white p-5">
                 <DialogTitle>Complete your order</DialogTitle>
 
                 <div class="mt-4">

storage/framework/core/payments/src/drivers/stripe.ts

@@ -20,15 +20,15 @@ export const paymentIntent: PaymentIntent = (() => {
     return await client.paymentIntents.create(params)
   }
 
-  async function retrieve(stripeId: string) {
+  async function retrieve(stripeId: string): Promise<Stripe.Response<Stripe.PaymentIntent>> {
     return await client.paymentIntents.retrieve(stripeId)
   }
 
   async function update(stripeId: string, params: Stripe.PaymentIntentCreateParams) {
     return await client.paymentIntents.update(stripeId, params)
   }
 
-  async function cancel(stripeId: string) {
+  async function cancel(stripeId: string): Promise<Stripe.Response<Stripe.PaymentIntent>> {
     return await client.paymentIntents.cancel(stripeId)
   }