Merge branch 'develop' into feature/SSR-233

src/digital-components/base-input-button/base-input-button.vue

@@ -30,7 +30,7 @@ import {
     handleButtonComponentFocus,
     handleInputComponentBlur,
 } from "@/helpers/button-question-focus-helper";
-import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
+import { inputButtonProps } from "@/digital-components/base-input-button/button-functionality-props";
 
 export default {
     name: "base-input-button",

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

@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
 describe("buttonQuestion.vue", () => {

src/digital-components/question-chain/question-chain.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import questionChain from "@/common-components/question-chain/question-chain.vue";
+import questionChain from "@/digital-components/question-chain/question-chain.vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 

src/digital-components/question-chain/question-chain.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { useValidateForm } from "vee-validate";
 
 export default {

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

@@ -44,7 +44,7 @@
             <button v-if="includeSelectIcon" type="submit" data-bs-toggle="modal"
                 :data-bs-target="'#' + this.cmsWidgetName" aria-label="Select button" />
         </div>
-        <div v-show="errorMessage" class="row my-2 form-test-error">
+        <div v-show="errorMessage" class="row my-2 form-test-error mb-0">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
         </div>
     </div>

src/iss-components/address-questions/address-questions.spec.js

@@ -1,5 +1,5 @@
 // Components
-import addressQuestions from "@/common-components/address-questions/address-questions";
+import addressQuestions from "@/iss-components/address-questions/address-questions";
 
 // Supporting Files
 import { mount, shallowMount } from "@vue/test-utils";

src/iss-components/address-questions/address-questions.vue

@@ -73,8 +73,8 @@
 </template>
 
 <script>
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 import { applicationConfig } from "@/constants/application-config.js";
 import { defineRule } from "vee-validate";

src/iss-components/button-question-modal/button-question-modal.vue

@@ -47,7 +47,7 @@
 
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "buttonQuestionModal",

src/iss-components/questions-page-layout/questions-page-layout.spec.js

@@ -1,5 +1,5 @@
 // Components
-import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout";
 
 // Supporting Files
 import { shallowMount } from "@vue/test-utils";

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -35,13 +35,13 @@
 
 <script>
 // Components
-import siteHeader from "@/common-components/site-header/site-header";
+import siteHeader from "@/iss-components/site-header/site-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
 import alert from "@/ux-components/alert/alert";
-import questionChain from "@/common-components/question-chain/question-chain";
+import questionChain from "@/digital-components/question-chain/question-chain";
-import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/iss-components/loading-modal/loading-modal.vue";
 
 export default {
     name: "questions-page",

src/iss-components/site-header/site-header.spec.js

@@ -1,4 +1,4 @@
-import siteHeader from "@/common-components/site-header/site-header";
+import siteHeader from "@/iss-components/site-header/site-header";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 

src/iss-components/site-header/site-header.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import menuModal from "@/common-components/site-header/menu-modal/menu-modal";
+import menuModal from "@/iss-components/site-header/menu-modal/menu-modal";
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";

src/iss-components/site-sub-header/site-sub-header.spec.js

@@ -1,4 +1,4 @@
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
 import { shallowMount } from "@vue/test-utils";
 
 describe("site sub header", () => {

src/iss-components/site-sub-header/site-sub-header.vue

@@ -23,7 +23,7 @@
   </template>
 
 <script>
-import buttonBack from "@/common-components/site-sub-header/button-back/button-back";
+import buttonBack from "@/iss-components/site-sub-header/button-back/button-back";
 
 
     export default ({

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

@@ -53,13 +53,13 @@
 <script>
 // Components
 import baseFormMixin from '@/mixins/base-form-mixin';
-import siteHeader from "@/common-components/site-header/site-header.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-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 textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 
 import { Form } from "vee-validate";
 

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

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import addressQuestions from "@/common-components/address-questions/address-questions";
+import addressQuestions from "@/iss-components/address-questions/address-questions";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";

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

@@ -37,10 +37,10 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
   name: 'capability-questions',

src/layouts/capability-questions/capability-questions.vue

@@ -37,10 +37,10 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
   name: 'capability-questions',

src/layouts/coverage-statement/coverage-statement.vue

@@ -37,10 +37,10 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
   name: 'coverage-statement',

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

@@ -1,61 +0,0 @@
-/* eslint-env jest */
-import { getDamageString } from '@/helpers/damage-helper';
-import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import { RouterLinkStub } from '@vue/test-utils';
-import { render } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-import LicensePlateLookupAlertsComponent from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
-
-jest.mock('@/helpers/damage-helper');
-
-const mountOptions = {
-    global: {
-        stubs: {
-            RouterLink: RouterLinkStub,
-        },
-        mixins: [
-            {
-                methods: {
-                    getCmsContent: jest.fn(() => ''),
-                    getFooterInfoBoxHeight: jest.fn(() => 80),
-                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
-                },
-            },
-        ],
-    },
-};
-
-describe('license-plate-lookup-alerts.vue', () => {
-    test('VehicleNotFoundAlert is displayed on the screen', () => {
-        // Arrange
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(vehicleNotFoundAlert).toBeVisible();
-        expect(vehicleNotMatchedAlert).toEqual(null);
-    });
-
-    test('VehicleNotMatchedAlert is displayed on the screen', () => {
-        // Arrange
-        getDamageString.mockImplementation(() => 'Mock Damage String');
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(vehicleNotMatchedAlert).toBeVisible();
-        expect(vehicleNotFoundAlert).toEqual(null);
-    });
-})

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

@@ -1,50 +0,0 @@
-<template>
-    <div
-      id="vin-lookup-alerts-wrapper"
-      :class="wrapperCssClass"
-    >
-      <vehicleNotFoundAlert
-        v-if="isVehicleNotFoundVisible"
-      />
-      <vehicleNotMatchedAlert
-        v-else-if="isVehicleNotMatchedVisible"
-      />
-    </div>
-  </template>
-  <script>
-  import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-  import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
-  import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
-  
-  export default {
-    name: 'license-plate-lookup-alerts',
-    components: {
-      vehicleNotFoundAlert,
-      vehicleNotMatchedAlert,
-    },
-    props: {
-      activeAlertType: {
-        type: String,
-        validator(value) {
-          const acceptedValues = [null];
-          acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
-          return acceptedValues.includes(value);
-        },
-      },
-    },
-    computed: {
-      isVehicleNotFoundVisible() {
-        return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
-      },
-      isVehicleNotMatchedVisible() {
-        return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
-      },
-      wrapperCssClass() {
-        return {
-          'mb-5': this.activeAlertType !== null,
-        };
-      },
-    },
-  };
-  </script>
-  

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue

@@ -1,27 +0,0 @@
-<template>
-    <alert
-      alertClass="alert-danger"
-      cmsWidgetName="AlertVinNotFoundWidget"
-      id="vehicle-not-found-alert"
-      aria-label="vehicle-not-found-alert"
-    />
-  </template>
-  <script>
-  import alert from '@/ux-components/alert/alert.vue';
-  
-  export default {
-    name: 'vehicle-not-found-alert',
-    components: {
-      alert,
-    },
-  };
-  </script>
-  <style>
-  /**
-    Override wrong margin-bottom rule in the Alert component.
-  */
-  #vehicle-not-found-alert p:last-of-type {
-    margin-bottom: 0 !important;
-  }
-  </style>
-  

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

@@ -1,50 +0,0 @@
-<template>
-    <alert
-      alertClass="alert-warning"
-      cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-      :manualCopy="body"
-      :manualHeadline="header"
-          aria-label="vehicle-not-matched-alert"
-    />
-  </template>
-  <script>
-  import { getDamageString } from '@/helpers/damage-helper';
-  
-  import alert from '@/ux-components/alert/alert.vue';
-  
-  export default {
-    name: 'vehicle-not-matched-alert',
-    components: {
-      alert,
-    },
-    inject: ['vehicleFromLookup'],
-    computed: {
-      header() {
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
-            .replaceAll('{custom:damage}', getDamageString())
-        );
-      },
-      body() {
-        let year = '';
-        let make = '';
-        let model = '';
-  
-        if (this.vehicleFromLookup) {
-          year = this.vehicleFromLookup.year;
-          make = this.vehicleFromLookup.make;
-          model = this.vehicleFromLookup.model;
-        }
-  
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
-            .replaceAll('{custom:damage}', getDamageString())
-            .replaceAll('{custom:vinlookupYear}', year)
-            .replaceAll('{custom:vinlookupMake}', make)
-            .replaceAll('{custom:vinlookupModel}', model)
-        );
-      },
-    },
-  };
-  </script>
-  

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

@@ -1,49 +1,81 @@
 // Components
 import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
 
-// Supporting files
+// Supporting Files
-import { shallowMount } from '@vue/test-utils';
 import { settleAllPromises } from "@/helpers/layout-helper.js";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { shallowMount } from "@vue/test-utils";
-import baseMixin from "@/mixins/base-mixin.js";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { nextTick } from "vue";
 import { useMainStore } from "@/store";
-import { applicationConfig } from "@/constants/application-config";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
+jest.mock("@/helpers/damage-helper", () => ({
+  isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+  getDamageString: jest.fn(),
+}));
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
-    settleAllPromises: jest.fn(),
+  settleAllPromises: jest.fn(),
 }));
 
 // Mock fetchCmsContentForPage
 jest.mock("@/helpers/cms-content-helper", () => ({
-    fetchCmsContentForPage: jest.fn(),
+  fetchCmsContentForPage: jest.fn(),
 }));
 
 describe("license-plate-lookup.vue", () => {
-    test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
+  describe("page level alerts", () => {
-        //Arrange
+    test("If license plate matches a different vehicle, display MatchedDifferentVehicleAlert", async () => {
-        const { wrapper } = setupMocks({});
+      // Arrange
-        useMainStore().order.vehicle.carId = "CR00000395";
+      const mockRegistrationLicensePlate = {
+        licensePlate: "UTN990",
+      };
 
-        //Act
+      const { wrapper } = setupMocks({});
-        licensePlateLookup.beforeRouteEnter.call(
-        wrapper.vm,
-        { query: { issPage: "license-plate-lookup" } },
-        undefined,
-        (c) => c(wrapper.vm)
-        );
 
-        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+      useMainStore().order.vehicle.carId = "TESTCARID";
 
-        //Assert
+      await wrapper.setData({
-        expect(arePagePrerequisitesValid).toBe(true);
+        licensePlate: mockRegistrationLicensePlate
+      });
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(
+        true
+      );
     });
-});
 
-describe("navigation", () => {
+    test("If no vehicles found, display VinNotFound alert", async () => {
-    test("BackButtonAction triggers a router.navigate change", async () => {
+      // Arrange
+      const mockRegistrationLicensePlate = {
+        licensePlate: "TEST1234",
+      };
+
+      const { wrapper } = setupMocks({
+        vinLookupResponseError: "vin not found error"
+      });
+
+      useMainStore().order.vehicle.carId = "TESTCARID";
+
+      await wrapper.setData({
+        licensePlate: mockRegistrationLicensePlate
+      });
+
+      wrapper.vm.navigateForward = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
+    });
+  });
+
+  describe("navigation", () => {
+    test("Clicking back button navigates back", async () => {
       //Arrange
       const { wrapper, apiPromise } = setupMocks({
         mountOptionsMockData: {
@@ -59,86 +91,172 @@ describe("navigation", () => {
         undefined,
         (c) => c(wrapper.vm)
       );
-      wrapper.vm.backButtonAction();
+      await wrapper.vm.backButtonAction();
-      await nextTick();
 
       //Assert
-      return apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-        try {
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-        }
-        catch (e) {
-            throw e
-        }
-      });
     });
 
-    // TODO: Create test for navigating forward when user clicks Continue
+    test("License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
-    // and information entered is correct (no alerts)
+      // Arrange
+      const vehicleFound = {
+        carId: "C0000",
+      };
 
-    // TODO: Create test for license-plate-question component emitting value when user clicks Continue
+      const { wrapper } = setupMocks({});
-    // and information entered is correct (no alerts)
+      wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
 
-    // TODO: Create test for zip-question component emitting value when user clicks Continue
+      useMainStore().order.vehicle.carId = "C0000";
-    // and information entered is correct (no alerts)
 
-    // *The above will be completed when navigation from page is complete (SSR-179)
+      // Act
+      wrapper.vm.navigateForward(vehicleFound);
+
+      // Assert
+      expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
+    });
+
+    test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => {
+      // Arrange
+      const mockRegistrationLicensePlate = {
+        licensePlate: "TEST1234",
+      };
+
+      const { wrapper } = setupMocks({});
+
+      await wrapper.setData({
+        licensePlate: mockRegistrationLicensePlate,
+        isCarIdDifferent: true,
+        isSelectedGlassAvailableForVehicle: false,
+      });
+
+      useMainStore().order.vehicle.carId = "CARID";
+
+      let carsFound = [
+        {
+          vin: "TEST_VIN2",
+          vehicle: {
+            carId: "C0000",
+          },
+        },
+      ];
+
+      // Act
+      await wrapper.vm.navigateForward(carsFound);
+
+      // Assert
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+        navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+        undefined,
+        {},
+        { displayVehicleChangeAlert: true }
+      );
+    });
   });
 
+  describe("miscellaneous", () => {
+    test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      useMainStore().order.vehicle.carId = "CR00000395";
+
+      // Act
+      licensePlateLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { issPage: "license-plate-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+      // Assert
+      expect(arePagePrerequisitesValid).toBe(true);
+    });
+  });
+});
+
 function setupMocks({
-    pageHeaderWidgetHeaderText = {},
+  isZipValid = true,
-    pageFooterWidgetCmsContent = {},
+  isZipServiceable = true,
-    mountOptionsMockData = {},
+  lookupVinByPlateResponse,
-    //Values to set in the state store
+  partsOrQuestions = [],
-    carId = null,
+  vehicle = {},
-    registrationZipCode = null, //"55555",
+  vin = null,
-    licensePlate = null, //"TESTPLATE",
+  carId = "C0000",
+  vinLookupResponseError = null,
+  route = null,
 }) {
-    //Mock api responses
+  useMainStore().validateZip = jest.fn().mockImplementation(() => {
-    const apiResponses = {
+    return Promise.resolve({
-      cmsContent: {
+      data: {
-        SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+        isValid: isZipValid,
-        VehicleBannerWidget: {
+        isServiceable: isZipServiceable,
-          GenericVehicleImage:
-            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
-        },
-        SiteHeaderWidget: {
-          LogoImage:
-            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
-        },
-        SiteFooterWidget: pageFooterWidgetCmsContent,
-        
       },
-    };
+    })
+  });
 
-    mountOptionsMockData = {
+  useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => {
-        ...mountOptionsMockData,
+    return Promise.resolve({
-        router: {
+      data: lookupVinByPlateResponse
-            navigate: jest.fn(),
+        ? lookupVinByPlateResponse : {
+          vin: "TEST_VIN",
+          vehicle: {
+            carId: "CARID"
+          },
         },
-        store: {
+    })
-            getters: {
+  });
-                vehicle: {
+
-                    registration: {
+  useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
-                        licensePlate: licensePlate,
+    return Promise.resolve({
-                        zipCode: registrationZipCode,
+      data: {
-                    },
+        partsOrQuestions: partsOrQuestions,
-                    carId: carId,
+      },
-                },
+    })
+  });
+
+  const wrapper = shallowMount(
+    licensePlateLookup,
+    getMountOptions({
+      route: route ? route : undefined,
+      router: {
+        navigate: jest.fn(),
+      },
+      mainStore: {
+        order: {
+          vehicle: {
+            carId: carId,
+            registration: {
+              licensePlate: "TESTPLATE",
+              zipCode: "12345",
             },
+          },
         },
-    };
+      },
 
-    const apiPromise = Promise.resolve(apiResponses);
+    })
+  );
 
-    settleAllPromises.mockImplementation(() => apiPromise);
+  const apiResponses = {
-    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+    serviceZipValidationResponse: {
+      isValid: isZipValid,
+      isServiceable: isZipServiceable,
+    },
+    vinLookupResponse: {
+      vin: vin,
+      vehicle: vehicle,
+      error: vinLookupResponseError,
+    },
+  };
 
-    const mountOptions = getMountOptions(mountOptionsMockData);
+  settleAllPromises.mockImplementation(() => apiResponses);
 
-    const wrapper = shallowMount(licensePlateLookup, mountOptions);
+  wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  wrapper.vm.setCmsContent = jest.fn();
+  wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+  wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+  wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
+  wrapper.vm.$refs.siteFooter.enableForwardButton = jest.fn();
 
-    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  return { wrapper };
-    
-    return { wrapper, apiPromise };
 }

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

@@ -10,26 +10,38 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <licensePlateLookupAlerts
+        <alert
-          :activeAlertType="activeVehicleLookupAlertType"
+          ref="alertVinNotFound"
-        />
+          v-if="displayVinNotFoundAlert"
+          class="mb-4"
+          cmsWidgetName="AlertVinNotFoundWidget"
+          alertClass="alert-danger"
+          v-bind:isDismissible="false" />
+        <alert
+          ref="alertMatchedDifferentVehicle"
+          v-if="displayMatchedDifferentVehicleAlert"
+          class="mb-4"
+          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+          :manualHeadline="AlertMatchedDifferentVehicleHeader"
+          :manualCopy="AlertMatchedDifferentVehicleBody"
+          alertClass="alert-warning"
+          v-bind:isDismissible="false" />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
           v-model="licensePlate"
           isRequired 
           disableAutoFill
           inputId="license-plate-question"
-          validationRules="license-plate-required"
+          validationRules="license-plate-required" />
-        />
+        <dropdownQuestion
-        <textboxQuestion
+          cmsWidgetName="StateQuestionWidget"
-          cmsWidgetName="RegistrationZipQuestionWidget"  
+          v-model="licenseState"
-          v-model="registrationZipCode"
+          ref="state"
-          isRequired
+          inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+          :options="stateOptions"
           disableAutoFill
-          inputId="zip"
+          validationRules="state-required"
-          validationRules="zip-required|zip-format"
+          class="mt-4" />
-          class="mt-4"
-        />
         <siteFooter
           :isForwardActionDisabled="!meta.valid"
           cms-widget-name="SiteFooterWidget"
@@ -42,61 +54,37 @@
 </template>
 <script>
 // Import Supporting Files
-import { computed } from 'vue';
-import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { errorMessages } from "@/constants/error-messages";
-import { required, regex } from "@/helpers/validation-rules";
+import { required } from "@/helpers/validation-rules";
 import { defineRule } from "vee-validate";
+import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
+import { routerParams } from '@/router/router-params.js'
+import { states } from "@/constants/states";
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
+import vinPagesMixin from '@/mixins/vin-pages-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
-import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+import alert from "@/ux-components/alert/alert";
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
-defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
+defineRule("state-required", required(errorMessages.STATE_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
   name: 'license-plate-lookup',
-  mixins: [baseFormMixin],
+  mixins: [baseFormMixin, vinPagesMixin],
-  components: {
-    Form,
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    textboxQuestion,
-    licensePlateLookupAlerts,
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      vehicleFromLookup: null,
-      licensePlate: null, 
-      registrationZipCode: null,
-   };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
   async beforeRouteEnter(to, from, next) {
+    // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
@@ -109,56 +97,178 @@ export default {
 
     const resultMap = await settleAllPromises(promiseResultMap);
     
+    // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.setCmsContent(resultMap.cmsContent);      
     });
   },
+  data() {
+    return {
+      activeVehicleLookupAlertType: null,
+      vehicleFromLookup: null,
+      licensePlate: null, 
+      licenseState: null,
+      displayVinNotFoundAlert: false,
+      displayMatchedDifferentVehicleAlert: false,
+      previouslyEnteredCarId: "",
+      isCarIdDifferent: false,
+      customAlertData: {},
+      isSelectedGlassAvailableForVehicle: true,
+   };
+  },
   methods: {
     arePagePrerequisitesValid() {      
-      if (this.mainStore.order.vehicle.carId) {
+      return this.mainStore.order.vehicle.carId !== null;
-          return true;
+    },
-      }
+    loadDefaultsFromStore() {
-      return false;
+      this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
     },
     backButtonAction() {
-      /**
+      // route to move backwards
-       * this.navigationScenarios comes from base-mixin
-       */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
+    attachCustomEvents() {
+            this.prependActionToMethod(this, this.forwardButtonAction, () => {
+                this.pushEventToGA(
+                    this.$route.query[this.queryStrings.ISS_PAGE],
+                    this.GaActions.SUBMITTED,
+                    this.GaLabels.LICENSE_PLATE_LOOKUP,
+                    true
+                );
+            });
+    },
+    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
     async forwardButtonAction() {
-      this.resetActiveAlert();
+      this.resetWarningsAndErrors();
 
-      // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+      // Lookup VIN
-      const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
+      const vinLookupResponse = await useMainStore().lookupVinByPlate(
+          this.licensePlate, this.licenseState);
 
-      if (vehicleLookupResponse.error) {
+      // Settle promises and get results
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+      const promiseResultMap = [
-        this.resetVehicleFromLookup();
+        {
-        this.$refs.siteFooter.removeLoader();
+          resultKey: "vinLookupResponse",
-        return;
+          promise: vinLookupResponse,
+        },
+      ];
+
+      const resultMap = await settleAllPromises(promiseResultMap);
+
+      // No VIN found
+      if (resultMap.vinLookupResponse.error) {
+        this.displayVinNotFoundAlert = true;
+        this.$refs.siteFooter.disableForwardButton();
+        return this.$refs.siteFooter.removeLoader();
+      };
+      
+      // Vehicle found from VIN lookup
+      const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
+
+      // Check if the CarId has changed
+      this.isCarIdDifferent =
+          vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
+      // Handle changing car
+      if (
+          this.isCarIdDifferent &&
+          vehicleFromLookup.carId !== this.previouslyEnteredCarId
+      ) {
+          // Display Alert
+          this.previouslyEnteredCarId = vehicleFromLookup.carId;
+          this.customAlertData.vehicleInfo = vehicleFromLookup;
+          this.displayMatchedDifferentVehicleAlert = true;
+          this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+            vehicleFromLookup.carId
+          );
+
+          // Update button "Continue with..."
+          this.$refs.siteFooter.updateButtonText(
+              `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model}`
+          );
+          return this.$refs.siteFooter.removeLoader();
       }
 
-      this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
+      // Save vehicle, license plate, and registration information
-      if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
+      await useMainStore().saveRegistrationLicensePlateLookup(
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+          {
+              isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+              vehicleInfo: Object.assign(vehicleFromLookup, {vin: vehicleFromLookup.vin }),
+              registrationInfo: {
+                  licensePlate: this.licensePlate,
+                  state: this.licenseState,
+              },
+          },
+          false
+      );
 
-        const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+      return await this.navigateForward();
-
+    },
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
+    async navigateForward() {
-        this.$refs.siteFooter.removeLoader();
+      // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+      // display vehicle changed alert on that page.
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+          this.$route,
+          {},
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+        );
+      } else {
+        await this.navigateForwardWithSingleCarMatch();
       }
+    },
+    resetWarningsAndErrors() {
+      this.displayVinNotFoundAlert = false;
+      this.displayMatchedDifferentVehicleAlert = false;
+    },
+  },
+  mounted() {
+      this.attachCustomEvents();
+      this.loadDefaultsFromStore();
+  },
+  computed: {
+      AlertMatchedDifferentVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedDifferentVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+      },
+      AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
 
-      // Continue
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+      },
+      stateOptions: {
+        get: function () {
+            return states;
+        },
     },
-    
+  },
-    resetActiveAlert() {
+  watch: {
-      this.activeVehicleLookupAlertType = null;
+      licensePlate() {
-    },
+          this.$refs.siteFooter.updateButtonText(
-    resetVehicleFromLookup() {
+              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-      this.vehicleFromLookup = null;
+          );
-    },
+      },
-    resetDependentState() {},
+      registrationZipCode() {
+          this.$refs.siteFooter.updateButtonText(
+              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+          );
+      },
+  },
+  components: {
+    Form,
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    vehicleBanner,
+    textboxQuestion,
+    dropdownQuestion,
+    alert
   },
 };
 </script>

src/layouts/molding-questions/molding-questions.vue

@@ -37,10 +37,10 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
   name: 'molding-questions',

src/layouts/part-questions/part-questions.vue

@@ -16,7 +16,7 @@
 
 <script>
 // Components
-import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -42,11 +42,11 @@
 </template>
 <script>
 // Components
-import siteHeader from '@/common-components/site-header/site-header';
+import siteHeader from '@/iss-components/site-header/site-header';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import addressQuestions from "@/common-components/address-questions/address-questions";
+import addressQuestions from "@/iss-components/address-questions/address-questions";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "replaceOptionsQuestion",

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";

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

@@ -0,0 +1,82 @@
+/* eslint-env jest */
+import { mount, flushPromises } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
+import { routerParams } from '@/router/router-params';
+import { vehicleCategories } from '@/constants/vehicle-categories';
+import VehicleDamageComponent from './vehicle-damage.vue';
+
+const mockRoute = {
+  params: {},
+};
+const mockRouter = {
+  navigate: jest.fn(),
+};
+const mountOptions = {
+  global: {
+    mixins: [
+      {
+        computed: {
+          navigationScenarios() {
+            return navigationScenarios;
+          },
+          routerParams() {
+            return routerParams;
+          },
+          vehicleCategories() {
+            return vehicleCategories;
+          },
+        },
+        methods: {
+          getCmsContent: jest.fn(),
+          getFooterInfoBoxHeight: jest.fn(() => 80),
+          getPageNameByQueryString: jest.fn(() => ''),
+        },
+      },
+    ],
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter,
+    },
+    stubs: {
+      siteHeader: true,
+      vehicleBanner: true,
+      siteSubHeader: true,
+      siteDoorOptions: true,
+      damageLocationQuestion: true,
+      windshieldOptions: true,
+      replaceOptionsQuestion: true,
+      alert: true,
+    },
+  },
+};
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+describe('vehicle-damage.vue', () => {
+  test('When damage selected is a repair, navigate to coverage-statement page', async () => {
+    mountOptions.global.plugins = [createTestingPinia({
+      initialState: {
+        main: {
+          order: {
+            damage: {
+              isRepair: true,
+            },
+          },
+        },
+      },
+    })];
+    const wrapper = mount(VehicleDamageComponent, mountOptions);
+    const siteFooterWrapper = wrapper.getComponent({ ref: 'siteFooter' });
+
+    siteFooterWrapper.vm.$emit('forwardClicked');
+
+    await flushPromises();
+    expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+    expect(mockRouter.navigate)
+      .toHaveBeenCalledWith(
+        navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
+        mockRoute,
+      );
+  });
+});

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

@@ -48,8 +48,10 @@
                 <site-footer
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
+                    @backClicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+                    @forwardClicked="forwardButtonAction"
+                    ref="siteFooter"
+                />
             </div>
         </div>
     </Form>
@@ -57,10 +59,10 @@
 
 <script>
 // Components
-import siteHeader from "@/common-components/site-header/site-header";
+import siteHeader from "@/iss-components/site-header/site-header";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
@@ -119,6 +121,11 @@ export default {
             );
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        
+        return { mainStore };
+    },
     data() {
         return {
             selectedDamageLocations: this.getDamageLocationsFromStore(),
@@ -148,15 +155,15 @@ export default {
             var glassSelections = [];
 
             if (
-                useMainStore().order.damage.glassToReplace?.some((glass) => {
+                this.mainStore.order.damage.glassToReplace?.some((glass) => {
                     return glass.glassLocation === damageLocationsSelected.WINDSHIELD;
                 }) ||
-                useMainStore().order.damage.isRepair
+                this.mainStore.order.damage.isRepair
             ) {
                 glassSelections.push(damageLocationsSelected.WINDSHIELD);
             }
             if (
-                useMainStore().order.damage.glassToReplace?.some((glass) => {
+                this.mainStore.order.damage.glassToReplace?.some((glass) => {
                     return (
                         glass.glassLocation === damageLocationsSelected.DRIVER ||
                         glass.glassLocation === damageLocationsSelected.PASSENGER
@@ -167,7 +174,7 @@ export default {
             }
 
             if (
-                useMainStore().order.damage.glassToReplace?.some((glass) => {
+                this.mainStore.order.damage.glassToReplace?.some((glass) => {
                     return glass.glassLocation === damageLocationsSelected.REAR;
                 })
             ) {
@@ -184,14 +191,14 @@ export default {
                 selectedWindshieldReplaceOptions: [],
             };
 
-            if (useMainStore().order.damage.isRepair === undefined) return windshieldOptions;
+            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
 
-            if (useMainStore().order.damage.isRepair) {
+            if (this.mainStore.order.damage.isRepair) {
                 windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
-                windShieldOptions.selectedWindshieldChipCount = useMainStore().order.damage.numberOfChips;
+                windShieldOptions.selectedWindshieldChipCount = this.mainStore.order.damage.numberOfChips;
             } else {
                 if (
-                    useMainStore().order.damage.glassToReplace?.some((glass) => {
+                    this.mainStore.order.damage.glassToReplace?.some((glass) => {
                         return (
                             glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
                             glass.glassName === damageLocationsSelected.SINGLE
@@ -206,7 +213,7 @@ export default {
                 }
 
                 if (
-                    useMainStore().order.damage.glassToReplace?.some((glass) => {
+                    this.mainStore.order.damage.glassToReplace?.some((glass) => {
                         return (
                             glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
                             glass.glassName === damageLocationsSelected.DRIVER
@@ -221,7 +228,7 @@ export default {
                 }
 
                 if (
-                    useMainStore().order.damage.glassToReplace?.some((glass) => {
+                    this.mainStore.order.damage.glassToReplace?.some((glass) => {
                         return (
                             glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
                             glass.glassName === damageLocationsSelected.PASSENGER
@@ -242,7 +249,7 @@ export default {
         getDoorSidesFromStore() {
             var doorSides = [];
             if (
-                useMainStore().order.damage.glassToReplace?.some((glass) => {
+                this.mainStore.order.damage.glassToReplace?.some((glass) => {
                     return glass.glassLocation === damageLocationsSelected.DRIVER;
                 })
             ) {
@@ -250,7 +257,7 @@ export default {
             }
 
             if (
-                useMainStore().order.damage.glassToReplace?.some((glass) => {
+                this.mainStore.order.damage.glassToReplace?.some((glass) => {
                     return glass.glassLocation === damageLocationsSelected.PASSENGER;
                 })
             ) {
@@ -263,7 +270,7 @@ export default {
         getDriverSideReplaceOptionsFromStore() {
             var driverSideReplaceOptions = [];
 
-            useMainStore().order.damage.glassToReplace?.forEach((glass) => {
+            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
                 if (glass.glassLocation === damageLocationsSelected.DRIVER) {
                     driverSideReplaceOptions.push(glass.glassName);
                 }
@@ -275,7 +282,7 @@ export default {
         getPassengerSideReplaceOptionsFromStore() {
             var passengerSideReplaceOptions = [];
 
-            useMainStore().order.damage.glassToReplace?.forEach((glass) => {
+            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
                 if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
                     passengerSideReplaceOptions.push(glass.glassName);
                 }
@@ -285,7 +292,7 @@ export default {
         },
 
         getRearReplaceOptionsFromStore() {
-            var rearReplaceOptions = useMainStore().order.damage.glassToReplace?.filter(
+            var rearReplaceOptions = this.mainStore.order.damage.glassToReplace?.filter(
                 (glass) => glass.glassLocation === damageLocationsSelected.REAR
             )[0]?.glassName;
 
@@ -300,18 +307,26 @@ export default {
         },
 
         navigateForward() {            
-            // If vin already exists, navigate directly to vin-lookup
+            if (this.mainStore.damage.isRepair) {                
-            if (useMainStore().order.vehicle.vin) {
                 this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
                     this.$route
                 );
             }
+            else {
+                // If vin already exists, navigate directly to vin-lookup
+                if (this.mainStore.order.vehicle.vin) {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+                        this.$route
+                    );
+                } else {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                        this.$route
+                    );
+                }
+            }            
         },
 
         selectedGlassToReplace() {

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "windshieldOptions",

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "windshieldDamageTypeQuestion",

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -40,10 +40,10 @@ import BaseFormMixin from '@/mixins/base-form-mixin';
 import VIN_LOOKUP_METHODS from '@/constants/vin-lookup-methods';
 
 // Import Component
-import SiteFooter from '@/common-components/site-footer/site-footer.vue';
+import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
-import SiteHeader from '@/common-components/site-header/site-header.vue';
+import SiteHeader from '@/iss-components/site-header/site-header.vue';
-import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {

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

@@ -18,7 +18,7 @@ import { required } from '@/helpers/validation-rules';
 import { errorMessages } from '@/constants/error-messages';
 
 // Import Component
-import ButtonQuestion from '@/common-components/button-question/button-question.vue';
+import ButtonQuestion from '@/digital-components/button-question/button-question.vue';
 
 // Define Validation Rules
 defineRule('option-required', required(errorMessages.OPTION_REQUIRED));

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

@@ -13,7 +13,7 @@
   </template>
   
   <script>
-  import buttonQuestion from "@/common-components/button-question/button-question";
+  import buttonQuestion from "@/digital-components/button-question/button-question";
   import { useMainStore } from '@/store';
   
   export default {

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

@@ -27,10 +27,10 @@
 <script>
       // Components
     import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-    import siteHeader from "@/common-components/site-header/site-header";
+    import siteHeader from "@/iss-components/site-header/site-header";
-    import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+    import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-    import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+    import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-    import siteFooter from "@/common-components/site-footer/site-footer";
+    import siteFooter from "@/iss-components/site-footer/site-footer";
 
       // Supporting files
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -13,7 +13,7 @@
   </template>
   
   <script>
-  import buttonQuestion from "@/common-components/button-question/button-question";
+  import buttonQuestion from "@/digital-components/button-question/button-question";
   import { useMainStore } from '@/store';
   
   export default {

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

@@ -23,10 +23,10 @@
   <script>
   // Components
   import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-  import siteHeader from "@/common-components/site-header/site-header";
+  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-  import siteFooter from "@/common-components/site-footer/site-footer";
+  import siteFooter from "@/iss-components/site-footer/site-footer";
   
   // Supporting files
   import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -37,7 +37,7 @@
 
 <script>
 // Components
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 // Supporting files
 import { getTintImage } from "@/constants/tint-mapper";

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -45,10 +45,10 @@
 <script>
 // Components
 import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
-import siteHeader from "@/common-components/site-header/site-header";
+import siteHeader from "@/iss-components/site-header/site-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 import alert from "@/ux-components/alert/alert";
 
 // Supporting Files

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { useMainStore } from '@/store';
 
 export default {

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

@@ -25,10 +25,10 @@
 <script>
 // Components
 import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
-import siteHeader from "@/common-components/site-header/site-header";
+import siteHeader from "@/iss-components/site-header/site-header";
-import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import siteFooter from "@/common-components/site-footer/site-footer";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -23,10 +23,10 @@
   <script>
   // Components
   import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-  import siteHeader from "@/common-components/site-header/site-header";
+  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteFooter from "@/common-components/site-footer/site-footer";
+  import siteFooter from "@/iss-components/site-footer/site-footer";
-  import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
   
   // Supporting files
   import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -13,7 +13,7 @@
   </template>
   
   <script>
-  import buttonQuestion from "@/common-components/button-question/button-question";
+  import buttonQuestion from "@/digital-components/button-question/button-question";
   import { useMainStore } from '@/store';
   
   export default {

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

@@ -51,10 +51,10 @@ import { useMainStore } from '@/store';
 import baseFormMixin from '@/mixins/base-form-mixin';
 import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
 import { Form } from 'vee-validate';
-import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import vinLocationInformation from './vin-location-information/vin-location-information.vue';
 import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
 import vinQuestion from './vin-question/vin-question.vue';

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

@@ -17,7 +17,7 @@ import { regex, required } from '@/helpers/validation-rules';
 import { errorMessages } from '@/constants/error-messages';
 
 // Import Component(s)
-import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
 
 defineRule('vin-required', required(errorMessages.VIN_REQUIRED));
 defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));

src/layouts/welcome-page/welcome-page.vue

@@ -132,13 +132,13 @@
 
     <script>
     // Components
-    import siteHeader from '@/common-components/site-header/site-header';
+    import siteHeader from '@/iss-components/site-header/site-header';
-    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+    import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-    import siteFooter from "@/common-components/site-footer/site-footer";
+    import siteFooter from "@/iss-components/site-footer/site-footer";
-    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+    import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-    import buttonQuestion from "@/common-components/button-question/button-question";
+    import buttonQuestion from "@/digital-components/button-question/button-question";
-    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+    import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-    import textBlock from "@/common-components/text-block/text-block";
+    import textBlock from "@/digital-components/text-block/text-block";
     
     // Supporting files
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/mixins/input-button-wrapper-mixin.js

@@ -1,4 +1,4 @@
-import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
+import { inputButtonProps } from "@/digital-components/base-input-button/button-functionality-props";
 
 export default {
     model: {

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

@@ -11,6 +11,9 @@ const navigationScenarios = {
     CLICKED_FORWARD_WELCOME_PAGE: "CLICKED_FORWARD_WELCOME_PAGE",
     CLICKED_FORWARD_POLICY_HOLDER_DETAILS: "CLICKED_FORWARD_POLICY_HOLDER_DETAILS",
     
+    // Vehicle Damage    
+    CLICKED_FORWARD_WITH_REPAIR: 'CLICKED_FORWARD_WITH_REPAIR',
+
     // Vin selection
     CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",
     CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN",

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

@@ -63,6 +63,10 @@ const routingTable = function(store) {
               scenario: navigationScenarios.CLICKED_BACK,
               destinationIssPageValue: issPageValues.VEHICLE_STYLE,
           },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
+              destinationIssPageValue: issPageValues.COVERAGE_STATEMENT,
+          },
           {
               scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
               destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
@@ -134,6 +138,30 @@ const routingTable = function(store) {
               scenario: navigationScenarios.CLICKED_BACK,
               destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
           },
+          {
+              scenario: navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+              destinationIssPageValue: issPageValues.VEHICLE_DAMAGE,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+            destinationIssPageValue: issPageValues.COVERAGE_STATEMENT,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
+            destinationIssPageValue: issPageValues.PART_QUESTIONS,
+        },
+        {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+            destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+        },
+        {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+            destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+        },
+        {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+            destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+        },     
       ],
     },
     {

src/store/index.js

@@ -299,14 +299,14 @@ export const useMainStore = defineStore({
         });
       },
 
-      async lookupVinByPlate(licensePlate) {
+      async lookupVinByPlate(licensePlate, licenseState) {
       try {
         const response = await globalMethods.callHttpClient({
           method: endpoints.LookupVinByPlate.method,
           endpoint: endpoints.LookupVinByPlate.url,
           payload: {
             licensePlate: licensePlate,
-            licenseState: "IL", // hard coded until Welcome Page is complete and license state can be pulled from store
+            licenseState: licenseState, 
           },
         });
 
@@ -895,6 +895,28 @@ export const useMainStore = defineStore({
         }
       },
 
+      saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
+        //Reset dependent state when changing
+        if 
+        (
+            registrationInfo?.licensePlate !== this.order.vehicle.registration?.licensePlate ||
+            registrationInfo?.state !== this.order.vehicle.registration?.state ||
+            registrationInfo?.zipCode !== this.order.vehicle.registration?.zipCode
+        )
+        {
+            this.resetRegistrationAndDependencies();
+
+            if (!isSelectedGlassAvailableForVehicle) {
+              this.resetDamageAndDependencies();
+              this.resetPartsAndDependencies();
+            }
+
+            //Save new values
+            this.updateVehicle(vehicleInfo);
+            this.updateRegistration(registrationInfo);
+        }
+      },
+
       resetRegistrationAndDependencies() {
         this.resetRegistrationState();
         this.resetGlassPartsState();

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

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

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

@@ -24,7 +24,7 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

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

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {