From 6c035a70afd04355de6e1b25574d5de31c0c07c1 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 10 Aug 2023 12:38:17 +0300
Subject: [PATCH] web/satellite: modify 'add STORJ token' behavior for
 free-tier users

When a user is in the free tier and attempts to add STORJ from billing screen, open the "upgrade" modal instead of the simpler "add STORJ tokens" modal.
The simpler modal is still used for Pro users.

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

Change-Id: I261d67e1c4d569f7058da828bcb145a64136c231
---
 .../paymentMethods/AddTokenCardNative.vue        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
index 0afa65cc1..e7d2657e7 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
@@ -101,6 +101,7 @@ import { useNotify } from '@/utils/hooks';
 import { useBillingStore } from '@/store/modules/billingStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useUsersStore } from '@/store/modules/usersStore';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -113,12 +114,20 @@ import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
 const billingStore = useBillingStore();
+const usersStore = useUsersStore();
 const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
 
 const isLoading = ref<boolean>(false);
 
+/**
+ * Indicates if user is in paid tier.
+ */
+const isUserInPaidTier = computed((): boolean => {
+    return usersStore.state.user.paidTier;
+});
+
 /**
  * Returns wallet from store.
  */
@@ -171,7 +180,12 @@ async function claimWalletClick(): Promise<void> {
  */
 function onAddTokensClick(): void {
     analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
-    appStore.updateActiveModal(MODALS.addTokenFunds);
+
+    if (!isUserInPaidTier.value) {
+        appStore.updateActiveModal(MODALS.upgradeAccount);
+    } else {
+        appStore.updateActiveModal(MODALS.addTokenFunds);
+    }
 }
 
 onMounted(async (): Promise<void> => {