Servers new purchase flow (#3719)

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

* Lint

* Lint

* Fix expanding total

packages/utils/billing.ts

@@ -61,16 +61,26 @@ export const getCurrency = (userCountry) => {
   return countryCurrency[userCountry] ?? 'USD'
 }
 
-export const formatPrice = (locale, price, currency) => {
-  const formatter = new Intl.NumberFormat(locale, {
+export const formatPrice = (locale, price, currency, trimZeros = false) => {
+  let formatter = new Intl.NumberFormat(locale, {
     style: 'currency',
     currency,
   })
 
   const maxDigits = formatter.resolvedOptions().maximumFractionDigits
-
   const convertedPrice = price / Math.pow(10, maxDigits)
 
+  let minimumFractionDigits = maxDigits
+
+  if (trimZeros && Number.isInteger(convertedPrice)) {
+    minimumFractionDigits = 0
+  }
+
+  formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits,
+  })
   return formatter.format(convertedPrice)
 }
 
@@ -87,13 +97,13 @@ export const createStripeElements = (stripe, paymentMethods, options) => {
     appearance: {
       variables: {
         colorPrimary: styles.getPropertyValue('--color-brand'),
-        colorBackground: styles.getPropertyValue('--color-bg'),
+        colorBackground: styles.getPropertyValue('--experimental-color-button-bg'),
         colorText: styles.getPropertyValue('--color-base'),
         colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
         colorDanger: styles.getPropertyValue('--color-red'),
         fontFamily: styles.getPropertyValue('--font-standard'),
         spacingUnit: '0.25rem',
-        borderRadius: '1rem',
+        borderRadius: '0.75rem',
       },
     },
     loader: 'never',

packages/utils/utils.ts

@@ -341,3 +341,17 @@ export const getArrayOrString = (x: string[] | string): string[] => {
     return x
   }
 }
+
+export function getPingLevel(ping: number) {
+  if (ping < 150) {
+    return 5
+  } else if (ping < 300) {
+    return 4
+  } else if (ping < 600) {
+    return 3
+  } else if (ping < 1000) {
+    return 2
+  } else {
+    return 1
+  }
+}