From 6526dbbbad91bac5d4aa83ed62ab95c7e7b0171c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 17 Feb 2022 11:21:48 -0500
Subject: [PATCH] CSR-296: add back glass replace options question

---
 .../button-question/button-question.vue       |  1 +
 .../replace-options-question.vue              |  9 +++---
 src/layouts/vehicle-damage/vehicle-damage.vue | 29 ++++++++++++++++---
 src/ux-components/list-card/list-card.vue     | 16 ++++------
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 417230464..0e17e9de7 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/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]);
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 31c739b49..9a06e3502 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
@@ -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);
                     }) 
                 : [];
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9f6a38650..0d454a754 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/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: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7550c9ec4..ae1102f12 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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){