web/satellite/v2: added info tooltip to storj token card

Added info tooltip saying: "If the STORJ token balance runs out, the default credit card will be charged." Issue: #6639 Change-Id: I04341f532b9efb37a518ae182294aa8722ec6ac1
storj · Jan 12, 2024 · 95eba16 · 95eba16
1 parent b4f98e4
commit 95eba16
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 18 deletions.
diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
@@ -44,7 +44,7 @@
                                     If the STORJ token balance runs out, the default credit card will be charged.
                                     <a
                                         class="token__content__title-area__default-wrapper__message__link"
-                                        href=""
+                                        href="https://docs.storj.io/support/account-management-billing/payment-methods"
                                         target="_blank"
                                         rel="noopener noreferrer"
                                     >

diff --git a/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue b/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue
@@ -2,9 +2,30 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
+    <v-card title="STORJ Token" variant="flat" border rounded="xlg">
         <v-card-text>
-            <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
+            <v-row class="ma-0 align-center">
+                <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
+                <v-chip rounded color="info" variant="tonal" class="font-weight-bold">
+                    Default
+                    <span class="d-inline-flex ml-1">
+                        <v-icon class="text-cursor-pointer" :icon="mdiInformationOutline" />
+                        <v-tooltip
+                            class="text-center"
+                            activator="parent"
+                            location="top"
+                            max-width="300px"
+                            open-delay="150"
+                            close-delay="150"
+                        >
+                            If the STORJ token balance runs out, the default credit card will be charged.
+                            <a class="link" href="https://docs.storj.io/support/account-management-billing/payment-methods" target="_blank" rel="noopener noreferrer">
+                                Learn more
+                            </a>
+                        </v-tooltip>
+                    </span>
+                </v-chip>
+            </v-row>
             <v-divider class="my-4" />
             <p>Deposit Address</p>
             <v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 px-0" @click="copyAddress">
@@ -31,8 +52,9 @@
 </template>
 
 <script setup lang="ts">
-import { VBtn, VCard, VCardText, VChip, VDivider, VTooltip } from 'vuetify/components';
+import { VBtn, VCard, VCardText, VChip, VDivider, VTooltip, VRow, VIcon } from 'vuetify/components';
 import { computed, onMounted, ref } from 'vue';
+import { mdiInformationOutline } from '@mdi/js';
 
 import { Wallet } from '@/types/payments';
 import { useLoading } from '@/composables/useLoading';
@@ -50,7 +72,7 @@ const billingStore = useBillingStore();
 const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
 
-const isAddTokenDialogOpen = ref(false);
+const isAddTokenDialogOpen = ref<boolean>(false);
 
 const emit = defineEmits(['historyClicked']);
 

diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -225,7 +225,6 @@
             </v-menu>
 
             <v-divider class="my-2" />
-
         </v-sheet>
     </v-navigation-drawer>
 

diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -31,15 +31,15 @@
                         </v-chip>
                         <v-divider class="my-4" />
                         <div>
-                        <v-tooltip
-                            activator="parent"
-                            location="top"
-                        >
-                            To change email, please <a href="https://supportdcs.storj.io/hc/en-us/requests/new?ticket_form_id=360000379291#" target="_blank">contact support</a>.
-                        </v-tooltip>
-                        <v-btn variant="outlined" color="default" size="small" disabled>
-                            Change Email
-                        </v-btn>
+                            <v-tooltip
+                                activator="parent"
+                                location="top"
+                            >
+                                To change email, please <a href="https://supportdcs.storj.io/hc/en-us/requests/new?ticket_form_id=360000379291#" target="_blank">contact support</a>.
+                            </v-tooltip>
+                            <v-btn variant="outlined" color="default" size="small" disabled>
+                                Change Email
+                            </v-btn>
                         </div>
                     </v-card-text>
                 </v-card>
@@ -158,6 +158,7 @@ import {
     VRow,
     VCol,
     VTooltip,
+    VChip,
 } from 'vuetify/components';
 
 import { User, UserSettings } from '@/types/users';
@@ -203,7 +204,7 @@ const userSettings = computed((): UserSettings => {
 /**
  * Returns user's paid tier status from store.
  */
- const isPaidTier = computed<boolean>(() => {
+const isPaidTier = computed<boolean>(() => {
     return usersStore.state.user.paidTier;
 });
 

diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -74,7 +74,7 @@
                     :disabled="!isInitialized"
                     @click="isNewFolderDialogOpen = true"
                 >
-                    <icon-folder class="mr-2"/>
+                    <icon-folder class="mr-2" />
                     New Folder
                 </v-btn>
 

diff --git a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
@@ -44,7 +44,7 @@
                             Not Available
                         </v-chip>
                         <v-divider class="my-4" />
-                        <v-btn variant="outlined" color="default" size="small" href="https://docs.storj.io/support/projects#delete-the-existing-project" target="_blank" >
+                        <v-btn variant="outlined" color="default" size="small" href="https://docs.storj.io/support/projects#delete-the-existing-project" target="_blank">
                             Learn More
                         </v-btn>
                     </v-card-text>
@@ -148,6 +148,7 @@ import {
     VCol,
     VRow,
     VIcon,
+    VChip,
 } from 'vuetify/components';
 import { mdiOpenInNew } from '@mdi/js';