Merge branch 'vs/add-success-notification-to-validation-alert' into 'master'

Add success notification to validation alert

See merge request gitlab-org/gitlab!61562

ee/app/assets/javascripts/billings/components/account_verification_modal.vue

@@ -7,8 +7,8 @@ const IFRAME_QUERY = Object.freeze({
   enable_submit: false,
   user_id: null,
 });
-// 450 is the mininum required height to get all iframe inputs visible
-const IFRAME_MINIMUM_HEIGHT = 450;
+// 350 is the mininum required height to get all iframe inputs visible
+const IFRAME_MINIMUM_HEIGHT = 350;
 const i18n = Object.freeze({
   title: s__('Billings|Verify User Account'),
   description: s__(`
@@ -72,6 +72,10 @@ export default {
       this.isLoading = true;
       this.$refs.modal.show();
     },
+    hide() {
+      this.error = null;
+      this.$refs.modal.hide();
+    },
     handleFrameLoaded() {
       this.isLoading = false;
       window.addEventListener('message', this.handleFrameMessages, true);
@@ -83,10 +87,12 @@ export default {
 
       if (event.data.success) {
         this.$emit('success');
-      } else {
+      } else if (parseInt(event.data.code, 10) > 6) {
+        // 0-6 error codes mean client-side validation error,
+        // no needs to reload the iframe and emit the failure event
         this.error = event.data.msg;
         this.$refs.zuora.src = this.iframeSrc;
-        this.$emit('error', this.error);
+        this.$emit('failure', { msg: this.error });
       }
 
       this.isLoading = false;

ee/app/assets/javascripts/billings/components/cc_validation_required_alert.vue

@@ -4,11 +4,19 @@ import { s__ } from '~/locale';
 import AccountVerificationModal from './account_verification_modal.vue';
 
 const i18n = {
-  alertTitle: s__('Billings|User Verification Required'),
-  alertText: s__(`Billings|As a user on a free or trial namespace, you'll need to verify your account with a credit card to run pipelines. This is required to help prevent
+  successAlert: {
+    title: s__('Billings|User successfully verified'),
+    text: s__(
+      'Billings|Your user account has been successfully verified. You will now be able to run pipelines on any free or trial namespace.',
+    ),
+  },
+  dangerAlert: {
+    title: s__('Billings|User Verification Required'),
+    text: s__(`Billings|As a user on a free or trial namespace, you'll need to verify your account with a credit card to run pipelines. This is required to help prevent
 cryptomining attacks on GitLab infrastructure.
 %{strongStart}GitLab will not charge or store your credit card, it will only be used for validation.%{strongEnd}`),
-  primaryButtonText: s__('Billings|Verify account'),
+    primaryButtonText: s__('Billings|Verify account'),
+  },
 };
 
 export default {
@@ -18,6 +26,11 @@ export default {
     GlSprintf,
     AccountVerificationModal,
   },
+  data() {
+    return {
+      shouldRenderSuccess: false,
+    };
+  },
   computed: {
     iframeUrl() {
       return gon.payment_form_url;
@@ -30,22 +43,34 @@ export default {
     showModal() {
       this.$refs.modal.show();
     },
+    handleSuccessfulVerification() {
+      this.$refs.modal.hide();
+      this.shouldRenderSuccess = true;
+    },
   },
   i18n,
 };
 </script>
 
 <template>
-  <div>
+  <div data-testid="creditCardValidationRequiredAlert">
+    <gl-alert
+      v-if="shouldRenderSuccess"
+      variant="success"
+      :title="$options.i18n.successAlert.title"
+      :dismissible="false"
+    >
+      {{ $options.i18n.successAlert.text }}
+    </gl-alert>
     <gl-alert
+      v-else
       variant="danger"
       :dismissible="false"
-      :title="$options.i18n.alertTitle"
-      :primary-button-text="$options.i18n.primaryButtonText"
-      data-testid="creditCardValidationRequiredAlert"
+      :title="$options.i18n.dangerAlert.title"
+      :primary-button-text="$options.i18n.dangerAlert.primaryButtonText"
       @primaryAction="showModal"
     >
-      <gl-sprintf :message="$options.i18n.alertText">
+      <gl-sprintf :message="$options.i18n.dangerAlert.text">
         <template #strong="{ content }">
           <strong>{{ content }}</strong>
         </template>
@@ -56,6 +81,7 @@ export default {
       ref="modal"
       :iframe-url="iframeUrl"
       :allowed-origin="allowedOrigin"
+      @success="handleSuccessfulVerification"
     />
   </div>
 </template>

ee/spec/frontend/billings/components/cc_validation_required_alert_spec.js

@@ -6,14 +6,19 @@ import { TEST_HOST } from 'helpers/test_constants';
 describe('CreditCardValidationRequiredAlert', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = (data = {}) => {
     return shallowMount(CreditCardValidationRequiredAlert, {
       stubs: {
         GlSprintf,
       },
+      data() {
+        return data;
+      },
     });
   };
 
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+
   beforeEach(() => {
     window.gon = {
       subscriptions_url: TEST_HOST,
@@ -28,12 +33,20 @@ describe('CreditCardValidationRequiredAlert', () => {
   });
 
   it('renders title', () => {
-    expect(wrapper.findComponent(GlAlert).attributes('title')).toBe('User Verification Required');
+    expect(findGlAlert().attributes('title')).toBe('User Verification Required');
   });
 
   it('renders description', () => {
-    expect(wrapper.findComponent(GlAlert).text()).toContain(
-      'As a user on a free or trial namespace',
-    );
+    expect(findGlAlert().text()).toContain('As a user on a free or trial namespace');
+  });
+
+  it('renders danger alert', () => {
+    expect(findGlAlert().attributes('variant')).toBe('danger');
+  });
+
+  it('renders the success alert instead of danger', () => {
+    wrapper = createComponent({ shouldRenderSuccess: true });
+
+    expect(findGlAlert().attributes('variant')).toBe('success');
   });
 });

locale/gitlab.pot

@@ -5055,6 +5055,9 @@ msgstr ""
 msgid "Billings|User Verification Required"
 msgstr ""
 
+msgid "Billings|User successfully verified"
+msgstr ""
+
 msgid "Billings|Verify User Account"
 msgstr ""
 
@@ -5064,6 +5067,9 @@ msgstr ""
 msgid "Billings|Your user account has been flagged for potential abuse for running a large number of concurrent pipelines. To continue to run a large number of concurrent pipelines, you'll need to validate your account with a credit card. %{strongStart}GitLab will not charge your credit card, it will only be used for validation.%{strongEnd}"
 msgstr ""
 
+msgid "Billings|Your user account has been successfully verified. You will now be able to run pipelines on any free or trial namespace."
+msgstr ""
+
 msgid "Billing|An email address is only visible for users with public emails."
 msgstr ""