From c6ed1ea032fe9a14a30969d38bcbc50a567ca1cf Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 18 Jan 2022 09:05:13 -0500
Subject: [PATCH 01/22] creating replace options question widget

---
 .../replace-options-question.vue               | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/ux-components/replace-options-question/replace-options-question.vue

diff --git a/src/ux-components/replace-options-question/replace-options-question.vue b/src/ux-components/replace-options-question/replace-options-question.vue
new file mode 100644
index 000000000..e8c14a42d
--- /dev/null
+++ b/src/ux-components/replace-options-question/replace-options-question.vue
@@ -0,0 +1,18 @@
+<script>
+
+export default ({
+    name: "replace-options-question",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            replaceOptions: Array
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean
+    }
+})
+</script>

From 2bb7d5985c944ec6f7b5851b75d85c9029b3ac39 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 20 Jan 2022 22:43:08 -0500
Subject: [PATCH 02/22] replace options component created

---
 .../make-question/make-question.vue           |  2 +-
 .../model-question/model-question.vue         |  2 +-
 .../style-question/style-question.vue         |  2 +-
 .../year-question/year-question.vue           |  3 ++-
 .../replace-options-question.vue              | 22 ++++++++++++++++++-
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index eaa6b7306..7af0ceb83 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isVehicleQuestion
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index bb50872d6..763372d53 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isVehicleQuestion
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index d14b39599..f64ed4476 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isVehicleQuestion
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 523a25bb3..11c9bd7af 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,9 +1,9 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isVehicleQuestion
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
-    :isVehicleQuestion="true"
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
@@ -26,6 +26,7 @@ export default {
   props: {
     modelValue: String,
   },
+  emits: ['update:modelValue'],
   components: {
     buttonQuestion,
   },
diff --git a/src/ux-components/replace-options-question/replace-options-question.vue b/src/ux-components/replace-options-question/replace-options-question.vue
index e8c14a42d..699e9bddc 100644
--- a/src/ux-components/replace-options-question/replace-options-question.vue
+++ b/src/ux-components/replace-options-question/replace-options-question.vue
@@ -1,7 +1,17 @@
+<template>
+    <div class="replace-options-question">
+        <buttonQestion
+            v-if="isAvailable"
+            :isMultiSelect="isMultiSelect"
+         />
+    </div>
+</template>
+
 <script>
+import buttonQuestion from "@/common-components/button-question/button-question";
 
 export default ({
-    name: "replace-options-question",
+    name: "replaceOptionsQuestion",
     data(){
         return {
             questionText: String,
@@ -13,6 +23,16 @@ export default ({
         isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean
+    },
+    methods: {
+        initializeComponent(cmsContent, replaceOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.replaceOptions = replaceOptions;
+        }
+    },
+    components: {
+        buttonQuestion,
     }
 })
 </script>

From ddcca58d5509289f50a1224b9c936e8f282e9b81 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 21 Jan 2022 13:37:06 -0500
Subject: [PATCH 03/22] Updates for replace options question

---
 .../replace-options-question.vue                         | 9 ++++++++-
 src/layouts/vehicle-damage/vehicle-damage.vue            | 1 +
 src/ux-components/list-button/list-button.vue            | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)
 rename src/{ux-components => layouts/vehicle-damage}/replace-options-question/replace-options-question.vue (80%)

diff --git a/src/ux-components/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
similarity index 80%
rename from src/ux-components/replace-options-question/replace-options-question.vue
rename to src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 699e9bddc..e90c85f7b 100644
--- a/src/ux-components/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -3,6 +3,7 @@
         <buttonQestion
             v-if="isAvailable"
             :isMultiSelect="isMultiSelect"
+            v-model="modelValue"
          />
     </div>
 </template>
@@ -22,7 +23,8 @@ export default ({
     props: {
         isMultiSelect: Boolean,
         isAvailable: Boolean,
-        filterByVehicleCategory: Boolean
+        filterByVehicleCategory: Boolean,
+        modelValue: String,ewe3d
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -31,6 +33,11 @@ export default ({
             this.replaceOptions = replaceOptions;
         }
     },
+    watch: {
+        modelValue(val) {
+        this.$emit("update:modelValue", val);
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 65e9a7bba..ebcb85d68 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -53,6 +53,7 @@ export default ({
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
       // use resultMap.damageOptions for damage options
+      console.log(resultMap.damageOptions)
     });
     
   },
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 912403025..5fa285c31 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
+  <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName">
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>

From 1521ad14c978c5600dc341d16de8c6f154da0a1b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 26 Jan 2022 08:49:17 -0500
Subject: [PATCH 04/22] Adjustments

---
 .../button-question/button-question.vue       |  3 ++-
 src/layouts/component-test/component-test.vue |  1 -
 .../replace-options-question.vue              | 22 +++++++++++++++----
 src/layouts/vehicle-damage/vehicle-damage.vue | 12 +++++++---
 src/ux-components/list-card/list-card.vue     |  9 ++++----
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3c818eb8d..b9133ddc5 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -29,6 +29,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :value="modelValue"
+              :colLength="this.answers.length < 3 ? '' : '-4'"
               data-test="button"
             />
           </div>
@@ -89,7 +90,7 @@ export default {
           classes = 'd-flex flex-row p-0'
           break;
         case 'listCard':
-          classes = 'row g-2'
+          classes = 'row justify-content-center g-2'
           break;
       }
       return classes;
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 9e7eaca6d..2b5074ea7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -867,7 +867,6 @@
    />
    <buttonQuestion
     isMultiSelect
-    isRow
     :answers="listCardGroup"
     buttonType="listCard"
     ariaLabelBy="horizontal_radio_card-group"
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index e90c85f7b..0c6c8bc4c 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,8 +1,12 @@
 <template>
     <div class="replace-options-question">
-        <buttonQestion
-            v-if="isAvailable"
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
             :isMultiSelect="isMultiSelect"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
             v-model="modelValue"
          />
     </div>
@@ -10,6 +14,7 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -17,22 +22,31 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            replaceOptions: Array
+            answersToDisplay: Array,
+            replaceOptions: Array,
+            groupName: String,
         }
     },
     props: {
         isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        modelValue: String,ewe3d
+        modelValue: String,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
+            this.groupName = cmsContent.Name;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         }
     },
+    mounted(){
+        this.answersToDisplay = this.answersFromCms.filter(ans => {
+            const name = ans.Name.split('-');
+            return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+        });
+    },
     watch: {
         modelValue(val) {
         this.$emit("update:modelValue", val);
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 7ffef83b8..55a340a0a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,10 +1,11 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-0 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
+        <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
     </div>
 </template>
 
@@ -13,6 +14,7 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question"
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -52,8 +54,11 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      // use resultMap.damageOptions for damage options
-      console.log(resultMap.damageOptions)
+      vm.$refs.replaceOptionsQuestion.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      );
+
+      console.log(resultMap)
     });
     
   },
@@ -61,6 +66,7 @@ export default ({
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    replaceOptionsQuestion,
   },
 });
 </script>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 17c8193f0..61cedfd2a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+  <div :class="'col' + colLength">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
       <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
+        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
         <div v-if="isWide" class="order-2">
@@ -38,7 +38,8 @@ export default {
     value: { // Field initial value
       type: String,
       default: ""
-    }
+    },
+    colLength: String,
   },
   computed: {
     getLabelClasses(){

From 46cca70d3a543d844426814c75de11f54519abbd Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 26 Jan 2022 22:45:39 -0500
Subject: [PATCH 05/22] Adding emit functionality

---
 .../button-question/button-question.vue       | 19 +++++++++++-----
 .../replace-options-question.vue              | 22 +++++++++++--------
 src/layouts/vehicle-damage/vehicle-damage.vue |  6 ++---
 src/ux-components/list-card/list-card.vue     | 14 ++++++++++--
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index b9133ddc5..fcf049741 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,9 +9,10 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component :is="buttonType" v-for="answer in answers" :key="answer"
+            <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              v-model="isChecked"
               :buttonID="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
@@ -28,8 +29,8 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :value="modelValue"
               :colLength="this.answers.length < 3 ? '' : '-4'"
+              :modelValue="modelValue.includes(answer.Name)"
               data-test="button"
             />
           </div>
@@ -74,7 +75,8 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: String,
+    isChecked: Boolean,
+    modelValue: Array,
   },
   computed: {
     getFieldSetClasses(){
@@ -96,10 +98,17 @@ export default {
       return classes;
     }
   },
+  data(){
+    return {
+      modelValueAnswers: [],
+      isItemChecked: Boolean
+    }
+  },
   methods: {
     chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
+      this.modelValueAnswers.includes(answer) ? this.modelValueAnswers.pop(answer) : this.modelValueAnswers.push(answer);
+      this.$emit("update:modelValue", this.modelValueAnswers);
+    }
   },
   components: {
     listButton,
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 0c6c8bc4c..9ecd426f4 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -22,7 +22,6 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            answersToDisplay: Array,
             replaceOptions: Array,
             groupName: String,
         }
@@ -31,21 +30,26 @@ export default ({
         isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        modelValue: String,
+        modelValue: Array,
     },
     methods: {
-        initializeComponent(cmsContent, replaceOptions){
-            this.groupName = cmsContent.Name;
+        initializeComponent(cmsContent, replaceOptions, groupName){
+            this.groupName = groupName;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         }
     },
-    mounted(){
-        this.answersToDisplay = this.answersFromCms.filter(ans => {
-            const name = ans.Name.split('-');
-            return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
-        });
+    computed: {
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                    }) 
+                : [];
+        }
     },
     watch: {
         modelValue(val) {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 55a340a0a..92d00964c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
-        <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
     </div>
 </template>
 
@@ -54,8 +54,8 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.replaceOptionsQuestion.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
       );
 
       console.log(resultMap)
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 61cedfd2a..c5fd09146 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- Heavily documented below -->
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="isChecked" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -40,7 +40,10 @@ export default {
       default: ""
     },
     colLength: String,
+    modelValue: String,
+    isChecked: Boolean
   },
+  emits: ['update:modelValue', 'update:isChecked'],
   computed: {
     getLabelClasses(){
       if(this.isWide) {
@@ -54,6 +57,13 @@ export default {
       }
     }
   },
+  methods: {
+    handleClick(value){
+      this.handleChange(value);
+      this.$emit("update:modelValue", value);
+      this.$emit("update:isChecked");
+    }
+  },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";

From ceec84f168a311fd94918750a18e0c643a7f6006 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 27 Jan 2022 09:23:15 -0500
Subject: [PATCH 06/22] accepting arrays for emmited data in buttonQuestion
 widget

---
 src/common-components/button-question/button-question.vue | 7 ++-----
 src/ux-components/list-card/list-card.vue                 | 7 ++-----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index fcf049741..5edf5ab68 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -12,8 +12,8 @@
             <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
-              v-model="isChecked"
               :buttonID="answer.Name ? answer.Name : answer"
+              :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
               :textPosition="textPosition"
@@ -30,7 +30,6 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
-              :modelValue="modelValue.includes(answer.Name)"
               data-test="button"
             />
           </div>
@@ -75,7 +74,6 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    isChecked: Boolean,
     modelValue: Array,
   },
   computed: {
@@ -100,8 +98,7 @@ export default {
   },
   data(){
     return {
-      modelValueAnswers: [],
-      isItemChecked: Boolean
+      modelValueAnswers: []
     }
   },
   methods: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c5fd09146..ce40d4a26 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
   <!-- Heavily documented below -->
   <div :class="'col' + colLength">
     <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="isChecked" />
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -40,10 +40,8 @@ export default {
       default: ""
     },
     colLength: String,
-    modelValue: String,
-    isChecked: Boolean
+    modelValue: String
   },
-  emits: ['update:modelValue', 'update:isChecked'],
   computed: {
     getLabelClasses(){
       if(this.isWide) {
@@ -61,7 +59,6 @@ export default {
     handleClick(value){
       this.handleChange(value);
       this.$emit("update:modelValue", value);
-      this.$emit("update:isChecked");
     }
   },
   setup(props) {

From 707fde7b9166177844db6155960f114ecab938fb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 28 Jan 2022 16:24:41 -0500
Subject: [PATCH 07/22] WIP CSR-257

---
 .../funnel-footer/funnel-footer.spec.js       |   1 +
 .../funnel-footer/funnel-footer.vue           |  40 +++
 src/layouts/component-test/component-test.vue | 246 ++++++++++--------
 src/ux-components/button-main/button-main.vue |   4 +-
 .../list-button-horizontal.vue                |   1 +
 src/ux-components/text-link/text-link.vue     |   6 +
 6 files changed, 182 insertions(+), 116 deletions(-)
 create mode 100644 src/common-components/funnel-footer/funnel-footer.spec.js
 create mode 100644 src/common-components/funnel-footer/funnel-footer.vue

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
new file mode 100644
index 000000000..acd362709
--- /dev/null
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -0,0 +1,40 @@
+<template>
+<div class="container-fluid g-2 mb-6">
+  <div class="row">
+    <div class="col-12">
+      <h4>this should scroll</h4>
+    </div>
+  </div>
+  <div class="container-fluid fixed-bottom g-4 bg-light py-4">
+    <div class="row">
+      <div class="col">
+        <buttonMain
+        isPrimary
+        buttonText="Review Appointment Details"
+        loaderColor="white"
+        sizeInRem="1"
+        isFloat
+        />
+        <textLink
+        navigation=true
+        text="back"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+
+import textLink from "@/ux-components/text-link/text-link";
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+  name: "funnelFooter",
+  components: {
+    textLink,
+    buttonMain
+  },
+};
+</script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 7363ec3d4..a122485e9 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -46,6 +46,31 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3">
+        <textLink
+        navigation=true
+        text="Navigation Link"
+        /><br><br>
+        <textLink
+        text="Default Link"
+        /><br><br>
+        <textLink
+        textSmall=true
+        text="Small Link"
+        /><br><br>
+        <textLink
+        footer=true
+        text="Footer Link"
+        href="https://google.com"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -626,31 +651,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink
-          navigation=true
-          text="Navigation Link"
-        /><br><br>
-        <textLink
-          text="Default Link"
-        /><br><br>
-        <textLink
-          textSmall=true
-          text="Small Link"
-        /><br><br>
-        <textLink
-          footer=true
-          text="Footer Link"
-          href="https://google.com"
-        />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -796,95 +796,109 @@
         <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
       </div>
     </div>
-    <buttonQuestion
-    :answers="checkboxAnswers"
-    :isMultiSelect="true"
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list"
-    questionText="List Button as checkbox"
-   />
-   <buttonQuestion
-    :answers="radioAnswers"
-    ariaLabelBy="radio"
-    groupName="radio-list"
-    questionText="List Button as radio"
-   />
-    <buttonQuestion
-    :answers="horizontalCheckboxAnswers"
-    buttonType="listButtonHorizontal"
-    :isMultiSelect="true"
-    isColumn
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list-horizontal"
-    questionText="List Button Horizontal as checkbox"
-   />
-   <buttonQuestion
-    :answers="horizontalRadioAnswers"
-    buttonType="listButtonHorizontal"
-    isColumn
-    ariaLabelBy="radio"
-    groupName="radio-list-horizontal"
-    questionText="List Button Horizontal as radio"
-    sizeInRem="1"
-   />
-   <buttonQuestion
-    :answers="listCardCheckBox"
-    buttonType="listCard"
-    isMultiSelect
-    ariaLabelBy="check_card"
-    groupName="check-list-card"
-    questionText="List Card as checkbox"
-   />
-   <buttonQuestion
-    :answers="listCardRadio"
-    buttonType="listCard"
-    ariaLabelBy="radio_card"
-    groupName="radio-card"
-    questionText="List Card as radio"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card"
-    groupName="horizontal_check-card"
-    questionText="List Card Horizontal as checkbox"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card-st"
-    groupName="horizontal_check-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card"
-    groupName="horizontal_cradio-card"
-    questionText="List Card Horizontal as radio"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-st"
-    groupName="horizontal_cradio-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isRow
-    :answers="listCardGroup"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-group"
-    groupName="horizontal_cradio-card-group"
-    questionText="In column layout"
-   />
+    <div class="row">
+      <div class="col">
+        <buttonQuestion
+        :answers="checkboxAnswers"
+        :isMultiSelect="true"
+        ariaLabelBy="checkbox"
+        groupName="checkbox-list"
+        questionText="List Button as checkbox"
+        />
+        <buttonQuestion
+        :answers="radioAnswers"
+        ariaLabelBy="radio"
+        groupName="radio-list"
+        questionText="List Button as radio"
+        />
+        <buttonQuestion
+        :answers="horizontalCheckboxAnswers"
+        buttonType="listButtonHorizontal"
+        :isMultiSelect="true"
+        isColumn
+        ariaLabelBy="checkbox"
+        groupName="checkbox-list-horizontal"
+        questionText="List Button Horizontal as checkbox"
+        />
+        <buttonQuestion
+        :answers="horizontalRadioAnswers"
+        buttonType="listButtonHorizontal"
+        isColumn
+        ariaLabelBy="radio"
+        groupName="radio-list-horizontal"
+        questionText="List Button Horizontal as radio"
+        sizeInRem="1"
+        />
+        <buttonQuestion
+        :answers="listCardCheckBox"
+        buttonType="listCard"
+        isMultiSelect
+        ariaLabelBy="check_card"
+        groupName="check-list-card"
+        questionText="List Card as checkbox"
+        />
+        <buttonQuestion
+        :answers="listCardRadio"
+        buttonType="listCard"
+        ariaLabelBy="radio_card"
+        groupName="radio-card"
+        questionText="List Card as radio"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isWide
+        :answers="listCardCheckBoxHorizontal"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_check_card"
+        groupName="horizontal_check-card"
+        questionText="List Card Horizontal as checkbox"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isWide
+        :answers="listCardCheckBoxHorizontalSubText"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_check_card-st"
+        groupName="horizontal_check-card-st"
+        questionText="With Subtext"
+        />
+        <buttonQuestion
+        isWide
+        :answers="listRadioHorizontal"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card"
+        groupName="horizontal_cradio-card"
+        questionText="List Card Horizontal as radio"
+        />
+        <buttonQuestion
+        isWide
+        :answers="listRadioHorizontalSubText"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card-st"
+        groupName="horizontal_cradio-card-st"
+        questionText="With Subtext"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isRow
+        :answers="listCardGroup"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card-group"
+        groupName="horizontal_cradio-card-group"
+        questionText="In column layout"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <funnelFooter/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -900,6 +914,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import checkbox from "@/ux-components/checkbox/checkbox";
 import buttonQuestion from "@/common-components/button-question/button-question";
 import textLink from "@/ux-components/text-link/text-link";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -913,7 +928,8 @@ export default {
     checkbox,
     funnelHeader,
     buttonQuestion,
-    textLink
+    textLink,
+    funnelFooter
   },
   data() {
     return {
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 5d89e9afa..2f99ac33a 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="clicked()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
   </button>
@@ -16,6 +16,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
+    isFloat: Boolean
   },
   data() {
     return {
@@ -44,6 +45,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
+    white-space: nowrap;
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index d03a042d7..b4f642451 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -97,6 +97,7 @@ export default {
     background: $white;
     transition: all 150ms linear;
     border: 1px solid $gray-500;
+    border-radius: 0;
     width: 100%;
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 15d677c9f..3021dfd91 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -51,6 +51,12 @@ a {
     color: $black;
     border-bottom: 1px solid $black;
     line-height: 26px;
+    display: inline-flex;
+    text-transform: capitalize;
+    white-space: nowrap;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
   }
   &.footer-link {
     color: $gray-500;

From 221b5c1e73e4ec0b9c1f7eee28ecbb2379d5cca9 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 31 Jan 2022 15:23:30 -0500
Subject: [PATCH 08/22] Adding replace options component and unit tests

---
 .../button-question/button-question.spec.js   | 77 +++++++++++++++++++
 .../button-question/button-question.vue       | 37 +++++++--
 .../replace-options-question.spec.js          | 76 ++++++++++++++++++
 .../replace-options-question.vue              | 38 ++++++---
 .../router-constants/navigation-scenarios.js  |  1 -
 .../list-button-horizontal.vue                | 10 ++-
 src/ux-components/list-button/list-button.vue | 12 ++-
 src/ux-components/list-card/list-card.spec.js | 62 +++++++++++++++
 src/ux-components/list-card/list-card.vue     | 11 ++-
 9 files changed, 294 insertions(+), 30 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 609981717..7296c66d2 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -21,3 +21,80 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.props().modelValue).toBe("2020");
   });
 });
+
+describe("buttonQuestion.vue", () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      isOverflowScrollable: true,
+    });
+    // Assert
+    const fieldSet = wrapper.find('fieldset');
+    expect(fieldSet.classes()).toContain("overflow-scroll");
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should show appropriate classes for button type", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      buttonType: "listCard",
+    });
+    // Assert
+    const Div = wrapper.find('fieldset div');
+    expect(Div.classes()).toContain("row");
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should trigger event modelValue change on select", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setData({
+      modelValueAnswers: ["Windshield"],
+      chosenAnswer: "Windshield"
+    });
+    wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
+    await wrapper.vm.$nextTick();
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should trigger event modelValue change with one string value on select if checked is true and only one option is selected", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setData({
+      chosenAnswer: "Windshield"
+    });
+    wrapper.vm.isItemChecked(true);
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Windshield"]);
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple optiopns are chosen", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setData({
+      modelValueAnswers: ["Windshield", "BackDoor"]
+    });
+    wrapper.vm.isItemChecked(true);
+    // Assert
+    expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should not trigger event modelValue change on select if checked is false", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    wrapper.vm.isItemChecked(false);
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
+  });
+});
\ No newline at end of file
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5edf5ab68..0e4212f50 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -12,6 +12,7 @@
             <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              @isChecked="isItemChecked"
               :buttonID="answer.Name ? answer.Name : answer"
               :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
@@ -74,7 +75,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: Array,
+    modelValue: [Array, String],
   },
   computed: {
     getFieldSetClasses(){
@@ -94,18 +95,42 @@ export default {
           break;
       }
       return classes;
-    }
+    },
   },
   data(){
     return {
-      modelValueAnswers: []
+      modelValueAnswers: [],
+      chosenAnswer: String
+    }
+  },
+  created(){
+    if(Array.isArray(this.answers) && this.answers.length === 1) {
+      const onlyAnswer = typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0];
+      this.$emit("update:modelValue", onlyAnswer);
     }
   },
   methods: {
     chooseAnswer(answer) {
-      this.modelValueAnswers.includes(answer) ? this.modelValueAnswers.pop(answer) : this.modelValueAnswers.push(answer);
-      this.$emit("update:modelValue", this.modelValueAnswers);
-    }
+      this.chosenAnswer = answer;
+    },
+    isItemChecked(val) {
+      // Add or remove item to array of data to emit
+      val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
+      // Determine what data to emit
+      let dataToEmit;
+      switch(this.modelValueAnswers.length){
+        case 0:
+          dataToEmit = undefined
+          break;
+        case 1:
+          dataToEmit = this.chosenAnswer
+          break;
+        default:
+          dataToEmit = this.modelValueAnswers
+          break; 
+      }
+      this.$emit("update:modelValue", dataToEmit);
+    },
   },
   components: {
     listButton,
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
new file mode 100644
index 000000000..103aecd4c
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -0,0 +1,76 @@
+import { shallowMount } from "@vue/test-utils";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+    test("Selected damage option is emitted upon selection.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+      const damageToSelect = ["Backseat"];
+  
+      //Act
+      wrapper.setValue({ modelValue: damageToSelect });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Answers to display filtered by data from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+  
+      //Act
+      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+  
+      //Assert
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Windshield"],
+    isAvailale = true,
+    isMultiSelect = false,
+    filterByVehicleCategory = false,
+    groupName = "damageQuestion",
+    cmsQuestionText = "CMS text goes here",
+    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp,
+      isAvailable: isAvailale,
+      isMultiSelect: isMultiSelect,
+      filterByVehicleCategory: filterByVehicleCategory
+    };
+   
+    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const replaceOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, replaceOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 9ecd426f4..f01f0cd90 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,15 +1,17 @@
 <template>
-    <div class="replace-options-question">
-        <buttonQuestion
-            v-if="isAvailable && answersToDisplay.length > 1"
-            :questionText="questionText"
-            :isMultiSelect="isMultiSelect"
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="modelValue"
-         />
-    </div>
+    <transition name="fade">
+        <div class="replace-options-question">
+            <buttonQuestion
+                v-if="isAvailable && answersToDisplay.length > 1"
+                :questionText="questionText"
+                :isMultiSelect="isMultiSelect"
+                :answers="answersToDisplay"
+                :groupName="groupName"
+                buttonType="listCard"
+                v-model="modelValue"
+            />
+        </div>
+    </transition>
 </template>
 
 <script>
@@ -49,7 +51,7 @@ export default ({
                         return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
                     }) 
                 : [];
-        }
+        },
     },
     watch: {
         modelValue(val) {
@@ -61,3 +63,15 @@ export default ({
     }
 })
 </script>
+
+<style lang="scss" scoped>
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+        opacity: 0;
+    }
+</style>
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 9f6fa4e92..48e36996b 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -3,7 +3,6 @@ const navigationScenarios = {
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
   SELECTED_STYLE: "SELECTED_STYLE",
-  VEHICLE_DAMAGE: "VEHICLE_DAMAGE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index d03a042d7..4150b3d46 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
@@ -33,7 +33,8 @@ export default {
     value: { // Field initial value
       type: String,
       default: ""
-    }
+    },
+    modelValue: false
   },
   data() {
     return {
@@ -51,6 +52,11 @@ export default {
       this.handleChange(value);
     }
   },
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
+    }
+  },
   components: {
     loader,
   },
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 5fa285c31..e03097309 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue">
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
@@ -30,9 +30,10 @@ export default {
     loaderPosition: String,
     sizeInRem: [Number,String],
     value: { // Field initial value
-      type: String,
+      type: [String, Number],
       default: ""
-    }
+    },
+    modelValue: false
   },
   data() {
     return {
@@ -50,6 +51,11 @@ export default {
       this.handleChange(value);
     }
   },
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
+    }
+  },
   components: {
     loader,
   },
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3bb6af61c..1488e5009 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -126,4 +126,66 @@ describe("list-card.vue", () => {
 
   });
 
+  it("Should return flex row classes if isWide is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: ""
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
+  });
+
+  it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: "Button Subcopy"
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
+  });
+
+  it("Should return flex column classes if isWide is false", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
+  });
+
 });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index ce40d4a26..903c21216 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Heavily documented below -->
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
       <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
@@ -40,7 +40,7 @@ export default {
       default: ""
     },
     colLength: String,
-    modelValue: String
+    modelValue: false
   },
   computed: {
     getLabelClasses(){
@@ -55,10 +55,9 @@ export default {
       }
     }
   },
-  methods: {
-    handleClick(value){
-      this.handleChange(value);
-      this.$emit("update:modelValue", value);
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
     }
   },
   setup(props) {

From db8be5e8c9dc1d68c38eb8605216803928522d3a Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 31 Jan 2022 16:21:02 -0500
Subject: [PATCH 09/22] Conflict fixes and update to logic for taking in
 multiple modelvalue items

---
 .../button-question/button-question.spec.js   | 15 +-----
 .../button-question/button-question.vue       | 21 +++-----
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../list-button-horizontal.vue                | 48 +++++++++++++++---
 src/ux-components/list-button/list-button.vue | 49 +++++++++++++++----
 src/ux-components/list-card/list-card.vue     | 40 ++++++++++++---
 6 files changed, 122 insertions(+), 53 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 808e5c4ba..e59b6da39 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -62,20 +62,7 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change with one string value on select if checked is true and only one option is selected", async () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setData({
-      chosenAnswer: "Windshield"
-    });
-    wrapper.vm.isItemChecked(true);
-    // Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Windshield"]);
-  });
-});
-
-describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple optiopns are chosen", async () => {
+  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
     await wrapper.setData({
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 28fd2258f..857e3e621 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -7,7 +7,10 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
+            <component 
+              :is="buttonType" 
+              v-for="answer in answers" 
+              :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
               @isChecked="isItemChecked"
@@ -116,20 +119,8 @@ export default {
     isItemChecked(val) {
       // Add or remove item to array of data to emit
       val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
-      // Determine what data to emit
-      let dataToEmit;
-      switch(this.modelValueAnswers.length){
-        case 0:
-          dataToEmit = undefined
-          break;
-        case 1:
-          dataToEmit = this.chosenAnswer
-          break;
-        default:
-          dataToEmit = this.modelValueAnswers
-          break; 
-      }
-      this.$emit("update:modelValue", dataToEmit);
+
+      this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
     },
   },
   components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 766a0697f..fb08ce910 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-0 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 01c7b2fa8..aa574c559 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,11 +1,45 @@
 <template>
-  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
+  <div 
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
+    @mouseup="handleClick(value)" 
+    @keyup.space="handleClick(value)"
+  >
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue" 
+    />
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
+      <span 
+        class="m-0" 
+        :class="textPosition"
+      >
+        {{buttonLabel}}
+      </span>
+      <span 
+        v-if="buttonLabelSubCopy" 
+        class="m-0 small" 
+        :class="textPosition"
+      >
+        {{buttonLabelSubCopy}}
+      </span>
+      <span v-if="screenReaderOnlyText" class="sr-only">
+        {{screenReaderOnlyText}}
+      </span>
+      <loader 
+        v-if="isLoaderDisplayed && !isMultiSelect" 
+        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
+        :class="[loaderColor, loaderPosition]" 
+      />
     </label>
   </div>
 </template>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 8263fa10f..17a1e7a8b 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,14 +1,43 @@
 <template>
-  <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue">
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{
-        buttonLabelSubCopy
-      }}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{
-        screenReaderOnlyText
-      }}</span>
+  <div 
+    class="list-group list-button d-flex flex-column w-100 mb-2" 
+    @mouseup="handleClick(value)" 
+    @keyup.space="handleClick(value)"
+  >
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue"
+    >
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
+      <span 
+        class="m-0" 
+        :class="textPosition"
+      >
+        {{ buttonLabel }}
+      </span>
+      <span 
+        v-if="buttonLabelSubCopy" 
+        class="m-0 small" 
+        :class="textPosition"
+      >
+        {{ buttonLabelSubCopy }}
+      </span>
+      <span 
+        v-if="screenReaderOnlyText" 
+        class="sr-only"
+      >
+        {{ screenReaderOnlyText }}
+      </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
         :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 1dac474fa..b93bbe3f0 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,12 +1,40 @@
 <template>
   <!-- Heavily documented below -->
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
-      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
-        <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" 
+    :class="isWide ? 'horizontal' : ''" 
+    @mouseup="handleChange(value)" 
+    @keyup.space="handleChange(value)">
+      <input 
+        :type="isMultiSelect ? 'checkbox' : 'radio'" 
+        :id="buttonID" 
+        :name="groupName" 
+        :value="buttonID" 
+        :aria-required="isRequired" 
+        :data-focus-target="groupName" 
+        v-model="modelValue"
+       />
+      <label 
+        :for="buttonID" 
+        class="d-flex w-100 align-items-center px-2 h-100" 
+        :class="getLabelClasses" tabindex="-1"
+      >
+        <img 
+          :id="buttonImageId" 
+          :class="!isWide ? 'order-1' : 'ms-auto order-3'" 
+          :src="buttonImage" 
+          :alt="altText"
+         />
+        <p 
+          v-if="!isWide" 
+          class="small order-3" 
+          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+        >
+          {{buttonLabel}}
+        </p>
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+          {{buttonLabelSubCopy}}
+        </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
           <p v-if="buttonLabelSubCopy" class="m-0 fs-7">

From e00fcd3098e9f5e2bfcd80778405001688e73472 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 31 Jan 2022 17:18:48 -0500
Subject: [PATCH 10/22] CSR-257 funnel-footer updates.

---
 .../funnel-footer/funnel-footer.vue           | 53 ++++++++++++++++---
 src/ux-components/text-link/text-link.vue     |  2 +-
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index acd362709..05976863a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,11 +1,31 @@
 <template>
-<div class="container-fluid g-2 mb-6">
-  <div class="row">
-    <div class="col-12">
-      <h4>this should scroll</h4>
+  <div class="container-fluid g-2 footer">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center pb-2 fs-7">
+        &copy;&nbsp;<span id="years"></span>&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
+        footer=true
+        text="Terms of use"
+        href="https://www.safelite.com/terms-of-use"
+        />
+        <textLink
+        footer=true
+        text="Privacy policy"
+        href="https://www.safelite.com/safelite-group-privacy-policy"
+        />
+        <textLink
+        footer=true
+        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-4 bg-light py-4">
+  <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
     <div class="row">
       <div class="col">
         <buttonMain
@@ -22,7 +42,6 @@
       </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -36,5 +55,27 @@ export default {
     textLink,
     buttonMain
   },
+  data() {
+        return {
+            paddingHeight: 0
+        }
+    },
+    mounted() {
+        this.paddingHeight = document.getElementById("infoBox").offsetHeight
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize);
+        })
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.onResize);
+    },
+    methods: {
+        onResize() {
+            this.paddingHeight = document.getElementById("infoBox").offsetHeight
+        }
+    }
 };
+setTimeout(function(){ // Give it a moment to set the date
+  document.getElementById('years').innerHTML += new Date().getFullYear();
+}, 100);
 </script>
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 3021dfd91..1d6da12ca 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -59,7 +59,7 @@ a {
     transform: translateY(-50%);
   }
   &.footer-link {
-    color: $gray-500;
+    color: $gray-600;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     line-height: 20px;

From 20ff377797d18616f517b1f3c95222d06a824e64 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 31 Jan 2022 17:46:42 -0500
Subject: [PATCH 11/22] Fixing unit tests

---
 .../vehicle-damage/vehicle-damage.spec.js     | 22 +++++++++++++++++--
 src/layouts/vehicle-damage/vehicle-damage.vue |  4 ++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 81c7c8b7a..caf008b78 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -3,6 +3,7 @@ import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -144,7 +145,9 @@ function setupMocks({
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
   baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
     return Promise.resolve({
-      data: ["Front Window", "Back Window", "Side Window"],
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      }
     });
   });
   const apiResponses = {
@@ -159,7 +162,11 @@ function setupMocks({
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
     },
-    damageOptions: ["Front Window", "Back Window", "Side Window"],
+    damageOptions: {
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      }
+    },
   };
 
   const apiPromise = Promise.resolve(apiResponses);
@@ -180,6 +187,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const driverSideOptions = replaceOptionsQuestion
+  driverSideOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleDamage, mountOptions);
 
@@ -197,5 +209,11 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
+  const driverSideOptionsWrapper = wrapper.findComponent({
+    name: "replaceOptionsQuestion",
+  });
+  driverSideOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index fb08ce910..ba46df331 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -14,7 +14,7 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question"
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -62,7 +62,7 @@ export default {
         resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
       );
 
-      console.log(resultMap)
+      //console.log(resultMap) for damageOptions and cms content data
     });
   },
   methods: {

From 4028fdae7eb4be728edc9b068e538e6fae77b1b7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 31 Jan 2022 17:59:29 -0500
Subject: [PATCH 12/22] Remove unneeded css.

---
 src/ux-components/text-link/text-link.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 1d6da12ca..4112f2276 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,11 +1,7 @@
 <template>
-  <!-- Navigation Text Link -->
   <a v-if="navigation" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
-  <!-- Footer Text Link -->
   <a v-else-if="footer" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
-  <!-- Small Text Link -->
   <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{text}}</a>
-  <!-- Default Text Link -->
   <a v-else @click="handleClick" :href="href">{{text}}</a>
 </template>
 
@@ -54,9 +50,6 @@ a {
     display: inline-flex;
     text-transform: capitalize;
     white-space: nowrap;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
   }
   &.footer-link {
     color: $gray-600;

From ec07dc47306c25f47a60e647d5a0382fa508b7b8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 1 Feb 2022 10:37:21 -0500
Subject: [PATCH 13/22] WIP add unit test.

---
 .../funnel-footer/funnel-footer.spec.js       | 31 ++++++++++++++++-
 .../funnel-footer/funnel-footer.vue           | 34 +++++++++----------
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index 3d0843e10..ef2049eb5 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -1 +1,30 @@
-test.todo("some test to be written in the future");
+import { mount } from "@vue/test-utils";
+import funnelFooter from "./funnel-footer";
+
+describe("funnel-footer.vue", () => {
+
+  it("Should return footer-link class", async () => {
+    // Act
+    try {
+      global.document.getElementById = jest.fn().mockImplementation(()=> {
+        return {}
+      });
+
+      const wrapper = mount(funnelFooter, {
+        propsData: {
+          footer: true
+        },
+      });
+
+      // Assert
+      const link = wrapper.find("a");
+
+      // Expect
+      expect(link.attributes('class')).toContain("footer-link");
+      expect(global.document.getElementById).toBeCalled();
+    } catch(error) {
+      console.log(error);
+    }
+    
+  });
+});
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 05976863a..90c380b08 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -56,24 +56,24 @@ export default {
     buttonMain
   },
   data() {
-        return {
-            paddingHeight: 0
-        }
-    },
-    mounted() {
-        this.paddingHeight = document.getElementById("infoBox").offsetHeight
-        this.$nextTick(() => {
-            window.addEventListener('resize', this.onResize);
-        })
-    },
-    beforeUnmount() {
-        window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-        onResize() {
-            this.paddingHeight = document.getElementById("infoBox").offsetHeight
-        }
+    return {
+      paddingHeight: 0
     }
+  },
+  mounted() {
+    this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+    }
+  }
 };
 setTimeout(function(){ // Give it a moment to set the date
   document.getElementById('years').innerHTML += new Date().getFullYear();

From 79588647d03946d297618e2f1008f027f8f1ac15 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 1 Feb 2022 14:41:26 -0500
Subject: [PATCH 14/22] Update unit test. Add isRequired to make model pages.

---
 .../funnel-footer/funnel-footer.spec.js       | 32 ++++++++++++++++++-
 .../make-question/make-question.vue           |  1 +
 .../model-question/model-question.vue         |  1 +
 .../style-question/style-question.vue         |  1 +
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index ef2049eb5..f1a885dfd 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -25,6 +25,36 @@ describe("funnel-footer.vue", () => {
     } catch(error) {
       console.log(error);
     }
-    
+
   });
+
+  it("Should return link text", async () => {
+    // Act
+    const wrapper = mount(funnelFooter, {
+      propsData: {
+        text: "Terms of use",
+      },
+    });
+
+    // Assert
+    const link = wrapper.find("a");
+
+    expect(link.text()).toEqual("Terms of use");
+  });
+
+  it("Should return class btn-primary", async () => {
+    // Act
+    const wrapper = mount(funnelFooter, {
+      propsData: {
+        isPrimary: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("button");
+
+    // Expect
+    expect(input.attributes("class")).toContain("btn-primary");
+  });
+
 });
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 2a94deafe..64d58ab95 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -8,6 +8,7 @@
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
+    isRequired=true
   />
 </template>
 
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 34a811e27..17edc6d85 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -8,6 +8,7 @@
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
+    isRequired=true
   />
 </template>
 
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index f82ac6981..11880aacd 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -8,6 +8,7 @@
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
+    isRequired=true
   />
 </template>
 

From 5ccccc25483cea13474d80bd2a936d08dde8ebec Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 1 Feb 2022 14:49:21 -0500
Subject: [PATCH 15/22] Created state invalidation

---
 src/constants/store-actions.js                |  9 ++-
 src/constants/store-mutations.js              | 15 +++++
 src/helpers/event-bus/event-bus.js            |  6 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  7 ++-
 src/layouts/vehicle-make/vehicle-make.spec.js |  4 +-
 src/layouts/vehicle-make/vehicle-make.vue     | 21 ++++++-
 .../vehicle-model/vehicle-model.spec.js       |  4 +-
 src/layouts/vehicle-model/vehicle-model.vue   | 19 ++++++-
 .../vehicle-style/vehicle-style.spec.js       |  4 +-
 src/layouts/vehicle-style/vehicle-style.vue   | 13 ++++-
 src/layouts/vehicle-year/vehicle-year.vue     | 20 ++++++-
 src/router/index.js                           | 51 ++++++++++++-----
 src/store/index.js                            | 55 ++++++++++++++++++-
 13 files changed, 192 insertions(+), 36 deletions(-)

diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 263f153df..177211ae0 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -11,9 +11,12 @@ const storeActions = {
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
-  // EVENT BUS
-  ADD_EVENT_TO_BUS: "addEventToBus",
-  REMOVE_EVENT_FROM_BUS: "removeEventFromBus",
+
+  // DEPENDENCY MUTATIONS
+  RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
+  RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
+  RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
+  RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
 };
 
 export { storeActions };
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index 61882b691..c52c955f0 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -1,9 +1,24 @@
 const storeMutations = {
+
+  // VEHICLE MUTATIONS
   UPDATE_YEAR: "updateYear",
   UPDATE_MAKE: "updateMake",
   UPDATE_MODEL: "updateModel",
   UPDATE_STYLE: "updateStyle",
+  UPDATE_CAR_ID: "updateCarId",
+  UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory",
   UPDATE_VEHICLE: "updateVehicle",
+
+  // EVENT BUS MUTATIONS
+  ADD_EVENT_TO_BUS: "addEventToBus",
+  REMOVE_EVENT_FROM_BUS: "removeEventFromBus",
+
+  // DEPENDENCY MUTATIONS
+  RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
+  RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
+  RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
+  RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
+  
 };
 
 export { storeMutations };
diff --git a/src/helpers/event-bus/event-bus.js b/src/helpers/event-bus/event-bus.js
index 47f229210..19b30870c 100644
--- a/src/helpers/event-bus/event-bus.js
+++ b/src/helpers/event-bus/event-bus.js
@@ -1,10 +1,10 @@
 import store from "@/store";
-import { storeActions } from "@/constants/store-actions.js";
+import { storeMutations } from "@/constants/store-mutations.js";
 
 export default {
   // Adds event to the bus given its category, subcategory, and eventValue;
   addEventToBus(category, subCategory, eventValue) {
-    store.commit(storeActions.ADD_EVENT_TO_BUS, {
+    store.commit(storeMutations.ADD_EVENT_TO_BUS, {
       category: category,
       subCategory: subCategory,
       eventValue: eventValue,
@@ -15,7 +15,7 @@ export default {
   readAndPopEventFromBus(category, subCategory) {
     const event = store.getters.eventBusItem(category, subCategory);
 
-    store.commit(storeActions.REMOVE_EVENT_FROM_BUS, {
+    store.commit(storeMutations.REMOVE_EVENT_FROM_BUS, {
       category: category,
       subCategory: subCategory,
     });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ba46df331..b27259e49 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -18,9 +18,10 @@ import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-ques
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import { storeActions } from "@/constants/store-actions";
+
 
 export default {
   name: "vehicle-damage",
@@ -69,6 +70,10 @@ export default {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
     },
+    resetDependentState() {
+      // Invokes
+      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+    },
   },
   components: {
     funnelHeader,
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 146dd6318..b3a006c20 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -153,7 +153,7 @@ describe("vehicle-make.vue", () => {
       pageHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn(),
+          navigateForward: jest.fn(),
         },
       },
     });
@@ -170,7 +170,7 @@ describe("vehicle-make.vue", () => {
 
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
       done();
     });
   });
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 111b16e5f..f95172547 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -25,7 +25,10 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+
 export default {
   name: "vehicle-make",
   data() {
@@ -75,17 +78,31 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.$router.navigateForward(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
     },
     arePagePrerequisitesValid() {
       return store.getters.vehicle.year !== null;
     },
+    resetDependentState() {
+      // Set
+      store.commit(storeMutations.UPDATE_MODEL, null);
+      store.commit(storeMutations.UPDATE_STYLE, null);
+      store.commit(storeMutations.UPDATE_CAR_ID, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+
+      // Invokes
+      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+    },
   },
 
   watch: {
     selectedMake(make) {
       this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
-      this.$router.navigate(
+      this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_MAKE,
         this.$route
       );
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index 4c61215ba..b1e240288 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -141,7 +141,7 @@ describe("vehicle-model.vue", () => {
       pageHeaderWidgetHeaderText: "Select a model to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn(),
+          navigateForward: jest.fn(),
         },
       },
     });
@@ -156,7 +156,7 @@ describe("vehicle-model.vue", () => {
     await nextTick();
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
       done();
     });
   });
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index b27b98d40..06794e9a2 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -24,6 +24,8 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 
@@ -77,17 +79,30 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.$router.navigateForward(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
     },
     arePagePrerequisitesValid() {
       return store.getters.vehicle.make !== null;
     },
+    resetDependentState() {
+      // Set
+      store.commit(storeMutations.UPDATE_STYLE, null);
+      store.commit(storeMutations.UPDATE_CAR_ID, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+
+      // Invokes
+      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+    },
   },
 
   watch: {
     selectedModel(model) {
       this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
-      this.$router.navigate(
+      this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_MODEL,
         this.$route
       );
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index 183b22d57..e52818cf6 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -154,7 +154,7 @@ describe("vehicle-style.vue", () => {
       pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn(),
+          navigateForward: jest.fn(),
         },
       },
     });
@@ -171,7 +171,7 @@ describe("vehicle-style.vue", () => {
 
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
       done();
     });
   });
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 7193c9e39..ec1cd4598 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -25,6 +25,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 
 export default {
@@ -77,7 +78,10 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.$router.navigateForward(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
     },
     setVehicle() {
       return this.dispatchNonBlockingStoreAction(
@@ -93,13 +97,18 @@ export default {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.model !== null;
     },
+    resetDependentState() {
+      // Invokes
+      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+    },
   },
 
   watch: {
     selectedStyle(style) {
       this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
       this.setVehicle().then(() => {
-        this.$router.navigate(
+        this.$router.navigateAfterSave(
           this.navigationScenarios.SELECTED_STYLE,
           this.$route
         );
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index ddef0d5a8..aeeaecf94 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -20,7 +20,9 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import eventBus from "@/helpers/event-bus/event-bus";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
 
 export default {
   name: "vehicle-year",
@@ -71,8 +73,9 @@ export default {
 
   watch: {
     selectedYear(year) {
+
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.navigate(
+      this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,
         this.$route
       );
@@ -82,6 +85,19 @@ export default {
     arePagePrerequisitesValid() {
       return true;
     },
+    resetDependentState() {
+
+      // Set
+      store.commit(storeMutations.UPDATE_MAKE, null);
+      store.commit(storeMutations.UPDATE_MODEL, null);
+      store.commit(storeMutations.UPDATE_STYLE, null);
+      store.commit(storeMutations.UPDATE_CAR_ID, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+
+      // Invokes
+      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+    }
   },
   components: {
     yearQuestion,
diff --git a/src/router/index.js b/src/router/index.js
index eb4942d6a..ac31a1c6d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,16 +45,16 @@ const routes = [
           // If we already have our route, go to it.
           if (router.hasRoute(to.query.fmgPage)) {
             // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
-            const arePagePrerequisitesValid = router
+            const component = router
               .getRoutes()
-              .filter((x) => x.name === to.query.fmgPage)[0]
-              .components.default.methods.arePagePrerequisitesValid();
+              .filter((x) => x.name === to.query.fmgPage)[0].components;
 
-            if (!arePagePrerequisitesValid) {
+            if (!arePagePrerequisitesValid(component)) {
               await GoToFunnelStartOn404(next);
             }
 
-            return next({ name: to.query.fmgPage, query: to.query, params: to.params });
+
+           return next({ name: to.query.fmgPage, query: to.query, params: to.params });
           }
 
           // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@@ -74,7 +74,7 @@ const routes = [
             .filter((x) => x.name === routeData[0].name)[0]
             .components.default();
 
-          if (!nextComponent.default.methods.arePagePrerequisitesValid()) {
+          if (!arePagePrerequisitesValid(nextComponent)) {
             await GoToFunnelStartOn404(next);
           }
 
@@ -102,23 +102,36 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
+router.navigateForward = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+  navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
+}
+
+router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+  navigate(scenario, currentRoute, true, optionalQuery, optionalParams);
+}
+
+// PRIVATE FUNCTIONS
+
 // Navigate to the next route, depending on the scenario.
-router.navigate = (
-  scenario,
-  currentRoute,
-  optionalQuery = {},
-  optionalParams = {}
-) => {
+function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}) {
   if (!scenario) {
     console.error("No scenario provided. Please review the routing table.");
     return;
   }
 
   // Match our maps up and navigate if we have a destination.
-  const matchingScenarioMap = router.getNavigationMap(scenario, currentRoute);
+  const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
 
   if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
+
+    // If we need to do invalidation
+    const currentComponent = currentRoute.matched[0].components;
+
+    if (invalidateOnSave) {
+      resetDependentState(currentComponent);
+    }
+
     router.push({
       name: "root",
       query: Object.assign(optionalQuery, {
@@ -132,7 +145,7 @@ router.navigate = (
 };
 
 // Get navigation map depending on the scenario and the current 'page' you're on.
-router.getNavigationMap = (scenario, currentRoute) => {
+function getNavigationMap(scenario, currentRoute) {
   const fmgPageValue = currentRoute.query.fmgPage;
   const matchedQueryValue = routingTable
     .filter(
@@ -197,4 +210,14 @@ async function GoToFunnelStartOn404(next) {
   });
 }
 
+// Checks arePagePrerequisitesValid on the component passed in.
+function arePagePrerequisitesValid(component) {
+  return component.default.methods.arePagePrerequisitesValid();
+}
+
+// Reset dependant state on route change.
+function resetDependentState(component) {
+  return component.default.methods.resetDependentState();
+}
+
 export default router;
diff --git a/src/store/index.js b/src/store/index.js
index 9d5078f74..22107ab76 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,7 +3,7 @@ import { endpoints } from "@/constants/endpoints.js";
 import { storeMutations } from "@/constants/store-mutations";
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
-import eventBus from "../helpers/event-bus/event-bus";
+
 
 export default createStore({
   plugins: [createPersistedState()],
@@ -35,6 +35,8 @@ export default createStore({
   // See IMPORTANT note at top of "state" declaration.
 
   mutations: {
+
+    // VEHICLE MUTATIONS
     updateYear(state, year) {
       state.order.vehicle.year = year;
     },
@@ -47,10 +49,18 @@ export default createStore({
     updateStyle(state, style) {
       state.order.vehicle.style = style;
     },
+    updateCarId(state, carId) {
+      state.order.vehicle.carId = carId;
+    },
+    updateVehicleCategory(state, category) {
+      state.order.vehicle.category = category;
+    },
     updateVehicle(state, data) {
       state.order.vehicle.carId = data.carId;
       state.order.vehicle.category = data.category;
     },
+
+    // EVENT BUS MUTATIONS
     addEventToBus(state, event) {
       state.applicationUser.eventBus.push(event);
     },
@@ -67,6 +77,31 @@ export default createStore({
         state.applicationUser.eventBus.splice(itemIndex, 1);
       }
     },
+
+    // DEPENDENCY MUTATIONS
+    resetVehicleAndDependencies(state) {
+      state.order.vehicle.year = null;
+      state.order.vehicle.make = null;
+      state.order.vehicle.model = null;
+      state.order.vehicle.style = null;
+      state.order.vehicle.carId = null;
+      state.order.vehicle.category = null;
+    },
+    resetDamageAndDependencies(state) {
+      state.order.vehicle.damage.isRepair = null;
+      state.order.vehicle.damage.numberOfChips = null;
+      state.order.vehicle.damage.windshieldGlassToReplace = null;
+      state.order.vehicle.damage.driverSideGlassToReplace = null;
+      state.order.vehicle.damage.passengerSideGlassToReplace = null;
+      state.order.vehicle.damage.rearGlassToReplace = null;
+
+    },
+    resetRegistrationAndDependencies(state) {
+
+    },
+    resetPartsAndDependencies(state) {
+
+    }
   },
   getters: {
     vehicle: (state) => state.order.vehicle,
@@ -146,6 +181,24 @@ export default createStore({
       });
     },
 
+    // DEPENDENCY ACTIONS
+    resetVehicleAndDependencies(context) {
+      context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
+      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    },
+    resetDamageAndDependencies(context) {
+      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    },
+    resetRegistrationAndDependencies(context) {
+      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS)
+    },
+    resetPartsAndDependencies(context) {
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    },
+
     // Content API Actions
     getRouteInfo(context, { pageName }) {
       return globalMethods.callHttpClient({

From fc0a0a1a59fa71b8a3b80ae1d83a67c049f94692 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 1 Feb 2022 15:18:15 -0500
Subject: [PATCH 16/22] Update image paths.

---
 src/layouts/component-test/component-test.vue | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index ded06272c..0b8ec119b 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -85,7 +85,7 @@
         />
         <listCard
           isMultiSelect
-          buttonImage="side-window-damage-right-all.svg"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
           buttonLabel="Windshield"
           altText=""
           buttonID="List Card Checkbox 2"
@@ -202,7 +202,7 @@
           <listCard
             isMultiSelect
             isWide
-            buttonImage="side-window-damage-right-all.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Side Window"
             altText=""
             buttonID="List Card Horizontal Checkbox b"
@@ -987,7 +987,7 @@ export default {
           Text: "List Card CB",
           SubText: "checkbox",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listCardRadio: [
@@ -996,7 +996,7 @@ export default {
           Text: "List Card R",
           SubText: "Radio",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listCardCheckBoxHorizontalSubText: [
@@ -1005,7 +1005,7 @@ export default {
           Text: "List Card CBHst",
           SubText: "With Subtext",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listCardCheckBoxHorizontal: [
@@ -1013,7 +1013,7 @@ export default {
           Name: "List-Card-CBH",
           Text: "List Card CBH",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listRadioHorizontalSubText: [
@@ -1022,7 +1022,7 @@ export default {
           Text: "List Card RHst",
           SubText: "With Subtext",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listRadioHorizontal: [
@@ -1030,7 +1030,7 @@ export default {
           Name: "List-Card-RH",
           Text: "List Card RH",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
       listCardGroup: [
@@ -1039,20 +1039,20 @@ export default {
           Text: "Side Window",
           SubText: "With Subtext",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
         {
           Name: "Side-Window-2",
           Text: "Side Window",
           SubText: "With Subtext that is more than one line",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
         {
           Name: "Side-Window-3",
           Text: "Side Window",
           ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "side-window-damage-right-all.svg",
+          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
         },
       ],
     };

From 5d9bfe0d0b731d15aa642e4f0e5d8163abd19eeb Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 1 Feb 2022 16:21:49 -0500
Subject: [PATCH 17/22] begin store mock

---
 .../vehicle-damage/vehicle-damage.spec.js     |  26 ++
 src/layouts/vehicle-make/vehicle-make.spec.js |  52 +++-
 src/layouts/vehicle-make/vehicle-make.vue     |   2 +-
 .../vehicle-model/vehicle-model.spec.js       |  38 ++-
 src/layouts/vehicle-model/vehicle-model.vue   |   2 +-
 .../vehicle-style/vehicle-style.spec.js       |   4 +-
 src/layouts/vehicle-style/vehicle-style.vue   |   2 +-
 src/layouts/vehicle-year/vehicle-year.spec.js |  52 +++-
 src/router/index.js                           |   2 +-
 src/store/index.js                            |   1 -
 src/store/store.spec.js                       | 228 +++++++++++++++++-
 11 files changed, 385 insertions(+), 24 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index caf008b78..0dbcc5c69 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -12,6 +12,8 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -25,6 +27,8 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 
 // Mock Store
 jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
   getters: {
     vehicle: {
       carId: "C00000000",
@@ -137,6 +141,28 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("Call invalidation, ResetPartsAndDeps should be called", async () => {
+    
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.resetDependentState();
+
+    //Assert
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
+
+  });
+});
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index b3a006c20..b2c4dcaf7 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -1,15 +1,23 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
+
+// Components
 import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import { settleAllPromises } from "@/helpers/layout-helper.js";
-import { nextTick } from "vue";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import store from "@/store";
 
 jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
   getters: {
     vehicle: {
       year: 2019,
@@ -27,9 +35,6 @@ jest.mock("@/helpers/layout-helper.js", () => ({
   settleAllPromises: jest.fn(),
 }));
 
-beforeEach(() => {
-  jest.resetModules();
-});
 
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
@@ -153,7 +158,7 @@ describe("vehicle-make.vue", () => {
       pageHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
-          navigateForward: jest.fn(),
+          navigate: jest.fn(),
         },
       },
     });
@@ -170,7 +175,7 @@ describe("vehicle-make.vue", () => {
 
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       done();
     });
   });
@@ -190,13 +195,40 @@ describe("vehicle-make.vue", () => {
     );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
 
     //Assert
     expect(arePagePrerequisitesValid).toBe(true);
   });
 });
 
+describe("vehicle-make.vue", () => {
+  test("Year set, call invalidation, model, style, carId, category should be null", async () => {
+    
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.resetDependentState();
+
+    //Assert
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_MODEL, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_STYLE, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
+
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+
+  });
+});
+
 function setupMocks({
   vehicleMakeQuestionCmsContent = {},
   makeQuestionInitialData = {},
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f95172547..b7be8f578 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -78,7 +78,7 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigateForward(
+      this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,
         this.$route
       );
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index b1e240288..7f8f96eb6 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -7,10 +7,13 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 
 // Supporting files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
-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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -24,6 +27,8 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 
 // Mock Store
 jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
   getters: {
     vehicle: {
       make: "Acura",
@@ -141,7 +146,7 @@ describe("vehicle-model.vue", () => {
       pageHeaderWidgetHeaderText: "Select a model to get started",
       mountOptionsMockData: {
         router: {
-          navigateForward: jest.fn(),
+          navigate: jest.fn(),
         },
       },
     });
@@ -156,7 +161,7 @@ describe("vehicle-model.vue", () => {
     await nextTick();
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       done();
     });
   });
@@ -182,6 +187,33 @@ describe("vehicle-model.vue", () => {
   });
 });
 
+describe("vehicle-model.vue", () => {
+  test("Year set, call invalidation, style, carId, category should be null", async () => {
+    
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.resetDependentState();
+
+    //Assert
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_STYLE, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
+
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+
+  });
+});
+
 function setupMocks({
   buttonQuestionContent = {},
   modelQuestionInitialData = {},
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 06794e9a2..72faea5a1 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -79,7 +79,7 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigateForward(
+      this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,
         this.$route
       );
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index e52818cf6..183b22d57 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -154,7 +154,7 @@ describe("vehicle-style.vue", () => {
       pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
-          navigateForward: jest.fn(),
+          navigate: jest.fn(),
         },
       },
     });
@@ -171,7 +171,7 @@ describe("vehicle-style.vue", () => {
 
     //Assert
     apiPromise.finally(() => {
-      expect(wrapper.vm.$router.navigateForward).toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       done();
     });
   });
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index ec1cd4598..8cf948cdc 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -78,7 +78,7 @@ export default {
   methods: {
     backButtonAction() {
       // route to move backwards
-      this.$router.navigateForward(
+      this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,
         this.$route
       );
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index 9b27e6555..5ef3ea404 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -1,18 +1,35 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+import { storeMutations } from "@/constants/store-mutations";
+import { storeActions } from "@/constants/store-actions";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import { settleAllPromises } from "@/helpers/layout-helper.js";
-import { nextTick } from "vue";
+
+import store from "@/store";
+
+jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: 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("vehicle-year.vue", () => {
   test("Year question component is initized with api data", async (done) => {
     //Arrange
@@ -123,6 +140,34 @@ describe("vehicle-year.vue", () => {
   });
 });
 
+describe("vehicle-year.vue", () => {
+  test("Year set, call invalidation, make, model, style, carId, category should be null", async () => {
+    
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-year" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.resetDependentState();
+
+    //Assert
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_MAKE, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_MODEL, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_STYLE, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
+    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
+
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+
+  });
+});
 function setupMocks({
   vehicleYearQuestionCmsContent = {},
   yearQuestionInitialData = {},
@@ -146,7 +191,9 @@ function setupMocks({
     yearQuestionInitialData: yearQuestionInitialData,
   };
   const apiPromise = Promise.resolve(apiResponses);
+
   settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
   //Mock year question methods
   yearQuestion.methods = {
@@ -162,6 +209,7 @@ function setupMocks({
   funnelSubHeader.methods = {
     initializeComponent: jest.fn(),
   };
+
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
diff --git a/src/router/index.js b/src/router/index.js
index ac31a1c6d..02859e660 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -102,7 +102,7 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
-router.navigateForward = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
   navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
 }
 
diff --git a/src/store/index.js b/src/store/index.js
index 22107ab76..41a78c5c8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -35,7 +35,6 @@ export default createStore({
   // See IMPORTANT note at top of "state" declaration.
 
   mutations: {
-
     // VEHICLE MUTATIONS
     updateYear(state, year) {
       state.order.vehicle.year = year;
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index e71f07909..0fd96f719 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,16 +1,240 @@
-import store from "./index";
 import globalMethods from "@/global-methods";
+import store from "@/store";
+
+// Mock Store
+jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
+  // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
+  //    * The CMS can reference the fields by name
+  //    * Return users may have a previous "version" of the model, and we don't want
+  //      them to have a breaking experience, because the model might have changed.
+  state: {
+    order: {
+      vehicle: {
+        year: null,
+        make: null,
+        model: null,
+        style: null,
+        carId: null,
+        category: null,
+        damage: {
+          isRepair: null,
+          numberOfChips: null,
+          glassToReplace: null,
+        },
+      },
+    },
+    applicationUser: {
+      eventBus: [],
+    },
+  },
+  // See IMPORTANT note at top of "state" declaration.
+
+  mutations: {
+    // VEHICLE MUTATIONS
+    updateYear: jest.fn(),
+    updateMake: jest.fn(),
+    updateModel(state, model) {
+      state.order.vehicle.model = model;
+    },
+    updateStyle(state, style) {
+      state.order.vehicle.style = style;
+    },
+    updateCarId(state, carId) {
+      state.order.vehicle.carId = carId;
+    },
+    updateVehicleCategory(state, category) {
+      state.order.vehicle.category = category;
+    },
+    updateVehicle(state, data) {
+      state.order.vehicle.carId = data.carId;
+      state.order.vehicle.category = data.category;
+    },
+
+    // EVENT BUS MUTATIONS
+    addEventToBus(state, event) {
+      state.applicationUser.eventBus.push(event);
+    },
+    removeEventFromBus(state, eventData) {
+      const matchedEvent = state.applicationUser.eventBus.find(
+        ({ category, subCategory }) =>
+          category === eventData.category &&
+          subCategory === eventData.subCategory
+      );
+      const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
+
+      // If the item exists, remove it.
+      if (itemIndex > -1) {
+        state.applicationUser.eventBus.splice(itemIndex, 1);
+      }
+    },
+
+    // DEPENDENCY MUTATIONS
+    resetVehicleAndDependencies(state) {
+      state.order.vehicle.year = null;
+      state.order.vehicle.make = null;
+      state.order.vehicle.model = null;
+      state.order.vehicle.style = null;
+      state.order.vehicle.carId = null;
+      state.order.vehicle.category = null;
+    },
+    resetDamageAndDependencies(state) {
+      state.order.vehicle.damage.isRepair = null;
+      state.order.vehicle.damage.numberOfChips = null;
+      state.order.vehicle.damage.windshieldGlassToReplace = null;
+      state.order.vehicle.damage.driverSideGlassToReplace = null;
+      state.order.vehicle.damage.passengerSideGlassToReplace = null;
+      state.order.vehicle.damage.rearGlassToReplace = null;
+
+    },
+    resetRegistrationAndDependencies(state) {
+
+    },
+    resetPartsAndDependencies(state) {
+
+    }
+  },
+  getters: {
+    vehicle: (state) => state.order.vehicle,
+    eventBusItem: (state) => (eventCategory, eventSubCategory) => {
+      const matchedEvent = state.applicationUser.eventBus.find(
+        ({ category, subCategory }) =>
+          category === eventCategory && subCategory === eventSubCategory
+      );
+
+      return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
+    },
+    eventBus: (state) => state.applicationUser.eventBus,
+  },
+  actions: {
+    // Vehicle API Actions
+    getVehicleYears(context) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleYears.method,
+        endpoint: endpoints.GetVehicleYears.url,
+        payload: {},
+      });
+    },
+    lookupVehicleByYmms(context, { year, make, model, style }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.LookupVehicleByYmms.method,
+        endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
+        payload: {},
+      });
+    },
+    lookupVehicleByVin(context, { vin }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.LookupVehicleByVin.method,
+        endpoint: endpoints.LookupVehicleByVin.url,
+        payload: {
+          vin: vin, // EX "1J4GW58S4XC541166"
+        },
+      });
+    },
+    getVehicleMakes(context, { year }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleMakes.method,
+        endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
+        payload: {},
+      });
+    },
+    getVehicleModels(context, { year, make }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleModels.method,
+        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
+        payload: {},
+      });
+    },
+    getVehicleStyles(context, { year, make, model }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleStyles.method,
+        endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
+        payload: {},
+      });
+    },
+    setVehicle(context, { year, make, model, style }) {
+      return globalMethods
+        .callHttpClient({
+          methods: endpoints.GetVehicle.method,
+          endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
+          payload: {},
+        })
+        .then((response) => {
+          context.commit(storeMutations.UPDATE_VEHICLE, response.data);
+          return response;
+        });
+    },
+    getDamageOptions(context, { carId }) {
+      return globalMethods.callHttpClient({
+        methods: endpoints.GetDamageOptions.method,
+        endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
+        payload: {},
+      });
+    },
+
+    // DEPENDENCY ACTIONS
+    resetVehicleAndDependencies(context) {
+      context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
+      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    },
+    resetDamageAndDependencies(context) {
+      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    },
+    resetRegistrationAndDependencies(context) {
+      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS)
+    },
+    resetPartsAndDependencies(context) {
+      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    },
+
+    // Content API Actions
+    getRouteInfo(context, { pageName }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetRouteInfo.method,
+        endpoint: endpoints.GetRouteInfo.url,
+        payload: {
+          pageName: pageName,
+        },
+      });
+    },
+    getHomepageName(context) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetHomepageInfo.method,
+        endpoint: endpoints.GetHomepageInfo.url,
+      });
+    },
+    getPageData(context, { pageName }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetPageData.method,
+        endpoint: `${endpoints.GetPageData.url}/${pageName}`,
+        payload: {},
+      });
+    },
+    getEvoxImage(context, { relativeUrl }) {
+      return globalMethods.callMockHttpClient({
+        method: endpoints.GetPageData.method,
+        endpoint: relativeUrl,
+        payload: {},
+      });
+    },
+  },
+}));
 
 describe("Actions", () => {
   it("Should return list of years retrieved", async () => {
     // Arrange
     let years = [];
-
+    console.log(getPageData);
     // Act
     globalMethods.callHttpClient = jest.fn();
     globalMethods.callHttpClient.mockImplementation(() => {
       return Promise.resolve({ data: [2023, 2022, 2021] });
     });
+
     await store.dispatch("getVehicleYears").then((response) => {
       years = response.data;
     });

From 66aa4190fbf49d28874ef8f8e88ede382b455673 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 1 Feb 2022 22:26:05 -0500
Subject: [PATCH 18/22] Unit test coverage to 89%, redid store / store tests

---
 jest.config.js                   |   2 +-
 src/constants/store-mutations.js |   1 -
 src/store/index.js               | 442 ++++++++---------
 src/store/store.spec.js          | 784 +++++++++++++------------------
 4 files changed, 559 insertions(+), 670 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index bce302e5a..36c4507fc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 87,
+      statements: 89,
     },
   },
 };
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index c52c955f0..f779b11cf 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -7,7 +7,6 @@ const storeMutations = {
   UPDATE_STYLE: "updateStyle",
   UPDATE_CAR_ID: "updateCarId",
   UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory",
-  UPDATE_VEHICLE: "updateVehicle",
 
   // EVENT BUS MUTATIONS
   ADD_EVENT_TO_BUS: "addEventToBus",
diff --git a/src/store/index.js b/src/store/index.js
index 41a78c5c8..2d35422a6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,227 @@ import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
 
 
+
+// Export State
+export const state = {
+  order: {
+    vehicle: {
+      year: null,
+      make: null,
+      model: null,
+      style: null,
+      carId: null,
+      category: null,
+      damage: {
+        isRepair: null,
+        numberOfChips: null,
+        glassToReplace: null,
+      },
+    },
+  },
+  applicationUser: {
+    eventBus: [],
+  },
+}
+
+// Export Mutations
+export const mutations = {
+  // VEHICLE MUTATIONS
+  updateYear(state, year) {
+    state.order.vehicle.year = year;
+  },
+  updateMake(state, make) {
+    state.order.vehicle.make = make;
+  },
+  updateModel(state, model) {
+    state.order.vehicle.model = model;
+  },
+  updateStyle(state, style) {
+    state.order.vehicle.style = style;
+  },
+  updateCarId(state, carId) {
+    state.order.vehicle.carId = carId;
+  },
+  updateVehicleCategory(state, category) {
+    state.order.vehicle.category = category;
+  },
+
+  // EVENT BUS MUTATIONS
+  addEventToBus(state, event) {
+    state.applicationUser.eventBus.push(event);
+  },
+  removeEventFromBus(state, eventData) {
+    const matchedEvent = state.applicationUser.eventBus.find(
+      ({ category, subCategory }) =>
+        category === eventData.category &&
+        subCategory === eventData.subCategory
+    );
+    const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
+
+    // If the item exists, remove it.
+    if (itemIndex > -1) {
+      state.applicationUser.eventBus.splice(itemIndex, 1);
+    }
+  },
+
+  // DEPENDENCY MUTATIONS
+  resetVehicleAndDependencies(state) {
+    state.order.vehicle.year = null;
+    state.order.vehicle.make = null;
+    state.order.vehicle.model = null;
+    state.order.vehicle.style = null;
+    state.order.vehicle.carId = null;
+    state.order.vehicle.category = null;
+  },
+  resetDamageAndDependencies(state) {
+    state.order.vehicle.damage.isRepair = null;
+    state.order.vehicle.damage.numberOfChips = null;
+    state.order.vehicle.damage.windshieldGlassToReplace = null;
+    state.order.vehicle.damage.driverSideGlassToReplace = null;
+    state.order.vehicle.damage.passengerSideGlassToReplace = null;
+    state.order.vehicle.damage.rearGlassToReplace = null;
+
+  },
+  resetRegistrationAndDependencies(state) {
+
+  },
+  resetPartsAndDependencies(state) {
+
+  }
+}
+
+// Export Getters
+export const getters = {
+  vehicle: (state) => state.order.vehicle,
+  eventBusItem: (state) => (eventCategory, eventSubCategory) => {
+    const matchedEvent = state.applicationUser.eventBus.find(
+      ({ category, subCategory }) =>
+        category === eventCategory && subCategory === eventSubCategory
+    );
+
+    return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
+  },
+  eventBus: (state) => state.applicationUser.eventBus,
+}
+
+// Export Actions
+export const actions = {
+  // Vehicle API Actions
+  getVehicleYears(context) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetVehicleYears.method,
+      endpoint: endpoints.GetVehicleYears.url,
+      payload: {},
+    });
+  },
+  lookupVehicleByYmms(context, { year, make, model, style }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.LookupVehicleByYmms.method,
+      endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
+      payload: {},
+    });
+  },
+  lookupVehicleByVin(context, { vin }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.LookupVehicleByVin.method,
+      endpoint: endpoints.LookupVehicleByVin.url,
+      payload: {
+        vin: vin, // EX "1J4GW58S4XC541166"
+      },
+    });
+  },
+  getVehicleMakes(context, { year }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetVehicleMakes.method,
+      endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
+      payload: {},
+    });
+  },
+  getVehicleModels(context, { year, make }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetVehicleModels.method,
+      endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
+      payload: {},
+    });
+  },
+  getVehicleStyles(context, { year, make, model }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetVehicleStyles.method,
+      endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
+      payload: {},
+    });
+  },
+  setVehicle(context, { year, make, model, style }) {
+    return globalMethods
+      .callHttpClient({
+        methods: endpoints.GetVehicle.method,
+        endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
+        payload: {},
+      })
+      .then((response) => {
+        context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
+        context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
+        return response;
+      });
+  },
+  getDamageOptions(context, { carId }) {
+    return globalMethods.callHttpClient({
+      methods: endpoints.GetDamageOptions.method,
+      endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
+      payload: {},
+    });
+  },
+
+  // DEPENDENCY ACTIONS
+  resetVehicleAndDependencies(context) {
+    context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
+    context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+    context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+  },
+  resetDamageAndDependencies(context) {
+    context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+    context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+  },
+  resetRegistrationAndDependencies(context) {
+    context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    context.commit(storeMutations.RESET_PARTS_AND_DEPS)
+  },
+  resetPartsAndDependencies(context) {
+    context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+  },
+
+  // Content API Actions
+  getRouteInfo(context, { pageName }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetRouteInfo.method,
+      endpoint: endpoints.GetRouteInfo.url,
+      payload: {
+        pageName: pageName,
+      },
+    });
+  },
+  getHomepageName(context) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetHomepageInfo.method,
+      endpoint: endpoints.GetHomepageInfo.url,
+    });
+  },
+  getPageData(context, { pageName }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetPageData.method,
+      endpoint: `${endpoints.GetPageData.url}/${pageName}`,
+      payload: {},
+    });
+  },
+  getEvoxImage(context, { relativeUrl }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetPageData.method,
+      endpoint: relativeUrl,
+      payload: {},
+    });
+  },
+}
+
 export default createStore({
   plugins: [createPersistedState()],
 
@@ -12,221 +233,8 @@ export default createStore({
   //    * The CMS can reference the fields by name
   //    * Return users may have a previous "version" of the model, and we don't want
   //      them to have a breaking experience, because the model might have changed.
-  state: {
-    order: {
-      vehicle: {
-        year: null,
-        make: null,
-        model: null,
-        style: null,
-        carId: null,
-        category: null,
-        damage: {
-          isRepair: null,
-          numberOfChips: null,
-          glassToReplace: null,
-        },
-      },
-    },
-    applicationUser: {
-      eventBus: [],
-    },
-  },
-  // See IMPORTANT note at top of "state" declaration.
-
-  mutations: {
-    // VEHICLE MUTATIONS
-    updateYear(state, year) {
-      state.order.vehicle.year = year;
-    },
-    updateMake(state, make) {
-      state.order.vehicle.make = make;
-    },
-    updateModel(state, model) {
-      state.order.vehicle.model = model;
-    },
-    updateStyle(state, style) {
-      state.order.vehicle.style = style;
-    },
-    updateCarId(state, carId) {
-      state.order.vehicle.carId = carId;
-    },
-    updateVehicleCategory(state, category) {
-      state.order.vehicle.category = category;
-    },
-    updateVehicle(state, data) {
-      state.order.vehicle.carId = data.carId;
-      state.order.vehicle.category = data.category;
-    },
-
-    // EVENT BUS MUTATIONS
-    addEventToBus(state, event) {
-      state.applicationUser.eventBus.push(event);
-    },
-    removeEventFromBus(state, eventData) {
-      const matchedEvent = state.applicationUser.eventBus.find(
-        ({ category, subCategory }) =>
-          category === eventData.category &&
-          subCategory === eventData.subCategory
-      );
-      const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
-
-      // If the item exists, remove it.
-      if (itemIndex > -1) {
-        state.applicationUser.eventBus.splice(itemIndex, 1);
-      }
-    },
-
-    // DEPENDENCY MUTATIONS
-    resetVehicleAndDependencies(state) {
-      state.order.vehicle.year = null;
-      state.order.vehicle.make = null;
-      state.order.vehicle.model = null;
-      state.order.vehicle.style = null;
-      state.order.vehicle.carId = null;
-      state.order.vehicle.category = null;
-    },
-    resetDamageAndDependencies(state) {
-      state.order.vehicle.damage.isRepair = null;
-      state.order.vehicle.damage.numberOfChips = null;
-      state.order.vehicle.damage.windshieldGlassToReplace = null;
-      state.order.vehicle.damage.driverSideGlassToReplace = null;
-      state.order.vehicle.damage.passengerSideGlassToReplace = null;
-      state.order.vehicle.damage.rearGlassToReplace = null;
-
-    },
-    resetRegistrationAndDependencies(state) {
-
-    },
-    resetPartsAndDependencies(state) {
-
-    }
-  },
-  getters: {
-    vehicle: (state) => state.order.vehicle,
-    eventBusItem: (state) => (eventCategory, eventSubCategory) => {
-      const matchedEvent = state.applicationUser.eventBus.find(
-        ({ category, subCategory }) =>
-          category === eventCategory && subCategory === eventSubCategory
-      );
-
-      return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
-    },
-    eventBus: (state) => state.applicationUser.eventBus,
-  },
-  actions: {
-    // Vehicle API Actions
-    getVehicleYears(context) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleYears.method,
-        endpoint: endpoints.GetVehicleYears.url,
-        payload: {},
-      });
-    },
-    lookupVehicleByYmms(context, { year, make, model, style }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.LookupVehicleByYmms.method,
-        endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
-        payload: {},
-      });
-    },
-    lookupVehicleByVin(context, { vin }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.LookupVehicleByVin.method,
-        endpoint: endpoints.LookupVehicleByVin.url,
-        payload: {
-          vin: vin, // EX "1J4GW58S4XC541166"
-        },
-      });
-    },
-    getVehicleMakes(context, { year }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleMakes.method,
-        endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
-        payload: {},
-      });
-    },
-    getVehicleModels(context, { year, make }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleModels.method,
-        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
-        payload: {},
-      });
-    },
-    getVehicleStyles(context, { year, make, model }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleStyles.method,
-        endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
-        payload: {},
-      });
-    },
-    setVehicle(context, { year, make, model, style }) {
-      return globalMethods
-        .callHttpClient({
-          methods: endpoints.GetVehicle.method,
-          endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
-          payload: {},
-        })
-        .then((response) => {
-          context.commit(storeMutations.UPDATE_VEHICLE, response.data);
-          return response;
-        });
-    },
-    getDamageOptions(context, { carId }) {
-      return globalMethods.callHttpClient({
-        methods: endpoints.GetDamageOptions.method,
-        endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
-        payload: {},
-      });
-    },
-
-    // DEPENDENCY ACTIONS
-    resetVehicleAndDependencies(context) {
-      context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
-      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
-      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
-    },
-    resetDamageAndDependencies(context) {
-      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
-    },
-    resetRegistrationAndDependencies(context) {
-      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS)
-    },
-    resetPartsAndDependencies(context) {
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
-    },
-
-    // Content API Actions
-    getRouteInfo(context, { pageName }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetRouteInfo.method,
-        endpoint: endpoints.GetRouteInfo.url,
-        payload: {
-          pageName: pageName,
-        },
-      });
-    },
-    getHomepageName(context) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetHomepageInfo.method,
-        endpoint: endpoints.GetHomepageInfo.url,
-      });
-    },
-    getPageData(context, { pageName }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetPageData.method,
-        endpoint: `${endpoints.GetPageData.url}/${pageName}`,
-        payload: {},
-      });
-    },
-    getEvoxImage(context, { relativeUrl }) {
-      return globalMethods.callMockHttpClient({
-        method: endpoints.GetPageData.method,
-        endpoint: relativeUrl,
-        payload: {},
-      });
-    },
-  },
+  state,
+  mutations,
+  getters,
+  actions,
 });
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 0fd96f719..28c727ab9 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,552 +1,434 @@
 import globalMethods from "@/global-methods";
-import store from "@/store";
+import { mutations, state, actions } from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
 
-// Mock Store
-jest.mock("@/store", () => ({
-  commit: jest.fn(),
-  dispatch: jest.fn(),
-  // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
-  //    * The CMS can reference the fields by name
-  //    * Return users may have a previous "version" of the model, and we don't want
-  //      them to have a breaking experience, because the model might have changed.
-  state: {
-    order: {
-      vehicle: {
-        year: null,
-        make: null,
-        model: null,
-        style: null,
-        carId: null,
-        category: null,
-        damage: {
-          isRepair: null,
-          numberOfChips: null,
-          glassToReplace: null,
-        },
-      },
-    },
-    applicationUser: {
-      eventBus: [],
-    },
-  },
-  // See IMPORTANT note at top of "state" declaration.
+// Mock global method
+globalMethods.callHttpClient = jest.fn();
 
-  mutations: {
-    // VEHICLE MUTATIONS
-    updateYear: jest.fn(),
-    updateMake: jest.fn(),
-    updateModel(state, model) {
-      state.order.vehicle.model = model;
-    },
-    updateStyle(state, style) {
-      state.order.vehicle.style = style;
-    },
-    updateCarId(state, carId) {
-      state.order.vehicle.carId = carId;
-    },
-    updateVehicleCategory(state, category) {
-      state.order.vehicle.category = category;
-    },
-    updateVehicle(state, data) {
-      state.order.vehicle.carId = data.carId;
-      state.order.vehicle.category = data.category;
-    },
+describe("Mutations", () => {
 
-    // EVENT BUS MUTATIONS
-    addEventToBus(state, event) {
-      state.applicationUser.eventBus.push(event);
-    },
-    removeEventFromBus(state, eventData) {
-      const matchedEvent = state.applicationUser.eventBus.find(
-        ({ category, subCategory }) =>
-          category === eventData.category &&
-          subCategory === eventData.subCategory
-      );
-      const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
+  it("Updates vehicle year in state", () => {
+    // Arrange
+    const storeState = state;
 
-      // If the item exists, remove it.
-      if (itemIndex > -1) {
-        state.applicationUser.eventBus.splice(itemIndex, 1);
-      }
-    },
+    // Act
+    mutations.updateYear(storeState, "2019");
 
-    // DEPENDENCY MUTATIONS
-    resetVehicleAndDependencies(state) {
-      state.order.vehicle.year = null;
-      state.order.vehicle.make = null;
-      state.order.vehicle.model = null;
-      state.order.vehicle.style = null;
-      state.order.vehicle.carId = null;
-      state.order.vehicle.category = null;
-    },
-    resetDamageAndDependencies(state) {
-      state.order.vehicle.damage.isRepair = null;
-      state.order.vehicle.damage.numberOfChips = null;
-      state.order.vehicle.damage.windshieldGlassToReplace = null;
-      state.order.vehicle.damage.driverSideGlassToReplace = null;
-      state.order.vehicle.damage.passengerSideGlassToReplace = null;
-      state.order.vehicle.damage.rearGlassToReplace = null;
+    // Assert
+    expect(storeState.order.vehicle.year).toEqual("2019");
+  });
 
-    },
-    resetRegistrationAndDependencies(state) {
+  it("Updates vehicle make in state", () => {
+    // Arrange
+    const storeState = state;
 
-    },
-    resetPartsAndDependencies(state) {
+    // Act
+    mutations.updateMake(storeState, "Acura");
 
+    // Assert
+    expect(storeState.order.vehicle.make).toEqual("Acura");
+  });
+
+  it("Updates vehicle model in state", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.updateModel(storeState, "ILX");
+
+    // Assert
+    expect(storeState.order.vehicle.model).toEqual("ILX");
+  });
+
+  it("Updates vehicle style in state", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.updateStyle(storeState, "4 DOOR SEDAN");
+
+    // Assert
+    expect(storeState.order.vehicle.style).toEqual("4 DOOR SEDAN");
+  });
+
+  it("Updates vehicle carId in state", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.updateCarId(storeState, "C0000001");
+
+    // Assert
+    expect(storeState.order.vehicle.carId).toEqual("C0000001");
+  });
+
+  it("Updates vehicle vehicle category in state", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.updateVehicleCategory(storeState, "CAR");
+
+    // Assert
+    expect(storeState.order.vehicle.category).toEqual("CAR");
+  });
+
+  it("Remove item to eventBus in state", () => {
+    // Arrange
+    const storeState = state;
+    const event = { category: "CategoryOne", subCategory: "SubCategoryOne" }
+
+    // Act / Assert
+    mutations.addEventToBus(storeState, event);
+    expect(storeState.applicationUser.eventBus).toEqual([event]);
+
+    // Act / Assert
+    mutations.removeEventFromBus(storeState, event);
+    expect(storeState.applicationUser.eventBus).toEqual([]);
+
+  });
+
+  it("Adds item to eventBus in state", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.addEventToBus(storeState, { EventOne: "ValueOne" });
+
+    // Assert
+    expect(storeState.applicationUser.eventBus).toEqual([{ EventOne: "ValueOne" }]);
+  });
+
+  it("resetVehicleAndDependencies, should set fields to null", () => {
+    // Arrange
+    const storeState = state;
+
+    mutations.updateYear(storeState, "2019");
+    mutations.updateMake(storeState, "Acura");
+    mutations.updateModel(storeState, "ILX");
+    mutations.updateStyle(storeState, "4 DOOR SEDAN");
+    mutations.updateCarId(storeState, "C0000001");
+    mutations.updateVehicleCategory(storeState, "CAR");
+
+    // Expect
+    expect(storeState.order.vehicle.year).toEqual("2019");
+    expect(storeState.order.vehicle.make).toEqual("Acura");
+    expect(storeState.order.vehicle.model).toEqual("ILX");
+    expect(storeState.order.vehicle.style).toEqual("4 DOOR SEDAN");
+    expect(storeState.order.vehicle.carId).toEqual("C0000001");
+    expect(storeState.order.vehicle.category).toEqual("CAR");
+
+    // Act
+    mutations.resetVehicleAndDependencies(storeState);
+
+    // Expect
+    expect(storeState.order.vehicle.year).toEqual(null);
+    expect(storeState.order.vehicle.make).toEqual(null);
+    expect(storeState.order.vehicle.model).toEqual(null);
+    expect(storeState.order.vehicle.style).toEqual(null);
+    expect(storeState.order.vehicle.carId).toEqual(null);
+    expect(storeState.order.vehicle.category).toEqual(null);
+
+  });
+
+  it("resetDamageAndDependencies, should set fields to null", () => {
+    // Arrange
+    const storeState = state;
+
+    storeState.order.vehicle.damage = {
+      isRepair: true,
+      numberOfChips: 2,
+      windshieldGlassToReplace: "Front",
+      driverSideGlassToReplace: "Rear",
+      passengerSideGlassToReplace: "Rear",
+      rearGlassToReplace: "Slider"
     }
-  },
-  getters: {
-    vehicle: (state) => state.order.vehicle,
-    eventBusItem: (state) => (eventCategory, eventSubCategory) => {
-      const matchedEvent = state.applicationUser.eventBus.find(
-        ({ category, subCategory }) =>
-          category === eventCategory && subCategory === eventSubCategory
-      );
 
-      return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
-    },
-    eventBus: (state) => state.applicationUser.eventBus,
-  },
-  actions: {
-    // Vehicle API Actions
-    getVehicleYears(context) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleYears.method,
-        endpoint: endpoints.GetVehicleYears.url,
-        payload: {},
-      });
-    },
-    lookupVehicleByYmms(context, { year, make, model, style }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.LookupVehicleByYmms.method,
-        endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
-        payload: {},
-      });
-    },
-    lookupVehicleByVin(context, { vin }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.LookupVehicleByVin.method,
-        endpoint: endpoints.LookupVehicleByVin.url,
-        payload: {
-          vin: vin, // EX "1J4GW58S4XC541166"
-        },
-      });
-    },
-    getVehicleMakes(context, { year }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleMakes.method,
-        endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
-        payload: {},
-      });
-    },
-    getVehicleModels(context, { year, make }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleModels.method,
-        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
-        payload: {},
-      });
-    },
-    getVehicleStyles(context, { year, make, model }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleStyles.method,
-        endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
-        payload: {},
-      });
-    },
-    setVehicle(context, { year, make, model, style }) {
-      return globalMethods
-        .callHttpClient({
-          methods: endpoints.GetVehicle.method,
-          endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
-          payload: {},
-        })
-        .then((response) => {
-          context.commit(storeMutations.UPDATE_VEHICLE, response.data);
-          return response;
-        });
-    },
-    getDamageOptions(context, { carId }) {
-      return globalMethods.callHttpClient({
-        methods: endpoints.GetDamageOptions.method,
-        endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
-        payload: {},
-      });
-    },
+    // Expect
+    expect(storeState.order.vehicle.damage.isRepair).toEqual(true);
+    expect(storeState.order.vehicle.damage.numberOfChips).toEqual(2);
+    expect(storeState.order.vehicle.damage.windshieldGlassToReplace).toEqual("Front");
+    expect(storeState.order.vehicle.damage.driverSideGlassToReplace).toEqual("Rear");
+    expect(storeState.order.vehicle.damage.passengerSideGlassToReplace).toEqual("Rear");
+    expect(storeState.order.vehicle.damage.rearGlassToReplace).toEqual("Slider");
 
-    // DEPENDENCY ACTIONS
-    resetVehicleAndDependencies(context) {
-      context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
-      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
-      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
-    },
-    resetDamageAndDependencies(context) {
-      context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
-    },
-    resetRegistrationAndDependencies(context) {
-      context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS)
-    },
-    resetPartsAndDependencies(context) {
-      context.commit(storeMutations.RESET_PARTS_AND_DEPS);
-    },
+    // Act
+    mutations.resetDamageAndDependencies(storeState);
 
-    // Content API Actions
-    getRouteInfo(context, { pageName }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetRouteInfo.method,
-        endpoint: endpoints.GetRouteInfo.url,
-        payload: {
-          pageName: pageName,
-        },
-      });
-    },
-    getHomepageName(context) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetHomepageInfo.method,
-        endpoint: endpoints.GetHomepageInfo.url,
-      });
-    },
-    getPageData(context, { pageName }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetPageData.method,
-        endpoint: `${endpoints.GetPageData.url}/${pageName}`,
-        payload: {},
-      });
-    },
-    getEvoxImage(context, { relativeUrl }) {
-      return globalMethods.callMockHttpClient({
-        method: endpoints.GetPageData.method,
-        endpoint: relativeUrl,
-        payload: {},
-      });
-    },
-  },
-}));
+    // Expect
+    expect(storeState.order.vehicle.damage.isRepair).toEqual(null);
+    expect(storeState.order.vehicle.damage.numberOfChips).toEqual(null);
+    expect(storeState.order.vehicle.damage.windshieldGlassToReplace).toEqual(null);
+    expect(storeState.order.vehicle.damage.driverSideGlassToReplace).toEqual(null);
+    expect(storeState.order.vehicle.damage.passengerSideGlassToReplace).toEqual(null);
+    expect(storeState.order.vehicle.damage.rearGlassToReplace).toEqual(null);
+
+  });
+
+});
 
 describe("Actions", () => {
-  it("Should return list of years retrieved", async () => {
+  it("getVehicleYears action, should return years array", async () => {
+
     // Arrange
-    let years = [];
-    console.log(getPageData);
+    const context = state;
+
     // Act
-    globalMethods.callHttpClient = jest.fn();
     globalMethods.callHttpClient.mockImplementation(() => {
       return Promise.resolve({ data: [2023, 2022, 2021] });
     });
 
-    await store.dispatch("getVehicleYears").then((response) => {
-      years = response.data;
-    });
-
     // Assert
-    expect(years[0]).toBe(2023);
+    const response = await actions.getVehicleYears(context)
+
+    expect(response.data).toEqual([2023, 2022, 2021]);
   });
 
-  it("Should return list of makes retrieved", async () => {
+  it("lookupVehicleByYmms action, should return car data", async () => {
+
     // Arrange
-    let makes = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({ data: ["Baic", "Honda", "Ford"] });
-    });
-    await store.dispatch("getVehicleMakes", { year: 2023 }).then((response) => {
-      makes = response.data;
+      return Promise.resolve({ data: { carId: "C00000001" } });
     });
 
     // Assert
-    expect(makes[0]).toBe("Baic");
+    const response = await actions.lookupVehicleByYmms(context, "2019", "Acura", "ILX", "4 DOOR SEDAN")
+
+    expect(response.data).toEqual({ carId: "C00000001" });
   });
 
-  it("Should return list of models retrieved", async () => {
+  it("lookupVehicleByVin action, should return car data", async () => {
+
     // Arrange
-    let models = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({ data: ["BJ40 (MEX)", "Civic", "Accord"] });
+      return Promise.resolve({ data: { carId: "C00000001" } });
     });
-    await store
-      .dispatch("getVehicleModels", { year: 2023, make: "Baic" })
-      .then((response) => {
-        models = response.data;
-      });
 
     // Assert
-    expect(models[0]).toBe("BJ40 (MEX)");
+    const response = await actions.lookupVehicleByVin(context, "12345678901234567")
+
+    expect(response.data).toEqual({ carId: "C00000001" });
   });
 
-  it("Should return list of styles retrieved", async () => {
+  it("getVehicleMakes action, should return makes list", async () => {
+
     // Arrange
-    let styles = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({ data: ["4 DOOR UTILITY", "2 DOOR"] });
+      return Promise.resolve({ data: ["Acura", "Honda"] });
     });
-    await store
-      .dispatch("getVehicleStyles", {
-        year: 2023,
-        make: "Baic",
-        model: "BJ40 (MEX)",
-      })
-      .then((response) => {
-        styles = response.data;
-      });
 
     // Assert
-    expect(styles[0]).toBe("4 DOOR UTILITY");
+    const response = await actions.getVehicleMakes(context, "2019")
+
+    expect(response.data).toEqual(["Acura", "Honda"]);
   });
 
-  it("Should return list of damage options retrieved", async () => {
+  it("getVehicleModels action, should return models list", async () => {
+
     // Arrange
-    let damageOptions = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({ data: ["Front Window", "Rear Window"] });
+      return Promise.resolve({ data: ["ILX", "RDX"] });
     });
-    await store
-      .dispatch("getDamageOptions", {
-        carId: "CR00070154",
-      })
-      .then((response) => {
-        damageOptions = response.data;
-      });
 
     // Assert
-    expect(damageOptions[0]).toBe("Front Window");
+    const response = await actions.getVehicleModels(context, "2019", "Acura")
+
+    expect(response.data).toEqual(["ILX", "RDX"]);
   });
 
-  it("Should return  data from url retrieved", async () => {
+  it("getVehicleStyles action, should return models list", async () => {
+
     // Arrange
-    let routeInfo = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({
-        data: {
-          Result: "Route Info Data",
-        },
-      });
+      return Promise.resolve({ data: { style: "4 DOOR SEDAN" } });
     });
-    await store
-      .dispatch("getRouteInfo", { pageName: "vehicle-year" })
-      .then((response) => {
-        routeInfo = response.data.Result;
-      });
 
     // Assert
-    expect(routeInfo).toBe("Route Info Data");
+    const response = await actions.getVehicleStyles(context, "2019", "Acura", "ILX")
+
+    expect(response.data).toEqual({ style: "4 DOOR SEDAN" });
   });
 
-  it("Should return page data from url retrieved", async () => {
+  it("setVehicle action, should get vehicle data and set carId and vehicle category", async () => {
+
     // Arrange
-    let pageData = [];
+    const context = state;
+    const commit = jest.fn();
+
+    context.commit = commit;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({
-        data: {
-          Result: "Page Info Data",
-        },
-      });
+      return Promise.resolve({ data: { carId: "C00000000", category: "CAR" } });
     });
-    await store
-      .dispatch("getPageData", { pageName: "vehicle-year" })
-      .then((response) => {
-        pageData = response.data.Result;
-      });
 
     // Assert
-    expect(pageData).toBe("Page Info Data");
+    const response = await actions.setVehicle(context, "C00000000")
+
+    expect(commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, "C00000000");
+    expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, "CAR");
+    expect(response.data).toEqual({ carId: "C00000000", category: "CAR" });
   });
 
-  it("Should return data from url retrieved", async () => {
+  it("getDamageOptions action", async () => {
+
     // Arrange
-    let returnData = [];
+    const context = state;
 
     // Act
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({
-        data: {
-          Result: "2018 Honda Civic",
-        },
-      });
+      return Promise.resolve({ data: ["Windshield", "DriversFrontDoor"] });
     });
-    await store
-      .dispatch("lookupVehicleByYmms", {
-        year: "2018",
-        make: "Honda",
-        model: "Civic",
-        style: "2 Door",
-      })
-      .then((response) => {
-        returnData = response.data.Result;
-      });
+
+    const response = await actions.getDamageOptions(context, "C00000000")
 
     // Assert
-    expect(returnData).toBe("2018 Honda Civic");
+    expect(response.data).toEqual(["Windshield", "DriversFrontDoor"]);
   });
 
-  it("Should return vehicle data from url retrieved", async () => {
+  it("resetVehicleAndDependencies action", async () => {
+
     // Arrange
-    let returnData = [];
+    const context = state;
+    const commit = jest.fn();
+
+    context.commit = commit;
 
     // Act
+    await actions.resetVehicleAndDependencies(context)
+
+    expect(commit).toBeCalledWith(storeMutations.RESET_VEHICLE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
+
+  });
+
+  it("resetDamageAndDependencies action", async () => {
+
+    // Arrange
+    const context = state;
+    const commit = jest.fn();
+
+    context.commit = commit;
+
+    // Act
+    await actions.resetDamageAndDependencies(context)
+
+    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+
+  });
+
+  it("resetRegistrationAndDependencies action", async () => {
+
+    // Arrange
+    const context = state;
+    const commit = jest.fn();
+
+    context.commit = commit;
+
+    // Act
+    await actions.resetRegistrationAndDependencies(context)
+
+    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+
+  });
+
+  it("resetPartsAndDependencies action", async () => {
+
+    // Arrange
+    const context = state;
+    const commit = jest.fn();
+
+    context.commit = commit;
+
+    // Act
+    await actions.resetPartsAndDependencies(context)
+
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+
+  });
+
+  it("getRouteInfo action, returns route info", async () => {
+
+    // Arrange
+    const context = state;
+
     globalMethods.callHttpClient.mockImplementation(() => {
-      return Promise.resolve({
-        data: {
-          Result: "2021 Honda Civic",
-        },
-      });
+      return Promise.resolve({ data: { Widget: "Data" } });
     });
-    await store
-      .dispatch("lookupVehicleByVin", { vin: "12345678" })
-      .then((response) => {
-        returnData = response.data.Result;
-      });
-
-    // Assert
-    expect(returnData).toBe("2021 Honda Civic");
-  });
-
-  it("Should return vehicle image data from url retrieved", async () => {
-    // Arrange
-    let returnData = [];
 
     // Act
-    globalMethods.callMockHttpClient = jest.fn();
-    globalMethods.callMockHttpClient.mockImplementation(() => {
-      return Promise.resolve({
-        data: {
-          Result: "2008_honda_civic.jpg",
-        },
-      });
+    const response = await actions.getRouteInfo(context, "vehicle-year")
+
+
+    expect(response.data).toEqual({ Widget: "Data" });
+
+  });
+
+  it("getHomepageName action, returns homepage name", async () => {
+
+    // Arrange
+    const context = state;
+
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: { Name: "vehicle-year" } });
     });
-    await store
-      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com" })
-      .then((response) => {
-        returnData = response.data.Result;
+
+    // Act
+    const response = await actions.getHomepageName(context)
+
+
+    expect(response.data).toEqual({ Name: "vehicle-year" });
+
+  });
+
+  it("getPageData action, returns page data", async () => {
+
+    // Arrange
+    const context = state;
+
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: { Results: [{ Widget: "Data" }] } });
+    });
+
+    // Act
+    const response = await actions.getPageData(context, "vehicle-year")
+
+
+    expect(response.data).toEqual({ Results: [{ Widget: "Data" }] });
+
+  });
+
+  it("getEvoxImage action, returns image url", async () => {
+      // Arrange
+      const context = state;
+
+      globalMethods.callHttpClient.mockImplementation(() => {
+        return Promise.resolve({ data: { imageUrl: "https://test.com" } });
       });
 
-    // Assert
-    expect(returnData).toBe("2008_honda_civic.jpg");
-  });
-});
+      // Act
+      const response = await actions.getEvoxImage(context, { relativeUrl: "https://relativeurl.com" } );
 
-describe("Mutations", () => {
-  it("Should update the year property in the store", () => {
-    // Act
-    store.commit("updateYear", 2020);
 
-    // Assert
-    expect(store.state.order.vehicle.year).toBe(2020);
+      expect(response.data).toEqual({ imageUrl: "https://test.com" });
   });
 
-  it("Should update the make property in the store", () => {
-    // Act
-    store.commit("updateMake", "Honda");
-
-    // Assert
-    expect(store.state.order.vehicle.make).toBe("Honda");
-  });
-
-  it("Should update the model property in the store", () => {
-    // Act
-    store.commit("updateModel", "Civic");
-
-    // Assert
-    expect(store.state.order.vehicle.model).toBe("Civic");
-  });
-
-  it("Should update the style property in the store", () => {
-    // Act
-    store.commit("updateStyle", "2 Door");
-
-    // Assert
-    expect(store.state.order.vehicle.style).toBe("2 Door");
-  });
-
-  it("Should update the carID and category propertys in the store", () => {
-    // Arrange
-    const carData = {
-      carId: "123abc",
-      category: "car",
-    };
-    // Act
-    store.commit("updateVehicle", carData);
-
-    // Assert
-    expect(store.state.order.vehicle.carId).toBe("123abc");
-    expect(store.state.order.vehicle.category).toBe("car");
-  });
-
-  it("Should add event onto bus and update state", () => {
-    // Arrange
-    const event = {
-      category: "TestCategoryOne",
-      subCategory: "TestSubCategoryOne",
-      eventValue: "TestEventValueOne",
-    };
-
-    // Act
-    store.commit("addEventToBus", event);
-
-    //Assert
-    expect(store.state.applicationUser.eventBus[0].category).toBe(
-      "TestCategoryOne"
-    );
-    expect(store.state.applicationUser.eventBus[0].subCategory).toBe(
-      "TestSubCategoryOne"
-    );
-    expect(store.state.applicationUser.eventBus[0].eventValue).toBe(
-      "TestEventValueOne"
-    );
-  });
-});
-
-describe("Getters", () => {
-  it("Should validate vehicle getter", () => {
-    // Arrange
-    const vehicle = store.getters.vehicle;
-
-    // Assert
-    expect(typeof vehicle).toBe("object");
-  });
-
-  it("Should get item from bus via getter", () => {
-    // Arrange
-    const event = {
-      category: "TestCategoryOne",
-      subCategory: "TestSubCategoryOne",
-      eventValue: "TestEventValueOne",
-    };
-
-    // Act
-    store.commit("addEventToBus", event);
-
-    // Assert
-    const returnedEventValue = store.getters.eventBusItem(
-      event.category,
-      event.subCategory
-    );
-    expect(returnedEventValue).toBe("TestEventValueOne");
-  });
-
-  it("Should get eventbus from getter, should have length > 0", () => {
-    // Arrange
-    const event = {
-      category: "TestCategoryOne",
-      subCategory: "TestSubCategoryOne",
-      eventValue: "TestEventValueOne",
-    };
-
-    // Act
-    store.commit("addEventToBus", event);
-
-    //Assert
-    expect(store.getters.eventBus.length).toBeGreaterThan(0);
-  });
-});
+});
\ No newline at end of file

From 0765361f5309395e510835fb1ab5cd810537f7ec Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 2 Feb 2022 10:04:30 -0500
Subject: [PATCH 19/22] more tests!

---
 src/store/index.js      | 22 +++++-----
 src/store/store.spec.js | 93 +++++++++++++++++++++++++++++++----------
 2 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 2d35422a6..a0c64fcfc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -16,11 +16,11 @@ export const state = {
       style: null,
       carId: null,
       category: null,
-      damage: {
-        isRepair: null,
-        numberOfChips: null,
-        glassToReplace: null,
-      },
+    },
+    damage: {
+      isRepair: null,
+      numberOfChips: null,
+      glassToReplace: null,
     },
   },
   applicationUser: {
@@ -78,12 +78,12 @@ export const mutations = {
     state.order.vehicle.category = null;
   },
   resetDamageAndDependencies(state) {
-    state.order.vehicle.damage.isRepair = null;
-    state.order.vehicle.damage.numberOfChips = null;
-    state.order.vehicle.damage.windshieldGlassToReplace = null;
-    state.order.vehicle.damage.driverSideGlassToReplace = null;
-    state.order.vehicle.damage.passengerSideGlassToReplace = null;
-    state.order.vehicle.damage.rearGlassToReplace = null;
+    state.order.damage.isRepair = null;
+    state.order.damage.numberOfChips = null;
+    state.order.damage.windshieldGlassToReplace = null;
+    state.order.damage.driverSideGlassToReplace = null;
+    state.order.damage.passengerSideGlassToReplace = null;
+    state.order.damage.rearGlassToReplace = null;
 
   },
   resetRegistrationAndDependencies(state) {
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 28c727ab9..f33595e58 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,10 +1,11 @@
 import globalMethods from "@/global-methods";
-import { mutations, state, actions } from "@/store";
+import { mutations, state, actions, getters } from "@/store";
 import { storeMutations } from "@/constants/store-mutations";
 
 // Mock global method
 globalMethods.callHttpClient = jest.fn();
 
+
 describe("Mutations", () => {
 
   it("Updates vehicle year in state", () => {
@@ -135,7 +136,7 @@ describe("Mutations", () => {
     // Arrange
     const storeState = state;
 
-    storeState.order.vehicle.damage = {
+    storeState.order.damage = {
       isRepair: true,
       numberOfChips: 2,
       windshieldGlassToReplace: "Front",
@@ -145,23 +146,23 @@ describe("Mutations", () => {
     }
 
     // Expect
-    expect(storeState.order.vehicle.damage.isRepair).toEqual(true);
-    expect(storeState.order.vehicle.damage.numberOfChips).toEqual(2);
-    expect(storeState.order.vehicle.damage.windshieldGlassToReplace).toEqual("Front");
-    expect(storeState.order.vehicle.damage.driverSideGlassToReplace).toEqual("Rear");
-    expect(storeState.order.vehicle.damage.passengerSideGlassToReplace).toEqual("Rear");
-    expect(storeState.order.vehicle.damage.rearGlassToReplace).toEqual("Slider");
+    expect(storeState.order.damage.isRepair).toEqual(true);
+    expect(storeState.order.damage.numberOfChips).toEqual(2);
+    expect(storeState.order.damage.windshieldGlassToReplace).toEqual("Front");
+    expect(storeState.order.damage.driverSideGlassToReplace).toEqual("Rear");
+    expect(storeState.order.damage.passengerSideGlassToReplace).toEqual("Rear");
+    expect(storeState.order.damage.rearGlassToReplace).toEqual("Slider");
 
     // Act
     mutations.resetDamageAndDependencies(storeState);
 
     // Expect
-    expect(storeState.order.vehicle.damage.isRepair).toEqual(null);
-    expect(storeState.order.vehicle.damage.numberOfChips).toEqual(null);
-    expect(storeState.order.vehicle.damage.windshieldGlassToReplace).toEqual(null);
-    expect(storeState.order.vehicle.damage.driverSideGlassToReplace).toEqual(null);
-    expect(storeState.order.vehicle.damage.passengerSideGlassToReplace).toEqual(null);
-    expect(storeState.order.vehicle.damage.rearGlassToReplace).toEqual(null);
+    expect(storeState.order.damage.isRepair).toEqual(null);
+    expect(storeState.order.damage.numberOfChips).toEqual(null);
+    expect(storeState.order.damage.windshieldGlassToReplace).toEqual(null);
+    expect(storeState.order.damage.driverSideGlassToReplace).toEqual(null);
+    expect(storeState.order.damage.passengerSideGlassToReplace).toEqual(null);
+    expect(storeState.order.damage.rearGlassToReplace).toEqual(null);
 
   });
 
@@ -417,18 +418,66 @@ describe("Actions", () => {
   });
 
   it("getEvoxImage action, returns image url", async () => {
-      // Arrange
-      const context = state;
+    // Arrange
+    const context = state;
 
-      globalMethods.callHttpClient.mockImplementation(() => {
-        return Promise.resolve({ data: { imageUrl: "https://test.com" } });
-      });
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: { imageUrl: "https://test.com" } });
+    });
 
-      // Act
-      const response = await actions.getEvoxImage(context, { relativeUrl: "https://relativeurl.com" } );
+    // Act
+    const response = await actions.getEvoxImage(context, { relativeUrl: "https://relativeurl.com" });
 
 
-      expect(response.data).toEqual({ imageUrl: "https://test.com" });
+    expect(response.data).toEqual({ imageUrl: "https://test.com" });
+  });
+
+});
+
+describe("Getters", () => {
+  it("Vehicle getter, should return vehicle data", () => {
+    // Arrange
+    const storeState = state;
+
+    // Act
+    mutations.updateYear(storeState, "2019");
+    mutations.updateMake(storeState, "Acura");
+    mutations.updateModel(storeState, "ILX");
+
+    // Assert
+    expect(getters.vehicle(storeState).year).toEqual("2019");
+    expect(getters.vehicle(storeState).make).toEqual("Acura");
+    expect(getters.vehicle(storeState).model).toEqual("ILX");
+
+  });
+
+  it("Get event bus item by event category and eventSubCategory", () => {
+    // Arrange
+    const storeState = state;
+    const event = { category: "CategoryOne", subCategory: "SubCategoryOne", eventValue: "EventValueOne" };
+
+    // Act
+    mutations.addEventToBus(storeState, event);
+
+    // Assert
+    //expect(storeState.applicationUser.eventBus).toEqual([event]);
+    expect(getters.eventBusItem(storeState)(event.category, event.subCategory)).toEqual(event.eventValue);
+
+  });
+
+  it("Get event bus", () => {
+    // Arrange
+    const storeState = state;
+    storeState.applicationUser.eventBus = [];
+
+    const event = { category: "CategoryOne", subCategory: "SubCategoryOne", eventValue: "EventValueOne" };
+
+    // Act
+    mutations.addEventToBus(storeState, event);
+
+    // Assert
+    expect(getters.eventBus(storeState)).toEqual([event]);
+
   });
 
 });
\ No newline at end of file

From 228d4a15e4fd801122ca3cb0479f825516a152a1 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 2 Feb 2022 11:10:59 -0500
Subject: [PATCH 20/22] Creating damage location question and refactoring
 button question methods

---
 .../button-question/button-question.spec.js   | 45 +++++-----
 .../button-question/button-question.vue       | 23 ++---
 .../damage-location-question.spec.js          | 83 +++++++++++++++++++
 .../damage-location-question.vue              | 68 +++++++++++++++
 .../vehicle-damage/vehicle-damage.spec.js     | 13 ++-
 src/layouts/vehicle-damage/vehicle-damage.vue | 17 +++-
 .../make-question/make-question.vue           |  2 +-
 src/layouts/vehicle-make/vehicle-make.vue     |  2 +-
 .../model-question/model-question.vue         |  2 +-
 src/layouts/vehicle-model/vehicle-model.vue   |  2 +-
 .../style-question/style-question.vue         |  2 +-
 src/layouts/vehicle-style/vehicle-style.vue   |  2 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  2 +-
 .../year-question/year-question.vue           |  2 +-
 .../list-button-horizontal.vue                |  7 +-
 src/ux-components/list-button/list-button.vue | 12 ++-
 src/ux-components/list-card/list-card.spec.js | 13 ++-
 src/ux-components/list-card/list-card.vue     | 17 ++--
 18 files changed, 252 insertions(+), 62 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
 create mode 100644 src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index e59b6da39..67e2f010e 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -1,25 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
-describe("buttonQuestion.vue", () => {
-  it("Should render the 'questionText' prop value as a span value for the button question and  the 'answer' values should render as text values for button components.", async () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      questionText: "Question Text",
-      answers: ["2023", "2022", "2021"],
-      modelValue: "2020",
-    });
-    wrapper.vm.chooseAnswer("2021");
-
-    // Assert
-    expect(wrapper.find(".text-center").text()).toEqual("Question Text");
-    const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
-    expect(buttonButtons.length).toBe(3);
-    expect(wrapper.props().modelValue).toBe("2020");
-  });
-});
-
 describe("buttonQuestion.vue", () => {
   it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
     // Act
@@ -34,7 +15,7 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should show appropriate classes for button type", async () => {
+  it("Fieldset classes should contain row if button type is listCard", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
     await wrapper.setProps({
@@ -46,6 +27,19 @@ describe("buttonQuestion.vue", () => {
   });
 });
 
+describe("buttonQuestion.vue", () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      buttonType: "listButtonHorizontal",
+    });
+    // Assert
+    const Div = wrapper.find('fieldset div');
+    expect(Div.classes()).toContain("d-flex");
+  });
+});
+
 describe("buttonQuestion.vue", () => {
   it("Should trigger event modelValue change on select", async () => {
     // Act
@@ -68,7 +62,7 @@ describe("buttonQuestion.vue", () => {
     await wrapper.setData({
       modelValueAnswers: ["Windshield", "BackDoor"]
     });
-    wrapper.vm.isItemChecked(true);
+    wrapper.vm.handleCheckedChanged(true);
     // Assert
     expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
   });
@@ -78,8 +72,13 @@ describe("buttonQuestion.vue", () => {
   it("Should not trigger event modelValue change on select if checked is false", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
-    wrapper.vm.isItemChecked(false);
+    wrapper.setData({
+      modelValueAnswers: ["Front-door"]
+    })
+    const val = {isChecked : false, buttonId: "Front-door"}
+    wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
   });
-});
\ No newline at end of file
+});
+
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 857e3e621..22756d683 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -11,9 +11,7 @@
               :is="buttonType" 
               v-for="answer in answers" 
               :key="answer.Name ? answer.Name : answer"
-              @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
-              @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
-              @isChecked="isItemChecked"
+              @isChecked="handleCheckedChanged"
               :buttonID="answer.Name ? answer.Name : answer"
               :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
@@ -32,6 +30,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
+              v-model="modelValue"
               data-test="button"
             />
           </div>
@@ -76,7 +75,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: [Array, String],
+    modelValue: Array,
   },
   computed: {
     getFieldSetClasses() {
@@ -103,23 +102,19 @@ export default {
   data(){
     return {
       modelValueAnswers: [],
-      chosenAnswer: String
     }
   },
   created(){
     if(Array.isArray(this.answers) && this.answers.length === 1) {
-      const onlyAnswer = typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0];
-      this.$emit("update:modelValue", onlyAnswer);
-    }
+      this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
+      this.$emit("update:modelValue", this.modelValueAnswers);
+    };
+    this.modelValueAnswers = this.modelValue;
   },
   methods: {
-    chooseAnswer(answer) {
-      this.chosenAnswer = answer;
-    },
-    isItemChecked(val) {
+    handleCheckedChanged(val) {
       // Add or remove item to array of data to emit
-      val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
-
+      val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
       this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
     },
   },
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
new file mode 100644
index 000000000..01f063eef
--- /dev/null
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -0,0 +1,83 @@
+import { shallowMount } from "@vue/test-utils";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("damage-location-question.vue", () => {
+    test("Selected location option is emitted upon selection.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+      const locationToSelect = ["Backseat"];
+  
+      //Act
+      wrapper.setValue({ modelValue: locationToSelect });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    });
+  });
+
+  describe("damage-location-question.vue", () => {
+    test("Answers to display filtered by data from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent, damageOptions } = setupMocks({ dataFromStoreApi: {
+                driverSideOptions: {
+                    availableReplacementOptions: ['Quarter', 'Front']
+                },
+                windshieldOptions: {
+                    availableReplacementOptions: ['Single']
+                },
+                backGlassOptions: {
+                    availableReplacementOptions: []
+                }
+            }
+        });
+  
+      //Act
+      damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
+  
+      //Assert
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Windshield", "SideDoor"],
+    isMultiSelect = false,
+    groupName = "damageQuestion",
+    cmsQuestionText = "CMS text goes here",
+    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-SideDoor"}, {Name: "car-RearWindow"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp,
+      isMultiSelect: isMultiSelect,
+    };
+   
+    const wrapper = shallowMount(damageLocationQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
new file mode 100644
index 000000000..97c08c3b8
--- /dev/null
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="replace-options-question">
+        <buttonQuestion
+            v-if="answersToDisplay.length > 1"
+            :questionText="questionText"
+            :isMultiSelect="isMultiSelect"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="modelValue"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+
+export default ({
+    name: "damageLocationQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+            groupName: String,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions, groupName){
+            this.groupName = groupName;
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        }
+    },
+    computed: {
+        damageOptionsMap(){
+            return {
+                Windshield: true,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOption ? true : false,
+            }
+        },
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
+                    }) 
+                : [];
+        },
+    },
+    watch: {
+        modelValue(val) {
+        this.$emit("update:modelValue", val);
+        }
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index caf008b78..7817d743c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -3,7 +3,8 @@ import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -192,6 +193,10 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  damageLocationQuestion.methods = {
+    initializeComponent: jest.fn(),
+  }
+
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleDamage, mountOptions);
 
@@ -215,5 +220,11 @@ function setupMocks({
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const damageLocationQuestionWrapper = wrapper.findComponent({
+    name: "damageLocationQuestion",
+  });
+  damageLocationQuestionWrapper.vm.initializeComponent =
+  damageLocationQuestion.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ba46df331..c820832de 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,8 @@
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
+        <damageLocationQuestion ref="damageLocation" isMultiSelect v-model="damageLocationQuestionData" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
     </div>
 </template>
 
@@ -15,6 +16,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -61,10 +63,20 @@ export default {
       vm.$refs.driverSideOptions.initializeComponent(
         resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
       );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions, 'DamageLocationQuestion'
+      );
 
-      //console.log(resultMap) for damageOptions and cms content data
+      // for damageOptions and cms content data
+      //console.log(resultMap)
     });
   },
+  data(){
+    return {
+      damageLocationQuestionData: [],
+      driverSideOptionsData: [],
+    }
+  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
@@ -75,6 +87,7 @@ export default {
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,
+    damageLocationQuestion,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 2a94deafe..70ba0f909 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -27,7 +27,7 @@ export default {
     };
   },
   props: {
-    modelValue: String,
+    modelValue: Array,
   },
   components: {
     buttonQuestion,
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 111b16e5f..087a10d8b 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -30,7 +30,7 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      selectedMake: null,
+      selectedMake: [],
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 34a811e27..312d6c45f 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -27,7 +27,7 @@ export default {
     };
   },
   props: {
-    modelValue: String,
+    modelValue: Array,
   },
   components: {
     buttonQuestion,
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index b27b98d40..917fcd348 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -31,7 +31,7 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      selectedModel: null,
+      selectedModel: [],
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index f82ac6981..2af223011 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -27,7 +27,7 @@ export default {
     };
   },
   props: {
-    modelValue: String,
+    modelValue: Array,
   },
   components: {
     buttonQuestion,
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 7193c9e39..7adff0b73 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -31,7 +31,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: null,
+      selectedStyle: [],
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index ddef0d5a8..afcece898 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -26,7 +26,7 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      selectedYear: null,
+      selectedYear: [],
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 3fa7de233..36af97bca 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -26,7 +26,7 @@ export default {
     };
   },
   props: {
-    modelValue: String,
+    modelValue: Array,
   },
   emits: ['update:modelValue'],
   components: {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index aa574c559..ece75e042 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -11,7 +11,7 @@
       :value="buttonID" 
       :aria-required="isRequired" 
       :data-focus-target="groupName" 
-      v-model="modelValue" 
+      v-model="checkValue" 
     />
     <label 
       tabindex="-1" 
@@ -74,6 +74,7 @@ export default {
   data() {
     return {
       isLoaderDisplayed: false,
+      checkValue: Boolean,
     };
   },
   methods: {
@@ -88,8 +89,8 @@ export default {
     },
   },
   watch: {
-    modelValue(){
-      this.$emit('isChecked', this.modelValue);
+    checkValue(){
+      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   components: {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 17a1e7a8b..f95c19696 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -11,7 +11,7 @@
       :value="buttonID" 
       :aria-required="isRequired" 
       :data-focus-target="groupName" 
-      v-model="modelValue"
+      v-model="checkValue"
     >
     <label 
       tabindex="-1" 
@@ -71,13 +71,17 @@ export default {
       type: [String, Number],
       default: "",
     },
-    modelValue: false
+    modelValue: [Array, String],
   },
   data() {
     return {
       isLoaderDisplayed: false,
+      checkValue: Boolean,
     };
   },
+  created(){
+    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -90,8 +94,8 @@ export default {
     },
   },
   watch: {
-    modelValue(){
-      this.$emit('isChecked', this.modelValue);
+    checkValue(){
+      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   components: {
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index c3d50142a..c89fca9a9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -12,6 +12,7 @@ describe("list-card.vue", () => {
         groupID: "checkbox-demo-1",
         groupName: "Checkbox 1",
         buttonImage: "windshield-damage.svg",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -31,6 +32,7 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -51,6 +53,7 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -71,6 +74,7 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -91,6 +95,7 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -111,6 +116,7 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         isRequired: true,
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -132,7 +138,8 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: true,
-        buttonLabelSubCopy: ""
+        buttonLabelSubCopy: "",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -153,7 +160,8 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: true,
-        buttonLabelSubCopy: "Button Subcopy"
+        buttonLabelSubCopy: "Button Subcopy",
+        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -174,6 +182,7 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
+        modelValue: ["List Card Checkbox"],
       },
     });
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index b93bbe3f0..b6b906ca2 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- Heavily documented below -->
   <div :class="'col' + colLength">
     <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" 
     :class="isWide ? 'horizontal' : ''" 
@@ -12,7 +11,7 @@
         :value="buttonID" 
         :aria-required="isRequired" 
         :data-focus-target="groupName" 
-        v-model="modelValue"
+        v-model="checkValue"
        />
       <label 
         :for="buttonID" 
@@ -71,7 +70,15 @@ export default {
       default: "",
     },
     colLength: String,
-    modelValue: false,
+    modelValue: [Array, String],
+  },
+  data(){
+    return {
+      checkValue: Boolean,
+    }
+  },
+  created(){
+    this.checkValue = this.modelValue.includes(this.buttonID);
   },
   computed: {
     getLabelClasses() {
@@ -87,8 +94,8 @@ export default {
     },
   },
   watch: {
-    modelValue(){
-      this.$emit('isChecked', this.modelValue);
+    checkValue(){
+      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   setup(props) {

From a7b571f7d4e495dae7d1348bebcb293f6d8a69c1 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Wed, 2 Feb 2022 11:12:48 -0500
Subject: [PATCH 21/22] Does this fix the deploy?

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ee8fdeb88..82561e1ca 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,7 @@
     },
     "extends": [
       "plugin:vue/vue3-essential",
-      "eslint:recommended",
-      "@vue/prettier"
+      "eslint:recommended"
     ],
     "parserOptions": {
       "parser": "babel-eslint"

From 3a0df4a4b140fd7e1e243f9aa8cb5894bafcf5bd Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 2 Feb 2022 13:04:39 -0500
Subject: [PATCH 22/22] Updating button question logic

---
 src/common-components/button-question/button-question.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 22756d683..13cb43240 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -104,12 +104,11 @@ export default {
       modelValueAnswers: [],
     }
   },
-  created(){
+  mounted(){
     if(Array.isArray(this.answers) && this.answers.length === 1) {
       this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
       this.$emit("update:modelValue", this.modelValueAnswers);
     };
-    this.modelValueAnswers = this.modelValue;
   },
   methods: {
     handleCheckedChanged(val) {