web/satellite: trigger upgrade flow on add CC or tokens

Updated logic to trigger upgrade account flow on add CC or tokens clicks.

Change-Id: I95d6661248091c541d0c7b33af4d62a957b9f658

web/satellite/src/components/AddCreditCardComponent.vue

@@ -2,9 +2,9 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
+    <v-card title="Add Card" variant="flat" border rounded="xlg">
         <v-card-text>
-            <v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="isCardInputShown = true">+ Add New Card</v-btn>
+            <v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="onShowCardInput">+ Add New Card</v-btn>
 
             <template v-else>
                 <StripeCardElement
@@ -78,6 +78,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useAppStore } from '@/store/modules/appStore';
 
 import StripeCardElement from '@/components/StripeCardElement.vue';
 import StripeCardInput from '@/components/StripeCardInput.vue';
@@ -90,8 +91,10 @@ interface StripeForm {
 const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();
 const usersStore = useUsersStore();
-const notify = useNotify();
 const billingStore = useBillingStore();
+const appStore = useAppStore();
+
+const notify = useNotify();
 const { withLoading, isLoading } = useLoading();
 
 const stripeCardInput = ref<StripeForm | null>(null);
@@ -105,6 +108,19 @@ const isUpgradeSuccessShown = ref(false);
 const paymentElementEnabled = computed(() => {
     return configStore.state.config.stripePaymentElementEnabled;
 });
+
+/**
+ * Triggers enter card info inputs to be shown.
+ */
+function onShowCardInput(): void {
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
+    isCardInputShown.value = true;
+}
+
 /**
  * Provides card information to Stripe.
  */

web/satellite/src/components/StorjTokenCardComponent.vue

@@ -66,13 +66,16 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
 import { useNotify } from '@/utils/hooks';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useUsersStore } from '@/store/modules/usersStore';
 
 import AddTokensDialog from '@/components/dialogs/AddTokensDialog.vue';
 import InputCopyButton from '@/components/InputCopyButton.vue';
 
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
+const usersStore = useUsersStore();
 const billingStore = useBillingStore();
+
 const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
 
@@ -145,6 +148,11 @@ async function claimWallet(): Promise<void> {
  * Called when "Create New Wallet" button is clicked.
  */
 function claimWalletClick(): void {
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
     withLoading(async () => {
         try {
             await claimWallet();
@@ -162,6 +170,11 @@ function claimWalletClick(): void {
 function onAddTokens(): void {
     analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
 
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
     withLoading(async () => {
         if (!wallet.value.address) {
             // not possible from this component

web/satellite/src/views/Billing.vue

@@ -237,6 +237,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 import { useLowTokenBalance } from '@/composables/useLowTokenBalance';
 import { ROUTES } from '@/router';
 import { useUsersStore } from '@/store/modules/usersStore';
+import { useAppStore } from '@/store/modules/appStore';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import CreditCardComponent from '@/components/CreditCardComponent.vue';
@@ -264,6 +265,7 @@ const billingStore = useBillingStore();
 const projectsStore = useProjectsStore();
 const configStore = useConfigStore();
 const usersStore = useUsersStore();
+const appStore = useAppStore();
 
 const { isLoading, withLoading } = useLoading();
 const notify = useNotify();
@@ -364,6 +366,11 @@ const isCouponActive = computed((): boolean => {
 });
 
 function onAddTokensClicked(): void {
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
     tab.value = TABS['payment-methods'];
     tokenCardComponent.value?.onAddTokens();
 }