Tracking for hand raise lead modal

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue

@@ -11,6 +11,7 @@ import {
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import countriesQuery from 'ee/subscriptions/graphql/queries/countries.query.graphql';
 import statesQuery from 'ee/subscriptions/graphql/queries/states.query.graphql';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
@@ -30,6 +31,7 @@ export default {
     GlModal: GlModalDirective,
     autofocusonshow,
   },
+  mixins: [Tracking.mixin()],
   props: {
     namespaceId: {
       type: Number,
@@ -102,6 +104,11 @@ export default {
         text: this.$options.i18n.modalCancel,
       };
     },
+    tracking() {
+      return {
+        label: 'hand_raise_lead_form',
+      };
+    },
     showState() {
       return !this.$apollo.loading.states && this.states && this.country && this.mustEnterState;
     },
@@ -167,6 +174,7 @@ export default {
             type: FLASH_TYPES.SUCCESS,
           });
           this.clearForm();
+          this.track('hand_raise_submit_form_succeeded');
         })
         .catch((error) => {
           createFlash({
@@ -174,6 +182,7 @@ export default {
             captureError: true,
             error,
           });
+          this.track('hand_raise_submit_form_failed');
         })
         .finally(() => {
           this.isLoading = false;
@@ -202,6 +211,8 @@ export default {
       :action-primary="actionPrimary"
       :action-cancel="actionCancel"
       @primary="submit"
+      @cancel="track('hand_raise_form_canceled')"
+      @change="track('hand_raise_form_viewed')"
     >
       {{ modalHeaderText }}
       <div class="combined d-flex gl-mt-5">

ee/config/events/groups__billings_controller_hand_raise_form_canceled.yml

+---
+description: Hand raise form cancelled
+category: default
+action: hand_raise_form_canceled
+label_description: hand_raise_lead_form
+property_description:
+value_description:
+extra_properties:
+identifiers:
+#- project
+#- user
+#- namespace
+product_section: dev
+product_stage: fulfillment
+product_group: group::conversion
+product_category: billing
+milestone: "14.5"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72725
+distributions:
+- ee
+tiers:
+- premium
+- ultimate

ee/config/events/groups__billings_controller_hand_raise_form_viewed.yml

+---
+description: Hand raise form viewed
+category: default
+action: hand_raise_form_viewed
+label_description: hand_raise_lead_form
+property_description:
+value_description:
+extra_properties:
+identifiers:
+#- project
+#- user
+#- namespace
+product_section: dev
+product_stage: fulfillment
+product_group: group::conversion
+product_category: billing
+milestone: "14.5"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72725
+distributions:
+- ee
+tiers:
+- premium
+- ultimate

ee/config/events/groups__billings_controller_hand_raise_submit_form_failed.yml

+---
+description: Hand raise submit form failed
+category: default
+action: hand_raise_submit_form_failed
+label_description: hand_raise_lead_form
+property_description:
+value_description:
+extra_properties:
+identifiers:
+#- project
+#- user
+#- namespace
+product_section: dev
+product_stage: fulfillment
+product_group: group::conversion
+product_category: billing
+milestone: "14.5"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72725
+distributions:
+- ee
+tiers:
+- premium
+- ultimate

ee/config/events/groups__billings_controller_hand_raise_submit_form_succeeded.yml

+---
+description: Hand raise submit form succeeded
+category: default
+action: hand_raise_submit_form_succeeded
+label_description: hand_raise_lead_form
+property_description:
+value_description:
+extra_properties:
+identifiers:
+#- project
+#- user
+#- namespace
+product_section: dev
+product_stage: fulfillment
+product_group: group::conversion
+product_category: billing
+milestone: "14.5"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72725
+distributions:
+- ee
+tiers:
+- premium
+- ultimate

ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js

@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import { sprintf } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { mockTracking } from 'helpers/tracking_helper';
 import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue';
 import { i18n } from 'ee/hand_raise_leads/hand_raise_lead/constants';
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
@@ -15,6 +16,7 @@ localVue.use(VueApollo);
 describe('HandRaiseLeadButton', () => {
   let wrapper;
   let fakeApollo;
+  let trackingSpy;
 
   const createComponent = (props = {}) => {
     const mockResolvers = {
@@ -52,6 +54,7 @@ describe('HandRaiseLeadButton', () => {
   describe('rendering', () => {
     beforeEach(() => {
       wrapper = createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it('does not have loading icon', () => {
@@ -91,6 +94,14 @@ describe('HandRaiseLeadButton', () => {
         text: i18n.modalCancel,
       });
     });
+
+    it('tracks modal view', async () => {
+      await findModal().vm.$emit('change');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'hand_raise_form_viewed', {
+        label: 'hand_raise_lead_form',
+      });
+    });
   });
 
   describe('submit button', () => {
@@ -129,32 +140,72 @@ describe('HandRaiseLeadButton', () => {
     });
   });
 
-  describe('form submission', () => {
-    beforeEach(() => {
+  describe('form', () => {
+    beforeEach(async () => {
       wrapper = createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
+      wrapper.setData({ countries, states, country: 'US', ...formData, comment: 'comment' });
     });
 
-    it('primary submits the valid form', async () => {
-      jest.spyOn(SubscriptionsApi, 'sendHandRaiseLead').mockResolvedValue(1);
+    describe('successful submission', () => {
+      beforeEach(async () => {
+        jest.spyOn(SubscriptionsApi, 'sendHandRaiseLead').mockResolvedValue();
 
-      wrapper.setData({ countries, states, country: 'US', ...formData, comment: 'comment' });
+        findModal().vm.$emit('primary');
+      });
 
-      await wrapper.vm.$nextTick();
+      it('primary submits the valid form', async () => {
+        expect(SubscriptionsApi.sendHandRaiseLead).toHaveBeenCalledWith({
+          namespaceId: 1,
+          comment: 'comment',
+          ...formData,
+        });
+      });
 
-      findModal().vm.$emit('primary');
+      it('clears the form after submission', async () => {
+        ['first-name', 'last-name', 'company-name', 'phone-number'].forEach((f) =>
+          expect(wrapper.findByTestId(f).attributes('value')).toBe(''),
+        );
 
-      await wrapper.vm.$nextTick();
+        ['company-size', 'country'].forEach((f) =>
+          expect(wrapper.findByTestId(f).attributes('value')).toBe(undefined),
+        );
 
-      expect(SubscriptionsApi.sendHandRaiseLead).toHaveBeenCalledWith({
-        namespaceId: 1,
-        comment: 'comment',
-        ...formData,
+        expect(wrapper.findByTestId('state').exists()).toBe(false);
       });
 
-      ['firstName', 'lastName', 'companyName', 'phoneNumber'].forEach((f) =>
-        expect(wrapper.vm[f]).toBe(''),
-      );
-      ['companySize', 'country', 'state'].forEach((f) => expect(wrapper.vm[f]).toBe(null));
+      it('tracks successful submission', async () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'hand_raise_submit_form_succeeded', {
+          label: 'hand_raise_lead_form',
+        });
+      });
+    });
+
+    describe('failed submission', () => {
+      beforeEach(async () => {
+        jest.spyOn(SubscriptionsApi, 'sendHandRaiseLead').mockRejectedValue();
+
+        findModal().vm.$emit('primary');
+      });
+
+      it('tracks failed submission', async () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'hand_raise_submit_form_failed', {
+          label: 'hand_raise_lead_form',
+        });
+      });
+    });
+
+    describe('form cancel', () => {
+      beforeEach(async () => {
+        findModal().vm.$emit('cancel');
+      });
+
+      it('tracks failed submission', async () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'hand_raise_form_canceled', {
+          label: 'hand_raise_lead_form',
+        });
+      });
     });
   });
 });