Merge branch 'vs-add-cc-validation-alert' into 'master'

Add alert for CC validations

See merge request gitlab-org/gitlab!61242

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

+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+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
+cryptomining attacks on GitLab infrastructure.
+%{strongStart}GitLab will not charge or store your credit card, it will only be used for validation.%{strongEnd} %{linkStart}Learn more%{linkEnd}.`),
+  primaryButtonText: s__('Billings|Verify account'),
+};
+
+export default {
+  name: 'CreditCardValidationRequiredAlert',
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+    AccountVerificationModal,
+  },
+  props: {
+    iframeUrl: {
+      type: String,
+      required: true,
+    },
+    allowedOrigin: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    learnMoreUrl() {
+      return 'about:blank';
+    },
+  },
+  methods: {
+    showModal() {
+      this.$refs.modal.show();
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-pt-5">
+    <gl-alert
+      variant="danger"
+      :dismissible="false"
+      :title="$options.i18n.alertTitle"
+      :primary-button-text="$options.i18n.primaryButtonText"
+      @primaryAction="showModal"
+    >
+      <gl-sprintf :message="$options.i18n.alertText">
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #link="{ content }">
+          <gl-link :href="learnMoreUrl">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+
+    <account-verification-modal
+      ref="modal"
+      :iframe-url="iframeUrl"
+      :allowed-origin="allowedOrigin"
+    />
+  </div>
+</template>

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

+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CreditCardValidationRequiredAlert from 'ee/billings/components/cc_validation_required_alert.vue';
+
+describe('CreditCardValidationRequiredAlert', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    return shallowMount(CreditCardValidationRequiredAlert, {
+      propsData: {
+        iframeUrl: 'about:blank',
+        allowedOrigin: 'about:blank',
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders title', () => {
+    expect(wrapper.findComponent(GlAlert).attributes('title')).toBe('User Verification Required');
+  });
+
+  it('renders description', () => {
+    expect(wrapper.findComponent(GlAlert).text()).toContain(
+      'As a user on a free or trial namespace',
+    );
+  });
+});

locale/gitlab.pot

@@ -5040,6 +5040,12 @@ msgstr ""
 msgid "BillingPlan|Upgrade for free"
 msgstr ""
 
+msgid "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} %{linkStart}Learn more%{linkEnd}."
+msgstr ""
+
+msgid "Billings|User Verification Required"
+msgstr ""
+
 msgid "Billings|Verify User Account"
 msgstr ""