CSR-705 value logging masking type

- value logging masking type
- added to other components under button-questions
- added logging for radio as it was missing (only fires onchange of radio which is different than others although arguably more right...

src/common-components/button-question/button-question.vue

@@ -36,6 +36,7 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
+              :valueToLogType="valueToLogType"
             />
             <!-- For nested questions --> 
             <transition name="fade" mode="out-in">
@@ -91,6 +92,7 @@ export default {
     validationRules: String,
     suppressError: Boolean,
     useTextForValue: Boolean,
+    valueToLogType: String,
   },
   computed: {
     formattedGroupName() {

src/constants/analytics.js

@@ -29,5 +29,8 @@ const GaLabels = {
   ADDRESS_LOOKUP: 'Address_Look_up', 
 };
 
+const ValueToLogTypes = {
+  LAST_5: "last_5",
+}
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes };

src/helpers/unit-test-helper.js

@@ -7,7 +7,7 @@ import { cookieNames } from "@/constants/cookie-names";
 import { Form } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin";
 import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, LabelToLogTypes } from "@/constants/analytics";
 import { queryStrings } from "@/constants/query-strings";
 import { routerParams } from "@/router/router-constants/router-params";
 
@@ -48,6 +48,7 @@ export function getMountOptions(mockData) {
   mocks.GaActions = GaActions;
   mocks.GaLabels = GaLabels;
   mocks.GaEvents = GaEvents;
+  mocks.ValueToLogTypes = ValueToLogTypes;
   mocks.queryStrings = queryStrings;
   mocks.routerParams = routerParams;
 

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -8,6 +8,7 @@
     v-model="selectedVehicleVinAsArray"
     isRequired
     :validation-rules="validationRules"
+    valueToLogType="last_5"
   />
   <alert ref="differentVehicleAlert"
     v-if="isCarIdDifferent"

src/mixins/analytics-mixin.js

@@ -2,7 +2,7 @@ import { storeActions } from "@/constants/store-actions";
 import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { experimentSettings } from "@/constants/experiments";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 import { cookieNames } from "@/constants/cookie-names";
 
 import baseMixin from "@/mixins/base-mixin";
@@ -42,13 +42,14 @@ export default {
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
-    pushEventToGA(category, action, label, pushToLogApp = false) {
+    pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
       const currentPageName = getPageNameByQueryString();
+      const labelToLog = getValueToLog(label, valueToLogType);
       const eventToBePushed = {
         'event': GaEvents.GENERIC_EVENT,
         'category': category,
         'action': action,
-        'label': label,
+        'label': labelToLog,
         'value': undefined,
         'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
@@ -56,7 +57,7 @@ export default {
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
-          this.logCustomEvent(category, action, label, undefined); 
+          this.logCustomEvent(category, action, labelToLog, undefined); 
       }
 
     },
@@ -145,6 +146,9 @@ export default {
     },
     GaLabels() {
       return GaLabels;
+    },
+    ValueToLogTypes() {
+      return ValueToLogTypes;
     }
   },
 };
@@ -164,3 +168,10 @@ function getPageNameByQueryString() {
     return '';
   }
 }
+
+function getValueToLog(value, valueToLogType) {
+  if (valueToLogType != null && valueToLogType === ValueToLogTypes.LAST_5 ) {
+    return value.slice(-5);
+  }
+  return value;
+}

src/mixins/analytics-mixin.spec.js

@@ -1,7 +1,7 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 
 describe("analyticsMixin.js", () => {
   test("logPageView: calls dispatch with type and payload", () => {
@@ -39,21 +39,71 @@ describe("analyticsMixin.js", () => {
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
 
-  test("pushEventToGA, should call logEvent too", () => {
+  test("pushEventToGA, should call dataLayer push and logCustomEvent too", () => {
     // Arrange
+    window.dataLayer = [];
     const mockData = {
       actionList: [{
         actionName: storeActions.LOG_CUSTOM_EVENT
       }],
     }
     const mocks = setupMocksForJsFiles(mockData);
+    var mockDataLayer = [];
+    mockDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: 'label',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
 
     // Act
     analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
 
     // Assert
+    expect(mockDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+  });
 
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 only logs last 5 of label", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '33333',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '1111122222333333', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
+  });
+
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 logs only the last 3 characters for a 3 character string", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '111',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '111', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
   });
 
   test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -78,6 +78,7 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -116,7 +117,7 @@ export default {
           this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-button/list-button.vue

@@ -74,10 +74,12 @@ export default {
     // Field initial value
       type: [String, Number],
       default: "",
-    },
+      },
+    
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -111,7 +113,7 @@ export default {
         this.displayLoader();
         this.handleCheckChange();
       }
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-card/list-card.vue

@@ -88,6 +88,7 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -146,7 +147,7 @@ export default {
         this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/radio/radio.vue

@@ -25,6 +25,8 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
+
 export default {
   name: "radio",
   props: {
@@ -39,7 +41,8 @@ export default {
     screenReaderOnlyText: String,
     selectedValues: String,
     hasError: Boolean,
-    validationRules: String
+    validationRules: String,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -63,6 +66,8 @@ export default {
         buttonID: this.buttonID && this.buttonID.toString(),
       };
 
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
+
       this.$emit("isCheckedChanged", emitEvent);
       this.$emit("update:modelValue", emitEvent);
     },