Add verification reminder

When pipeline fails due to a missing credit card verification.

app/models/user_callout.rb

@@ -37,7 +37,8 @@ class UserCallout < ApplicationRecord
     security_configuration_devops_alert: 36,   # EE-only
     profile_personal_access_token_expiry: 37,  # EE-only
     terraform_notification_dismissed: 38,
-    security_newsletter_callout: 39
+    security_newsletter_callout: 39,
+    verification_reminder: 40                  # EE-only
   }
 
   validates :feature_name,

app/views/layouts/_page.html.haml

@@ -3,6 +3,7 @@
     = render "layouts/nav/sidebar/#{nav}"
   .content-wrapper.content-wrapper-margin{ class: "#{@content_wrapper_class}" }
     .mobile-overlay
+    = render_if_exists 'layouts/header/verification_reminder'
     = yield :group_invite_members_banner
     .alert-wrapper.gl-force-block-formatting-context
       = render 'shared/outdated_browser'

doc/api/graphql/reference/index.md

@@ -17082,6 +17082,7 @@ Name of the feature that the callout is for.
 | <a id="usercalloutfeaturenameenumtwo_factor_auth_recovery_settings_check"></a>`TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK` | Callout feature name for two_factor_auth_recovery_settings_check. |
 | <a id="usercalloutfeaturenameenumultimate_trial"></a>`ULTIMATE_TRIAL` | Callout feature name for ultimate_trial. |
 | <a id="usercalloutfeaturenameenumunfinished_tag_cleanup_callout"></a>`UNFINISHED_TAG_CLEANUP_CALLOUT` | Callout feature name for unfinished_tag_cleanup_callout. |
+| <a id="usercalloutfeaturenameenumverification_reminder"></a>`VERIFICATION_REMINDER` | Callout feature name for verification_reminder. |
 | <a id="usercalloutfeaturenameenumweb_ide_alert_dismissed"></a>`WEB_IDE_ALERT_DISMISSED` | Callout feature name for web_ide_alert_dismissed. |
 | <a id="usercalloutfeaturenameenumweb_ide_ci_environments_guidance"></a>`WEB_IDE_CI_ENVIRONMENTS_GUIDANCE` | Callout feature name for web_ide_ci_environments_guidance. |
 

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

+<script>
+import { GlAlert, GlSprintf, GlButton } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import AccountVerificationModal from 'ee/billings/components/account_verification_modal.vue';
+import {
+  FEATURE_NAME,
+  DOCS_LINK,
+  I18N,
+  EVENT_LABEL,
+  MOUNTED_EVENT,
+  DISMISS_EVENT,
+  OPEN_DOCS_EVENT,
+  START_VERIFICATION_EVENT,
+  SUCCESSFUL_VERIFICATION_EVENT,
+} from '../constants';
+
+export default {
+  components: {
+    UserCalloutDismisser,
+    AccountVerificationModal,
+    GlAlert,
+    GlSprintf,
+    GlButton,
+  },
+  mixins: [Tracking.mixin({ label: EVENT_LABEL })],
+  data() {
+    return {
+      shouldRenderSuccess: false,
+    };
+  },
+  computed: {
+    iframeUrl() {
+      return gon.payment_form_url;
+    },
+    allowedOrigin() {
+      return gon.subscriptions_url;
+    },
+  },
+  mounted() {
+    this.track(MOUNTED_EVENT);
+  },
+  methods: {
+    handleDismiss() {
+      this.track(DISMISS_EVENT);
+      this.$refs.calloutDismisser.dismiss();
+    },
+    showModal() {
+      this.track(START_VERIFICATION_EVENT);
+      this.$refs.modal.show();
+    },
+    clickOpenDocs() {
+      this.track(OPEN_DOCS_EVENT);
+    },
+    handleSuccessfulVerification() {
+      this.track(SUCCESSFUL_VERIFICATION_EVENT);
+      this.$refs.modal.hide();
+      this.$refs.calloutDismisser.dismiss();
+      this.shouldRenderSuccess = true;
+    },
+  },
+  i18n: I18N,
+  featureName: FEATURE_NAME,
+  docsLink: DOCS_LINK,
+};
+</script>
+
+<template>
+  <div>
+    <user-callout-dismisser ref="calloutDismisser" :feature-name="$options.featureName" skip-query>
+      <template #default="{ shouldShowCallout }">
+        <gl-alert
+          v-if="shouldShowCallout"
+          ref="warningAlert"
+          :title="$options.i18n.warningAlert.title"
+          variant="warning"
+          @dismiss="handleDismiss"
+        >
+          <gl-sprintf :message="$options.i18n.warningAlert.message">
+            <template #validateLink="{ content }">
+              <gl-button ref="validateLink" variant="link" @click="showModal">
+                {{ content }}
+              </gl-button>
+            </template>
+            <template #docsLink="{ content }">
+              <gl-button
+                ref="docsLink"
+                variant="link"
+                :href="$options.docsLink"
+                target="_blank"
+                @click="clickOpenDocs"
+              >
+                {{ content }}
+              </gl-button>
+            </template>
+          </gl-sprintf>
+        </gl-alert>
+      </template>
+    </user-callout-dismisser>
+    <account-verification-modal
+      ref="modal"
+      :iframe-url="iframeUrl"
+      :allowed-origin="allowedOrigin"
+      @success="handleSuccessfulVerification"
+    />
+    <gl-alert
+      v-if="shouldRenderSuccess"
+      ref="successAlert"
+      variant="success"
+      :title="$options.i18n.successAlert.title"
+      @dismiss="shouldRenderSuccess = false"
+    >
+      {{ $options.i18n.successAlert.message }}
+    </gl-alert>
+  </div>
+</template>

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

+import { s__ } from '~/locale';
+
+export const FEATURE_NAME = 'verification_reminder';
+export const DOCS_LINK = 'https://docs.gitlab.com/runner/install/';
+export const EVENT_LABEL = 'verification_reminder';
+export const MOUNTED_EVENT = 'shown';
+export const DISMISS_EVENT = 'dismissed';
+export const OPEN_DOCS_EVENT = 'clicked_docs_link';
+export const START_VERIFICATION_EVENT = 'start_verification';
+export const SUCCESSFUL_VERIFICATION_EVENT = 'successful_verification';
+export const I18N = {
+  warningAlert: {
+    title: s__(
+      'VerificationReminder|Pipeline failing? To keep GitLab spam and abuse free we ask that you verify your identity with a valid payment method.',
+    ),
+    message: s__(
+      'VerificationReminder|Until then, free pipeline minutes on shared runners are unavailable. %{validateLinkStart}Validate your account%{validateLinkEnd} or %{docsLinkStart}use your own runners%{docsLinkEnd}.',
+    ),
+  },
+  successAlert: {
+    title: s__('VerificationReminder|Your account has been validated.'),
+    message: s__(
+      'VerificationReminder|You’ll now be able to take advantage of free pipeline minutes on shared runners.',
+    ),
+  },
+};

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

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import VerificationReminder from './components/verification_reminder.vue';
+
+Vue.use(VueApollo);
+
+export default () => {
+  const el = document.querySelector('.js-verification-reminder');
+
+  if (!el) {
+    return false;
+  }
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createElement) {
+      return createElement(VerificationReminder);
+    },
+  });
+};

ee/app/assets/javascripts/main_ee.js

@@ -4,6 +4,13 @@ import trackNavbarEvents from 'ee/event_tracking/navbar';
 import initNamespaceStorageLimitAlert from 'ee/namespace_storage_limit_alert';
 import initNamespaceUserCapReachedAlert from 'ee/namespace_user_cap_reached_alert';
 
+if (document.querySelector('.js-verification-reminder') !== null) {
+  // eslint-disable-next-line promise/catch-or-return
+  import('ee/billings/verification_reminder').then(({ default: initVerificationReminder }) => {
+    initVerificationReminder();
+  });
+}
+
 // EE specific calls
 initEETrialBanner();
 initNamespaceStorageLimitAlert();

ee/app/helpers/ee/user_callouts_helper.rb

@@ -102,6 +102,16 @@ module EE
       ).execute
     end
 
+    def show_verification_reminder?
+      return false unless ::Gitlab.dev_env_or_com?
+      return false unless ::Feature.enabled?(:verification_reminder, default_enabled: :yaml)
+      return false unless current_user
+      return false if current_user.has_valid_credit_card?
+
+      failed_pipeline = current_user.pipelines.user_not_verified.last
+      failed_pipeline.present? && !user_dismissed?('verification_reminder', failed_pipeline.created_at)
+    end
+
     private
 
     def eoa_bronze_plan_end_date

ee/app/models/ee/user.rb

@@ -430,6 +430,10 @@ module EE
       ::Gitlab.config.omniauth.block_auto_created_users && identities.any?
     end
 
+    def has_valid_credit_card?
+      credit_card_validated_at.present?
+    end
+
     protected
 
     override :password_required?
@@ -446,10 +450,6 @@ module EE
         ::Feature.enabled?(:ci_require_credit_card_for_old_users, project, default_enabled: :yaml)
     end
 
-    def has_valid_credit_card?
-      credit_card_validated_at.present?
-    end
-
     def requires_credit_card_to_run_pipelines?(project)
       return false unless project.shared_runners_enabled
 

ee/app/views/layouts/header/_verification_reminder.html.haml

+- if show_verification_reminder?
+  .js-verification-reminder

ee/config/feature_flags/development/verification_reminder.yml

+---
+name: verification_reminder
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/75123
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/346828
+milestone: "14.6"
+type: development
+group: group::activation
+default_enabled: false

ee/spec/frontend/billings/verification_reminder/components/verification_reminder_spec.js

+import { GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import VerificationReminder from 'ee/billings/verification_reminder/components/verification_reminder.vue';
+import { TEST_HOST } from 'helpers/test_constants';
+import {
+  EVENT_LABEL,
+  MOUNTED_EVENT,
+  DISMISS_EVENT,
+  OPEN_DOCS_EVENT,
+  START_VERIFICATION_EVENT,
+  SUCCESSFUL_VERIFICATION_EVENT,
+} from 'ee/billings/verification_reminder/constants';
+
+describe('VerificationReminder', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const createComponent = ({ shouldShowCallout = true } = {}, data = {}) => {
+    wrapper = shallowMount(VerificationReminder, {
+      data() {
+        return data;
+      },
+      stubs: {
+        GlSprintf,
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          shouldShowCallout,
+        }),
+      },
+    });
+  };
+
+  const findVerificationModal = () => wrapper.find({ ref: 'modal' });
+  const calloutDismisser = () => wrapper.find({ ref: 'calloutDismisser' });
+  const findWarningAlert = () => wrapper.find({ ref: 'warningAlert' });
+  const findSuccessAlert = () => wrapper.find({ ref: 'successAlert' });
+  const findValidateLink = () => wrapper.find({ ref: 'validateLink' });
+  const findDocsLink = () => wrapper.find({ ref: 'docsLink' });
+
+  beforeEach(() => {
+    window.gon = {
+      subscriptions_url: TEST_HOST,
+      payment_form_url: TEST_HOST,
+    };
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
+
+    createComponent();
+
+    findVerificationModal().vm.show = jest.fn();
+    findVerificationModal().vm.hide = jest.fn();
+    calloutDismisser().vm.dismiss = jest.fn();
+  });
+
+  afterEach(() => {
+    window.gon = {};
+    unmockTracking();
+    wrapper.destroy();
+  });
+
+  describe('when the component is mounted', () => {
+    it('sends the mounted event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, MOUNTED_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+
+    it('renders the warning alert', () => {
+      expect(findWarningAlert().exists()).toBe(true);
+    });
+  });
+
+  describe('when dismissing the alert', () => {
+    beforeEach(() => {
+      findWarningAlert().vm.$emit('dismiss');
+    });
+
+    it('sends the dismiss event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, DISMISS_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+
+    it('calls the dismiss callback', () => {
+      expect(calloutDismisser().vm.dismiss).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the alert has been dismissed', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: false,
+      });
+    });
+
+    it('hides the warning alert', () => {
+      expect(findWarningAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('when the validate link is clicked', () => {
+    beforeEach(() => {
+      findValidateLink().vm.$emit('click');
+    });
+
+    it('sends the start verification event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, START_VERIFICATION_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+
+    it('shows the verification modal', () => {
+      expect(findVerificationModal().vm.show).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the docs link is clicked', () => {
+    beforeEach(() => {
+      findDocsLink().vm.$emit('click');
+    });
+
+    it('sends the open docs event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, OPEN_DOCS_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+  });
+
+  describe('when validation was successful', () => {
+    beforeEach(() => {
+      findVerificationModal().vm.$emit('success');
+    });
+
+    it('sends the successful verification event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, SUCCESSFUL_VERIFICATION_EVENT, {
+        label: EVENT_LABEL,
+      });
+    });
+
+    it('hides the modal', () => {
+      expect(findVerificationModal().vm.hide).toHaveBeenCalled();
+    });
+
+    it('calls the dismiss callback', () => {
+      expect(calloutDismisser().vm.dismiss).toHaveBeenCalled();
+    });
+
+    it('renders the success alert', () => {
+      expect(findSuccessAlert().exists()).toBe(true);
+    });
+  });
+
+  describe('when dismissing the success alert', () => {
+    beforeEach(() => {
+      createComponent(undefined, {
+        shouldRenderSuccess: true,
+      });
+      findSuccessAlert().vm.$emit('dismiss');
+    });
+
+    it('hides the success alert', () => {
+      expect(findSuccessAlert().exists()).toBe(false);
+    });
+  });
+});

ee/spec/helpers/ee/user_callouts_helper_spec.rb

@@ -412,4 +412,55 @@ RSpec.describe EE::UserCalloutsHelper do
       helper.dismiss_two_factor_auth_recovery_settings_check
     end
   end
+
+  describe '#show_verification_reminder?' do
+    subject { helper.show_verification_reminder? }
+
+    let_it_be(:user) { create(:user) }
+    let_it_be(:pipeline) { create(:ci_pipeline, user: user, failure_reason: :user_not_verified) }
+
+    where(:on_gitlab_com?, :logged_in?, :unverified?, :failed_pipeline?, :not_dismissed_callout?, :flag_enabled?, :result) do
+      true  | true  | true  | true  | true  | true  | true
+      false | true  | true  | true  | true  | true  | false
+      true  | false | true  | true  | true  | true  | false
+      true  | true  | false | true  | true  | true  | false
+      true  | true  | true  | false | true  | true  | false
+      true  | true  | true  | true  | false | true  | false
+      true  | true  | true  | true  | true  | false | false
+    end
+
+    with_them do
+      before do
+        allow(Gitlab).to receive(:dev_env_or_com?).and_return(on_gitlab_com?)
+        allow(helper).to receive(:current_user).and_return(logged_in? ? user : nil)
+        allow(user).to receive(:has_valid_credit_card?).and_return(!unverified?)
+        pipeline.update!(failure_reason: nil) unless failed_pipeline?
+        allow(user).to receive(:dismissed_callout?).and_return(!not_dismissed_callout?)
+        stub_feature_flags(verification_reminder: flag_enabled?)
+      end
+
+      it { is_expected.to eq(result) }
+    end
+
+    describe 'dismissing the alert timing' do
+      before do
+        allow(Gitlab).to receive(:dev_env_or_com?).and_return(true)
+        allow(helper).to receive(:current_user).and_return(user)
+        create(:user_callout, user: user, feature_name: :verification_reminder, dismissed_at: Time.current)
+        create(:ci_pipeline, user: user, failure_reason: :user_not_verified, created_at: pipeline_created_at)
+      end
+
+      context 'when failing a pipeline after dismissing the alert' do
+        let(:pipeline_created_at) { 2.days.from_now }
+
+        it { is_expected.to eq(true) }
+      end
+
+      context 'when dismissing the alert after failing a pipeline' do
+        let(:pipeline_created_at) { 2.days.ago }
+
+        it { is_expected.to eq(false) }
+      end
+    end
+  end
 end

ee/spec/models/ee/user_spec.rb

@@ -2000,6 +2000,28 @@ RSpec.describe User do
     end
   end
 
+  describe '#has_valid_credit_card?' do
+    it 'returns true when a credit card validation is present' do
+      credit_card_validation = build(:credit_card_validation, credit_card_validated_at: Time.current)
+      user = build(:user, credit_card_validation: credit_card_validation)
+
+      expect(user.has_valid_credit_card?).to be_truthy
+    end
+
+    it 'returns false when a credit card validation is present, but the credit_card_validated_at attribute is blank' do
+      credit_card_validation = build(:credit_card_validation, credit_card_validated_at: nil)
+      user = build(:user, credit_card_validation: credit_card_validation)
+
+      expect(user.has_valid_credit_card?).to be_falsey
+    end
+
+    it 'returns false when a credit card validation is missing' do
+      user = build(:user, credit_card_validation: nil)
+
+      expect(user.has_valid_credit_card?).to be_falsey
+    end
+  end
+
   describe '#activate_based_on_user_cap?' do
     using RSpec::Parameterized::TableSyntax
 

locale/gitlab.pot

@@ -38327,6 +38327,18 @@ msgstr ""
 msgid "Verification status"
 msgstr ""
 
+msgid "VerificationReminder|Pipeline failing? To keep GitLab spam and abuse free we ask that you verify your identity with a valid payment method."
+msgstr ""
+
+msgid "VerificationReminder|Until then, free pipeline minutes on shared runners are unavailable. %{validateLinkStart}Validate your account%{validateLinkEnd} or %{docsLinkStart}use your own runners%{docsLinkEnd}."
+msgstr ""
+
+msgid "VerificationReminder|Your account has been validated."
+msgstr ""
+
+msgid "VerificationReminder|You’ll now be able to take advantage of free pipeline minutes on shared runners."
+msgstr ""
+
 msgid "Verified"
 msgstr ""