From 013ddbc57f309def28f15ca104ae5ae38f32584f Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Fri, 29 Sep 2023 15:18:48 +0300
Subject: [PATCH] web/satellite: fixed balance inconsistency for billing tabs

Made overview tab always fetch account balance on mount.
Made payment methods tab always fetch wallet (which includes wallet balance) on mount.
Account and Wallet balances are queried from transactionsDB so there is no inconsistency on backend side.

Issue:
https://github.com/storj/storj/issues/6093

Change-Id: Ifb63d20040acf03d60ad08eac51b0f20b5b7365d
---
 .../account/billing/BillingArea.vue           | 21 ++-----------------
 .../account/billing/billingTabs/Overview.vue  |  5 ++++-
 .../billing/billingTabs/PaymentMethods.vue    | 16 +++++++++++++-
 .../paymentMethods/AddTokenCardNative.vue     | 21 +++++--------------
 4 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
index 9c53c0459..51d5477a3 100644
--- a/web/satellite/src/components/account/billing/BillingArea.vue
+++ b/web/satellite/src/components/account/billing/BillingArea.vue
@@ -40,21 +40,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { RouteConfig } from '@/types/router';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 import { NavigationLink } from '@/types/navigation';
 import { useNotify } from '@/utils/hooks';
-import { useBillingStore } from '@/store/modules/billingStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
-const billingStore = useBillingStore();
+
 const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
@@ -141,21 +139,6 @@ function routeToCoupons(): void {
         router.push(couponsPath);
     }
 }
-
-/**
- * Mounted lifecycle hook after initial render.
- * Fetches account balance and credit cards.
- */
-onMounted(async (): Promise<void> => {
-    try {
-        await Promise.all([
-            billingStore.getBalance(),
-            billingStore.getCreditCards(),
-        ]);
-    } catch (error) {
-        notify.notifyError(error, AnalyticsErrorEventSource.BILLING_AREA);
-    }
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/web/satellite/src/components/account/billing/billingTabs/Overview.vue b/web/satellite/src/components/account/billing/billingTabs/Overview.vue
index cac370e7c..c27b690d4 100644
--- a/web/satellite/src/components/account/billing/billingTabs/Overview.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/Overview.vue
@@ -178,7 +178,10 @@ function balanceClicked(): void {
  */
 onMounted(async () => {
     try {
-        await projectsStore.getProjects();
+        await Promise.all([
+            projectsStore.getProjects(),
+            billingStore.getBalance(),
+        ]);
     } catch (error) {
         notify.notifyError(error, AnalyticsErrorEventSource.BILLING_OVERVIEW_TAB);
         isDataFetching.value = false;
diff --git a/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue b/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
index ca1fc82e5..f010cd036 100644
--- a/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
@@ -14,6 +14,7 @@
             />
             <add-token-card-native
                 v-else-if="nativeTokenPaymentsEnabled"
+                :parent-init-loading="parentInitLoading"
                 @showTransactions="showTransactionsTable"
             />
             <add-token-card
@@ -196,6 +197,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useCreateProjectClickHandler } from '@/composables/useCreateProjectClickHandler';
+import { useLoading } from '@/composables/useLoading';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -235,6 +237,7 @@ const appStore = useAppStore();
 const projectsStore = useProjectsStore();
 
 const { handleCreateProjectClick } = useCreateProjectClickHandler();
+const { isLoading: parentInitLoading, withLoading } = useLoading();
 const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
@@ -479,12 +482,23 @@ function paginationController(page: number, limit: number): void {
     displayedHistory.value = nativePaymentHistoryItems.value.slice((page - 1) * limit, ((page - 1) * limit) + limit);
 }
 
-onMounted((): void => {
+onMounted(async (): Promise<void> => {
     defaultCreditCardSelection.value = creditCards.value.find(c => c.isDefault)?.id ?? '';
 
     if (route.query.action === 'token history') {
         showTransactionsTable();
     }
+
+    await withLoading(async () => {
+        try {
+            await Promise.all([
+                billingStore.getWallet(),
+                billingStore.getCreditCards(),
+            ]);
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
+        }
+    });
 });
 </script>
 
diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
index e7d2657e7..77610204f 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
@@ -10,7 +10,7 @@
         </div>
 
         <div class="token__content">
-            <div v-if="isLoading" class="token__content__loader-container">
+            <div v-if="isLoading || parentInitLoading" class="token__content__loader-container">
                 <v-loader />
             </div>
             <div v-else-if="!wallet.address" class="token__content__add-funds">
@@ -119,6 +119,10 @@ const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
 
+const props = defineProps<{
+    parentInitLoading: boolean
+}>();
+
 const isLoading = ref<boolean>(false);
 
 /**
@@ -135,19 +139,6 @@ const wallet = computed((): Wallet => {
     return billingStore.state.wallet as Wallet;
 });
 
-/**
- * getWallet tries to get an existing wallet for this user. this will not claim a wallet.
- */
-async function getWallet(): Promise<void> {
-    if (wallet.value.address) {
-        return;
-    }
-
-    isLoading.value = true;
-    await billingStore.getWallet().catch(_ => {});
-    isLoading.value = false;
-}
-
 /**
  * claimWallet claims a wallet for the current account.
  */
@@ -189,8 +180,6 @@ function onAddTokensClick(): void {
 }
 
 onMounted(async (): Promise<void> => {
-    await getWallet();
-
     // check if user navigated here from Billing overview screen
     if (route.query.action !== 'add tokens') {
         return;