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,17 +48,19 @@ export default {
         totalRepositorySizeExcess,
         additionalPurchasedStorageSize,
       } = this.rootStorageStatistics;
-      return {
-        usage: this.formatSizeAndSplit(
-          Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
-        ),
-        usageTotal: this.formatSizeAndSplit(additionalPurchasedStorageSize),
-        description: s__('UsageQuota|Purchased storage available'),
-        link: {
-          text: s__('UsageQuota|Purchase more storage'),
-          url: '#',
-        },
-      };
+      return this.purchaseStorageUrl
+        ? {
+            usage: this.formatSizeAndSplit(
+              Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
+            ),
+            usageTotal: this.formatSizeAndSplit(additionalPurchasedStorageSize),
+            description: s__('UsageQuota|Purchased storage available'),
+            link: {
+              text: s__('UsageQuota|Purchase more storage'),
+              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,43 +28,58 @@ describe('Usage Statistics component', () => {
   const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard);
   const getStatisticsCard = testId => wrapper.find(`[data-testid="${testId}"]`);
 
-  beforeEach(() => {
-    createComponent();
-  });
+  describe('with purchaseStorageUrl passed', () => {
+    beforeEach(() => {
+      createComponent({
+        purchaseStorageUrl: 'some-fancy-url',
+      });
+    });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-  it('renders three statistics cards', () => {
-    expect(getStatisticsCards()).toHaveLength(3);
-  });
+    it('renders three statistics cards', () => {
+      expect(getStatisticsCards()).toHaveLength(3);
+    });
 
-  it('renders text in total usage card footer', () => {
-    expect(
-      getStatisticsCard('totalUsage')
-        .find('[data-testid="statisticsCardFooter"]')
-        .text(),
-    ).toMatchInterpolatedText(
-      'This is the total amount of storage used across your projects within this namespace.',
-    );
-  });
+    it('renders text in total usage card footer', () => {
+      expect(
+        getStatisticsCard('totalUsage')
+          .find('[data-testid="statisticsCardFooter"]')
+          .text(),
+      ).toMatchInterpolatedText(
+        'This is the total amount of storage used across your projects within this namespace.',
+      );
+    });
+
+    it('renders text in excess usage card footer', () => {
+      expect(
+        getStatisticsCard('excessUsage')
+          .find('[data-testid="statisticsCardFooter"]')
+          .text(),
+      ).toMatchInterpolatedText(
+        'This is the total amount of storage used by projects above the free 978.8KiB storage limit.',
+      );
+    });
 
-  it('renders text in excess usage card footer', () => {
-    expect(
-      getStatisticsCard('excessUsage')
-        .find('[data-testid="statisticsCardFooter"]')
-        .text(),
-    ).toMatchInterpolatedText(
-      'This is the total amount of storage used by projects above the free 978.8KiB storage limit.',
-    );
+    it('renders button in purchased usage card footer', () => {
+      expect(
+        getStatisticsCard('purchasedUsage')
+          .find(GlButton)
+          .exists(),
+      ).toBe(true);
+    });
   });
 
-  it('renders button in purchased usage card footer', () => {
-    expect(
-      getStatisticsCard('purchasedUsage')
-        .find(GlButton)
-        .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);
+    });
   });
 });