From 6d22ec21d0cec4ab1f2160a3a91ae9070a57e013 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 16 Nov 2023 17:45:23 +0200
Subject: [PATCH] web/satellite/vuetify-poc: buckets limit card for project
 dashboard

Show buckets limit card on project dashboard instead of coupon card if user is in paid tier or is not the owner of currently selected project.

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

Change-Id: I033bbcced1b0fb77436607847cd9f10830330009
---
 web/satellite/src/api/projects.ts             |  2 +
 web/satellite/src/types/projects.ts           |  2 +
 .../src/components/UsageProgressComponent.vue |  2 +
 .../vuetify-poc/src/views/Dashboard.vue       | 61 ++++++++++++++++---
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/web/satellite/src/api/projects.ts b/web/satellite/src/api/projects.ts
index 5225184ef..364efe6a9 100644
--- a/web/satellite/src/api/projects.ts
+++ b/web/satellite/src/api/projects.ts
@@ -146,6 +146,8 @@ export class ProjectsHttpApi implements ProjectsApi {
             limits.segmentCount,
             limits.segmentLimit,
             limits.segmentUsed,
+            limits.bucketsLimit,
+            limits.bucketsUsed,
         );
 
     }
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index f31d31737..d06e50cb9 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -192,6 +192,8 @@ export class ProjectLimits {
         public segmentCount: number = 0,
         public segmentLimit: number = 0,
         public segmentUsed: number = 0,
+        public bucketsLimit: number = 0,
+        public bucketsUsed: number = 0,
     ) {}
 }
 
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 37796b1d1..4b5583bba 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -34,6 +34,7 @@ import IconCloud from '@poc/components/icons/IconCloud.vue';
 import IconArrowDown from '@poc/components/icons/IconArrowDown.vue';
 import IconGlobe from '@poc/components/icons/IconGlobe.vue';
 import IconCircleCheck from '@poc/components/icons/IconCircleCheck.vue';
+import IconBucket from '@poc/components/icons/IconBucket.vue';
 
 const props = defineProps<{
     title: string;
@@ -54,5 +55,6 @@ const iconComponents = {
     'arrow-down': IconArrowDown,
     globe: IconGlobe,
     check: IconCircleCheck,
+    bucket: IconBucket,
 };
 </script>
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index 5c732271e..e126adce3 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -171,7 +171,7 @@
             </v-col>
             <v-col cols="12" md="6">
                 <UsageProgressComponent
-                    v-if="billingStore.state.coupon && billingEnabled"
+                    v-if="isCouponCard"
                     icon="check"
                     :title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'"
                     :progress="couponProgress"
@@ -181,6 +181,17 @@
                     :cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'"
                     @cta-click="onCouponCTAClicked"
                 />
+                <UsageProgressComponent
+                    v-else
+                    icon="bucket"
+                    title="Buckets"
+                    :progress="bucketsUsedPercent"
+                    :used="`${limits.bucketsUsed.toLocaleString()} Used`"
+                    :limit="`Limit: ${limits.bucketsLimit.toLocaleString()}`"
+                    :available="`${availableBuckets.toLocaleString()} Available`"
+                    cta="Need more?"
+                    @cta-click="onBucketsCTAClicked"
+                />
             </v-col>
         </v-row>
 
@@ -269,6 +280,16 @@ const limitToChange = ref<LimitToChange>(LimitToChange.Storage);
 const isCreateBucketDialogShown = ref<boolean>(false);
 const isSetPassphraseDialogShown = ref<boolean>(false);
 
+/**
+ * Indicates if billing coupon card should be shown.
+ */
+const isCouponCard = computed<boolean>(() => {
+    return billingStore.state.coupon !== null &&
+        billingEnabled.value &&
+        !isPaidTier.value &&
+        selectedProject.value.ownerId === usersStore.state.user.id;
+});
+
 /**
  * Indicates if billing features are enabled.
  */
@@ -341,42 +362,56 @@ const limits = computed((): ProjectLimits => {
  * Returns remaining segments available.
  */
 const availableSegment = computed((): number => {
-    return projectsStore.state.currentLimits.segmentLimit - projectsStore.state.currentLimits.segmentUsed;
+    return limits.value.segmentLimit - limits.value.segmentUsed;
 });
 
 /**
  * Returns percentage of segment limit used.
  */
 const segmentUsedPercent = computed((): number => {
-    return projectsStore.state.currentLimits.segmentUsed/projectsStore.state.currentLimits.segmentLimit * 100;
+    return limits.value.segmentUsed / limits.value.segmentLimit * 100;
 });
 
 /**
  * Returns remaining egress available.
  */
 const availableEgress = computed((): number => {
-    return projectsStore.state.currentLimits.bandwidthLimit - projectsStore.state.currentLimits.bandwidthUsed;
+    return limits.value.bandwidthLimit - limits.value.bandwidthUsed;
 });
 
 /**
  * Returns percentage of egress limit used.
  */
 const egressUsedPercent = computed((): number => {
-    return projectsStore.state.currentLimits.bandwidthUsed/projectsStore.state.currentLimits.bandwidthLimit * 100;
+    return limits.value.bandwidthUsed / limits.value.bandwidthLimit * 100;
 });
 
 /**
  * Returns remaining storage available.
  */
 const availableStorage = computed((): number => {
-    return projectsStore.state.currentLimits.storageLimit - projectsStore.state.currentLimits.storageUsed;
+    return limits.value.storageLimit - limits.value.storageUsed;
 });
 
 /**
  * Returns percentage of storage limit used.
  */
 const storageUsedPercent = computed((): number => {
-    return projectsStore.state.currentLimits.storageUsed/projectsStore.state.currentLimits.storageLimit * 100;
+    return limits.value.storageUsed / limits.value.storageLimit * 100;
+});
+
+/**
+ * Returns percentage of buckets limit used.
+ */
+const bucketsUsedPercent = computed((): number => {
+    return limits.value.bucketsUsed / limits.value.bucketsLimit * 100;
+});
+
+/**
+ * Returns remaining buckets available.
+ */
+const availableBuckets = computed((): number => {
+    return limits.value.bucketsLimit - limits.value.bucketsUsed;
 });
 
 /**
@@ -518,6 +553,18 @@ function onCouponCTAClicked(): void {
     redirectToBilling();
 }
 
+/**
+ * Opens limit increase request link in a new tab.
+ */
+function onBucketsCTAClicked(): void {
+    if (!isPaidTier.value && billingEnabled.value) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
+    window.open(configStore.state.config.projectLimitsIncreaseRequestURL, '_blank', 'noreferrer');
+}
+
 /**
  * Redirects to Billing Page tab.
  */