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/ModrinthServersPurchaseModal.vue

@@ -59,6 +59,7 @@ const selectedPlan = ref<ServerPlan>()
 const selectedInterval = ref<ServerBillingInterval>('quarterly')
 const loading = ref(false)
 const selectedRegion = ref<string>()
+const projectId = ref<string>()
 
 const {
   initializeStripe,
@@ -85,6 +86,7 @@ const {
   selectedPlan,
   selectedInterval,
   selectedRegion,
+  projectId,
   props.initiatePayment,
   props.onError,
 )
@@ -201,7 +203,7 @@ watch(selectedPlan, () => {
   console.log(selectedPlan.value)
 })
 
-function begin(interval: ServerBillingInterval, plan?: ServerPlan) {
+function begin(interval: ServerBillingInterval, plan?: ServerPlan, project?: string) {
   loading.value = false
   selectedPlan.value = plan
   selectedInterval.value = interval
@@ -209,6 +211,7 @@ function begin(interval: ServerBillingInterval, plan?: ServerPlan) {
   selectedPaymentMethod.value = undefined
   currentStep.value = steps[0]
   skipPaymentMethods.value = true
+  projectId.value = project
   modal.value?.show()
 }
 
@@ -253,6 +256,8 @@ defineExpose({
         :pings="pings"
         :custom="customServer"
         :available-products="availableProducts"
+        :currency="currency"
+        :interval="selectedInterval"
         :fetch-stock="fetchStock"
       />
       <PaymentMethodSelector

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>

packages/ui/src/components/billing/ServersPurchase3Review.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { ServerBillingInterval, ServerPlan, ServerRegion } from '../../utils/billing'
+import {
+  monthsInInterval,
+  type ServerBillingInterval,
+  type ServerPlan,
+  type ServerRegion,
+} from '../../utils/billing'
 import TagItem from '../base/TagItem.vue'
 import ServersSpecs from './ServersSpecs.vue'
 import { formatPrice, getPingLevel } from '@modrinth/utils'
@@ -77,12 +82,6 @@ const period = computed(() => {
   return '???'
 })
 
-const monthsInInterval: Record<ServerBillingInterval, number> = {
-  monthly: 1,
-  quarterly: 3,
-  yearly: 12,
-}
-
 function setInterval(newInterval: ServerBillingInterval) {
   interval.value = newInterval
   emit('reloadPaymentIntent')