chore: wip

Author: glennmichael123

app/Actions/Payment/CreateSubscriptionAction.ts

@@ -7,20 +7,20 @@ export default new Action({
   method: 'POST',
   async handle() {
     const subscription = await stripe.subscription.create({
-        customer: 'cus_R5DJaEyyeKKlAN',
-        items: [
+      customer: 'cus_R5DJaEyyeKKlAN',
+      items: [
         {
-            price: 'price_1QCjMXBv6MhUdo23Pvb5dwUd',
+          price: 'price_1QCjMXBv6MhUdo23Pvb5dwUd',
         },
-        ],
-        payment_behavior: 'default_incomplete',
-        expand: ['latest_invoice.payment_intent'],
+      ],
+      payment_behavior: 'default_incomplete',
+      expand: ['latest_invoice.payment_intent'],
     })
-    
+
     // Step 3: Get the PaymentIntent for the first invoice from the subscription
     const latestInvoice = subscription.latest_invoice
     const paymentIntent = typeof latestInvoice === 'object' ? latestInvoice?.payment_intent : undefined
-    
+
     // Step 4: Pass the client_secret to the front end for Stripe Elements
     return paymentIntent
   },

app/Models/User.ts

@@ -37,6 +37,8 @@ export default {
 
     observe: true,
 
+    billable: true,
+
     // useUuid: true, // defaults to false
   },
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Modal } from '@stacksjs/modal'
-import Stepper from './Stepper.vue'
 import { ref } from 'vue'
+import Stepper from './Stepper.vue'
 
 const props = defineProps<{
   visible: boolean

storage/framework/core/components/stepper/src/components/Step.vue

@@ -90,7 +90,7 @@ function handleChange() {
         <slot v-bind="scope" />
       </span>
       <span v-if="withDivider && !isLastStep" class="ml-2 w-full shadow-md">
-        <span class="bg-gray h-1 block" />
+        <span class="block h-1 bg-gray" />
       </span>
     </label>
   </div>

storage/framework/core/components/stepper/src/components/Stepper.vue

@@ -196,13 +196,15 @@ defineExpose({
 </script>
 
 <template>
-  <div style="
+  <div
+    style="
       box-sizing: border-box;
       width: 100%;
       display: flex;
       justify-content: space-between;
       user-select: none;
-    ">
+    "
+  >
     <Step
       v-for="(step, $index) in stepsArr"
       :key="$index"

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

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import {  ref } from 'vue'
+import { ref } from 'vue'
 
 const products = ref([{
   name: 'iPhone Pro Max',
   price: 99900, // Price in cents ($999.00)
   images: 'https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/iphone-16-pro-model-unselect-gallery-2-202409?wid=5120&hei=2880&fmt=webp&qlt=70&.v=aWs5czA5aDFXU0FlMGFGRlpYRXk2UWFRQXQ2R0JQTk5udUZxTkR3ZVlpTDUwMGlYMEhQSTVNdkRDMFExUU1KbTBoUVhuTWlrY2hIK090ZGZZbk9HeE1xUVVnSHY5eU9CcGxDMkFhalkvT0FmZ0ROUGFSR25aOE5EM2xONlRwa09mbW94YnYxc1YvNXZ4emJGL0IxNFp3&traceId=1',
 }])
-
-
 </script>
 
 <template>

storage/framework/core/components/stripe/src/components/Checkout.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
 interface Products {
   name: string
-  price: number,
+  price: number
   images: string
 }
 
 interface Props {
   products: Products[]
-  redirectUrl: string,
+  redirectUrl: string
   mode: 'one-time' | 'subscription'
   applePay?: boolean
   googlePay?: boolean
 }
 
-const props = defineProps<Props>();
+const props = defineProps<Props>()
 
 const products = props.products
-
-</script> 
+</script>
 
 <template>
-  <OneTimePayment :products="products" :redirect-url="props.redirectUrl" v-if="mode === 'one-time'"/>
-  <Subscription :products="products" :redirect-url="props.redirectUrl" v-if="mode === 'subscription'"/>
-</template>
+  <OneTimePayment v-if="mode === 'one-time'" :products="products" :redirect-url="props.redirectUrl" />
+  <Subscription v-if="mode === 'subscription'" :products="products" :redirect-url="props.redirectUrl" />
+</template>