From 9b5fe2adf491ef2b4c23f54559cf647b69c4bdba Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 18 Feb 2022 09:48:29 -0500
Subject: [PATCH 1/7] Side Door Options

---
 .../side-door-options/side-door-options.vue   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/layouts/vehicle-damage/side-door-options/side-door-options.vue

diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
new file mode 100644
index 000000000..9f4cd0105
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="side-door-options">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+        />
+        <replaceOptionsQuestion />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+
+export default ({
+    name: "replaceOptionsQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+        }
+    },
+    props: {
+        groupName: String,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                    }) 
+                : [];
+        },
+    },
+    components: {
+        buttonQuestion,
+        replaceOptionsQuestion,
+    }
+})
+</script>
\ No newline at end of file

From 8974aa464cbd377d3c3276f1cd24f73275bfa041 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 21 Feb 2022 15:48:23 -0500
Subject: [PATCH 2/7] CSR-269 reset fields and remove unused

---
 .../windshield-options/windshield-options.vue | 23 +++----------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 8f57f61b7..db6569709 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -27,16 +27,6 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
-    data(){
-        return {
-            chipCountQuestionText: String,
-            chipCountAnswersFromCms: Array,
-
-            selectedWindshieldDamageType: null,
-            selectedWindshieldChipCount: null,
-            selectedWindshieldReplaceOptions: [],
-        }
-    },
 
     props: {
         modelValue: Array,
@@ -50,9 +40,6 @@ export default ({
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
             windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
 
-            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
-            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
-
             this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
             this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
             this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
@@ -79,9 +66,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldChipCount = null;
-                this.selectedValues.selectedWindshieldReplaceOptions = null;
-                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
+                this.selectedValues = this.getWindshieldOptions(newValue, null, null);
             }
         },
         selectedWindshieldChipCountValues: {
@@ -89,8 +74,7 @@ export default ({
                 return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldReplaceOptions = null;
-                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);
             }
         },
         selectedWindshieldReplaceOptionsValues: {
@@ -98,8 +82,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldReplaceOptions;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldChipCount = null;
-                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, null, newValue);
             }
         },
         isWindshieldDamageLocation() {

From 1e68d8c293f23b31234374713279cd24c4b65e74 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 09:57:31 -0500
Subject: [PATCH 3/7] CSR-341 Set z-index to fix overlap issue.

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 35a01ded9..af7044a04 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -133,7 +133,7 @@ export default {
     height: 0;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
-      z-index: 3;
+      z-index: 2;
     }
     &:focus + label {
       box-shadow: 0 0 0 2px $blue;
@@ -159,7 +159,7 @@ export default {
     &:hover {
       box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
-      z-index: 3 !important;
+      z-index: 4 !important;
     }
     + p {
       display: none;

From 830c4749555e1029636cc4e1ca308e7ee5a6e147 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:28:02 -0500
Subject: [PATCH 4/7] Adding groupname to buttons buttonIDs to ensure they are
 unique, and adjusting button emits to emit button value

---
 .../button-question/button-question.spec.js        |  4 ++--
 .../button-question/button-question.vue            | 14 ++++++++------
 .../list-button-horizontal.spec.js                 |  6 +++---
 .../list-button-horizontal.vue                     | 10 +++++-----
 src/ux-components/list-button/list-button.spec.js  |  6 +++---
 src/ux-components/list-button/list-button.vue      | 10 +++++-----
 src/ux-components/list-card/list-card.spec.js      |  8 ++++----
 src/ux-components/list-card/list-card.vue          | 10 +++++-----
 src/ux-components/radio/radio.vue                  |  2 +-
 9 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 464fcf245..d36b73012 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -53,7 +53,7 @@ describe("buttonQuestion.vue", () => {
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false
     });
-    const val = {isChecked: true, buttonId: "2021", }
+    const val = {checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@@ -69,7 +69,7 @@ describe("buttonQuestion.vue", () => {
         isMultiSelect: true,
       }
     });
-    const val = {isChecked: true, buttonId: "2019", }
+    const val = {checkValue: true, value: "2019", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e8cf4a967..71d79b31f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -12,7 +12,7 @@
               v-for="answer in answers"
               :key="answer.Name ? answer.Name : answer"
               @isCheckedChanged="handleCheckedChanged"
-              :buttonID="answer.Name ? answer.Name : answer"
+              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
               :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
@@ -29,7 +29,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="getColLength"
-              :selectedButtonIDs="selectedValues"
+              :selectedValues="selectedValues"
               data-test="button"
               :validationRules="validationRules"
             />
@@ -124,11 +124,13 @@ export default {
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit
-        const newSelectedValues = this.selectedValues;
-        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
-        this.selectedValues = newSelectedValues;
+        if(Array.isArray(this.selectedValues)) {
+          const newSelectedValues = this.selectedValues;
+          val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
+          this.selectedValues = newSelectedValues;  
+        }
       } else {
-        this.selectedValues = [val.buttonId];
+        this.selectedValues = [val.value];
       }
     },
   },
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index d1175620c..f95b378d7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -161,7 +161,7 @@ describe("list-button-horizontal.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -172,7 +172,7 @@ describe("list-button-horizontal.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -189,7 +189,7 @@ describe("list-button-horizontal.vue", () => {
         isWide: false,
         modelValue: ["List Card Checkbox"],
         isMultiSelect: false,
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
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 35a01ded9..b6f33676b 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -9,7 +9,7 @@
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
       :name="groupName"
-      :value="buttonID"
+      :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
@@ -69,7 +69,7 @@ export default {
       type: String,
       default: "",
     },
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -79,8 +79,8 @@ export default {
     };
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   methods: {
@@ -97,7 +97,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 1e900ce62..18707e45f 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -159,7 +159,7 @@ describe("list-button.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -170,7 +170,7 @@ describe("list-button.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -186,7 +186,7 @@ describe("list-button.vue", () => {
         isRequired: true,
         isWide: false,
         modelValue: ["List Card Checkbox"],
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 04a9c18e7..4727f9743 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -9,7 +9,7 @@
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
       :name="groupName"
-      :value="buttonID"
+      :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
@@ -71,7 +71,7 @@ export default {
       type: [String, Number],
       default: "",
     },
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -81,8 +81,8 @@ export default {
     };
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   methods: {
@@ -99,7 +99,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     },
   },
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 30af40ec3..a345c7b18 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -197,7 +197,7 @@ describe("list-card.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -208,7 +208,7 @@ describe("list-card.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -217,14 +217,14 @@ describe("list-card.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
         modelValue: ["List Card Checkbox"],
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 1fe25c408..59518deb7 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -8,7 +8,7 @@
         :type="isMultiSelect ? 'checkbox' : 'radio'"
         :id="buttonID"
         :name="groupName"
-        :value="buttonID"
+        :value="value"
         :aria-required="isRequired"
         :data-focus-target="groupName"
         @click="handleChange(value)"
@@ -70,7 +70,7 @@ export default {
     },
     colLength: String,
     validationRules: String,
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data(){
@@ -79,8 +79,8 @@ export default {
     }
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   computed: {
@@ -100,7 +100,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index aedead0eb..209b7ddab 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -54,7 +54,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },

From 1dfee19cfd02515b2e24c9f06c22ef87b6c1b198 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:29:16 -0500
Subject: [PATCH 5/7] Creating side-door-options component

---
 .../damage-location-question.spec.js          |   2 +-
 .../damage-location-question.vue              |   7 +-
 .../replace-options-question.spec.js          |   2 +-
 .../replace-options-question.vue              |  17 ++-
 .../side-door-options.spec.js                 | 124 ++++++++++++++++++
 .../side-door-options/side-door-options.vue   |  77 ++++++++++-
 .../vehicle-damage/vehicle-damage.spec.js     |  44 ++-----
 src/layouts/vehicle-damage/vehicle-damage.vue |  20 +--
 8 files changed, 233 insertions(+), 60 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js

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
index 01f063eef..92feec9b8 100644
--- 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
@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
       damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
     });
   });
 
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
index 58a74a31c..89b3244e3 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -67,13 +67,18 @@ export default ({
             }
         },
         answersToDisplay(){
-            return Array.isArray(this.answersFromCms) 
+            const filteredAnswers = 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]];
                     }) 
                 : [];
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
     },
     components: {
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
index df8a16f90..8a5ad8a50 100644
--- 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
@@ -30,7 +30,7 @@ describe("replace-options-question.vue", () => {
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
     });
   });
 
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 f47abea5d..081df53a8 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,7 @@
 <template>
-    <transition name="fade">
-        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
+    <transition name="fade" mode="out-in">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable"
                 isWide
                 :questionText="questionText"
                 isMultiSelect
@@ -61,17 +60,23 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
     },
     mounted(){
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
             const newSelectedValues = this.selectedValues;
             newSelectedValues.push(this.answersToDisplay[0].Name);
             this.selectedValues = newSelectedValues;
@@ -86,7 +91,7 @@ export default ({
 <style lang="scss" scoped>
     .fade-enter-active,
     .fade-leave-active {
-        transition: opacity 0.5s ease;
+        transition: opacity 0.3s ease;
     }
 
     .fade-enter-from,
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
new file mode 100644
index 000000000..32e6cf7f7
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -0,0 +1,124 @@
+import { shallowMount } from "@vue/test-utils";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+    test("Selected side door option is emitted upon selection.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+      const sideDoorOptions = ["Backseat"];
+  
+      //Act
+      wrapper.setValue({ modelValue: sideDoorOptions });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected door side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected driver side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected passenger side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
+    });
+  });
+
+
+  describe("replace-options-question.vue", () => {
+    test("Answers to display filtered by data from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions } = setupMocks({});
+  
+      //Act
+      sideDoorOptions.methods.initializeComponent.call(wrapper.vm, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions, "car-group");
+  
+      //Assert
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'DriverSide' }, { Name: 'PassengerSide' } ])
+    });
+  });
+  
+
+  function setupMocks({
+    modelValueProp = ["DriverSide"],
+    groupName = "sideDoorOptions",
+    cmsQuestionText = "CMS text goes here",
+    cmsAnswers = [{Name: "Car-DriverSide"}, {Name: "Car-PassengerSide"}],
+    driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
+    passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
+    driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
+    passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"]
+  }) {
+    
+    //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,
+      groupName: groupName,
+    };
+   
+    const wrapper = shallowMount(sideDoorOptions, mountOptions);
+  
+    const OptionsWrapper = wrapper.findAllComponents({name: "replaceOptionsQuestion"});
+    OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+    OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    return { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 9f4cd0105..63aedf580 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -6,9 +6,12 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="selectedValues"
+            v-model="selectedDoorSidesValues"
         />
-        <replaceOptionsQuestion />
+        
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
     </div>
 </template>
 
@@ -18,11 +21,15 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 import store from "@/store";
 
 export default ({
-    name: "replaceOptionsQuestion",
+    name: "sideDoorOptions",
     data(){
         return {
             questionText: String,
             answersFromCms: Array,
+            selectedDoorSides: [],
+            // Child component data
+            selectedDriverSideReplacOptions: [],
+            selectedPassengerSideReplaceOptions: [],
         }
     },
     props: {
@@ -30,9 +37,19 @@ export default ({
         modelValue: Array,
     },
     methods: {
-        initializeComponent(cmsContent){
+        initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
+            // Child Components intialize
+            this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
+            this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
+        },
+        getSideDoorReplacementOptions(){
+            return {
+                selectedDoorSides: this.selectedDoorSides,
+                selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
+                selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
+            }
         },
     },
     computed: {
@@ -44,15 +61,61 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
-        answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+        selectedDoorSidesValues: {
+            get: function() {
+                return this.selectedDoorSides;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedDoorSides", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+        selectedDriverSideReplacOptionsValues: {
+            get: function() {
+                return this.selectedDriverSideReplacOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedDriverSideReplacOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+        selectedPassengerSideReplaceOptionsValues: {
+            get: function() {
+                return this.selectedPassengerSideReplaceOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+         answersToDisplay(){
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                        return name[0].toUpperCase() === store.getters.vehicle.category;
                     }) 
                 : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
+        isDriverSideReplaceOptionsQuestionAvailable(){
+            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
+        },
+        isPassengerSideReplaceOptionsQuestionAvailable(){
+            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
+        },
+    },
+    mounted() {
+        if(typeof(this.selectedValues) === "object"){
+            this.selectedDoorSides = this.selectedValues.selectedDoorSides;
+            this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
+            this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
+        }
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..c7d994b89 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -4,7 +4,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 
 // Supporting Files
@@ -171,16 +171,6 @@ function setupMocks({
 }) {
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-    return Promise.resolve({
-      driverSideOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-      windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-    });
-  });
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -197,7 +187,7 @@ function setupMocks({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
-      windshieldOptions: {
+      passengerSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
@@ -221,20 +211,14 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const driverSideOptions = replaceOptionsQuestion
-  driverSideOptions.methods = {
-    initializeComponent: jest.fn(),
-  };
-
-  const windshieldOptions = replaceOptionsQuestion
-  windshieldOptions.methods = {
-    initializeComponent: jest.fn(),
-  };
-
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
+  sideDoorOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   funnelFooter.methods = {
     initializeComponent: jest.fn(),
   }
@@ -250,24 +234,16 @@ function setupMocks({
   vehicleBannerWrapper.vm.initializeComponent =
     vehicleBanner.methods.initializeComponent;
 
+  const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
+  sideDoorOptionsWrapper.vm.initializeComponent =
+  sideDoorOptions.methods.initializeComponent;
+
   const funnelSubHeaderWrapper = wrapper.findComponent({
     name: "funnelSubHeader",
   });
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const driverSideOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(0);
-  driverSideOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
-
-  const windshieldOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(1);
-  windshieldOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
-
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8a85de6b5..cbcdfe0f5 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,8 +4,7 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
+        <sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -16,7 +15,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 
 // Supporting files
@@ -63,14 +62,11 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.driverSideOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
-      );
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-      vm.$refs.windshieldOptions.initializeComponent(
-        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
@@ -80,7 +76,11 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
+        selectedDoorSides: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
       windshieldOptionsData: [],
     }
   },
@@ -105,7 +105,7 @@ export default {
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
-    replaceOptionsQuestion,
+    sideDoorOptions,
     damageLocationQuestion,
   },
 };

From 85378bbec5b97425b952db4d7cd4d22a5ff580c1 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:53:22 -0500
Subject: [PATCH 6/7] Move stripping vehicle category off from values logic
 into damage locations widget

---
 .../vehicle-damage/windshield-options/windshield-options.vue   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index db6569709..e407b33a9 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -88,8 +88,7 @@ export default ({
         isWindshieldDamageLocation() {
             return  this.selectedDamageLocations.some(selectedDamages => 
                 {
-                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
-                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+                    return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                 });
         },
         isRepairOptionSelected(){

From a4065160698f11896155f4d927b855ceb167c24c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 12:44:56 -0500
Subject: [PATCH 7/7] Fixing unit test for merged changes

---
 src/layouts/vehicle-damage/vehicle-damage.spec.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index a25c3eb4c..60590ba84 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -190,7 +190,7 @@ function setupMocks({
       },
       passengerSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
       windshieldOptions: {
         availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
@@ -246,6 +246,13 @@ function setupMocks({
   sideDoorOptionsWrapper.vm.initializeComponent =
   sideDoorOptions.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findComponent({
+    name: "windshieldOptions",
+  });
+  
+  windshieldOptionsWrapper.vm.initializeComponent =
+  windshieldOptions.methods.initializeComponent;
+
   const funnelSubHeaderWrapper = wrapper.findComponent({
     name: "funnelSubHeader",
   });