From 3872483794583c6defcaf48f982359a7c1113250 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 3 Oct 2025 17:40:11 +0100
Subject: [PATCH 1/5] feat: start on fix

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |  1 +
 .../src/pages/dashboard/revenue/withdraw.vue  | 56 +++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index cd430a24a7..8d3a439d54 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -239,6 +239,7 @@ async function continueForm() {
 		}
 	} catch (error) {
 		console.error('Error occurred while continuing tax form:', error)
+		handleCancel()
 	} finally {
 		manualLoading.value = false
 	}
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 9401ad9db3..c544021ec0 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -1,4 +1,9 @@
 <template>
+	<CreatorTaxFormModal
+		ref="taxFormModalRef"
+		@success="onTaxFormSuccess"
+		@cancelled="onTaxFormCancelled"
+	/>
 	<section class="universal-card">
 		<Breadcrumbs
 			current-title="Withdraw"
@@ -135,6 +140,10 @@
 			</template>
 		</div>
 
+		<p v-if="willTriggerTaxForm" class="font-bold text-orange">
+			This withdrawal will exceed $600 for the year. You will be prompted to complete a tax form before proceeding.
+		</p>
+
 		<p v-if="blockedByTax" class="font-bold text-orange">
 			You have withdrawn over $600 this year. To continue withdrawing, you must complete a tax form.
 		</p>
@@ -207,6 +216,7 @@ import { all } from 'iso-3166-1'
 import { Multiselect } from 'vue-multiselect'
 
 import VenmoIcon from '~/assets/images/external/venmo.svg?component'
+import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
 
 const { addNotification } = injectNotificationManager()
 const auth = await useAuth()
@@ -334,6 +344,13 @@ const blockedByTax = computed(() => {
 	return thresholdMet && status !== 'complete'
 })
 
+const willTriggerTaxForm = computed(() => {
+	const status = userBalance.value?.form_completion_status ?? 'unknown'
+	const currentWithdrawn = userBalance.value?.withdrawn_ytd ?? 0
+	const wouldExceedThreshold = currentWithdrawn + parsedAmount.value >= 600
+	return wouldExceedThreshold && status !== 'complete' && !blockedByTax.value
+})
+
 watch(country, async () => {
 	await refreshPayoutMethods()
 	if (payoutMethods.value && payoutMethods.value[0]) {
@@ -353,7 +370,19 @@ watch(selectedMethod, () => {
 	agreedTerms.value = false
 })
 
+const taxFormModalRef = ref(null)
+const taxFormCancelled = ref(false)
+
 async function withdraw() {
+	// Check if withdrawal will trigger tax form
+	if (willTriggerTaxForm.value) {
+		taxFormCancelled.value = false
+		if (taxFormModalRef.value && taxFormModalRef.value.startTaxForm) {
+			await taxFormModalRef.value.startTaxForm(new MouseEvent('click'))
+		}
+		return
+	}
+
 	startLoading()
 	try {
 		const auth = await useAuth()
@@ -386,6 +415,33 @@ async function withdraw() {
 	}
 	stopLoading()
 }
+
+async function onTaxFormSuccess() {
+	// Refresh user balance to get updated form completion status
+	const updatedBalance = await useBaseFetch(`payout/balance`, { apiVersion: 3 })
+	userBalance.value = updatedBalance
+
+	// Check if the form was actually completed
+	if (updatedBalance?.form_completion_status === 'complete') {
+		// Now proceed with the withdrawal
+		await withdraw()
+	} else {
+		addNotification({
+			title: 'Tax form incomplete',
+			text: 'You must complete a tax form for this withdrawal.',
+			type: 'error',
+		})
+	}
+}
+
+function onTaxFormCancelled() {
+	taxFormCancelled.value = true
+	addNotification({
+		title: 'Withdrawal canceled',
+		text: 'You must complete a tax form for this withdrawal.',
+		type: 'error',
+	})
+}
 </script>
 
 <style lang="scss" scoped>

From 1515a4bc0d78b6e30565deb63052f6e414fa9dc0 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 3 Oct 2025 18:30:22 +0100
Subject: [PATCH 2/5] fix: withdraw btn

---
 .../src/pages/dashboard/revenue/index.vue     | 54 +++++++++----------
 .../src/pages/dashboard/revenue/withdraw.vue  | 14 ++++-
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 110146423b..69ef43016c 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -68,25 +68,17 @@
 				</div>
 			</div>
 			<div class="input-group mt-4">
-				<span
-					:class="{
-						'disabled-cursor-wrapper': userBalance.available < minWithdraw || blockedByTax,
-					}"
-				>
-					<ButtonStyled color="brand">
-						<nuxt-link
-							:aria-disabled="
-								userBalance.available < minWithdraw || blockedByTax ? 'true' : 'false'
-							"
-							:class="{ 'disabled-link': userBalance.available < minWithdraw || blockedByTax }"
-							:disabled="!!(userBalance.available < minWithdraw || blockedByTax) || null"
-							:tabindex="userBalance.available < minWithdraw || blockedByTax ? -1 : undefined"
-							to="/dashboard/revenue/withdraw"
-						>
-							<TransferIcon /> Withdraw
-						</nuxt-link>
-					</ButtonStyled>
-				</span>
+				<ButtonStyled color="brand">
+					<nuxt-link
+						v-if="!(userBalance.available < minWithdraw || blockedByTax)"
+						to="/dashboard/revenue/withdraw"
+					>
+						<TransferIcon /> Withdraw
+					</nuxt-link>
+					<span v-else class="disabled">
+						<TransferIcon /> Withdraw
+					</span>
+				</ButtonStyled>
 				<ButtonStyled>
 					<NuxtLink to="/dashboard/revenue/transfers">
 						<HistoryIcon />
@@ -176,9 +168,19 @@ const { addNotification, handleError } = injectNotificationManager()
 const auth = await useAuth()
 const minWithdraw = ref(0.01)
 
-const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
-	useBaseFetch(`payout/balance`, { apiVersion: 3 }),
-)
+const { data: userBalance } = await useAsyncData(`payout/balance`, async () => {
+	const response = await useBaseFetch(`payout/balance`, { apiVersion: 3 })
+	return {
+		...response,
+		available: parseFloat(response.available),
+		withdrawn_lifetime: parseFloat(response.withdrawn_lifetime),
+		withdrawn_ytd: parseFloat(response.withdrawn_ytd),
+		pending: parseFloat(response.pending),
+		dates: Object.fromEntries(
+			Object.entries(response.dates).map(([date, value]) => [date, parseFloat(value)]),
+		),
+	}
+})
 
 const blockedByTax = computed(() => {
 	const status = userBalance.value?.form_completion_status ?? 'unknown'
@@ -250,14 +252,6 @@ strong {
 	font-weight: 500;
 }
 
-.disabled-cursor-wrapper {
-	cursor: not-allowed;
-}
-
-.disabled-link {
-	pointer-events: none;
-}
-
 .grid-display {
 	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index c544021ec0..7fced43f1d 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -237,7 +237,19 @@ const country = ref(
 
 const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMethods }] =
 	await Promise.all([
-		useAsyncData(`payout/balance`, () => useBaseFetch(`payout/balance`, { apiVersion: 3 })),
+		useAsyncData(`payout/balance`, async () => {
+			const response = await useBaseFetch(`payout/balance`, { apiVersion: 3 })
+			return {
+				...response,
+				available: parseFloat(response.available),
+				withdrawn_lifetime: parseFloat(response.withdrawn_lifetime),
+				withdrawn_ytd: parseFloat(response.withdrawn_ytd),
+				pending: parseFloat(response.pending),
+				dates: Object.fromEntries(
+					Object.entries(response.dates).map(([date, value]) => [date, parseFloat(value)]),
+				),
+			}
+		}),
 		useAsyncData(`payout/methods?country=${country.value.id}`, () =>
 			useBaseFetch(`payout/methods?country=${country.value.id}`, { apiVersion: 3 }),
 		),

From ff772a14917b128bc6adb06e962dc83dd6b1e3a9 Mon Sep 17 00:00:00 2001
From: --global <--global>
Date: Tue, 7 Oct 2025 10:09:52 +0100
Subject: [PATCH 3/5] fix: lint issues

---
 apps/frontend/src/pages/dashboard/revenue/index.vue    | 4 +---
 apps/frontend/src/pages/dashboard/revenue/withdraw.vue | 6 ++----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 69ef43016c..d4ff53184d 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -75,9 +75,7 @@
 					>
 						<TransferIcon /> Withdraw
 					</nuxt-link>
-					<span v-else class="disabled">
-						<TransferIcon /> Withdraw
-					</span>
+					<span v-else class="disabled"> <TransferIcon /> Withdraw </span>
 				</ButtonStyled>
 				<ButtonStyled>
 					<NuxtLink to="/dashboard/revenue/transfers">
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 7fced43f1d..a8ad00323a 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -141,7 +141,8 @@
 		</div>
 
 		<p v-if="willTriggerTaxForm" class="font-bold text-orange">
-			This withdrawal will exceed $600 for the year. You will be prompted to complete a tax form before proceeding.
+			This withdrawal will exceed $600 for the year. You will be prompted to complete a tax form
+			before proceeding.
 		</p>
 
 		<p v-if="blockedByTax" class="font-bold text-orange">
@@ -386,7 +387,6 @@ const taxFormModalRef = ref(null)
 const taxFormCancelled = ref(false)
 
 async function withdraw() {
-	// Check if withdrawal will trigger tax form
 	if (willTriggerTaxForm.value) {
 		taxFormCancelled.value = false
 		if (taxFormModalRef.value && taxFormModalRef.value.startTaxForm) {
@@ -433,9 +433,7 @@ async function onTaxFormSuccess() {
 	const updatedBalance = await useBaseFetch(`payout/balance`, { apiVersion: 3 })
 	userBalance.value = updatedBalance
 
-	// Check if the form was actually completed
 	if (updatedBalance?.form_completion_status === 'complete') {
-		// Now proceed with the withdrawal
 		await withdraw()
 	} else {
 		addNotification({

From fd74c94a0857f7e4ecab8e828a4d31b305a47cae Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 7 Oct 2025 10:37:52 +0100
Subject: [PATCH 4/5] fix: use button rather than span

---
 .../src/pages/dashboard/revenue/index.vue     | 59 ++++++-------------
 1 file changed, 18 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index d4ff53184d..8f74ae1a96 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -12,11 +12,8 @@
 				<div class="grid-display__item">
 					<div class="label">
 						Total pending
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
+						<nuxt-link v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link" to="/legal/cmp-info#pending">
 							<UnknownIcon />
 						</nuxt-link>
 					</div>
@@ -27,36 +24,23 @@
 				<div class="grid-display__item">
 					<h3 class="label m-0">
 						Available soon
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
+						<nuxt-link v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link" to="/legal/cmp-info#pending">
 							<UnknownIcon />
 						</nuxt-link>
 					</h3>
 					<ul class="m-0 list-none p-0">
-						<li
-							v-for="date in availableSoonDateKeys"
-							:key="date"
-							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
-						>
-							<span
-								v-tooltip="
-									availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
-										? `Revenue period is ongoing. \nThis amount is not yet finalized.`
-										: null
-								"
-								:class="{
+						<li v-for="date in availableSoonDateKeys" :key="date"
+							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1">
+							<span v-tooltip="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
+									? `Revenue period is ongoing. \nThis amount is not yet finalized.`
+									: null
+								" :class="{
 									'cursor-help':
 										availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
-								}"
-								class="inline-flex items-center gap-1 font-bold"
-							>
+								}" class="inline-flex items-center gap-1 font-bold">
 								{{ $formatMoney(availableSoonDates[date]) }}
-								<template
-									v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
-								>
+								<template v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1">
 									<InProgressIcon />
 								</template>
 							</span>
@@ -69,13 +53,12 @@
 			</div>
 			<div class="input-group mt-4">
 				<ButtonStyled color="brand">
-					<nuxt-link
-						v-if="!(userBalance.available < minWithdraw || blockedByTax)"
-						to="/dashboard/revenue/withdraw"
-					>
+					<nuxt-link v-if="!(userBalance.available < minWithdraw || blockedByTax)" to="/dashboard/revenue/withdraw">
 						<TransferIcon /> Withdraw
 					</nuxt-link>
-					<span v-else class="disabled"> <TransferIcon /> Withdraw </span>
+					<button v-else class="disabled">
+						<TransferIcon /> Withdraw
+					</button>
 				</ButtonStyled>
 				<ButtonStyled>
 					<NuxtLink to="/dashboard/revenue/transfers">
@@ -128,14 +111,8 @@
 			<h3>Venmo</h3>
 			<p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
 			<label class="hidden" for="venmo">Venmo address</label>
-			<input
-				id="venmo"
-				v-model="auth.user.payout_data.venmo_handle"
-				autocomplete="off"
-				name="search"
-				placeholder="@example"
-				type="search"
-			/>
+			<input id="venmo" v-model="auth.user.payout_data.venmo_handle" autocomplete="off" name="search"
+				placeholder="@example" type="search" />
 			<ButtonStyled color="brand">
 				<button class="mt-4" @click="updateVenmo">
 					<SaveIcon />

From 88dfcdabcd3016f379cb59041e02e4e3b098c792 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 7 Oct 2025 12:39:01 +0100
Subject: [PATCH 5/5] fix: lint issues

---
 .../src/pages/dashboard/revenue/index.vue     | 59 +++++++++++++------
 1 file changed, 41 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 8f74ae1a96..f85873b967 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -12,8 +12,11 @@
 				<div class="grid-display__item">
 					<div class="label">
 						Total pending
-						<nuxt-link v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link" to="/legal/cmp-info#pending">
+						<nuxt-link
+							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link"
+							to="/legal/cmp-info#pending"
+						>
 							<UnknownIcon />
 						</nuxt-link>
 					</div>
@@ -24,23 +27,36 @@
 				<div class="grid-display__item">
 					<h3 class="label m-0">
 						Available soon
-						<nuxt-link v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link" to="/legal/cmp-info#pending">
+						<nuxt-link
+							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link"
+							to="/legal/cmp-info#pending"
+						>
 							<UnknownIcon />
 						</nuxt-link>
 					</h3>
 					<ul class="m-0 list-none p-0">
-						<li v-for="date in availableSoonDateKeys" :key="date"
-							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1">
-							<span v-tooltip="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
-									? `Revenue period is ongoing. \nThis amount is not yet finalized.`
-									: null
-								" :class="{
+						<li
+							v-for="date in availableSoonDateKeys"
+							:key="date"
+							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
+						>
+							<span
+								v-tooltip="
+									availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
+										? `Revenue period is ongoing. \nThis amount is not yet finalized.`
+										: null
+								"
+								:class="{
 									'cursor-help':
 										availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
-								}" class="inline-flex items-center gap-1 font-bold">
+								}"
+								class="inline-flex items-center gap-1 font-bold"
+							>
 								{{ $formatMoney(availableSoonDates[date]) }}
-								<template v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1">
+								<template
+									v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
+								>
 									<InProgressIcon />
 								</template>
 							</span>
@@ -53,12 +69,13 @@
 			</div>
 			<div class="input-group mt-4">
 				<ButtonStyled color="brand">
-					<nuxt-link v-if="!(userBalance.available < minWithdraw || blockedByTax)" to="/dashboard/revenue/withdraw">
+					<nuxt-link
+						v-if="!(userBalance.available < minWithdraw || blockedByTax)"
+						to="/dashboard/revenue/withdraw"
+					>
 						<TransferIcon /> Withdraw
 					</nuxt-link>
-					<button v-else class="disabled">
-						<TransferIcon /> Withdraw
-					</button>
+					<button v-else class="disabled"><TransferIcon /> Withdraw</button>
 				</ButtonStyled>
 				<ButtonStyled>
 					<NuxtLink to="/dashboard/revenue/transfers">
@@ -111,8 +128,14 @@
 			<h3>Venmo</h3>
 			<p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
 			<label class="hidden" for="venmo">Venmo address</label>
-			<input id="venmo" v-model="auth.user.payout_data.venmo_handle" autocomplete="off" name="search"
-				placeholder="@example" type="search" />
+			<input
+				id="venmo"
+				v-model="auth.user.payout_data.venmo_handle"
+				autocomplete="off"
+				name="search"
+				placeholder="@example"
+				type="search"
+			/>
 			<ButtonStyled color="brand">
 				<button class="mt-4" @click="updateVenmo">
 					<SaveIcon />