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
This commit is contained in:
Jeremy Wharton 2023-06-28 09:17:28 -05:00
parent e129841130
commit ec780003f0
4 changed files with 34 additions and 29 deletions

View File

@ -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

View File

@ -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,

View File

@ -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>

View File

@ -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,