Async import of Qrtly Recon Alert

ee/app/assets/javascripts/billings/qrtly_reconciliation/components/qrtly_reconciliation_alert.vue

@@ -20,12 +20,17 @@ export default {
       type: String,
       required: true,
     },
-    dotCom: {
+    usesNamespacePlan: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
+  data() {
+    return {
+      isAlertDismissed: false,
+    };
+  },
   computed: {
     alertTitle() {
       return sprintf(this.$options.i18n.title, { qrtlyDate: this.formattedDate });
@@ -34,8 +39,8 @@ export default {
       return formatDate(this.date, 'isoDate');
     },
     description() {
-      return this.dotCom
-        ? this.$options.i18n.description.dotCom
+      return this.usesNamespacePlan
+        ? this.$options.i18n.description.usesNamespacePlan
         : this.$options.i18n.description.ee;
     },
   },
@@ -44,6 +49,7 @@ export default {
       Cookie.set(this.cookieKey, true, {
         expires: getDayDifference(new Date(), new Date(this.date)),
       });
+      this.isAlertDismissed = true;
     },
   },
   i18n,
@@ -52,6 +58,7 @@ export default {
 
 <template>
   <gl-alert
+    v-if="!isAlertDismissed"
     data-testid="qrtly-reconciliation-alert"
     variant="info"
     :title="alertTitle"

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

@@ -14,7 +14,7 @@ On %{qrtlyDate}, GitLab will process a quarterly reconciliation
 and automatically bill you a prorated amount for the overage.
 There is no action needed from you. If you have a credit card on file,
 it will be charged. Otherwise, you will receive an invoice.`),
-    dotCom: s__(`Admin|The number of max seats used for your namespace is currently
+    usesNamespacePlan: s__(`Admin|The number of max seats used for your namespace is currently
 exceeding the number of seats in your subscription.
 On %{qrtlyDate}, GitLab will process a quarterly reconciliation and
 automatically bill you a prorated amount for the overage.

ee/app/assets/javascripts/billings/qrtly_reconciliation/index.js

+export const shouldQrtlyReconciliationMount = async () => {
+  const el = document.querySelector('#js-qrtly-reconciliation-alert');
+
+  if (el) {
+    const { initQrtlyReconciliationAlert } = await import(
+      /* webpackChunkName: 'init_qrtly_reconciliation_alert' */ './init_qrtly_reconciliation_alert'
+    );
+    initQrtlyReconciliationAlert();
+  }
+};

ee/app/assets/javascripts/billings/qrtly_reconciliation/init_qrtly_reconciliation_alert.js

@@ -8,7 +8,7 @@ export const initQrtlyReconciliationAlert = (selector = '#js-qrtly-reconciliatio
     return false;
   }
 
-  const { reconciliationDate, cookieKey, dotCom } = el.dataset;
+  const { reconciliationDate, cookieKey, usesNamespacePlan } = el.dataset;
 
   return new Vue({
     el,
@@ -17,7 +17,7 @@ export const initQrtlyReconciliationAlert = (selector = '#js-qrtly-reconciliatio
         props: {
           date: new Date(reconciliationDate),
           cookieKey,
-          dotCom,
+          usesNamespacePlan,
         },
       });
     },

ee/app/assets/javascripts/pages/admin/dashboard/index.js

-import { initQrtlyReconciliationAlert } from 'ee/billings/qrtly_reconciliation/init_qrtly_reconciliation_alert';
+import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
 
-initQrtlyReconciliationAlert();
+shouldQrtlyReconciliationMount();

ee/app/assets/javascripts/pages/admin/licenses/show/index.js

-import { initQrtlyReconciliationAlert } from 'ee/billings/qrtly_reconciliation/init_qrtly_reconciliation_alert';
+import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
 
-initQrtlyReconciliationAlert();
+shouldQrtlyReconciliationMount();

ee/app/assets/javascripts/pages/groups/billings/index.js

-import { initQrtlyReconciliationAlert } from 'ee/billings/qrtly_reconciliation/init_qrtly_reconciliation_alert';
+import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
 import initSubscriptions from 'ee/billings/subscriptions';
 import PersistentUserCallout from '~/persistent_user_callout';
 
 PersistentUserCallout.factory(document.querySelector('.js-gold-trial-callout'));
 initSubscriptions();
-initQrtlyReconciliationAlert();
+shouldQrtlyReconciliationMount();

ee/app/assets/javascripts/pages/groups/show/index.js

 import initGroupAnalytics from 'ee/analytics/group_analytics/group_analytics_bundle';
-import { initQrtlyReconciliationAlert } from 'ee/billings/qrtly_reconciliation/init_qrtly_reconciliation_alert';
+import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initGroupDetails from '~/pages/groups/shared/group_details';
 import initVueAlerts from '~/vue_alerts';
@@ -8,4 +8,4 @@ leaveByUrl('group');
 initGroupDetails();
 initGroupAnalytics();
 initVueAlerts();
-initQrtlyReconciliationAlert();
+shouldQrtlyReconciliationMount();

ee/app/helpers/gitlab_subscriptions/upcoming_reconciliation_helper.rb

@@ -10,7 +10,7 @@ module GitlabSubscriptions
       {
         reconciliation_date: entity.next_reconciliation_date.to_s,
         cookie_key: entity.cookie_key,
-        dot_com: Gitlab::CurrentSettings.should_check_namespace_plan?
+        uses_namespace_plan: Gitlab::CurrentSettings.should_check_namespace_plan?
       }
     end
 

ee/spec/frontend/admin/qrtly_reconciliation_alert/qrtly_reconciliation_alert_spec.js

-import { GlAlert } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import Cookie from 'js-cookie';
-import QrtlyReconciliationAlert from 'ee/billings/qrtly_reconciliation/components/qrtly_reconciliation_alert.vue';
-
-jest.mock('js-cookie', () => ({
-  set: jest.fn(),
-}));
-
-describe('Qrtly Reconciliation Alert', () => {
-  let wrapper;
-  const reconciliationDate = new Date('2020-07-10');
-
-  const createComponent = () => {
-    return shallowMount(QrtlyReconciliationAlert, {
-      propsData: {
-        cookieKey: 'key',
-        date: reconciliationDate,
-      },
-    });
-  };
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('Rendering', () => {
-    it('renders alert title with date', () => {
-      expect(findAlert().attributes('title')).toContain(`occur on 2020-07-10`);
-    });
-
-    it('has the correct link to the help page', () => {
-      expect(findAlert().attributes('primarybuttonlink')).toBe(
-        '/help/subscriptions/self_managed/index#quarterly-subscription-reconciliation',
-      );
-    });
-
-    it('has the correct link to contact support', () => {
-      expect(findAlert().attributes('secondarybuttonlink')).toBe(
-        'https://about.gitlab.com/support/#contact-support',
-      );
-    });
-  });
-
-  describe('methods', () => {
-    it('sets the cookie on dismis', () => {
-      findAlert().vm.$emit('dismiss');
-
-      expect(Cookie.set).toHaveBeenCalledTimes(1);
-      expect(Cookie.set).toHaveBeenCalledWith('key', true, { expires: 4 });
-    });
-  });
-});

ee/spec/frontend/billings/qrtly_reconciliation/components/qrtly_reconciliation_alert_spec.js

@@ -24,15 +24,15 @@ describe('Qrtly Reconciliation Alert', () => {
 
   const findAlert = () => wrapper.find(GlAlert);
 
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('Rendering', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
     it('renders alert title with date', () => {
       expect(findAlert().attributes('title')).toContain(`occur on 2020-07-10`);
     });
@@ -51,14 +51,14 @@ describe('Qrtly Reconciliation Alert', () => {
       expect(wrapper.findComponent(GlSprintf).attributes('message')).toContain(i18n.description.ee);
     });
 
-    describe('dotcom', () => {
+    describe('when gitlab.com', () => {
       beforeEach(() => {
-        wrapper = createComponent({ dotCom: true });
+        wrapper = createComponent({ usesNamespacePlan: true });
       });
 
       it('has the correct description', () => {
         expect(wrapper.findComponent(GlSprintf).attributes('message')).toContain(
-          i18n.description.dotCom,
+          i18n.description.usesNamespacePlan,
         );
       });
     });

ee/spec/helpers/gitlab_subscriptions/upcoming_reconciliation_helper_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe GitlabSubscriptions::UpcomingReconciliationHelper do
       expect(helper.upcoming_reconciliation_hash(namespace)).to eq(
         reconciliation_date: upcoming_reconciliation.next_reconciliation_date.to_s,
         cookie_key: cookie_key,
-        dot_com: true
+        uses_namespace_plan: true
       )
     end
 
@@ -48,7 +48,7 @@ RSpec.describe GitlabSubscriptions::UpcomingReconciliationHelper do
         expect(helper.upcoming_reconciliation_hash(group)).to eq(
           reconciliation_date: upcoming_reconciliation2.next_reconciliation_date.to_s,
           cookie_key: cookie_key,
-          dot_com: true
+          uses_namespace_plan: true
         )
       end
     end
@@ -100,7 +100,7 @@ RSpec.describe GitlabSubscriptions::UpcomingReconciliationHelper do
       expect(helper.upcoming_reconciliation_hash).to eq(
         reconciliation_date: upcoming_reconciliation.next_reconciliation_date.to_s,
         cookie_key: cookie_key,
-        dot_com: false
+        uses_namespace_plan: false
       )
     end