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

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 {