From a3c3b0b3009766a6b9ea7388a89ecb8bc111eac7 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 26 Jan 2023 15:02:16 -0500
Subject: [PATCH 01/13] start of address-vehicles page

---
 .../address-vehicles-question.vue             |  82 ++++++
 .../address-vehicles/address-vehicles.vue     | 271 +++++++++++++++---
 src/router/router-constants/routing-table.js  |   9 +
 3 files changed, 318 insertions(+), 44 deletions(-)
 create mode 100644 src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
new file mode 100644
index 00000000..538ee298
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -0,0 +1,82 @@
+<template>
+    <buttonQuestion
+        class="address-vehicles-question"
+        buttonTypeString="listButton"
+        groupName="ChooseAddressVehicle"
+        :questionText="questionText"
+        :answers="vehicles"
+        v-model="selectedVehicleVin"
+        isRequired
+        :validation-rules="validationRules"
+        :valueToLogType="ValueToLogTypes.LAST_5" />
+    <alert
+        ref="differentVehicleAlert"
+        v-if="isCarIdDifferent"
+        class="my-3"
+        cmsWidgetName="FoundWindshield"
+        :manualHeadline="differentVehicleAlertHeader"
+        :manualCopy="differentVehicleAlertBody"
+        alertClass="alert-warning"
+        v-bind:isDismissible="false" />
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import alert from "@/ux-components/alert/alert";
+// Supporting files
+import { getDamageString } from "@/helpers/damage-helper";
+export default {
+    name: "address-vehicles-question",
+    props: {
+        vehicles: Array,
+        modelValue: String,
+        cmsWidgetName: String,
+        validationRules: String,
+        isCarIdDifferent: Boolean,
+    },
+    computed: {
+        differentVehicleAlertHeader() {
+            return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
+                "{custom:damage}",
+                getDamageString()
+            );
+        },
+        differentVehicleAlertBody() {
+            return this.getCmsContent("FoundWindshield", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinlookupYear}", this.selectedVehicle?.vehicle.year)
+                .replaceAll("{custom:vinlookupMake}", this.selectedVehicle?.vehicle.make)
+                .replaceAll("{custom:vinlookupModel}", this.selectedVehicle?.vehicle.model);
+        },
+        questionText() {
+            return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
+        },
+        selectedVehicleVin: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        selectedVehicle() {
+            // this computed is only needed for the computed differentVehicleAlertBody text above
+            return this.vehicles.find(({ vin }) => vin === this.selectedVehicleVin);
+        },
+    },
+    components: {
+        buttonQuestion,
+        alert,
+    },
+};
+</script>
+<style lang="scss">
+.address-vehicles-question {
+    .question-text {
+        margin-bottom: 0.5rem;
+        & > span {
+            text-align: left;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index b6e1835b..99cf1e58 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -2,66 +2,111 @@
   <Form
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
+    ref="theForm"
     v-slot="{ meta }"
   >
     <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-      />
+      <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
       />
-      <siteSubHeader
-        cmsWidgetName="SiteSubHeaderWidget"
+      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+      <alert
+        cmsWidgetName="FoundMultipleVehicles"
+        ref="alertFoundMultipleVehicles"
+        class="my-5"
+        alertClass="alert-warning"
+        :manualHeadline="AlertFoundMultipleVehiclesHeader"
+        manualCopy=""
+        v-bind:isDismissible="false"
       />
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <p>Placeholder for address-vehicles page</p>
-
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
+      <alert
+        cmsWidgetName="FoundWindshield"
+        ref="alertFoundWindshield"
+        class="my-5"
+        alertClass="alert-warning"
+        :manualHeadline="AlertFoundWindshieldHeader"
+        :manualCopy="AlertFoundWindshieldBody"
+        v-bind:isDismissible="false"
+      />
+      <addressVehiclesQuestion
+        ref="addressVehiclesQuestion"
+        cmsWidgetName="VehicleConfirmationQuestion"
+        :vehicles="VehiclesForQuestions"
+        validationRules="vehicle-required"
+        v-model="selectedVehicleVin"
+        :isCarIdDifferent="isCarIdDifferent"
+      />
+      <div
+        class="alert-provide-vin my-3"
+        v-if="splitAlertProvideVinBodyForLink.length"
+      >
+        <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
+          <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
+            <router-link
+              :to="{
+                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                name: 'root',
+              }"
+              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
+            >
+          </span>
+          <span v-else class="m-0 text-body" v-html="copy"></span>
+        </span>
       </div>
+      <siteFooter
+        cmsWidgetName="SiteFooterWidget"
+        :isForwardActionDisabled="!meta.valid"
+        @backClicked="backButtonAction"
+        @forwardClicked="forwardButtonAction"
+        ref="siteFooter"
+      />
     </div>
   </Form>
 </template>
+
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { settleAllPromises } from '@/helpers/layout-helper';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { useMainStore } from "@/store";
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import {
+  doesCopyContainRouterLink,
+  splitCopyOnCMSPlaceHolder,
+  getRouterLinkRouteFromCopy,
+  getRouterLinkDisplayTextFromCopy,
+} from "@/helpers/cms-content-helper";
+import { routerParams } from "@/router/router-constants/router-params";
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
 
 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
-import { Form } from 'vee-validate';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import baseFormMixin from "@/mixins/base-form-mixin";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import alert from "@/ux-components/alert/alert";
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+
+// DEFINE VALIDATION RULES
+defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED));
 
 export default {
-  name: 'capability-questions',
-  mixins: [baseFormMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    vehicleBanner,    
-  },  
-  data() {
-    return {};
-  },  
+  name: "address-vehicles",
+  mixins: [baseFormMixin, vinPagesMixin],
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: 'cmsContent',
+        resultKey: "cmsContent",
         promise: cmsContentPromise,
       },
     ];
@@ -72,18 +117,156 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  props: {
+    validationRules: String,
+  },
+  data() {
+    return {
+      selectedVehicleVin: "",
+      isCarIdDifferent: false,
+      isSelectedGlassAvailableForVehicle: true,
+    };
+  },
+  computed: {
+    vehicleCount() {
+      return this.VehiclesForQuestions.length;
+    },
+    AlertFoundMultipleVehiclesHeader() {
+      return this.getCmsContent("FoundMultipleVehicles", "HeadlineText")
+      .replaceAll("{custom:vehicleCount}", this.vehicleCount);
+    },
+    AlertFoundWindshieldHeader() {
+      return this.getCmsContent("FoundWindshield", "HeadlineText")
+      .replaceAll("{custom:vehicleCount}", this.vehicleCount);
+    },
+    AlertFoundWindshieldBody() {
+      return this.getCmsContent("FoundWindshield", "BodyText")
+        .replaceAll("{custom:vinlookupYear}", this.vehicleCount)
+        .replaceAll("{custom:vinlookupMake}", this.vehicleCount)
+        .replaceAll("{custom:vinlookupModel}", this.vehicleCount);
+    },
+    AlertProvideVinBody() {
+      return this.getCmsContent("ProvideVinAlert", "BodyText");
+    },
+    splitAlertProvideVinBodyForLink() {
+      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+      return this.splitCopyOnCMSPlaceHolder(this.AlertProvideVinBody);
+    },
+    VehiclesForQuestions() {
+      // Map API result data, to address-vehicles data structure
+      const mappedData = this.VehiclesFromApi.map((v) => {
+        const maskSymbol = "X";
+        const vinStart = maskSymbol.repeat(v.vin.length - 6);
+        const vinEnd = v.vin.substring(v.vin.length - 6);
+        return {
+          vin: v.vin,
+          vehicle: v.vehicle,
+          Text: v.vehicle.year + " " + v.vehicle.make + " " + v.vehicle.model,
+          Name: v.vin,
+          SubText: "VIN " + vinStart + vinEnd,
+        };
+      });
+      return mappedData;
+    },
+    VehiclesFromApi() {
+      return useMainStore().pageData(issPageValues.ADDRESS_VEHICLES);
+    },
+    selectedVehicle() {
+      return this.VehiclesForQuestions.find(
+        ({ vin }) => vin === this.selectedVehicleVin
+      );
+    },
+  },
   methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    doesCopyContainRouterLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+    arePagePrerequisitesValid() {
+      if (
+        useMainStore().order.vehicle.carId &&
+        useMainStore().order.serviceLocation.zipCode &&
+        useMainStore().order.customer.emailAddress &&
+        useMainStore().getters.pageData(issPageValues.ADDRESS_VEHICLES)
+      ) {
+        return true;
+      }
+      return false;
     },
     backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
     },
-    async forwardButtonAction() {},    
-    resetDependentState() {},
+    async forwardButtonAction() {
+      const vinLookup = await this.dispatchStoreAction(
+        storeActions.LOOKUP_VEHICLE_BY_VIN,
+        {
+          vin: this.selectedVehicle.vin,
+        }
+      ).catch(() => {
+        this.$refs.siteFooter.removeLoader();
+      });
+      if (!vinLookup) {
+        return;
+      }
+      this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+        vinLookup.data.carId
+      );
+      await this.dispatchStoreAction(
+        storeActions.SAVE_VIN,
+        {
+          vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
+            vin: this.selectedVehicle.vin,
+          }),
+          isSelectedGlassAvailableForVehicle:
+            this.isSelectedGlassAvailableForVehicle,
+        },
+        false
+      );
+      return await this.navigateForward();
+    },
+    async navigateForward() {
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+        this.$router.navigateWithSaving(
+          this.navigationScenarios.CLICKED_FORWARD,
+          this.$route,
+          {},
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+        );
+      } else {
+        await this.navigateForwardWithSingleCarMatch();
+      }
+    },
+  },
+  watch: {
+    selectedVehicleVin: {
+      handler() {
+        // does this vehicle match the previously selected carId?
+        this.isCarIdDifferent =
+          this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId;
+        if (this.isCarIdDifferent) {
+          this.$refs.siteFooter.updateButtonText(
+            `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
+          );
+        } else {
+          this.$refs.siteFooter.updateButtonText(
+            this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+          );
+        }
+      },
+      deep: true,
+    },
+  },
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    Form,
+    vehicleBanner,
+    alert,
+    addressVehiclesQuestion,
   },
 };
 </script>
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 2e2c9d19..566457d1 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -321,6 +321,15 @@ const routingTable = function(store) {
           },
       ],
     },
+    {
+      issPageValue: issPageValues.ADDRESS_VEHICLES,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_BACK,
+              destinationIssPageValue: issPageValues.ADDRESS_LOOKUP,
+          },
+      ],
+    },
     {
       issPageValue: issPageValues.WELCOME_PAGE,
       maps: [

From 962dadf78f76ee079a274d066d21ece164833b5d Mon Sep 17 00:00:00 2001
From: "US\\katie.kroell" <katie.kroell@safelite.com>
Date: Thu, 26 Jan 2023 16:55:39 -0500
Subject: [PATCH 02/13] EOD commit - address-vehicles

---
 .../address-vehicles/address-vehicles.vue     | 52 ++++++-------------
 src/router/router-constants/routing-table.js  | 24 +++++++++
 src/store/index.js                            | 13 +++++
 3 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 99cf1e58..9d61a08e 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -21,15 +21,6 @@
         manualCopy=""
         v-bind:isDismissible="false"
       />
-      <alert
-        cmsWidgetName="FoundWindshield"
-        ref="alertFoundWindshield"
-        class="my-5"
-        alertClass="alert-warning"
-        :manualHeadline="AlertFoundWindshieldHeader"
-        :manualCopy="AlertFoundWindshieldBody"
-        v-bind:isDismissible="false"
-      />
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
         cmsWidgetName="VehicleConfirmationQuestion"
@@ -46,7 +37,7 @@
           <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
             <router-link
               :to="{
-                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                 name: 'root',
               }"
               >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
@@ -132,18 +123,10 @@ export default {
       return this.VehiclesForQuestions.length;
     },
     AlertFoundMultipleVehiclesHeader() {
-      return this.getCmsContent("FoundMultipleVehicles", "HeadlineText")
-      .replaceAll("{custom:vehicleCount}", this.vehicleCount);
-    },
-    AlertFoundWindshieldHeader() {
-      return this.getCmsContent("FoundWindshield", "HeadlineText")
-      .replaceAll("{custom:vehicleCount}", this.vehicleCount);
-    },
-    AlertFoundWindshieldBody() {
-      return this.getCmsContent("FoundWindshield", "BodyText")
-        .replaceAll("{custom:vinlookupYear}", this.vehicleCount)
-        .replaceAll("{custom:vinlookupMake}", this.vehicleCount)
-        .replaceAll("{custom:vinlookupModel}", this.vehicleCount);
+      return this.getCmsContent(
+        "FoundMultipleVehicles",
+        "HeadlineText"
+      ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
     },
     AlertProvideVinBody() {
       return this.getCmsContent("ProvideVinAlert", "BodyText");
@@ -194,17 +177,11 @@ export default {
       return false;
     },
     backButtonAction() {
-      this.$router.navigate(
-        this.navigationScenarios.CLICKED_BACK,
-        this.$route
-      );
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const vinLookup = await this.dispatchStoreAction(
-        storeActions.LOOKUP_VEHICLE_BY_VIN,
-        {
-          vin: this.selectedVehicle.vin,
-        }
+      const vinLookup = await useMainStore().lookupVehicleByVin(
+        this.selectedVehicle.vin,
       ).catch(() => {
         this.$refs.siteFooter.removeLoader();
       });
@@ -214,9 +191,7 @@ export default {
       this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
         vinLookup.data.carId
       );
-      await this.dispatchStoreAction(
-        storeActions.SAVE_VIN,
-        {
+      await useMainStore().saveVin({
           vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
             vin: this.selectedVehicle.vin,
           }),
@@ -225,12 +200,15 @@ export default {
         },
         false
       );
-      return await this.navigateForward();
+
+      return await this.navigateForwardWithSingleCarMatch();
     },
     async navigateForward() {
+      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available 
+      // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
       if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-        this.$router.navigateWithSaving(
-          this.navigationScenarios.CLICKED_FORWARD,
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
           this.$route,
           {},
           { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 566457d1..342ef39a 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -328,6 +328,30 @@ const routingTable = function(store) {
               scenario: navigationScenarios.CLICKED_BACK,
               destinationIssPageValue: issPageValues.ADDRESS_LOOKUP,
           },
+          {
+            scenario: navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+            destinationIssPageValue: issPageValues.VEHICLE_DAMAGE,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
+            destinationIssPageValue: issPageValues.PART_QUESTIONS,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+            destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+            destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+            destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+          },
+          {
+            scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+            destinationIssPageValue: issPageValues.COVERAGE_STATEMENT,
+          },
       ],
     },
     {
diff --git a/src/store/index.js b/src/store/index.js
index 56b11746..9961442c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -896,7 +896,20 @@ export const useMainStore = defineStore({
             this.updateRegistration(registrationInfo);
         }
       },
+      saveVin({ isSelectedGlassAvailableForVehicle, vehicleInfo }) {
+        //Reset dependent state when changing
+        if (vehicleInfo.vin !== this.order.vehicle.vin) {
+          this.resetRegistrationAndDependencies();
 
+          if (!isSelectedGlassAvailableForVehicle) {
+            this.resetDamageAndDependencies();
+            this.resetPartsAndDependencies();
+
+            //Save new values
+            this.updateVehicle(vehicleInfo);
+          }
+        }
+      },
       saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
         //Reset dependent state when changing
         if 

From 3b0245833510c9a2fcb74f0f2e8f0a593b47780a Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 30 Jan 2023 16:43:43 -0500
Subject: [PATCH 03/13] commit - update to navigation

---
 src/layouts/address-vehicles/address-vehicles.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 9d61a08e..c65c9547 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -201,7 +201,7 @@ export default {
         false
       );
 
-      return await this.navigateForwardWithSingleCarMatch();
+      return await this.navigateForward();
     },
     async navigateForward() {
       // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available 
@@ -211,7 +211,7 @@ export default {
           this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
           this.$route,
           {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true },
         );
       } else {
         await this.navigateForwardWithSingleCarMatch();

From c195cd9778967d8c2e4c545a1e828961fbd2c1ee Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 31 Jan 2023 11:22:24 -0500
Subject: [PATCH 04/13] styling fix, update to store method

---
 .../address-vehicles/address-vehicles.vue       | 17 +++++++++++++++++
 src/store/index.js                              |  6 +++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index c65c9547..59f1d903 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -20,6 +20,7 @@
         :manualHeadline="AlertFoundMultipleVehiclesHeader"
         manualCopy=""
         v-bind:isDismissible="false"
+        id="multiple-vehicles-alert"
       />
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
@@ -248,3 +249,19 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.alert-provide-vin {
+    font-size: 0.875rem;
+    line-height: 1.4;
+    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
+    a {
+        text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
+        line-height: inherit;
+    }
+}
+
+#multiple-vehicles-alert p {
+  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
+}
+</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 9961442c..372c0935 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -904,10 +904,10 @@ export const useMainStore = defineStore({
           if (!isSelectedGlassAvailableForVehicle) {
             this.resetDamageAndDependencies();
             this.resetPartsAndDependencies();
-
-            //Save new values
-            this.updateVehicle(vehicleInfo);
           }
+          
+          //Save new values
+          this.updateVehicle(vehicleInfo);
         }
       },
       saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {

From d2c09c6be3f7e2cf9d1beb3047d4eff020b85ae9 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 31 Jan 2023 14:04:46 -0500
Subject: [PATCH 05/13] move alert from bottom of page

---
 .../address-vehicles/address-vehicles.vue     | 67 +++++++++++++------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 59f1d903..2d22b2d0 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -20,7 +20,18 @@
         :manualHeadline="AlertFoundMultipleVehiclesHeader"
         manualCopy=""
         v-bind:isDismissible="false"
-        id="multiple-vehicles-alert"
+        id="address-vehicles-alert"
+      />
+      <alert
+        cmsWidgetName="FoundWindshield"
+        ref="alertFoundWindshield"
+        class="my-4"
+        alertClass="alert-warning"
+        :manualHeadline="AlertFoundWindshieldHeader"
+        :manualCopy="AlertFoundWindshieldBody"
+        v-if="isCarIdDifferent"
+        v-bind:isDismissible="false"
+        id="address-vehicles-alert"
       />
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
@@ -28,7 +39,6 @@
         :vehicles="VehiclesForQuestions"
         validationRules="vehicle-required"
         v-model="selectedVehicleVin"
-        :isCarIdDifferent="isCarIdDifferent"
       />
       <div
         class="alert-provide-vin my-3"
@@ -67,7 +77,10 @@ import { issPageValues } from "@/router/router-constants/issPage-values";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
-import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import {
+  getDamageString,
+  isGlassAvailableForCarId,
+} from "@/helpers/damage-helper";
 import {
   doesCopyContainRouterLink,
   splitCopyOnCMSPlaceHolder,
@@ -129,6 +142,22 @@ export default {
         "HeadlineText"
       ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
     },
+    AlertFoundWindshieldHeader() {
+      return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
+        "{custom:damage}",
+        getDamageString()
+      );
+    },
+    AlertFoundWindshieldBody() {
+      return this.getCmsContent(
+        "FoundWindshield",
+        "BodyText"
+      )
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinlookupYear}", this.selectedVehicle.vehicle.year)
+        .replaceAll("{custom:vinlookupMake}", this.selectedVehicle.vehicle.make)
+        .replaceAll("{custom:vinlookupModel}", this.selectedVehicle.vehicle.model)
+    },
     AlertProvideVinBody() {
       return this.getCmsContent("ProvideVinAlert", "BodyText");
     },
@@ -181,18 +210,19 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const vinLookup = await useMainStore().lookupVehicleByVin(
-        this.selectedVehicle.vin,
-      ).catch(() => {
-        this.$refs.siteFooter.removeLoader();
-      });
+      const vinLookup = await useMainStore()
+        .lookupVehicleByVin(this.selectedVehicle.vin)
+        .catch(() => {
+          this.$refs.siteFooter.removeLoader();
+        });
       if (!vinLookup) {
         return;
       }
       this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
         vinLookup.data.carId
       );
-      await useMainStore().saveVin({
+      await useMainStore().saveVin(
+        {
           vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
             vin: this.selectedVehicle.vin,
           }),
@@ -205,14 +235,14 @@ export default {
       return await this.navigateForward();
     },
     async navigateForward() {
-      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available 
+      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available
       // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
       if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
         this.$router.navigate(
           this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
           this.$route,
           {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true },
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
         );
       } else {
         await this.navigateForwardWithSingleCarMatch();
@@ -252,16 +282,15 @@ export default {
 
 <style lang="scss">
 .alert-provide-vin {
-    font-size: 0.875rem;
-    line-height: 1.4;
-    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
-    a {
-        text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
-        line-height: inherit;
-    }
+  font-size: 0.875rem;
+  line-height: 1.4;
+  a {
+    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
+    line-height: inherit;
+  }
 }
 
-#multiple-vehicles-alert p {
+#address-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
 }
 </style>
\ No newline at end of file

From 91f2a31d6b4cb74783040223ab50ec01aca9d950 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 31 Jan 2023 14:18:51 -0500
Subject: [PATCH 06/13] changes to alert

---
 .../address-vehicles-question.vue             | 22 ++++++-----
 .../address-vehicles/address-vehicles.vue     | 39 +++----------------
 2 files changed, 18 insertions(+), 43 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
index 538ee298..bf89ece0 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -1,4 +1,14 @@
 <template>
+    <alert
+        ref="differentVehicleAlert"
+        v-if="isCarIdDifferent"
+        class="my-4"
+        cmsWidgetName="FoundWindshield"
+        :manualHeadline="differentVehicleAlertHeader"
+        :manualCopy="differentVehicleAlertBody"
+        alertClass="alert-warning"
+        v-bind:isDismissible="false"
+        id="address-vehicles-question-alert" />
     <buttonQuestion
         class="address-vehicles-question"
         buttonTypeString="listButton"
@@ -9,15 +19,6 @@
         isRequired
         :validation-rules="validationRules"
         :valueToLogType="ValueToLogTypes.LAST_5" />
-    <alert
-        ref="differentVehicleAlert"
-        v-if="isCarIdDifferent"
-        class="my-3"
-        cmsWidgetName="FoundWindshield"
-        :manualHeadline="differentVehicleAlertHeader"
-        :manualCopy="differentVehicleAlertBody"
-        alertClass="alert-warning"
-        v-bind:isDismissible="false" />
 </template>
 
 <script>
@@ -79,4 +80,7 @@ export default {
         }
     }
 }
+#address-vehicles-question-alert p {
+    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+}
 </style>
\ No newline at end of file
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 2d22b2d0..d7c28942 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -20,18 +20,7 @@
         :manualHeadline="AlertFoundMultipleVehiclesHeader"
         manualCopy=""
         v-bind:isDismissible="false"
-        id="address-vehicles-alert"
-      />
-      <alert
-        cmsWidgetName="FoundWindshield"
-        ref="alertFoundWindshield"
-        class="my-4"
-        alertClass="alert-warning"
-        :manualHeadline="AlertFoundWindshieldHeader"
-        :manualCopy="AlertFoundWindshieldBody"
-        v-if="isCarIdDifferent"
-        v-bind:isDismissible="false"
-        id="address-vehicles-alert"
+        id="multiple-vehicles-alert"
       />
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
@@ -39,6 +28,7 @@
         :vehicles="VehiclesForQuestions"
         validationRules="vehicle-required"
         v-model="selectedVehicleVin"
+        :isCarIdDifferent="isCarIdDifferent"
       />
       <div
         class="alert-provide-vin my-3"
@@ -77,10 +67,7 @@ import { issPageValues } from "@/router/router-constants/issPage-values";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
-import {
-  getDamageString,
-  isGlassAvailableForCarId,
-} from "@/helpers/damage-helper";
+import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
 import {
   doesCopyContainRouterLink,
   splitCopyOnCMSPlaceHolder,
@@ -142,22 +129,6 @@ export default {
         "HeadlineText"
       ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
     },
-    AlertFoundWindshieldHeader() {
-      return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
-        "{custom:damage}",
-        getDamageString()
-      );
-    },
-    AlertFoundWindshieldBody() {
-      return this.getCmsContent(
-        "FoundWindshield",
-        "BodyText"
-      )
-        .replaceAll("{custom:damage}", getDamageString())
-        .replaceAll("{custom:vinlookupYear}", this.selectedVehicle.vehicle.year)
-        .replaceAll("{custom:vinlookupMake}", this.selectedVehicle.vehicle.make)
-        .replaceAll("{custom:vinlookupModel}", this.selectedVehicle.vehicle.model)
-    },
     AlertProvideVinBody() {
       return this.getCmsContent("ProvideVinAlert", "BodyText");
     },
@@ -290,7 +261,7 @@ export default {
   }
 }
 
-#address-vehicles-alert p {
-  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
+#multiple-vehicles-alert p {
+  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
 </style>
\ No newline at end of file

From 4bcfed0c887a0c401b2aab90c23af1d74359a4c1 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Wed, 1 Feb 2023 14:51:44 -0500
Subject: [PATCH 07/13] unit test for address-vehicles-question

---
 .../address-vehicles-question.spec.js         | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
new file mode 100644
index 00000000..7dd36b04
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
@@ -0,0 +1,78 @@
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("address-vehicles-question.vue", () => {
+    test("Selected vehicle is emitted upon selection", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({ modelValueProp: "2020 Audi A6" });
+        const vehicleToSelect = "2016 Jaguar F-Type";
+
+        //Act
+        wrapper.setValue({ selectedVehicle: vehicleToSelect });
+        await wrapper.vm.$nextTick();
+
+        //Assert
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+            { selectedVehicle: "2016 Jaguar F-Type" },
+        ]);
+    });
+    test("Should return content for differentVehicleAlertHeader", () => {
+        // Arrange
+        const wrapper = shallowMount(addressVehiclesQuestion, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.differentVehicleAlertHeader).toEqual("FoundWindshieldTestReturn");
+    });
+    test("Should return content for differentVehicleAlertBody", () => {
+        // Arrange
+        const wrapper = shallowMount(addressVehiclesQuestion, {
+            mixins: [mockMixin],
+            propsData: {
+                vehicles: ["1", "2"],
+                modelValue: ["1", "2"],
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.differentVehicleAlertBody).toEqual("FoundWindshieldTestReturn");
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((contentName) => {
+            if (contentName === "FoundWindshield") {
+                return "FoundWindshieldTestReturn";
+            }
+            return null;
+        }),
+        vehicles: jest.fn(() => {
+            return [{ vehicle: "test" }];
+        }),
+    },
+};
+
+function setupMocks({
+    modelValueProp = "TESTCAR",
+    cmsQuestionText = "CMS text goes here",
+    dataFromStoreApi = [],
+}) {
+    
+    const mountOptions = getMountOptions();
+
+    //Mock props
+    mountOptions.propsData = {
+        modelValue: modelValueProp,
+    };
+
+    const wrapper = shallowMount(addressVehiclesQuestion, mountOptions);
+
+    //Mock CMS content
+    const cmsContent = {
+        QuestionText: cmsQuestionText,
+    };
+    return { wrapper, cmsContent };
+}
\ No newline at end of file

From 4ddb9b6047216bd0acb0497b62cdb8c0d8eff4e7 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Wed, 1 Feb 2023 14:52:09 -0500
Subject: [PATCH 08/13] updates for unit testing

---
 .../address-vehicles-question/address-vehicles-question.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
index bf89ece0..0ab1512e 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -11,14 +11,14 @@
         id="address-vehicles-question-alert" />
     <buttonQuestion
         class="address-vehicles-question"
+        ref="addressVehiclesQuestion"
         buttonTypeString="listButton"
         groupName="ChooseAddressVehicle"
         :questionText="questionText"
         :answers="vehicles"
         v-model="selectedVehicleVin"
         isRequired
-        :validation-rules="validationRules"
-        :valueToLogType="ValueToLogTypes.LAST_5" />
+        :validation-rules="validationRules" />
 </template>
 
 <script>

From 78fa90a6cf54820b9265f8a7d4af8a741f32c755 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Wed, 1 Feb 2023 16:50:41 -0500
Subject: [PATCH 09/13] EOD commit - updates to unit tests

---
 .../address-vehicles-question.spec.js         |   1 -
 .../address-vehicles/address-vehicles.spec.js | 171 ++++++++++++++++++
 2 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/address-vehicles/address-vehicles.spec.js

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
index 7dd36b04..b9cd7e02 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
@@ -58,7 +58,6 @@ const mockMixin = {
 function setupMocks({
     modelValueProp = "TESTCAR",
     cmsQuestionText = "CMS text goes here",
-    dataFromStoreApi = [],
 }) {
     
     const mountOptions = getMountOptions();
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
new file mode 100644
index 00000000..9df9a478
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -0,0 +1,171 @@
+import addressVehicles from "@/layouts/address-vehicles/address-vehicles";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+
+jest.mock("@/helpers/damage-helper", () => ({
+    isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+    getDamageString: jest.fn(),
+  }));
+  
+  // Mock our module for promises.
+  jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+  }));
+  
+  // Mock fetchCmsContentForPage
+  jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+  }));
+
+describe("addressVehicles.vue", () => {
+    test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        wrapper.vm.$router.navigate = jest.fn();
+
+        // Act
+        await wrapper.setData({
+            selectedVehicleVin: "5NMS3CADXLH233004",
+        });
+        wrapper.vm.backButtonAction();
+
+        //Assert
+        expect(wrapper.vm.$router.navigate).toBeCalled();
+
+        wrapper.unmount();
+    });
+
+
+
+
+
+    // test("Should return true for valid page requisites if carId / zipCode / emailAddress / pageData exists", async () => {
+    //     // Arrange
+    //     const { wrapper } = setupMocks({});
+    //     useMainStore().order.vehicle.carId = "CR00000395";
+    //     useMainStore().order.serviceLocation.zipCode = "43210";
+    //     useMainStore().order.customer.emailAddress = "testemail@email.com";
+
+    //     // Act
+    //     addressVehicles.beforeRouteEnter.call(
+    //         wrapper.vm,
+    //         { query: { issPage: "address-vehicles" } },
+    //         undefined,
+    //         (c) => c(wrapper.vm)
+    //     );
+
+    //     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+    //     // Assert
+    //     expect(arePagePrerequisitesValid).toBe(true);
+    // });
+
+    // test("Should return false for valid page requisites if carId is missing", async () => {
+    //     // Arrange
+    //     const { wrapper } = setupMocks({});
+
+    //     // Act
+    //     store.commit(storeMutations.UPDATE_CAR_ID, null);
+    //     const result = wrapper.vm.arePagePrerequisitesValid();
+
+    //     //Assert
+    //     expect(result).toBe(false);
+
+    //     wrapper.unmount();
+    // });
+});
+
+function setupMocks({
+    // isZipValid = true,
+    // isZipServiceable = true,
+    // lookupVinByPlateResponse,
+    // partsOrQuestions = [],
+    vehicle = {},
+    vin = null,
+    // carId = "C0000",
+    vinLookupResponseError = null,
+    route = null,
+    carId = "C0000",
+    zipCode = "12345",
+    emailAddress = "test@test.com"
+  }) {
+    // useMainStore().validateZip = jest.fn().mockImplementation(() => {
+    //   return Promise.resolve({
+    //     data: {
+    //       isValid: isZipValid,
+    //       isServiceable: isZipServiceable,
+    //     },
+    //   })
+    // });
+  
+    // useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => {
+    //   return Promise.resolve({
+    //     data: lookupVinByPlateResponse
+    //       ? lookupVinByPlateResponse : {
+    //         vin: "TEST_VIN",
+    //         vehicle: {
+    //           carId: "CARID"
+    //         },
+    //       },
+    //   })
+    // });
+  
+    // useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
+    //   return Promise.resolve({
+    //     data: {
+    //       partsOrQuestions: partsOrQuestions,
+    //     },
+    //   })
+    // });
+  
+    const wrapper = shallowMount(
+      addressVehicles,
+      getMountOptions({
+        route: route ? route : undefined,
+        router: {
+          navigate: jest.fn(),
+        },
+        mainStore: {
+          order: {
+            vehicle: {
+              carId: carId,
+            },
+            serviceLocation: {
+                zipCode: zipCode,
+            },
+            customer: {
+                emailAddress: emailAddress,
+            }
+          },
+          applicationUser: {
+            pageData: "address-vehicles",
+          },
+          
+        },
+  
+      })
+    );
+  
+    const apiResponses = {
+    //   serviceZipValidationResponse: {
+    //     isValid: isZipValid,
+    //     isServiceable: isZipServiceable,
+    //   },
+      vinLookupResponse: {
+        vin: vin,
+        vehicle: vehicle,
+        error: vinLookupResponseError,
+      },
+    };
+  
+    settleAllPromises.mockImplementation(() => apiResponses);
+  
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+  
+    return { wrapper };
+  }
\ No newline at end of file

From 4d9d1623bfa57157d018b9fda8e534ba6054a734 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 2 Feb 2023 12:49:49 -0500
Subject: [PATCH 10/13] unit tests

---
 .../address-vehicles/address-vehicles.spec.js | 85 ++++++++++---------
 .../address-vehicles/address-vehicles.vue     | 14 +--
 2 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 9df9a478..81019728 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -7,22 +7,23 @@ import { useMainStore } from "@/store";
 jest.mock("@/helpers/damage-helper", () => ({
     isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
     getDamageString: jest.fn(),
-  }));
+}));
   
-  // Mock our module for promises.
-  jest.mock("@/helpers/layout-helper.js", () => ({
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
-  }));
+}));
   
-  // Mock fetchCmsContentForPage
-  jest.mock("@/helpers/cms-content-helper", () => ({
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
-  }));
+}));
 
 describe("addressVehicles.vue", () => {
     test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
+        
         wrapper.vm.$router.navigate = jest.fn();
 
         // Act
@@ -37,30 +38,24 @@ describe("addressVehicles.vue", () => {
         wrapper.unmount();
     });
 
+    test("Should return true for valid page requisites if carId exists", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        useMainStore().order.vehicle.carId = "CR00000395";
 
+        // Act
+        addressVehicles.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { issPage: "address-vehicles" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
 
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-
-    // test("Should return true for valid page requisites if carId / zipCode / emailAddress / pageData exists", async () => {
-    //     // Arrange
-    //     const { wrapper } = setupMocks({});
-    //     useMainStore().order.vehicle.carId = "CR00000395";
-    //     useMainStore().order.serviceLocation.zipCode = "43210";
-    //     useMainStore().order.customer.emailAddress = "testemail@email.com";
-
-    //     // Act
-    //     addressVehicles.beforeRouteEnter.call(
-    //         wrapper.vm,
-    //         { query: { issPage: "address-vehicles" } },
-    //         undefined,
-    //         (c) => c(wrapper.vm)
-    //     );
-
-    //     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-
-    //     // Assert
-    //     expect(arePagePrerequisitesValid).toBe(true);
-    // });
+        // Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
 
     // test("Should return false for valid page requisites if carId is missing", async () => {
     //     // Arrange
@@ -77,6 +72,26 @@ describe("addressVehicles.vue", () => {
     // });
 });
 
+//Mock props
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((contentName) => {
+            if (contentName === "FoundMultipleVehicles") {
+                return "FoundMultipleVehiclesTestReturn";
+            }
+            if (contentName === "ProvideVinAlert") {
+                return "ProvideVinAlertTestReturn";
+            }
+            return null;
+        }),
+    },
+    computed: {
+        dynamicStrings() {
+            return { ROUTER_LINK: "routerLink:" };
+        },
+    },
+};
+
 function setupMocks({
     // isZipValid = true,
     // isZipServiceable = true,
@@ -88,8 +103,6 @@ function setupMocks({
     vinLookupResponseError = null,
     route = null,
     carId = "C0000",
-    zipCode = "12345",
-    emailAddress = "test@test.com"
   }) {
     // useMainStore().validateZip = jest.fn().mockImplementation(() => {
     //   return Promise.resolve({
@@ -132,19 +145,9 @@ function setupMocks({
             vehicle: {
               carId: carId,
             },
-            serviceLocation: {
-                zipCode: zipCode,
-            },
-            customer: {
-                emailAddress: emailAddress,
-            }
           },
-          applicationUser: {
-            pageData: "address-vehicles",
-          },
-          
         },
-  
+        mixins: [mockMixin],
       })
     );
   
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index d7c28942..8f6cbb2e 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -112,6 +112,11 @@ export default {
   props: {
     validationRules: String,
   },
+  setup() {
+    const mainStore = useMainStore();
+
+    return { mainStore };
+  },
   data() {
     return {
       selectedVehicleVin: "",
@@ -167,13 +172,8 @@ export default {
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
     arePagePrerequisitesValid() {
-      if (
-        useMainStore().order.vehicle.carId &&
-        useMainStore().order.serviceLocation.zipCode &&
-        useMainStore().order.customer.emailAddress &&
-        useMainStore().getters.pageData(issPageValues.ADDRESS_VEHICLES)
-      ) {
-        return true;
+      if (this.mainStore.order.vehicle.carId) {
+          return true;
       }
       return false;
     },

From 349e006b6b668a88ea3f50a2f05a1cd04200c8f1 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 2 Feb 2023 17:00:07 -0500
Subject: [PATCH 11/13] EOD commit - unit testing

---
 .../address-vehicles/address-vehicles.spec.js | 186 +++++++++---------
 1 file changed, 89 insertions(+), 97 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 81019728..5e6cd3b4 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -14,28 +14,23 @@ jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
   
-// Mock fetchCmsContentForPage
-jest.mock("@/helpers/cms-content-helper", () => ({
-    fetchCmsContentForPage: jest.fn(),
-}));
-
-describe("addressVehicles.vue", () => {
+describe("address-vehicles.vue", () => {
     test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
         // Arrange
+        const mockSelectedVehicleVin = "TESTVIN";
         const { wrapper } = setupMocks({});
-        
-        wrapper.vm.$router.navigate = jest.fn();
 
-        // Act
         await wrapper.setData({
-            selectedVehicleVin: "5NMS3CADXLH233004",
+            selectedVehicle: {
+                vin: mockSelectedVehicleVin
+            },
         });
-        wrapper.vm.backButtonAction();
+        
+        // Act
+        await wrapper.vm.backButtonAction();
 
         //Assert
         expect(wrapper.vm.$router.navigate).toBeCalled();
-
-        wrapper.unmount();
     });
 
     test("Should return true for valid page requisites if carId exists", async () => {
@@ -72,103 +67,100 @@ describe("addressVehicles.vue", () => {
     // });
 });
 
-//Mock props
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn((contentName) => {
-            if (contentName === "FoundMultipleVehicles") {
-                return "FoundMultipleVehiclesTestReturn";
-            }
-            if (contentName === "ProvideVinAlert") {
-                return "ProvideVinAlertTestReturn";
-            }
-            return null;
-        }),
-    },
-    computed: {
-        dynamicStrings() {
-            return { ROUTER_LINK: "routerLink:" };
-        },
-    },
-};
-
 function setupMocks({
-    // isZipValid = true,
-    // isZipServiceable = true,
-    // lookupVinByPlateResponse,
-    // partsOrQuestions = [],
-    vehicle = {},
-    vin = null,
-    // carId = "C0000",
-    vinLookupResponseError = null,
-    route = null,
+    lookupVinResponse,
+    partsOrQuestions = [],
     carId = "C0000",
-  }) {
-    // useMainStore().validateZip = jest.fn().mockImplementation(() => {
-    //   return Promise.resolve({
-    //     data: {
-    //       isValid: isZipValid,
-    //       isServiceable: isZipServiceable,
-    //     },
-    //   })
-    // });
-  
-    // useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => {
-    //   return Promise.resolve({
-    //     data: lookupVinByPlateResponse
-    //       ? lookupVinByPlateResponse : {
-    //         vin: "TEST_VIN",
-    //         vehicle: {
-    //           carId: "CARID"
-    //         },
-    //       },
-    //   })
-    // });
-  
-    // useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
-    //   return Promise.resolve({
-    //     data: {
-    //       partsOrQuestions: partsOrQuestions,
-    //     },
-    //   })
-    // });
-  
-    const wrapper = shallowMount(
-      addressVehicles,
-      getMountOptions({
+    route = null,
+}) 
+{
+    const mountOptions = getMountOptions({
         route: route ? route : undefined,
         router: {
-          navigate: jest.fn(),
+            navigate: jest.fn(),
         },
         mainStore: {
-          order: {
-            vehicle: {
-              carId: carId,
+            order: {
+                vehicle: {
+                    carId: carId,
+                    category: "SUV",
+                    year: 2020,
+                    make: "Hyundai",
+                    model: "Santa Fe",
+                    style: "4 door utility",
+                    imageUrl:
+                        "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
+                    imageVifNumber: "13769",
+                    imageVifColor: "white",
+            },
+                vin: "5NMS3CADXLH233004",
             },
-          },
         },
-        mixins: [mockMixin],
-      })
-    );
-  
+
+    });
+
+    useMainStore().lookupVehicleByVin = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: lookupVinResponse
+            ? lookupVinResponse
+            : {
+                carId: "CARID",
+                category: "TESTCAR",
+                year: "0000",
+                make: "TestMake",
+                model: "TestModel",
+                style: "TestStyle",
+                imageUrl: "url",
+                imageVifNumber: "00000",
+                imageVifColor: "color"
+            },
+        })
+    });
+
+    useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                partsOrQuestions: partsOrQuestions,
+            },
+        })
+    });
+
     const apiResponses = {
-    //   serviceZipValidationResponse: {
-    //     isValid: isZipValid,
-    //     isServiceable: isZipServiceable,
-    //   },
-      vinLookupResponse: {
-        vin: vin,
-        vehicle: vehicle,
-        error: vinLookupResponseError,
-      },
+        vinLookup: {
+            carId: carId,
+        },
     };
-  
+
     settleAllPromises.mockImplementation(() => apiResponses);
-  
+
+    //Mock props
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((contentName) => {
+                if (contentName === "FoundMultipleVehicles") {
+                    return "FoundMultipleVehiclesTestReturn";
+                }
+                if (contentName === "ProvideVinAlert") {
+                    return "ProvideVinAlertTestReturn";
+                }
+                return null;
+            }),
+        },
+        computed: {
+            dynamicStrings() {
+                return { ROUTER_LINK: "routerLink:" };
+            },
+        },
+    };
+
+    mountOptions.mixins = [mockMixin];
+
+    const wrapper = shallowMount(addressVehicles, mountOptions);
+
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
-  
+
     return { wrapper };
-  }
\ No newline at end of file
+}

From fb8e4db6a94e5ea94d2f5ae618d4b0e9a3cc7888 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 3 Feb 2023 16:43:22 -0500
Subject: [PATCH 12/13] unit tests, work in progress

---
 .../address-vehicles/address-vehicles.spec.js | 110 ++++++++----------
 1 file changed, 49 insertions(+), 61 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 5e6cd3b4..551419e5 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -3,29 +3,33 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 
 jest.mock("@/helpers/damage-helper", () => ({
     isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
     getDamageString: jest.fn(),
 }));
-  
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+    doesCopyContainRouterLink: jest.fn(),
+    splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => "test"),
+    getRouterLinkRouteFromCopy: jest.fn(),
+    getRouterLinkDisplayTextFromCopy: jest.fn(),
+    splitCMSCopyOnParagraphTag: jest.fn(),
+}));
+
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
-  
+
 describe("address-vehicles.vue", () => {
     test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
         // Arrange
-        const mockSelectedVehicleVin = "TESTVIN";
         const { wrapper } = setupMocks({});
 
-        await wrapper.setData({
-            selectedVehicle: {
-                vin: mockSelectedVehicleVin
-            },
-        });
-        
         // Act
         await wrapper.vm.backButtonAction();
 
@@ -51,29 +55,37 @@ describe("address-vehicles.vue", () => {
         // Assert
         expect(arePagePrerequisitesValid).toBe(true);
     });
-
-    // test("Should return false for valid page requisites if carId is missing", async () => {
-    //     // Arrange
-    //     const { wrapper } = setupMocks({});
-
-    //     // Act
-    //     store.commit(storeMutations.UPDATE_CAR_ID, null);
-    //     const result = wrapper.vm.arePagePrerequisitesValid();
-
-    //     //Assert
-    //     expect(result).toBe(false);
-
-    //     wrapper.unmount();
-    // });
 });
 
 function setupMocks({
-    lookupVinResponse,
-    partsOrQuestions = [],
+    //partsOrQuestions = [],
     carId = "C0000",
     route = null,
 }) 
 {
+    useMainStore().applicationUser = {
+            pageData: {
+                "address-vehicles": 
+                    [
+                        {   vehicle: {
+                            carId: "CARID",
+                            category: "SUV",
+                            imageUrl:
+                                "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
+                            imageVifColor: "white",
+                            imageVifNumber: "13769",
+                            make: "Hyundai",
+                            model: "Santa Fe",
+                            style: "4 door utility",
+                            year: 2020,
+
+                            },
+                            vin: "TESTVIN123412341234"
+                        },
+                    ],
+            }
+        };
+
     const mountOptions = getMountOptions({
         route: route ? route : undefined,
         router: {
@@ -84,54 +96,30 @@ function setupMocks({
                 vehicle: {
                     carId: carId,
                     category: "SUV",
-                    year: 2020,
+                    imageUrl:
+                        "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
+                    imageVifColor: "white",
+                    imageVifNumber: "13769",
                     make: "Hyundai",
                     model: "Santa Fe",
                     style: "4 door utility",
-                    imageUrl:
-                        "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
-                    imageVifNumber: "13769",
-                    imageVifColor: "white",
-            },
+                    year: 2020,
+                },
                 vin: "5NMS3CADXLH233004",
             },
         },
-
-    });
-
-    useMainStore().lookupVehicleByVin = jest.fn().mockImplementation(() => {
-        return Promise.resolve({
-            data: lookupVinResponse
-            ? lookupVinResponse
-            : {
-                carId: "CARID",
-                category: "TESTCAR",
-                year: "0000",
-                make: "TestMake",
-                model: "TestModel",
-                style: "TestStyle",
-                imageUrl: "url",
-                imageVifNumber: "00000",
-                imageVifColor: "color"
-            },
-        })
-    });
-
-    useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
-        return Promise.resolve({
-            data: {
-                partsOrQuestions: partsOrQuestions,
-            },
-        })
-    });
+    },
+    );
 
     const apiResponses = {
-        vinLookup: {
-            carId: carId,
+        cmsContent: {
+
         },
     };
 
     settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+    
 
     //Mock props
     const mockMixin = {

From c2a70c55a395751140474e2ac3abdc13ec15d9bb Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 6 Feb 2023 15:11:56 -0500
Subject: [PATCH 13/13] unit tests for address-vehicles complete

---
 .../address-vehicles/address-vehicles.spec.js | 136 +++++++++++++++---
 1 file changed, 117 insertions(+), 19 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 551419e5..76aebdf0 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -37,6 +37,96 @@ describe("address-vehicles.vue", () => {
         expect(wrapper.vm.$router.navigate).toBeCalled();
     });
 
+    test("navigateForward should be called if forwardButtonAction is run", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        const lookupVinResponse = {
+            data: {
+                carId: "456"
+            }
+        }
+
+        wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+        wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+        wrapper.vm.lookupVin = jest.fn(() => Promise.resolve(lookupVinResponse));
+        wrapper.vm.$router.navigate = jest.fn();
+        wrapper.vm.saveVin = jest.fn().mockImplementation(() => {});
+        wrapper.vm.navigateForward = jest.fn().mockImplementation(() => {});
+
+        // Act
+        await wrapper.setData({
+            selectedVehicleVin: "5NMS3CADXLH233004",
+        });
+
+        await wrapper.vm.forwardButtonAction();
+        wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+
+    test("Should return out of forwardButtonAction is lookupVin returns an error", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+        const lookupVinResponse = {
+            error: "there is an error",
+        };
+
+        wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+        wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+        wrapper.vm.lookupVin = jest.fn(() => Promise.reject(lookupVinResponse));
+        wrapper.vm.$router.navigate = jest.fn();
+        wrapper.vm.saveVin = jest.fn().mockImplementation(() => {});
+
+        // Act
+        await wrapper.setData({
+            selectedVehicleVin: "5NMS3CADXLH233004",
+        });
+
+        await wrapper.vm.forwardButtonAction();
+        wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.forwardButtonAction).toReturn;
+    });
+
+    test("Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+        wrapper.vm.$router.navigate = jest.fn();
+
+        // Act
+        await wrapper.setData({
+            selectedVehicleVin: "5NMS3CADXLH233004",
+            isSelectedGlassAvailableForVehicle: false,
+            isCarIdDifferent: true,
+        });
+        await wrapper.vm.navigateForward();
+
+        //Assert
+        expect(wrapper.vm.$router.navigate).toBeCalledTimes(1);
+    });
+
+    test("carId is not different on navigateForward (car was found) => Should handle navigating forward with car match", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+        wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+        // Act
+        await wrapper.setData({
+            isCarIdDifferent: false,
+        });
+        await wrapper.vm.navigateForward();
+
+        //Assert
+        expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1);
+
+    });
+
     test("Should return true for valid page requisites if carId exists", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
@@ -58,34 +148,44 @@ describe("address-vehicles.vue", () => {
 });
 
 function setupMocks({
-    //partsOrQuestions = [],
-    carId = "C0000",
     route = null,
+    lookupVehicleByVinResponse,
 }) 
 {
     useMainStore().applicationUser = {
             pageData: {
                 "address-vehicles": 
                     [
-                        {   vehicle: {
-                            carId: "CARID",
-                            category: "SUV",
-                            imageUrl:
-                                "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
-                            imageVifColor: "white",
-                            imageVifNumber: "13769",
-                            make: "Hyundai",
-                            model: "Santa Fe",
-                            style: "4 door utility",
-                            year: 2020,
-
+                        {   
+                            vehicle: {
+                                carId: "CR00069309",
+                                category: "SUV",
+                                imageUrl:
+                                    "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
+                                imageVifColor: "white",
+                                imageVifNumber: "13769",
+                                make: "Hyundai",
+                                model: "Santa Fe",
+                                style: "4 door utility",
+                                year: 2020,
                             },
-                            vin: "TESTVIN123412341234"
+                            vin: "5NMS3CADXLH233004",
                         },
                     ],
             }
         };
 
+    useMainStore().lookupVehicleByVin = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: lookupVehicleByVinResponse
+                ? lookupVehicleByVinResponse : {
+                  vehicle: {
+                    carId: "CARID"
+                  },
+            },
+        })
+    });
+
     const mountOptions = getMountOptions({
         route: route ? route : undefined,
         router: {
@@ -94,7 +194,7 @@ function setupMocks({
         mainStore: {
             order: {
                 vehicle: {
-                    carId: carId,
+                    carId: "CR00069309",
                     category: "SUV",
                     imageUrl:
                         "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
@@ -112,9 +212,7 @@ function setupMocks({
     );
 
     const apiResponses = {
-        cmsContent: {
-
-        },
+        cmsContent: {},
     };
 
     settleAllPromises.mockImplementation(() => apiResponses);