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/components/billing/ServersPurchase1Region.vue

@@ -4,19 +4,28 @@ import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 import { onMounted, ref, computed, watch } from 'vue'
 import type { RegionPing } from './ModrinthServersPurchaseModal.vue'
-import type { ServerPlan, ServerRegion, ServerStockRequest } from '../../utils/billing'
+import {
+  monthsInInterval,
+  type ServerBillingInterval,
+  type ServerPlan,
+  type ServerRegion,
+  type ServerStockRequest,
+} from '../../utils/billing'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import Slider from '../base/Slider.vue'
 import { SpinnerIcon, XIcon, InfoIcon } from '@modrinth/assets'
 import ServersSpecs from './ServersSpecs.vue'
+import { formatPrice } from '../../../../utils'
 
-const { formatMessage } = useVIntl()
+const { formatMessage, locale } = useVIntl()
 
 const props = defineProps<{
   regions: ServerRegion[]
   pings: RegionPing[]
   fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
   custom: boolean
+  currency: string
+  interval: ServerBillingInterval
   availableProducts: ServerPlan[]
 }>()
 
@@ -25,6 +34,12 @@ const checkingCustomStock = ref(false)
 const selectedPlan = defineModel<ServerPlan>('plan')
 const selectedRegion = defineModel<string>('region')
 
+const selectedPrice = computed(() => {
+  const amount = selectedPlan.value?.prices?.find((price) => price.currency_code === props.currency)
+    ?.prices?.intervals?.[props.interval]
+  return amount ? amount / monthsInInterval[props.interval] : undefined
+})
+
 const regionOrder: string[] = ['us-vin', 'eu-lim']
 
 const sortedRegions = computed(() => {
@@ -216,7 +231,12 @@ onMounted(() => {
       </h2>
       <div>
         <Slider v-model="selectedRam" :min="minRam" :max="maxRam" :step="2" unit="GB" />
-        <div class="bg-bg rounded-xl p-4 mt-4 text-secondary">
+        <p v-if="selectedPrice" class="mt-2 mb-0">
+          <span class="text-contrast text-lg font-bold"
+            >{{ formatPrice(locale, selectedPrice, currency, true) }} / month</span
+          ><span v-if="interval !== 'monthly'">, billed {{ interval }}</span>
+        </p>
+        <div class="bg-bg rounded-xl p-4 mt-2 text-secondary">
           <div v-if="checkingCustomStock" class="flex gap-2 items-center">
             <SpinnerIcon class="size-5 shrink-0 animate-spin" /> Checking availability...
           </div>