hook up server cards and implement updated styles

apps/frontend/src/pages/settings/billing/index.vue

@@ -233,6 +233,7 @@
 								v-if="subscription.serverInfo"
 								v-bind="subscription.serverInfo"
 								:pending-change="getPendingChange(subscription)"
+								:cancellation-date="getCancellationDate(subscription)"
 							/>
 							<div v-else class="w-fit">
 								<p>
@@ -919,6 +920,13 @@ const getPyroCharge = (subscription) => {
 	)
 }
 
+const getCancellationDate = (subscription) => {
+	const charge = getPyroCharge(subscription)
+	if (!charge) return null
+	if (charge.status === 'cancelled') return charge.due
+	return null
+}
+
 const getProductSize = (product) => {
 	if (!product || !product.metadata) return 'Unknown'
 	const ramSize = product.metadata.ram

packages/ui/src/components/servers/ServerListing.vue

@@ -1,23 +1,30 @@
 <template>
 	<div>
-		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${server_id}`">
+		<NuxtLink :to="isDisabled ? '' : `/hosting/manage/${server_id}`">
 			<div
 				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-transform duration-100"
 				:class="{
-					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
+					'!rounded-b-none border-b-0': hasNotice,
-					'opacity-50 bg-surface-2': status === 'suspended',
+					'opacity-50 bg-surface-2': isDisabled,
-					'active:scale-95': status !== 'suspended' && !pendingChange,
+					'active:scale-95': !isDisabled && !hasNotice,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
 			>
-				<ServerIcon v-if="status !== 'suspended'" :image="image ?? undefined" />
 				<div
-					v-else
+					v-if="isProvisioning"
+					class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				>
+					<ServerIcon :image="image ?? undefined" />
+					<LoaderCircleIcon class="size-10 animate-spin text-constrast brightness-200 absolute" />
+				</div>
+				<div
+					v-else-if="status === 'suspended'"
 					class="bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 				>
 					<LockIcon class="size-12 text-secondary" />
 				</div>
+				<ServerIcon v-else :image="image ?? undefined" />
 				<div class="ml-4 flex flex-col gap-2.5">
 					<div class="flex flex-row items-center gap-2">
 						<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
@@ -67,8 +74,13 @@
 				</div>
 			</div>
 		</NuxtLink>
+		<div v-if="isProvisioning" class="server-listing-notice">
+			<div class="flex gap-2">
+				Please wait while we set up your server. This should only take a minute.
+			</div>
+		</div>
 		<div
-			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			v-else-if="status === 'suspended' && suspension_reason === 'upgrading'"
 			class="server-listing-notice"
 		>
 			<div class="flex gap-2">
@@ -80,12 +92,27 @@
 			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
 			class="server-listing-notice"
 		>
-			<div class="flex flex-row gap-2">
+			<div>
-				Your server has been cancelled. Please update your billing information or contact Modrinth
+				Your subscription was cancelled
-				Support for more information.
+				<template v-if="cancellationDate">
+					on
+					<span class="font-medium text-contrast">
+						{{ formatDate(cancellationDate) }}
+					</span> </template
+				>. Your files will be kept for <span class="font-medium text-red">30 days</span> and can be
+				downloaded below before they're deleted.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled v-if="onDownloadBackup" type="outlined" circular>
+					<button
+						class="!border-surface-5"
+						v-tooltip="'Download latest backup'"
+						@click="onDownloadBackup"
+					>
+						<DownloadIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled type="outlined">
 					<button
 						class="!border-surface-5"
 						v-tooltip="'Copy code to clipboard'"
@@ -100,10 +127,8 @@
 						><MessagesSquareIcon /> Support
 					</a>
 				</ButtonStyled>
-				<ButtonStyled color="brand">
+				<ButtonStyled v-if="onResubscribe" color="brand">
-					<AutoLink :to="`/settings/billing#server-${server_id}`">
+					<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
-						<RotateCounterClockwiseIcon /> Resubscribe
-					</AutoLink>
 				</ButtonStyled>
 			</div>
 		</div>
@@ -114,7 +139,7 @@
 				for more information.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled type="outlined">
 					<button
 						class="!border-surface-5"
 						v-tooltip="'Copy code to clipboard'"
@@ -142,9 +167,9 @@
 				Support for more information.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled type="outlined">
 					<button
-						class="!border-surface-5"
+						class="!border-surface-5 w-28"
 						v-tooltip="'Copy code to clipboard'"
 						@click="copyToClipboard(server_id)"
 					>
@@ -164,6 +189,41 @@
 				</ButtonStyled>
 			</div>
 		</div>
+		<div
+			v-if="isSetToCancel && status !== 'suspended' && !isProvisioning"
+			class="server-listing-notice"
+		>
+			<div>
+				Your subscription is set to cancel
+				<template v-if="cancellationDate">
+					on
+					<span class="font-medium text-contrast">
+						{{ formatDate(cancellationDate) }}
+					</span> </template
+				>. Your files will be preserved for <span class="font-medium text-red">30 days</span> after
+				cancellation.
+			</div>
+			<div class="flex gap-2">
+				<ButtonStyled type="outlined">
+					<button
+						class="!border-surface-5 w-28"
+						v-tooltip="'Copy code to clipboard'"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied"> Copied <CheckIcon class="text-green" /></template>
+						<template v-else> Copy ID <CopyIcon /></template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> Support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand" v-if="onResubscribe">
+					<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
+				</ButtonStyled>
+			</div>
+		</div>
 		<div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
 			<div>
 				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
@@ -183,7 +243,13 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { LoaderCircleIcon, LockIcon, MessagesSquareIcon, SparklesIcon } from '@modrinth/assets'
+import {
+	DownloadIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	MessagesSquareIcon,
+	SparklesIcon,
+} from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -233,12 +299,27 @@ type ServerListingProps = {
 		current?: number
 		max?: number
 	}
+	cancellationDate?: string | Date | null
+	onResubscribe?: (() => void) | null
+	onDownloadBackup?: (() => void) | null
 }
 
 const props = defineProps<ServerListingProps>()
 
 const { kyros, labrinth } = injectModrinthClient()
 
+const isConfiguring = computed(() => props.flows?.intro)
+const isProvisioning = computed(() => props.status === 'installing' && !isConfiguring.value)
+const isDisabled = computed(() => props.status === 'suspended' || isProvisioning.value)
+const isSetToCancel = computed(() => !!props.cancellationDate && props.status !== 'suspended')
+const hasNotice = computed(
+	() =>
+		isProvisioning.value ||
+		props.status === 'suspended' ||
+		isSetToCancel.value ||
+		!!props.pendingChange,
+)
+
 const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
 const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
 const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)
@@ -316,8 +397,6 @@ const { data: image } = useQuery({
 	enabled: computed(() => !!props.server_id && props.status === 'available'),
 })
 
-const isConfiguring = computed(() => props.flows?.intro)
-
 const copied = ref(false)
 
 async function copyToClipboard(text: string) {

packages/ui/src/layouts/wrapped/hosting/manage/index.vue

@@ -158,6 +158,9 @@
 						v-for="server in filteredData.filter((s) => !s.is_medal)"
 						:key="server.server_id"
 						v-bind="server"
+						:cancellation-date="serverBillingMap.get(server.server_id)?.cancellationDate"
+						:on-resubscribe="serverBillingMap.get(server.server_id)?.onResubscribe"
+						:on-download-backup="serverBillingMap.get(server.server_id)?.onDownloadBackup"
 					/>
 				</TransitionGroup>
 				<div v-else class="flex h-full items-center justify-center">
@@ -171,9 +174,16 @@
 <script setup lang="ts">
 import { type Archon, type Labrinth, NuxtModrinthClient } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import { AutoLink, ButtonStyled, CopyCode, injectModrinthClient, StyledInput } from '@modrinth/ui'
+import {
+	AutoLink,
+	ButtonStyled,
+	CopyCode,
+	injectModrinthClient,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import type { ModrinthServersFetchError } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
 import type { ComponentPublicInstance } from 'vue'
@@ -307,6 +317,83 @@ const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
 function openUpgradeModal(serverId: string) {
 	upgradeModal.value?.open(serverId)
 }
+
+const { addNotification } = injectNotificationManager()
+const queryClient = useQueryClient()
+
+const { data: subscriptions } = useQuery({
+	queryKey: ['billing', 'subscriptions'],
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+})
+
+const { data: charges } = useQuery({
+	queryKey: ['billing', 'payments'],
+	queryFn: () => client.labrinth.billing_internal.getPayments(),
+})
+
+type ServerBillingInfo = {
+	cancellationDate?: string | null
+	onResubscribe?: () => void
+	onDownloadBackup?: () => void
+}
+
+const serverBillingMap = computed(() => {
+	const map = new Map<string, ServerBillingInfo>()
+	if (!subscriptions.value || !charges.value) return map
+
+	const pyroSubs = subscriptions.value.filter((s) => s?.metadata?.type === 'pyro')
+	for (const sub of pyroSubs) {
+		const serverId = (sub.metadata as { id?: string })?.id
+		if (!serverId) continue
+
+		const charge = charges.value.find(
+			(c) => c.subscription_id === sub.id && c.status !== 'succeeded',
+		)
+
+		const info: ServerBillingInfo = {}
+
+		if (charge?.status === 'cancelled') {
+			info.cancellationDate = charge.due
+
+			const subId = sub.id
+			const wasSuspended = dayjs(charge.due).isBefore(dayjs())
+			info.onResubscribe = async () => {
+				try {
+					await client.labrinth.billing_internal.editSubscription(subId, {
+						cancelled: false,
+					})
+					await Promise.all([
+						queryClient.invalidateQueries({ queryKey: ['billing'] }),
+						queryClient.invalidateQueries({ queryKey: ['servers'] }),
+					])
+					if (wasSuspended) {
+						addNotification({
+							title: 'Resubscription request submitted',
+							text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+							type: 'success',
+						})
+					} else {
+						addNotification({
+							title: 'Success',
+							text: 'Server subscription resubscribed successfully',
+							type: 'success',
+						})
+					}
+				} catch {
+					addNotification({
+						title: 'Error resubscribing',
+						text: 'An error occurred while resubscribing to your Modrinth server.',
+						type: 'error',
+					})
+				}
+			}
+		}
+
+		map.set(serverId, info)
+	}
+
+	return map
+})
 </script>
 
 <style scoped>

packages/ui/src/stories/servers/ServerListing.stories.ts

@@ -78,12 +78,50 @@ export const SuspendedUpgrading: Story = {
 	},
 }
 
+export const Provisioning: Story = {
+	args: {
+		...baseServer,
+		name: 'My New Server',
+		status: 'installing',
+	},
+}
+
+export const SetToCancel: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+	},
+}
+
+export const SetToCancelWithResubscribe: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+	},
+}
+
 export const SuspendedCancelled: Story = {
 	args: {
 		...baseServer,
 		name: 'Old Event Server',
 		status: 'suspended',
 		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+	},
+}
+
+export const SuspendedCancelledWithActions: Story = {
+	args: {
+		...baseServer,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
 	},
 }