From 581528591200a4c49a6c02294e193932a2310b70 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Fri, 29 Aug 2025 16:00:21 +0300
Subject: [PATCH] Add purchase commitment card and use it in the Vue app

---
 .../pages/admin/gitlab_duo/usage/index.js     |  5 ++-
 .../usage_billing/components/app.stories.js   |  3 ++
 .../usage_billing/components/app.vue          |  8 ++--
 .../components/purchase_commitment_card.vue   | 32 ++++++++++++++++
 .../usage_billing/components/app_spec.js      |  5 +++
 .../purchase_commitment_card_spec.js          | 38 +++++++++++++++++++
 locale/gitlab.pot                             |  6 +++
 7 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 ee/app/assets/javascripts/usage_quotas/usage_billing/components/purchase_commitment_card.vue
 create mode 100644 ee/spec/frontend/usage_quotas/usage_billing/components/purchase_commitment_card_spec.js

diff --git a/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
index c1d00af3b4132b..7f8f3484d5df5c 100644
--- a/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
+++ b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
@@ -11,7 +11,10 @@ function initAdminUsageDashboard() {
   return new Vue({
     el,
     name: 'AdminUsageBillingDashboardApp',
-    provide: {},
+    provide: {
+      // TODO: this property should be replaced with a value provided from the backend
+      purchaseCommitmentUrl: '/admin/gitlab_duo/usage',
+    },
     render(createElement) {
       return createElement(AdminUsageDashboard);
     },
diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js
index e71a8fa00ce529..a07b929f018cbe 100644
--- a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js
+++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js
@@ -6,6 +6,9 @@ export default {
 };
 
 const Template = (args, { argTypes }) => ({
+  provide: {
+    purchaseCommitmentUrl: '/url-to-purchase-monthly/commitment',
+  },
   props: Object.keys(argTypes),
   components: { UsageBillingApp },
   template: '<usage-billing-app v-bind="$props" />',
diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue
index 1ce9ae760f6190..a0269746d76fb6 100644
--- a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue
+++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlCard, GlTabs, GlTab } from '@gitlab/ui';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
+import PurchaseCommitmentCard from './purchase_commitment_card.vue';
 
 export default {
   name: 'UsageBillingApp',
@@ -9,6 +10,7 @@ export default {
     GlTabs,
     GlTab,
     PageHeading,
+    PurchaseCommitmentCard,
   },
 };
 </script>
@@ -27,11 +29,7 @@ export default {
         </h2>
       </gl-card>
 
-      <gl-card class="gl-flex-1 gl-bg-transparent">
-        <h2 class="gl-font-heading gl-heading-scale-400 gl-mb-3">
-          {{ s__('UsageBilling|Purchase a monthly commitment') }}
-        </h2>
-      </gl-card>
+      <purchase-commitment-card />
     </section>
     <gl-tabs class="gl-mt-5">
       <gl-tab :title="s__('UsageBilling|Usage trends')">
diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/purchase_commitment_card.vue b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/purchase_commitment_card.vue
new file mode 100644
index 00000000000000..268293652cfe5a
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/purchase_commitment_card.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlCard, GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'PurchaseCommitmentCard',
+  components: {
+    GlCard,
+    GlButton,
+  },
+  inject: ['purchaseCommitmentUrl'],
+};
+</script>
+<template>
+  <gl-card class="gl-flex-1 gl-bg-transparent" body-class="gl-flex gl-flex-col gl-h-full">
+    <h2 class="gl-font-heading gl-heading-scale-400 gl-mb-3">
+      {{ s__('UsageBilling|Purchase a monthly commitment') }}
+    </h2>
+    <p>
+      {{
+        s__(
+          'UsageBilling|You can increase your commitment amount to extend your monthly allocation of tokens.',
+        )
+      }}
+    </p>
+
+    <div class="gl-mt-auto">
+      <gl-button variant="confirm" :href="purchaseCommitmentUrl">
+        {{ s__('UsageBilling|Increase monthly commitment') }}
+      </gl-button>
+    </div>
+  </gl-card>
+</template>
diff --git a/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js b/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
index ee225a336106bc..7aa2ec12fa12d1 100644
--- a/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
+++ b/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
@@ -1,6 +1,7 @@
 import { GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import UsageBillingApp from 'ee/usage_quotas/usage_billing/components/app.vue';
+import PurchaseCommitmentCard from 'ee/usage_quotas/usage_billing/components/purchase_commitment_card.vue';
 
 describe('UsageBillingApp', () => {
   /** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
@@ -17,6 +18,10 @@ describe('UsageBillingApp', () => {
       createComponent();
     });
 
+    it('renders purchase-commitment-card', () => {
+      expect(wrapper.findComponent(PurchaseCommitmentCard).exists()).toBe(true);
+    });
+
     it('renders the correct tabs', () => {
       const tabs = findTabs();
 
diff --git a/ee/spec/frontend/usage_quotas/usage_billing/components/purchase_commitment_card_spec.js b/ee/spec/frontend/usage_quotas/usage_billing/components/purchase_commitment_card_spec.js
new file mode 100644
index 00000000000000..9643e394a688dc
--- /dev/null
+++ b/ee/spec/frontend/usage_quotas/usage_billing/components/purchase_commitment_card_spec.js
@@ -0,0 +1,38 @@
+import { GlButton } from '@gitlab/ui';
+import PurchaseCommitmentCard from 'ee/usage_quotas/usage_billing/components/purchase_commitment_card.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('PurchaseCommitmentCard', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(PurchaseCommitmentCard, {
+      provide: {
+        purchaseCommitmentUrl: 'url-to-purchase-monthly-commitment',
+      },
+    });
+  };
+
+  describe('rendering elements', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders card title', () => {
+      expect(wrapper.find('h2').text()).toBe('Purchase a monthly commitment');
+    });
+
+    it('renders card body', () => {
+      expect(wrapper.find('p').text()).toBe(
+        'You can increase your commitment amount to extend your monthly allocation of tokens.',
+      );
+    });
+
+    it('renders call to action button', () => {
+      const button = wrapper.findComponent(GlButton);
+
+      expect(button.props('href')).toBe('url-to-purchase-monthly-commitment');
+      expect(button.text()).toBe('Increase monthly commitment');
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 832b217bcd352a..34246e89883b4d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -68786,6 +68786,9 @@ msgstr ""
 msgid "UsageBilling|Current month usage"
 msgstr ""
 
+msgid "UsageBilling|Increase monthly commitment"
+msgstr ""
+
 msgid "UsageBilling|Purchase a monthly commitment"
 msgstr ""
 
@@ -68798,6 +68801,9 @@ msgstr ""
 msgid "UsageBilling|Usage trends"
 msgstr ""
 
+msgid "UsageBilling|You can increase your commitment amount to extend your monthly allocation of tokens."
+msgstr ""
+
 msgid "UsageQuotas|(of %{totalStorageSize})"
 msgstr ""
 
-- 
GitLab