Merge pull request #374 from Safelite/feature/CSR-104

Feature/csr 104 - WIP

jest.config.js

@@ -26,8 +26,7 @@ module.exports = {
     "!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/textbox-question/textbox-question.vue",   
+    "!src/common-components/textbox-question/textbox-question.vue", 
-    "!src/helpers/validation-rules.js",
     // END  
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

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

@@ -91,14 +91,22 @@ export default {
 		},
 		labelText: {
 			get: function () {
-				let labelText = this.questionText;
+				const noBreakChar = "⁠";
+				var questionText = "";
 				if (this.disableAutoFill) {
-					var noBreakChar = "⁠";
+					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;
 			}
 		}
 	},

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",

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/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",

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.dispatchNonBlockingStoreAction = 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 { navigateToHeritageFunnel } 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.dispatchNonBlockingStoreAction(
+					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.dispatchNonBlockingStoreAction(
+				storeActions.VALIDATE_ZIP, 
+				{ zip });
+		},
+		lookupVin(lastName, streetAddress, zip, state) {
+			return baseMixin.methods.dispatchNonBlockingStoreAction(
+				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/vehicle-damage/vehicle-damage.vue

@@ -302,6 +302,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);

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/routing-table.js

@@ -73,6 +73,10 @@ const routingTable = [
         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
+      },
     ],
   },
   {
@@ -147,6 +151,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;
@@ -147,14 +147,14 @@ export const mutations = {
   updateServiceLocationZip(state, serviceLocationZip){
     state.order.serviceLocation.zip = serviceLocationZip;
   },
-  updateRegistrationCity(state, serviceCity){
+  updateRegistrationCity(state, registrationCity){
-    state.order.serviceLocation.city = serviceCity;
+    state.order.vehicle.registration.city = registrationCity;
   },
   updateRegistrationFirstName(state, firstName){
-    state.order.serviceLocation.firstName = firstName;
+    state.order.vehicle.registration.firstName = firstName;
   },
   updateRegistrationLastName(state, lastName){
-    state.order.serviceLocation.lastName = lastName;
+    state.order.vehicle.registration.lastName = lastName;
   },
   updateCustomerEmailAddress(state, customerEmailAddress){
     state.order.customer.emailAddress = customerEmailAddress;
@@ -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,