feat: medal promotion on servers page (#4117)

* feat: medal promotion on servers page * feat: medal server card * fix: styling changes * fix: colors for dark mode only * fix: light mode medal promotion * feat: finish server card layout * feat: countdown on server panel * fix: lint * feat: use same gradient as promo * fix: scale for medal bg * fix: border around server icon * feat: medal subscr expiry date stuff * feat: progress on plans within the modal * feat: finalize plan modal stage * fix: unused scss * feat: remove buttons from cards * feat: upgrade button opens modal on server panel * feat: billing endpoint * fix: lint issues * fix: lint issues * fix: lint issues * feat: better handling of downgrades + existing plan checks * feat: update medal url * feat: proration visual in modal * feat: standardize upgrade modal into ServersUpgradeModalWrapper * feat: replace upgrade PurchaseModal with ServersUpgradeModalWrapper * feat: allow server region * fix: lint * fix: lint * fix: medal frontend completion * fix: lint issues * feat: ad * fix: hover tooltip + orange new server sparkle * feat: ad * fix: lint issues new eslint * feat: match ad * feat: support for ?dry=true * fix: lint isuses * fix: lint issues * fix: TeleportDropdownMenu imports * fix: hash nav issues * feat: clarify confirm changes btn * fix: lint issues * fix: "Using new payment method" * fix: lint * fix: re-add -mt-2 --------- Signed-off-by: Cal H. <hendersoncal117@gmail.com>
2025-08-18 18:59:19 +01:00
parent 9af1391e0e
commit 14eac461be
34 changed files with 2476 additions and 285 deletions
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -392,7 +392,7 @@
 				<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 					<h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1>
 					<div class="details-hide flex flex-col gap-1">
-						<details pyro-hash="cpus" class="group" :open="$route.hash === '#cpus'">
+						<details nav-hash="cpus" class="group" :open="$route.hash === '#cpus'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -404,7 +404,7 @@
 								GHz, paired with DDR5 memory.
 							</p>
 						</details>
-						<details pyro-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
+						<details nav-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -420,7 +420,7 @@
 							</p>
 						</details>

-						<details pyro-hash="ddos" class="group" :open="$route.hash === '#ddos'">
+						<details nav-hash="ddos" class="group" :open="$route.hash === '#ddos'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -433,7 +433,7 @@
 							</p>
 						</details>

-						<details pyro-hash="region" class="group" :open="$route.hash === '#region'">
+						<details nav-hash="region" class="group" :open="$route.hash === '#region'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -447,7 +447,7 @@
 							</p>
 						</details>

-						<details pyro-hash="storage" class="group" :open="$route.hash === '#storage'">
+						<details nav-hash="storage" class="group" :open="$route.hash === '#storage'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -460,7 +460,7 @@
 							</p>
 						</details>

-						<details pyro-hash="performance" class="group" :open="$route.hash === '#performance'">
+						<details nav-hash="performance" class="group" :open="$route.hash === '#performance'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -481,7 +481,7 @@
 							</p>
 						</details>

-						<details pyro-hash="prices" class="group" :open="$route.hash === '#prices'">
+						<details nav-hash="prices" class="group" :open="$route.hash === '#prices'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -493,7 +493,7 @@
 							</p>
 						</details>

-						<details pyro-hash="versions" class="group" :open="$route.hash === '#versions'">
+						<details nav-hash="versions" class="group" :open="$route.hash === '#versions'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -516,12 +516,13 @@
 		</section>

 		<section
-			id="plan"
-			pyro-hash="plan"
 			class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
 		>
 			<div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
-			<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center">
+			<div
+				nav-hash="plan"
+				class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center"
+			>
 				<h1 class="relative m-0 text-4xl leading-[120%] md:text-7xl">
 					There's a server for everyone
 				</h1>
@@ -551,6 +552,8 @@
 					<span v-else></span>
 				</div>

+				<MedalPlanPromotion v-if="flags.enableMedalPromotion" />
+
 				<ul class="m-0 flex w-full grid-cols-3 flex-col gap-8 p-0 lg:grid">
 					<ServerPlanSelector
 						:capacity="capacityStatuses?.small?.available"
@@ -651,12 +654,14 @@ import { computed } from 'vue'
 import { useBaseFetch } from '@/composables/fetch.js'
 import OptionGroup from '~/components/ui/OptionGroup.vue'
 import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'

 const { addNotification } = injectNotificationManager()
 const { locale } = useVIntl()
+const flags = useFeatureFlags()

 const billingPeriods = ref(['monthly', 'quarterly'])
 const billingPeriod = ref(billingPeriods.value.includes('quarterly') ? 'quarterly' : 'monthly')
@@ -850,8 +855,8 @@ const isAtCapacity = computed(

 const scrollToFaq = () => {
 	if (route.hash) {
-		// where pyro-hash === route.hash
-		const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`)
+		// where nav-hash === route.hash
+		const faq = document.querySelector(`[nav-hash="${route.hash.slice(1)}"]`)
 		if (faq) {
 			faq.open = true
 			const top = faq.getBoundingClientRect().top
@@ -923,16 +928,20 @@ const selectProduct = async (product) => {
 	await nextTick()

 	if (product === 'custom') {
-		purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value)
+		purchaseModal.value?.show(billingPeriod.value, null, selectedProjectId.value)
 	} else {
 		purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value)
 	}
 }

-const planQuery = () => {
-	if (route.query.plan) {
-		document.getElementById('plan').scrollIntoView()
-		selectProduct(route.query.plan)
+const planQuery = async () => {
+	if ('plan' in route.query) {
+		await nextTick()
+		const planElement = document.querySelector(`[nav-hash="plan"]`)
+		if (planElement) {
+			planElement.scrollIntoView({ behavior: 'smooth' })
+			await selectProduct(route.query.plan)
+		}
 	}
 }

--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -116,7 +116,15 @@
 		}"
 	>
 		<div class="flex w-full min-w-0 select-none flex-col items-center gap-6 pt-4 sm:flex-row">
-			<ServerIcon :image="serverData.image" class="drop-shadow-lg sm:drop-shadow-none" />
+			<ServerIcon
+				v-if="!serverData.is_medal"
+				:image="serverData.image"
+				class="drop-shadow-lg sm:drop-shadow-none"
+			/>
+			<MedalServerIcon
+				v-else
+				class="border-medal-orange z-10 size-16 shrink-0 rounded-xl border-[1px] border-solid bg-bg text-orange"
+			/>
 			<div
 				class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
 			>
@@ -290,6 +298,10 @@
 					</div>
 				</div>

+				<div class="mb-4">
+					<MedalServerCountdown :server-id="server.serverId" />
+				</div>
+
 				<div
 					v-if="!isConnected && !isReconnecting && !isLoading"
 					data-pyro-server-ws-error
@@ -382,9 +394,11 @@ import DOMPurify from 'dompurify'
 import { computed, onMounted, onUnmounted, type Reactive, ref } from 'vue'

 import { reloadNuxtApp } from '#app'
+import MedalServerIcon from '~/assets/images/servers/medal_server_icon.svg?component'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
 import InstallingTicker from '~/components/ui/servers/InstallingTicker.vue'
+import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
 import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
 import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
 import ServerIcon from '~/components/ui/servers/ServerIcon.vue'
--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -61,7 +61,7 @@
 					</div>
 				</div>

-				<div class="card flex flex-col gap-4">
+				<div v-if="!data.is_medal" class="card flex flex-col gap-4">
 					<label for="server-icon-field" class="flex flex-col gap-2">
 						<span class="text-lg font-bold text-contrast">Server icon</span>
 						<span> This icon will be visible on the Minecraft server list and on Modrinth. </span>
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -3,6 +3,7 @@
 		data-pyro-server-list-root
 		class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
 	>
+		<ServersUpgradeModalWrapper ref="upgradeModal" />
 		<div
 			v-if="hasError || fetchError"
 			class="mx-auto flex h-full min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4 text-left"
@@ -93,8 +94,17 @@
 				v-if="filteredData.length > 0 || isPollingForNewServers"
 				class="m-0 flex flex-col gap-4 p-0"
 			>
-				<ServerListing v-for="server in filteredData" :key="server.server_id" v-bind="server" />
-				<ServerListingSkeleton v-if="isPollingForNewServers" />
+				<ServerListing
+					v-for="server in filteredData.filter((s) => !s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+				/>
+				<MedalServerListing
+					v-for="server in filteredData.filter((s) => s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+					@upgrade="openUpgradeModal(server.server_id)"
+				/>
 			</ul>
 			<div v-else class="flex h-full items-center justify-center">
 				<p class="text-contrast">No servers found.</p>
@@ -107,13 +117,16 @@
 import { HammerIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, CopyCode } from '@modrinth/ui'
 import type { ModrinthServersFetchError, Server } from '@modrinth/utils'
+import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
+import type { ComponentPublicInstance } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'

 import { reloadNuxtApp } from '#app'
+import MedalServerListing from '~/components/ui/servers/marketing/MedalServerListing.vue'
 import ServerListing from '~/components/ui/servers/ServerListing.vue'
-import ServerListingSkeleton from '~/components/ui/servers/ServerListingSkeleton.vue'
 import ServerManageEmptyState from '~/components/ui/servers/ServerManageEmptyState.vue'
+import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'

 definePageMeta({
@@ -137,15 +150,40 @@ const {
 	data: serverResponse,
 	error: fetchError,
 	refresh,
-} = await useAsyncData<ServerResponse>('ServerList', () =>
-	useServersFetch<ServerResponse>('servers'),
-)
+} = await useAsyncData<ServerResponse>('ServerList', async () => {
+	const serverResponse = await useServersFetch<ServerResponse>('servers')
+
+	let subscriptions: any[] | undefined
+
+	for (const server of serverResponse.servers) {
+		if (server.is_medal) {
+			// Inject end date into server object.
+			const serverID = server.server_id
+
+			if (!subscriptions) {
+				subscriptions = (await useBaseFetch(`billing/subscriptions`, {
+					internal: true,
+				})) as any[]
+			}
+
+			for (const subscription of subscriptions) {
+				if (subscription.metadata?.id === serverID) {
+					server.medal_expires = dayjs(subscription.created as string)
+						.add(5, 'days')
+						.toISOString()
+				}
+			}
+		}
+	}
+
+	return serverResponse
+})

 watch([fetchError, serverResponse], ([error, response]) => {
 	hasError.value = !!error || !response
 })

-const serverList = computed(() => {
+const serverList = computed<Server[]>(() => {
 	if (!serverResponse.value) return []
 	return serverResponse.value.servers
 })
@@ -167,7 +205,7 @@ function introToTop(array: Server[]): Server[] {
 	})
 }

-const filteredData = computed(() => {
+const filteredData = computed<Server[]>(() => {
 	if (!searchInput.value.trim()) {
 		return introToTop(serverList.value)
 	}
@@ -207,4 +245,13 @@ onUnmounted(() => {
 		clearInterval(intervalId)
 	}
 })
+
+type ServersUpgradeModalWrapperRef = ComponentPublicInstance<{
+	open: (id: string) => void | Promise<void>
+}>
+
+const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
+function openUpgradeModal(serverId: string) {
+	upgradeModal.value?.open(serverId)
+}
 </script>
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -1,4 +1,5 @@
 <template>
+	<ServersUpgradeModalWrapper ref="upgradeModal" />
 	<section class="universal-card experimental-styles-within">
 		<h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
 		<p>{{ formatMessage(messages.subscriptionDescription) }}</p>
@@ -51,18 +52,35 @@
 								{{
 									formatPrice(
 										vintl.locale,
-										midasSubscriptionPrice.prices.intervals[midasCharge.subscription_interval],
+										midasSubscriptionPrice.prices.intervals[midasSubscription.interval],
 										midasSubscriptionPrice.currency_code,
 									)
 								}}
 								/
-								{{ midasCharge.subscription_interval }}
+								{{ midasSubscription.interval }}
 							</template>
 							<template v-else>
 								{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}
 								/ month
 							</template>
 						</span>
+						<!-- Next charge preview for Midas when interval is changing -->
+						<div
+							v-if="
+								midasCharge &&
+								midasCharge.status === 'open' &&
+								midasSubscription &&
+								midasSubscription.interval &&
+								midasCharge.subscription_interval !== midasSubscription.interval
+							"
+							class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
+						>
+							<span class="opacity-70">Next:</span>
+							<span class="font-semibold text-contrast">
+								{{ formatPrice(vintl.locale, midasCharge.amount, midasCharge.currency_code) }}
+							</span>
+							<span>/{{ midasCharge.subscription_interval.replace('ly', '') }}</span>
+						</div>
 						<template v-if="midasCharge">
 							<span
 								v-if="
@@ -88,12 +106,24 @@
 							<span v-else-if="midasCharge.status === 'cancelled'" class="text-sm text-secondary">
 								Expires {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
 							</span>
+							<span
+								v-if="
+									midasCharge.status === 'open' &&
+									midasSubscription &&
+									midasSubscription.interval &&
+									midasCharge.subscription_interval !== midasSubscription.interval
+								"
+								class="text-sm text-secondary"
+							>
+								Switches to {{ midasCharge.subscription_interval }} billing on
+								{{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
+							</span>
 						</template>

 						<span v-else class="text-sm text-secondary">
 							Or
-							{{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }}
-							/ year (save
+							{{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }} /
+							year (save
 							{{
 								calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly)
 							}}%)!
@@ -168,8 +198,7 @@
 								@click="switchMidasInterval(oppositeInterval)"
 							>
 								<SpinnerIcon v-if="changingInterval" class="animate-spin" />
-								<TransferIcon v-else />
-								{{ changingInterval ? 'Switching' : 'Switch' }} to
+								<TransferIcon v-else /> {{ changingInterval ? 'Switching' : 'Switch' }} to
 								{{ oppositeInterval }}
 							</button>
 						</ButtonStyled>
@@ -207,7 +236,11 @@
 					<div class="flex flex-col gap-4">
 						<ModrinthServersIcon class="flex h-8 w-fit" />
 						<div class="flex flex-col gap-2">
-							<ServerListing v-if="subscription.serverInfo" v-bind="subscription.serverInfo" />
+							<ServerListing
+								v-if="subscription.serverInfo"
+								v-bind="subscription.serverInfo"
+								:pending-change="getPendingChange(subscription)"
+							/>
 							<div v-else class="w-fit">
 								<p>
 									A linked server couldn't be found for this subscription. There are a few possible
@@ -233,9 +266,8 @@
 									<div class="flex items-center gap-2">
 										<CheckCircleIcon class="h-5 w-5 text-brand" />
 										<span>
-											{{ getPyroProduct(subscription)?.metadata?.cpu / 2 }}
-											Shared CPUs (Bursts up to
-											{{ getPyroProduct(subscription)?.metadata?.cpu }} CPUs)
+											{{ getPyroProduct(subscription)?.metadata?.cpu / 2 }} Shared CPUs (Bursts up
+											to {{ getPyroProduct(subscription)?.metadata?.cpu }} CPUs)
 										</span>
 									</div>
 									<div class="flex items-center gap-2">
@@ -285,16 +317,60 @@
 											</span>
 											<span>/{{ subscription.interval.replace('ly', '') }}</span>
 										</div>
+										<div
+											v-if="
+												getPyroCharge(subscription) &&
+												getPyroCharge(subscription).status === 'open' &&
+												((getPyroCharge(subscription).price_id &&
+													getPyroCharge(subscription).price_id !== subscription.price_id) ||
+													(getPyroCharge(subscription).subscription_interval &&
+														getPyroCharge(subscription).subscription_interval !==
+															subscription.interval))
+											"
+											class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
+										>
+											<span class="opacity-70">Next:</span>
+											<span class="font-semibold text-contrast">
+												{{
+													formatPrice(
+														vintl.locale,
+														getPyroCharge(subscription).amount,
+														getPyroCharge(subscription).currency_code,
+													)
+												}}
+											</span>
+											<span>
+												/
+												{{
+													(
+														getPyroCharge(subscription).subscription_interval ||
+														subscription.interval
+													).replace('ly', '')
+												}}
+											</span>
+										</div>
 										<div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
 											<span class="text-sm text-secondary">
-												Since
-												{{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
+												Since {{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
 											</span>
 											<span
 												v-if="getPyroCharge(subscription).status === 'open'"
 												class="text-sm text-secondary"
 											>
-												Renews
+												Renews {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+											</span>
+											<span
+												v-if="
+													getPyroCharge(subscription).status === 'open' &&
+													getPyroCharge(subscription).subscription_interval &&
+													getPyroCharge(subscription).subscription_interval !==
+														subscription.interval
+												"
+												class="text-sm text-secondary"
+											>
+												Switches to
+												{{ getPyroCharge(subscription).subscription_interval }}
+												billing on
 												{{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
 											</span>
 											<span
@@ -308,8 +384,7 @@
 												v-else-if="getPyroCharge(subscription).status === 'cancelled'"
 												class="text-sm text-secondary"
 											>
-												Expires
-												{{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+												Expires {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
 											</span>
 											<span
 												v-else-if="getPyroCharge(subscription).status === 'failed'"
@@ -404,37 +479,6 @@
 			:payment-methods="paymentMethods"
 			:return-url="`${config.public.siteUrl}/settings/billing`"
 		/>
-		<PurchaseModal
-			ref="pyroPurchaseModal"
-			:product="upgradeProducts"
-			:country="country"
-			custom-server
-			:existing-subscription="currentSubscription"
-			:existing-plan="currentProduct"
-			:publishable-key="config.public.stripePublishableKey"
-			:send-billing-request="
-				async (body) =>
-					await useBaseFetch(`billing/subscription/${currentSubscription.id}`, {
-						internal: true,
-						method: `PATCH`,
-						body: body,
-					})
-			"
-			:renewal-date="currentSubRenewalDate"
-			:on-error="
-				(err) =>
-					addNotification({
-						title: 'An error occurred',
-						type: 'error',
-						text: err.message ?? (err.data ? err.data.description : err),
-					})
-			"
-			:fetch-capacity-statuses="fetchCapacityStatuses"
-			:customer="customer"
-			:payment-methods="paymentMethods"
-			:return-url="`${config.public.siteUrl}/servers/manage`"
-			:server-name="`${auth?.user?.username}'s server`"
-		/>
 		<AddPaymentMethodModal
 			ref="addPaymentMethodModal"
 			:publishable-key="config.public.stripePublishableKey"
@@ -588,6 +632,7 @@ import { computed, ref } from 'vue'
 import { useBaseFetch } from '@/composables/fetch.js'
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 import ServerListing from '~/components/ui/servers/ServerListing.vue'
+import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'

@@ -903,6 +948,12 @@ const getPyroProduct = (subscription) => {
 	return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id))
 }

+// Get product by a price ID (useful for pending next-charge changes)
+const getProductFromPriceId = (priceId) => {
+	if (!priceId || !productsData.value) return null
+	return productsData.value.find((p) => p.prices?.some((x) => x.id === priceId))
+}
+
 const getPyroCharge = (subscription) => {
 	if (!subscription || !charges.value) return null
 	return charges.value.find(
@@ -931,76 +982,18 @@ const getProductPrice = (product, interval) => {
 	)
 }

-const modalCancel = ref(null)
+const getPlanChangeVerb = (currentProduct, nextProduct) => {
+	const curRam = currentProduct?.metadata?.ram ?? 0
+	const nextRam = nextProduct?.metadata?.ram ?? 0

-const pyroPurchaseModal = ref()
-const currentSubscription = ref(null)
-const currentProduct = ref(null)
-const upgradeProducts = ref([])
-upgradeProducts.value.metadata = { type: 'pyro' }
-
-const currentSubRenewalDate = ref()
-
-const showPyroUpgradeModal = async (subscription) => {
-	currentSubscription.value = subscription
-	currentSubRenewalDate.value = getPyroCharge(subscription).due
-	currentProduct.value = getPyroProduct(subscription)
-	upgradeProducts.value = products.filter(
-		(p) =>
-			p.metadata.type === 'pyro' &&
-			(!currentProduct.value || p.metadata.ram > currentProduct.value.metadata.ram),
-	)
-	upgradeProducts.value.metadata = { type: 'pyro' }
-
-	await nextTick()
-
-	if (!currentProduct.value) {
-		console.error('Could not find product for current subscription')
-		addNotification({
-			title: 'An error occurred',
-			text: 'Could not find product for current subscription',
-			type: 'error',
-		})
-		return
-	}
-
-	if (!pyroPurchaseModal.value) {
-		console.error('pyroPurchaseModal ref is undefined')
-		return
-	}
-
-	pyroPurchaseModal.value.show()
+	return nextRam < curRam ? 'downgrade' : 'upgrade'
 }

-async function fetchCapacityStatuses(serverId, product) {
-	if (product) {
-		try {
-			return {
-				custom: await useServersFetch(`servers/${serverId}/upgrade-stock`, {
-					method: 'POST',
-					body: {
-						cpu: product.metadata.cpu,
-						memory_mb: product.metadata.ram,
-						swap_mb: product.metadata.swap,
-						storage_mb: product.metadata.storage,
-					},
-				}),
-			}
-		} catch (error) {
-			console.error('Error checking server capacities:', error)
-			addNotification({
-				title: 'Error checking server capacities',
-				text: error,
-				type: 'error',
-			})
-			return {
-				custom: { available: 0 },
-				small: { available: 0 },
-				medium: { available: 0 },
-				large: { available: 0 },
-			}
-		}
-	}
+const modalCancel = ref(null)
+
+const upgradeModal = ref(null)
+const showPyroUpgradeModal = (subscription) => {
+	upgradeModal.value?.open(subscription?.metadata?.id)
 }

 const resubscribePyro = async (subscriptionId, wasSuspended) => {
@@ -1093,6 +1086,7 @@ function showCancellationSurvey(subscription) {
 			window.Tally.openPopup(formId, popupOptions)
 		} else {
 			console.warn('Tally script not yet loaded')
+			cancelSubscription(subscription.id, true)
 		}
 	} catch (e) {
 		console.error('Error opening Tally popup:', e)
@@ -1107,4 +1101,50 @@ useHead({
 		},
 	],
 })
+
+const getPendingChange = (subscription) => {
+	const charge = getPyroCharge(subscription)
+	if (!charge || charge.status !== 'open') return null
+
+	const nextProduct = getProductFromPriceId(charge.price_id)
+	if (!nextProduct || charge.price_id === subscription.price_id) {
+		// Not a plan change, but interval could change
+		if (charge.subscription_interval && charge.subscription_interval !== subscription.interval) {
+			return {
+				planSize: getProductSize(getPyroProduct(subscription)),
+				cpu: getPyroProduct(subscription)?.metadata?.cpu / 2,
+				cpuBurst: getPyroProduct(subscription)?.metadata?.cpu,
+				ramGb: (getPyroProduct(subscription)?.metadata?.ram || 0) / 1024,
+				swapGb: (getPyroProduct(subscription)?.metadata?.swap || 0) / 1024 || undefined,
+				storageGb: (getPyroProduct(subscription)?.metadata?.storage || 0) / 1024 || undefined,
+				date: charge.due,
+				intervalChange: charge.subscription_interval,
+				verb: 'Switches',
+			}
+		}
+		return null
+	}
+
+	const curProduct = getPyroProduct(subscription)
+	const verb = getPlanChangeVerb(curProduct, nextProduct)
+	const cpu = nextProduct?.metadata?.cpu ?? 0
+	const ram = nextProduct?.metadata?.ram ?? 0
+	const swap = nextProduct?.metadata?.swap ?? 0
+	const storage = nextProduct?.metadata?.storage ?? 0
+
+	return {
+		planSize: getProductSize(nextProduct),
+		cpu: cpu / 2,
+		cpuBurst: cpu,
+		ramGb: ram / 1024,
+		swapGb: swap ? swap / 1024 : undefined,
+		storageGb: storage ? storage / 1024 : undefined,
+		date: charge.due,
+		intervalChange:
+			charge.subscription_interval && charge.subscription_interval !== subscription.interval
+				? charge.subscription_interval
+				: null,
+		verb,
+	}
+}
 </script>