feat: dynamic tax thresholds from backend (#5342)

* feat: dynamic tax thresholds from backend

* fix: lint & i18n

apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
 import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { formatMoney } from '@modrinth/utils'
+import { computed } from 'vue'
 
+import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
 import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
+import { useGeneratedState } from '~/composables/generated'
 
 const { formatMessage } = useVIntl()
 
+const generatedState = useGeneratedState()
+const taxThreshold = computed(() => getTaxThreshold(generatedState.value?.taxComplianceThresholds))
+
 const modal = useTemplateRef('modal')
 
 const messages = defineMessages({
@@ -16,7 +23,7 @@ const messages = defineMessages({
 	description: {
 		id: 'layout.banner.tax.description',
 		defaultMessage:
-			"You've already withdrawn over $600 from Modrinth this year. To comply with tax regulations, you need to complete a tax form. Your withdrawals are paused until this form is submitted.",
+			"You've already withdrawn over {threshold} from Modrinth this year. To comply with tax regulations, you need to complete a tax form. Your withdrawals are paused until this form is submitted.",
 	},
 	action: {
 		id: 'layout.banner.tax.action',
@@ -38,7 +45,9 @@ function openTaxForm(e: MouseEvent) {
 			<span>{{ formatMessage(messages.title) }}</span>
 		</template>
 		<template #description>
-			<span>{{ formatMessage(messages.description) }}</span>
+			<span>{{
+				formatMessage(messages.description, { threshold: formatMoney(taxThreshold) })
+			}}</span>
 		</template>
 		<template #actions>
 			<ButtonStyled color="orange">