Merge remote-tracking branch 'origin/develop' into feature/CSR-240

azure-pipelines.yml

@@ -79,6 +79,7 @@ stages:
                       __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
+                      __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
                     indexDeployVariables:
                       __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
@@ -119,4 +120,8 @@ stages:
                       __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
+                      __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                    indexDeployVariables:
+                      __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                      __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)

src/constants/application-config.js

@@ -4,7 +4,8 @@ const applicationConfig = {
   GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
   ANALYTICS_SESSION_TIMEOUT_MINUTES: 30,
   SAVED_SESSION_TIMEOUT_DAYS: 45,
-  COOKIE_PATH: "/"
+  COOKIE_PATH: "/",
+  CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT  // "Localhost", "Dev", "QA", and "Prod"
 };
 
 export { applicationConfig };

src/constants/cookie-names.js

@@ -1,5 +1,7 @@
+import { applicationConfig } from "@/constants/application-config.js"
+
 const cookieNames = {
-    FUNNEL_SESSION_INFO: "FunnelSessionInfo",
+    FUNNEL_SESSION_INFO: `FunnelSessionInfo-${applicationConfig.CURRENT_ENVIRONMENT}`,
     
     // Existing Safelite.com cookies
     DXDEV: "dxdev",

src/constants/endpoints.js

@@ -71,8 +71,12 @@ const endpoints = {
     url: "/analytics/api/v1/analytics/log-experiment-exposure",
     method: "POST",
   },
-  LogActivity:{
+  LogPageView:{
-    url: "/analytics/api/v1/analytics/activity",
+    url: "/analytics/api/v1/analytics/log-page-view",
+    method: "POST",
+  },
+  LogCustomEvent:{
+    url: "/analytics/api/v1/analytics/log-custom-event",
     method: "POST",
   },
   GetExperimentsByUser: {

src/constants/store-actions.js

@@ -19,7 +19,8 @@ const storeActions = {
   SET_REFERRAL_INFORMATION: "setReferralInformation",
   VALIDATE_ZIP: "validateZip",
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
-  LOG_ACTIVITY: "logActivity",
+  LOG_PAGE_VIEW: "logPageView",
+  LOG_CUSTOM_EVENT: "logCustomEvent",
   GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
 
   // DEPENDENCY MUTATIONS

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -1,104 +1,33 @@
 <template>
-  <Form
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-    @submit="onSubmit"
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-    @invalid-submit="onInvalidSubmit"
-    ref="theForm"
-    v-slot="{ meta }"
-  >
-    <div
-      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
-    >
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-      <vehicleBanner
+        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
-            cmsWidgetName="LicensePlateNumber"
-            v-model="licensePlate"
-            isRequired
-            inputId="license_plate"
-            validationRules="license-plate-required"
-          />
             </div>
         </div>
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
-            cmsWidgetName="RegistrationZip"
-            v-model="registrationZip"
-            inputId="zip"
-            mask="#####"
-            validationRules="zip-required"
-          />
-          <textboxQuestion
-            cmsWidgetName="RegistrationZip"
-            v-model="registrationZip"
-            isRequired
-            inputId="zip"
-            mask="#####"
-            validationRules="zip-required"
-          />
             </div>
         </div>
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
-            cmsWidgetName="EmailAddress"
-            v-model="email"
-            inputId="email"
-            validationRules="email-address-required|email-address-format"
-          />
-          <textboxQuestion
-            cmsWidgetName="EmailAddress"
-            v-model="email"
-            isRequired
-            inputId="email"
-            validationRules="email-address-required|email-address-format"
-          />
             </div>
         </div>
-      <alert
+        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
-        class="my-3"
-        :manualHeadline="NoServiceZipHeader"
-        :manualCopy="NoServiceZipBody"
-        v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
-        alertClass="alert-danger"
-      />
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
-            v-if="!isRegistrationZipServicable"
-            cmsWidgetName="ServiceZip"
-            v-model="serviceZip"
-            inputId="serviceZip"
-            validationRules="zip-required"
-          />
             </div>
         </div>
-      <alert
+        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
-        class="my-3"
+        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
-        cmsWidgetName="NoMatchAlertWidget"
+        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-        v-if="!isVinValid"
-        alertClass="alert-danger"
-      />
-      <alert
-        class="my-3"
-        :manualHeadline="MatchedDifferentVehicleAlertHeader"
-        :manualCopy="MatchedDifferentVehicleAlertBody"
-        v-if="isCarIdDifferent"
-        alertClass="alert-warning"
-      />
-      <funnelFooter
-        ref="funnelFooter"
-        cmsWidgetName="FunnelFooterWidget"
-        :isForwardActionDisabled="!meta.valid"
-        @back-clicked="backButtonAction"
-        @ForwardClicked="forwardButtonAction"
-      />
     </div>
 </Form>
 </template>
@@ -113,20 +42,38 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
+} from "@/helpers/cms-content-helper";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
+import {
-import { storeMutations } from "@/constants/store-mutations";
+    storeActions
-import { errorMessages } from "@/constants/error-messages";
+} from "@/constants/store-actions";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
+import {
+    errorMessages
+} from "@/constants/error-messages";
 import {
     getDamageString,
     isGlassAvailableForCarId,
 } from "@/helpers/damage-helper";
-import { required, regex } from "@/helpers/validation-rules";
+import {
-import { Form, defineRule } from "vee-validate";
+    required,
-import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+    regex
+} from "@/helpers/validation-rules";
+import {
+    Form,
+    defineRule
+} from "vee-validate";
+import {
+    navigateAfterSaveToHeritageFunnel
+} from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule(
@@ -153,12 +100,10 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [{
-      {
             resultKey: "cmsContent",
             promise: cmsContentPromise,
-      },
+        }, ];
-    ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -266,9 +211,9 @@ export default {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-      const zipValidation = this.serviceZip
+            const zipValidation = this.serviceZip ?
-        ? await this.validateZip(this.serviceZip)
+                await this.validateZip(this.serviceZip) :
-        : await this.validateZip(this.registrationZip);
+                await this.validateZip(this.registrationZip);
             if (!zipValidation.data.isServiceable) {
                 this.$refs.funnelFooter.removeLoader();
                 this.isVinValid = true;
@@ -313,13 +258,9 @@ export default {
             );
 
             const partsData = await baseMixin.methods.dispatchStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
+                this.storeActions.GET_PARTS_OR_QUESTIONS, {
-        {
                     carId: vinLookup.data.vehicle.carId,
-          glassArray:
+                    glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
-            this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
-              ? []
-              : store.getters.damage.glassToReplace,
                     zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
                     vin: vinLookup.data.vin,
                 },
@@ -331,9 +272,9 @@ export default {
             if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
                 this.$router.navigateAfterSave(
                     this.navigationScenarios.CLICKED_FORWARD,
-          this.$route,
+                    this.$route, {}, {
-          {},
+                        displayVehicleChangeAlert: true
-          { displayVehicleChangeAlert: true },
+                    },
                     partsData.data
                 );
                 return;
@@ -349,8 +290,10 @@ export default {
         },
         lookupVin(plate, state) {
             return baseMixin.methods.dispatchStoreAction(
-        storeActions.LOOKUP_VIN_BY_PLATE,
+                storeActions.LOOKUP_VIN_BY_PLATE, {
-        { licensePlate: plate, licenseState: state }
+                    licensePlate: plate,
+                    licenseState: state
+                }
             );
         },
         updateCustomerInfo(vin, vehicleInfo, registrationState) {

src/mixins/analytics-mixin.js

@@ -11,24 +11,34 @@ const currentPageName = getPageNameByQueryString();
 
 export default {
   methods: {
-    logEvent(pageEvent, category, action, label, value) {
+    logPageView(pageEvent) {
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
         sessionId: getSessionIdValue(),
+        action: '', 
+        event: pageEvent,
         shouldUseSessionId: true,
       };
 
-      if (pageEvent) {
+      baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
-        payload.pageEvent = { action: '', event: pageEvent };
+    },
-      }
 
-      if (category) {
+    logCustomEvent(category, action, label, value) {
-        payload.customEvent = { category: category, action: action, label: label, value: value };
+      var payload = {
-      }
+        userId: getDeviceIdValue(),
+        sessionKey: getSessionKeyValue(),
+        pageName: currentPageName,
+        sessionId: getSessionIdValue(),
+        category: category, 
+        action: action,
+        label: label,
+        value: value,
+        shouldUseSessionId: true,
+      };
 
-      baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false);
+      baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
     pushEventToGA(category, action, label, pushToLogApp = false) {
@@ -44,7 +54,7 @@ export default {
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
-        this.logEvent(undefined, category, action, label, undefined);
+        this.logCustomEvent(category, action, label, undefined);
       }
 
     },
@@ -58,7 +68,7 @@ export default {
 
       pushToDataLayerIfDefined(pageViewEvent);
 
-      this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
+      this.logPageView(analyticsPageEvents.ENTRY);
     },
 
     pushExperimentsToDataLayer(experiments) {

src/mixins/analytics-mixin.spec.js

@@ -3,18 +3,34 @@ import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 
 describe("analyticsMixin.js", () => {
-  test("logEvent: calls dispatch with type and payload", () => {
+  test("logPageView: calls dispatch with type and payload", () => {
     const type = "";
     const payload = {};
 
     const mockData = {
       actionList: [{
-        actionName: storeActions.LOG_ACTIVITY
+        actionName: storeActions.LOG_PAGE_VIEW
       }],
     }
     const mocks = setupMocksForJsFiles(mockData);
 
-    analyticsMixin.methods.logEvent(type, payload);
+    analyticsMixin.methods.logPageView(type, payload);
+
+    expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+  });
+
+  test("logCustomEvent: calls dispatch with type and payload", () => {
+    const type = "";
+    const payload = {};
+
+    const mockData = {
+      actionList: [{
+        actionName: storeActions.LOG_CUSTOM_EVENT
+      }],
+    }
+    const mocks = setupMocksForJsFiles(mockData);
+
+    analyticsMixin.methods.logCustomEvent(type, payload);
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
@@ -23,7 +39,7 @@ describe("analyticsMixin.js", () => {
     // Arrange
     const mockData = {
       actionList: [{
-        actionName: storeActions.LOG_ACTIVITY
+        actionName: storeActions.LOG_CUSTOM_EVENT
       }],
     }
     const mocks = setupMocksForJsFiles(mockData);

src/store/index.js

@@ -433,27 +433,43 @@ export const actions = {
       });
   },
 
-  logActivity(context, { userId, sessionKey, pageName, sessionId, pageEvent, customEvent, shouldUseSessionId }) {
+  logPageView(context, { userId, sessionKey, pageName, sessionId, action, event, shouldUseSessionId }) {
     var payload = {
       userId: userId,
       sessionKey: sessionKey,
       sessionId: sessionId,
       pageName: pageName,
       applicationName: 'SafeliteDotCom',
+      action: action, 
+      event: event,
       shouldUseSessionId: shouldUseSessionId
     };
 
-    if (typeof pageEvent !== 'undefined') {
+    return globalMethods.callHttpClient({
-      payload.pageEvent = { action: pageEvent.action, event: pageEvent.event};
+      method: endpoints.LogPageView.method,
-    }
+      endpoint: endpoints.LogPageView.url,
+      payload: payload,
+      logApiCall: false
+    });
+  },
 
-    if (typeof customEvent !== 'undefined') {
+  logCustomEvent(context, { userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId }) {
-      payload.customEvents = [{category: customEvent.category, action: customEvent.action, label: customEvent.label, value: customEvent.value}];
+    var payload = {
-    }
+      userId: userId,
+      sessionKey: sessionKey,
+      sessionId: sessionId,
+      pageName: pageName,
+      applicationName: 'SafeliteDotCom',
+      category: category, 
+      action: action, 
+      label: label, 
+      value: value,
+      shouldUseSessionId: shouldUseSessionId
+    };
 
     return globalMethods.callHttpClient({
-      method: endpoints.LogActivity.method,
+      method: endpoints.LogCustomEvent.method,
-      endpoint: endpoints.LogActivity.url,
+      endpoint: endpoints.LogCustomEvent.url,
       payload: payload,
       logApiCall: false
     });

src/store/store.spec.js

@@ -617,7 +617,7 @@ describe("Actions", () => {
     expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx");
   });
 
-  it("logActivity action, should return nothing", async () => {
+  it("logPageView action, should return nothing", async () => {
 
     // Arrange
     const context = state;
@@ -626,12 +626,26 @@ describe("Actions", () => {
       event: "ENTRY",
     }
 
-    var customEvent = [{
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({  });
+    });
+
+    // Assert
+    const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true });
+    expect(response).toEqual({});
+  });
+
+  it("logCustomEvent action, should return nothing", async () => {
+
+    // Arrange
+    const context = state;
+    var customEvent = {
       category: "tstCat",
       action: "click",
       label: "damage",
       value: "psych"
-    }];
+    };
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
@@ -639,7 +653,7 @@ describe("Actions", () => {
     });
 
     // Assert
-    const response = await actions.logActivity(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, customEvent: customEvent, shouldUseSessionId: true });
+    const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true });
     expect(response).toEqual({});
   });
 

vue.config.js

@@ -4,6 +4,7 @@ process.env.VUE_APP_HERITAGE_FUNNEL =
   "http://localhost:38000/default.aspx";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 
   "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
+process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');";

vue.release.config.js

@@ -1,6 +1,7 @@
 process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
 process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
+process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";