Merge branch...

Merge branch '271539-add-a-close-button-to-the-thanks-for-your-purchase-banner-or-and-other-refactorings' into 'master'

Enhance and add close icon to "thank you" banner

See merge request gitlab-org/gitlab!46755

app/assets/javascripts/groups/index.js

 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
+import UserCallout from '~/user_callout';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
 import GroupFilterableList from './groups_filterable_list';
@@ -17,6 +18,9 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
   const containerEl = document.getElementById(containerId);
   let dataEl;
 
+  // eslint-disable-next-line no-new
+  new UserCallout();
+
   // Don't do anything if element doesn't exist (No groups)
   // This is for when the user enters directly to the page via URL
   if (!containerEl) {

ee/app/assets/javascripts/subscriptions/groups/edit/index.js

 import Vue from 'vue';
 import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
 import ProgressBar from 'ee/registrations/components/progress_bar.vue';
+import UserCallout from '~/user_callout';
 
 export default () => {
+  // eslint-disable-next-line no-new
+  new UserCallout();
+
   const el = document.getElementById('progress-bar');
 
   if (!el) return null;

ee/app/views/shared/_thanks_for_purchase_banner.html.haml

-%section.gl-banner.gl-banner-introduction.gl-p-3.px-lg-6
-  .gl-banner-illustration.gl-display-flex
-    = image_tag('illustrations/illustration-congratulation-purchase.svg', class: 'mw-xs')
-  .gl-banner-content.gl-display-flex.gl-flex-direction-column.gl-justify-content-center
-    %h3= _('Thanks for your purchase!')
+%section.gl-banner.gl-banner-introduction{ data: { uid: 'purchase_success_banner_dismissed' } }
+  .gl-banner-illustration
+    = image_tag('illustrations/illustration-congratulation-purchase.svg', alt: _('Successful purchase image'))
+  .gl-banner-content.gl-my-auto
+    %h3.gl-banner-title= _('Thanks for your purchase!')
     - number_of_users = n_('1 user', '%{num} users', quantity) % { num: quantity }
     %p= _('You have successfully purchased a %{plan} plan subscription for %{seats}. You’ll receive a receipt via email.') % { plan: plan_title, seats: number_of_users }
+
+  %button.gl-banner-close.close.js-close-session.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss') }
+    = sprite_icon('close', size: 16, css_class: 'dismiss-icon')

locale/gitlab.pot

@@ -25958,6 +25958,9 @@ msgstr ""
 msgid "Succeeded"
 msgstr ""
 
+msgid "Successful purchase image"
+msgstr ""
+
 msgid "Successfully activated"
 msgstr ""