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

Added CTA to billing -> overview screen for user to download total usage report Issue: #6154 Change-Id: I465c955486e6fa9bf922d56798b2338c4bd2d73f
storj · Oct 17, 2023 · 45fdc64 · 45fdc64
1 parent d7af97c
commit 45fdc64
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesComponent.vue b/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesComponent.vue
@@ -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>
 

diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -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;
 }