Render purchase box if link to purchase storage is provided

We might want to turn this off if we discover any issues
with CustomersDot

ee/app/assets/javascripts/storage_counter/components/app.vue

@@ -110,7 +110,10 @@ export default {
       :actual-repository-size-limit="namespace.actualRepositorySizeLimit"
     />
     <div v-if="isAdditionalStorageFlagEnabled && storageStatistics">
-      <usage-statistics :root-storage-statistics="storageStatistics" />
+      <usage-statistics
+        :root-storage-statistics="storageStatistics"
+        :purchase-storage-url="purchaseStorageUrl"
+      />
     </div>
     <div v-else class="gl-py-4 gl-px-2 gl-m-0">
       <div class="gl-display-flex gl-align-items-center">

ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue

@@ -15,6 +15,11 @@ export default {
       required: true,
       type: Object,
     },
+    purchaseStorageUrl: {
+      required: false,
+      type: String,
+      default: '',
+    },
   },
   computed: {
     formattedActualRepoSizeLimit() {
@@ -43,7 +48,8 @@ export default {
         totalRepositorySizeExcess,
         additionalPurchasedStorageSize,
       } = this.rootStorageStatistics;
-      return {
+      return this.purchaseStorageUrl
+        ? {
             usage: this.formatSizeAndSplit(
               Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
             ),
@@ -51,9 +57,10 @@ export default {
             description: s__('UsageQuota|Purchased storage available'),
             link: {
               text: s__('UsageQuota|Purchase more storage'),
-          url: '#',
+              url: this.purchaseStorageUrl,
             },
-      };
+          }
+        : null;
     },
   },
   methods: {
@@ -106,6 +113,7 @@ export default {
       </template>
     </usage-statistics-card>
     <usage-statistics-card
+      v-if="purchasedUsage"
       data-testid="purchasedUsage"
       :usage="purchasedUsage.usage"
       :usage-total="purchasedUsage.usageTotal"

ee/spec/frontend/storage_counter/components/usage_statistics_spec.js

@@ -7,7 +7,7 @@ import { withRootStorageStatistics } from '../mock_data';
 describe('Usage Statistics component', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(UsageStatistics, {
       propsData: {
         rootStorageStatistics: {
@@ -16,6 +16,7 @@ describe('Usage Statistics component', () => {
           totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess,
           additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize,
         },
+        ...props,
       },
       stubs: {
         UsageStatisticsCard,
@@ -27,8 +28,11 @@ describe('Usage Statistics component', () => {
   const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard);
   const getStatisticsCard = testId => wrapper.find(`[data-testid="${testId}"]`);
 
+  describe('with purchaseStorageUrl passed', () => {
     beforeEach(() => {
-    createComponent();
+      createComponent({
+        purchaseStorageUrl: 'some-fancy-url',
+      });
     });
 
     afterEach(() => {
@@ -66,4 +70,16 @@ describe('Usage Statistics component', () => {
           .exists(),
       ).toBe(true);
     });
+  });
+
+  describe('with no purchaseStorageUrl', () => {
+    beforeEach(() => {
+      createComponent({
+        purchaseStorageUrl: null,
+      });
+    });
+    it('does not render purchased usage card if purchaseStorageUrl is not provided', () => {
+      expect(getStatisticsCard('purchasedUsage').exists()).toBe(false);
+    });
+  });
 });