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/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 @@
+ This withdrawal will exceed $600 for the year. You will be prompted to complete a tax form before proceeding. +
+You have withdrawn over $600 this year. To continue withdrawing, you must complete a tax form.
@@ -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() @@ -227,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 }), ), @@ -334,6 +356,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 +382,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 +427,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', + }) +}