web/satellite/vuetify-poc: download total usage report

Added CTA to billing -> overview screen for user to download total usage report

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

Change-Id: I465c955486e6fa9bf922d56798b2338c4bd2d73f
This commit is contained in:
Vitalii 2023-10-06 15:25:00 +03:00 committed by Storj Robot
parent d7af97c919
commit 45fdc64300
2 changed files with 19 additions and 1 deletions

View File

@ -4,7 +4,7 @@
<template>
<v-row>
<v-col>
<h4 class="mt-4">Costs per project</h4>
<h4>Costs per project</h4>
</v-col>
</v-row>

View File

@ -144,6 +144,18 @@
</v-col>
</v-row>
<v-row>
<v-col>
<v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border>
<v-card-text>
<v-btn variant="outlined" color="default" size="small" @click="downloadReport">
Download Report
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row v-if="isRollupLoading" justify="center" align="center">
<v-col cols="auto">
<v-progress-circular indeterminate />
@ -223,6 +235,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import { Download } from '@/utils/download';
import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
@ -316,6 +329,11 @@ const isCouponActive = computed((): boolean => {
return !!c && (c.duration === 'forever' || (!!c.expiresAt && now < c.expiresAt.getTime()));
});
function downloadReport(): void {
const link = projectsStore.getTotalUsageReportLink();
Download.fileByLink(link);
}
function goToTransactionsTab() {
tab.value = 2;
}