Servers new purchase flow (#3719)

* New purchase flow for servers, region selector, etc.

* Lint

* Lint

* Fix expanding total

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
+import { commonMessages, paymentMethodMessages } from '../../utils'
+import type Stripe from 'stripe'
+import { useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+defineProps<{
+  method: Stripe.PaymentMethod
+}>()
+</script>
+
+<template>
+  <template v-if="'type' in method">
+    <CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
+    <CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
+    <PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
+    <UnknownIcon v-else class="size-[1.5em]" />
+    <span v-if="method.type === 'card' && 'card' in method && method.card">
+      {{
+        formatMessage(commonMessages.paymentMethodCardDisplay, {
+          card_brand:
+            formatMessage(paymentMethodMessages[method.card.brand]) ??
+            formatMessage(paymentMethodMessages.unknown),
+          last_four: method.card.last4,
+        })
+      }}
+    </span>
+    <template v-else>
+      {{
+        formatMessage(paymentMethodMessages[method.type]) ??
+        formatMessage(paymentMethodMessages.unknown)
+      }}
+    </template>
+
+    <span v-if="method.type === 'cashapp' && 'cashapp' in method && method.cashapp">
+      ({{ method.cashapp.cashtag }})
+    </span>
+    <span v-else-if="method.type === 'paypal' && 'paypal' in method && method.paypal">
+      ({{ method.paypal.payer_email }})
+    </span>
+  </template>
+</template>