satellite/{console, web}: display accurate legacy free tier information in upgrade modal

Updated upgrade account modal to show user account free tier limits instead of hardcoded values.

Issue:
https://github.com/storj/storj/issues/5939

Change-Id: I26ffbe2571c5ca4b37f02bec5211bac986bedc6a
This commit is contained in:
Vitalii 2023-07-03 14:23:09 +03:00 committed by Vitalii Shpital
parent 70cdca5d3c
commit 5fc6eaab17
5 changed files with 54 additions and 21 deletions

View File

@ -440,22 +440,24 @@ func (a *Auth) GetAccount(w http.ResponseWriter, r *http.Request) {
defer mon.Task()(&ctx)(&err)
var user struct {
ID uuid.UUID `json:"id"`
FullName string `json:"fullName"`
ShortName string `json:"shortName"`
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"`
EmployeeCount string `json:"employeeCount"`
HaveSalesContact bool `json:"haveSalesContact"`
PaidTier bool `json:"paidTier"`
MFAEnabled bool `json:"isMFAEnabled"`
MFARecoveryCodeCount int `json:"mfaRecoveryCodeCount"`
CreatedAt time.Time `json:"createdAt"`
ID uuid.UUID `json:"id"`
FullName string `json:"fullName"`
ShortName string `json:"shortName"`
Email string `json:"email"`
Partner string `json:"partner"`
ProjectLimit int `json:"projectLimit"`
ProjectStorageLimit int64 `json:"projectStorageLimit"`
ProjectBandwidthLimit int64 `json:"projectBandwidthLimit"`
ProjectSegmentLimit int64 `json:"projectSegmentLimit"`
IsProfessional bool `json:"isProfessional"`
Position string `json:"position"`
CompanyName string `json:"companyName"`
EmployeeCount string `json:"employeeCount"`
HaveSalesContact bool `json:"haveSalesContact"`
PaidTier bool `json:"paidTier"`
MFAEnabled bool `json:"isMFAEnabled"`
MFARecoveryCodeCount int `json:"mfaRecoveryCodeCount"`
CreatedAt time.Time `json:"createdAt"`
}
consoleUser, err := console.GetUser(ctx)
@ -473,6 +475,8 @@ func (a *Auth) GetAccount(w http.ResponseWriter, r *http.Request) {
}
user.ProjectLimit = consoleUser.ProjectLimit
user.ProjectStorageLimit = consoleUser.ProjectStorageLimit
user.ProjectBandwidthLimit = consoleUser.ProjectBandwidthLimit
user.ProjectSegmentLimit = consoleUser.ProjectSegmentLimit
user.IsProfessional = consoleUser.IsProfessional
user.CompanyName = consoleUser.CompanyName
user.Position = consoleUser.Position

View File

@ -173,6 +173,8 @@ export class AuthHttpApi implements UsersApi {
userResponse.password,
userResponse.projectLimit,
userResponse.projectStorageLimit,
userResponse.projectBandwidthLimit,
userResponse.projectSegmentLimit,
userResponse.paidTier,
userResponse.isMFAEnabled,
userResponse.isProfessional,

View File

@ -42,6 +42,7 @@ import { useNotify } from '@/utils/hooks';
import { PaymentsHttpApi } from '@/api/payments';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { User } from '@/types/users';
import VModal from '@/components/common/VModal.vue';
import UpgradeInfoStep from '@/components/modals/upgradeAccountFlow/UpgradeInfoStep.vue';

View File

@ -17,10 +17,10 @@
:on-press="() => {}"
/>
<div class="info-step__column__bullets">
<InfoBullet class="info-step__column__bullets__item" title="Projects" info="1 project" />
<InfoBullet class="info-step__column__bullets__item" title="Storage" info="25 GB limit" />
<InfoBullet class="info-step__column__bullets__item" title="Egress" info="25 GB limit" />
<InfoBullet class="info-step__column__bullets__item" title="Segments" info="10,000 segments limit" />
<InfoBullet class="info-step__column__bullets__item" title="Projects" :info="freeProjects" />
<InfoBullet class="info-step__column__bullets__item" title="Storage" :info="`${freeUsageValue(user.projectStorageLimit)} limit`" />
<InfoBullet class="info-step__column__bullets__item" title="Egress" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
<InfoBullet class="info-step__column__bullets__item" title="Segments" :info="`${user.projectSegmentLimit.toLocaleString()} segments limit`" />
<InfoBullet class="info-step__column__bullets__item" title="Link Sharing" info="Link sharing with Storj domain" />
</div>
</div>
@ -65,10 +65,12 @@
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from 'vue';
import { computed, onBeforeMount, ref } from 'vue';
import { useUsersStore } from '@/store/modules/usersStore';
import { useNotify } from '@/utils/hooks';
import { User } from '@/types/users';
import { Size } from '@/utils/bytesSize';
import UpgradeAccountWrapper from '@/components/modals/upgradeAccountFlow/UpgradeAccountWrapper.vue';
import VButton from '@/components/common/VButton.vue';
@ -86,6 +88,28 @@ const storagePrice = ref<string>('Storage $0.004 GB / month');
const downloadInfo = ref<string>('25 GB free every month');
const downloadMoreInfo = ref<string>('');
/**
* Returns user entity from store.
*/
const user = computed((): User => {
return usersStore.state.user;
});
/**
* Returns formatted free projects count.
*/
const freeProjects = computed((): string => {
return `${user.value.projectLimit} project${user.value.projectLimit > 1 ? 's' : ''}`;
});
/**
* Returns formatted free usage value.
*/
function freeUsageValue(value: number): string {
const size = new Size(value);
return `${size.formattedBytes} ${size.label}`;
}
/**
* Lifecycle hook before initial render.
* If applicable, loads additional clarifying text based on user partner.

View File

@ -85,6 +85,8 @@ export class User {
public password: string = '',
public projectLimit: number = 0,
public projectStorageLimit: number = 0,
public projectBandwidthLimit: number = 0,
public projectSegmentLimit: number = 0,
public paidTier: boolean = false,
public isMFAEnabled: boolean = false,
public isProfessional: boolean = false,