Update errors for Subscription Activation Alert

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_activation_errors.vue

@@ -5,8 +5,12 @@ import {
   CONNECTIVITY_ERROR,
   connectivityErrorAlert,
   connectivityIssue,
-  generalActivationError,
+  generalActivationErrorMessage,
+  generalActivationErrorTitle,
   howToActivateSubscription,
+  INVALID_CODE_ERROR,
+  invalidActivationCode,
+  supportLink,
 } from '../constants';
 
 export const troubleshootingHelpLink = helpPagePath('user/admin_area/license.html', {
@@ -20,11 +24,14 @@ export default {
     connectivityIssueTitle: connectivityIssue,
     connectivityIssueSubtitle: connectivityErrorAlert.subtitle,
     connectivityIssueHelpText: connectivityErrorAlert.helpText,
-    generalActivationError,
+    generalActivationErrorMessage,
+    generalActivationErrorTitle,
     howToActivateSubscription,
+    invalidActivationCode,
   },
   links: {
     subscriptionActivationHelpLink,
+    supportLink,
     troubleshootingHelpLink,
   },
   components: {
@@ -40,20 +47,26 @@ export default {
     },
   },
   computed: {
-    hasConnectivityIssue() {
+    hasConnectivityIssueError() {
       return this.error === CONNECTIVITY_ERROR;
     },
+    hasError() {
+      return this.error;
+    },
     hasGeneralError() {
-      return this.error && !this.hasConnectivityIssue;
+      return ![CONNECTIVITY_ERROR, INVALID_CODE_ERROR].includes(this.error);
+    },
+    hasInvalidCodeError() {
+      return this.error === INVALID_CODE_ERROR;
     },
   },
 };
 </script>
 
 <template>
-  <div>
+  <div v-if="hasError" data-testid="root">
     <gl-alert
-      v-if="hasConnectivityIssue"
+      v-if="hasConnectivityIssueError"
       variant="danger"
       :title="$options.i18n.connectivityIssueTitle"
       :dismissible="false"
@@ -80,19 +93,37 @@ export default {
         </template>
       </gl-sprintf>
     </gl-alert>
+    <gl-alert
+      v-if="hasInvalidCodeError"
+      variant="danger"
+      :title="$options.i18n.generalActivationErrorTitle"
+      :dismissible="false"
+      data-testid="invalid-activation-error-alert"
+    >
+      <gl-sprintf :message="$options.i18n.invalidActivationCode">
+        <template #link="{ content }">
+          <gl-link :href="$options.links.subscriptionActivationHelpLink" target="_blank">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <gl-alert
       v-if="hasGeneralError"
       variant="danger"
-      :title="$options.i18n.generalActivationError"
+      :title="$options.i18n.generalActivationErrorTitle"
       :dismissible="false"
       data-testid="general-error-alert"
     >
-      <gl-sprintf :message="$options.i18n.howToActivateSubscription">
-        <template #link="{ content }">
+      <gl-sprintf :message="$options.i18n.generalActivationErrorMessage">
+        <template #activationLink="{ content }">
           <gl-link :href="$options.links.subscriptionActivationHelpLink" target="_blank">{{
             content
           }}</gl-link>
         </template>
+        <template #supportLink="{ content }">
+          <gl-link :href="$options.links.supportLink" target="_blank">{{ content }}</gl-link>
+        </template>
       </gl-sprintf>
     </gl-alert>
   </div>

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_activation_form.vue

@@ -12,6 +12,8 @@ import validation from '~/vue_shared/directives/validation';
 import {
   activateLabel,
   fieldRequiredMessage,
+  INVALID_CODE_ERROR,
+  INVALID_CODE_ERROR_MESSAGE,
   subscriptionActivationForm,
   subscriptionQueries,
 } from '../constants';
@@ -103,6 +105,9 @@ export default {
           const errors = getErrorsAsData(res);
           if (errors.length) {
             const [error] = errors;
+            if (error.includes(INVALID_CODE_ERROR_MESSAGE)) {
+              throw new Error(INVALID_CODE_ERROR);
+            }
             throw new Error(error);
           }
           this.$emit(SUBSCRIPTION_ACTIVATION_SUCCESS_EVENT);

ee/app/assets/javascripts/pages/admin/cloud_licenses/constants.js

@@ -115,10 +115,18 @@ export const buySubscriptionCard = {
   buttonLabel: s__('SuperSonics|Buy subscription'),
 };
 
+export const INVALID_CODE_ERROR_MESSAGE = 'invalid activation code';
 export const CONNECTIVITY_ERROR = 'CONNECTIVITY_ERROR';
-export const generalActivationError = s__(
+export const INVALID_CODE_ERROR = 'INVALID_CODE_ERROR';
+export const generalActivationErrorTitle = s__(
   'SuperSonics|An error occurred while activating your subscription.',
 );
+export const generalActivationErrorMessage = s__(
+  'SuperSonics|You can learn more about %{activationLinkStart}activating your subscription%{activationLinkEnd}. If you need further assistance, please %{supportLinkStart}contact GitLab Support%{supportLinkEnd}.',
+);
+export const invalidActivationCode = s__(
+  'SuperSonics|The activation code is not valid. Please make sure to copy it exactly from the Customers Portal or confirmation email. Learn more about %{linkStart}activating your subscription%{linkEnd}.',
+);
 export const connectivityErrorAlert = {
   subtitle: s__(
     'SuperSonics|To activate your subscription, connect to GitLab servers through the %{linkStart}Cloud Licensing%{linkEnd} service, a hassle-free way to manage your subscription.',
@@ -127,3 +135,4 @@ export const connectivityErrorAlert = {
     'SuperSonics|Get help for the most common connectivity issues by %{linkStart}troubleshooting the activation code%{linkEnd}.',
   ),
 };
+export const supportLink = 'https://about.gitlab.com/support/#contact-support';

ee/spec/frontend/admin/cloud_licenses/components/subscription_activation_errors_spec.js

 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import {
+import SubscriptionActivationErrors, {
   subscriptionActivationHelpLink,
   troubleshootingHelpLink,
-} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_card.vue';
-import SubscriptionActivationErrors from 'ee/pages/admin/cloud_licenses/components/subscription_activation_errors.vue';
+} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_errors.vue';
 import {
   CONNECTIVITY_ERROR,
-  connectivityIssue,
-  generalActivationError,
+  generalActivationErrorMessage,
+  generalActivationErrorTitle,
+  invalidActivationCode,
+  INVALID_CODE_ERROR,
+  supportLink,
 } from 'ee/pages/admin/cloud_licenses/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
@@ -17,6 +19,8 @@ describe('SubscriptionActivationErrors', () => {
 
   const findConnectivityErrorAlert = () => wrapper.findByTestId('connectivity-error-alert');
   const findGeneralErrorAlert = () => wrapper.findByTestId('general-error-alert');
+  const findInvalidActivationCode = () => wrapper.findByTestId('invalid-activation-error-alert');
+  const findRoot = () => wrapper.findByTestId('root');
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = extendedWrapper(
@@ -33,25 +37,53 @@ describe('SubscriptionActivationErrors', () => {
     wrapper.destroy();
   });
 
-  describe('connectivity error', () => {
+  describe('with no error', () => {
     beforeEach(() => {
-      createComponent({ props: { error: CONNECTIVITY_ERROR } });
+      createComponent();
     });
 
-    it('shows the alert', () => {
-      expect(findConnectivityErrorAlert().props('title')).toBe(connectivityIssue);
+    it('should not render the component', () => {
+      expect(findRoot().exists()).toBe(false);
+    });
+  });
+
+  describe('connectivity error', () => {
+    beforeEach(() => {
+      createComponent({ props: { error: CONNECTIVITY_ERROR } });
     });
 
     it('shows some help links', () => {
       const alert = findConnectivityErrorAlert();
 
-      expect(alert.findAllComponents(GlLink).at(0).props('href')).toBe(
+      expect(alert.findAllComponents(GlLink).at(0).attributes('href')).toBe(
         subscriptionActivationHelpLink,
       );
-      expect(alert.findAllComponents(GlLink).at(1).props('href')).toBe(troubleshootingHelpLink);
+      expect(alert.findAllComponents(GlLink).at(1).attributes('href')).toBe(
+        troubleshootingHelpLink,
+      );
+    });
+
+    it('does not show other alerts', () => {
+      expect(findGeneralErrorAlert().exists()).toBe(false);
+      expect(findInvalidActivationCode().exists()).toBe(false);
+    });
+  });
+
+  describe('invalid activation code error', () => {
+    beforeEach(() => {
+      createComponent({ props: { error: INVALID_CODE_ERROR } });
+    });
+
+    it('shows the alert', () => {
+      expect(findInvalidActivationCode().attributes('title')).toBe(generalActivationErrorTitle);
+    });
+
+    it('shows a text to help the user', () => {
+      expect(findInvalidActivationCode().text()).toMatchInterpolatedText(invalidActivationCode);
     });
 
     it('does not show other alerts', () => {
+      expect(findConnectivityErrorAlert().exists()).toBe(false);
       expect(findGeneralErrorAlert().exists()).toBe(false);
     });
   });
@@ -62,21 +94,26 @@ describe('SubscriptionActivationErrors', () => {
     });
 
     it('shows a general error alert', () => {
-      expect(findGeneralErrorAlert().props('title')).toBe(generalActivationError);
+      expect(findGeneralErrorAlert().props('title')).toBe(generalActivationErrorTitle);
     });
 
-    it('shows a help link', () => {
-      expect(findGeneralErrorAlert().findComponent(GlLink).props('href')).toBe(
+    it('shows some help links', () => {
+      const alert = findGeneralErrorAlert();
+
+      expect(alert.findAllComponents(GlLink).at(0).attributes('href')).toBe(
         subscriptionActivationHelpLink,
       );
+
+      expect(alert.findAllComponents(GlLink).at(1).attributes('href')).toBe(supportLink);
     });
 
-    it('shows a a text to help the user', () => {
-      expect(findGeneralErrorAlert().text()).toBe('Learn how to activate your subscription.');
+    it('shows a text to help the user', () => {
+      expect(findGeneralErrorAlert().text()).toMatchInterpolatedText(generalActivationErrorMessage);
     });
 
     it('does not show the connectivity alert', () => {
       expect(findConnectivityErrorAlert().exists()).toBe(false);
+      expect(findInvalidActivationCode().exists()).toBe(false);
     });
   });
 });

ee/spec/frontend/admin/cloud_licenses/components/subscription_activation_form_spec.js

@@ -8,6 +8,7 @@ import SubscriptionActivationForm, {
 import {
   CONNECTIVITY_ERROR,
   fieldRequiredMessage,
+  INVALID_CODE_ERROR,
   subscriptionQueries,
 } from 'ee/pages/admin/cloud_licenses/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -179,6 +180,24 @@ describe('CloudLicenseApp', () => {
       });
     });
 
+    describe('when the mutation is not successful with invalid activation code error', () => {
+      const mutationMock = jest
+        .fn()
+        .mockResolvedValue(activateLicenseMutationResponse.INVALID_CODE_ERROR);
+      beforeEach(async () => {
+        createComponentWithApollo({ mutationMock });
+        await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
+        await findAgreementCheckbox().vm.$emit('input', true);
+        findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
+      });
+
+      it('emits an failure event with a connectivity error payload', () => {
+        expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toEqual([
+          [INVALID_CODE_ERROR],
+        ]);
+      });
+    });
+
     describe('when the mutation request fails', () => {
       const mutationMock = jest.fn().mockRejectedValue(activateLicenseMutationResponse.FAILURE);
       beforeEach(() => {

ee/spec/frontend/admin/cloud_licenses/mock_data.js

@@ -81,6 +81,15 @@ export const activateLicenseMutationResponse = {
       },
     },
   },
+  INVALID_CODE_ERROR: {
+    data: {
+      gitlabSubscriptionActivate: {
+        license: null,
+        errors: ['invalid activation code'],
+        __typename: 'GitlabSubscriptionActivatePayload',
+      },
+    },
+  },
   ERRORS_AS_DATA: {
     data: {
       gitlabSubscriptionActivate: {

locale/gitlab.pot

@@ -31663,6 +31663,9 @@ msgstr ""
 msgid "SuperSonics|Sync subscription details"
 msgstr ""
 
+msgid "SuperSonics|The activation code is not valid. Please make sure to copy it exactly from the Customers Portal or confirmation email. Learn more about %{linkStart}activating your subscription%{linkEnd}."
+msgstr ""
+
 msgid "SuperSonics|The subscription details synced successfully."
 msgstr ""
 
@@ -31699,6 +31702,9 @@ msgstr ""
 msgid "SuperSonics|Valid From"
 msgstr ""
 
+msgid "SuperSonics|You can learn more about %{activationLinkStart}activating your subscription%{activationLinkEnd}. If you need further assistance, please %{supportLinkStart}contact GitLab Support%{supportLinkEnd}."
+msgstr ""
+
 msgid "SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}."
 msgstr ""