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

@@ -146,6 +146,8 @@ export class ProjectsHttpApi implements ProjectsApi {
             limits.segmentCount,
             limits.segmentLimit,
             limits.segmentUsed,
+            limits.bucketsLimit,
+            limits.bucketsUsed,
         );
 
     }

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,
     ) {}
 }
 

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>

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.
  */