Credit subscriptions (#4575)

* Implement subscription crediting * chore: query cache, clippy, fmt * Improve code, improve query for next open charge * chore: query cache, clippy, fmt * Move server ID copy button up * Node + region crediting * Make it less ugly * chore: query cache, clippy, fmt * Bugfixes * Fix lint * Adjust migration * Adjust migration * Remove billing change * Move DEFAULT_CREDIT_EMAIL_MESSAGE to utils.ts * Lint * Merge * bump clickhouse, disable validation * tombi fmt * Update cargo lock
2025-10-20 18:35:44 +01:00
parent 79502a19d6
commit eeed4e572d
22 changed files with 1052 additions and 8 deletions
--- a/apps/frontend/src/composables/servers/servers-fetch.ts
+++ b/apps/frontend/src/composables/servers/servers-fetch.ts
@@ -6,7 +6,7 @@ export interface ServersFetchOptions {
 	method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
 	contentType?: string
 	body?: Record<string, any>
-	version?: number
+	version?: number | 'internal'
 	override?: {
 		url?: string
 		token?: string
@@ -82,7 +82,9 @@ export async function useServersFetch<T>(
 		? `https://${newOverrideUrl}/${path.replace(/^\//, '')}`
 		: version === 0
 			? `${base}/modrinth/v${version}/${path.replace(/^\//, '')}`
-			: `${base}/v${version}/${path.replace(/^\//, '')}`
+			: version === 'internal'
+				? `${base}/_internal/${path.replace(/^\//, '')}`
+				: `${base}/modrinth/v${version}/${path.replace(/^\//, '')}`

 	const headers: Record<string, string> = {
 		'User-Agent': 'Modrinth/1.0 (https://modrinth.com)',
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -461,6 +461,12 @@
 								link: '/admin/servers/notices',
 								shown: isAdmin(auth.user),
 							},
+							{
+								id: 'servers-nodes',
+								color: 'primary',
+								link: '/admin/servers/nodes',
+								shown: isAdmin(auth.user),
+							},
 						]"
 					>
 						<ModrinthIcon aria-hidden="true" />
@@ -480,6 +486,7 @@
 						<template #servers-notices>
 							<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
 						</template>
+						<template #servers-nodes> <ServerIcon aria-hidden="true" /> Server Nodes </template>
 					</OverflowMenu>
 				</ButtonStyled>
 				<ButtonStyled type="transparent">
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -97,6 +97,41 @@
 			</div>
 		</div>
 	</NewModal>
+	<NewModal ref="creditModal">
+		<template #title>
+			<span class="text-lg font-extrabold text-contrast">Credit subscription</span>
+		</template>
+		<div class="flex flex-col gap-3">
+			<div class="flex flex-col gap-2">
+				<label for="days" class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast">Days to credit</span>
+					<span>Enter the number of days to add to the next due date.</span>
+				</label>
+				<input id="days" v-model.number="creditDays" type="number" min="1" autocomplete="off" />
+			</div>
+			<div class="flex flex-col gap-2">
+				<label for="sendEmail" class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast">Send email to user</span>
+					<span>Notify the user about the credited days.</span>
+				</label>
+				<Toggle id="sendEmail" v-model="creditSendEmail" />
+			</div>
+			<div class="flex gap-2">
+				<ButtonStyled color="brand">
+					<button :disabled="crediting" @click="applyCredit">
+						<CheckIcon aria-hidden="true" />
+						Apply credit
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="creditModal.hide()">
+						<XIcon aria-hidden="true" />
+						Cancel
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
 	<div class="page experimental-styles-within">
 		<div
 			class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
@@ -140,6 +175,7 @@
 						</div>
 					</div>
 					<div v-if="subscription.metadata?.id" class="flex flex-col items-end gap-2">
+						<CopyCode :text="subscription.metadata.id" />
 						<ButtonStyled
 							v-if="
 								subscription.metadata?.type === 'pyro' || subscription.metadata?.type === 'medal'
@@ -153,7 +189,12 @@
 								<ServerIcon /> Server panel <ExternalIcon class="h-4 w-4" />
 							</nuxt-link>
 						</ButtonStyled>
-						<CopyCode :text="subscription.metadata.id" />
+						<ButtonStyled>
+							<button @click="showCreditModal(subscription)">
+								<CurrencyIcon />
+								Credit
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div class="flex flex-col gap-2">
@@ -292,6 +333,7 @@ import {
 	useRelativeTime,
 } from '@modrinth/ui'
 import { formatCategory, formatPrice } from '@modrinth/utils'
+import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import dayjs from 'dayjs'

 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
@@ -370,6 +412,11 @@ const modifying = ref(false)
 const modifyModal = ref()
 const cancel = ref(false)

+const crediting = ref(false)
+const creditModal = ref()
+const creditDays = ref(7)
+const creditSendEmail = ref(true)
+
 function showRefundModal(charge) {
 	selectedCharge.value = charge
 	refundType.value = 'full'
@@ -385,6 +432,44 @@ function showModifyModal(charge, subscription) {
 	modifyModal.value.show()
 }

+function showCreditModal(subscription) {
+	selectedSubscription.value = subscription
+	creditDays.value = 1
+	creditSendEmail.value = true
+	creditModal.value.show()
+}
+
+async function applyCredit() {
+	crediting.value = true
+	try {
+		const daysParsed = Math.max(1, Math.floor(Number(creditDays.value) || 1))
+		await useBaseFetch('billing/credit', {
+			method: 'POST',
+			body: JSON.stringify({
+				subscription_ids: [selectedSubscription.value.id],
+				days: daysParsed,
+				send_email: creditSendEmail.value,
+				message: DEFAULT_CREDIT_EMAIL_MESSAGE,
+			}),
+			internal: true,
+		})
+		addNotification({
+			title: 'Credit applied',
+			text: 'The subscription due date has been updated.',
+			type: 'success',
+		})
+		await refreshCharges()
+		creditModal.value.hide()
+	} catch (err) {
+		addNotification({
+			title: 'Error applying credit',
+			text: err.data?.description ?? String(err),
+			type: 'error',
+		})
+	}
+	crediting.value = false
+}
+
 async function refundCharge() {
 	refunding.value = true
 	try {
--- a/apps/frontend/src/pages/admin/servers/nodes.vue
+++ b/apps/frontend/src/pages/admin/servers/nodes.vue
@@ -0,0 +1,277 @@
+<template>
+	<div class="page experimental-styles-within">
+		<div
+			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
+		>
+			<h1 class="m-0 text-2xl">Server nodes</h1>
+			<ButtonStyled color="brand">
+				<button @click="openBatchModal"><PlusIcon /> Batch credit</button>
+			</ButtonStyled>
+		</div>
+
+		<NewModal ref="batchModal">
+			<template #title>
+				<span class="text-lg font-extrabold text-contrast">Batch credit</span>
+			</template>
+			<div class="flex w-[720px] max-w-[90vw] flex-col gap-6">
+				<div class="flex flex-col gap-2">
+					<label class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Type </span>
+						<span>Select target to credit.</span>
+					</label>
+					<TeleportDropdownMenu
+						v-model="mode"
+						:options="modeOptions"
+						:display-name="(x) => x.name"
+						name="Type"
+						class="max-w-[8rem]"
+					/>
+				</div>
+				<div class="flex flex-col gap-2">
+					<label for="days" class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Days to credit </span>
+					</label>
+					<input
+						id="days"
+						v-model.number="days"
+						class="w-32"
+						type="number"
+						min="1"
+						autocomplete="off"
+					/>
+				</div>
+
+				<div v-if="mode.id === 'nodes'" class="flex flex-col gap-3">
+					<div class="flex flex-col gap-2">
+						<label for="node-input" class="flex flex-col gap-1">
+							<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
+						</label>
+						<div class="flex items-center gap-2">
+							<input
+								id="node-input"
+								v-model="nodeInput"
+								class="w-32"
+								type="text"
+								autocomplete="off"
+							/>
+							<ButtonStyled color="blue" color-fill="text">
+								<button class="shrink-0" @click="addNode">
+									<PlusIcon />
+									Add
+								</button>
+							</ButtonStyled>
+						</div>
+						<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
+							<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
+								<XIcon />
+								{{ h }}
+							</TagItem>
+						</div>
+					</div>
+				</div>
+
+				<div v-else class="flex flex-col gap-3">
+					<div class="flex flex-col gap-2">
+						<label for="region-select" class="flex flex-col gap-1">
+							<span class="text-lg font-semibold text-contrast"> Region </span>
+							<span>This will credit all active servers in the region.</span>
+						</label>
+						<TeleportDropdownMenu
+							id="region-select"
+							v-model="selectedRegion"
+							:options="regions"
+							:display-name="(x) => x.display"
+							name="Region"
+							class="max-w-[24rem]"
+						/>
+					</div>
+				</div>
+
+				<div class="between flex items-center gap-4">
+					<label for="send-email-nodes" class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Send email </span>
+					</label>
+					<Toggle id="send-email-nodes" v-model="sendEmail" />
+				</div>
+
+				<div v-if="sendEmail" class="flex flex-col gap-2">
+					<label for="message-region" class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Customize Email </span>
+						<span>
+							Unless a particularly bad or out of the ordinary event happened, keep this to the
+							default
+						</span>
+					</label>
+					<div class="text-muted rounded-lg border border-divider bg-button-bg p-4">
+						<p>Hi {user.name},</p>
+						<div class="textarea-wrapper">
+							<textarea
+								id="message-region"
+								v-model="message"
+								rows="3"
+								class="w-full overflow-hidden"
+							/>
+						</div>
+						<p>
+							To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
+							Servers subscription.
+						</p>
+						<p>
+							Your next charge was scheduled for {credit.previous_due} and will now be on
+							{credit.next_due}.
+						</p>
+					</div>
+				</div>
+
+				<div class="flex gap-2">
+					<ButtonStyled color="brand">
+						<button :disabled="applyDisabled" @click="apply">
+							<CheckIcon aria-hidden="true" />
+							Apply credits
+						</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="batchModal?.hide?.()">
+							<XIcon aria-hidden="true" />
+							Cancel
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</NewModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	injectNotificationManager,
+	NewModal,
+	TagItem,
+	TeleportDropdownMenu,
+	Toggle,
+} from '@modrinth/ui'
+import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
+import { computed, ref } from 'vue'
+
+import { useBaseFetch } from '#imports'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+
+const { addNotification } = injectNotificationManager()
+
+const batchModal = ref<InstanceType<typeof NewModal>>()
+
+const days = ref(1)
+const sendEmail = ref(true)
+const message = ref('')
+
+const modeOptions = [
+	{ id: 'nodes', name: 'Nodes' },
+	{ id: 'region', name: 'Region' },
+]
+const mode = ref(modeOptions[0])
+
+const nodeInput = ref('')
+const selectedNodes = ref<string[]>([])
+
+type RegionOpt = { key: string; display: string }
+const regions = ref<RegionOpt[]>([])
+const selectedRegion = ref<RegionOpt | null>(null)
+const nodeHostnames = ref<string[]>([])
+
+function openBatchModal() {
+	void ensureOverview()
+
+	message.value = DEFAULT_CREDIT_EMAIL_MESSAGE
+	batchModal.value?.show()
+}
+
+function addNode() {
+	const v = nodeInput.value.trim()
+	if (!v) return
+	if (!nodeHostnames.value.includes(v)) {
+		addNotification({
+			title: 'Unknown node',
+			text: "This hostname doesn't exist",
+			type: 'error',
+		})
+		return
+	}
+	if (!selectedNodes.value.includes(v)) selectedNodes.value.push(v)
+	nodeInput.value = ''
+}
+
+function removeNode(v: string) {
+	selectedNodes.value = selectedNodes.value.filter((x) => x !== v)
+}
+
+const applyDisabled = computed(() => {
+	if (days.value < 1) return true
+	if (mode.value.id === 'nodes') return selectedNodes.value.length === 0
+	return !selectedRegion.value
+})
+
+async function ensureOverview() {
+	if (regions.value.length || nodeHostnames.value.length) return
+	try {
+		const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
+		regions.value = (data.regions || []).map((r: any) => ({
+			key: r.key,
+			display: `${r.display_name} (${r.key})`,
+		}))
+		nodeHostnames.value = data.node_hostnames || []
+		if (!selectedRegion.value && regions.value.length) selectedRegion.value = regions.value[0]
+	} catch (err) {
+		addNotification({ title: 'Failed to load nodes overview', text: String(err), type: 'error' })
+	}
+}
+
+async function apply() {
+	try {
+		const body =
+			mode.value.id === 'nodes'
+				? {
+						nodes: selectedNodes.value.slice(),
+						days: Math.max(1, Math.floor(days.value)),
+						send_email: sendEmail.value,
+						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
+					}
+				: {
+						region: selectedRegion.value!.key,
+						days: Math.max(1, Math.floor(days.value)),
+						send_email: sendEmail.value,
+						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
+					}
+		await useBaseFetch('billing/credit', {
+			method: 'POST',
+			body: JSON.stringify(body),
+			internal: true,
+		})
+		addNotification({ title: 'Credits applied', type: 'success' })
+		batchModal.value?.hide()
+		selectedNodes.value = []
+		nodeInput.value = ''
+		message.value = ''
+	} catch (err: any) {
+		addNotification({
+			title: 'Error applying credits',
+			text: err?.data?.description ?? String(err),
+			type: 'error',
+		})
+	}
+}
+
+function pluralize(n: number): string {
+	return n === 1 ? '' : 's'
+}
+</script>
+
+<style scoped>
+.page {
+	padding: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 56rem;
+}
+</style>
--- a/apps/frontend/src/templates/emails/account/SubscriptionCredited.vue
+++ b/apps/frontend/src/templates/emails/account/SubscriptionCredited.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Heading, Text } from '@vue-email/components'
+
+import StyledEmail from '../shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail title="We’ve added time to your server">
+		<Heading as="h1" class="mb-2 text-2xl font-bold">We’ve added time to your server</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">{credit.header_message}</Text>
+
+		<Text class="text-muted text-base">
+			To make up for it, we've added {credit.days_formatted} to your {credit.subscription.type}
+			subscription.
+		</Text>
+		<Text class="text-muted text-base">
+			Your next charge was scheduled for {credit.previous_due} and will now be on {credit.next_due}.
+		</Text>
+
+		<Text class="text-muted text-base">Thank you for supporting us,</Text>
+		<Text class="text-muted text-base">The Modrinth Team</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/templates/emails/index.ts
+++ b/apps/frontend/src/templates/emails/index.ts
@@ -18,6 +18,7 @@ export default {

 	// Subscriptions
 	'subscription-tax-change': () => import('./account/SubscriptionTaxChange.vue'),
+	'subscription-credited': () => import('./account/SubscriptionCredited.vue'),

 	// Moderation
 	'report-submitted': () => import('./moderation/ReportSubmitted.vue'),