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>

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)
+		}
 	}
 }
 

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'

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>

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>