Merge branch 'develop' into feature/CSR-92

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

@@ -6,7 +6,9 @@
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
-        <legend class="sr-only">{{groupName}}</legend>
+        <legend class="sr-only" :data-focus-target="groupName" tabindex="-1">
+          {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
+        </legend>
           <div :class="getComponentWrapperClasses">
             <component
               :is="buttonType"

src/common-components/funnel-footer/funnel-footer.vue

@@ -70,6 +70,9 @@ export default {
   beforeUnmount() {
     window.removeEventListener('resize', this.onResize);
   },
+  unmounted() {
+    document.onkeydown = null;
+  },
   computed: {
     backLink(){
       return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
@@ -89,6 +92,10 @@ export default {
       this.$refs.buttonMain.removeLoader();
     },
     buttonClick() {
+      //prevent keyboard input after button click
+      document.onkeydown = function (e) {
+        return false;
+      };
       this.$emit("ForwardClicked");
     },
     linkClick() {

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="textbox-question" :class="hasError ? 'has-error' : ''">
+	<div class="textbox-question" :class="(errors.length > 0 || hasError) ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<input v-model="value" 
 			v-maska="mask"

src/constants/cookie-names.js

@@ -1,5 +1,10 @@
 const cookieNames = {
     FUNNEL_SESSION_INFO: "FunnelSessionInfo",
+    
+    // Existing Safelite.com cookies
+    DXDEV: "dxdev",
+    SESSION_ID: "sid",
+    SESSION_KEY: "skey"
 };
   
 export { cookieNames };

src/constants/endpoints.js

@@ -63,6 +63,10 @@ const endpoints = {
     url: "/location/api/v1/location/zip",
     method: "GET",
   },
+  LogExperimentExposureIfAssigned:{
+    url: "/analytics/api/v1/analytics/log-experiment-exposure",
+    method: "POST",
+  }
 };
 
 export { endpoints };

src/constants/experiments.js

@@ -0,0 +1,6 @@
+const experimentUniverses = {
+    CONCEPT_FUNNEL: 'ConceptFunnel'
+};
+  
+export { experimentUniverses };
+  

src/constants/store-actions.js

@@ -17,6 +17,7 @@ const storeActions = {
   LOAD_ORDER: "loadOrder",
   SET_REFERRAL_INFORMATION: "setReferralInformation",
   VALIDATE_ZIP: "validateZip",
+  LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

src/global-methods.js

@@ -30,6 +30,7 @@ export default {
           }
         },
         (error) => {
+          console.error(error);
           return reject(error.response);
         }
       );

src/helpers/heritage-integration/cookie-helper.js

@@ -18,19 +18,20 @@ export function updateOrCreateFunnelCookie() {
         ReferralNumber: store.getters.order.referralNumber,
         ReferralDate: store.getters.order.referralDate,
         ReferralCorrelationId: store.getters.order.referralCorrelationId,
+        ReferralParentAccountNumber: store.getters.order.parentAccountNumber,
     });
 }
 
 /*
     Gets the current instance of the funnel cookie.
     Returns null if cookie isn't valid JSON.
-*/    
+*/
 export function getFunnelCookie() {
     const cookieJson = document.cookie
         ?.split("; ")
         ?.find(row => row.startsWith(`${cookieNames.FUNNEL_SESSION_INFO}=`))
         ?.split("=")[1];
-        
+
     try {
         return JSON.parse(cookieJson);
     } catch (error) {
@@ -45,6 +46,55 @@ export function deleteFunnelCookie() {
     document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=; Max-Age=0; path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()}`;
 }
 
+/*
+    Gets cookie domain value. Localhost will be empty "".
+*/
+export function getCookieDomainValue() {
+    return location.hostname.includes("localhost") ? "" : `domain=${getDomainWithoutSubdomain()};`;
+}
+
+/*
+    Gets value of dxdev cookie, and then extracts "did" value from it.
+    Returns empty string if cookie not found or "did" string not present.
+*/
+export function getDeviceIdValue(){
+    // Sometimes these cookie contains more than the device ID.
+    const cookieValue = getCookieValueByName(cookieNames.DXDEV);
+    const cookieValuesSplit = cookieValue.split('=');
+
+    // If this is the only value, just use that.
+    if(cookieValuesSplit.length === 2 && cookieValuesSplit[0] === 'did'){
+        return cookieValuesSplit[1];
+    }
+
+    const cookieValueMatch = cookieValue.match("(?<=did=).*?(?=&)");
+    if(cookieValueMatch){
+        return cookieValueMatch[0];
+    }
+
+    return '';
+}
+
+/*
+    Gets value of skey cookie, returns 0 if not found.
+*/
+export function getSessionKeyValue(){
+    const cookieValue = getCookieValueByName(cookieNames.SESSION_KEY);
+
+    if(cookieValue){
+        return cookieValue;
+    }
+
+    return 0;
+}
+
+/*
+===========================
+=   PRIVATE FUNCTIONS     =
+===========================
+*/
+
+
 /*
     Used to set properties on the funnel cookie.
     Takes an object with properties to set. Will overwrite existing properties.
@@ -65,10 +115,9 @@ function setFunnelCookieProperties(properties) {
     }
 }
 
-export function getCookieDomainValue() {
-    return location.hostname.includes("localhost") ? "" : `domain=${getDomainWithoutSubdomain()};`;
-}
-
+/*
+    Gets current domain without the subdomain for cookie.
+*/
 function getDomainWithoutSubdomain() {
     let url = location.hostname;
     if (url.includes("localhost")) {
@@ -82,3 +131,16 @@ function getDomainWithoutSubdomain() {
         .slice(-(urlParts.length === 4 ? 3 : 2))
         .join('.')}`;
 }
+
+/*
+    Gets cookie value by name, returns empty string if not found.
+*/
+function getCookieValueByName(name) {
+    const value = "; " + document.cookie;
+    const parts = value.split("; " + name + "=");
+
+    if (parts.length === 2) {
+        return parts.pop().split(";").shift();
+    }
+    return "";
+}

src/helpers/heritage-integration/navigation-helper.js

@@ -66,9 +66,6 @@ export async function navigateToHeritageFunnel() {
         {
             corid: store.getters.order.referralCorrelationId,
             src: "concept-funnel",
-            // TODO CSR-28, remove this
-            cns: "all",
-            experiments: "RemoveServiceAreaPage=ServAreaRemoval_V7=NoShowPackages_CONTROL=true,ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
         }
     );
 }

src/helpers/heritage-integration/order-helper.js

@@ -25,7 +25,7 @@ export async function loadOrderIfPresent() {
 
 
     // Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
-    return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId)).data;
+    return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
 }
 
 /*
@@ -54,12 +54,13 @@ export async function saveOrder() {
     Calls API to load order given the referral number, referralDate, and referralCorrelationId
     and returns the response.
 */
-async function loadOrder(referralNumber, referralDate, referralCorrelationId) {
+async function loadOrder(referralNumber, referralDate, referralCorrelationId, accountNumber) {
     const response = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER,
         {
             referralNumber: referralNumber.toString(),
             referralDate: referralDate,
-            referralCorrelationId: referralCorrelationId
+            referralCorrelationId: referralCorrelationId,
+            accountNumber: accountNumber?.toString()
         }, false);
 
     return response;

src/helpers/layout-helper.js

@@ -15,10 +15,10 @@ export function settleAllPromises(promiseResultMap) {
       // when returned, so other promises do. Map the results to the object
       // so that the object is the return data.
 
-      if (results[i].value.data === undefined) {
-        resultMap[promiseName] = results[i].value;
+      if (results[i]?.value?.data === undefined) {
+        resultMap[promiseName] = results[i]?.value;
       } else {
-        resultMap[promiseName] = results[i].value.data;
+        resultMap[promiseName] = results[i]?.value?.data;
       }
     }
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -276,7 +276,7 @@ export default {
 
     navigateForward(partsData){
       // CSR-98 TEMP
-      const vehicleYearsToShowHeritageFunnel = [ "2001", "2002", "2010" ];
+      const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010 ];
       if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) {
         navigateToHeritageFunnel();
         return;

src/layouts/vehicle-year/vehicle-year.vue

@@ -17,11 +17,16 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeMutations } from "@/constants/store-mutations";
 import { storeActions } from "@/constants/store-actions";
+import { experimentUniverses } from "@/constants/experiments";
+import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
+
+import baseMixin from "@/mixins/base-mixin";
 import store from "@/store";
 
 export default {
@@ -36,8 +41,16 @@ export default {
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const yearQuestionInitialDataPromise =
-      yearQuestion.methods.loadInitialData();
+    const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+
+    // Log experiment exposure
+    const logExperimentExposurePromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE, 
+    {
+      userId: getDeviceIdValue(),
+      sessionKey: getSessionKeyValue(),
+      pageName: to.query.fmgPage,
+      universeName: experimentUniverses.CONCEPT_FUNNEL
+    }, false);
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -49,6 +62,10 @@ export default {
         resultKey: "yearQuestionInitialData",
         promise: yearQuestionInitialDataPromise,
       },
+      {
+        resultKey: "logExperimentExposure",
+        promise: logExperimentExposurePromise,
+      },
     ];
 
     let resultMap = await settleAllPromises(promiseResultMap);
@@ -64,8 +81,8 @@ export default {
 
   watch: {
     selectedYear(year) {
-
-      this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+      const parsedYear = parseInt(year);
+      this.$store.commit(this.storeMutations.UPDATE_YEAR, parsedYear);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,
         this.$route

src/store/index.js

@@ -48,7 +48,7 @@ const getDefaultState = () => {
       referralNumber: null,
       referralDate: null,
       referralCorrelationId: null,
-      parentAccountNumber: null,
+      parentAccountNumber: 0,
     },
     applicationUser: {
       eventBus: [],
@@ -93,7 +93,7 @@ export const mutations = {
   updateVehicleVin(state, vin) {
     state.order.vehicle.vin = vin;
   },
-  updateIsRepair(state, isRepair){
+  updateIsRepair(state, isRepair) {
     state.order.damage.isRepair = isRepair;
   },
   updateNumberOfChips(state, numberOfChips) {
@@ -176,7 +176,7 @@ export const mutations = {
     state.order.referralNumber = orderInformation.referralNumber;
     state.order.referralDate = orderInformation.referralDate;
     state.order.referralCorrelationId = orderInformation.referralCorrelationId;
-    state.order.vehicle = {
+    state.order.vehicle = Object.assign(state.order.vehicle, {
       year: orderInformation.vehicle?.year,
       make: orderInformation.vehicle?.make,
       model: orderInformation.vehicle?.model,
@@ -186,13 +186,13 @@ export const mutations = {
       imageUrl: orderInformation.vehicle?.imageUrl,
       imageVifNumber: orderInformation.vehicle?.imageVifNumber,
       imageColor: orderInformation.vehicle?.imageVifColor
-    };
+    });
     state.order.damage.glassToReplace = orderInformation.glassToReplace;
     state.order.damage.isRepair = orderInformation.isRepair;
     state.order.damage.numberOfChips = orderInformation.numberOfChips;
     state.order.lineItems.glassParts = orderInformation.parts;
     state.order.parentAccountNumber = orderInformation.parentAccountNumber;
-    state.order.serviceLocation.zipCode = orderInformation.zipCode;   // TODO CSR-416 Make sure this is correct
+    state.order.serviceLocation.zipCode = orderInformation.zipCode;
   }
 }
 
@@ -248,7 +248,7 @@ export const actions = {
       method: endpoints.LookupVinByPlate.method,
       endpoint: endpoints.LookupVinByPlate.url,
       payload: {
-        licensePlate: licensePlate, 
+        licensePlate: licensePlate,
         licenseState: licenseState
       },
     });
@@ -292,12 +292,12 @@ export const actions = {
   },
   getDamageOptions(context, { carId }) {
     return globalMethods.callHttpClient({
-      methods: endpoints.GetDamageOptions.method,
+    methods: endpoints.GetDamageOptions.method,
       endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
       payload: {},
     });
   },
-  validateZip(context, {zip}) {
+  validateZip(context, { zip }) {
     return globalMethods.callHttpClient({
       methods: endpoints.ValidateZip.method,
       endpoint: `${endpoints.ValidateZip.url}/${zip}`
@@ -363,6 +363,19 @@ export const actions = {
     context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
   },
 
+  logExperimentExposure(context, { userId, sessionKey, pageName, universeName }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.LogExperimentExposureIfAssigned.method,
+        endpoint: endpoints.LogExperimentExposureIfAssigned.url,
+        payload: {
+          userId: userId,
+          sessionKey: sessionKey,
+          pageName: pageName,
+          universeName: universeName
+        }
+      });
+  },
+
   // Parts API Actions
   getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
     return globalMethods.callHttpClient({
@@ -402,16 +415,18 @@ export const actions = {
     });
   },
 
-  loadOrder(context, { referralNumber, referralDate, referralCorrelationId }) {
+  loadOrder(context, { referralNumber, referralDate, referralCorrelationId, accountNumber}) {
     return globalMethods.callHttpClient({
       method: endpoints.LoadOrder.method,
       endpoint: endpoints.LoadOrder.url,
       payload: {
         referralNumber: referralNumber,
         referralDate: referralDate,
-        referralCorrelationId: referralCorrelationId
+        referralCorrelationId: referralCorrelationId,
+        accountNumber: accountNumber
       },
     }).then((response) => {
+      context.commit(storeMutations.RESET_STATE);
       context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data);
       return response;
     });

src/styles/common-error-styles.scss

@@ -7,21 +7,11 @@
     input[type=radio]:focus + label {
       box-shadow: 0 0 0 2.5px $red;
     }
-    input[type=checkbox]:focus + label:hover,
-    input[type=radio]:focus + label {
-      box-shadow: 0 0 0 1px $red;
-    }
     &:hover {
       box-shadow: 0px 0px 0px 4px $red-200;
       border-radius: 10px !important;
-      border: 1px solid $red;
     }
   }
-
-  input[type=checkbox]:checked + label,
-  input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent !important;
-  }
   &.list-button-horizontal {
     color: $red;
     label {

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -11,7 +11,6 @@
       :name="groupName"
       :value="value"
       :aria-required="isRequired"
-      :data-focus-target="groupName"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
@@ -143,11 +142,11 @@ export default {
     height: 0;
     position: absolute;
     &:focus-visible + label {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
     }
     &:focus + label {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
       z-index: 3;
     }
     &:checked + label {
@@ -156,6 +155,9 @@ export default {
       outline: none;
       z-index: 2;
     }
+    &:checked:focus + label {
+      box-shadow: 0 0 0 2.5px $blue;
+    }
     &:checked + label p:first-child {
       font-weight: 500;
     }

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
-    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -11,7 +11,6 @@
       :name="groupName"
       :value="value"
       :aria-required="isRequired"
-      :data-focus-target="groupName"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
@@ -97,7 +96,7 @@ export default {
       }
       this.handleChange(value);
     },
-    handleCheckChange(newValue, oldValue){
+    handleCheckChange(value, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         const emitEvent = {

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

@@ -4,8 +4,7 @@
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[
         isWide ? 'horizontal' : '',
-        errors.length > 0 ? 'has-error' : '',
-        hasError ? 'has-error' : '',
+        (errors.length > 0 || hasError) ? 'has-error' : '',
       ]"
       @mouseup="handleChange(value)"
       @keyup.space="handleChange(value)"
@@ -16,7 +15,6 @@
         :name="groupName"
         :value="value"
         :aria-required="isRequired"
-        :data-focus-target="groupName"
         v-model="checkValue"
         @change="handleCheckChange(value)"
       />
@@ -315,8 +313,8 @@ export default {
 
       &:checked + label::after {
         content: "";
-        margin: -0.25rem 0 0 0;
-        left: 0.875rem;
+        margin: -0.15rem 0 0 0;
+        left: 1.175rem;
       }
 
       &:checked + label {