CSR-296: Merge develop, resolve conflicts and fix unit tests

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"]]);

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 && this.selectedValues) {
         // Add or remove item to array of data to emit
-        const newSelectedValues = this.selectedValues;
+        if(Array.isArray(this.selectedValues)) {
-        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
+          const newSelectedValues = this.selectedValues;
-        this.selectedValues = newSelectedValues;
+          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];
       }
     },
   },

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' } ])
     });
   });
 

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: {

src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js

@@ -31,12 +31,12 @@ 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' } ])
   });
 });
 
 describe("replace-options-question.vue", () => {
-  test("when updateSelectedValues method is called with a single answerToDisplay it will update this.selectedValues", async () => {
+  test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
 
     //Arrange
     const { wrapper, cmsContent, replaceOptions
@@ -56,9 +56,7 @@ describe("replace-options-question.vue", () => {
     //Act
     wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
 
-    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([['Stationary']]);
-    expect(wrapper.vm.selectedValues).toStrictEqual(['Stationary']);
-    
   });
 });
 
@@ -78,8 +76,6 @@ describe("replace-options-question.vue", () => {
   });
 });
 
-
-
 function setupMocks({
   modelValueProp = ["Windshield"],
   isAvailable = true,

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
-        <div class="replace-options-question">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 0"
                 isWide
                 :questionText="questionText"
                 :isMultiSelect="isMultiSelect"
@@ -54,10 +53,7 @@ export default ({
         updateSelectedValues() {
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
             if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
-                const newSelectedValues = this.selectedValues;
+                this.selectedValues = [this.answersToDisplay[0].Name];
-                newSelectedValues.push(this.answersToDisplay[0].Name);
-                console.log('YES, ONLY ONE, newSelectedValues: ', newSelectedValues)
-                this.selectedValues = newSelectedValues;
             }
         },
     },
@@ -71,18 +67,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;
+            });
         },
     },
     watch: {
         isAvailable(val) {
-            console.log('CHANGE DETECTED in isAvailable, val: ', val)
             // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
             val && this.updateSelectedValues();
         }
@@ -96,7 +97,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,

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 };
+  }

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="side-door-options">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedDoorSidesValues"
+        />
+        
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+    </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: "sideDoorOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            selectedDoorSides: [],
+            // Child component data
+            selectedDriverSideReplacOptions: [],
+            selectedPassengerSideReplaceOptions: [],
+        }
+    },
+    props: {
+        groupName: String,
+        modelValue: Array,
+    },
+    methods: {
+        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: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        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;
+                    }) 
+                : [];
+
+            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,
+        replaceOptionsQuestion,
+    }
+})
+</script>

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

@@ -4,9 +4,10 @@ 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";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -202,7 +203,7 @@ describe("vehicle-damage.vue", () => {
       (c) => c(wrapper.vm)
     );
 
-    wrapper.vm.selectedDamageLocations = ["Car-RearWindow"];
+    wrapper.vm.selectedDamageLocations = ["RearWindow"];
 
     //Assert
     expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
@@ -236,6 +237,9 @@ function setupMocks({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
+      passengerSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
       windshieldOptions: {
         availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
@@ -263,19 +267,22 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const driverSideOptions = replaceOptionsQuestion
-  driverSideOptions.methods = {
-    initializeComponent: jest.fn(),
-  };
-
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
+  sideDoorOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   windshieldOptions.methods = {
     initializeComponent: jest.fn(),
   };
 
+  replaceOptionsQuestion.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   funnelFooter.methods = {
     initializeComponent: jest.fn(),
   }
@@ -291,17 +298,9 @@ function setupMocks({
   vehicleBannerWrapper.vm.initializeComponent =
     vehicleBanner.methods.initializeComponent;
 
-  const funnelSubHeaderWrapper = wrapper.findComponent({
+  const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
-    name: "funnelSubHeader",
+  sideDoorOptionsWrapper.vm.initializeComponent =
-  });
+  sideDoorOptions.methods.initializeComponent;
-  funnelSubHeaderWrapper.vm.initializeComponent =
-    funnelSubHeader.methods.initializeComponent;
-
-  const driverSideOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(0);
-  driverSideOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
 
   const windshieldOptionsWrapper = wrapper.findComponent({
     name: "windshieldOptions",
@@ -310,10 +309,15 @@ function setupMocks({
   windshieldOptionsWrapper.vm.initializeComponent =
   windshieldOptions.methods.initializeComponent;
 
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
-  const backGlassOptionsWrapper = wrapper.findAllComponents({
+  const backGlassOptionsWrapper = wrapper.findComponent({
     name: "replaceOptionsQuestion",
-  }).at(2);
+  });
   backGlassOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -8,18 +8,11 @@
           v-model="selectedDamageLocations"
           groupName="DamageLocationQuestion"
         />
-        <replaceOptionsQuestion
+        <sideDoorOptions 
-          ref="driverSideOptions"
+          ref="sideDoorOptions" 
-          isAvailable
+          isAvailable 
-          filterByVehicleCategory
+          groupName="SideDoorSideQuestion" 
-          v-model="driverSideOptionsData"
+          v-model="sideDoorOptionsData" 
-          groupName="DriverSideReplaceOptionsQuestion"
-        />
-        <replaceOptionsQuestion
-          ref="windshieldOptions"
-          isAvailable
-          groupName="windshieldOptions"
-          v-model="windshieldOptionsData"
         />
         <windshieldOptions
           ref="windshieldOptions" 
@@ -42,9 +35,10 @@ 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";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -93,16 +87,16 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-      vm.$refs.driverSideOptions.initializeComponent(
+      vm.$refs.sideDoorOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-      );
-      vm.$refs.backGlassOptions.initializeComponent(
-        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
       );
       vm.$refs.windshieldOptions.initializeComponent(
         resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
         resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
       );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -113,8 +107,7 @@ export default {
       if (this.selectedDamageLocations) {
         const myTest = this.selectedDamageLocations.some(selectedDamages => 
           {
-              const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
+              return Boolean(selectedDamages.toUpperCase() === "REARWINDOW");
-              return Boolean(categoryAndGlass[1].toUpperCase() === "REARWINDOW");
           });
         return myTest;
       } else {
@@ -125,10 +118,13 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
-      selectedRearReplaceOptions: [],
+        selectedDoorSides: [],
-      windshieldOptionsData: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
       selectedWindshieldOptions: [],
+      selectedRearReplaceOptions: [],
     }
   },
   methods: {
@@ -152,9 +148,10 @@ export default {
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
-    replaceOptionsQuestion,
+    sideDoorOptions,
     damageLocationQuestion,
     windshieldOptions,
+    replaceOptionsQuestion,
   },
 };
 </script>

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(selectedDamages.toUpperCase() === "WINDSHIELD");
-                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
                 });
         },
         isRepairOptionSelected(){

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

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){
+    if(Array.isArray(this.selectedValues)){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+      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() });
       }
     }
   },

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

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){
+    if(Array.isArray(this.selectedValues)){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+      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() });
       }
     },
   },

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

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,9 +70,19 @@ export default {
     },
     colLength: String,
     validationRules: String,
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
+  data(){
+    return {
+      checkValue: Boolean,
+    }
+  },
+  created(){
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+    }
+  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -86,21 +96,11 @@ export default {
       }
     },
   },
-  data(){
-    return {
-      checkValue: Boolean,
-    }
-  },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-    }
-  },
   methods: {
     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() });
       }
     }
   },

src/ux-components/radio/radio.vue

@@ -55,7 +55,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() });
       }
     }
   },