web/satellite: add responsiveness to upgrade notification

The upgrade notification has been updated to adapt to mobile screens
accordance with our designs.

Additionally, an issue where the notification would display "0B free
included" when displayed in the All Projects Dashboard has been fixed.

Change-Id: Ic13b9426ab5d6529c9d7b2ad8446a17da74905b1

satellite/console/consoleweb/consoleapi/auth.go

@@ -446,6 +446,7 @@ func (a *Auth) GetAccount(w http.ResponseWriter, r *http.Request) {
 		Email                string    `json:"email"`
 		Partner              string    `json:"partner"`
 		ProjectLimit         int       `json:"projectLimit"`
+		ProjectStorageLimit  int64     `json:"projectStorageLimit"`
 		IsProfessional       bool      `json:"isProfessional"`
 		Position             string    `json:"position"`
 		CompanyName          string    `json:"companyName"`
@@ -471,6 +472,7 @@ func (a *Auth) GetAccount(w http.ResponseWriter, r *http.Request) {
 		user.Partner = string(consoleUser.UserAgent)
 	}
 	user.ProjectLimit = consoleUser.ProjectLimit
+	user.ProjectStorageLimit = consoleUser.ProjectStorageLimit
 	user.IsProfessional = consoleUser.IsProfessional
 	user.CompanyName = consoleUser.CompanyName
 	user.Position = consoleUser.Position

web/satellite/src/api/auth.ts

@@ -15,7 +15,6 @@ import {
 } from '@/types/users';
 import { HttpClient } from '@/utils/httpClient';
 import { ErrorTokenExpired } from '@/api/errors/ErrorTokenExpired';
-import { Duration } from '@/utils/time';
 
 /**
  * AuthHttpApi is a console Auth API.
@@ -173,6 +172,7 @@ export class AuthHttpApi implements UsersApi {
                 userResponse.partner,
                 userResponse.password,
                 userResponse.projectLimit,
+                userResponse.projectStorageLimit,
                 userResponse.paidTier,
                 userResponse.isMFAEnabled,
                 userResponse.isProfessional,

web/satellite/src/components/notifications/UpgradeNotification.vue

@@ -3,28 +3,25 @@
 
 <template>
     <div v-if="isBannerShowing" class="notification-wrap">
-        <div class="notification-wrap__left">
-            <SunnyIcon class="notification-wrap__left__icon" />
+        <SunnyIcon class="notification-wrap__icon" />
+        <div class="notification-wrap__text">
             <p>
                 Ready to upgrade? Upload up to 75TB and pay what you use only, no minimum.
-                {{ bytesToBase10String(limits.bandwidthLimit) }} free included.
+                {{ formattedStorageLimit }} free included.
             </p>
-        </div>
-        <div class="notification-wrap__right">
             <a @click="openBanner">Upgrade Now</a>
-            <CloseIcon class="notification-wrap__right__close" @click="onCloseClick" />
         </div>
+        <CloseIcon class="notification-wrap__close" @click="onCloseClick" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { bytesToBase10String } from '@/utils/strings';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
-import { ProjectLimits } from '@/types/projects';
-import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { Size } from '@/utils/bytesSize';
 
 import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
 import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
@@ -33,7 +30,7 @@ const props = defineProps<{
     openAddPMModal: () => void,
 }>();
 
-const projectsStore = useProjectsStore();
+const usersStore = useUsersStore();
 const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
 const isBannerShowing = ref<boolean>(true);
@@ -46,10 +43,10 @@ function onCloseClick(): void {
 }
 
 /**
- * Returns current limits from store.
+ * Returns the user's project storage limit from the store formatted as a size string.
  */
-const limits = computed((): ProjectLimits => {
-    return projectsStore.state.currentLimits;
+const formattedStorageLimit = computed((): string => {
+    return Size.toBase10String(usersStore.state.user.projectStorageLimit);
 });
 
 /**
@@ -66,7 +63,8 @@ async function openBanner(): Promise<void> {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.375rem;
+    gap: 16px;
+    padding: 16px;
     font-family: 'font_regular', sans-serif;
     font-size: 1rem;
     background-color: var(--c-white);
@@ -74,31 +72,35 @@ async function openBanner(): Promise<void> {
     border-radius: 10px;
     box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
 
-    &__left {
-        display: flex;
-        align-items: center;
-
     &__icon {
         flex-shrink: 0;
-            margin-right: 1.375rem;
-        }
     }
 
-    &__right {
+    &__text {
         display: flex;
         align-items: center;
-        flex-shrink: 0;
-        margin-left: 16px;
+        gap: 16px;
+        flex-grow: 1;
 
         & a {
             color: var(--c-black);
             text-decoration: underline !important;
+            white-space: nowrap;
+        }
+
+        @media screen and (width <= 500px) {
+            flex-direction: column;
+            align-items: flex-start;
+        }
     }
 
     &__close {
-            margin-left: 16px;
+        flex-shrink: 0;
         cursor: pointer;
     }
+
+    @media screen and (width <= 500px) {
+        align-items: flex-start;
     }
 }
 </style>

web/satellite/src/types/users.ts

@@ -84,6 +84,7 @@ export class User {
         public partner: string = '',
         public password: string = '',
         public projectLimit: number = 0,
+        public projectStorageLimit: number = 0,
         public paidTier: boolean = false,
         public isMFAEnabled: boolean = false,
         public isProfessional: boolean = false,