Servers fixes

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

@@ -91,7 +91,7 @@ const {
 
 const customServer = ref<boolean>(false)
 const acceptedEula = ref<boolean>(false)
-const firstTimeThru = ref<boolean>(true)
+const skipPaymentMethods = ref<boolean>(true)
 
 type Step = 'region' | 'payment' | 'review'
 
@@ -117,9 +117,13 @@ const currentPing = computed(() => {
 const currentStep = ref<Step>()
 
 const currentStepIndex = computed(() => (currentStep.value ? steps.indexOf(currentStep.value) : -1))
-const previousStep = computed(() =>
-  currentStep.value ? steps[steps.indexOf(currentStep.value) - 1] : undefined,
-)
+const previousStep = computed(() => {
+  const step = currentStep.value ? steps[steps.indexOf(currentStep.value) - 1] : undefined
+  if (step === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
+    return 'region'
+  }
+  return step
+})
 const nextStep = computed(() =>
   currentStep.value ? steps[steps.indexOf(currentStep.value) + 1] : undefined,
 )
@@ -144,13 +148,12 @@ async function beforeProceed(step: string) {
     case 'payment':
       await initializeStripe()
 
-      if (primaryPaymentMethodId.value && firstTimeThru.value) {
+      if (primaryPaymentMethodId.value && skipPaymentMethods.value) {
         const paymentMethod = await props.paymentMethods.find(
           (x) => x.id === primaryPaymentMethodId.value,
         )
         await selectPaymentMethod(paymentMethod)
         await setStep('review', true)
-        firstTimeThru.value = false
         return false
       }
       return true
@@ -205,7 +208,7 @@ function begin(interval: ServerBillingInterval, plan?: ServerPlan) {
   customServer.value = !selectedPlan.value
   selectedPaymentMethod.value = undefined
   currentStep.value = steps[0]
-  firstTimeThru.value = true
+  skipPaymentMethods.value = true
   modal.value?.show()
 }
 
@@ -278,7 +281,12 @@ defineExpose({
         :selected-payment-method="selectedPaymentMethod || inputtedPaymentMethod"
         :tax="tax"
         :total="total"
-        @change-payment-method="setStep('payment', true)"
+        @change-payment-method="
+          () => {
+            skipPaymentMethods = false
+            setStep('payment', true)
+          }
+        "
         @reload-payment-intent="reloadPaymentIntent"
       />
       <div v-else>Something went wrong</div>

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

@@ -25,6 +25,16 @@ const checkingCustomStock = ref(false)
 const selectedPlan = defineModel<ServerPlan>('plan')
 const selectedRegion = defineModel<string>('region')
 
+const regionOrder: string[] = [
+  // 'us-vin', 'eu-lim'
+]
+
+const sortedRegions = computed(() => {
+  return props.regions.slice().sort((a, b) => {
+    return regionOrder.indexOf(a.shortcode) - regionOrder.indexOf(b.shortcode)
+  })
+})
+
 const selectedRam = ref<number>(-1)
 
 const ramOptions = computed(() => {
@@ -55,7 +65,7 @@ function updateRamStock(regionToCheck: string, newRam: number) {
       (product) => (product.metadata.ram ?? 0) / 1024 === newRam,
     )
     if (plan) {
-      const region = props.regions.find((region) => region.shortcode === regionToCheck)
+      const region = sortedRegions.value.find((region) => region.shortcode === regionToCheck)
       if (region) {
         props
           .fetchStock(region, {
@@ -113,7 +123,7 @@ const messages = defineMessages({
 
 async function updateStock() {
   currentStock.value = {}
-  const capacityChecks = props.regions.map((region) =>
+  const capacityChecks = sortedRegions.value.map((region) =>
     props.fetchStock(
       region,
       selectedPlan.value
@@ -133,7 +143,7 @@ async function updateStock() {
   )
   const results = await Promise.all(capacityChecks)
   results.forEach((result, index) => {
-    currentStock.value[props.regions[index].shortcode] = result
+    currentStock.value[sortedRegions.value[index].shortcode] = result
   })
 }
 
@@ -146,10 +156,13 @@ onMounted(() => {
           return acc.ping < cur.ping ? acc : cur
         })?.region
       : undefined
+  selectedRegion.value = undefined
   selectedRam.value = minRam.value
   checkingCustomStock.value = true
   updateStock().then(() => {
-    const firstWithStock = props.regions.find((region) => currentStock.value[region.shortcode] > 0)
+    const firstWithStock = sortedRegions.value.find(
+      (region) => currentStock.value[region.shortcode] > 0,
+    )
     let stockedRegion = selectedRegion.value
     if (!stockedRegion) {
       stockedRegion =
@@ -176,7 +189,7 @@ onMounted(() => {
     </h2>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <ServersRegionButton
-        v-for="region in regions"
+        v-for="region in sortedRegions"
         :key="region.shortcode"
         v-model="selectedRegion"
         :region="region"

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

@@ -81,10 +81,7 @@ function setRegion() {
             class="shrink-0"
           />
           <SpinnerIcon v-else class="animate-spin" />
-          <span v-if="bestPing" :class="bestPing ? 'text-brand' : 'text-primary'">
-            Lowest latency ({{ ping }}ms)
-          </span>
-          <template v-else-if="ping"> {{ ping }}ms </template>
+          <template v-if="ping"> {{ ping }}ms </template>
           <span v-else> Testing connection... </span>
         </template>
       </span>