Merge branch 'vs/track-zuora-cc-events' into 'master'

Track Zuora CC validation events

See merge request gitlab-org/gitlab!83929

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

 <script>
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
+import Tracking from '~/tracking';
 import { objectToQuery } from '~/lib/utils/url_utility';
 
 const ZUORA_CLIENT_ERROR_HEIGHT = 15;
 const IFRAME_QUERY = Object.freeze({
   enable_submit: false,
   user_id: null,
+  location: null,
 });
+
 const I18N = {
   iframeNotSupported: __('Your browser does not support iFrames'),
 };
@@ -17,6 +20,7 @@ export default {
     GlLoadingIcon,
     GlAlert,
   },
+  mixins: [Tracking.mixin({ category: 'Zuora_cc' })],
   props: {
     iframeUrl: {
       type: String,
@@ -40,7 +44,11 @@ export default {
   },
   computed: {
     iframeSrc() {
-      const query = { ...IFRAME_QUERY, user_id: gon.current_user_id };
+      const query = {
+        ...IFRAME_QUERY,
+        user_id: gon.current_user_id,
+        location: btoa(window.location.href),
+      };
 
       return `${this.iframeUrl}?${objectToQuery(query)}`;
     },
@@ -55,6 +63,7 @@ export default {
   },
   methods: {
     handleFrameLoaded() {
+      this.track('iframe_loaded');
       this.isLoading = false;
       window.addEventListener('message', this.handleFrameMessages, true);
     },
@@ -71,13 +80,16 @@ export default {
       }
 
       if (event.data.success) {
+        this.track('success');
         this.$emit('success');
       } else if (parseInt(event.data.code, 10) < 7) {
         // 0-6 error codes mean client-side validation error after submit,
         // no need to reload the iframe and emit the failure event
         // Add a 15px height to the iframe to accomodate the error message
         this.iframeHeight += ZUORA_CLIENT_ERROR_HEIGHT;
+        this.track('client_error');
       } else if (parseInt(event.data.code, 10) > 6) {
+        this.track('error');
         this.error = event.data.msg;
         window.removeEventListener('message', this.handleFrameMessages, true);
         this.$refs.zuora.src = this.iframeSrc;

ee/spec/frontend/billings/components/zuora_spec.js

 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Zuora from 'ee/billings/components/zuora.vue';
+import { mockTracking } from 'helpers/tracking_helper';
 
 describe('Zuora', () => {
   let wrapper;
+  let addEventListenerSpy;
+  let postMessageSpy;
+  let removeEventListenerSpy;
+  let trackingSpy;
 
   const createComponent = (data = {}) => {
     wrapper = shallowMount(Zuora, {
@@ -16,15 +21,12 @@ describe('Zuora', () => {
         return data;
       },
     });
+
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   };
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAlert = () => wrapper.findComponent(GlAlert);
-
-  let addEventListenerSpy;
-  let postMessageSpy;
-  let removeEventListenerSpy;
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -57,6 +59,12 @@ describe('Zuora', () => {
         true,
       );
     });
+
+    it('tracks frame_loaded event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith('Zuora_cc', 'iframe_loaded', {
+        category: 'Zuora_cc',
+      });
+    });
   });
 
   describe('on submit', () => {
@@ -122,6 +130,10 @@ describe('Zuora', () => {
       it('emits the success event', () => {
         expect(wrapper.emitted('success')).toBeDefined();
       });
+
+      it('tracks success event', () => {
+        expect(trackingSpy).toHaveBeenCalledWith('Zuora_cc', 'success', { category: 'Zuora_cc' });
+      });
     });
 
     describe('when not from an allowed origin', () => {
@@ -151,6 +163,12 @@ describe('Zuora', () => {
       it('increases the iframe height', () => {
         expect(wrapper.vm.iframeHeight).toBe(315);
       });
+
+      it('tracks client side Zuora error', () => {
+        expect(trackingSpy).toHaveBeenCalledWith('Zuora_cc', 'client_error', {
+          category: 'Zuora_cc',
+        });
+      });
     });
 
     describe('when failure and code greater than 6', () => {
@@ -178,6 +196,10 @@ describe('Zuora', () => {
           true,
         );
       });
+
+      it('tracks Zuora error', () => {
+        expect(trackingSpy).toHaveBeenCalledWith('Zuora_cc', 'error', { category: 'Zuora_cc' });
+      });
     });
   });