Fix creator balance showing as zero

modrinth · Sep 12, 2024 · 3d619e6 · 3d619e6
1 parent 0221034
commit 3d619e6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
@@ -88,20 +88,6 @@
               ></span
             >
           </div>
-          <div class="grid-display__item">
-            <div class="label">Current balance</div>
-            <div class="value">
-              {{ $formatMoney(auth.user.payout_data.balance, true) }}
-            </div>
-            <NuxtLink
-              v-if="auth.user.payout_data.balance > 0"
-              class="goto-link"
-              to="/dashboard/revenue"
-            >
-              Withdraw earnings
-              <ChevronRightIcon class="featured-header-chevron" aria-hidden="true" />
-            </NuxtLink>
-          </div>
         </div>
       </section>
     </div>

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -2,21 +2,24 @@
   <div>
     <section class="universal-card">
       <h2 class="text-2xl">Revenue</h2>
-      <div v-if="auth.user.payout_data.balance >= minWithdraw">
+      <div v-if="userBalance.available >= minWithdraw">
         <p>
           You have
-          <strong>{{ $formatMoney(auth.user.payout_data.balance) }}</strong>
-          available to withdraw.
+          <strong>{{ $formatMoney(userBalance.available) }}</strong>
+          available to withdraw. <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your
+          balance is <a class="text-link" href="#">pending</a>.
         </p>
       </div>
       <p v-else>
         You have made
-        <strong>{{ $formatMoney(auth.user.payout_data.balance) }}</strong
+        <strong>{{ $formatMoney(userBalance.available) }}</strong
         >, which is under the minimum of ${{ minWithdraw }} to withdraw.
+        <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your balance is
+        <a class="text-link" href="#">pending</a>.
       </p>
       <div class="input-group mt-4">
         <nuxt-link
-          v-if="auth.user.payout_data.balance >= minWithdraw"
+          v-if="userBalance.available >= minWithdraw"
           class="iconified-button brand-button"
           to="/dashboard/revenue/withdraw"
         >
@@ -81,6 +84,10 @@ import { TransferIcon, HistoryIcon, PayPalIcon, SaveIcon, XIcon } from "@modrint
 const auth = await useAuth();
 const minWithdraw = ref(0.01);
 
+const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
+  useBaseFetch(`payout/balance`, { apiVersion: 3 }),
+);
+
 async function updateVenmo() {
   startLoading();
   try {

diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -88,7 +88,7 @@
     <p>
       You are initiating a transfer of your revenue from Modrinth's Creator Monetization Program.
       How much of your
-      <strong>{{ $formatMoney(auth.user.payout_data.balance) }}</strong> balance would you like to
+      <strong>{{ $formatMoney(userBalance.available) }}</strong> balance would you like to transfer
       transfer to {{ selectedMethod.name }}?
     </p>
     <div class="confirmation-input">
@@ -212,10 +212,13 @@ const country = ref(
   countries.value.find((x) => x.id === (auth.value.user.payout_data.paypal_region ?? "US")),
 );
 
-const { data: payoutMethods, refresh: refreshPayoutMethods } = await useAsyncData(
-  `payout/methods?country=${country.value.id}`,
-  () => useBaseFetch(`payout/methods?country=${country.value.id}`, { apiVersion: 3 }),
-);
+const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMethods }] =
+  await Promise.all([
+    useAsyncData(`payout/balance`, () => useBaseFetch(`payout/balance`, { apiVersion: 3 })),
+    useAsyncData(`payout/methods?country=${country.value.id}`, () =>
+      useBaseFetch(`payout/methods?country=${country.value.id}`, { apiVersion: 3 }),
+    ),
+  ]);
 
 const selectedMethodId = ref(payoutMethods.value[0].id);
 const selectedMethod = computed(() =>
@@ -295,10 +298,10 @@ const knownErrors = computed(() => {
   if (!parsedAmount.value && amount.value.length > 0) {
     errors.push(`${amount.value} is not a valid amount`);
   } else if (
-    parsedAmount.value > auth.value.user.payout_data.balance ||
+    parsedAmount.value > userBalance.value.available ||
     parsedAmount.value > maxWithdrawAmount.value
   ) {
-    const maxAmount = Math.min(auth.value.user.payout_data.balance, maxWithdrawAmount.value);
+    const maxAmount = Math.min(userBalance.value.available, maxWithdrawAmount.value);
     errors.push(`The amount must be no more than ${data.$formatMoney(maxAmount)}`);
   } else if (parsedAmount.value <= fees.value || parsedAmount.value < minWithdrawAmount.value) {
     const minAmount = Math.max(fees.value + 0.01, minWithdrawAmount.value);

diff --git a/apps/frontend/src/public/promo-frame.html b/apps/frontend/src/public/promo-frame.html
@@ -64,9 +64,9 @@
     (event) => {
       if (event.data.modrinthOpenUrl && window.__TAURI_INTERNALS__ && lastUrl !== event.data.modrinthOpenUrl) {
         lastUrl = event.data.modrinthOpenUrl
-        window.__TAURI_INTERNALS__.invoke("plugin:shell|open", {
-          path: event.data.modrinthOpenUrl,
-        });
+        // window.__TAURI_INTERNALS__.invoke("plugin:shell|open", {
+        //   path: event.data.modrinthOpenUrl,
+        // });
 
         setTimeout(() => {
           lastUrl = null