Medal promo v2 (#4220)

* Revert "Revert "feat: medal promotion on servers page (#4117)""

This reverts commit 2e6cff7efc.

* Revert "Revert "update changelog""

This reverts commit b2ff2d8737.

* Revert "Revert "turn off medal promo""

This reverts commit eaa4b44a16.

* Revert "Revert "Revert "turn off medal promo"""

This reverts commit 76d0ef03e7.

* Revert "Revert "fix medal thing showing up for everyone""

This reverts commit ee8c47adcb.

* New medal colors

* Update medal server listings

* Upgrade modal enhancements & more medal consistency

* undo app promo changes

* Only apply medal promo with flag on

* remove unneessary files

* lint

* disable medal flag

apps/frontend/src/pages/servers/manage/[id].vue

@@ -115,58 +115,63 @@
 				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
 		}"
 	>
-		<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" />
-			<div
-				class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
-			>
-				<div class="hidden shrink-0 flex-row items-center gap-1 sm:flex">
-					<NuxtLink to="/servers/manage" class="breadcrumb goto-link flex w-fit items-center">
-						<LeftArrowIcon />
-						All servers
-					</NuxtLink>
-				</div>
-				<div class="flex w-full flex-col items-center gap-4 sm:flex-row">
-					<h1
-						class="m-0 w-screen flex-shrink gap-3 truncate px-3 text-center text-4xl font-bold text-contrast sm:w-full sm:p-0 sm:text-left"
-					>
-						{{ serverData.name }}
-					</h1>
-					<div
-						v-if="isConnected"
-						data-pyro-server-action-buttons
-						class="server-action-buttons-anim flex w-fit flex-shrink-0"
-					>
-						<PanelServerActionButton
-							v-if="!serverData.flows?.intro"
-							class="flex-shrink-0"
-							:is-online="isServerRunning"
-							:is-actioning="isActioning"
-							:is-installing="serverData.status === 'installing'"
-							:disabled="isActioning || !!error"
-							:server-name="serverData.name"
-							:server-data="serverData"
-							:uptime-seconds="uptimeSeconds"
-							@action="sendPowerAction"
-						/>
-					</div>
-				</div>
-
-				<div
-					v-if="serverData.flows?.intro"
-					class="flex items-center gap-2 font-semibold text-secondary"
-				>
-					<SettingsIcon /> Configuring server...
-				</div>
-				<ServerInfoLabels
-					v-else
-					:server-data="serverData"
-					:show-game-label="showGameLabel"
-					:show-loader-label="showLoaderLabel"
-					:uptime-seconds="uptimeSeconds"
-					:linked="true"
-					class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+		<div>
+			<NuxtLink to="/servers/manage" class="breadcrumb goto-link flex w-fit items-center">
+				<LeftArrowIcon />
+				All servers
+			</NuxtLink>
+			<div class="flex w-full min-w-0 select-none flex-col items-center gap-4 pt-4 sm:flex-row">
+				<ServerIcon
+					:image="
+						serverData.is_medal ? 'https://cdn-raw.modrinth.com/medal_icon.webp' : serverData.image
+					"
+					class="drop-shadow-lg sm:drop-shadow-none"
 				/>
+				<div
+					class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
+				>
+					<div class="flex w-full flex-col items-center gap-4 sm:flex-row">
+						<h1
+							class="m-0 w-screen flex-shrink gap-3 truncate px-3 text-center text-2xl font-bold text-contrast sm:w-full sm:p-0 sm:text-left"
+						>
+							{{ serverData.name }}
+						</h1>
+						<div
+							v-if="isConnected"
+							data-pyro-server-action-buttons
+							class="server-action-buttons-anim flex w-fit flex-shrink-0"
+						>
+							<PanelServerActionButton
+								v-if="!serverData.flows?.intro"
+								class="flex-shrink-0"
+								:is-online="isServerRunning"
+								:is-actioning="isActioning"
+								:is-installing="serverData.status === 'installing'"
+								:disabled="isActioning || !!error"
+								:server-name="serverData.name"
+								:server-data="serverData"
+								:uptime-seconds="uptimeSeconds"
+								@action="sendPowerAction"
+							/>
+						</div>
+					</div>
+
+					<div
+						v-if="serverData.flows?.intro"
+						class="flex items-center gap-2 font-semibold text-secondary"
+					>
+						<SettingsIcon /> Configuring server...
+					</div>
+					<ServerInfoLabels
+						v-else
+						:server-data="serverData"
+						:show-game-label="showGameLabel"
+						:show-loader-label="showLoaderLabel"
+						:uptime-seconds="uptimeSeconds"
+						:linked="true"
+						class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+					/>
+				</div>
 			</div>
 		</div>
 
@@ -290,6 +295,10 @@
 					</div>
 				</div>
 
+				<div v-if="serverData.is_medal" class="mb-4">
+					<MedalServerCountdown :server-id="server.serverId" />
+				</div>
+
 				<div
 					v-if="!isConnected && !isReconnecting && !isLoading"
 					data-pyro-server-ws-error
@@ -385,6 +394,7 @@ import { reloadNuxtApp } from '#app'
 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" />
+				<MedalServerListing
+					v-for="server in filteredData.filter((s) => s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+					@upgrade="openUpgradeModal(server.server_id)"
+				/>
+				<ServerListing
+					v-for="server in filteredData.filter((s) => !s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+				/>
 			</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>