From 45fdc64300064d160b25a2d605ab5e40ee1fbd89 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Fri, 6 Oct 2023 15:25:00 +0300
Subject: [PATCH] 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
---
 .../billing/UsageAndChargesComponent.vue       |  2 +-
 .../vuetify-poc/src/views/Billing.vue          | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesComponent.vue b/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesComponent.vue
index 1e98fb09c..8e1f5dd2c 100644
--- 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
index b31c41759..5a8d684f9 100644
--- 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;
 }