web/satellite/vuetify-poc: add tier indicator

This change indicates the user's tier in the My Account dropdown button of the Vuetify project. Resolves #6278 Change-Id: I0db6bfe8e03720b87ff77e947f785031eed7e528
storj · Sep 18, 2023 · ad5c2e1 · ad5c2e1
1 parent c48f58e
commit ad5c2e1
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -80,6 +80,15 @@
                             <img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
                         </template>
                         My Account
+                        <v-chip
+                            class="ml-2 font-weight-bold"
+                            :color="isPaidTier ? 'success' : 'default'"
+                            variant="outlined"
+                            size="small"
+                            rounded
+                        >
+                            {{ isPaidTier ? 'Pro' : 'Free' }}
+                        </v-chip>
                     </v-btn>
                 </template>
 
@@ -155,6 +164,7 @@ import {
     VListItemTitle,
     VListItemSubtitle,
     VDivider,
+    VChip,
 } from 'vuetify/components';
 
 import { useAppStore } from '@poc/store/appStore';
@@ -206,6 +216,13 @@ const satelliteName = computed<string>(() => {
     return configStore.state.config.satelliteName;
 });
 
+/*
+ * Returns user's paid tier status from store.
+ */
+const isPaidTier = computed<boolean>(() => {
+    return usersStore.state.user.paidTier;
+});
+
 function toggleTheme(newTheme: string): void {
     if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
         return;