From ec780003f0c1bb1de562ab0a34d1336c10e97b32 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Wed, 28 Jun 2023 09:17:28 -0500
Subject: [PATCH] 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
---
 .../console/consoleweb/consoleapi/auth.go     |  2 +
 web/satellite/src/api/auth.ts                 |  2 +-
 .../notifications/UpgradeNotification.vue     | 58 ++++++++++---------
 web/satellite/src/types/users.ts              |  1 +
 4 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/satellite/console/consoleweb/consoleapi/auth.go b/satellite/console/consoleweb/consoleapi/auth.go
index f49f1279f..8ebad8641 100644
--- a/satellite/console/consoleweb/consoleapi/auth.go
+++ b/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
diff --git a/web/satellite/src/api/auth.ts b/web/satellite/src/api/auth.ts
index d072b8405..f37fd8d21 100644
--- a/web/satellite/src/api/auth.ts
+++ b/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,
diff --git a/web/satellite/src/components/notifications/UpgradeNotification.vue b/web/satellite/src/components/notifications/UpgradeNotification.vue
index ff71b48e4..c0d146f67 100644
--- a/web/satellite/src/components/notifications/UpgradeNotification.vue
+++ b/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;
-        }
+    &__icon {
+        flex-shrink: 0;
     }
 
-    &__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;
         }
 
-        &__close {
-            margin-left: 16px;
-            cursor: pointer;
+        @media screen and (width <= 500px) {
+            flex-direction: column;
+            align-items: flex-start;
         }
     }
+
+    &__close {
+        flex-shrink: 0;
+        cursor: pointer;
+    }
+
+    @media screen and (width <= 500px) {
+        align-items: flex-start;
+    }
 }
 </style>
diff --git a/web/satellite/src/types/users.ts b/web/satellite/src/types/users.ts
index cc4539548..a4d36739f 100644
--- a/web/satellite/src/types/users.ts
+++ b/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,