Servers new purchase flow (#3719)

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

* Lint

* Lint

* Fix expanding total

packages/ui/src/utils/billing.ts

@@ -0,0 +1,101 @@
+import type Stripe from 'stripe'
+
+export type ServerBillingInterval = 'monthly' | 'yearly' | 'quarterly'
+
+export interface ServerPlan {
+  id: string
+  name: string
+  description: string
+  metadata: {
+    type: string
+    ram?: number
+    cpu?: number
+    storage?: number
+    swap?: number
+  }
+  prices: {
+    id: string
+    currency_code: string
+    prices: {
+      intervals: {
+        monthly: number
+        yearly: number
+      }
+    }
+  }[]
+}
+
+export interface ServerStockRequest {
+  cpu?: number
+  memory_mb?: number
+  swap_mb?: number
+  storage_mb?: number
+}
+
+export interface ServerRegion {
+  shortcode: string
+  country_code: string
+  display_name: string
+  lat: number
+  lon: number
+}
+
+/*
+  Request types
+*/
+export type PaymentMethodRequest = {
+  type: 'payment_method'
+  id: string
+}
+
+export type ConfirmationTokenRequest = {
+  type: 'confirmation_token'
+  token: string
+}
+
+export type PaymentRequestType = PaymentMethodRequest | ConfirmationTokenRequest
+
+export type ChargeRequestType =
+  | {
+      type: 'existing'
+      id: string
+    }
+  | {
+      type: 'new'
+      product_id: string
+      interval?: ServerBillingInterval
+    }
+
+export type CreatePaymentIntentRequest = PaymentRequestType & {
+  charge: ChargeRequestType
+  metadata?: {
+    type: 'pyro'
+    server_name?: string
+    source: {
+      loader: string
+      game_version?: string
+      loader_version?: string
+    }
+  }
+}
+
+export type UpdatePaymentIntentRequest = CreatePaymentIntentRequest & {
+  existing_payment_intent: string
+}
+
+/*
+  Response types
+*/
+export type BasePaymentIntentResponse = {
+  price_id: string
+  tax: number
+  total: number
+  payment_method: Stripe.PaymentMethod
+}
+
+export type UpdatePaymentIntentResponse = BasePaymentIntentResponse
+
+export type CreatePaymentIntentResponse = BasePaymentIntentResponse & {
+  payment_intent_id: string
+  client_secret: string
+}

packages/ui/src/utils/common-messages.ts

@@ -17,6 +17,14 @@ export const commonMessages = defineMessages({
     id: 'button.continue',
     defaultMessage: 'Continue',
   },
+  nextButton: {
+    id: 'button.next',
+    defaultMessage: 'Next',
+  },
+  backButton: {
+    id: 'button.back',
+    defaultMessage: 'Back',
+  },
   copyIdButton: {
     id: 'button.copy-id',
     defaultMessage: 'Copy ID',
@@ -205,6 +213,10 @@ export const commonMessages = defineMessages({
     id: 'label.visit-your-profile',
     defaultMessage: 'Visit your profile',
   },
+  paymentMethodCardDisplay: {
+    id: 'omorphia.component.purchase_modal.payment_method_card_display',
+    defaultMessage: '{card_brand} ending in {last_four}',
+  },
 })
 
 export const commonSettingsMessages = defineMessages({
@@ -245,3 +257,51 @@ export const commonSettingsMessages = defineMessages({
     defaultMessage: 'Billing and subscriptions',
   },
 })
+
+export const paymentMethodMessages = defineMessages({
+  visa: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.visa',
+    defaultMessage: 'Visa',
+  },
+  amex: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amex',
+    defaultMessage: 'American Express',
+  },
+  diners: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.diners',
+    defaultMessage: 'Diners Club',
+  },
+  discover: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.discover',
+    defaultMessage: 'Discover',
+  },
+  eftpos: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
+    defaultMessage: 'EFTPOS',
+  },
+  jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
+  mastercard: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
+    defaultMessage: 'MasterCard',
+  },
+  unionpay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
+    defaultMessage: 'UnionPay',
+  },
+  paypal: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
+    defaultMessage: 'PayPal',
+  },
+  cashapp: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
+    defaultMessage: 'Cash App',
+  },
+  amazon_pay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
+    defaultMessage: 'Amazon Pay',
+  },
+  unknown: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
+    defaultMessage: 'Unknown payment method',
+  },
+})

packages/ui/src/utils/regions.ts

@@ -0,0 +1,16 @@
+import { defineMessage, type MessageDescriptor } from '@vintl/vintl'
+
+export const regionOverrides = {
+  'us-vin': {
+    name: defineMessage({ id: 'servers.region.north-america', defaultMessage: 'North America' }),
+    flag: 'https://flagcdn.com/us.svg',
+  },
+  'eu-lim': {
+    name: defineMessage({ id: 'servers.region.europe', defaultMessage: 'Europe' }),
+    flag: 'https://flagcdn.com/eu.svg',
+  },
+  'de-fra': {
+    name: defineMessage({ id: 'servers.region.europe', defaultMessage: 'Europe' }),
+    flag: 'https://flagcdn.com/eu.svg',
+  },
+} satisfies Record<string, { name?: MessageDescriptor; flag?: string }>