From b8bc60d50a9a62f3e9333b561c719c8342074f03 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 17 Apr 2026 20:26:27 -0600
Subject: [PATCH 1/5] fix: upgrade server flow to skip region

---
 .../billing/ModrinthServersPurchaseModal.vue  | 164 ++++++++++++++++--
 .../billing/ServersPurchase1Region.vue        | 103 ++++++-----
 .../billing/ServersUpgradeModalWrapper.vue    |   3 +-
 packages/ui/src/locales/en-US/index.json      |   3 +
 4 files changed, 209 insertions(+), 64 deletions(-)

diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index 9690f036ce..74c23c7068 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -112,9 +112,62 @@ const skipPaymentMethods = ref<boolean>(true)
 
 type Step = 'plan' | 'region' | 'payment' | 'review'
 
-const steps: Step[] = props.planStage
-	? (['plan', 'region', 'payment', 'review'] as Step[])
-	: (['region', 'payment', 'review'] as Step[])
+const isUpgradeFlow = computed(() => !!props.existingSubscription)
+
+const existingRegion = computed<string | undefined>(() => {
+	const metadata = props.existingSubscription?.metadata
+	if (metadata?.type === 'pyro') {
+		return metadata.region
+	}
+
+	const existingPlanMetadata = props.existingPlan?.metadata
+	if (existingPlanMetadata?.type === 'medal') {
+		return existingPlanMetadata.region
+	}
+
+	return undefined
+})
+
+const preferredUpgradeRegion = computed(() => {
+	if (existingRegion.value) {
+		const matchingRegion = props.regions.find((region) => region.shortcode === existingRegion.value)
+		if (matchingRegion) {
+			return matchingRegion.shortcode
+		}
+	}
+
+	return props.regions[0]?.shortcode
+})
+
+watch(
+	() => [isUpgradeFlow.value, preferredUpgradeRegion.value] as const,
+	([upgradeFlow, preferredRegion]) => {
+		if (upgradeFlow && !selectedRegion.value && preferredRegion) {
+			selectedRegion.value = preferredRegion
+		}
+	},
+	{ immediate: true },
+)
+
+const shouldShowRamStep = computed(() => {
+	if (!props.planStage) return true
+	if (!isUpgradeFlow.value) return true
+
+	return customServer.value
+})
+
+const shouldHideRegionSelection = computed(() => isUpgradeFlow.value && customServer.value)
+
+const steps = computed<Step[]>(() =>
+	props.planStage
+		? ([
+				'plan',
+				...(shouldShowRamStep.value ? (['region'] as Step[]) : []),
+				'payment',
+				'review',
+			] as Step[])
+		: (['region', 'payment', 'review'] as Step[]),
+)
 
 const titles: Record<Step, MessageDescriptor> = {
 	plan: defineMessage({ id: 'servers.purchase.step.plan.title', defaultMessage: 'Plan' }),
@@ -125,6 +178,7 @@ const titles: Record<Step, MessageDescriptor> = {
 	}),
 	review: defineMessage({ id: 'servers.purchase.step.review.title', defaultMessage: 'Review' }),
 }
+const ramTitle = defineMessage({ id: 'servers.purchase.step.ram.title', defaultMessage: 'Ram' })
 
 const purchaseSuccessTitle = defineMessage({
 	id: 'servers.purchase.notification.success.title',
@@ -146,17 +200,58 @@ const currentPing = computed(() => {
 
 const currentStep = ref<Step>()
 
-const currentStepIndex = computed(() => (currentStep.value ? steps.indexOf(currentStep.value) : -1))
+const stepOrder: Step[] = ['plan', 'region', 'payment', 'review']
+
+function findAdjacentStep(
+	from: Step,
+	direction: 'prev' | 'next',
+	activeSteps: Step[] = steps.value,
+): Step | undefined {
+	const fromOrderIndex = stepOrder.indexOf(from)
+	if (fromOrderIndex < 0) return undefined
+
+	if (direction === 'prev') {
+		for (let i = fromOrderIndex - 1; i >= 0; i--) {
+			const candidate = stepOrder[i]
+			if (activeSteps.includes(candidate)) return candidate
+		}
+	} else {
+		for (let i = fromOrderIndex + 1; i < stepOrder.length; i++) {
+			const candidate = stepOrder[i]
+			if (activeSteps.includes(candidate)) return candidate
+		}
+	}
+
+	return undefined
+}
+
+const currentStepIndex = computed(() => {
+	if (!currentStep.value) return -1
+	const index = steps.value.indexOf(currentStep.value)
+	if (index >= 0) return index
+
+	const fallback = findAdjacentStep(currentStep.value, 'prev')
+	return fallback ? steps.value.indexOf(fallback) : -1
+})
+
 const previousStep = computed(() => {
-	const step = currentStep.value ? steps[steps.indexOf(currentStep.value) - 1] : undefined
-	if (step === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
-		return 'region'
+	if (!currentStep.value) return undefined
+
+	if (currentStep.value === 'review' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
+		return findAdjacentStep('payment', 'prev')
 	}
-	return step
+
+	if (currentStep.value === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
+		return findAdjacentStep('payment', 'prev')
+	}
+
+	return findAdjacentStep(currentStep.value, 'prev')
+})
+
+const nextStep = computed(() => {
+	if (!currentStep.value) return undefined
+	return findAdjacentStep(currentStep.value, 'next')
 })
-const nextStep = computed(() =>
-	currentStep.value ? steps[steps.indexOf(currentStep.value) + 1] : undefined,
-)
 
 const canProceed = computed(() => {
 	switch (currentStep.value) {
@@ -191,10 +286,13 @@ async function beforeProceed(step: string) {
 			return true
 		case 'region':
 			return true
-		case 'payment':
+		case 'payment': {
 			await initializeStripe()
 
-			if (primaryPaymentMethodId.value && skipPaymentMethods.value) {
+			const shouldAutoSkipPaymentStep =
+				primaryPaymentMethodId.value && skipPaymentMethods.value && currentStep.value !== 'review'
+
+			if (shouldAutoSkipPaymentStep) {
 				const paymentMethod = await props.paymentMethods.find(
 					(x) => x.id === primaryPaymentMethodId.value,
 				)
@@ -203,6 +301,7 @@ async function beforeProceed(step: string) {
 				return false
 			}
 			return true
+		}
 		case 'review':
 			if (noPaymentRequired.value) {
 				return true
@@ -253,6 +352,10 @@ async function setStep(step: Step | undefined, skipValidation = false) {
 		return
 	}
 
+	if (step && !steps.value.includes(step)) {
+		return
+	}
+
 	if (await beforeProceed(step)) {
 		currentStep.value = step
 		await nextTick()
@@ -267,6 +370,19 @@ watch(selectedPlan, () => {
 	}
 })
 
+watch(
+	steps,
+	(activeSteps) => {
+		if (!currentStep.value || activeSteps.includes(currentStep.value)) return
+
+		currentStep.value =
+			findAdjacentStep(currentStep.value, 'next', activeSteps) ??
+			findAdjacentStep(currentStep.value, 'prev', activeSteps) ??
+			activeSteps[0]
+	},
+	{ immediate: true },
+)
+
 const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return (
 		props.availableProducts.find((p) => p?.metadata?.type === 'pyro' && p.metadata.ram === 6144) ??
@@ -275,6 +391,14 @@ const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() =
 	)
 })
 
+function getStepTitle(step: Step): MessageDescriptor {
+	if (step === 'region' && shouldHideRegionSelection.value) {
+		return ramTitle
+	}
+
+	return titles[step]
+}
+
 function begin(
 	interval: ServerBillingInterval,
 	plan?: Labrinth.Billing.Internal.Product | null,
@@ -293,9 +417,10 @@ function begin(
 
 	selectedInterval.value = interval
 	customServer.value = !selectedPlan.value
+	selectedRegion.value = isUpgradeFlow.value ? preferredUpgradeRegion.value : undefined
 	selectedPaymentMethod.value = undefined
 	const skipPlanStep = props.planStage && plan !== undefined
-	currentStep.value = skipPlanStep ? (steps[1] ?? steps[0]) : steps[0]
+	currentStep.value = skipPlanStep ? (steps.value[1] ?? steps.value[0]) : steps.value[0]
 	skipPaymentMethods.value = true
 	projectId.value = project
 	modal.value?.show()
@@ -315,6 +440,12 @@ function handleChooseCustom() {
 }
 
 function handleProceed() {
+	if (currentStep.value === 'plan') {
+		customServer.value = !selectedPlan.value
+		setStep(customServer.value ? 'region' : 'payment')
+		return
+	}
+
 	setStep(nextStep.value)
 }
 
@@ -345,7 +476,7 @@ function goToBreadcrumbStep(id: string) {
 						class="bg-transparent active:scale-95 font-bold text-secondary p-0"
 						@click="goToBreadcrumbStep(step)"
 					>
-						{{ formatMessage(titles[step]) }}
+						{{ formatMessage(getStepTitle(step)) }}
 					</button>
 					<span
 						v-else
@@ -353,7 +484,7 @@ function goToBreadcrumbStep(id: string) {
 							'text-contrast': index === currentStepIndex,
 						}"
 					>
-						{{ formatMessage(titles[step]) }}
+						{{ formatMessage(getStepTitle(step)) }}
 					</span>
 					<ChevronRightIcon
 						v-if="index < steps.length - 1"
@@ -381,6 +512,7 @@ function goToBreadcrumbStep(id: string) {
 				:regions="regions"
 				:pings="pings"
 				:custom="customServer"
+				:hide-region-selection="shouldHideRegionSelection"
 				:available-products="availableProducts"
 				:currency="currency"
 				:interval="selectedInterval"
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index 009a39b8b2..33091024a2 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -25,6 +25,7 @@ const props = defineProps<{
 		request: Archon.Servers.v0.StockRequest,
 	) => Promise<number>
 	custom: boolean
+	hideRegionSelection?: boolean
 	currency: string
 	interval: ServerBillingInterval
 	availableProducts: Labrinth.Billing.Internal.Product[]
@@ -179,23 +180,23 @@ const messages = defineMessages({
 	},
 })
 
-async function updateStock() {
-	currentStock.value = {}
-
-	const getStockRequest = (
-		product: Labrinth.Billing.Internal.Product,
-	): Archon.Servers.v0.StockRequest => {
-		const metadata = product.metadata
-		if (metadata.type === 'pyro' || metadata.type === 'medal') {
-			return {
-				cpu: metadata.cpu,
-				memory_mb: metadata.ram,
-				swap_mb: metadata.swap,
-				storage_mb: metadata.storage,
-			}
+const getStockRequest = (
+	product: Labrinth.Billing.Internal.Product,
+): Archon.Servers.v0.StockRequest => {
+	const metadata = product.metadata
+	if (metadata.type === 'pyro' || metadata.type === 'medal') {
+		return {
+			cpu: metadata.cpu,
+			memory_mb: metadata.ram,
+			swap_mb: metadata.swap,
+			storage_mb: metadata.storage,
 		}
-		return { cpu: 0, memory_mb: 0, swap_mb: 0, storage_mb: 0 }
 	}
+	return { cpu: 0, memory_mb: 0, swap_mb: 0, storage_mb: 0 }
+}
+
+async function updateStock() {
+	currentStock.value = {}
 
 	const capacityChecks = sortedRegions.value.map((region) =>
 		props.fetchStock(
@@ -219,8 +220,10 @@ onMounted(() => {
 		if (b.ping <= 0) return -1
 		return a.ping - b.ping
 	})[0]?.region
-	selectedRegion.value = undefined
 	selectedRam.value = minRam.value
+	if (!props.hideRegionSelection) {
+		selectedRegion.value = undefined
+	}
 	checkingCustomStock.value = true
 	updateStock().then(() => {
 		const firstWithStock = sortedRegions.value.find(
@@ -228,8 +231,9 @@ onMounted(() => {
 		)
 		let stockedRegion = selectedRegion.value
 		if (!stockedRegion) {
-			stockedRegion =
-				bestPing.value && currentStock.value[bestPing.value] > 0
+			stockedRegion = props.hideRegionSelection
+				? firstWithStock?.shortcode
+				: bestPing.value && currentStock.value[bestPing.value] > 0
 					? bestPing.value
 					: firstWithStock?.shortcode
 		}
@@ -247,36 +251,41 @@ onMounted(() => {
 		Checking availability...
 	</ModalLoadingIndicator>
 	<template v-else>
-		<h2 class="mt-0 mb-4 text-xl font-bold text-contrast">
-			{{ formatMessage(messages.prompt) }}
-		</h2>
-		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-			<ServersRegionButton
-				v-for="region in visibleRegions"
-				:key="region.shortcode"
-				v-model="selectedRegion"
-				:region="region"
-				:out-of-stock="currentStock[region.shortcode] === 0"
-				:ping="pings.find((p) => p.region === region.shortcode)?.ping"
-				:best-ping="bestPing === region.shortcode"
-			/>
-		</div>
-		<div class="mt-3 text-sm">
-			<IntlFormatted :message-id="messages.regionUnsupported">
-				<template #link="{ children }">
-					<a
-						class="text-link"
-						target="_blank"
-						rel="noopener noreferrer"
-						href="https://surveys.modrinth.com/servers-region-waitlist"
-					>
-						<component :is="() => children" />
-					</a>
-				</template>
-			</IntlFormatted>
-		</div>
+		<template v-if="!hideRegionSelection">
+			<h2 class="mt-0 mb-4 text-xl font-bold text-contrast">
+				{{ formatMessage(messages.prompt) }}
+			</h2>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				<ServersRegionButton
+					v-for="region in visibleRegions"
+					:key="region.shortcode"
+					v-model="selectedRegion"
+					:region="region"
+					:out-of-stock="currentStock[region.shortcode] === 0"
+					:ping="pings.find((p) => p.region === region.shortcode)?.ping"
+					:best-ping="bestPing === region.shortcode"
+				/>
+			</div>
+			<div class="mt-3 text-sm">
+				<IntlFormatted :message-id="messages.regionUnsupported">
+					<template #link="{ children }">
+						<a
+							class="text-link"
+							target="_blank"
+							rel="noopener noreferrer"
+							href="https://surveys.modrinth.com/servers-region-waitlist"
+						>
+							<component :is="() => children" />
+						</a>
+					</template>
+				</IntlFormatted>
+			</div>
+		</template>
 		<template v-if="custom">
-			<h2 class="mt-4 mb-2 text-xl font-bold text-contrast">
+			<h2
+				class="mb-2 text-xl font-bold text-contrast"
+				:class="hideRegionSelection ? 'mt-0' : 'mt-4'"
+			>
 				{{ formatMessage(messages.customPrompt) }}
 			</h2>
 			<div>
diff --git a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
index fba939f638..47efc48659 100644
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -36,7 +36,7 @@ import {
 	useDebugLogger,
 } from '@modrinth/ui'
 import { useMutation, useQuery } from '@tanstack/vue-query'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 const props = defineProps<{
 	stripePublishableKey: string
@@ -340,6 +340,7 @@ async function open(id?: string) {
 		subscription.value = null
 	}
 
+	await nextTick()
 	purchaseModal.value?.show(currentInterval.value)
 }
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 9ff0bdfd66..55c26e2b38 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3038,6 +3038,9 @@
   "servers.purchase.step.plan.your-current-plan": {
     "defaultMessage": "Your current plan"
   },
+  "servers.purchase.step.ram.title": {
+    "defaultMessage": "Ram"
+  },
   "servers.purchase.step.region.title": {
     "defaultMessage": "Region"
   },

From 4ce23097f87f73437199b20a4902349fd1951f2e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 21 Apr 2026 22:54:16 -0600
Subject: [PATCH 2/5] remove: previous hide region select implementation

---
 .../billing/ModrinthServersPurchaseModal.vue  | 164 ++----------------
 .../billing/ServersPurchase1Region.vue        |  30 ++--
 .../billing/ServersUpgradeModalWrapper.vue    |   3 +-
 packages/ui/src/locales/en-US/index.json      |   3 -
 4 files changed, 32 insertions(+), 168 deletions(-)

diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index 74c23c7068..9690f036ce 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -112,62 +112,9 @@ const skipPaymentMethods = ref<boolean>(true)
 
 type Step = 'plan' | 'region' | 'payment' | 'review'
 
-const isUpgradeFlow = computed(() => !!props.existingSubscription)
-
-const existingRegion = computed<string | undefined>(() => {
-	const metadata = props.existingSubscription?.metadata
-	if (metadata?.type === 'pyro') {
-		return metadata.region
-	}
-
-	const existingPlanMetadata = props.existingPlan?.metadata
-	if (existingPlanMetadata?.type === 'medal') {
-		return existingPlanMetadata.region
-	}
-
-	return undefined
-})
-
-const preferredUpgradeRegion = computed(() => {
-	if (existingRegion.value) {
-		const matchingRegion = props.regions.find((region) => region.shortcode === existingRegion.value)
-		if (matchingRegion) {
-			return matchingRegion.shortcode
-		}
-	}
-
-	return props.regions[0]?.shortcode
-})
-
-watch(
-	() => [isUpgradeFlow.value, preferredUpgradeRegion.value] as const,
-	([upgradeFlow, preferredRegion]) => {
-		if (upgradeFlow && !selectedRegion.value && preferredRegion) {
-			selectedRegion.value = preferredRegion
-		}
-	},
-	{ immediate: true },
-)
-
-const shouldShowRamStep = computed(() => {
-	if (!props.planStage) return true
-	if (!isUpgradeFlow.value) return true
-
-	return customServer.value
-})
-
-const shouldHideRegionSelection = computed(() => isUpgradeFlow.value && customServer.value)
-
-const steps = computed<Step[]>(() =>
-	props.planStage
-		? ([
-				'plan',
-				...(shouldShowRamStep.value ? (['region'] as Step[]) : []),
-				'payment',
-				'review',
-			] as Step[])
-		: (['region', 'payment', 'review'] as Step[]),
-)
+const steps: Step[] = props.planStage
+	? (['plan', 'region', 'payment', 'review'] as Step[])
+	: (['region', 'payment', 'review'] as Step[])
 
 const titles: Record<Step, MessageDescriptor> = {
 	plan: defineMessage({ id: 'servers.purchase.step.plan.title', defaultMessage: 'Plan' }),
@@ -178,7 +125,6 @@ const titles: Record<Step, MessageDescriptor> = {
 	}),
 	review: defineMessage({ id: 'servers.purchase.step.review.title', defaultMessage: 'Review' }),
 }
-const ramTitle = defineMessage({ id: 'servers.purchase.step.ram.title', defaultMessage: 'Ram' })
 
 const purchaseSuccessTitle = defineMessage({
 	id: 'servers.purchase.notification.success.title',
@@ -200,58 +146,17 @@ const currentPing = computed(() => {
 
 const currentStep = ref<Step>()
 
-const stepOrder: Step[] = ['plan', 'region', 'payment', 'review']
-
-function findAdjacentStep(
-	from: Step,
-	direction: 'prev' | 'next',
-	activeSteps: Step[] = steps.value,
-): Step | undefined {
-	const fromOrderIndex = stepOrder.indexOf(from)
-	if (fromOrderIndex < 0) return undefined
-
-	if (direction === 'prev') {
-		for (let i = fromOrderIndex - 1; i >= 0; i--) {
-			const candidate = stepOrder[i]
-			if (activeSteps.includes(candidate)) return candidate
-		}
-	} else {
-		for (let i = fromOrderIndex + 1; i < stepOrder.length; i++) {
-			const candidate = stepOrder[i]
-			if (activeSteps.includes(candidate)) return candidate
-		}
-	}
-
-	return undefined
-}
-
-const currentStepIndex = computed(() => {
-	if (!currentStep.value) return -1
-	const index = steps.value.indexOf(currentStep.value)
-	if (index >= 0) return index
-
-	const fallback = findAdjacentStep(currentStep.value, 'prev')
-	return fallback ? steps.value.indexOf(fallback) : -1
-})
-
+const currentStepIndex = computed(() => (currentStep.value ? steps.indexOf(currentStep.value) : -1))
 const previousStep = computed(() => {
-	if (!currentStep.value) return undefined
-
-	if (currentStep.value === 'review' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
-		return findAdjacentStep('payment', 'prev')
+	const step = currentStep.value ? steps[steps.indexOf(currentStep.value) - 1] : undefined
+	if (step === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
+		return 'region'
 	}
-
-	if (currentStep.value === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
-		return findAdjacentStep('payment', 'prev')
-	}
-
-	return findAdjacentStep(currentStep.value, 'prev')
-})
-
-const nextStep = computed(() => {
-	if (!currentStep.value) return undefined
-	return findAdjacentStep(currentStep.value, 'next')
+	return step
 })
+const nextStep = computed(() =>
+	currentStep.value ? steps[steps.indexOf(currentStep.value) + 1] : undefined,
+)
 
 const canProceed = computed(() => {
 	switch (currentStep.value) {
@@ -286,13 +191,10 @@ async function beforeProceed(step: string) {
 			return true
 		case 'region':
 			return true
-		case 'payment': {
+		case 'payment':
 			await initializeStripe()
 
-			const shouldAutoSkipPaymentStep =
-				primaryPaymentMethodId.value && skipPaymentMethods.value && currentStep.value !== 'review'
-
-			if (shouldAutoSkipPaymentStep) {
+			if (primaryPaymentMethodId.value && skipPaymentMethods.value) {
 				const paymentMethod = await props.paymentMethods.find(
 					(x) => x.id === primaryPaymentMethodId.value,
 				)
@@ -301,7 +203,6 @@ async function beforeProceed(step: string) {
 				return false
 			}
 			return true
-		}
 		case 'review':
 			if (noPaymentRequired.value) {
 				return true
@@ -352,10 +253,6 @@ async function setStep(step: Step | undefined, skipValidation = false) {
 		return
 	}
 
-	if (step && !steps.value.includes(step)) {
-		return
-	}
-
 	if (await beforeProceed(step)) {
 		currentStep.value = step
 		await nextTick()
@@ -370,19 +267,6 @@ watch(selectedPlan, () => {
 	}
 })
 
-watch(
-	steps,
-	(activeSteps) => {
-		if (!currentStep.value || activeSteps.includes(currentStep.value)) return
-
-		currentStep.value =
-			findAdjacentStep(currentStep.value, 'next', activeSteps) ??
-			findAdjacentStep(currentStep.value, 'prev', activeSteps) ??
-			activeSteps[0]
-	},
-	{ immediate: true },
-)
-
 const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return (
 		props.availableProducts.find((p) => p?.metadata?.type === 'pyro' && p.metadata.ram === 6144) ??
@@ -391,14 +275,6 @@ const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() =
 	)
 })
 
-function getStepTitle(step: Step): MessageDescriptor {
-	if (step === 'region' && shouldHideRegionSelection.value) {
-		return ramTitle
-	}
-
-	return titles[step]
-}
-
 function begin(
 	interval: ServerBillingInterval,
 	plan?: Labrinth.Billing.Internal.Product | null,
@@ -417,10 +293,9 @@ function begin(
 
 	selectedInterval.value = interval
 	customServer.value = !selectedPlan.value
-	selectedRegion.value = isUpgradeFlow.value ? preferredUpgradeRegion.value : undefined
 	selectedPaymentMethod.value = undefined
 	const skipPlanStep = props.planStage && plan !== undefined
-	currentStep.value = skipPlanStep ? (steps.value[1] ?? steps.value[0]) : steps.value[0]
+	currentStep.value = skipPlanStep ? (steps[1] ?? steps[0]) : steps[0]
 	skipPaymentMethods.value = true
 	projectId.value = project
 	modal.value?.show()
@@ -440,12 +315,6 @@ function handleChooseCustom() {
 }
 
 function handleProceed() {
-	if (currentStep.value === 'plan') {
-		customServer.value = !selectedPlan.value
-		setStep(customServer.value ? 'region' : 'payment')
-		return
-	}
-
 	setStep(nextStep.value)
 }
 
@@ -476,7 +345,7 @@ function goToBreadcrumbStep(id: string) {
 						class="bg-transparent active:scale-95 font-bold text-secondary p-0"
 						@click="goToBreadcrumbStep(step)"
 					>
-						{{ formatMessage(getStepTitle(step)) }}
+						{{ formatMessage(titles[step]) }}
 					</button>
 					<span
 						v-else
@@ -484,7 +353,7 @@ function goToBreadcrumbStep(id: string) {
 							'text-contrast': index === currentStepIndex,
 						}"
 					>
-						{{ formatMessage(getStepTitle(step)) }}
+						{{ formatMessage(titles[step]) }}
 					</span>
 					<ChevronRightIcon
 						v-if="index < steps.length - 1"
@@ -512,7 +381,6 @@ function goToBreadcrumbStep(id: string) {
 				:regions="regions"
 				:pings="pings"
 				:custom="customServer"
-				:hide-region-selection="shouldHideRegionSelection"
 				:available-products="availableProducts"
 				:currency="currency"
 				:interval="selectedInterval"
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index 33091024a2..bac7d7db5d 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -180,24 +180,24 @@ const messages = defineMessages({
 	},
 })
 
-const getStockRequest = (
-	product: Labrinth.Billing.Internal.Product,
-): Archon.Servers.v0.StockRequest => {
-	const metadata = product.metadata
-	if (metadata.type === 'pyro' || metadata.type === 'medal') {
-		return {
-			cpu: metadata.cpu,
-			memory_mb: metadata.ram,
-			swap_mb: metadata.swap,
-			storage_mb: metadata.storage,
-		}
-	}
-	return { cpu: 0, memory_mb: 0, swap_mb: 0, storage_mb: 0 }
-}
-
 async function updateStock() {
 	currentStock.value = {}
 
+	const getStockRequest = (
+		product: Labrinth.Billing.Internal.Product,
+	): Archon.Servers.v0.StockRequest => {
+		const metadata = product.metadata
+		if (metadata.type === 'pyro' || metadata.type === 'medal') {
+			return {
+				cpu: metadata.cpu,
+				memory_mb: metadata.ram,
+				swap_mb: metadata.swap,
+				storage_mb: metadata.storage,
+			}
+		}
+		return { cpu: 0, memory_mb: 0, swap_mb: 0, storage_mb: 0 }
+	}
+
 	const capacityChecks = sortedRegions.value.map((region) =>
 		props.fetchStock(
 			region,
diff --git a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
index 47efc48659..fba939f638 100644
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -36,7 +36,7 @@ import {
 	useDebugLogger,
 } from '@modrinth/ui'
 import { useMutation, useQuery } from '@tanstack/vue-query'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
 	stripePublishableKey: string
@@ -340,7 +340,6 @@ async function open(id?: string) {
 		subscription.value = null
 	}
 
-	await nextTick()
 	purchaseModal.value?.show(currentInterval.value)
 }
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 55c26e2b38..9ff0bdfd66 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3038,9 +3038,6 @@
   "servers.purchase.step.plan.your-current-plan": {
     "defaultMessage": "Your current plan"
   },
-  "servers.purchase.step.ram.title": {
-    "defaultMessage": "Ram"
-  },
   "servers.purchase.step.region.title": {
     "defaultMessage": "Region"
   },

From 82ded9ad97d94445eb980cfab224758634b07e6a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 12:02:04 -0600
Subject: [PATCH 3/5] feat: implement skipping region select section for
 upgrade modal

---
 .../billing/ModrinthServersPurchaseModal.vue  | 58 ++++++++++++++-----
 .../billing/ServersPurchase1Region.vue        |  6 +-
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index 9690f036ce..df962faacc 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -116,6 +116,12 @@ const steps: Step[] = props.planStage
 	? (['plan', 'region', 'payment', 'review'] as Step[])
 	: (['region', 'payment', 'review'] as Step[])
 
+const isUpgrade = computed(() => !!props.existingSubscription)
+const skipRegionStep = computed(() => isUpgrade.value && !customServer.value)
+const visibleSteps = computed(() =>
+	steps.filter((s) => !(s === 'region' && skipRegionStep.value)),
+)
+
 const titles: Record<Step, MessageDescriptor> = {
 	plan: defineMessage({ id: 'servers.purchase.step.plan.title', defaultMessage: 'Plan' }),
 	region: defineMessage({ id: 'servers.purchase.step.region.title', defaultMessage: 'Region' }),
@@ -146,17 +152,24 @@ const currentPing = computed(() => {
 
 const currentStep = ref<Step>()
 
-const currentStepIndex = computed(() => (currentStep.value ? steps.indexOf(currentStep.value) : -1))
+const currentStepIndex = computed(() =>
+	currentStep.value ? visibleSteps.value.indexOf(currentStep.value) : -1,
+)
 const previousStep = computed(() => {
-	const step = currentStep.value ? steps[steps.indexOf(currentStep.value) - 1] : undefined
+	if (!currentStep.value) return undefined
+	const idx = visibleSteps.value.indexOf(currentStep.value)
+	let step = idx > 0 ? visibleSteps.value[idx - 1] : undefined
 	if (step === 'payment' && skipPaymentMethods.value && primaryPaymentMethodId.value) {
-		return 'region'
+		const paymentIdx = visibleSteps.value.indexOf('payment')
+		step = paymentIdx > 0 ? visibleSteps.value[paymentIdx - 1] : undefined
 	}
 	return step
 })
-const nextStep = computed(() =>
-	currentStep.value ? steps[steps.indexOf(currentStep.value) + 1] : undefined,
-)
+const nextStep = computed(() => {
+	if (!currentStep.value) return undefined
+	const idx = visibleSteps.value.indexOf(currentStep.value)
+	return idx >= 0 ? visibleSteps.value[idx + 1] : undefined
+})
 
 const canProceed = computed(() => {
 	switch (currentStep.value) {
@@ -261,11 +274,25 @@ async function setStep(step: Step | undefined, skipValidation = false) {
 	}
 }
 
-watch(selectedPlan, () => {
-	if (currentStep.value === 'plan') {
-		customServer.value = !selectedPlan.value
-	}
-})
+watch(
+	selectedPlan,
+	() => {
+		if (currentStep.value === 'plan') {
+			customServer.value = !selectedPlan.value
+		}
+	},
+	{ flush: 'sync' },
+)
+
+watch(
+	() => props.existingSubscription,
+	(sub) => {
+		if (sub?.metadata?.type === 'pyro' && sub.metadata.region) {
+			selectedRegion.value = sub.metadata.region
+		}
+	},
+	{ immediate: true },
+)
 
 const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return (
@@ -295,7 +322,9 @@ function begin(
 	customServer.value = !selectedPlan.value
 	selectedPaymentMethod.value = undefined
 	const skipPlanStep = props.planStage && plan !== undefined
-	currentStep.value = skipPlanStep ? (steps[1] ?? steps[0]) : steps[0]
+	currentStep.value = skipPlanStep
+		? (visibleSteps.value[1] ?? visibleSteps.value[0])
+		: visibleSteps.value[0]
 	skipPaymentMethods.value = true
 	projectId.value = project
 	modal.value?.show()
@@ -339,7 +368,7 @@ function goToBreadcrumbStep(id: string) {
 	<NewModal ref="modal" @hide="$emit('hide')">
 		<template #title>
 			<div class="flex items-center gap-1 font-bold text-secondary">
-				<template v-for="(step, index) in steps" :key="step">
+				<template v-for="(step, index) in visibleSteps" :key="step">
 					<button
 						v-if="index < currentStepIndex"
 						class="bg-transparent active:scale-95 font-bold text-secondary p-0"
@@ -356,7 +385,7 @@ function goToBreadcrumbStep(id: string) {
 						{{ formatMessage(titles[step]) }}
 					</span>
 					<ChevronRightIcon
-						v-if="index < steps.length - 1"
+						v-if="index < visibleSteps.length - 1"
 						class="h-5 w-5 text-secondary"
 						stroke-width="3"
 					/>
@@ -381,6 +410,7 @@ function goToBreadcrumbStep(id: string) {
 				:regions="regions"
 				:pings="pings"
 				:custom="customServer"
+				:hide-region-selection="isUpgrade"
 				:available-products="availableProducts"
 				:currency="currency"
 				:interval="selectedInterval"
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index bac7d7db5d..bd3fc5a842 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -178,6 +178,10 @@ const messages = defineMessages({
 		id: 'servers.region.custom.prompt',
 		defaultMessage: `How much RAM do you want your server to have?`,
 	},
+	customPromptRamOnly: {
+		id: 'servers.region.custom.prompt-ram-only',
+		defaultMessage: `RAM`,
+	},
 })
 
 async function updateStock() {
@@ -286,7 +290,7 @@ onMounted(() => {
 				class="mb-2 text-xl font-bold text-contrast"
 				:class="hideRegionSelection ? 'mt-0' : 'mt-4'"
 			>
-				{{ formatMessage(messages.customPrompt) }}
+				{{ formatMessage(hideRegionSelection ? messages.customPromptRamOnly : messages.customPrompt) }}
 			</h2>
 			<div>
 				<Slider v-model="selectedRam" :min="minRam" :max="maxRam" :step="2" unit="GB" />

From fe50d325ccbabf5dfa2754a6a28dba191e592a08 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 12:11:08 -0600
Subject: [PATCH 4/5] fix: modal not getting stripe customer and payment
 methods on page hard refresh

---
 .../billing/ModrinthServersPurchaseModal.vue  | 16 ++++++-----
 packages/ui/src/composables/stripe.ts         | 27 ++++++++++++-------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index df962faacc..dcf21f953d 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -10,7 +10,7 @@ import {
 } from '@modrinth/assets'
 import { useQueryClient } from '@tanstack/vue-query'
 import type Stripe from 'stripe'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, toRef, useTemplateRef, watch } from 'vue'
 
 import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 
@@ -94,8 +94,8 @@ const {
 	noPaymentRequired,
 } = useStripe(
 	props.publishableKey,
-	props.customer,
-	props.paymentMethods,
+	toRef(props, 'customer'),
+	toRef(props, 'paymentMethods'),
 	props.currency,
 	selectedPlan,
 	selectedInterval,
@@ -208,12 +208,14 @@ async function beforeProceed(step: string) {
 			await initializeStripe()
 
 			if (primaryPaymentMethodId.value && skipPaymentMethods.value) {
-				const paymentMethod = await props.paymentMethods.find(
+				const paymentMethod = props.paymentMethods.find(
 					(x) => x.id === primaryPaymentMethodId.value,
 				)
-				await selectPaymentMethod(paymentMethod)
-				await setStep('review', true)
-				return false
+				if (paymentMethod) {
+					await selectPaymentMethod(paymentMethod)
+					await setStep('review', true)
+					return false
+				}
 			}
 			return true
 		case 'review':
diff --git a/packages/ui/src/composables/stripe.ts b/packages/ui/src/composables/stripe.ts
index 9db627a3b2..837122c23e 100644
--- a/packages/ui/src/composables/stripe.ts
+++ b/packages/ui/src/composables/stripe.ts
@@ -18,8 +18,8 @@ import { getPriceForInterval } from '../utils/product-utils'
 
 export const useStripe = (
 	publishableKey: string,
-	customer: Stripe.Customer,
-	paymentMethods: Stripe.PaymentMethod[],
+	customer: Ref<Stripe.Customer | null | undefined>,
+	paymentMethods: Ref<Stripe.PaymentMethod[]>,
 	currency: string,
 	product: Ref<Labrinth.Billing.Internal.Product | undefined>,
 	interval: Ref<ServerBillingInterval>,
@@ -96,7 +96,7 @@ export const useStripe = (
 
 		const contacts: ContactOption[] = []
 
-		paymentMethods.forEach((method) => {
+		paymentMethods.value.forEach((method) => {
 			const addr = method.billing_details?.address
 			if (
 				addr &&
@@ -131,15 +131,22 @@ export const useStripe = (
 	}
 
 	const primaryPaymentMethodId = computed<string | null>(() => {
-		if (customer && customer.invoice_settings && customer.invoice_settings.default_payment_method) {
-			const method = customer.invoice_settings.default_payment_method
+		const customerValue = customer.value
+		const paymentMethodsValue = paymentMethods.value
+
+		if (
+			customerValue &&
+			customerValue.invoice_settings &&
+			customerValue.invoice_settings.default_payment_method
+		) {
+			const method = customerValue.invoice_settings.default_payment_method
 			if (typeof method === 'string') {
 				return method
 			} else {
 				return method.id
 			}
-		} else if (paymentMethods && paymentMethods[0] && paymentMethods[0].id) {
-			return paymentMethods[0].id
+		} else if (paymentMethodsValue[0] && paymentMethodsValue[0].id) {
+			return paymentMethodsValue[0].id
 		} else {
 			return null
 		}
@@ -148,7 +155,7 @@ export const useStripe = (
 	const loadStripeElements = async () => {
 		loadingFailed.value = undefined
 		try {
-			if (!customer && primaryPaymentMethodId.value) {
+			if (!customer.value && primaryPaymentMethodId.value) {
 				paymentMethodLoading.value = true
 				await refreshPaymentIntent(primaryPaymentMethodId.value, false)
 				paymentMethodLoading.value = false
@@ -189,7 +196,7 @@ export const useStripe = (
 		try {
 			paymentMethodLoading.value = true
 			if (!confirmation) {
-				selectedPaymentMethod.value = paymentMethods.find((x) => x.id === id)
+				selectedPaymentMethod.value = paymentMethods.value.find((x) => x.id === id)
 			}
 
 			if (!product.value) {
@@ -248,7 +255,7 @@ export const useStripe = (
 						}
 					).payment_method
 					if (typeof paymentMethod === 'string') {
-						const method = paymentMethods.find((x) => x.id === paymentMethod)
+						const method = paymentMethods.value.find((x) => x.id === paymentMethod)
 						if (method) {
 							inputtedPaymentMethod.value = method
 						}

From d5f14995b3b5bd3bc228731dc8baeee31118f824 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 12:11:44 -0600
Subject: [PATCH 5/5] refactor: pnpm prepr

---
 .../src/components/billing/ModrinthServersPurchaseModal.vue   | 4 +---
 packages/ui/src/components/billing/ServersPurchase1Region.vue | 4 +++-
 packages/ui/src/locales/en-US/index.json                      | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index dcf21f953d..bbc816afed 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -118,9 +118,7 @@ const steps: Step[] = props.planStage
 
 const isUpgrade = computed(() => !!props.existingSubscription)
 const skipRegionStep = computed(() => isUpgrade.value && !customServer.value)
-const visibleSteps = computed(() =>
-	steps.filter((s) => !(s === 'region' && skipRegionStep.value)),
-)
+const visibleSteps = computed(() => steps.filter((s) => !(s === 'region' && skipRegionStep.value)))
 
 const titles: Record<Step, MessageDescriptor> = {
 	plan: defineMessage({ id: 'servers.purchase.step.plan.title', defaultMessage: 'Plan' }),
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index bd3fc5a842..031d776887 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -290,7 +290,9 @@ onMounted(() => {
 				class="mb-2 text-xl font-bold text-contrast"
 				:class="hideRegionSelection ? 'mt-0' : 'mt-4'"
 			>
-				{{ formatMessage(hideRegionSelection ? messages.customPromptRamOnly : messages.customPrompt) }}
+				{{
+					formatMessage(hideRegionSelection ? messages.customPromptRamOnly : messages.customPrompt)
+				}}
 			</h2>
 			<div>
 				<Slider v-model="selectedRam" :min="minRam" :max="maxRam" :step="2" unit="GB" />
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 9ff0bdfd66..82ffb46877 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3050,6 +3050,9 @@
   "servers.region.custom.prompt": {
     "defaultMessage": "How much RAM do you want your server to have?"
   },
+  "servers.region.custom.prompt-ram-only": {
+    "defaultMessage": "RAM"
+  },
   "servers.region.north-america": {
     "defaultMessage": "North America"
   },