CSR-296: add back glass replace options question

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

@@ -121,6 +121,7 @@ export default {
     },
   },
   mounted(){
+    // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
     if(Array.isArray(this.answers) && this.answers.length === 1) {
       const newSelectedValues = this.selectedValues;
       newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);

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

@@ -2,9 +2,9 @@
     <transition name="fade">
         <div class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable && answersToDisplay.length > 0"
                 :questionText="questionText"
-                isMultiSelect
+                :isMultiSelect="isMultiSelect"
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
@@ -42,6 +42,7 @@ export default ({
         filterByVehicleCategory: Boolean,
         groupName: String,
         modelValue: Array,
+        isMultiSelect: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -60,11 +61,11 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            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])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },

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

@@ -3,8 +3,25 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <damageLocationQuestion
+          ref="damageLocation"
+          v-model="selectedDamageLocations"
+          groupName="DamageLocationQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="driverSideOptions"
+          isAvailable
+          isMultiSelect
+          filterByVehicleCategory
+          v-model="driverSideOptionsData"
+          groupName="DriverSideReplaceOptionsQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="backGlassOptions"
+          isAvailable
+          v-model="selectedRearReplaceOptions"
+          groupName="BackGlassReplaceOptionsQuestion"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -62,11 +79,14 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
       vm.$refs.driverSideOptions.initializeComponent(
         resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
       );
-      vm.$refs.damageLocation.initializeComponent(
-        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
@@ -77,6 +97,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      selectedRearReplaceOptions: [],
     }
   },
   methods: {

src/ux-components/list-card/list-card.vue

@@ -74,16 +74,6 @@ export default {
     validationRules: String,
     selectedButtonIDs: [Array, String],
   },
-  data(){
-    return {
-      checkValue: Boolean,
-    }
-  },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-    }
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -96,6 +86,12 @@ export default {
         return "flex-column pt-4 pb-2";
       }
     },
+    checkValue() {
+      if(this.selectedButtonIDs){
+        return this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+      }
+      return false;
+    },
   },
   methods: {
     handleCheckChange(newValue, oldValue){