Merge pull request #197 from Safelite/feature/digital/SSR-254

Feature/digital/ssr 254
2023-03-14 11:14:23 -04:00 · 2023-03-14 11:14:23 -04:00 · fc9ab62334
commit fc9ab62334
parent 466342bea3 43e562ac80
14 changed files with 484 additions and 115 deletions
--- a/src/constants/vehicle-lookup-alert-types.js
+++ b/src/constants/vehicle-lookup-alert-types.js
@ -1,7 +1,8 @@
 const vehicleLookupAlertTypes = Object.freeze({
  NOT_FOUND: 'notFound',
  NOT_MATCHED: 'notMatched',
-  TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched'
+  TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched',
+  PERFECT_MATCH: 'perfectMatch'
 });

 export default vehicleLookupAlertTypes;
--- a/src/layouts/coverage-statement/coverage-statement.spec.js
+++ b/src/layouts/coverage-statement/coverage-statement.spec.js
@ -0,0 +1,192 @@
+// Components
+import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
+
+// Supporting files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+import baseMixin from "@/mixins/base-mixin";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { applicationConfig } from "@/constants/application-config";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+
+jest.mock("@/helpers/damage-helper", () => ({
+    getDamageString: jest.fn(),
+}));
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("coverage-statement.vue...", () => {
+    describe("method arePagePrerequisitesValid...", () => {
+        test("Should return true for valid page requisites if vin exists", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            
+            // Act
+            let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(arePagePrerequisitesValid).toBe(true);
+        });
+
+        test("Should return false for valid page requisites if vin is missing", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            
+            useMainStore().order.vehicle.vin = null;
+
+            // Act
+            let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(arePagePrerequisitesValid).toBe(false);
+        });
+    });
+    describe("navigation", () => {
+        test("forwardButtonAction should trigger navigateForward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+        });
+    });
+    describe("display correct coverage statement", () => {
+        test("If damage is Repair, display NonADASRepair coverage statement", async () => {
+            // Arrange
+            const wrapper = shallowMount(coverageStatement, {
+                mixins: [mockMixin],
+            });
+
+            useMainStore().order.damage.isRepair = true;
+
+            // Assert
+            expect(wrapper.vm.unverifiedNonADASRepairBodyText).toEqual("NonADASRepairTestReturn");
+        })
+
+        test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => {
+            // Arrange
+            const wrapper = shallowMount(coverageStatement, {
+                mixins: [mockMixin],
+            });
+
+            // Assert
+            expect(wrapper.vm.unverifiedNonADASNextStepsBodyText).toEqual("NonADASReplaceTestReturn");
+        })
+
+        test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => {
+            // Arrange
+            const wrapper = shallowMount(coverageStatement, {
+                mixins: [mockMixin],
+            });
+
+            useMainStore().order.lineItems.requiresRecalibration = true;
+
+            // Assert
+            expect(wrapper.vm.unverifiedADASNextStepsBodyText).toEqual("ADASReplaceTestReturn");
+        })
+    })
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((contentName) => {
+            if (contentName === "UnverifiedADASNextStepsWidget") {
+                return "ADASReplaceTestReturn"
+            }
+            else if (contentName === "UnverifiedNonADASRepairWidget") {
+                return "NonADASRepairTestReturn"
+            }
+            else if (contentName === "UnverifiedNonADASNextStepsWidget") {
+                return "NonADASReplaceTestReturn"
+            }
+            return null;
+        }),
+    }
+};
+
+function setupMocks({
+pageHeaderWidgetHeaderText,
+// cmsPageContent = "CMS content goes here",
+// unverifiedNonADASRepairBodyText = "repair body text",
+}) {
+    //Mock api responses
+    const apiResponses = {
+        cmsContent: {
+            SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+            FunnelHeaderWidget: {
+                LogoImage:
+                    `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+            },
+            ColorQuestionWidget: "Please choose your rear window tint color",
+            FeatureQuestionWidget: "Ok no choose features",
+            AlertWidget: {
+                BodyText: "Please choose your tint color",
+                HeadlineText: "Just a few more steps to go",
+            },
+            unverifiedNonADASRepairBodyText: "Repair body text",
+        },
+    };
+    useMainStore().order = {
+        vehicle: {
+            vin: "TESTVIN",
+        },
+        lineItems: {
+            glassParts: [
+                {
+                    canSafeliteRecalibrate: false,
+                    childParts: null,
+                    color: "Green Tint",
+                    description: "solar, driver side, encap",
+                    partNumber: "DQ12204GTYNOEM",
+                    partType: "DRIVER REAR QUARTER GLASS",
+                    recalibrationType: null,
+                    requiresCapabilityQuestions: false,
+                    requiresRecalibration: false,
+                }
+            ]
+        },
+        damage: {
+            isRepair: false,
+        }
+    };
+
+    const apiPromise = Promise.resolve(apiResponses);
+
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const mountOptions = getMountOptions({
+        
+    });
+
+    mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
+    
+    const wrapper = shallowMount(coverageStatement, mountOptions);
+    
+    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+    // //Mock CMS content
+    // const cmsContent = {
+    //     PageContent: cmsPageContent,
+    //     NonADASRepairBodyText: unverifiedNonADASRepairBodyText,
+    // };
+
+    return { wrapper };
+
+}
+
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@ -23,12 +23,12 @@
            cmsWidgetName="whatHappensNextCopy"
            class="mt-4 mb-2 fw-bold"
        />
-        <div v-html="bodyText"></div>
+        <div v-html="bodyText" ref="coverageStatementBodyText"></div>
        <recalModal cmsWidgetName="RecalModal" />
        <siteFooter
          cmsWidgetName="SiteFooterWidget"
          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
+          @backClicked="navigateBack"
          @forwardClicked="forwardButtonAction"
          ref="siteFooter"
        />
@ -44,36 +44,25 @@ import { Form } from 'vee-validate';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import textBlock from "@/digital-components/text-block/text-block";
-import modal from "@/digital-components/modal/modal";
-import textLink from '@/ux-components/text-link/text-link.vue';
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';

 // Import Supporting Files
-import { 
-  fetchCmsContentForPage,
-  doesCopyContainTextLink,
-  splitCopyOnCMSPlaceHolder,
-  getRouterLinkDisplayTextFromCopy,
-  getRouterLinkRouteFromCopy
-} from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";

 export default {
  name: 'coverage-statement',
-  mixins: [baseFormMixin],
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
-    vehicleBanner,
    textBlock,
-    modal,
-    textLink,
    recalModal
  },
  computed: {
@ -95,16 +84,16 @@ export default {
      }
    },
    continueWithSchedulingBodyText() {
-      return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
+      return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
    },
    unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll("{custom:damage}", this.damageText);
+      return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
    },
    unverifiedNonADASNextStepsBodyText() {
-      return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll("{custom:damage}", this.damageText);
+      return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
    },
    unverifiedNonADASRepairBodyText() {
-      return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
+      return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
    },
    damageText() {
    var damageString = getDamageString();
@ -130,22 +119,24 @@ export default {
    });
  },
  methods: {
-    doesCopyContainTextLink,
-    splitCopyOnCMSPlaceHolder,
-    getRouterLinkDisplayTextFromCopy,
-    getRouterLinkRouteFromCopy,
-    arePagePrerequisiteValid() {
-      return true;
+    arePagePrerequisitesValid() {
+      if (useMainStore().order.vehicle.vin) {
+        return true;
+      }
+        return false;
    },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+
+    async forwardButtonAction() {
+      return this.navigateForward();
+    },
+
+    navigateForward() {
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
+        this.$route
+      );
    },
  },
-    async forwardButtonAction() {},
-    resetDependentState() {},
 };
 </script>

--- a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
@ -0,0 +1,68 @@
+import { shallowMount } from "@vue/test-utils";
+import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
+
+describe("modal.vue", () => {
+    it("Should display header text when HeaderText is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(recalModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+    });
+
+    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(recalModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+    });
+
+    it("Should insert image url when Image is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(recalModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+    });
+
+    it("Should display body text when BodyText is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(recalModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockCmsContent = {
+    HeaderText: "Sample header text here.",
+    SubheaderText: "Sample subheader text here.",
+    Image: "https://www.sampleImage.sample",
+    BodyText: "Sample body text here.",
+    FooterText: "Sample footer text here.",
+};
--- a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js
@ -6,6 +6,12 @@ import { queryStrings } from '@/constants/query-strings';
 import { GaActions } from "@/constants/analytics";
 import VehicleLookup from './vehicle-lookup.vue';
 import {vinLookupMethodSelections} from '@/constants/vin-lookup-methods';
+import { useMainStore } from '../../store';
+import { createTestingPinia } from '@pinia/testing';
+import { mapStores } from "pinia";
+
+const pinia = createTestingPinia();
+useMainStore(pinia);

 const vinLookupMethodsMockData = {
  QuestionText: 'To find the right part, let’s get your VIN.  Or we can look it up for you!',
@ -63,6 +69,7 @@ function setupMocks() {
      mixins: [
        {
          computed: {
+            ...mapStores(useMainStore),
            GaActions() {
              return GaActions;
            },
@ -181,6 +188,8 @@ describe('vehicle-lookup.vue', () => {
      answersFromCms: vinLookupMethodsMockData.Answers,
    });

+    useMainStore().updateVehicleVin = jest.fn();
+
    const lookupByManualVinOptionLabel = wrapper.find('[data-test-id="vin-lookup-methods-button-question"] label[for="VinLookupMethods-ManualVin"]');
    await lookupByManualVinOptionLabel.trigger('mousedown');

--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@ -39,6 +39,7 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin';
 import {vinLookupMethodSelections} from '@/constants/vin-lookup-methods';
+import { useMainStore } from '@/store';

 // Import Component
 import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
@ -99,6 +100,7 @@ export default {
    forwardButtonAction() {
      switch (this.selectedVinLookupMethod) {
        case vinLookupMethodSelections.MANUALVIN:
+          useMainStore().updateVehicleVin(null);
          this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
          break;
        case vinLookupMethodSelections.LICENSEPLATE:
--- a/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue
+++ b/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue
@ -0,0 +1,38 @@
+<template>
+    <alert
+      alertClass="alert-success"
+      cmsWidgetName="AlertPerfectMatchInsuranceNotVerified"
+      :manualCopy="body"
+      id="perfect-match-alert"
+      aria-label="perfect-match-alert"
+    />
+  </template>
+  <script>
+  import alert from '@/ux-components/alert/alert.vue';
+  import { getDamageString } from '@/helpers/damage-helper';
+  
+  export default {
+    name: 'perfect-match-alert',
+    components: {
+      alert,
+    },
+    inject: ['vehicleFromLookup'],
+    computed: {
+      body() {
+      return (
+        this.getCmsContent('AlertPerfectMatchInsuranceNotVerified', 'BodyText')
+          .replaceAll('{custom:damage}', getDamageString())
+      );
+    },
+    }
+  };
+  </script>
+  <style>
+  /**
+    Override wrong margin-bottom rule in the Alert component.
+  */
+  #perfect-match-found-alert p:last-of-type {
+    margin-bottom: 0 !important;
+  }
+  </style>
+  
--- a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
+++ b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
@ -12,6 +12,9 @@
    <vehicleNotMatchedAlert
      v-else-if="isVehicleNotMatchedVisible"
    />
+    <perfectMatchAlert
+      v-else-if="isPerfectMatchVisible"
+    />
  </div>
 </template>
 <script>
@ -19,7 +22,7 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import vehicleNotFoundAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert';
 import vehicleNotMatchedAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert';
 import twoIdenticalYMMVehicleAlert from '@/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert'
-
+import perfectMatchAlert from '@/layouts/vin-lookup/vin-lookup-alerts//perfect-match-alert/perfect-match-alert.vue';

 export default {
  name: 'vin-lookup-alerts',
@ -27,6 +30,7 @@ export default {
    vehicleNotFoundAlert,
    vehicleNotMatchedAlert,
    twoIdenticalYMMVehicleAlert,
+    perfectMatchAlert
  },
  props: {
    activeAlertType: {
@ -48,6 +52,9 @@ export default {
    isTwoIdenticalYMMVehicleFoundVisible(){
      return this.activeAlertType === vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
    },
+    isPerfectMatchVisible() {
+      return this.activeAlertType === vehicleLookupAlertTypes.PERFECT_MATCH;
+    },
    wrapperCssClass() {
      return {
        'mb-5': this.activeAlertType !== null,
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@ -22,9 +22,11 @@
                :activeAlertType="activeVehicleLookupAlertType"
                />

-                <vinQuestion
-                v-model="vin"
-                />
+          <vinQuestion
+            v-model="vin"
+            :mask="vinMask"
+            :isDisabled="vinPopulatedOnPageLoad"
+          />

                <vinLocationInformation />

@ -78,24 +80,25 @@ export default {
    setup() {
        const mainStore = useMainStore();

-        return { mainStore };
-    },
-    data() {
-        return {
-            activeVehicleLookupAlertType: null,
-            needToLookupVehicle: true,
-            vehicleFromLookup: null,
-            vin: null,
-            forwardButtonCarStyle:"",
-        };
-    },
-    provide() {
-        return {
-            vehicleFromLookup: computed(() => this.vehicleFromLookup),
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    return { mainStore };
+  },
+  data() {
+    return {
+      activeVehicleLookupAlertType: null,
+      needToLookupVehicle: true,
+      vehicleFromLookup: null,
+      vin: this.getVinFromStore(),
+      forwardButtonCarStyle:"",
+      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+    };
+  },
+  provide() {
+    return {
+      vehicleFromLookup: computed(() => this.vehicleFromLookup),
+    };
+  },
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

        // Settle promises and get results
        const promiseResultMap = [
@ -107,38 +110,51 @@ export default {

        const resultMap = await settleAllPromises(promiseResultMap);

-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  computed: {
+    isCarIdDifferentFromTheStore() {
+      return (
+        this.vehicleFromLookup !== null
+        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+      );
    },
-    computed: {
-        isCarIdDifferentFromTheStore() {
-            return (
-                this.vehicleFromLookup !== null
-                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-            );
-        },
-        isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
-        }
+    isTwoIdenticalYMMVehicleFound(){
+      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
    },
-    methods: {
-        arePagePrerequisiteValid() {
-            return true;
-        },
-        backButtonAction() {
-            /**
-            * this.navigationScenarios comes from base-mixin
-            */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-        async forwardButtonAction() {
-            this.resetActiveAlert();
-            // Temp solution to reset the 'disabled' style on the Continue button
-            this.$refs.siteFooter.enableForwardAction();
+    vinMask() {
+      if (this.vinPopulatedOnPageLoad) {
+        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+        this.needToLookupVehicle = false;
+        const lastSixChars = this.vin.substring(11, this.vin.length);
+          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+      } else {
+          return "XXXXXXXXXXXXXXXXX";
+      }
+    },
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    getVinFromStore() {
+      return this.mainStore.vehicle.vin;
+    },
+    backButtonAction() {
+      /**
+       * this.navigationScenarios comes from base-mixin
+       */
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+    async forwardButtonAction() {
+      this.resetActiveAlert();
+      // Temp solution to reset the 'disabled' style on the Continue button
+      this.$refs.siteFooter.enableForwardAction();

            if (this.needToLookupVehicle) {
                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@ -158,19 +174,18 @@ export default {
                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
            }

-            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-                if(this.isTwoIdenticalYMMVehicleFound){
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-                }
-                else{
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-                }
-
-
-                const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-                this.$refs.siteFooter.removeLoader();
+      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+        if(this.isTwoIdenticalYMMVehicleFound){
+          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+        }
+        else{
+          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+        }
+        
+        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+        this.$refs.siteFooter.removeLoader();

                this.needToLookupVehicle = false;

@ -197,14 +212,18 @@ export default {
                return;
            }

-            this.mainStore.updateVehicle(this.vehicleFromLookup);
-            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-            if (partsOrQuestionsResponse.error) {
-                // To Do: Need requirement on what to do here
-                console.error('Error on retrieving PartsOrQuestions');
-                this.$refs.siteFooter.removeLoader();
-                return;
-            }
+      // save vehicle to store if it hasn't already been saved
+      if (!this.vinPopulatedOnPageLoad) {
+        this.mainStore.updateVehicle(this.vehicleFromLookup);
+      }
+
+      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+      if (partsOrQuestionsResponse.error) {
+        // To Do: Need requirement on what to do here
+        console.error('Error on retrieving PartsOrQuestions');
+        this.$refs.siteFooter.removeLoader();
+        return;
+      }

            // Comes from vehicleQuestionsMixin.navigateForward()
            await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
--- a/src/mixins/vehicle-questions-mixin.js
+++ b/src/mixins/vehicle-questions-mixin.js
@ -50,6 +50,7 @@ export default {
                issPageValues.MOLDING_QUESTIONS,
                issPageValues.CAPABILITY_QUESTIONS,
                issPageValues.QUOTE,
+                issPageValues.COVERAGE_STATEMENT,
            ];

            return (
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@ -17,6 +17,7 @@ export const issPageValues = {
    MOLDING_QUESTIONS: "molding-questions",
    CAPABILITY_QUESTIONS: "capability-questions",
    COVERAGE_STATEMENT: "coverage-statement",
+    PROVIDER_PREFERENCE: "provider-preference",
    REVEAL: "reveal",
    ESTIMATE: "estimate",
    ADDRESS_VEHICLES: "address-vehicles",
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@ -40,6 +40,8 @@ const navigationScenarios = {
    CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
    CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
    CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
+  
+    CLICKED_FORWARD_COVERAGE_STATEMENT: "CLICKED_FORWARD_COVERAGE_STATEMENT",
  };
  
  export { navigationScenarios };
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -173,7 +173,7 @@ const routingTable = function(store) {
          },
          {
              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-              destinationIssPageValue: issPageValues.ESTIMATE,
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
          },
          {
              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
@ -210,7 +210,7 @@ const routingTable = function(store) {
          },
          {
              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-              destinationIssPageValue: issPageValues.ESTIMATE,
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
          },
          {
              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
@ -264,7 +264,7 @@ const routingTable = function(store) {
          },
          {
              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-              destinationIssPageValue: issPageValues.ESTIMATE,
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
          },
          {
              scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
@ -393,6 +393,41 @@ const routingTable = function(store) {
        },
      ],
    },
+    {
+      issPageValue: issPageValues.COVERAGE_STATEMENT,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+          destinationIssPageValue: issPageValues.VIN_LOOKUP,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+          destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
+          destinationIssPageValue: issPageValues.PART_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+          destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_MOLDING_QUESTIONS,
+          destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_CAPABILITY_QUESTIONS,
+          destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
+          destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE,
+        },
+      ],
+
+    },
+
  ];
 };

--- a/src/store/index.js
+++ b/src/store/index.js
@ -341,6 +341,7 @@ export const useMainStore = defineStore({

      // PartsOrQuestions API Actions
      async getPartsOrQuestions() {
+        this.resetGlassPartsState();
        const vehicle = this.vehicle;
        const damage = this.damage;
        const order = this.order;
@ -996,9 +997,10 @@ export const useMainStore = defineStore({
            }

            //Save new values
-            this.updateVehicle(vehicleInfo);
            this.updateRegistration(registrationInfo);
-        }
+          };
+        
+        this.updateVehicle(vehicleInfo);
      },
      saveVin({ isSelectedGlassAvailableForVehicle, vehicleInfo }) {
        //Reset dependent state when changing
@ -1031,9 +1033,10 @@ export const useMainStore = defineStore({

            //Save new values
            this.updateVehicle(vehicleInfo);
-            this.updateRegistration(registrationInfo);
-        }
-      },
+          }
+
+          this.updateRegistration(registrationInfo);
+        },

      resetRegistrationAndDependencies() {
        this.resetRegistrationState();