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

Author: IMB11

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'),

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

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}

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>
 

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>