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/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>