Add a modal under feature flag for members invite

What does this MR do and why?

Introduce a feature flag 'overage_members_modal' and show a modal when this FF when adding new members to a group.

The modal will be shown if the group has a subscription and adding a new member to it will cause overage.

This is a first part of implementing this modal, currently the condition is not accounting for case when users added are already members of top level group, there will be a follow-up to iterate on it.

Related to #348486 (closed)

Screenshots or screen recordings

Screen_Recording_2022-01-14_at_13.34.42

How to set up and validate locally

(guess what, we have exactly this case as a placeholder for this section!)

1. Enable the invite modal

   Feature.enable(:overage_members_modal)

2. Visit any group page that has a subscription OR create a new group and buy a premium subscription for one user for it.
3. Click the invite members button
4. If the added user will be over the subscription paid amount, the modal will be shown.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

app/assets/javascripts/invite_members/components/invite_members_overage_modal.vue

 <script>
-import { GlModal } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
+import { GlModal, GlLink } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   components: {
     GlModal,
+    GlLink,
   },
   props: {
     form: {
       type: HTMLFormElement,
       required: true,
     },
+    totalUserCount: {
+      type: Number,
+      required: true,
+    },
+    subscriptionSeats: {
+      type: String,
+      required: true,
+    },
+    groupName: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -23,6 +37,23 @@ export default {
       },
     };
   },
+  computed: {
+    modalInfoText() {
+      return sprintf(
+        s__(
+          'MembersOverage|Your subscription includes %{subscriptionSeats} seats. If you continue, the %{groupName} group will have %{totalSeats} seats in use and will be billed for the overage.',
+        ),
+        {
+          subscriptionSeats: this.subscriptionSeats,
+          groupName: this.groupName,
+          totalSeats: this.totalUserCount,
+        },
+      );
+    },
+    learnMoreUrl() {
+      return helpPagePath('subscriptions/quarterly_reconciliation');
+    },
+  },
   methods: {
     handlePrimary() {
       this.form.submit();
@@ -40,5 +71,8 @@ export default {
     :action-primary="actionPrimary"
     :action-cancel="actionCancel"
     @primary="handlePrimary"
-  />
+  >
+    {{ modalInfoText }}
+    <gl-link :href="learnMoreUrl" target="_blank">{{ __('Learn more.') }}</gl-link>
+  </gl-modal>
 </template>