From f3060cd9b44fd9dfd33965f7a59ca477cda2b915 Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Mon, 22 Sep 2025 17:36:50 +0100
Subject: [PATCH] feat: email template for subscription price changes due to
 tax (#4386)

* feat: subscription tax change email

* feat: wording

* feat: subscription id var for support & finalize tax change email script
---
 apps/frontend/src/emails/index.ts             |  3 ++
 .../src/emails/shared/StyledEmail.vue         | 13 +++++-
 .../templates/account/PaymentFailed.vue       |  1 +
 .../templates/account/PayoutAvailable.vue     |  2 +-
 .../account/SubscriptionTaxChange.vue         | 45 +++++++++++++++++++
 5 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/emails/templates/account/SubscriptionTaxChange.vue

diff --git a/apps/frontend/src/emails/index.ts b/apps/frontend/src/emails/index.ts
index d3ad463cd..adb355488 100644
--- a/apps/frontend/src/emails/index.ts
+++ b/apps/frontend/src/emails/index.ts
@@ -16,6 +16,9 @@ export default {
 	'payout-available': () => import('./templates/account/PayoutAvailable.vue'),
 	'personal-access-token-created': () => import('./templates/account/PATCreated.vue'),
 
+	// Subscriptions
+	'subscription-tax-change': () => import('./templates/account/SubscriptionTaxChange.vue'),
+
 	// Moderation
 	'report-submitted': () => import('./templates/moderation/ReportSubmitted.vue'),
 	'report-status-updated': () => import('./templates/moderation/ReportStatusUpdated.vue'),
diff --git a/apps/frontend/src/emails/shared/StyledEmail.vue b/apps/frontend/src/emails/shared/StyledEmail.vue
index 17ea10634..10cbc3e0e 100644
--- a/apps/frontend/src/emails/shared/StyledEmail.vue
+++ b/apps/frontend/src/emails/shared/StyledEmail.vue
@@ -17,6 +17,7 @@ import {
 defineProps<{
 	title?: string
 	manualLinks?: { link: string; label?: string }[]
+	supportInfo?: string[]
 }>()
 
 interface SocialLink {
@@ -211,9 +212,19 @@ const socialLinks = Object.freeze<readonly SocialLink[]>([
 
 					<hr />
 
+					<Section v-if="supportInfo && supportInfo.length" class="mb-0 pb-0 pl-4 pr-4 pt-0">
+						<Text
+							v-for="(line, index) in supportInfo"
+							:key="index"
+							class="text-footerText text-2xs font-sans"
+						>
+							{{ line }}
+						</Text>
+					</Section>
+
 					<Section
 						v-if="manualLinks && manualLinks.length"
-						class="text-footerText text-2xs mb-4 mt-4 pb-0 pl-4 pr-4 pt-0 font-sans"
+						class="text-footerText text-2xs mb-4 pb-0 pl-4 pr-4 pt-0 font-sans"
 					>
 						<small class="text-muted text-2xs"
 							>If you're having trouble with the links above, copy and paste these URLs into your
diff --git a/apps/frontend/src/emails/templates/account/PaymentFailed.vue b/apps/frontend/src/emails/templates/account/PaymentFailed.vue
index 1560cb2e9..3664e1d8a 100644
--- a/apps/frontend/src/emails/templates/account/PaymentFailed.vue
+++ b/apps/frontend/src/emails/templates/account/PaymentFailed.vue
@@ -8,6 +8,7 @@ import StyledEmail from '@/emails/shared/StyledEmail.vue'
 	<StyledEmail
 		title="Payment failed for {paymentfailed.service}"
 		:manual-links="[{ link: '{billing.url}', label: 'Billing settings' }]"
+		:support-info="['{subscription.id}']"
 	>
 		<Heading as="h1" class="mb-2 text-2xl font-bold">
 			Payment failed for {paymentfailed.service}
diff --git a/apps/frontend/src/emails/templates/account/PayoutAvailable.vue b/apps/frontend/src/emails/templates/account/PayoutAvailable.vue
index 1a2b79cc7..c386f490d 100644
--- a/apps/frontend/src/emails/templates/account/PayoutAvailable.vue
+++ b/apps/frontend/src/emails/templates/account/PayoutAvailable.vue
@@ -17,7 +17,7 @@ import StyledEmail from '@/emails/shared/StyledEmail.vue'
 		<Text class="text-base">Hi {user.name},</Text>
 
 		<Text class="text-base">
-			The ${payout.amount} earned during {payout.period} has been processed and is now available to
+			The {payout.amount} earned during {payout.period} has been processed and is now available to
 			withdraw from your account.
 		</Text>
 
diff --git a/apps/frontend/src/emails/templates/account/SubscriptionTaxChange.vue b/apps/frontend/src/emails/templates/account/SubscriptionTaxChange.vue
new file mode 100644
index 000000000..11d8e9466
--- /dev/null
+++ b/apps/frontend/src/emails/templates/account/SubscriptionTaxChange.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Price change for {taxnotification.service}"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+		:support-info="['{subscription.id}']"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">
+			Price change for {taxnotification.service}
+		</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			We're writing to let you know about an update to your {taxnotification.service} subscription.
+		</Text>
+
+		<Text class="text-muted text-base">
+			Your plan and rate are staying the same. The only change is that your region is now subject to
+			tax. Starting {taxnotification.due}, your next charge will include
+			{taxnotification.new_tax_amount} in tax.
+		</Text>
+
+		<Text class="text-muted text-base">
+			You do not need to take any action. This change will apply automatically on
+			{taxnotification.due}.
+		</Text>
+
+		<Text class="text-muted text-base">
+			Thank you for choosing Modrinth! If you have any questions or need help with your
+			subscription, reply to this email or visit our
+			<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink
+			>.
+		</Text>
+
+		<Text class="text-muted text-base">
+			Best,<br />
+			The Modrinth Team
+		</Text>
+	</StyledEmail>
+</template>