Add quick server button, dynamic price preview for custom server modal (#3815)

* Add quick server creation button, and dynamic pricing to custom server selection

* Remove test in compatibility card

* Lint + remove duplicate file

* Adjust z-index of popup

* $6 -> $5

* Dismiss prompt if the button is clicked

* Make "Create a server" disabled for now

* Use existing loaders type

packages/ui/src/composables/stripe.ts

@@ -31,6 +31,7 @@ export const useStripe = (
   product: Ref<ServerPlan | undefined>,
   interval: Ref<ServerBillingInterval>,
   region: Ref<string | undefined>,
+  project: Ref<string | undefined>,
   initiatePayment: (
     body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
   ) => Promise<CreatePaymentIntentResponse | UpdatePaymentIntentResponse>,
@@ -222,16 +223,22 @@ export const useStripe = (
 
       let result: BasePaymentIntentResponse
 
+      const metadata: CreatePaymentIntentRequest['metadata'] = {
+        type: 'pyro',
+        server_region: region.value,
+        source: project.value
+          ? {
+              project_id: project.value,
+            }
+          : {},
+      }
+
       if (paymentIntentId.value) {
         result = await updateIntent({
           ...requestType,
           charge,
           existing_payment_intent: paymentIntentId.value,
-          metadata: {
-            type: 'pyro',
-            server_region: region.value,
-            source: {},
-          },
+          metadata,
         })
         console.log(`Updated payment intent: ${interval.value} for ${result.total}`)
       } else {
@@ -242,11 +249,7 @@ export const useStripe = (
         } = await createIntent({
           ...requestType,
           charge,
-          metadata: {
-            type: 'pyro',
-            server_region: region.value,
-            source: {},
-          },
+          metadata: metadata,
         }))
         console.log(`Created payment intent: ${interval.value} for ${result.total}`)
       }