Merge branch 'develop' into feature/CSR-18

azure-pipelines.yml

@@ -76,7 +76,7 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __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__)
                     indexDeployVariables:
@@ -92,7 +92,7 @@ stages:
       jobs:
       - deployment: qaBuildDeployment
         displayName: Build and Deploy FMG - QA
-        environment: digitalCloud-qa
+        environment: NoApproval-All
         container: node
         workspace:
           clean: all
@@ -116,7 +116,7 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __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__)
                     cfDistributionId: $(cfDistributionId)

jest.config.js

@@ -21,14 +21,15 @@ module.exports = {
     "!src/layouts/part-questions/**/*.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/layouts/estimate/**/*.vue",
-    // REMOVE THESE AFTER WRITING UNIT TESTS 
+    // REMOVE THESE AFTER WRITING UNIT TESTS
     "!src/layouts/address-lookup/address-lookup.vue",
     "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
-    "!src/common-components/dropdown-question/dropdown-question.vue", 
+    "!src/common-components/dropdown-question/dropdown-question.vue",
-    "!src/common-components/textbox-question/textbox-question.vue",   
+    "!src/common-components/textbox-question/textbox-question.vue",
     "!src/helpers/validation-rules.js",
-    // END  
+    "!src/helpers/damage-helper.js",
+    // END
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {

src/common-components/button-question/button-question.spec.js

@@ -1,9 +1,8 @@
 import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
-import { nextTick } from "vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import store from "@/store";
+
-jest.mock("@/store",()=>{return{};},{virtual:true});
+jest.mock("@/store", () => { return {}; }, { virtual: true });
 
 describe("buttonQuestion.vue", () => {
   it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
@@ -76,7 +75,7 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("getColLength should return '' if prop isWide is set to false", () => {
     // Act
-    const localThis = { 
+    const localThis = {
       isWide: false,
       answers: ['a', 'b']
     }
@@ -110,12 +109,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should trigger event modelValue change to new value on when radio button selected", async () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, setupMocks({}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false
     });
-    const val = {checkValue: true, value: "2021", }
+    const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@@ -125,13 +124,13 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         modelValue: ["2022", "2021", "2020"],
         isMultiSelect: true,
       }
-    });
+    }));
-    const val = {checkValue: true, value: "2019", }
+    const val = { checkValue: true, value: "2019", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
@@ -141,12 +140,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
+        isMultiSelect: true,
-        modelValue: [ 'a', 'b' ]
+        modelValue: ['a', 'b']
       }
-    });
+    }));
     const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -158,12 +157,13 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
+        isMultiSelect: true,
-        modelValue: [ 'a', 'b' ]
+        modelValue: ['a', 'b']
       }
-    });
+    }));
+
     const val = { checkValue: false, value: "a", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -176,12 +176,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
+        isMultiSelect: true,
         modelValue: 'a',
       }
-    });
+    }));
     const val = { checkValue: true, value: "c", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -189,3 +189,11 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.vm.selectedValues).toEqual("a");
   });
 });
+
+function setupMocks(mountOptionsMockData = {}) {
+  const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
+  const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+  const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+  return allMountOptions;
+}

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

@@ -52,6 +52,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "buttonQuestion",
@@ -133,6 +134,9 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
+      
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
+
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;

src/common-components/dropdown-question/dropdown-question.spec.js1

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import dropdownQuestion from "./dropdown-question";
 import { nextTick } from "vue";
+import { maska } from 'maska';
 
 describe("dropdownQuestion.vue", () => {
 
@@ -19,7 +20,7 @@ describe("dropdownQuestion.vue", () => {
     expect(input.attributes()["aria-disabled"]).toEqual("true");
   });
 
-  it("Should render a text input", async () => {
+  it("Should render a select input", async () => {
     // Act
     const wrapper = shallowMount(dropdownQuestion, {
       propsData: {
@@ -49,33 +50,82 @@ describe("dropdownQuestion.vue", () => {
     expect(input.attributes().id).toEqual("input ID");
   });
 
-/*   it("Should return label text", async () => {
+  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
     // Act
     const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
+      global: {
-        labelText: "label text",
+        directives: {
+          maska: maska,
+        }
       },
     });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
-    const label = wrapper.find("label");
+    expect(wrapper.find("label").text()).toContain(questionText);
+    wrapper.unmount();
+  });
+  
+  it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    //Mock CMS content
+    const originalQuestionText = "Question Text";
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&uestion Text"
+    const expectedQuestionText = "Q⁠uestion Text"; 
+    const cmsContent = {
+      QuestionText: originalQuestionText,
+    };
 
-    expect(label.text()).toEqual("label text");
-  }); */
-
-  it("Should return input id", async () => {
     // Act
     const wrapper = shallowMount(dropdownQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
       propsData: {
-        inputId: "input ID",
+        disableAutoFill: true,
       },
     });
+    await wrapper.setData({
+      questionText: originalQuestionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
-    const input = wrapper.find("select");
+    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
-
+    wrapper.unmount();
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
   });
 
+  it("Should emit new value when modelValue is changed", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        modelValue: "val",
+      },
+    });
+
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
 });

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

@@ -37,6 +37,7 @@ export default {
 		isRequired: Boolean,
 		disableAutoFill: Boolean,
 		validationRules: String, 
+		cmsWidgetName: String,
 	},
 	setup(props) {
 		const fieldOptions = {
@@ -57,18 +58,11 @@ export default {
 			handleChange,
 			meta, 
 		};
-	},
+	},  
-	data() {
-		return {
-			questionText: "",
-		}
-	},
-	methods: {
-		initializeComponent(cmsContent) {
-			this.questionText = cmsContent;
-		}
-	},    
 	computed: {
+		questionText(){
+			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+		},
 		selectedOption: {
 			get: function() {
 				return this.modelValue;
@@ -79,14 +73,22 @@ export default {
 		}, 
 		labelText: {
 			get: function () {
-				let labelText = this.questionText;
+				const noBreakChar = "⁠";
+				var questionText = "";
 				if (this.disableAutoFill) {
-					const noBreakChar = "⁠";
+					var words = this.questionText.toString().split(/[ ]+/);
-					const position = 1;
+					words.forEach(function (word) {
-					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+						const position = 1;
+						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
+						questionText += `${word} `;					
+					});	
+					
+					questionText = questionText.trimEnd(); 
+				} else {
+					questionText = this.questionText.toString();
 				}
 
-				return labelText;
+				return questionText;
 			}
 		}
 	},

src/common-components/textbox-question/textbox-question.spec.js1

@@ -1,12 +1,17 @@
 import { shallowMount } from "@vue/test-utils";
 import textboxQuestion from "./textbox-question";
-import { nextTick } from "vue";
+import { maska } from 'maska';
 
 describe("textboxQuestion.vue", () => {
 
   it("Should return aria-disabled state", async () => {
     // Act
     const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
       propsData: {
         isDisabled: true,
       },
@@ -17,11 +22,17 @@ describe("textboxQuestion.vue", () => {
 
     // Expect
     expect(input.attributes()["aria-disabled"]).toEqual("true");
+
   });
 
   it("Should render a text input", async () => {
     // Act
     const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
       propsData: {
         name: "test",
         label: "unit test label",
@@ -32,11 +43,17 @@ describe("textboxQuestion.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.exists()).toBe(true);
+
   });
 
   it("Should return input id", async () => {
     // Act
     const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
       propsData: {
         inputId: "input ID",
       },
@@ -47,35 +64,115 @@ describe("textboxQuestion.vue", () => {
 
     // Expect
     expect(input.attributes().id).toEqual("input ID");
+
   });
 
-  it("Should return label text", async () => {
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
     // Act
     const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+    });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("label").attributes('aria-label')).toBe(questionText);
+    wrapper.unmount();
+
+  });
+
+  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+    });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("label").text()).toContain(questionText);
+    wrapper.unmount();
+
+  });
+  
+  it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    //Mock CMS content
+    const originalQuestionText = "Question Text";
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&uestion Text"
+    const expectedQuestionText = "Q⁠uestion Text"; 
+    const cmsContent = {
+      QuestionText: originalQuestionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
       propsData: {
-        labelText: "label text",
+        disableAutoFill: true,
+      },
+    });
+    await wrapper.setData({
+      questionText: originalQuestionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
+    wrapper.unmount();
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        modelValue: "val",
       },
     });
 
-    // Assert
+    await wrapper.find("input").setValue("val2");
-    const label = wrapper.find("label");
-
-    expect(label.text()).toEqual("label text");
-  });
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
 
     // Assert
-    const input = wrapper.find("input");
+    expect(wrapper.emitted()).toHaveProperty('change')
 
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
   });
 
 });

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

@@ -15,7 +15,7 @@
 			autocomplete="off"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
-			@input="handleChange"
+			@change="handleChange"
 			@blur="handleBlur" />
 		<div v-show="errorMessage" class="row mt-2 form-test-error">
 			<span role="alert">{{ errorMessage }}</span>
@@ -91,22 +91,25 @@ export default {
 		},
 		labelText: {
 			get: function () {
-				let labelText = this.questionText;
+				const noBreakChar = "&NoBreak;";
+				var questionText = "";
 				if (this.disableAutoFill) {
-					var noBreakChar = "&NoBreak;";
+					var words = this.questionText.toString().split(/[ ]+/);
-					var position = 1;
+					words.forEach(function (word) {
-					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+						const position = 1;
+						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
+						questionText += `${word} `;					
+					});	
+					
+					questionText = questionText.trimEnd(); 
+				} else {
+					questionText = this.questionText.toString();
 				}
 
-				return labelText;
+				return questionText;
 			}
 		}
 	},
-	watch: {
-		value(newValue) {
-			this.handleChange(newValue);
-		}
-	}
 };
 </script>
 

src/constants/analytics-page-events.js

@@ -1,6 +0,0 @@
-const analyticsPageEvents = {
-  ENTRY: "ENTRY",
-  EVENT: "EVENT"
-};
-
-export { analyticsPageEvents };

src/constants/analytics.js

@@ -0,0 +1,32 @@
+const analyticsPageEvents = {
+  ENTRY: "ENTRY",
+  EVENT: "EVENT"
+};
+
+// GA Constants
+const GaEvents = {
+  GENERIC_EVENT: 'ga_Event',
+  PAGE_VIEW_EVENT : 'logPageview'
+};
+
+const GaCategories = {
+  API_RESPONSE: 'Api_Response',
+  EVOX: 'Evox'
+};
+
+const GaActions = {
+  RESULT: 'Result',
+  CLICKED: 'Clicked',
+  VIF: 'vif',
+  SUBMITTED: 'Submitted',
+};
+
+const GaLabels = {
+  SUCCESS: 'Success',
+  ERROR: 'Error',
+  LICENSE_PLATE_LOOKUP: 'License_Plate_Look_Up',
+  VIN_LOOKUP: 'Vin_Look_Up', 
+};
+
+
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};

src/constants/application-config.js

@@ -1,6 +1,6 @@
 
 const applicationConfig = {
-  CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
+  CONSUMER_CF_DISTRO: process.env.VUE_APP_CONSUMER_CF_DISTRO,
   GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
   ANALYTICS_SESSION_TIMEOUT_MINUTES: 30,
   SAVED_SESSION_TIMEOUT_DAYS: 45,

src/constants/endpoints.js

@@ -47,6 +47,10 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
     method: "POST",
   },
+  LookupVinByAddress: {
+    url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
+    method: "POST",
+  },  
   GetPartsOrQuestions: {
     url: "/parts/api/v1/parts/parts-or-questions",
     method: "POST",
@@ -70,6 +74,10 @@ const endpoints = {
   LogActivity:{
     url: "/analytics/api/v1/analytics/activity",
     method: "POST",
+  },
+  GetExperimentsByUserForGa: {
+    url: "/analytics/api/v1/analytics/get-experiments-for-GA",
+    method: "GET",
   }
 };
 

src/constants/error-messages.js

@@ -11,11 +11,14 @@ const errorMessages = {
     CITY_REQUIRED: "Please enter your city",
     STATE_REQUIRED: "Please enter your state",
     ZIP_REQUIRED: "Please enter your ZIP",
+    ZIP_FORMAT: "Please enter a valid ZIP",
     LICENSE_PLATE_REQUIRED: "Please enter your license plate number",
     FIRST_NAME_REQUIRED: "Please enter your first name",
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    SERVICE_ZIP_REQUIRED: "Please enter your Service ZIP",
+    SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP",
     VIN_REQUIRED: "Please enter your VIN",
     VIN_FORMAT: "Please enter a valid VIN",
 };

src/constants/experiments.js

@@ -1,6 +1,10 @@
 const experimentUniverses = {
     CONCEPT_FUNNEL: 'ConceptFunnel'
 };
+
+const experimentSettings = {
+    GOOGLE_CUSTOM_DIMENSION_INDEX: 'Google Custom Dimension Index'
+}
   
-export { experimentUniverses };
+export { experimentUniverses, experimentSettings};
   

src/constants/store-actions.js

@@ -12,6 +12,7 @@ const storeActions = {
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
   LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
+  LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
   GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
   SAVE_ORDER: "saveOrder",
   LOAD_ORDER: "loadOrder",
@@ -19,6 +20,7 @@ const storeActions = {
   VALIDATE_ZIP: "validateZip",
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
   LOG_ACTIVITY: "logActivity",
+  GET_EXPERIMENTS_BY_USER_FOR_GA: "getExperimentsByUserForGa",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

src/global-methods.js

@@ -1,39 +1,34 @@
 import axios from "axios";
+import analyticsMixIn from "@/mixins/analytics-mixin.js";
+
 import { applicationConfig } from "@/constants/application-config.js";
-import httpStatusCodes from "http-status-codes";
+import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
 
 export default {
-  callHttpClient({ method, endpoint, payload }) {
+  callHttpClient({ method, endpoint, payload, logApiCall = true }) {
     return new Promise((resolve, reject) => {
-      const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+      const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
+      const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
 
-      const payloadAndAnalyticsData = Object.assign({}, payload, {
+      axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
-        AppName: "FixMyGlass",
+        .then((response) => {
-      });
 
-      axios({
+          if (logApiCall) {
-        method: method,
+            analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.SUCCESS}_${endpoint}`, true);
-        url: apiGatewayUrl + endpoint,
-        data: payloadAndAnalyticsData,
-        crossDomain: true,
-        responseType: {},
-      }).then(
-        (response) => {
-          if (response.status == httpStatusCodes.OK) {
-            if(response.data == undefined) {
-                reject(response);  
-            }else{
-              resolve(response);
-            }
-          } else {
-            reject(response);
           }
+
+          return resolve(response);
         },
-        (error) => {
+          error => {
-          console.error(error);
+            console.error(error);
-          return reject(error.response);
+
-        }
+            if (logApiCall) {
-      );
+              analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.ERROR}_${endpoint}`, true);
+            }
+
+            return reject(error.response);
+          }
+        );
     });
   },
 
@@ -48,11 +43,7 @@ export default {
         responseType: {},
       }).then(
         (response) => {
-          if (response.status == httpStatusCodes.OK) {
+          resolve(response);
-            resolve(response);
-          } else {
-            reject(response);
-          }
         },
         (error) => {
           return reject(error.response);

src/global-methods.spec.js

@@ -1,13 +1,16 @@
 import globalMethods from "@/global-methods";
 import axios from "axios";
+import analyticsMixIn from "@/mixins/analytics-mixin";
 
 //Mock external dependencies
 jest.mock("axios");
+jest.mock("@/mixins/analytics-mixin");
 
 it("Global Methods - Call Http Client - Should Resolve Promise", () => {
   //Arrange
   const endpoint = "https://mock.safelite.com";
   const httpArgs = setupMocksForHttpClient({ endpoint: endpoint });
+  analyticsMixIn.methods.pushEventToGA = jest.fn();
 
   //Act
   globalMethods.callHttpClient(httpArgs).then((response) => {
@@ -25,6 +28,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => {
     endpoint: endpoint,
     isError: true,
   });
+  analyticsMixIn.methods.pushEventToGA = jest.fn();
 
   //Act
   globalMethods.callHttpClient(httpArgs).catch((err) => {
@@ -72,5 +76,6 @@ function setupMocksForHttpClient({
 
   return {
     endpoint: endpoint,
+    logApiCall: true
   };
 }

src/helpers/damage-helper.js

@@ -7,7 +7,7 @@ export function getDamageString() {
 }
 
 export async function isGlassAvailableForCarId(carId){
-    const newGlassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
+    const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
       storeActions.GET_DAMAGE_OPTIONS,
       { carId: carId }
     );
@@ -24,8 +24,8 @@ export async function isGlassAvailableForCarId(carId){
     for(const option of currentGlassOptions){
       if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
         return false;
-      } 
+      }
     }
 
     return true;
-  }
+  }

src/helpers/damage-helper.spec.js

@@ -13,30 +13,4 @@ jest.mock("@/store", () => ({
       const damage = getDamageString();
       expect(damage).toEqual("Windshield")
     });
-  });
+  });
-
-  // describe("damage-helper.js", () => {
-  //   it("Should return false if no mismatches between each array", async () => {
-  //     const updatedOptions = {
-  //       data: {
-  //         windshieldOptions: {availableReplacementOptions: ["windshield"]}
-  //       }
-  //     }
-  //     baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn().mockImplementation(()=> {
-  //       return updatedOptions;
-  //     });
-  //     const misMatch = await isGlassAvailableForCarId();
-  //     expect(misMatch).toEqual(false);
-  //   });
-  // });
-
-  // describe("damage-helper.js", () => {
-  //   it("Should return true if there are any mismatches between arrays", () => {
-  //     const newOptions = {
-  //       windshieldOptions: {availableReplacementOptions: ["window"]}
-  //     }
-  //     const currentOptions = [{location: "Windshield", name: "windshield"}];
-  //     const misMatch = compareGlassOptions(newOptions, currentOptions);
-  //     expect(misMatch).toEqual(true);
-  //   });
-  // });

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

@@ -95,7 +95,7 @@ async function getLatestPageForRedirection() {
         if (store.getters.vehicle.vin) {
             return fmgPageValues.LICENSE_PLATE_LOOKUP;
         } else {
-            return fmgPageValues.ESTIMATE;
+            return fmgPageValues.VIN_LOOKUP;
         }
     }
 }
@@ -134,7 +134,7 @@ function overrideYmmsDirectionIfNeeded(toRoute) {
 /* istanbul ignore next */
 function isVinRelatedPage(toRoute) {
     const fmgPageValue = toRoute.query[queryStrings.FMG_PAGE];
-    
+
     return fmgPageValue === fmgPageValues.VIN_LOOKUP ||
         fmgPageValue === fmgPageValues.LICENSE_PLATE_LOOKUP ||
         fmgPageValue === fmgPageValues.ADDRESS_LOOKUP ||

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

@@ -283,7 +283,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe('estimate');
+        expect(result).toBe('vin-lookup');
     });
 
     test("getPageToRouteExistingOrderTo, existing order, should return heritage", async () => {

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

@@ -18,7 +18,7 @@ export async function loadOrderIfPresent() {
 
     // Reset state if cookie says to.
     if (funnelCookie.ShouldResetState) {
-        baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
+        baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
         deleteFunnelCookie();
         return null;
     }
@@ -34,10 +34,10 @@ export async function loadOrderIfPresent() {
     update the cookie.
 */
 export async function saveOrder() {
-    const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER);
+    const savedOrderInfo = await baseMixin.methods.dispatchStoreAction(storeActions.SAVE_ORDER);
 
     // Save the referral information back from the store.
-    await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
+    await baseMixin.methods.dispatchStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
         referralNumber: savedOrderInfo.data.referralNumber,
         referralCorrelationId: savedOrderInfo.data.referralCorrelationId,
         referralDate: savedOrderInfo.data.referralDate,
@@ -56,7 +56,7 @@ export async function saveOrder() {
     and returns the response.
 */
 async function loadOrder(referralNumber, referralDate, referralCorrelationId, accountNumber) {
-    const response = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER,
+    const response = await baseMixin.methods.dispatchStoreAction(storeActions.LOAD_ORDER,
         {
             referralNumber: referralNumber.toString(),
             referralDate: referralDate,

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

@@ -48,7 +48,7 @@ describe("loadOrderIfPresent", () => {
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
-        expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE);
     });
 
     test("Funnel cookie is null => store is unchanged", () => {
@@ -68,7 +68,7 @@ describe("loadOrderIfPresent", () => {
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
-        expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE);
     });
 
     test("Funnel cookie valid, should call loadOrder", async () => {
@@ -90,7 +90,7 @@ describe("loadOrderIfPresent", () => {
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
-        expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER);
         expect(result.ReferralNumber).toBe(123456);
         expect(result.vehicle.year).toBe(2010);
     });
@@ -127,8 +127,8 @@ describe("saveOrder", () => {
         await saveOrder();
 
         // Assert
-        expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SAVE_ORDER);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SAVE_ORDER);
-        expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
             referralNumber: mockReferralNumber,
             referralDate: mockReferralDate,
             referralCorrelationId: mockCorrelationId

src/helpers/unit-test-helper.js

@@ -7,17 +7,26 @@ 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 { queryStrings } from "@/constants/query-strings";
+import { routerParams } from "@/router/router-constants/router-params";
 
 // Common methods
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
   const mocks = {};
 
-  //this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
+  //this is mocking if you use the mixin directly(baseMixin.methods.dispatchStoreAction) vs this.dispatchStoreAction
-  setupBaseMixinDispatchNonBlockingStoreAction(mockData);
+  setupBaseMixinDispatchStoreAction(mockData);
 
-  mocks.dispatchNonBlockingStoreAction = jest.fn();
+  mocks.pushEventToGA = jest.fn();
-  mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
+  mocks.pushPageViewToGA = jest.fn();
+  mocks.logEvent = jest.fn();
+  mocks.pushExperimentsToDataLayer = jest.fn();
+  mocks.prependActionToMethod = jest.fn();
+
+  mocks.dispatchStoreAction = jest.fn();
+  mocks.dispatchStoreAction.mockImplementation((actionName) => {
     let actionFilterResult = mockData.actionList.filter(
       (x) => x.actionName == actionName
     );
@@ -35,6 +44,13 @@ export function getMountOptions(mockData) {
   mocks.navigationScenarios = navigationScenarios;
   mocks.vehicleCategories = vehicleCategories;
   mocks.fmgPageValues = fmgPageValues;
+  mocks.analyticsPageEvents = analyticsPageEvents;
+  mocks.GaCategories = GaCategories;
+  mocks.GaActions = GaActions;
+  mocks.GaLabels = GaLabels;
+  mocks.GaEvents = GaEvents;
+  mocks.queryStrings = queryStrings;
+  mocks.routerParams = routerParams;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;
@@ -50,7 +66,7 @@ export function getMountOptions(mockData) {
 }
 
 export function setupMocksForJsFiles(mockData = {}) {
-  setupBaseMixinDispatchNonBlockingStoreAction(mockData);
+  setupBaseMixinDispatchStoreAction(mockData);
 
   return { baseMixin };
 }
@@ -90,10 +106,10 @@ export function setupCookies({ funnelCookieValue = "", includeHeritageCookie = t
 }
 
 // Private methods
-function setupBaseMixinDispatchNonBlockingStoreAction(mockData) {
+function setupBaseMixinDispatchStoreAction(mockData) {
   if (mockData.actionList !== undefined) {
-    baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+    baseMixin.methods.dispatchStoreAction = jest.fn();
-    baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
+    baseMixin.methods.dispatchStoreAction.mockImplementation((actionName) => {
       let actionFilterResult = mockData.actionList.filter(
         (x) => x.actionName == actionName
       );

src/helpers/validation-rules.spec.js

@@ -1,4 +1,5 @@
 import { required } from "@/helpers/validation-rules";
+import { regex } from "@/helpers/validation-rules";
 
 describe("validation-rules.vue", () => {
   test("required rules should return error if value missing", () => {
@@ -15,15 +16,57 @@ describe("validation-rules.vue", () => {
 });
 
 describe("validation-rules.vue", () => {
-    test("required rules should return true if value present", () => {
+  test("required rules should return true if value present", () => {
-  
+
-      //Arrange
+    //Arrange
-      const testFn = required("an error");
+    const testFn = required("an error");
-      
+    
-      //Act
+    //Act
-      const testResponse = testFn('some value');
+    const testResponse = testFn('some value');
-      
+    
-      //Assert
+    //Assert
-      expect(testResponse).toBe(true);
+    expect(testResponse).toBe(true);
-    });
+  });
-  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is not present", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn();
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return false if value is present but does not match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('4321'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe("an error");
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is present and does match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('43213'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});

src/layouts/address-lookup/address-lookup.spec.js1

@@ -0,0 +1,244 @@
+// Components
+import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { maska } from 'maska';
+import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+import { validate } from "vee-validate";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+  
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("address-lookup.vue", () => {
+    test("Page header is initialized with api data", async (done) => {
+      //Arrange
+      const pageHeaderWidgetHeaderText = "Select Damage";
+      const { wrapper, apiPromise } = setupMocks({
+        pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+      });
+  
+      //Act
+      addressLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "address-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+  
+      //Assert
+      apiPromise.finally(() => {
+        expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+          pageHeaderWidgetHeaderText
+        );        
+        done();
+      });
+    });
+
+    test("Customer Questions component is initialized with api data", async (done) => {
+        //Arrange
+        const StreetAddressQuestionWidget = { QuestionText: "test" };
+        const CityQuestionWidget = { QuestionText: "test" };
+        const StateQuestionWidget = { QuestionText: "test" };
+        const ZipQuestionWidget = { QuestionText: "test" };
+        const FirstNameQuestionWidget = { QuestionText: "test" };
+        const LastNameQuestionWidget = { QuestionText: "test" };
+        const EmailAddressQuestionWidget = { QuestionText: "test" };
+        const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
+        const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
+
+        const widgets = [
+            StreetAddressQuestionWidget,
+            CityQuestionWidget,
+            StateQuestionWidget,
+            ZipQuestionWidget,
+            AlertVerificationWarningWidget,
+            AlertNoMatchWarningWidget,
+            FirstNameQuestionWidget,
+            LastNameQuestionWidget,
+            EmailAddressQuestionWidget,
+            ];
+
+        const { wrapper, apiPromise } = setupMocks({
+          cmsContent: widgets,
+        });
+    
+        //Act
+        addressLookup.beforeRouteEnter.call(
+          wrapper.vm,
+          { query: { fmgPage: "address-lookup" } },
+          undefined,
+          (c) => c(wrapper.vm)
+        );
+    
+        //Assert
+        apiPromise.finally(() => {
+          expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
+            widgets
+          );        
+          done();
+        });
+      });
+
+  });
+
+  
+
+  function setupMocks({
+    pageHeaderWidgetHeaderText = {},
+    mountOptionsMockData = {
+      router: {
+        navigate: jest.fn(),
+      },
+      store: {
+        getters: {
+          vehicle: {},
+        },
+      },
+    },
+  }) {
+    //Mock api responses
+    baseMixin.methods.dispatchStoreAction = jest.fn();
+    const apiResponses = {
+      cmsContent: {
+        FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+        VehicleBannerWidget: {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+        FunnelHeaderWidget: {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+        StreetAddressQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        CityQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        StateQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        ZipQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        FirstNameQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        LastNameQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        EmailAddressQuestionWidget: {
+            QuestionText: 
+              "test"
+        },
+        AlertVerificationWarningWidget: {
+            HeaderText: 
+              "test",
+            BodyText:
+              "test",
+        },
+        AlertNoMatchWarningWidget: {
+            HeaderText: 
+              "test",
+            BodyText:
+              "test",
+        },
+
+      },
+    };
+  
+    const apiPromise = Promise.resolve(apiResponses);
+  
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+  
+    //Mock damage initialize methods
+    funnelHeader.methods = {
+      initializeComponent: jest.fn(),
+    };
+  
+    vehicleBanner.methods = {
+      initializeComponent: jest.fn(),
+    };
+  
+    funnelSubHeader.methods = {
+      initializeComponent: jest.fn(),
+    };
+    
+    funnelFooter.methods = {
+      initializeComponent: jest.fn(),
+    };
+
+    customerQuestions.methods = {
+        initializeComponent: jest.fn(),
+    };
+
+    addressQuestions.methods = {
+      initializeComponent: jest.fn(),
+      setupAddressLookup: jest.fn(),
+    };
+
+    const mountOptions = getMountOptions(mountOptionsMockData);
+    mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+    mountOptions.global.directives = {
+        maska: maska
+    };
+
+    const wrapper = mount(addressLookup, mountOptions);
+  
+    const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+    funnelHeaderWrapper.vm.initializeComponent =
+      funnelHeader.methods.initializeComponent;
+  
+    const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+    vehicleBannerWrapper.vm.initializeComponent =
+      vehicleBanner.methods.initializeComponent;
+    
+    const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+    funnelSubHeaderWrapper.vm.initializeComponent =
+      funnelSubHeader.methods.initializeComponent;
+    
+    const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
+    funnelFooterWrapper.vm.initializeComponent = 
+      funnelFooter.methods.initializeComponent;
+
+    const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
+    customerQuestionsWrapper.vm.initializeComponent = 
+      customerQuestions.methods.initializeComponent;       
+
+    const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
+    addressQuestionsWrapper.vm.initializeComponent = 
+      addressQuestions.methods.initializeComponent;  
+    addressQuestionsWrapper.vm.setupAddressLookup = 
+      addressQuestions.methods.setupAddressLookup;
+
+    return { wrapper, apiPromise };
+  }

src/layouts/address-lookup/address-lookup.vue

@@ -5,15 +5,54 @@
 		ref="theForm"
 		v-slot="{ meta }"
 		autocomplete="off" >
-		<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+		<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-			<funnelHeader ref="funnelHeader" />
+			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-			<funnelSubHeader ref="funnelSubHeader" />		
+			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />		
 			<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+			<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
+				class="my-3"
+				cmsWidgetName="AlertVinNotFoundWidget"
+				alertClass="alert-danger"
+				v-bind:isDismissible="false"
+			/>
+			<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
+				class="my-3"
+				:manualHeadline="AlertMatchedDifferentVehicleHeader"
+				:manualCopy="AlertMatchedDifferentVehicleBody"
+				alertClass="alert-warning"
+				v-bind:isDismissible="false"
+			/>			
+			<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
+				class="my-3"
+				alertClass="alert-danger"
+				:manualHeadline="AlertNonServiceableZipHeader"
+				:manualCopy="AlertNonServiceableZipBody"
+				v-bind:isDismissible="false"
+			/>			
+			<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
+				class="my-3"
+				cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+				alertClass="alert-danger"
+				v-bind:isDismissible="false"
+			/>
+			<transition name="fade" mode="out-in">
+				<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
+					<div class="row my-4">
+						<div class="col">
+							<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+						</div>
+					</div>
+				</div>
+			</transition>								
 			<funnel-footer
+				cmsWidgetName="FunnelFooterWidget"
 				ref="funnelFooter"
+				:isDisabled="!meta.valid"
+				@ForwardClicked="forwardButtonAction"
 				:isForwardActionDisabled="!meta.valid"
 			/>
+			
 		</div>
 	</Form>
 </template>
@@ -26,14 +65,27 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+
 import { Form } from "vee-validate";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import baseMixin from "@/mixins/base-mixin";
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
 
+defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule("service-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
 	name: "address-lookup",
@@ -53,46 +105,29 @@ export default {
 
 		// Call the "next" function to complete the transition to this page.
 		next((vm) => {
-			vm.$refs.funnelHeader.initializeComponent(
+			vm.setCmsContent(resultMap.cmsContent);
-				resultMap.cmsContent.FunnelHeaderWidget
-			);
-			vm.$refs.vehicleBanner.initializeComponent(
-				resultMap.cmsContent.VehicleBannerWidget
-			);
-			vm.$refs.funnelSubHeader.initializeComponent(
-				resultMap.cmsContent.FunnelSubHeaderWidget
-			);
-			vm.$refs.funnelFooter.initializeComponent(
-				resultMap.cmsContent.FunnelFooterWidget
-			);
-			vm.$refs.customerQuestions.initializeComponent([
-					resultMap.cmsContent.StreetAddressQuestionWidget,
-					resultMap.cmsContent.CityQuestionWidget,
-					resultMap.cmsContent.StateQuestionWidget,
-					resultMap.cmsContent.ZipQuestionWidget,
-					resultMap.cmsContent.AlertVerificationWarningWidget,
-					resultMap.cmsContent.AlertNoMatchWarningWidget,
-					resultMap.cmsContent.FirstNameQuestionWidget,
-					resultMap.cmsContent.LastNameQuestionWidget,
-					resultMap.cmsContent.EmailAddressQuestionWidget,
-
-				]
-			);
 		});
 	},
 	data() {
 		return {
 			customerQuestions: {
 				addressQuestions: {
-					streetAddress: "",
+					streetAddress: this.getRegistrationAddressFromStore(),
-					city: "",
+					city: this.getRegistrationCityFromStore(),
-					state: "",
+					state: this.getRegistrationStateFromStore(),
-					zip: "",
+					zip: this.getRegistrationZipFromStore(),
 				},
-				firstName: "",
+				firstName: this.getRegistrationFirstNameFromStore(),
-				lastName: "",
+				lastName: this.getRegistrationLastNameFromStore(),
-				emailAddress: "",
+				emailAddress: this.getEmailFromStore(),
-			}   
+			}, 
+			serviceZip: this.getServiceZipFromStore(),
+			displayNonServiceableZipAlert: false,
+			displayVinNotFoundAlert: false,
+			displayMatchedDifferentVehicleAlert: false,
+			displayVinLookupByHomeAddressNotAllowedAlert: false,
+			previousCarIdFound: "", 
+			customAlertData: {}, 
 		}
 	},
 	methods: {
@@ -100,9 +135,220 @@ export default {
 			return store.getters.vehicle.carId !== null;
 		},
 		resetDependentState() {
-			// Invokes
+			store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
+			store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+		},
+		backButtonAction() {
+			// route to move backwards
+			this.$router.navigate(
+				this.navigationScenarios.CLICKED_BACK,
+				this.$route
+			);
+		},
+		getRegistrationAddressFromStore() {
+			return store.getters.vehicle.registration.address;
+		},
+		getRegistrationCityFromStore() {
+			return store.getters.vehicle.registration.city;
+		},
+		getRegistrationStateFromStore() {
+			return store.getters.vehicle.registration.state;
+		},
+		getRegistrationZipFromStore() {
+			return store.getters.vehicle.registration.zipCode;
+		},
+		getRegistrationFirstNameFromStore() {
+			return store.getters.vehicle.registration.firstName;
+		},
+		getRegistrationLastNameFromStore() {
+			return store.getters.vehicle.registration.lastName;
+		},						
+		getEmailFromStore() {
+			return store.getters.order.customer.emailAddress;
+		},
+		getServiceZipFromStore() {
+			return store.getters.order.serviceLocation.zip;
+		},
+		async forwardButtonAction() {
+			this.resetWarningsAndErrors();
+
+			// Lookup VIN(s) with the provided address
+			const vinLookup = await this.lookupVin(
+				this.customerQuestions.lastName, 
+				this.customerQuestions.addressQuestions.streetAddress, 
+				this.customerQuestions.addressQuestions.zip, 
+				this.customerQuestions.addressQuestions.state
+			);
+
+			if (!vinLookup.data.isStatePermissible) {				
+				// State Restrictions forbid lookup by address
+				this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+				this.$refs.funnelFooter.removeLoader();
+				return;
+			}
+			
+			// Validate if the original or service zip provided is serviceable
+			const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.customerQuestions.addressQuestions.zip);
+			if (!zipValidation.data.isServiceable) {
+				this.displayNonServiceableZipAlert = true;
+				this.showServiceZipField = true;
+				this.$refs.funnelFooter.removeLoader();
+			} 
+
+			const carEntered = store.getters.vehicle;
+			const carsFound = vinLookup.data.vinVehicles;			
+			if (carsFound.length == 0) {
+				// No VINs found					
+				this.displayVinNotFoundAlert = true;
+				this.$refs.funnelFooter.removeLoader();
+				return;				
+			} else if (carsFound.length == 1) {			
+				var carFound = carsFound[0].vehicle;
+
+				if (carEntered.carId == carFound.carId || carFound.carId == this.previousCarIdFound) {
+					// update data
+					this.updateVehicleInfo(carFound.vin, carFound);
+					this.updateCustomerInfo();
+
+					// navigate forward
+					this.navigateForward(carEntered, carsFound);					
+				} else {
+					// Display Alert
+					this.customAlertData.vehicleInfo = carFound;
+					this.displayMatchedDifferentVehicleAlert = true;
+
+					// Update button "Continue with..."
+					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);				
+					this.$refs.funnelFooter.removeLoader();
+				} 
+
+				this.previousCarIdFound = carFound.carId;
+
+			} else if (vinLookup.data.vinVehicles.length > 1) {
+				this.updateCustomerInfo();
+
+				// navigate forward
+				this.navigateForward(carEntered, carsFound);				
+			}
+
 
 		},
+		resetWarningsAndErrors() {
+			this.displayVinNotFoundAlert = false;
+			this.displayNonServiceableZipAlert = false;	
+			this.displayMatchedDifferentVehicleAlert = false;
+			this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+		},
+		async navigateForward(carEntered, carsFound) {
+			if (carsFound.length == 1) {
+				// get the damage options for the car that was found
+				const carFound = carsFound[0].vehicle;
+				const glassOptions = await baseMixin.methods.dispatchStoreAction(
+					storeActions.GET_DAMAGE_OPTIONS,
+					{ carId: carFound.carId }
+				);
+
+				// if the car entered is the same as the car found OR the glass options for the found car match the users damage selections
+				if (carEntered.carId == carFound.carId || isGlassAvailableForCarId(carFound.carId)) {
+					navigateAfterSaveToHeritageFunnel(this.$route);
+				} else {
+					// if not then navigate to the "vehicle-damage" page
+					this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});					
+				}
+			} else if (carsFound.length > 1) {
+				// if multiple cars were found 
+				if (carsFound.find(car => car.carId === carEntered.carId)) {
+					// and one of them matches the car id entered
+					navigateAfterSaveToHeritageFunnel(this.$route);
+				} else {
+					// and there is no match, navigate to "address-vehicle" page
+					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
+				}
+			} 
+
+		},
+		validateZip(zip) {
+			return baseMixin.methods.dispatchStoreAction(
+				storeActions.VALIDATE_ZIP, 
+				{ zip });
+		},
+		lookupVin(lastName, streetAddress, zip, state) {
+			return baseMixin.methods.dispatchStoreAction(
+				storeActions.LOOKUP_VIN_BY_ADDRESS,
+				{ 
+					licenseLastName: lastName, 
+					licenseStreetAddress: streetAddress, 
+					licenseZip: zip, 
+					licenseState: state 
+				}, false
+			);
+		},
+		updateVehicleInfo(vin, vehicleInfo) {
+			store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
+			store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
+			store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
+			store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
+			store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
+			store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
+			store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
+		},		
+		updateCustomerInfo() {
+			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
+			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
+			store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state);
+			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
+			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
+			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip);			
+			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.email);
+		},
+		
+	},
+	computed: {
+		AlertNonServiceableZipHeader(){
+			let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip;
+			let text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip);
+			return text;
+		},
+		AlertNonServiceableZipBody(){
+			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
+		},		
+		AlertMatchedDifferentVehicleHeader(){
+			let text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
+			return text;
+		},
+		AlertMatchedDifferentVehicleBody(){
+			let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
+			content = content.replaceAll("{custom:glassText}", getDamageString());
+			let vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+			let vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;   
+
+			content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound); 
+			content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); 			
+
+			return content;
+		},		
+	},
+	watch: {
+		customerQuestions: {		
+			handler(newValue) {
+				// if they modify one of the lookup fields (address, city, state, zip, or lastName), then modify the button text back to “Get my personalized quote”
+				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
+				this.showServiceZipField = false;
+				this.resetWarningsAndErrors();
+			},
+			deep: true
+		},
+		serviceZip: {
+			handler(newValue) {
+				// if they modify the service zip, then hide the error message”
+				this.displayNonServiceableZipAlert = false;
+			},
+		}
+
 	},
 	components: {
 		funnelHeader,
@@ -110,6 +356,8 @@ export default {
 		vehicleBanner,
 		funnelSubHeader,
 		customerQuestions,
+		textboxQuestion,
+		alert,
 		Form
 	},
 };

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -1,36 +1,34 @@
 <template>
 	<div class="row my-4">
 		<div class="col">
-			<textboxQuestion v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
+			<textboxQuestion cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
 		</div>
 	</div>
 	<transition name="fade" mode="out-in">
-		<div class="address-fields" v-show="showAddressFields" aria-live="polite">
+		<div class="row my-4" v-show="showAddressFields" aria-live="polite">
-			<div class="row my-4">
+			<div class="col">
-				<div class="col">
+				<textboxQuestion cmsWidgetName="CityQuestionWidget" v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
-					<textboxQuestion v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
-				</div>
 			</div>
-			<div class="row my-4">
-				<div class="col-6">
-					<dropdownQuestion v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
-				</div>            
-				<div class="col-6">
-					<textboxQuestion v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required"/>
-				</div>      
-			</div> 
 		</div>
 	</transition>
+	<transition name="fade" mode="out-in">
+		<div class="row my-4" v-show="showAddressFields" aria-live="polite">
+			<div class="col">
+				<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
+			</div>
+			<div class="col">
+				<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/>
+			</div>
+		</div>
+	</transition>		
 	<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
+		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
-		:alertHeadline="alertHeadlineVerificationWarning"
-		:alertCopy="alertCopyVerificationWarning"
 		v-bind:isDismissible="false"
 	/>
 	<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
+		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"
-		:alertHeadline="alertHeadlineNoMatchWarning"
-		:alertCopy="alertCopyNoMatchWarning"
 		v-bind:isDismissible="false"
 	/>
 </template>
@@ -41,17 +39,17 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi
 import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 import { applicationConfig } from "@/constants/application-config.js";
-import { computed } from 'vue';
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
+import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-//import store from "@/store";
 
 // DEFINE VALIDATION RULES
 defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
 defineRule("city-required", required(errorMessages.CITY_REQUIRED));
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
 defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
 
 export default ({
 	name: "address-questions",
@@ -67,19 +65,7 @@ export default ({
 			}),
 		},
 		validationRules: String,       
-	},
+	},          
-	setup(props, { emit }) {
-		// Please do not modify, this "computed" is used to track and report 
-		// this object's property changes to the parent component
-		const addressModel = computed({  // Use computed to wrap the object
-			get: () => props.modelValue,
-			set: (value) => emit('update:modelValue', value),
-		});
-
-		return { 
-			addressModel,
-		};
-	},           
 	data() {
 		return {
 			showAddressFields: false,
@@ -148,128 +134,130 @@ export default ({
 					'WY': 'Wyoming',            
 				}
 			}
-		}
+		},
+		addressModel: {
+			get: function() {
+				return this.modelValue;
+			},
+			set: function(newValue) {
+				this.$emit("update:modelValue", newValue);
+			}
+		},
 	},
 	methods: {
-		initializeComponent(cmsContent) {
+		setupAddressLookup() {
-			this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
+			const addressField1 = document.getElementById("autocomplete");
-			this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
+			const self = this;
-			this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
-			this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
 
-			// assign alert texts to this component
+			const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
-			this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
-			this.alertCopyVerificationWarning = cmsContent[4].BodyText;
 
-			this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
+			this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
-			this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
+				.then(() => {
+					// Script is loaded, initialize the autocomplete textbox
+					const autocomplete = new window.google.maps.places.Autocomplete(
+						addressField1,
+						{
+							componentRestrictions: { country: ["us"] },
+							fields: ["address_components"],
+							types: ["geocode"],
+						}
+					);
+
+					// Standard place_changed event handling
+					autocomplete.addListener('place_changed', fillInAddress);
+
+					addressField1.onblur = function() {
+						const hover = document.querySelector(".pac-container .pac-item:hover");
+						// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+						if (hover === null) {
+							const item = document.querySelector(".pac-container .pac-item");
+							if (item != null) {
+								const firstResult = item.textContent;
+								const geocoder = new window.google.maps.Geocoder();
+								geocoder.geocode({
+									address: firstResult
+								}, function (results, status) {
+									if (status === window.google.maps.GeocoderStatus.OK) {
+										fillInAddress(results[0]);
+										self.displayVerificationWarning = true;
+										self.displayNoMatchWarning = false;
+									}
+								});
+							}
+							else {
+								self.addressModel.city = "";
+								self.addressModel.state = "";
+								self.addressModel.zip = "";      
+								self.showAddressFields = true;
+								self.displayVerificationWarning = false;
+								self.displayNoMatchWarning = true;
+							}					
+						}
+					};
+
+					function fillInAddress(place) {
+						if (!place) {
+							place = autocomplete.getPlace();
+						}
+
+						if (place && place.address_components) {
+							self.addressModel.streetAddress= "";
+							self.showAddressFields = true;
+
+							for (const component of place.address_components) {
+								const componentType = component.types[0];
+
+								switch (componentType) {
+									case "street_number": {
+										self.addressModel.streetAddress = component.long_name;
+										break;
+									}
+									case "route": {
+										self.addressModel.streetAddress += ' ' + component.short_name;
+										break;
+									}
+									case "locality": {
+										self.addressModel.city = component.long_name;
+										break;
+									}
+									case "administrative_area_level_1": {
+										self.addressModel.state = component.short_name;
+										break;
+									}
+									case "postal_code": {
+										self.addressModel.zip = component.long_name;
+										break;
+									}
+
+								}
+							}  
+
+							self.displayVerificationWarning = false;
+							self.displayNoMatchWarning = false; 
+						} 
+						else {
+							self.displayVerificationWarning = true;
+							self.displayNoMatchWarning = false;
+						}       
+					}
+				})
+				.catch(() => {
+					// Failed to fetch script
+					console.log("Unable to load Google Places API script");
+				});
 		}
 	},
 	mounted() {
-
+		this.setupAddressLookup();
-		const addressField1 = document.getElementById("autocomplete");
-		const self = this;
-
-		const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
-
-		this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
-			.then(() => {
-				// Script is loaded, initialize the autocomplete textbox
-				const autocomplete = new window.google.maps.places.Autocomplete(
-					addressField1,
-					{
-						componentRestrictions: { country: ["us"] },
-						fields: ["address_components"],
-						types: ["address"],
-					}
-				);
-
-				// Standard place_changed event handling
-				autocomplete.addListener('place_changed', fillInAddress);
-
-				addressField1.onblur = function() {
-					const hover = document.querySelector(".pac-container .pac-item:hover");
-
-					// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-					if (hover === null) {
-						const item = document.querySelector(".pac-container .pac-item");
-						if (item != null) {
-							const firstResult = item.textContent;
-							const geocoder = new window.google.maps.Geocoder();
-							geocoder.geocode({
-								address: firstResult
-							}, function (results, status) {
-								if (status === window.google.maps.GeocoderStatus.OK) {
-									fillInAddress(results[0]);
-									self.displayVerificationWarning = true;
-									self.displayNoMatchWarning = false;
-								}
-							});
-						}
-						else {
-							self.addressModel.city = "";
-							self.addressModel.state = "";
-							self.addressModel.zip = "";      
-							self.showAddressFields = true;
-							self.displayVerificationWarning = false;
-							self.displayNoMatchWarning = true;
-						}
-
-				
-					}
-				};
-
-				function fillInAddress(place) {
-					if (!place) {
-						place = autocomplete.getPlace();
-					}
-
-					if (place && place.address_components) {
-						self.addressModel.streetAddress= "";
-						self.showAddressFields = true;
-
-						for (const component of place.address_components) {
-							const componentType = component.types[0];
-
-							switch (componentType) {
-								case "street_number": {
-									self.addressModel.streetAddress  = component.long_name;
-									break;
-								}
-								case "route": {
-									self.addressModel.streetAddress += ' ' + component.short_name;
-									break;
-								}
-								case "locality": {
-									self.addressModel.city = component.long_name;
-									break;
-								}
-								case "administrative_area_level_1": {
-									self.addressModel.state = component.short_name;
-									break;
-								}
-								case "postal_code": {
-									self.addressModel.zip = component.long_name;
-									break;
-								}
-
-							}
-						}  
-
-						self.displayVerificationWarning = false;
-						self.displayNoMatchWarning = false; 
-					} 
-					else {
-						self.displayVerificationWarning = true;
-						self.displayNoMatchWarning = false;
-					}       
-				}
-			})
-			.catch(() => {
-				// Failed to fetch script
-				console.log("Unable to load Google Places API script");
-			});
 	},
+	watch: {
+		addressModel: {
+			handler(newValue){
+				this.displayNoMatchWarning = false;
+			},
+			deep: true
+		}
+	},	
 	components: {
 		textboxQuestion,
 		dropdownQuestion,

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,18 +1,18 @@
 <template>
-	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
+	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
 	<div class="row my-4">
 		<div class="col">
-			<textboxQuestion v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
+			<textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
 		</div>
 	</div> 
 	<div class="row my-4">
 		<div class="col">
-			<textboxQuestion v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
+			<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
 		</div>
 	</div>
 	<div class="row my-4">
 		<div class="col">
-			<textboxQuestion v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
+			<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
 		</div>
 	</div>  
 </template>
@@ -20,12 +20,10 @@
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-import { computed } from 'vue';
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-//import store from "@/store";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -33,8 +31,6 @@ defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
 defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
 defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
 
-//EMAIL_ADDRESS_FORMAT
-
 export default ({
 	name: "customer-questions",
 	emits: ['update:modelValue'], // The component emits an event
@@ -55,30 +51,10 @@ export default ({
 				}          
 			}),
 		},
-		validationRules: String,       
+		validationRules: String,    
 	},    
-	setup(props, { emit }) {
-		// Please do not modify, this "computed" is used to track and report 
-		// this object's property changes to the parent component
-		const customerModel = computed({  // Use computed to wrap the object
-			get: () => props.modelValue,
-			set: (value) => emit('update:modelValue', value),
-		});
-
-		return { customerModel };
-	},     
-	methods: {
-		initializeComponent(cmsContent){
-			// pass alert texts to addressQuestions component
-			this.$refs.addressQuestions.initializeComponent(cmsContent);
-
-			this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
-			this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
-			this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
-		}
-	},
 	computed: {
-		value: {
+		customerModel: {
 			get: function() {
 				return this.modelValue;
 			},

src/layouts/form-test/form-test.vue

@@ -95,7 +95,7 @@ export default {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
     const damageOptionsPromise =
-      baseMixin.methods.dispatchNonBlockingStoreAction(
+      baseMixin.methods.dispatchStoreAction(
         storeActions.GET_DAMAGE_OPTIONS,
         { carId: store.getters.vehicle.carId }
       );

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -51,7 +51,7 @@ jest.mock("@/store", () => ({
     },
     eventBusItem: jest.fn(),
     damage: {
-      glassToReplace: [] 
+      glassToReplace: []
     },
   },
 }));
@@ -115,7 +115,7 @@ function setupMocks({
   },
 }) {
   //Mock api responses
-  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+  baseMixin.methods.dispatchStoreAction = jest.fn();
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -144,4 +144,4 @@ function setupMocks({
   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
   return { wrapper, apiPromise };
-}
+}

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

@@ -5,23 +5,60 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    <div
+      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
+    >
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" validationRules="license-plate-required"  />
+          <textboxQuestion
+            cmsWidgetName="LicensePlateNumber"
+            v-model="licensePlate"
+            isRequired
+            inputId="license_plate"
+            validationRules="license-plate-required"
+          />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+          <textboxQuestion
+            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 cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+          <textboxQuestion
+            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
@@ -33,7 +70,13 @@
       />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip"  validationRules="zip-required" />
+          <textboxQuestion
+            v-if="!isRegistrationZipServicable"
+            cmsWidgetName="ServiceZip"
+            v-model="serviceZip"
+            inputId="serviceZip"
+            validationRules="zip-required"
+          />
         </div>
       </div>
       <alert
@@ -77,16 +120,31 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import { errorMessages } from "@/constants/error-messages";
-import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import {
+  getDamageString,
+  isGlassAvailableForCarId,
+} from "@/helpers/damage-helper";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
-defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
+defineRule(
+  "license-plate-required",
+  required(errorMessages.LICENSE_PLATE_REQUIRED)
+);
 defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
-defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
-defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
+  "email-address-required",
+  required(errorMessages.EMAIL_ADDRESS_REQUIRED)
+);
+defineRule(
+  "email-address-format",
+  regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+  )
+);
 
 export default {
   name: "license-plate-lookup",
@@ -94,7 +152,6 @@ export default {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-
     // Settle promises and get results
     const promiseResultMap = [
       {
@@ -111,7 +168,7 @@ export default {
     });
   },
   props: {
-    validationRules: String, 
+    validationRules: String,
   },
   data() {
     return {
@@ -122,28 +179,53 @@ export default {
       registrationZip: this.getRegistrationZipFromStore(),
       email: this.getEmailFromStore(),
       serviceZip: this.getServiceZipFromStore(),
-      previouslyEnteredCarId: '',
+      previouslyEnteredCarId: "",
       customAlertData: {},
       isSelectedGlassAvailableForVehicle: true,
     };
   },
+  mounted() {
+    this.attachCustomEvents();
+  },
   computed: {
-    MatchedDifferentVehicleAlertHeader(){
+    MatchedDifferentVehicleAlertHeader() {
-      let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
+      let text = this.getCmsContent(
+        "MatchedDifferentVehicleAlertWidget",
+        "HeadlineText"
+      ).replaceAll("{custom:damage}", getDamageString());
 
       return text;
     },
-    MatchedDifferentVehicleAlertBody(){
+    MatchedDifferentVehicleAlertBody() {
-      let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model);
+      let text = this.getCmsContent(
+        "MatchedDifferentVehicleAlertWidget",
+        "BodyText"
+      )
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll(
+          "{custom:plateLookupYear}",
+          this.customAlertData?.vehicleInfo?.year
+        )
+        .replaceAll(
+          "{custom:plateLookupMake}",
+          this.customAlertData?.vehicleInfo?.make
+        )
+        .replaceAll(
+          "{custom:plateLookupModel}",
+          this.customAlertData?.vehicleInfo?.model
+        );
 
       return text;
     },
-    NoServiceZipHeader(){
+    NoServiceZipHeader() {
-      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.registrationZip);
+      let text = this.getCmsContent(
+        "NoServiceZipWidget",
+        "HeadlineText"
+      ).replaceAll("{custom:zip}", this.registrationZip);
 
       return text;
     },
-    NoServiceZipBody(){
+    NoServiceZipBody() {
       return this.getCmsContent("NoServiceZipWidget", "BodyText");
     },
   },
@@ -158,23 +240,35 @@ export default {
       store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
-    getLicensePlateFromStore(){
+    attachCustomEvents() {
-      return store.getters.vehicle.registration.licensePlate
+      this.prependActionToMethod(this, this.forwardButtonAction, () => {
+        this.pushEventToGA(
+          this.$route.query[this.queryStrings.FMG_PAGE],
+          this.GaActions.SUBMITTED,
+          this.GaLabels.LICENSE_PLATE_LOOKUP,
+          true
+        );
+      });
     },
-    getRegistrationZipFromStore(){
+    getLicensePlateFromStore() {
-      return store.getters.vehicle.registration.zipCode
+      return store.getters.vehicle.registration.licensePlate;
     },
-    getEmailFromStore(){
+    getRegistrationZipFromStore() {
-      return store.getters.order.customer.emailAddress
+      return store.getters.vehicle.registration.zipCode;
     },
-    getServiceZipFromStore(){
+    getEmailFromStore() {
-      return store.getters.order.serviceLocation.zip
+      return store.getters.order.customer.emailAddress;
+    },
+    getServiceZipFromStore() {
+      return store.getters.order.serviceLocation.zip;
     },
     backButtonAction() {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip);
+      const zipValidation = this.serviceZip
+        ? await this.validateZip(this.serviceZip)
+        : await this.validateZip(this.registrationZip);
       if (!zipValidation.data.isServiceable) {
         this.$refs.funnelFooter.removeLoader();
         this.isVinValid = true;
@@ -183,63 +277,85 @@ export default {
         return;
       }
 
-      const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
+      const vinLookup = await this.lookupVin(
+        this.licensePlate,
+        zipValidation.data.state
+      ).catch(() => {
         this.$refs.funnelFooter.removeLoader();
         this.isVinValid = false;
         this.isCarIdDifferent = false;
         return;
       });
 
-      this.isCarIdDifferent = vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
+      this.isCarIdDifferent =
+        vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
 
-      if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) {
+      if (
+        this.isCarIdDifferent &&
+        vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
+      ) {
         this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
         this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
-        this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
+        this.$refs.funnelFooter.updateButtonText(
+          `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
+        );
         this.isVinValid = true;
-        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
+        this.isSelectedGlassAvailableForVehicle =
+          await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
         this.$refs.funnelFooter.removeLoader();
         return;
       }
 
-      this.updateCustomerInfo(vinLookup.data.vin, vinLookup.data.vehicle, zipValidation.data.state);
+      this.updateCustomerInfo(
+        vinLookup.data.vin,
+        vinLookup.data.vehicle,
+        zipValidation.data.state
+      );
 
-      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+      const partsData = await baseMixin.methods.dispatchStoreAction(
         this.storeActions.GET_PARTS_OR_QUESTIONS,
         {
           carId: vinLookup.data.vehicle.carId,
-          glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
+          glassArray:
+            this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
+              ? []
+              : store.getters.damage.glassToReplace,
           zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
-          vin: vinLookup.data.vin
+          vin: vinLookup.data.vin,
         },
         false
       );
       this.navigateForward(partsData);
     },
-    navigateForward(partsData){
+    navigateForward(partsData) {
-        if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-            this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data);
+        this.$router.navigateAfterSave(
-            return;
+          this.navigationScenarios.CLICKED_FORWARD,
-        } else {
+          this.$route,
-            navigateAfterSaveToHeritageFunnel(this.$route);
+          {},
-            return;
+          { displayVehicleChangeAlert: true },
-        }
+          partsData.data
+        );
+        return;
+      } else {
+        navigateAfterSaveToHeritageFunnel(this.$route);
+        return;
+      }
     },
     validateZip(zip) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
-        storeActions.VALIDATE_ZIP,
+        zip,
-        { zip }
+      });
-      );
     },
     lookupVin(plate, state) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.LOOKUP_VIN_BY_PLATE,
         { licensePlate: plate, licenseState: state }
       );
     },
     updateCustomerInfo(vin, vehicleInfo, registrationState) {
-      if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-          store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+        store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
       }
       store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
       store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
@@ -247,28 +363,34 @@ export default {
       store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
       store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
       store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
-      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY,vehicleInfo.category);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL,vehicleInfo.imageUrl);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,vehicleInfo.imageVifNumber);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,vehicleInfo.imageColor);
-      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
+      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,this.licensePlate);
       store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
-      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
+      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE,this.registrationZip);
       store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip);
       store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
   watch: {
-        licensePlate() {
+    licensePlate() {
-            this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
+      this.$refs.funnelFooter.updateButtonText(
-        },
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
-        registrationZip(){
+      );
-          this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
-        },
-        serviceZip(){
-          this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
-        }
     },
+    registrationZip() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    },
+    serviceZip() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    },
+  },
   components: {
     Form,
     funnelHeader,

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

@@ -31,11 +31,7 @@ export default ({
         }
     },
     props: {               
-        isMultiSelect: Boolean,
         modelValue: Array,
-        isAvailable: Boolean,
-        filterByVehicleCategory: Boolean,
-        name: String,
         groupName: String,
         cmsWidgetName: String,
     },

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -17,6 +17,7 @@ import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 import { validate } from "vee-validate";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+import { routerParams } from "@/router/router-constants/router-params";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -703,6 +704,57 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true);
+  })
+});
+
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
+  })
+});
+
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
+  })
+});
+
 // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
 //    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
 // 
@@ -734,32 +786,41 @@ describe("vehicle-damage.vue", () => {
 });
 
 
-function setupMocks({
+function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
-  pageHeaderWidgetHeaderText = {},
+  var pageHeaderWidgetHeaderTextDefault = {};
-  mountOptionsMockData = {
+  var mountOptionsMockDataDefault = {
     router: {
       navigate: jest.fn(),
     },
+    route: {
+      params: {
+        [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+      }
+    },
     store: {
       getters: {
         vehicle: {},
-        payment: { insuranceCoverage: { isVerified: false } },
+        payment: {
+          insuranceCoverage: {
+            isVerified: false
+          }
+        },
       },
     },
-  },
+  };
-}) {
+  // Combine parameters with default values
+  pageHeaderWidgetHeaderText = Object.assign(pageHeaderWidgetHeaderTextDefault, pageHeaderWidgetHeaderText);
+  mountOptionsMockData = Object.assign(mountOptionsMockDataDefault, mountOptionsMockData);
   //Mock api responses
-  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+  baseMixin.methods.dispatchStoreAction = jest.fn();
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleBannerWidget: {
-        GenericVehicleImage:
+        GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
       },
       FunnelHeaderWidget: {
-        LogoImage:
+        LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
     },
     damageOptions: {

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

@@ -9,50 +9,57 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-          <damageLocationQuestion
+        <alert
-            ref="damageLocation"
+          ref="vehicleChangeAlert"
-            cmsWidgetName="DamageLocationQuestion"
+          class="mt-5 mb-0"
-            v-model="selectedDamageLocations"
+          cmsWidgetName="VehicleChangeAlert"
-            groupName="DamageLocationQuestion"
+          v-show="shouldDisplayVehicleChangeAlert"
-          />
+          alertClass="alert-warning"
-          <windshieldOptions
+          :isDismissible="false"
-            ref="windshieldOptions"
+        />
-            v-model="selectedWindshieldOptions"
+        <damageLocationQuestion
-            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+          ref="damageLocation"
-            :hasSplitSingleConflict="hasSplitSingleConflict"
+          cmsWidgetName="DamageLocationQuestion"
-            :selectedDamageLocations="selectedDamageLocations"
+          v-model="selectedDamageLocations"
-          />
+          groupName="DamageLocationQuestion"
-          <alert
+        />
-            class="my-3"
+        <windshieldOptions
-            cmsWidgetName="HasReplacementConflict"
+          ref="windshieldOptions"
-            v-show="hasRepairReplaceConflict"
+          v-model="selectedWindshieldOptions"
-            alertClass="alert-danger"
+          :hasRepairReplaceConflict="hasRepairReplaceConflict"
-            :isDismissible="false"
+          :hasSplitSingleConflict="hasSplitSingleConflict"
-          />
+          :selectedDamageLocations="selectedDamageLocations"
-          <sideDoorOptions
+        />
-            ref="sideDoorOptions"
+        <alert
-            cmsWidgetName="SideDoorSideQuestion"
+          class="my-3"
-            groupName="SideDoorSideQuestion"
+          cmsWidgetName="HasReplacementConflict"
-            v-model="sideDoorOptionsData"
+          v-show="hasRepairReplaceConflict"
-            v-show="!hasRepairReplaceConflict"
+          alertClass="alert-danger"
-            :selectedDamageLocations="selectedDamageLocations"
+          :isDismissible="false"
-          />
+        />
-          <replaceOptionsQuestion
+        <sideDoorOptions
-            ref="backGlassOptions"
+          ref="sideDoorOptions"
-            cmsWidgetName="RearReplaceOptionsQuestion"
+          cmsWidgetName="SideDoorSideQuestion"
-            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+          groupName="SideDoorSideQuestion"
-            v-model="selectedRearReplaceOptions"
+          v-model="sideDoorOptionsData"
-            groupName="BackGlassReplaceOptionsQuestion"
+          v-show="!hasRepairReplaceConflict"
-            validationRules="replace-options-required"
+          :selectedDamageLocations="selectedDamageLocations"
-            isRequired
+        />
-          />
+        <replaceOptionsQuestion
-          <funnel-footer
+          ref="backGlassOptions"
-            cmsWidgetName="FunnelFooterWidget"
+          cmsWidgetName="RearReplaceOptionsQuestion"
-            :isForwardActionDisabled="!meta.valid"
+          :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-            :isBackButtonHidden=shouldHideBackButton
+          v-model="selectedRearReplaceOptions"
-            @back-clicked="backButtonAction"
+          groupName="BackGlassReplaceOptionsQuestion"
-            @ForwardClicked="forwardButtonAction"
+          validationRules="replace-options-required"
-          />
+        />
+        <funnel-footer
+          cmsWidgetName="FunnelFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          :isBackButtonHidden=shouldHideBackButton
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
       </div>
     </Form>
 </template>
@@ -79,6 +86,7 @@ import { errorMessages } from "@/constants/error-messages";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { queryStrings } from "@/constants/query-strings";
 
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
@@ -92,7 +100,7 @@ export default {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
-      baseMixin.methods.dispatchNonBlockingStoreAction(
+      baseMixin.methods.dispatchStoreAction(
         storeActions.GET_DAMAGE_OPTIONS,
         { carId: store.getters.vehicle.carId }
       );
@@ -126,6 +134,8 @@ export default {
       vm.$refs.backGlassOptions.initializeComponent(
         resultMap.damageOptions.backGlassOptions.availableReplacementOptions
       );
+
+
     });
   },
   data(){
@@ -140,6 +150,9 @@ export default {
       selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
     }
   },
+  mounted(){
+    this.attachCustomEvents();
+  },
   methods: {
     arePagePrerequisitesValid() {
       if(store.getters.vehicle.carId){
@@ -152,6 +165,13 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
 
+    attachCustomEvents(){
+    if(this.$store.getters.vehicle.imageVifNumber){
+      this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
+      this.$store.getters.vehicle.carId, true);
+    }
+    },
+
     backButtonAction() {
       // route to move backwards
       this.$router.navigate(
@@ -273,7 +293,7 @@ export default {
 
       store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
 
-      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
+      const partsData = await baseMixin.methods.dispatchStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
       { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
 
       this.navigateForward(partsData);
@@ -288,6 +308,12 @@ export default {
         return;
       }
 
+      // Temporary easter egg to navigate to address-lookup.
+      if (store.getters.vehicle.year === 2014) {
+        this.$router.navigateAfterSave(this.navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP, this.$route, {}, {}, partsData.data);
+        return;
+      }      
+
       // If vin already exists, navigate directly to vin-lookup
       if(this.$store.getters.vehicle.vin){
         this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
@@ -410,6 +436,9 @@ export default {
         })
         );
     },
+    shouldDisplayVehicleChangeAlert() {
+      return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+    },
     shouldHideBackButton(){
       return this.$store.getters.payment.insuranceCoverage.isVerified;
     }

src/layouts/vehicle-make/make-question/make-question.vue

@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.GET_VEHICLE_MAKES,
         { year: store.getters.vehicle.year }
       );

src/layouts/vehicle-model/model-question/model-question.vue

@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.GET_VEHICLE_MODELS,
         { year: store.getters.vehicle.year, make: store.getters.vehicle.make }
       );

src/layouts/vehicle-style/style-question/style-question.vue

@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.GET_VEHICLE_STYLES,
         {
           year: store.getters.vehicle.year,

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -87,7 +87,7 @@ describe("vehicle-style.vue", () => {
 });
 
 describe("vehicle-style.vue", () => {
-  test("selectVehicle triggers a dispatchNonBlockingStoreAction commit", async (done) => {
+  test("selectVehicle triggers a dispatchStoreAction commit", async (done) => {
     //Arrange
     const { wrapper, apiPromise } = setupMocks({
       pageHeaderWidgetHeaderText: "Select a style to get started",
@@ -119,7 +119,7 @@ describe("vehicle-style.vue", () => {
 
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.dispatchNonBlockingStoreAction).toHaveBeenCalled();
+      expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
       done();
     });
   });

src/layouts/vehicle-style/vehicle-style.vue

@@ -76,7 +76,7 @@ export default {
       );
     },
     setVehicle() {
-      return this.dispatchNonBlockingStoreAction(
+      return this.dispatchStoreAction(
         this.storeActions.SET_VEHICLE,
         {
           year: this.$store.getters.vehicle.year,

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

@@ -24,7 +24,7 @@ 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 { getDeviceIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 
 import baseMixin from "@/mixins/base-mixin";
 import store from "@/store";
@@ -44,7 +44,7 @@ export default {
     const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
     // Log experiment exposure
-    const logExperimentExposurePromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE, 
+    const logExperimentExposurePromise = baseMixin.methods.dispatchStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE, 
     {
       userId: getDeviceIdValue(),
       sessionKey: getSessionKeyValue(),
@@ -94,7 +94,6 @@ export default {
       return true;
     },
     resetDependentState() {
-
       // Set
       store.commit(storeMutations.UPDATE_MAKE, null);
       store.commit(storeMutations.UPDATE_MODEL, null);
@@ -106,7 +105,7 @@ export default {
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
       store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
-    }
+    },
   },
   components: {
     yearQuestion,

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

@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.GET_VEHICLE_YEARS,
         {}
       );

src/layouts/vin-lookup/vin-lookup.vue

@@ -5,13 +5,26 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    <div
+      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
+    >
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" isRequired disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
+          <textboxQuestion
+            cmsWidgetName="VinNumber"
+            v-model="vin"
+            inputId="vin"
+            isRequired
+            disableAutoFill
+            validationRules="vin-required|vin-format"
+            :isDisabled="isVinFieldReadOnly"
+          />
         </div>
       </div>
       <div class="row my-2">
@@ -21,20 +34,36 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" isRequired disableAutoFill validationRules="zip-required" />
+          <textboxQuestion
+            cmsWidgetName="ServiceZIP"
+            v-model="zip"
+            inputId="zip"
+            mask="#####"
+            isRequired
+            disableAutoFill
+            validationRules="zip-required"
+          />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" isRequired disableAutoFill validationRules="email-address-required|email-address-format" />
+          <textboxQuestion
+            cmsWidgetName="EmailAddress"
+            v-model="email"
+            inputId="email"
+            isRequired
+            disableAutoFill
+            validationRules="email-address-required|email-address-format"
+          />
         </div>
       </div>
       <alert
         class="my-3"
+        :manualHeadline="MatchedDifferentVehicleAlertHeader"
+        :manualCopy="MatchedDifferentVehicleAlertBody"
         v-model="customAlertData"
         v-if="matchedDifferentVehicle"
         alertClass="alert-danger"
-        cmsWidgetName="MatchedDifferentVehicle"
       />
       <alert
         class="my-3"
@@ -45,24 +74,11 @@
       />
       <alert
         class="my-3"
+        :manualHeadline="NoServiceZipHeader"
+        :manualCopy="NoServiceZipBody"
         v-model="customAlertData"
         v-if="noServiceZip"
         alertClass="alert-warning"
-        cmsWidgetName="NoServiceZipWidget"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinFound"
-        alertClass="alert-warning"
-        cmsWidgetName="VinFoundWidget"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinFoundReadOnly"
-        alertClass="alert-warning"
-        cmsWidgetName="VinFoundReadOnlyWidget"
       />
       <alert
         class="my-3"
@@ -88,7 +104,7 @@
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
         ref="funnelFooter"
-        :isDisabled="!meta.valid"
+        :isForwardActionDisabled="!meta.valid"
         @back-clicked="backButtonAction"
         @ForwardClicked="forwardButtonAction"
       />
@@ -114,15 +130,29 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } 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 { Form, defineRule } from "vee-validate";
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
-defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
-defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
+  "email-address-required",
+  required(errorMessages.EMAIL_ADDRESS_REQUIRED)
+);
+defineRule(
+  "email-address-format",
+  regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+  )
+);
 defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
-defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
+defineRule(
+  "vin-format",
+  regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)
+);
 
 export default {
   name: "vin-lookup",
@@ -130,7 +160,6 @@ export default {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-
     // Settle promises and get results
     const promiseResultMap = [
       {
@@ -159,12 +188,48 @@ export default {
       foundWindshieldAlert: false,
       vinNotFound: false,
       perfectMatchNewVinAlert: false,
-      vin: '',
+      vin: this.getVinFromStore(),
-      zip: '',
+      zip: this.getZipFromStore(),
-      email: '',
+      email: this.getEmailFromStore(),
       customAlertData: {},
+      isCarIdDifferent: false,
+      previouslyEnteredCarId: '',
+      invalidZip: '',
     };
   },
+  computed: {
+    MatchedDifferentVehicleAlertHeader(){
+      let text = this.getCmsContent("MatchedDifferentVehicle",
+      "HeadlineText").replaceAll("{custom:damage}", getDamageString());
+
+      return text;
+    },
+    MatchedDifferentVehicleAlertBody(){
+      let text = this.getCmsContent("MatchedDifferentVehicle",
+        "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}",
+        this.customAlertData?.vehicleInfo?.model);
+
+      return text;
+    },
+    NoServiceZipHeader(){
+      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
+
+      return text;
+    },
+    NoServiceZipBody(){
+      return this.getCmsContent("NoServiceZipWidget", "BodyText");
+    },
+    PerfectMatchNewVinAlertHeader() {
+      return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText");
+    },
+    PerfectMatchNewVinAlertBody() {
+      return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}",
+      getDamageString())
+    },
+    isVinFieldReadOnly(){
+        return this.$store.getters.payment.insuranceCoverage.isVerified;
+    },
+  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
@@ -176,6 +241,25 @@ export default {
       store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
+    getEmailFromStore(){
+      return store.getters.order.customer.emailAddress
+    },
+    getVinFromStore(){
+      return store.getters.vehicle.vin
+    },
+    getZipFromStore(){
+      return store.getters.vehicle.registration.zipCode
+    },
+    attachCustomEvents() {
+      this.prependActionToMethod(this, this.forwardButtonAction, () => {
+        this.pushEventToGA(
+          this.$route.query[this.queryStrings.FMG_PAGE],
+          this.GaActions.SUBMITTED,
+          this.GaLabels.VINLOOKUP,
+          true
+        );
+      });
+    },
     backButtonAction() {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
@@ -185,60 +269,55 @@ export default {
         this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
         this.noServiceZip = true;
+        this.invalidZip = this.zip;
         return;
       }
-      const vinLookup = await this.lookupVin(this.vin).catch(() => {
+      const vehicleLookup = await this.lookupVehicle(this.vin).catch(() => {
+        this.vinNotFound = true;
         this.$refs.funnelFooter.removeLoader();
-        this.noMatchAlert = true;
+        this.noServiceZip = false;
         return;
       });
-      if (vinLookup.data.carId !== store.getters.vehicle.carId) {
+      this.isCarIdDifferent = vehicleLookup.data.carId !== store.getters.vehicle.carId;
-        this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+
+      if (this.isCarIdDifferent && (vehicleLookup.data.carId !== this.previouslyEnteredCarId)) {
+        this.previouslyEnteredCarId = vehicleLookup.data.carId;
+        this.noServiceZip = false;
+        this.customAlertData.vehicleInfo = vehicleLookup.data;
+        this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookup.data.year} ${vehicleLookup.data.make} ${vehicleLookup.data.model}`);
+        this.isVinValid = true;
+        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId);
         this.$refs.funnelFooter.removeLoader();
-        this.foundWindshieldAlert = true;
+        this.matchedDifferentVehicle = true;
         return;
       }
-      const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
+      this.updateStore(vehicleLookup.data);
-      this.updateStore(carInfo)
+      this.navigateForward();
-      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
-        {
-          carId: store.getters.vehicle.carId,
-          glassArray: store.getters.damage.glassToReplace,
-          zipCode: this.zip,
-          vin: vinLookup.vin
-        },
-        false
-      );
-      this.navigateForward(partsData);
     },
-    navigateForward(partsData){
+    navigateForward(){
-        if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
+        if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
-            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
             return;
-        } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
-           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
-           return;
         } else {
-            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+            navigateAfterSaveToHeritageFunnel(this.$route);
+            return;
         }
     },
     validateZip(zip) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
-        storeActions.VALIDATE_ZIP,
+        zip,
-        { zip }
+      });
-      );
     },
-    lookupVin(vin) {
+    lookupVehicle(vin) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
+      return baseMixin.methods.dispatchStoreAction(
         storeActions.LOOKUP_VEHICLE_BY_VIN,
         { vin }
       );
     },
     updateStore(carInfo) {
-      // if(vehicleDamage){
+      if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
-      //     store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+          store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      // }
+      }
       store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
       store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
       store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
@@ -248,16 +327,11 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
       store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
       store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageVifNumber);
       store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
       store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
-  computed: {
-      isVinFieldReadOnly(){
-          return this.$store.getters.payment.insuranceCoverage.isVerified;
-      }
-  },
   components: {
     Form,
     funnelHeader,

src/mixins/analytics-mixin.js

@@ -1,64 +1,109 @@
 import { storeActions } from "@/constants/store-actions";
-import baseMixin from "@/mixins/base-mixin";
-import { settleAllPromises } from "@/helpers/layout-helper";
 import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
-import { analyticsPageEvents } from "@/constants/analytics-page-events";
+import { experimentSettings } from "@/constants/experiments";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+
+import baseMixin from "@/mixins/base-mixin";
+
+// We will need current page name for multiple methods, define it once to re-use.
+const currentPageName = getPageNameByQueryString();
 
 export default {
   methods: {
-    logEvent(destinationFmgPageValue, pageEvent, category, action, label, value){
+    logEvent(pageEvent, category, action, label, value) {
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
-        pageName: destinationFmgPageValue,
+        pageName: currentPageName,
         sessionId: getSessionIdValue(),
         shouldUseSessionId: true,
       };
 
       if (pageEvent) {
-        payload.pageEvent = {action: '', event: pageEvent};
+        payload.pageEvent = { action: '', event: pageEvent };
       }
 
       if (category) {
-        payload.customEvent = {category: category, action: action, label: label, value: value};
+        payload.customEvent = { category: category, action: action, label: label, value: value };
       }
 
-      baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, payload, false);
+      baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false);
     },
 
-    pushEventToGA(category, action, label, value, pageName, pushToLogApp) {
+    pushEventToGA(category, action, label, pushToLogApp = false) {
       const eventToBePushed = {
-        'event': 'ga_event',
+        'event': GaEvents.GENERIC_EVENT,
         'category': category,
         'action': action,
         'label': label,
-        'value': value,
+        'value': undefined,
-        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
+        'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
 
       pushToDataLayerIfDefined(eventToBePushed);
-      
+
       if (pushToLogApp) {
-        this.logEvent(pageName, null, category, action, label, value);
+        this.logEvent(undefined, category, action, label, undefined);
       }
+
     },
 
-    pushPageViewToGA(pageName) {
+    pushPageViewToGA() {
       const pageViewEvent = {
-        'event': 'logPageview',
+        'event': GaEvents.PAGE_VIEW_EVENT,
-        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
+        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
-        'pageTitle': pageName
+        'pageTitle': currentPageName
       };
 
       pushToDataLayerIfDefined(pageViewEvent);
-      this.logEvent(pageName, analyticsPageEvents.ENTRY);
+
-    }
+      this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
+    },
+
+    pushExperimentsToDataLayer(experiments) {
+      experiments?.data?.forEach(exp => {
+
+        // Set Google Dimension Index based on experiment settings.
+        let googleDimensionIndex = 99;
+
+        if (exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX] !== undefined) {
+          googleDimensionIndex = exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX];
+        }
+
+        // Create object with dimension index and value.
+        const experimentWithDimension = {};
+
+        Object.keys(exp).forEach(key => {
+          experimentWithDimension[`${key}_${googleDimensionIndex}`] = exp[key];
+        });
+
+        // Push to the data layer with the Google Custom Dimension Index.
+        pushToDataLayerIfDefined(experimentWithDimension);
+      });
+    },
+    
+    prependActionToMethod(object, method, actionToPrepend) {
+      const baseMethod = object[method.name];
+      object[method.name] = function () {
+        actionToPrepend.apply(this, arguments);
+        return baseMethod.apply(object, arguments);
+      };
+    },
   },
   computed: {
-    storeActions() {
+    analyticsPageEvents() {
-      return storeActions;
+      return analyticsPageEvents;
     },
+    GaCategories() {
+      return GaCategories;
+    },
+    GaActions() {
+      return GaActions;
+    },
+    GaLabels() {
+      return GaLabels;
+    }
   },
 };
 
@@ -66,4 +111,14 @@ function pushToDataLayerIfDefined(data) {
   if (window.dataLayer !== undefined) {
     window.dataLayer.push(data);
   }
+}
+
+function getPageNameByQueryString() {
+  const params = new URLSearchParams(location.search);
+
+  if (params.has(queryStrings.FMG_PAGE)) {
+    return params.get(queryStrings.FMG_PAGE);
+  } else {
+    return '';
+  }
 }

src/mixins/analytics-mixin.spec.js

@@ -9,13 +9,74 @@ describe("analyticsMixin.js", () => {
 
     const mockData = {
       actionList: [{
-          actionName: storeActions.LOG_ACTIVITY
+        actionName: storeActions.LOG_ACTIVITY
       }],
     }
-    var mocks = setupMocksForJsFiles(mockData);
+    const mocks = setupMocksForJsFiles(mockData);
 
     analyticsMixin.methods.logEvent(type, payload);
 
-    expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled();
+    expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+  });
+
+  test("pushEventToGA, should call logEvent too", () => {
+    // Arrange
+    const mockData = {
+      actionList: [{
+        actionName: storeActions.LOG_ACTIVITY
+      }],
+    }
+    const mocks = setupMocksForJsFiles(mockData);
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
+
+    // Assert
+    expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+
+  });
+
+  test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {
+    // Arrange
+    window.dataLayer = [];
+
+    const mockExperimentData = {
+      data: [
+        {
+          settings: {},
+          variationName: 'test',
+          universeName: 'testUniverse'
+        }
+      ]
+    }
+
+    // Act
+    analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
+
+    // Assert
+    expect(window.dataLayer).toEqual([ { settings_99: {}, variationName_99: 'test', universeName_99: 'testUniverse' } ]);
+
+  });
+
+  test("Experiments, should push to dataLayer with custom Google Custom Dimension Index", () => {
+    // Arrange
+    window.dataLayer = [];
+
+    const mockExperimentData = {
+      data: [
+        {
+          settings: { "Google Custom Dimension Index": "5"},
+          variationName: 'test',
+          universeName: 'testUniverse'
+        }
+      ]
+    }
+
+    // Act
+    analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
+
+    // Assert
+    expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]);
+
   });
 });

src/mixins/base-mixin.js

@@ -3,6 +3,8 @@ import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import { routerParams } from "@/router/router-constants/router-params";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   data() {
@@ -17,7 +19,7 @@ export default {
     getCmsContent(widgetName, fieldName) {
       return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
     },
-    dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
+    dispatchStoreAction(type, payload, encodePayload = true) {
       // Encode the payload if required
       if (encodePayload) {
         encodeUriData(payload);
@@ -54,6 +56,12 @@ export default {
     vehicleCategories() {
       return vehicleCategories;
     },
+    routerParams() {
+      return routerParams;
+    },
+    queryStrings(){
+      return queryStrings;
+    }
   },
 };
 

src/mixins/base-mixin.spec.js

@@ -6,22 +6,22 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import store from "@/store";
 
 describe("baseMixin.js", () => {
-  test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
+  test("dispatchStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
     const type = "";
     const payload = {};
 
-    mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
+    mixIn.methods.dispatchStoreAction(type, payload);
 
     expect(store.dispatch).toBeCalledWith(type, payload);
   });
 
-  test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
+  test("dispatchStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
     const type = "";
     const payload = { make: "Alfa Romeo/Chrysler" };
 
-    mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
+    mixIn.methods.dispatchStoreAction(type, payload, true);
 
     expect(store.dispatch).toBeCalledWith(type, payload);
   });

src/router/index.js

@@ -5,6 +5,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
+import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -21,6 +22,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
 
+
 const routes = [
   {
     path: "/component-test", // This is a temporary route for testing.
@@ -121,8 +123,12 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
-router.afterEach((to, from) => {
+router.afterEach(async (to, from) => {
+  // Push page view to GA
   analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
+  
+  const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
+  analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
 });
 
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
@@ -167,7 +173,7 @@ async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery
     if (getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) {
       await saveOrder();
     }
-    
+
     router.push({
       name: "root",
       query: Object.assign(optionalQuery, {

src/router/router-constants/navigation-scenarios.js

@@ -13,7 +13,9 @@ const navigationScenarios = {
   SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS",
   CONTINUING_WITH_PARTS_QUESTION: "CONTINUING_WITH_PARTS_QUESTION",
   CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS",
-  CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART"
+  CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
+  CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
+  TEMPORARY_TO_ADDRESS_LOOKUP: "TEMPORARY_TO_ADDRESS_LOOKUP",
 };
 
 export { navigationScenarios };

src/router/router-constants/router-params.js

@@ -0,0 +1,5 @@
+const routerParams = {
+    DISPLAY_VEHICLE_CHANGE_ALERT: "displayVehicleChangeAlert"
+  };
+  
+  export { routerParams };

src/router/router-constants/routing-table.js

@@ -67,12 +67,16 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
         destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,//This might be temporary
       },
+      {
+        scenario: navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP,
+        destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP, //This will be temporary
+      },
     ],
   },
   {
@@ -120,6 +124,10 @@ const routingTable = [
         scenario: navigationScenarios.VIN_LOOKUP,
         destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
       },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+      }
     ],
   },
   {
@@ -147,6 +155,23 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+      },
+      {
+        scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
+        destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },         
+    ],
+  },  
 ];
 
 export { routingTable };

src/store/index.js

@@ -138,8 +138,8 @@ export const mutations = {
   updateRegistrationState(state, registrationState){
     state.order.vehicle.registration.state = registrationState;
   },
-  updateRegistrationZipCode(state, reistrationZipCode){
+  updateRegistrationZipCode(state, registrationZipCode){
-    state.order.vehicle.registration.zipCode = reistrationZipCode;
+    state.order.vehicle.registration.zipCode = registrationZipCode;
   },
   updateRegistrationAddress(state, registrationAddress){
     state.order.vehicle.registration.address = registrationAddress;
@@ -298,6 +298,18 @@ export const actions = {
       },
     });
   },
+  lookupVinByAddress(context, { licenseLastName, licenseStreetAddress, licenseZip, licenseState }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.LookupVinByAddress.method,
+      endpoint: endpoints.LookupVinByAddress.url,
+      payload: {
+        licenseLastName: licenseLastName,
+        licenseStreetAddress: licenseStreetAddress,
+        licenseZip: licenseZip,
+        licenseState: licenseState
+      },
+    });
+  },
   getVehicleMakes(context, { year }) {
     return globalMethods.callHttpClient({
       method: endpoints.GetVehicleMakes.method,
@@ -442,10 +454,19 @@ export const actions = {
     return globalMethods.callHttpClient({
       method: endpoints.LogActivity.method,
       endpoint: endpoints.LogActivity.url,
-      payload: payload
+      payload: payload,
+      logApiCall: false
     });
   },
-  
+
+  getExperimentsByUserForGa(context, { userId }){
+    return globalMethods.callHttpClient({
+      method: endpoints.GetExperimentsByUserForGa.method,
+      endpoint: `${endpoints.GetExperimentsByUserForGa.url}/${userId}`,
+      payload: {}
+    });
+  },
+
 
   // Parts API Actions
   getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {

src/ux-components/button-main/button-main.spec.js

@@ -1,15 +1,16 @@
 import { shallowMount } from "@vue/test-utils";
 import buttonMain from "./button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 
 describe("buttonMain.vue", () => {
   it("Should return btn-primary class", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         isPrimary: true,
       },
-    });
+    }));
 
     // Assert
     const button = wrapper.find("button");
@@ -20,11 +21,11 @@ describe("buttonMain.vue", () => {
 
   it("Should return aria-disabled state", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         isDisabled: true,
       },
-    });
+    }));
 
     // Assert
     const button = wrapper.find("button");
@@ -35,12 +36,12 @@ describe("buttonMain.vue", () => {
 
   it("Should return loader color", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         loaderColor: "blue",
         loaderEnabled: true,
       },
-    });
+    }));
 
     // Assert
 
@@ -57,12 +58,12 @@ describe("buttonMain.vue", () => {
 
   it("Should return loader position", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         loaderPosition: "right",
         loaderEnabled: true,
       },
-    });
+    }));
 
     // Assert
 
@@ -77,3 +78,11 @@ describe("buttonMain.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 });
+
+function setupMocks(mountOptionsMockData = {}) {
+  const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
+  const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+  const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+  return allMountOptions;
+}

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

@@ -16,6 +16,7 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "buttonMain",
   props: {
@@ -36,6 +37,7 @@ export default {
       this.isLoaderDisplayed = false;
     },
     clicked() {
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.buttonText, true);
       if (!this.isDisabled) {
         this.isLoaderDisplayed = true;
         this.$emit("click-event");

src/ux-components/text-link/text-link.vue

@@ -17,6 +17,7 @@ export default {
   },
   methods: {
     handleClick(event) {
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.text, true);
       this.$emit("click-event");
     },
   },

vue.config.js

@@ -1,4 +1,4 @@
-process.env.VUE_APP_CONSUMER_API_GATEWAY =
+process.env.VUE_APP_CONSUMER_CF_DISTRO =
   "https://consumerapidev.safelite.com";
 process.env.VUE_APP_HERITAGE_FUNNEL =
   "http://localhost:38000/default.aspx";

vue.release.config.js

@@ -1,4 +1,4 @@
-process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
+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__";