1 files changed, 45 insertions, 14 deletions

diff --git a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
index 0786a74f6b1..e4edb950a1e 100644
--- a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
+++ b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
@@ -1,15 +1,23 @@
 <script>
 import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 const DEFAULT_ERROR_MESSAGE = __('An error occurred while updating the configuration.');
+const REQUIRES_VALIDATION_TEXT = s__(
+  `Billings|Shared runners cannot be enabled until a valid credit card is on file.`,
+);
 
 export default {
+  i18n: {
+    REQUIRES_VALIDATION_TEXT,
+  },
   components: {
     GlAlert,
     GlToggle,
     GlTooltip,
+    CcValidationRequiredAlert: () =>
+      import('ee_component/billings/components/cc_validation_required_alert.vue'),
   },
   props: {
     isDisabledAndUnoverridable: {
@@ -20,6 +28,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isCreditCardValidationRequired: {
+      type: Boolean,
+      required: false,
+    },
     updatePath: {
       type: String,
       required: true,
@@ -28,14 +40,24 @@ export default {
   data() {
     return {
       isLoading: false,
-      isSharedRunnerEnabled: false,
+      isSharedRunnerEnabled: this.isEnabled,
       errorMessage: null,
+      successfulValidation: false,
     };
   },
-  created() {
-    this.isSharedRunnerEnabled = this.isEnabled;
+  computed: {
+    showCreditCardValidation() {
+      return (
+        this.isCreditCardValidationRequired &&
+        !this.isSharedRunnerEnabled &&
+        !this.successfulValidation
+      );
+    },
   },
   methods: {
+    creditCardValidated() {
+      this.successfulValidation = true;
+    },
     toggleSharedRunners() {
       this.isLoading = true;
       this.errorMessage = null;
@@ -61,16 +83,25 @@ export default {
       <gl-alert v-if="errorMessage" class="gl-mb-3" variant="danger" :dismissible="false">
         {{ errorMessage }}
       </gl-alert>
-      <div ref="sharedRunnersToggle">
-        <gl-toggle
-          :disabled="isDisabledAndUnoverridable"
-          :is-loading="isLoading"
-          :label="__('Enable shared runners for this project')"
-          :value="isSharedRunnerEnabled"
-          data-testid="toggle-shared-runners"
-          @change="toggleSharedRunners"
-        />
-      </div>
+
+      <cc-validation-required-alert
+        v-if="showCreditCardValidation"
+        class="gl-pb-5"
+        :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT"
+        @verifiedCreditCard="creditCardValidated"
+      />
+
+      <gl-toggle
+        v-else
+        ref="sharedRunnersToggle"
+        :disabled="isDisabledAndUnoverridable"
+        :is-loading="isLoading"
+        :label="__('Enable shared runners for this project')"
+        :value="isSharedRunnerEnabled"
+        data-testid="toggle-shared-runners"
+        @change="toggleSharedRunners"
+      />
+
       <gl-tooltip v-if="isDisabledAndUnoverridable" :target="() => $refs.sharedRunnersToggle">
         {{ __('Shared runners are disabled on group level') }}
       </gl-tooltip>