Merge pull request #135 from Safelite/feature/digital/SSR-179

Feature/digital/ssr 179

src/common-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/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 = {
-    // TODO: Create test for license-plate-question component emitting value when user clicks Continue
+        carId: "C0000",
-    // and information entered is correct (no alerts)
+      };
 
-    // TODO: Create test for zip-question component emitting value when user clicks Continue
+      const { wrapper } = setupMocks({});
-    // and information entered is correct (no alerts)
+      wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
-  
+
-    // *The above will be completed when navigation from page is complete (SSR-179)
+      useMainStore().order.vehicle.carId = "C0000";
+
+      // 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 = {
+
-        ...mountOptionsMockData,
+  useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => {
-        router: {
+    return Promise.resolve({
-            navigate: jest.fn(),
+      data: lookupVinByPlateResponse
+        ? 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);
-    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-    
-    const mountOptions = getMountOptions(mountOptionsMockData);
 
-    const wrapper = shallowMount(licensePlateLookup, mountOptions);
+  const apiResponses = {
+    serviceZipValidationResponse: {
+      isValid: isZipValid,
+      isServiceable: isZipServiceable,
+    },
+    vinLookupResponse: {
+      vin: vin,
+      vehicle: vehicle,
+      error: vinLookupResponseError,
+    },
+  };
 
-    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  settleAllPromises.mockImplementation(() => apiResponses);
-    
+
-    return { wrapper, apiPromise };
+  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();
+
+  return { wrapper };
 }

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 siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/common-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 '@/common-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
@@ -108,57 +96,179 @@ 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,
-        const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+              vehicleInfo: Object.assign(vehicleFromLookup, {vin: vehicleFromLookup.vin }),
+              registrationInfo: {
+                  licensePlate: this.licensePlate,
+                  state: this.licenseState,
+              },
+          },
+          false
+      );
 
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
+      return await this.navigateForward();
-        this.$refs.siteFooter.removeLoader();
+    },
+    async navigateForward() {
+      // 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/router/router-constants/routing-table.js

@@ -137,7 +137,31 @@ 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();