Merge branch 'release/2022.06.09' into feature/address-lookup-unit-tests

azure-pipelines.yml

@@ -26,7 +26,7 @@ resources:
       type: github
       name: Safelite/AzureDevOps
       endpoint: Safelite
-      ref: refs/tags/t5.4.0
+      ref: refs/tags/t5.5.19
 
 variables:
   - group: Digital-Infrastructure
@@ -67,9 +67,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Dev
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistDev
                     awsProfile: $(devDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:
@@ -109,9 +110,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Qa
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistQa
                     awsProfile: $(qaDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:
@@ -150,9 +152,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Prod
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistProd
                     awsProfile: $(prodDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:
@@ -169,3 +172,10 @@ stages:
                       __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)
+    - stage: AutoTagReleaseBuild
+      displayName: Auto Tag Release Build For Production
+      jobs:
+        - template: templates/digital/auto-tag.yml@AzureDevOps
+          parameters:
+            userName: SafeliteAzureDevops
+            userEmail: githubazuredevops@safelite.com

jest.config.js

@@ -27,6 +27,7 @@ module.exports = {
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
+    "!src/common-components/menu-modal/menu-modal.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -3,30 +3,6 @@ import funnelFooter from "./funnel-footer";
 
 describe("funnel-footer.vue", () => {
 
-  it("Should return footer-link class", async () => {
-    // Act
-      const r = {
-        test:"testing",
-        clientHeight: 10,
-        offsetHeight: 24,
-      };
-
-      global.document.querySelector = jest.fn().mockImplementation(()=> {
-        return r;
-      });
-
-      const wrapper = mount(funnelFooter, {
-        mixins: [mockMixin]
-      });
-
-      // Assert
-      const link = wrapper.find("a");
-
-      // Expect
-      expect(link.attributes('class')).toContain("footer");
-
-  });
-
   it("Should emit ForwardClicked on button click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {

src/common-components/funnel-footer/funnel-footer.vue

@@ -1,21 +1,6 @@
 <template>
-  <div class="footer pt-4">
+    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
-    <div class="container-fluid g-2">
+      <div class="row d-flex flex-row-reverse align-items-center vw-100">
-      <div class="row">
-        <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
-        </div>
-      </div>
-      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
-        <div class="col d-flex justify-content-center justify-content-around text-center">
-          <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-          <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-          <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
-        </div>
-      </div>
-    </div>
-    <div class="container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
-      <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col button-col d-flex" id="stacked">
           <buttonMain
             ref="buttonMain"
@@ -26,6 +11,8 @@
             :aria-disabled="isForwardActionDisabled"
             :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
+            data-bs-target="#footerModal"
+            data-bs-dismiss="modal"
           />
         </div>
         <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@@ -34,11 +21,12 @@
             :text="backLink"
             @click-event="linkClick"
             href="javascript:void(0)"
+            data-bs-target="#footerModal"
+            data-bs-dismiss="modal"
           />
         </div>
       </div>
-    </div>
+  </footer>
-  </div>
 </template>
 
 <script>
@@ -80,7 +68,7 @@ export default {
     },
     buttonText(){
       return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
-    }
+    },
   },
   methods: {
     onResize() {
@@ -112,7 +100,6 @@ export default {
 <style lang="scss" scoped>
 .footer {
   display: flex;
-  margin-top: auto;
   a {
     display: flex;
     justify-content: center;

src/common-components/funnel-header/funnel-header.vue

@@ -4,6 +4,7 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+    <menuModal/>
   </div>
   <alert
     class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@@ -19,6 +20,7 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
+import menuModal from "@/common-components/menu-modal/menu-modal";
 
 export default {
   name: "funnel-header",
@@ -43,6 +45,7 @@ export default {
   },
   components: {
     alert,
+    menuModal,
   },
   mounted() {
     // Check if alert event is on the bus
@@ -50,7 +53,6 @@ export default {
       globalEvents.Categories.GLOBAL_ALERT,
       globalEvents.SubCategories.PAGE_NOT_FOUND
     );
-
     // If alert event is on the bus, then display the alert
     if (alertEvent !== undefined) {
       this.displayGlobalAlert = true;
@@ -70,5 +72,6 @@ export default {
 }
 .alert {
   left: 0;
+  top: 72px;
 }
 </style>

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

@@ -1,53 +0,0 @@
-<template>
-  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
-    <div class="bar1"></div>
-    <div class="bar2"></div>
-    <div class="bar3"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'menuButton',
-  data() {
-    return {
-      isActive: false,
-    };
-  },
-  methods: {
-    toggleClass: function(event){
-      this.isActive = !this.isActive;
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.menu-button {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .bar1,
-  .bar2,
-  .bar3 {
-    width: 14px;
-    height: 2px;
-    background-color: $blue-400;
-    margin: 1px 0;
-    transition: 0.25s;
-  }
-  &.active .bar1 {
-    transform: rotate(-45deg) translate(-3px, 3px);
-  }
-  &.active .bar2 {opacity: 0;}
-  &.active .bar3 {
-    transform: rotate(45deg) translate(-3px, -3px);
-  }
-}
-</style>

src/common-components/menu-modal/menu-modal.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="menu-modal-container">
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
+  </div>
+  <!-- Modal -->
+  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header visually-hidden">
+          <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
+        </div>
+        <div class="modal-body d-flex flex-column">
+          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+        </div>
+        <div class="modal-footer d-flex justify-content-start">
+          &copy; {{new Date().getFullYear()}} Safelite Group
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'menuModal',
+  data() {
+    return {
+      isActive: false,
+      currentFooterAndHeaderHeight: 0,
+    };
+  },
+  mounted() {
+    const myModalEl = document.getElementById('footerModal');
+    var self = this;
+    myModalEl.addEventListener('hide.bs.modal', function (event) {
+      self.isActive = false;
+    });
+    myModalEl.addEventListener('show.bs.modal', function (event) {
+      self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
+      self.isActive = true;
+    })
+  },
+  components: {
+    textLink,
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-modal-container {
+  position: absolute;
+  padding: 1.47rem 1rem 1.47rem 1.47rem;
+  right: 0;
+  button {
+    border: none;
+    &.menu-button {
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+      background-color: $white;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1056;
+      .bar1,
+      .bar2,
+      .bar3 {
+        width: 14px;
+        height: 2px;
+        background-color: $blue-400;
+        margin: 1px 0;
+        transition: 0.25s;
+      }
+      &.active .bar1 {
+        transform: rotate(-45deg) translate(-3px, 3px);
+      }
+      &.active .bar2 {opacity: 0;}
+      &.active .bar3 {
+        transform: rotate(45deg) translate(-3px, -3px);
+      }
+    }
+  }
+}
+.modal {
+  max-width: 576px;
+  left: auto;
+  height: calc(100% - 72px);
+  top: 72px;
+  border-top: 1px solid $gray-300;
+  .modal-body {
+    padding: 2rem;
+  }
+    .modal-fullscreen {
+      width: 100vw;
+      max-width: 576px;
+  }
+  .navigation-link {
+    margin-bottom: 1.5rem;
+  }
+  .modal-footer {
+    border-top: none;
+    padding: 2rem;
+  }
+  //.modal-backdrop styles are in common-styles.scss
+}
+</style>

src/constants/endpoints.js

@@ -79,6 +79,10 @@ const endpoints = {
     url: "/analytics/api/v1/analytics/log-custom-event",
     method: "POST",
   },
+  InitializeSession:{
+    url: "/analytics/api/v1/analytics/initialize",
+    method: "POST",
+  },
   GetExperimentsByUser: {
     url: "/analytics/api/v1/analytics/get-experiments",
     method: "GET",

src/constants/store-actions.js

@@ -21,6 +21,7 @@ const storeActions = {
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
   LOG_PAGE_VIEW: "logPageView",
   LOG_CUSTOM_EVENT: "logCustomEvent",
+  INITIALIZE_SESSION: "initializeSession",
   GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
   UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION: "updateServiceLocationWithVehicleRegistration",
 

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

@@ -104,6 +104,14 @@ export function getSessionIdValue(){
     return '00000000-0000-0000-0000-000000000000';
 }
 
+export function setCookieProperties(properties) {
+    if (typeof properties == "object") {
+        Object.keys(properties).forEach(key => {
+            document.cookie = `${key}=${properties[key]}`;
+        });
+    }
+}
+
 /*
 ===========================
 =   PRIVATE FUNCTIONS     =

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

@@ -11,8 +11,8 @@ import baseMixin from "@/mixins/base-mixin";
 export async function loadOrderIfPresent() {
     const funnelCookie = getFunnelCookie();
     
-    // Do nothing if there is no cookie or no correlation id.
+    // Do nothing if there is no cookie, correlation id, or referral number.
-    if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null) {
+    if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null || !funnelCookie.ReferralNumber) {
         return null;
     }
 

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

@@ -18,7 +18,8 @@ describe("loadOrderIfPresent", () => {
 
         const testCookieValue = {
             ShouldResetState: testShouldResetState,
-            ReferralCorrelationId: "xxx"
+            ReferralCorrelationId: "xxx",
+            ReferralNumber: "12345"
         }
 
         document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${JSON.stringify(testCookieValue)}; path=/; ${cookieHelper.getCookieDomainValue()}`;
@@ -33,7 +34,11 @@ describe("loadOrderIfPresent", () => {
 
     test("ShouldResetState == true => reset store", () => {
         // Arrange
-        cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ ShouldResetState: true, ReferralCorrelationId: "xxx-xxx-xxx" });
+        cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ 
+            ShouldResetState: true, 
+            ReferralCorrelationId: "xxx-xxx-xxx",
+            ReferralNumber: "12345"
+        });
 
         const mockData = {
             actionList: [{

src/helpers/unit-test-helper.js

@@ -24,14 +24,13 @@ export function getMountOptions(mockData) {
   mocks.logEvent = jest.fn();
   mocks.pushExperimentsToDataLayer = jest.fn();
   mocks.prependActionToMethod = jest.fn();
-
   mocks.dispatchStoreAction = jest.fn();
   mocks.dispatchStoreAction.mockImplementation((actionName) => {
     let actionFilterResult = mockData.actionList.filter(
       (x) => x.actionName == actionName
     );
 
-    if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
+    if (actionFilterResult.length === 1) {
       return Promise.resolve({
         data: actionFilterResult[0].data,
       });

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

@@ -0,0 +1,504 @@
+// Components
+import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import router from "@/router";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, flushPromises, shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { maska } from 'maska';
+import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+import { validate } from "vee-validate";
+import { isGlassAvailableForCarId } from "@/helpers/damage-helper.js"
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { EXPECTATION_FAILED } from "http-status-codes";
+
+// 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(),
+// }));
+
+jest.mock("@/helpers/damage-helper", () => ({
+  isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+  getDamageString: jest.fn()
+}));
+
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+  navigateAfterSaveToHeritageFunnel: jest.fn()
+}));
+
+
+// const questionText = "Question Text";
+// const mockMixin = {
+//   methods: {
+//     getCmsContent: jest.fn().mockImplementation(() => {
+//       return questionText;
+//     })
+//   }
+// }
+
+describe("address-lookup.vue", () => {
+  describe("registration and service zips", () => {
+    describe("if registration zip is serviceable", () => {
+      test("if registration address is provided => update service address on successful continue", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup,{
+          isZipServiceable: true
+        });
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
+      });
+    });
+
+    describe("if registration zip is not serviceable", () => {
+      test("if registration address is provided and user clicks continue => show non-serviceable zip alert", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+          isZipServiceable: false
+        });
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(false);
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(true);
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true);
+      });
+
+      test("if registration address is provided user clicks continue => show service zip field on continue click", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+            isZipServiceable: false
+          }
+        );
+
+        expect(wrapper.vm.showServiceZipField).toBeFalsy();
+        expect(wrapper.findComponent({ ref: "serviceZip" }).exists()).toBe(false);
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(wrapper.vm.showServiceZipField).toBe(true);
+        expect(wrapper.findComponent({ ref: "serviceZip" }).isVisible()).toBe(true);
+      });
+
+      test("if registration address, service zip are provided, and user clicks continue => don't update service address", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+            isZipServiceable: false
+          }
+        );
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
+      });
+
+      test("if registration address, service zip are provided, and user clicks continue => both zips are saved and are different", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {});
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        baseMixin.methods.dispatchStoreAction = jest.fn();
+        baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+          let data = {};
+          if (actionName == storeActions.VALIDATE_ZIP) {
+            if (value == "43215") {
+              data = {
+                isServiceable: false
+              };
+            }
+            else {
+              data = {
+                isServiceable: true
+              }
+            }
+          }
+          else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+            data = {
+              isStatePermissible: true,
+              vinVehicles: [{
+                vin: "TEST_VIN",
+                vehicle: {
+                  carId: "CARID"
+                }
+              }]
+            }
+          }
+
+          return Promise.resolve({ data });
+        })
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+        await wrapper.vm.forwardButtonAction();
+        await wrapper.setData({
+          serviceZipCode: "12345"
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(store.getters.order.serviceLocation.zipCode).not.toEqual(store.getters.vehicle.registration.zipCode);
+        expect(store.getters.vehicle.registration.zipCode).toEqual("43215");
+        expect(store.getters.order.serviceLocation.zipCode).toEqual("12345");
+      });
+    });
+  });
+
+  describe.skip("initialization", () => {
+    test("Page header is initialized with api data", async (done) => {
+      //Arrange
+      const pageHeaderWidgetHeaderText = "Select Damage";
+      const { wrapper, apiPromise } = setupMocks({
+        pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+      });
+
+      //Act
+      addressLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "address-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      //Assert
+      apiPromise.finally(() => {
+        expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+          pageHeaderWidgetHeaderText
+        );
+        done();
+      });
+    });
+
+    test("Customer Questions component is initialized with api data", async (done) => {
+      //Arrange
+      const StreetAddressQuestionWidget = { QuestionText: "test" };
+      const CityQuestionWidget = { QuestionText: "test" };
+      const StateQuestionWidget = { QuestionText: "test" };
+      const ZipQuestionWidget = { QuestionText: "test" };
+      const FirstNameQuestionWidget = { QuestionText: "test" };
+      const LastNameQuestionWidget = { QuestionText: "test" };
+      const EmailAddressQuestionWidget = { QuestionText: "test" };
+      const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
+      const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
+
+      const widgets = [
+        StreetAddressQuestionWidget,
+        CityQuestionWidget,
+        StateQuestionWidget,
+        ZipQuestionWidget,
+        AlertVerificationWarningWidget,
+        AlertNoMatchWarningWidget,
+        FirstNameQuestionWidget,
+        LastNameQuestionWidget,
+        EmailAddressQuestionWidget,
+      ];
+
+      const { wrapper, apiPromise } = setupMocks({
+        cmsContent: widgets,
+      });
+
+      //Act
+      addressLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "address-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      //Assert
+      apiPromise.finally(() => {
+        expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
+          widgets
+        );
+        done();
+      });
+    });
+  });
+});
+
+function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) {
+  store.commit(storeMutations.RESET_STATE);
+  const wrapper = shallowMount(addressLookup, getMountOptions({
+    ...mountOptions,
+    actionList: [
+      {
+        actionName: storeActions.VALIDATE_ZIP,
+        data: {
+          isServiceable: isZipServiceable
+        }
+      },
+      {
+        actionName: storeActions.LOOKUP_VIN_BY_ADDRESS,
+        data: lookupVinbyAddressResponse ? lookupVinbyAddressResponse : {
+          isStatePermissible: true,
+          vinVehicles: [{
+            vin: "TEST_VIN",
+            vehicle: {
+              carId: "CARID"
+            }
+          }]
+        }
+      }
+    ],
+    router: {
+      navigate: jest.fn(),
+      navigateAfterSave: jest.fn()
+    },
+  }));
+
+  wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+  wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+
+  // jest.mock("@/store", () => ({
+  //   commit: jest.fn(),
+  //   dispatch: jest.fn(),
+  //   getters: {
+  //     vehicle: {
+  //       carId: "CARID"
+  //     }
+  //   },
+  // }));
+
+  return { wrapper };
+}
+
+// function setupMocks({
+//   pageHeaderWidgetHeaderText = {},
+//   mountOptionsMockData = {
+//     router: {
+//       navigate: jest.fn(),
+//     },
+//     store: {
+//       getters: {
+//         vehicle: {},
+//       },
+//     },
+//   },
+// }) {
+//   //Mock api responses
+//   baseMixin.methods.dispatchStoreAction = jest.fn();
+//   const apiResponses = {
+//     cmsContent: {
+//       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+//       VehicleBannerWidget: {
+//         GenericVehicleImage:
+//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+//       },
+//       FunnelHeaderWidget: {
+//         LogoImage:
+//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+//       },
+//       StreetAddressQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       CityQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       StateQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       ZipQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       FirstNameQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       LastNameQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       EmailAddressQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       AlertVerificationWarningWidget: {
+//         HeaderText:
+//           "test",
+//         BodyText:
+//           "test",
+//       },
+//       AlertNoMatchWarningWidget: {
+//         HeaderText:
+//           "test",
+//         BodyText:
+//           "test",
+//       },
+
+//     },
+//   };
+
+//   const apiPromise = Promise.resolve(apiResponses);
+
+//   settleAllPromises.mockImplementation(() => apiPromise);
+//   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+//   //Mock damage initialize methods
+//   funnelHeader.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   vehicleBanner.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   funnelSubHeader.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   funnelFooter.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   customerQuestions.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   addressQuestions.methods = {
+//     initializeComponent: jest.fn(),
+//     setupAddressLookup: jest.fn(),
+//   };
+
+//   const mountOptions = getMountOptions(mountOptionsMockData);
+//   mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+//   mountOptions.global.directives = {
+//     maska: maska
+//   };
+
+//   const wrapper = mount(addressLookup, mountOptions);
+
+//   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+//   funnelHeaderWrapper.vm.initializeComponent =
+//     funnelHeader.methods.initializeComponent;
+
+//   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+//   vehicleBannerWrapper.vm.initializeComponent =
+//     vehicleBanner.methods.initializeComponent;
+
+//   const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+//   funnelSubHeaderWrapper.vm.initializeComponent =
+//     funnelSubHeader.methods.initializeComponent;
+
+//   const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
+//   funnelFooterWrapper.vm.initializeComponent =
+//     funnelFooter.methods.initializeComponent;
+
+//   const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
+//   customerQuestionsWrapper.vm.initializeComponent =
+//     customerQuestions.methods.initializeComponent;
+
+//   const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
+//   addressQuestionsWrapper.vm.initializeComponent =
+//     addressQuestions.methods.initializeComponent;
+//   addressQuestionsWrapper.vm.setupAddressLookup =
+//     addressQuestions.methods.setupAddressLookup;
+
+//   return { wrapper, apiPromise };
+// }

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

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

src/layouts/component-test/component-test.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <menuButton/>
+          <menuModal/>
         </div>
       </div>
       <div class="row my-4">
@@ -1089,7 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-  import menuButton from "@/common-components/menu-button/menu-button";
+  import menuModal from "@/common-components/menu-modal/menu-modal";
   export default {
     name: "App",
     components: {
@@ -1104,7 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
-      menuButton,
+      menuModal,
     },
     data() {
       return {

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

@@ -6,9 +6,10 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
 import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { shallowMount, flushPromises } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
+import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
@@ -24,51 +25,62 @@ jest.mock("@/helpers/cms-content-helper", () => ({
   fetchCmsContentForPage: jest.fn(),
 }));
 
-// Mock Store
-jest.mock("@/store", () => ({
-  commit: jest.fn(),
-  dispatch: jest.fn(),
-  getters: {
-    order: {
-      customer: { emailAddress: "test@test.com"},
-      serviceLocation: {zip: "11111"},
-    },
-    vehicle: {
-      carId: "TESTID",
-      registration: {
-        licensePlate: "TESTPLATE",
-        zipCode: "12345",
-      },
-    },
-    eventBusItem: jest.fn(),
-    damage: {
-      glassToReplace: []
-    },
-  },
-}));
-
 describe("license-plate-lookup.vue", () => {
-  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+  describe("get values from store", () => {
+    test("getLicensePlateFromStore returns store license plate", async () => {
       // Arrange
       const { wrapper } = setupMocks({});
+      const mockLicensePlate = "TESTPLATE";
+      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, mockLicensePlate);
 
       // Act
-    licensePlateLookup.beforeRouteEnter.call(
+      const licensePlate = wrapper.vm.getLicensePlateFromStore();
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
 
       // Assert
-    expect(arePagePrerequisitesValid).toBe(true);
+      expect(licensePlate).toEqual(mockLicensePlate);
+    });
+
+    test("getRegistrationZipFromStore returns store registration zip", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const mockRegistrationZip = "12345";
+      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, mockRegistrationZip);
+
+      // ACT
+      const registrationZip = wrapper.vm.getRegistrationZipFromStore();
+
+      // Assert
+      expect(registrationZip).toEqual(mockRegistrationZip);
+    });
+
+    test("getEmailFromStore returns store customer email", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const mockEmail = "test@test.com";
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, mockEmail);
+
+      // ACT
+      const customerEmail = wrapper.vm.getEmailFromStore();
+
+      // Assert
+      expect(customerEmail).toEqual(mockEmail);
+    });
+
+    test("getServiceZipFromStore returns store service zip", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const mockServiceZip = "11111";
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, mockServiceZip);
+
+      // ACT
+      const serviceZip = wrapper.vm.getServiceZipFromStore();
+
+      // Assert
+      expect(serviceZip).toEqual(mockServiceZip);
     });
   });
 
-describe("license-plate-lookup.vue", () => {
+  describe("navigation", () => {
     test("BackButtonAction triggers a router.navigate change", async () => {
 
       //Arrange
@@ -87,79 +99,22 @@ describe("license-plate-lookup.vue", () => {
       //Assert
       expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
     });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getLicensePlateFromStore returns store license plate", async () => {
-    
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const licensePlate = wrapper.vm.getLicensePlateFromStore();
-
-    // Assert
-    expect(licensePlate).toEqual("TESTPLATE");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getRegistrationZipFromStore returns store registration zip", async () => {
-    
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const registrationZip = wrapper.vm.getRegistrationZipFromStore();
-
-    // Assert
-    expect(registrationZip).toEqual("12345");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getEmailFromStore returns store customer email", async () => {
-    
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const customerEmail = wrapper.vm.getEmailFromStore();
-
-    // Assert
-    expect(customerEmail).toEqual("test@test.com");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getServiceZipFromStore returns store service zip", async () => {
-    
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const serviceZip = wrapper.vm.getServiceZipFromStore();
-
-    // Assert
-    expect(serviceZip).toEqual("11111");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Navigate forward should be called and isCarId should be set to false when data entered matches store data on forwardButtonAction click", async () => {
 
+    describe("on forwardButtonAction click", () => {
+      test("Navigate forward should be called and isCarIdDifferent should be set to false when data entered matches store data on forwardButtonAction click", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
+        const mockCarId = "TESTID";
+        store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+        store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
 
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: true } };
         });
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
-      return '';
+        const vinLookup = { data: { vehicle: { carId: mockCarId } } }
-   });
-    const vinLookup = {data: {vehicle: {carId: "TESTID"}}}
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+          return new Promise(resolve => resolve(vinLookup));
         });
         wrapper.vm.navigateForward = jest.fn();
 
@@ -174,14 +129,11 @@ describe("license-plate-lookup.vue", () => {
         await wrapper.vm.forwardButtonAction();
 
         //Assert
-    expect(wrapper.vm.navigateForward).toHaveBeenCalled();
         expect(wrapper.vm.isCarIdDifferent).toEqual(false);
-  });
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
       });
 
-describe("license-plate-lookup.vue", () => {
       test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
-
         // Arrange
         const { wrapper } = setupMocks({});
 
@@ -191,7 +143,7 @@ describe("license-plate-lookup.vue", () => {
         wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
           return '';
         });
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+
         //Act
         licensePlateLookup.beforeRouteEnter.call(
           wrapper.vm,
@@ -205,13 +157,11 @@ describe("license-plate-lookup.vue", () => {
         //Assert
         expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
       });
-});
 
-describe("license-plate-lookup.vue", () => {
       test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
-
         // Arrange
         const { wrapper } = setupMocks({});
+        store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
 
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: true } };
@@ -221,10 +171,8 @@ describe("license-plate-lookup.vue", () => {
         });
         const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+          return new Promise(resolve => resolve(vinLookup));
         });
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
 
         //Act
         licensePlateLookup.beforeRouteEnter.call(
@@ -239,9 +187,7 @@ describe("license-plate-lookup.vue", () => {
         //Assert
         expect(wrapper.vm.isCarIdDifferent).toEqual(true);
       });
-});
 
-describe("license-plate-lookup.vue", () => {
       test("Navigate forward should be called and isCarId should be set to true when carId entered matches previously entered carId and rest of data entered matches store data on forwardButtonAction click", async () => {
 
         // Arrange
@@ -255,7 +201,7 @@ describe("license-plate-lookup.vue", () => {
         });
         const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+          return new Promise(resolve => resolve(vinLookup));
         });
         wrapper.vm.previouslyEnteredCarId = "TESTID1";
         wrapper.vm.navigateForward = jest.fn();
@@ -276,81 +222,7 @@ describe("license-plate-lookup.vue", () => {
       });
     });
 
-describe("license-plate-lookup.vue", () => {
+    describe("navigateForward", () => {
-  test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.licensePlate = "NEWPLATE";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.registrationZip = "55555";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.serviceZip = "55555";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.isCarIdDifferent = true;
-    wrapper.vm.isSelectedGlassAvailableForVehicle = false;
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-       return '';
-    });
-    store.commit = jest.fn();
-    store.dispatch = jest.fn();
-
-    const vehicleInfo = {year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue"}
-    await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
-
-    //Assert
-    expect(store.dispatch).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
       test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => {
 
         // Arrange
@@ -370,9 +242,7 @@ describe("license-plate-lookup.vue", () => {
         //Assert
         expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
       });
-});
 
-describe("license-plate-lookup.vue", () => {
       test("navigateAfterSaveToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
 
         // Arrange
@@ -380,7 +250,6 @@ describe("license-plate-lookup.vue", () => {
 
         //Act
         wrapper.vm.isCarIdDifferent = false;
-    wrapper.vm.$refs.loadingModal.showModal = jest.fn();
         wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
           return '';
         });
@@ -391,8 +260,230 @@ describe("license-plate-lookup.vue", () => {
         expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
       });
     });
+  });
+
+  describe("button text", () => {
+    test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      wrapper.vm.licensePlate = "NEWPLATE";
+      wrapper.vm.getCmsContent = jest.fn();
+      await wrapper.vm.$nextTick();
+
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+    });
+
+    test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      wrapper.vm.registrationZip = "55555";
+      wrapper.vm.getCmsContent = jest.fn();
+      await wrapper.vm.$nextTick();
+
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+    });
+
+    test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      wrapper.vm.serviceZip = "55555";
+      wrapper.vm.getCmsContent = jest.fn();
+      await wrapper.vm.$nextTick();
+
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+    });
+  })
+
+  describe("saving registrationZip and serviceZip on continue", () => {
+    test("registrationZip is serviceable and vehicle match is found => sets service zip/state to registration zip/state", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const mockCarId = "TESTID";
+      store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId)
+      wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        if (zip)
+          return { data: { isServiceable: true, state: "OH" } };
+        return
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => new Promise(resolve => resolve(vinLookup)));
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(store.getters.order.serviceLocation.zipCode).toEqual(store.getters.vehicle.registration.zipCode);
+      expect(store.getters.vehicle.registration.zipCode).toEqual("00000");
+      expect(store.getters.order.serviceLocation.zipCode).toEqual("00000");
+    })
+
+    test("vehicle match is found but registrationZip is not serviceable => shows service zip/state field", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+        return { data: { isServiceable: false, state: "XX" } };
+      });
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true);
+    })
+
+    test("registrationZip is not serviceable so serviceZip field is shown, continue clicked => user cannot continue", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+        return { data: { isServiceable: false, state: "XX" } };
+      });
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+      await wrapper.vm.forwardButtonAction();
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      // At this point, serviceZip field is shown
+
+      // Act
+      // Continue without entering anything into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true); 3
+      expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).not.toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigateAfterSave).not.toHaveBeenCalled();
+    });
+
+    test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => user can continue", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const registrationZip = "00000";
+      const serviceZip = "99999";
+      const mockCarId = "TestCarId";
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+        return new Promise(resolve => resolve(vinLookup));
+      });
+      wrapper.vm.navigateForward = jest.fn();
+      await wrapper.setData({ registrationZip: registrationZip });
+      await wrapper.vm.forwardButtonAction();
+      // At this point, serviceZip field is shown
+
+      await wrapper.setData({ serviceZip: serviceZip });
+
+      // Act
+      // Continue after entering input into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true);
+      expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+
+    test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => service and registration zips/states saved", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const registrationZip = "00000";
+      const serviceZip = "99999";
+      const mockCarId = "TestCarId";
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+        return new Promise(resolve => resolve(vinLookup));
+      });
+      wrapper.vm.navigateForward = jest.fn();
+      await wrapper.setData({ registrationZip: registrationZip });
+      await wrapper.vm.forwardButtonAction();
+      // At this point, serviceZip field is shown
+
+      await wrapper.setData({ serviceZip: serviceZip });
+
+      // Act
+      // Continue after entering value into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      expect(store.getters.vehicle.registration.zipCode).toEqual(registrationZip);
+      expect(store.getters.order.serviceLocation.zipCode).toEqual(serviceZip);
+      expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+  })
+
+  describe("miscellaneous", () => {
+    test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+      store.commit(storeMutations.UPDATE_CAR_ID, "TESTCARID");
+
+      //Act
+      licensePlateLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "license-plate-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+      await nextTick();
+
+      //Assert
+      expect(arePagePrerequisitesValid).toBe(true);
+    });
+
+    test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      wrapper.vm.isCarIdDifferent = true;
+      wrapper.vm.isSelectedGlassAvailableForVehicle = false;
+      wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+        return '';
+      });
+      store.commit = jest.fn();
+      store.dispatch = jest.fn();
+
+      const vehicleInfo = { year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue" }
+      await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
+
+      //Assert
+      expect(store.dispatch).toHaveBeenCalled();
+    })
 
-describe("license-plate-lookup.vue", () => {
     test("dispatch non blocking store action called on validate zip", async () => {
 
       // Arrange
@@ -405,9 +496,7 @@ describe("license-plate-lookup.vue", () => {
       //Assert
       expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
-});
 
-describe("license-plate-lookup.vue", () => {
     test("dispatch non blocking store action called on lookup vin", async () => {
 
       // Arrange
@@ -420,20 +509,18 @@ describe("license-plate-lookup.vue", () => {
       //Assert
       expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
+  })
 });
 
-
-
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {
     router: {
       navigate: jest.fn(),
     },
-    licensePlate: "TESTPLATE",
-    registrationZip: "12345"
   },
 }) {
+  store.commit(storeMutations.RESET_STATE);
   //Mock api responses
   baseMixin.methods.dispatchStoreAction = jest.fn();
   const apiResponses = {
@@ -455,13 +542,16 @@ function setupMocks({
   settleAllPromises.mockImplementation(() => apiPromise);
   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-
   const mountOptions = getMountOptions(mountOptionsMockData);
   mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
 
   const wrapper = shallowMount(licensePlateLookup, mountOptions);
 
   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+  wrapper.vm.$refs.loadingModal.showModal = jest.fn();
 
   return { wrapper, apiPromise };
 }

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

@@ -220,13 +220,12 @@ export default {
       return store.getters.order.customer.emailAddress;
     },
     getServiceZipFromStore() {
-      return store.getters.order.serviceLocation.zip;
+      return store.getters.order.serviceLocation.zipCode;
     },
     backButtonAction() {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-
       //Call zip validation services
       const registrationZipValidationPromise = this.validateZip(this.registrationZip);
       const serviceZipValidationPromise = this.serviceZip ? this.validateZip(this.serviceZip) : null;
@@ -255,6 +254,7 @@ export default {
         this.isCarIdDifferent = false;
         return;
       });
+      
       this.isCarIdDifferent =
         vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
 

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

@@ -57,27 +57,7 @@ jest.mock("@/store", () => ({
 }));
 
 describe("vehicle-damage.vue", () => {
-  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+  describe("navigation", () => {
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
-
-    //Assert
-    expect(arePagePrerequisitesValid).toBe(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
     test("BackButtonAction triggers a router.navigate change", async () => {
 
       //Arrange
@@ -97,9 +77,7 @@ describe("vehicle-damage.vue", () => {
       expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
 
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("Replace several pieces of glass on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
       //Arrange
       const partsData = {
@@ -186,12 +164,11 @@ describe("vehicle-damage.vue", () => {
       expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
       expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("Windshield replace with multiple parts on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
       //Arrange
-    const partsData = { partsOrQuestions: [
+      const partsData = {
+        partsOrQuestions: [
           {
             glassLocation: "Windshield",
             glassName: "Single",
@@ -211,7 +188,8 @@ describe("vehicle-damage.vue", () => {
                 requiresCapabilityQuestions: false,
                 requiresRecalibration: false
               }
-        ]},
+            ]
+          },
           {
             glassName: "Stationary",
             glassLocation: "Rear",
@@ -235,7 +213,8 @@ describe("vehicle-damage.vue", () => {
             ],
             "partQuestions": null
           }
-      ]};
+        ]
+      };
 
       const { wrapper } = setupMocks({
         pageHeaderWidgetHeaderText: "",
@@ -276,9 +255,58 @@ describe("vehicle-damage.vue", () => {
       expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
       expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
     });
+
+
   });
 
-describe("vehicle-damage.vue", () => {
+  describe("alert", () => {
+    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+            }
+          }
+        }
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(true);
+    });
+
+    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+            }
+          }
+        }
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+    });
+
+    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
+            }
+          }
+        }
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+    })
+  });
+
+  describe("glass selections and corresponding variables", () => {
     test("isWindshieldDamageLocation is true when windshield is selected", async () => {
 
       //Arrange
@@ -297,9 +325,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("isSideDoorDamageLocation is true Side door is selected", async () => {
 
       //Arrange
@@ -318,10 +344,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
     });
-});
 
-
-describe("vehicle-damage.vue", () => {
     test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
 
       //Arrange
@@ -340,9 +363,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("isWindshieldRepair is true if windshield repair is selected", async () => {
 
       //Arrange
@@ -362,9 +383,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isWindshieldRepair).toEqual(true);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("isWindshieldRepair is false if windshield damage is not selected", async () => {
 
       //Arrange
@@ -384,9 +403,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isWindshieldRepair).toEqual(false);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("isDriverSideReplace is true if side door driver is selected", async () => {
 
       //Arrange
@@ -406,9 +423,7 @@ describe("vehicle-damage.vue", () => {
       //Assert
       expect(wrapper.vm.isDriverSideReplace).toEqual(true);
     });
-});
 
-describe("vehicle-damage.vue", () => {
     test("isPassengerSideReplace is true if side door passenger selected", async () => {
 
       //Arrange
@@ -430,7 +445,26 @@ describe("vehicle-damage.vue", () => {
     });
   });
 
-describe("vehicle-damage.vue", () => {
+  describe("state validations", () => {
+    test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+      await nextTick();
+
+      //Assert
+      expect(arePagePrerequisitesValid).toBe(true);
+    });
+
     test("Call invalidation, ResetPartsAndState should be called", async () => {
 
       //Arrange
@@ -452,11 +486,38 @@ describe("vehicle-damage.vue", () => {
     });
   });
 
+  describe("input validations", () => {
+    // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
+    //    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
+    test("when validation rules are set they should validate correctly", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+      const testNull = validate("", "replace-options-required");
+      const testString = validate("sldfj", "replace-options-required");
+
+      //Assert
+      testNull.then(function (data) {
+        expect(data.valid).toEqual(false);
+      });
+      testString.then(function (data) {
+        expect(data.valid).toEqual(true);
+      });
+    });
+  });
+
+  describe("get glass options from store", () => {
     const damageLocations = [["Windshield", [damageLocationsSelected.WINDSHIELD]],
     ["Driver", [damageLocationsSelected.SIDEDOOR]],
     ["Passenger", [damageLocationsSelected.SIDEDOOR]],
     ["Rear", [damageLocationsSelected.REARWINDOW]]];
-describe("vehicle-damage.vue", () => {
     test.each(damageLocations)("getDamageLocationsFromStore for %s returns expected %s", async (damageLocation, expectedGlass) => {
 
       //Arrange
@@ -476,20 +537,25 @@ describe("vehicle-damage.vue", () => {
 
       //Assert
       expect(glassSelections).toEqual(expectedGlass);
-
-  });
     });
 
-const storeWindshieldOptions = [[1, false, "Windshield", "Single", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+    const storeWindshieldOptions = [[1, false, "Windshield", "Single", {
-                                selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]}],
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
-                                [2, false, "Windshield", "Driver", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
-                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]}],
+    }],
-                                [3, false, "Windshield", "Passenger", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+    [2, false, "Windshield", "Driver", {
-                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]}],
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
-                                [4, true, "", "", { selectedWindshieldDamageType: [damageLocationsSelected.REPAIR], 
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
-                                  selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []}]
+    }],
+    [3, false, "Windshield", "Passenger", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
+    }],
+    [4, true, "", "", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPAIR],
+      selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []
+    }]
     ];
-describe("vehicle-damage.vue", () => {
     test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
 
       //Arrange
@@ -519,8 +585,6 @@ describe("vehicle-damage.vue", () => {
 
       //Assert
       expect(windshieldSelections).toEqual(expectedWindshieldOptions);
-
-  });
     });
 
     const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
@@ -528,7 +592,6 @@ const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
     ["Driver", "Vent", [damageLocationsSelected.VENT]],
     ["Driver", "Quarter", [damageLocationsSelected.QUARTER]]
     ];
-describe("vehicle-damage.vue", () => {
     test.each(driverDoorSides)("getDriverSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
 
       //Arrange
@@ -550,14 +613,12 @@ describe("vehicle-damage.vue", () => {
       expect(glassSelections).toEqual(expectedGlass);
 
     });
-});
 
     const passengerDoorSides = [["Passenger", "Front", [damageLocationsSelected.FRONT]],
     ["Passenger", "Back", [damageLocationsSelected.BACK]],
     ["Passenger", "Vent", [damageLocationsSelected.VENT]],
     ["Passenger", "Quarter", [damageLocationsSelected.QUARTER]]
     ];
-describe("vehicle-damage.vue", () => {
     test.each(passengerDoorSides)("getPassengerSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
 
       //Arrange
@@ -577,14 +638,11 @@ describe("vehicle-damage.vue", () => {
 
       //Assert
       expect(glassSelections).toEqual(expectedGlass);
-
-  });
     });
 
     const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
     ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
     ];
-describe("vehicle-damage.vue", () => {
     test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
 
       //Arrange
@@ -604,97 +662,52 @@ describe("vehicle-damage.vue", () => {
 
       //Assert
       expect(glassSelections).toEqual(expectedGlass);
-
     });
+  })
+
+  describe("hide back button", () => {
+    test("if claim registration is delayed => should hide back button", () => {
+      // Arrange
+      const { wrapper } = setupMocks({
+        funnelCookie: {
+          HasDelayedClaimRegistration: true
+        }
       });
 
-describe("vehicle-damage.vue", () => {
+      // Assert
-  test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+      expect(wrapper.vm.shouldHideBackButton).toBe(true);
-    // Arrange & Act
+    });
+
+    test("if claim is verified => should hide back button", () => {
+      // Arrange
       const { wrapper } = setupMocks({
         mountOptionsMockData: {
-        route: {
+          router: { navigateAfterSave: jest.fn(), },
-          params: {
+          actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: {}, },],
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+          store: {
-          }
+            getters: {
-        }
+              vehicle: {},
-      }
+              payment: { insuranceCoverage: { isVerified: true } },
-    });
+            },
-    // Assert
+          },
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true);
+        },
       })
-});
 
-describe("vehicle-damage.vue", () => {
-  test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
-    // Arrange & Act
-    const { wrapper } = setupMocks({
-      mountOptionsMockData: {
-        route: {
-          params: {
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
-          }
-        }
-      }
-    });
       // Assert
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
+      expect(wrapper.vm.shouldHideBackButton).toBe(true);
     })
-});
-
-describe("vehicle-damage.vue", () => {
-  test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
-    // Arrange & Act
-    const { wrapper } = setupMocks({
-      mountOptionsMockData: {
-        route: {
-          params: {
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
-          }
-        }
-      }
-    });
-    // Assert
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
-  })
-});
-
-describe("vehicle-damage.vue wasDelayedClaimRegistration", () => {
-  test.todo("if wasDelayedClaimRegistration, should hide back button")
-});
-
-// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
-//    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
-// 
-describe("vehicle-damage.vue", () => {
-  test("when validation rules are set they should validate correctly", async () => {
 
+    test("if claim isn't verified yet => allow user to go back", () => {
       // Arrange
       const { wrapper } = setupMocks({});
 
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-    const testNull = validate( "", "replace-options-required");
-    const testString = validate( "sldfj", "replace-options-required");
-
       // Assert
-    testNull.then(function(data) {
+      expect(wrapper.vm.shouldHideBackButton).toBeFalsy();
-      expect(data.valid).toEqual(false);
+    })
-    });
-    testString.then(function(data) {
-      expect(data.valid).toEqual(true);
-    });
-
   });
 });
 
-
+function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCookie = {} }) {
-function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
   var pageHeaderWidgetHeaderTextDefault = {};
   var mountOptionsMockDataDefault = {
     router: {
@@ -751,7 +764,7 @@ function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
 
   settleAllPromises.mockImplementation(() => apiPromise);
   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-  cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue({});
+  cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue(funnelCookie);
 
   //Mock damage initialize methods
   damageLocationQuestion.methods = {

src/mixins/analytics-mixin.js

@@ -1,18 +1,17 @@
 import { storeActions } from "@/constants/store-actions";
-import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
+import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { experimentSettings } from "@/constants/experiments";
 import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { cookieNames } from "@/constants/cookie-names";
 
 import baseMixin from "@/mixins/base-mixin";
 
 export default {
   methods: {
     logPageView(pageEvent) {
-      // if the user does not have a session id from the content site, do not log.
+      if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
-      const sid = getSessionIdValue();
+        this.initSession();
-      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
-        return;
       }
 
       const currentPageName = getPageNameByQueryString();
@@ -20,38 +19,59 @@ export default {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: sid,
+        sessionId: getSessionIdValue(),
         action: '', 
         event: pageEvent,
-        shouldUseSessionId: true,
+        shouldUseSessionId: false,
       };
 
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
     },
 
     logCustomEvent(category, action, label, value) {
-      // if the user does not have a session id from the content site, do not log.
+      if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
-      const sid = getSessionIdValue();
+        this.initSession();
-      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
-        return;
       }
 
       const currentPageName = getPageNameByQueryString();
+
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: sid,
+        sessionId: getSessionIdValue(),
         category: category, 
         action: action,
         label: label,
         value: value,
-        shouldUseSessionId: true,
+        shouldUseSessionId: false,
       };
 
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
+    async initSession() {
+      const sid = getSessionIdValue();
+      const skey = getSessionKeyValue();
+      var payload = {
+        userId: getDeviceIdValue(),
+        sessionId: sid,
+        userAgent: navigator.userAgent,
+        referrer: document.referrer,
+      };
+
+      const response = await baseMixin.methods.dispatchStoreAction(storeActions.INITIALIZE_SESSION, payload, false);
+      
+      if (response.data) {
+        if (response.data.sessionKey && skey === 0) {
+          setCookieProperties({ [cookieNames.SESSION_KEY]: response.data.sessionKey});
+        }
+        if (response.data.sessionId && sid === '00000000-0000-0000-0000-000000000000') {
+          setCookieProperties({ [cookieNames.SESSION_ID]: response.data.sessionId});
+        }
+      }
+    },
+
     pushEventToGA(category, action, label, pushToLogApp = false) {
       const currentPageName = getPageNameByQueryString();
       const eventToBePushed = {

src/mixins/analytics-mixin.spec.js

@@ -1,6 +1,7 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
 
 describe("analyticsMixin.js", () => {
   test("logPageView: calls dispatch with type and payload", () => {
@@ -26,9 +27,6 @@ describe("analyticsMixin.js", () => {
   });
 
   test("logCustomEvent: calls dispatch with type and payload", () => {
-    const type = "";
-    const payload = {};
-
     const mockData = {
       actionList: [{
         actionName: storeActions.LOG_CUSTOM_EVENT
@@ -36,7 +34,7 @@ describe("analyticsMixin.js", () => {
     }
     const mocks = setupMocksForJsFiles(mockData);
 
-    analyticsMixin.methods.logCustomEvent(type, payload);
+    analyticsMixin.methods.logCustomEvent("someCat", "someAction", "someLabel", "someVal");
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
@@ -126,4 +124,37 @@ describe("analyticsMixin.js", () => {
     //Assert
     expect(obj!=null); 
   });
+
+  test("analyticsPageEvents returns constants analyticsPageEvents", () => {
+    //Act
+    const analyticsPE = analyticsMixin.computed.analyticsPageEvents();
+
+    //Assert
+    expect(analyticsPE).toEqual(analyticsPageEvents);
+  });
+
+  test("GaActions returns constants GaActions", () => {
+    //Act
+    const gaActions = analyticsMixin.computed.GaActions();
+
+    //Assert
+    expect(gaActions).toEqual(GaActions);
+  });
+
+  test("GaCategories returns constants GaCategories", () => {
+    //Act
+    const gaCategories = analyticsMixin.computed.GaCategories();
+
+    //Assert
+    expect(gaCategories).toEqual(GaCategories);
+  });
+
+  test("GaLabels returns constants GaLabels", () => {
+    //Act
+    const gaLabels = analyticsMixin.computed.GaLabels();
+
+    //Assert
+    expect(gaLabels).toEqual(GaLabels);
+  });
+
 });

src/mixins/base-mixin.js

@@ -45,7 +45,7 @@ export default {
     getFooterInfoBoxHeight() {
       const footerInfoBox = document.querySelector(".footer#infoBox");
       return footerInfoBox ? footerInfoBox.offsetHeight : 0;
-    }
+    },
   },
   computed: {
     storeActions() {

src/store/index.js

@@ -509,6 +509,26 @@ export const actions = {
     });
   },
 
+  initializeSession(context, { userId, sessionId, userAgent, referrer }) {
+    var payload = {
+      applicationName: 'SafeliteDotCom',
+      userId: userId,
+      deviceId: userId,
+      sessionId: sessionId,
+      userAgent: userAgent,
+      operatorId: "WEB",
+      userName: "SafeliteConceptFunnel",
+      referrer: referrer
+    };
+
+    return globalMethods.callHttpClient({
+      method: endpoints.InitializeSession.method,
+      endpoint: endpoints.InitializeSession.url,
+      payload: payload,
+      logApiCall: false
+    });
+  },
+
   GetExperimentsByUser(context, { userId }){
     return globalMethods.callHttpClient({
       method: endpoints.GetExperimentsByUser.method,

src/store/store.spec.js

@@ -642,7 +642,7 @@ describe("Actions", () => {
     });
 
     // Assert
-    const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true });
+    const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: false });
     expect(response).toEqual({});
   });
 
@@ -663,7 +663,22 @@ describe("Actions", () => {
     });
 
     // Assert
-    const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true });
+    const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: false });
+    expect(response).toEqual({});
+  });
+
+  it("initializeSession action, should return nothing", async () => {
+
+    // Arrange
+    const context = state;
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({  });
+    });
+
+    // Assert
+    const response = await actions.initializeSession(context, { userId: "userId", sessionId: "", userAgent: "", referrer: "", shouldUseSessionId: false });
     expect(response).toEqual({});
   });
 

src/styles/common-styles.scss

@@ -47,4 +47,14 @@ body {
   .page-container-grouped-styles {
     @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
   }
+
+  //Footer modal backdrop adjustments for positioning
+  .modal-backdrop {
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 576px;
+    height: calc(100% - 152px);
+    top: 72px;
+  }
+
 }

src/styles/ux-variables.scss

@@ -180,3 +180,7 @@ $box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
 $alert-bg-scale:                -90%;
 $alert-border-scale:            -100%;
 $alert-color-scale:             40%;
+
+//Modal animation
+$modal-fade-transform:              translate(0, 0);
+$modal-backdrop-opacity:            0;