Hide Renew button if less than 15 days for term end date

Changelog: fixed
EE: true
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65070

ee/app/assets/javascripts/billings/constants.js

@@ -6,3 +6,5 @@ export const TABLE_TYPE_TRIAL = 'trial';
 export const HEADER_TOTAL_ENTRIES = 'x-total';
 export const HEADER_PAGE_NUMBER = 'x-page';
 export const HEADER_ITEMS_PER_PAGE = 'x-per-page';
+
+export const DAYS_FOR_RENEWAL = 15;

ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue

@@ -2,7 +2,13 @@
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { TABLE_TYPE_DEFAULT, TABLE_TYPE_FREE, TABLE_TYPE_TRIAL } from 'ee/billings/constants';
+import {
+  TABLE_TYPE_DEFAULT,
+  TABLE_TYPE_FREE,
+  TABLE_TYPE_TRIAL,
+  DAYS_FOR_RENEWAL,
+} from 'ee/billings/constants';
+import { getDayDifference } from '~/lib/utils/datetime/date_calculation_utility';
 import { s__ } from '~/locale';
 import SubscriptionTableRow from './subscription_table_row.vue';
 
@@ -42,7 +48,14 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isLoadingSubscription', 'hasErrorSubscription', 'plan', 'tables', 'endpoint']),
+    ...mapState([
+      'isLoadingSubscription',
+      'hasErrorSubscription',
+      'plan',
+      'billing',
+      'tables',
+      'endpoint',
+    ]),
     ...mapGetters(['isFreePlan']),
     isSubscription() {
       return !this.isFreePlan;
@@ -54,7 +67,13 @@ export default {
       return `${this.namespaceName}: ${planName} ${suffix}`;
     },
     canRenew() {
-      return this.isSubscription && !this.plan.trial;
+      const subscriptionEndDate = new Date(this.billing.subscriptionEndDate);
+      const todayDate = new Date();
+      return (
+        this.isSubscription &&
+        !this.plan.trial &&
+        DAYS_FOR_RENEWAL >= getDayDifference(todayDate, subscriptionEndDate)
+      );
     },
     canUpgrade() {
       return !this.freePersonalNamespace && (this.isFreePlan || this.plan.upgradable);

ee/app/assets/javascripts/billings/subscriptions/store/mutations.js

@@ -19,6 +19,7 @@ export default {
     let tableKey = TABLE_TYPE_DEFAULT;
 
     state.plan = plan;
+    state.billing = billing;
 
     if (state.plan.code === null) {
       tableKey = TABLE_TYPE_FREE;

ee/app/assets/javascripts/billings/subscriptions/store/state.js

@@ -10,6 +10,10 @@ export default () => ({
     trial: false,
     upgradable: false,
   },
+  billing: {
+    subscriptionStartDate: null,
+    subscriptionEndDate: null,
+  },
   tables: {
     free: {
       rows: [

ee/spec/features/groups/billing_spec.rb

@@ -68,7 +68,7 @@ RSpec.describe 'Groups > Billing', :js do
       let(:plan) { 'bronze' }
 
       let_it_be(:subscription) do
-        create(:gitlab_subscription, namespace: group, hosted_plan: bronze_plan, seats: 15)
+        create(:gitlab_subscription, end_date: Date.today + 14.days, namespace: group, hosted_plan: bronze_plan, seats: 15)
       end
 
       it_behaves_like 'hides search settings'
@@ -91,6 +91,22 @@ RSpec.describe 'Groups > Billing', :js do
           expect(page).to have_link("See usage", href: group_seat_usage_path(group))
         end
       end
+
+      context 'when gitlab subscription has end date more than 15 days' do
+        before do
+          subscription.update!(end_date: Date.tomorrow + 15.days)
+        end
+
+        it 'does not display renew button' do
+          renew_url = "#{EE::SUBSCRIPTIONS_URL}/gitlab/namespaces/#{group.id}/renew"
+
+          visit group_billings_path(group)
+
+          within subscription_table do
+            expect(page).not_to have_link("Renew", href: renew_url)
+          end
+        end
+      end
     end
 
     context 'with a legacy paid plan' do

ee/spec/frontend/billings/subscriptions/components/subscription_table_spec.js

@@ -76,7 +76,7 @@ describe('SubscriptionTable component', () => {
     beforeEach(() => {
       createComponentWithStore();
       store.state.isLoadingSubscription = false;
-      store.commit(`${types.RECEIVE_SUBSCRIPTION_SUCCESS}`, mockDataSubscription.gold);
+      store.commit(types.RECEIVE_SUBSCRIPTION_SUCCESS, mockDataSubscription.gold);
       return wrapper.vm.$nextTick();
     });
 
@@ -149,6 +149,9 @@ describe('SubscriptionTable component', () => {
                 code: planCode,
                 trial,
               },
+              billing: {
+                subscriptionEndDate: new Date(),
+              },
             },
           });
         });
@@ -158,6 +161,30 @@ describe('SubscriptionTable component', () => {
         });
       },
     );
+
+    describe('when subscriptionEndDate is more than 15 days', () => {
+      beforeEach(() => {
+        const today = new Date();
+        const subscriptionEndDate = today.setDate(today.getDate() + 16);
+
+        createComponentWithStore({
+          state: {
+            isLoadingSubscription: false,
+            plan: {
+              code: mockDataSubscription.planCode,
+              trial: false,
+            },
+            billing: {
+              subscriptionEndDate,
+            },
+          },
+        });
+      });
+
+      it('does not display the renew button', () => {
+        expect(findRenewButton().exists()).toBe(false);
+      });
+    });
   });
 
   describe('Add seats button', () => {

ee/spec/frontend/billings/subscriptions/store/mutations_spec.js

@@ -71,6 +71,12 @@ describe('EE billings subscription module mutations', () => {
         expect(state.plan).toEqual(plan);
       });
 
+      it('sets billing information', () => {
+        const { billing } = convertObjectPropsToCamelCase(subscription, { deep: true });
+
+        expect(state.billing).toEqual(billing);
+      });
+
       it(`it updates table ${tableKey} with subscription plan`, () => {
         expect(getStateTableValues(tableKey)).toMatchSnapshot();
       });