Customize message in credit card validation

This allows the text in the shared runners settings much more concise.

app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue

 <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,
@@ -74,19 +80,23 @@ export default {
         {{ errorMessage }}
       </gl-alert>
 
-      <div v-if="isCcValidationRequired && !isSharedRunnerEnabled">
-        <cc-validation-required-alert class="gl-pb-5" @verifiedCreditCard="creditCardValidated" />
-      </div>
-      <div v-else 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="isCcValidationRequired && !isSharedRunnerEnabled"
+        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') }}

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

@@ -28,6 +28,13 @@ export default {
     GlLink,
     AccountVerificationModal,
   },
+  props: {
+    customMessage: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
   data() {
     return {
       shouldRenderSuccess: false,
@@ -73,7 +80,10 @@ export default {
       :primary-button-text="$options.i18n.dangerAlert.primaryButtonText"
       @primaryAction="showModal"
     >
-      <gl-sprintf :message="$options.i18n.dangerAlert.text">
+      <template v-if="customMessage" class="gl-m-0">
+        {{ customMessage }}
+      </template>
+      <gl-sprintf v-else :message="$options.i18n.dangerAlert.text">
         <template #strong="{ content }">
           <strong>{{ content }}</strong>
         </template>

locale/gitlab.pot

@@ -5117,6 +5117,9 @@ msgstr ""
 msgid "BillingPlan|Upgrade for free"
 msgstr ""
 
+msgid "Billings|Shared runners cannot be enabled until a valid credit card is on file."
+msgstr ""
+
 msgid "Billings|To use free pipeline minutes on shared runners, you’ll need to validate your account with a credit or debit card. If you prefer not to provide one, you can run pipelines by bringing your own runners and disabling shared runners for your project. This is required to discourage and reduce abuse on GitLab infrastructure. %{strongStart}GitLab will not charge or store your card, it will only be used for validation.%{strongEnd} %{linkStart}Learn more%{linkEnd}."
 msgstr ""
 

spec/frontend/projects/settings/components/shared_runners_toggle_spec.js

@@ -31,7 +31,7 @@ describe('projects/settings/components/shared_runners', () => {
   const findErrorAlert = () => wrapper.find(GlAlert);
   const findSharedRunnersToggle = () => wrapper.find(GlToggle);
   const findToggleTooltip = () => wrapper.find(GlTooltip);
-  const findCcValidationRequiredAlert = () => wrapper.find(CcValidationRequiredAlert);
+  const findCcValidationRequiredAlert = () => wrapper.findComponent(CcValidationRequiredAlert);
   const getToggleValue = () => findSharedRunnersToggle().props('value');
   const isToggleLoading = () => findSharedRunnersToggle().props('isLoading');
   const isToggleDisabled = () => findSharedRunnersToggle().props('disabled');
@@ -178,6 +178,9 @@ describe('projects/settings/components/shared_runners', () => {
 
     it('credit card validation component should exist', () => {
       expect(findCcValidationRequiredAlert().exists()).toBe(true);
+      expect(findCcValidationRequiredAlert().text()).toBe(
+        SharedRunnersToggleComponent.i18n.REQUIRES_VALIDATION_TEXT,
+      );
     });
 
     describe('when credit card is validated', () => {