From c9b09ae23a629bf85819e69dd694dec3012c0931 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 14 Feb 2022 10:59:31 -0500
Subject: [PATCH 01/15] CSR-269 wip

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  27 +++-
 .../windshield-chip-count-question.vue        |  49 ++++++++
 .../windshield-damage-type-question.vue       |  54 ++++++++
 .../windshield-options/windshield-options.vue | 118 ++++++++++++++++++
 4 files changed, 246 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-options.vue

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c5b8df783..e809e97fc 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,6 +5,7 @@
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
     </div>
 </template>
 
@@ -15,6 +16,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from"@/layouts/vehicle-damage/windshield-options/windshield-options";
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -26,6 +29,7 @@ import baseMixin from "@/mixins/base-mixin";
 export default {
   name: "vehicle-damage",
   async beforeRouteEnter(to, from, next) {
+    console.log("vd: beforeRoute");
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
@@ -46,10 +50,12 @@ export default {
       },
     ];
 
+    console.log("vd: before settle");
     const resultMap = await settleAllPromises(promiseResultMap);
-
+    console.log("vd: after settle");
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
+      console.log("vd: next");
       vm.$refs.funnelHeader.initializeComponent(
         resultMap.cmsContent.FunnelHeaderWidget
       );
@@ -65,12 +71,19 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      console.log("vd: initialize wo");
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion
+      );
     });
   },
   data(){
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      selectedWindshieldOptions: [],
+      selectedChipCount: []
     }
   },
   methods: {
@@ -80,14 +93,24 @@ export default {
     resetDependentState() {
       // Invokes
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-    },
+    }
   },
+  //computed: {
+        // selectedWindshieldDamageType(){
+        //     return  this.modelValue.some(selectedDamages => 
+        //         {
+        //             const categoryAndGlass = selectedDamages.split('-'); //ie: model looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+        //             return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+        //         });
+        // },        
+    //},
   components: {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,
     damageLocationQuestion,
+    windshieldOptions,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
new file mode 100644
index 000000000..fc3452dcb
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -0,0 +1,49 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-chip-count">
+            <buttonQuestion
+                :questionText="buttonQuestionText"
+                :answers="buttonAnswers"
+                :groupName="buttongroupName"
+                buttonType="listButtonHorizontal"
+                v-model="selectedChipCountValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        modelValue: Array,
+        questionText: String,
+        answersFromCms: Array,
+        groupName: String,
+    },
+    computed: {
+        buttonQuestionText() {
+            return this.questionText;
+        },
+        buttonAnswers() {
+            return this.answersFromCms;
+        },
+        buttongroupName() {
+            return this.groupName;
+        },
+        selectedChipCountValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..911d3e8ad
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,54 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-options">
+            <buttonQuestion
+                :questionText="buttonQuestionText"
+                :answers="buttonAnswers"
+                :groupName="buttongroupName"
+                buttonType="listCard"
+                v-model="selectedValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        modelValue: Array,
+        questionText: String,
+        answersFromCms: Array,
+        groupName: String,
+    },
+    methods: {
+        initializeComponent(qt, an){
+            alert("hi");
+        }
+    },
+    computed: {
+        buttonQuestionText() {
+            return this.questionText;
+        },
+        buttonAnswers() {
+            return this.answersFromCms;
+        },
+        buttongroupName() {
+            return this.groupName;
+        },
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
new file mode 100644
index 000000000..1baf8dd82
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -0,0 +1,118 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-options">
+            <!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+                v-if="isWindshieldDamageLocation"
+                :questionText="questionText"
+                :answersFromCms="answersFromCms"
+                groupName="WindshieldDamageTypeQuestion"
+                v-model="selectedValues" 
+            />
+            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+                v-if="isWindshieldDamageLocation && isRepairOptionSelected"
+                :questionText="chipCountQuestionText"
+                :answersFromCms="chipCountAnswersFromCms"
+                groupName="WindshieldChipCountQuestion"
+                v-model="selectedChipCountValues" 
+            /> -->
+            <replaceOptionsQuestion :ref="replaceOptionsQuestion" 
+                v-if="isWindshieldDamageLocation"
+                isAvailable
+                :questionText="replaceOptionsQuestionText"
+                :answersFromCms="replaceOptionsAnswersFromCms"
+                groupName="WindshieldChipCountQuestion"
+                v-model="selectedReplaceOptions" 
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+export default ({
+    name: "windshieldOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            chipCountQuestionText: String,
+            chipCountAnswersFromCms: Array,
+            replaceOptionsQuestionText: String,
+            replaceOptionsAnswersFromCms: Array,
+        }
+    },
+
+    props: {
+        modelValue: Array,
+        selectedDamageLocations: Array,
+        selectedChipCount: Array,
+        selectedReplaceOptions: Array
+    },
+    mounted() {
+
+
+console.log(this);
+    },
+    methods: {
+        initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
+            windshieldReplaceOptionsQuestionFromCms){
+            this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
+            this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
+
+            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
+            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
+
+            this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
+            this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
+
+            //console.log(this.$refs.replaceOptionsQuestion);
+            
+            //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
+            // this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
+        }
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        selectedChipCountValues: {
+            get: function() {
+                return this.selectedChipCount;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedChipCount", newValue);
+            }
+        },
+        selectedReplaceOptionsValues: {
+            get: function() {
+                return this.selectedReplaceOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedReplaceOptions", newValue);
+            }
+        },
+        isWindshieldDamageLocation(){
+            return  this.selectedDamageLocations.some(selectedDamages => 
+                {
+                    const categoryAndGlass = selectedDamages.split('-'); //ie: selectedDamageLocations looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+                });
+        },
+        isRepairOptionSelected(){
+            return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
+        },
+    },
+    components: {
+        windshieldDamageTypeQuestion,
+        windshieldChipCountQuestion,
+        replaceOptionsQuestion
+    },
+})
+</script>

From e2bfed2b364309bd49fad845cb8903b8db04d946 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 15 Feb 2022 16:16:06 -0500
Subject: [PATCH 02/15] csr-269 wip

---
 .../replace-options-question.vue              |   8 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  40 +++----
 .../windshield-options/windshield-options.vue | 106 ++++++++++++------
 3 files changed, 94 insertions(+), 60 deletions(-)

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..1a21573d1 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
@@ -30,6 +30,9 @@ defineRule("replace-options-required", (value) => {
 
 export default ({
     name: "replaceOptionsQuestion",
+    updated() {
+        console.log("ro:modelValue=>" + this.modelValue);
+    },
     data(){
         return {
             questionText: String,
@@ -48,6 +51,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
+            console.log("ro:" + this.questionText);
         },
     },
     computed: {
@@ -56,6 +60,7 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
+                console.log("ro:newVal=>" + newValue);
                 this.$emit("update:modelValue", newValue);
             }
         },
@@ -64,7 +69,8 @@ export default ({
                 ? 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 3bc47570c..1b2ce8ce2 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,9 +4,12 @@
         <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" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <windshieldOptions ref="windshieldOptions" 
+          v-model="selectedWindshieldOptions" 
+          :selectedDamageLocations="selectedDamageLocations"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
-        <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
     </div>
 </template>
 
@@ -18,7 +21,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
-import windshieldOptions from"@/layouts/vehicle-damage/windshield-options/windshield-options";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -30,8 +33,12 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
+  updated() {
+    console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
+    console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
+    console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
+  },
   async beforeRouteEnter(to, from, next) {
-    console.log("vd: beforeRoute");
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
@@ -52,12 +59,10 @@ export default {
       },
     ];
 
-    console.log("vd: before settle");
     const resultMap = await settleAllPromises(promiseResultMap);
-    console.log("vd: after settle");
+
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
-      console.log("vd: next");
       vm.$refs.funnelHeader.initializeComponent(
         resultMap.cmsContent.FunnelHeaderWidget
       );
@@ -73,13 +78,12 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-      vm.$refs.funnelFooter.initializeComponent(
-        resultMap.cmsContent.FunnelFooterWidget
-      );
-      console.log("vd: initialize wo");
       vm.$refs.windshieldOptions.initializeComponent(
         resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
-        resultMap.cmsContent.WindshieldReplaceOptionsQuestion
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
       );
     });
   },
@@ -87,8 +91,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
-      selectedWindshieldOptions: [],
-      selectedChipCount: []
+      selectedWindshieldOptions: []
     }
   },
   methods: {
@@ -107,15 +110,6 @@ export default {
       );
     },
   },
-  //computed: {
-        // selectedWindshieldDamageType(){
-        //     return  this.modelValue.some(selectedDamages => 
-        //         {
-        //             const categoryAndGlass = selectedDamages.split('-'); //ie: model looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
-        //             return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
-        //         });
-        // },        
-    //},
   components: {
     funnelHeader,
     funnelFooter,
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index f5356b4d5..2f480f7bc 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,38 +1,42 @@
 <template>
     <transition name="fade">
-        <div class="windshield-options">
-            <!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+        <div class="windshield-options" aria-live="polite">
+            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
                 v-if="isWindshieldDamageLocation"
                 :questionText="questionText"
                 :answersFromCms="answersFromCms"
+                :suppressError="suppressError"
                 groupName="WindshieldDamageTypeQuestion"
-                v-model="selectedValues" 
+                v-model="selectedWindshieldDamageTypeValues" 
             />
             <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
                 v-if="isWindshieldDamageLocation && isRepairOptionSelected"
                 :questionText="chipCountQuestionText"
                 :answersFromCms="chipCountAnswersFromCms"
                 groupName="WindshieldChipCountQuestion"
-                v-model="selectedChipCountValues" 
-            /> -->
-            <replaceOptionsQuestion :ref="replaceOptionsQuestion" 
-                v-if="isWindshieldDamageLocation"
+                v-model="selectedWindshieldChipCountValues" 
+            />
+            <replaceOptionsQuestion ref="replaceOptionsQuestion"
                 isAvailable
-                :questionText="replaceOptionsQuestionText"
-                :answersFromCms="replaceOptionsAnswersFromCms"
-                groupName="WindshieldChipCountQuestion"
-                v-model="selectedReplaceOptions" 
+                groupName="WindshieldReplaceOptions"
+                v-model="selectedWindshieldReplaceOptionsValues"
             />
         </div>
     </transition>
 </template>
 
 <script>
-import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
-import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
+    updated() {
+        console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
+        console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
+        // if (this.isReplaceOptionSelected)
+        //     this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
+    },
     data(){
         return {
             questionText: String,
@@ -41,6 +45,14 @@ export default ({
             chipCountAnswersFromCms: Array,
             replaceOptionsQuestionText: String,
             replaceOptionsAnswersFromCms: Array,
+            availableReplacementOptions: Array,
+            // wsrFromCms: Array,
+            // wsrOptions: Array,
+            sro:[],
+
+            selectedWindshieldDamageType: null,
+            selectedWindshieldChipCount: null,
+            selectedWindshieldReplaceOptions: [],
         }
     },
 
@@ -48,16 +60,13 @@ export default ({
         modelValue: Array,
         selectedDamageLocations: Array,
         selectedChipCount: Array,
-        selectedReplaceOptions: Array
+        selectedReplaceOptions: Array,
+        suppressError: Boolean
     },
-    mounted() {
 
-
-console.log(this);
-    },
     methods: {
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
-            windshieldReplaceOptionsQuestionFromCms){
+            windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
             this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
             this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
 
@@ -67,11 +76,19 @@ console.log(this);
             this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
             this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
 
-            //console.log(this.$refs.replaceOptionsQuestion);
-            
+            this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
+            this.wsrOptions = windshieldAvailableReplacementOptions;
+
             //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
-            // this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
-        }
+            this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+        },
+        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
+            return {
+                selectedWindshieldDamageType: selectedWindshieldDamageType,
+                selectedWindshieldChipCount: selectedWindshieldChipCount,
+                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
+            }
+        },
     },
     computed: {
         selectedValues: {
@@ -79,35 +96,54 @@ console.log(this);
                 return this.modelValue;
             },
             set: function(newValue) {
+                //console.log("oldval=>" + this.modelValue);
                 this.$emit("update:modelValue", newValue);
+                // this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
             }
         },
-        selectedChipCountValues: {
+        selectedWindshieldDamageTypeValues:{
             get: function() {
-                return this.selectedChipCount;
+                return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
-                this.$emit("update:selectedChipCount", newValue);
+                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
             }
         },
-        selectedReplaceOptionsValues: {
+        selectedWindshieldChipCountValues: {
             get: function() {
-                return this.selectedReplaceOptions;
+                return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
-                this.$emit("update:selectedReplaceOptions", newValue);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
+                //console.log("here=>" + newValue);
+                //this.$emit("update:selectedChipCount", newValue);
             }
         },
-        isWindshieldDamageLocation(){
+        selectedWindshieldReplaceOptionsValues: {
+            get: function() {
+                return this.selectedValues.selectedWindshieldReplaceOptions;
+            },
+            set: function(newValue) {
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
+            }
+        },
+        isWindshieldDamageLocation() {
             return  this.selectedDamageLocations.some(selectedDamages => 
                 {
-                    const categoryAndGlass = selectedDamages.split('-'); //ie: selectedDamageLocations looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
                     return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
                 });
         },
         isRepairOptionSelected(){
-            return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
+            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
         },
+        // isReplaceOptionSelected(){
+        //     if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+
+        //     return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
+        // },
     },
     components: {
         windshieldDamageTypeQuestion,
@@ -115,6 +151,4 @@ console.log(this);
         replaceOptionsQuestion
     },
 })
-</script>
-
-        suppressError: Boolean,
\ No newline at end of file
+</script>
\ No newline at end of file

From 5d866d0d0471857136eef68aeda9d88a461ce2be Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 17 Feb 2022 08:05:05 -0500
Subject: [PATCH 03/15] CSR-269

---
 .../button-question/button-question.vue       |  2 +-
 .../replace-options-question.spec.js          |  2 +-
 .../replace-options-question.vue              |  7 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  5 -
 .../windshield-damage-type-question.vue       | 99 -------------------
 .../windshield-chip-count-question.spec.js    | 71 +++++++++++++
 .../windshield-chip-count-question.vue        | 33 ++++---
 .../windshield-damage-type-question.vue       | 52 ++++++----
 .../windshield-options/windshield-options.vue | 51 +++-------
 9 files changed, 137 insertions(+), 185 deletions(-)
 delete mode 100644 src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 417230464..b7188d11a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -121,7 +121,7 @@ export default {
     },
   },
   mounted(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
+    if(Array.isArray(this.answers) && this.answers.length === 1 && this.selectedValues != undefined) {
       const newSelectedValues = this.selectedValues;
       newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
       this.selectedValues = newSelectedValues;
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 103aecd4c..6098fc972 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
@@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
     test("Answers to display filtered by data from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory});
   
       //Act
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 1a21573d1..558ced3f1 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,7 +2,7 @@
     <transition name="fade">
         <div class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable && answersToDisplay.length > 0"
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
@@ -30,9 +30,6 @@ defineRule("replace-options-required", (value) => {
 
 export default ({
     name: "replaceOptionsQuestion",
-    updated() {
-        console.log("ro:modelValue=>" + this.modelValue);
-    },
     data(){
         return {
             questionText: String,
@@ -51,7 +48,6 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
-            console.log("ro:" + this.questionText);
         },
     },
     computed: {
@@ -60,7 +56,6 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
-                console.log("ro:newVal=>" + newValue);
                 this.$emit("update:modelValue", newValue);
             }
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 1b2ce8ce2..0c46b93a9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -33,11 +33,6 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
-  updated() {
-    console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
-    console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
-    console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
-  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
deleted file mode 100644
index 686f10de9..000000000
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="windshield-damage-type-question">
-        <buttonQuestion
-            v-if="isAvailable && answersToDisplay.length > 1"
-            :questionText="questionText"
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="selectedValues"
-            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-            :suppressError="suppressError"
-        />
-    </div>
-</template>
-
-<script>
-import buttonQuestion from "@/common-components/button-question/button-question";
-import store from "@/store";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("windshield-damage-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
-defineRule("checkForRepairAndReplace", (value, [other]) => {
-    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
-        return "checkForRepairAndReplace error"
-    }
-    return true;
-});
-
-export default ({
-    name: "windshieldDamageTypeQuestion",
-    data(){
-        return {
-            questionText: String,
-            answersFromCms: Array,
-            damageOptions: Object,
-        }
-    },
-    props: {
-        isMultiSelect: Boolean,
-        modelValue: Array,
-        isAvailable: Boolean,
-        name: String,
-        groupName: String,
-        suppressError: Boolean,
-    },
-    methods: {
-        initializeComponent(cmsContent, damageOptions){
-            this.questionText = cmsContent.QuestionText;
-            this.answersFromCms = cmsContent.Answers;
-            this.damageOptions = damageOptions;
-        },
-    },
-    computed: {
-        selectedValues: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
-        damageOptionsMap(){
-            return {
-                Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
-            }
-        },
-        answersToDisplay(){
-            // HARD CODED MOCK DATA FOR NOW
-            return [
-                {
-                    "Name": "Windshield-Crack",
-                    "Text": "Crack",
-                    "SubText": "My damage is larger than six inches.",
-                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
-                },
-                {
-                    "Name": "Windshield-Chip",
-                    "Text": "Chip(s)",
-                    "SubText": "I have three or fewer chips smaller than six inches.",
-                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
-                }
-            ]
-        },
-    },
-    components: {
-        buttonQuestion,
-    },
-})
-</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
new file mode 100644
index 000000000..5811bb1fa
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-chip-count-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: "Two" });
+      const chipCountToSelect = "Two";
+  
+      //Act
+      wrapper.setValue({ modelValue: chipCountToSelect });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
+    });
+  });
+
+  describe("Windshield-chip-count-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
+  
+      //Act
+      windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldChipCountQuestion",
+    cmsQuestionText = "How many chips are we repairing?",
+    cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp
+    };
+   
+    const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index fc3452dcb..41a3b872b 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -1,10 +1,11 @@
 <template>
     <transition name="fade">
-        <div class="windshield-chip-count">
+        <div class="windshield-chip-count-question">
             <buttonQuestion
-                :questionText="buttonQuestionText"
-                :answers="buttonAnswers"
-                :groupName="buttongroupName"
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 v-model="selectedChipCountValues"
             />
@@ -17,22 +18,24 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 
 export default ({
     name: "windshieldOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },    
     props: {
         modelValue: Array,
-        questionText: String,
-        answersFromCms: Array,
         groupName: String,
+        isAvailable: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        }
     },
     computed: {
-        buttonQuestionText() {
-            return this.questionText;
-        },
-        buttonAnswers() {
-            return this.answersFromCms;
-        },
-        buttongroupName() {
-            return this.groupName;
-        },
         selectedChipCountValues: {
             get: function() {
                 return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 911d3e8ad..bdc3b8cb5 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,12 +1,15 @@
 <template>
     <transition name="fade">
-        <div class="windshield-options">
+        <div class="windshield-damage-type-question">
             <buttonQuestion
-                :questionText="buttonQuestionText"
-                :answers="buttonAnswers"
-                :groupName="buttongroupName"
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+                :suppressError="suppressError"
             />
         </div>
     </transition>
@@ -14,30 +17,43 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
 
 export default ({
-    name: "windshieldOptions",
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },
     props: {
         modelValue: Array,
-        questionText: String,
-        answersFromCms: Array,
         groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
     },
     methods: {
-        initializeComponent(qt, an){
-            alert("hi");
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
         }
     },
     computed: {
-        buttonQuestionText() {
-            return this.questionText;
-        },
-        buttonAnswers() {
-            return this.answersFromCms;
-        },
-        buttongroupName() {
-            return this.groupName;
-        },
         selectedValues: {
             get: function() {
                 return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 2f480f7bc..9db08aa66 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -2,22 +2,18 @@
     <transition name="fade">
         <div class="windshield-options" aria-live="polite">
             <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
-                v-if="isWindshieldDamageLocation"
-                :questionText="questionText"
-                :answersFromCms="answersFromCms"
+                :isAvailable=isWindshieldDamageLocation
                 :suppressError="suppressError"
                 groupName="WindshieldDamageTypeQuestion"
                 v-model="selectedWindshieldDamageTypeValues" 
             />
             <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-                v-if="isWindshieldDamageLocation && isRepairOptionSelected"
-                :questionText="chipCountQuestionText"
-                :answersFromCms="chipCountAnswersFromCms"
+                :isAvailable=isRepairOptionSelected
                 groupName="WindshieldChipCountQuestion"
                 v-model="selectedWindshieldChipCountValues" 
             />
             <replaceOptionsQuestion ref="replaceOptionsQuestion"
-                isAvailable
+                :isAvailable=isReplaceOptionSelected
                 groupName="WindshieldReplaceOptions"
                 v-model="selectedWindshieldReplaceOptionsValues"
             />
@@ -31,24 +27,10 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
-    updated() {
-        console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
-        console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
-        // if (this.isReplaceOptionSelected)
-        //     this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
-    },
     data(){
         return {
-            questionText: String,
-            answersFromCms: Array,
             chipCountQuestionText: String,
             chipCountAnswersFromCms: Array,
-            replaceOptionsQuestionText: String,
-            replaceOptionsAnswersFromCms: Array,
-            availableReplacementOptions: Array,
-            // wsrFromCms: Array,
-            // wsrOptions: Array,
-            sro:[],
 
             selectedWindshieldDamageType: null,
             selectedWindshieldChipCount: null,
@@ -67,20 +49,13 @@ export default ({
     methods: {
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
             windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
-            this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
-            this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
 
             this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
             this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
 
-            this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
-            this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
-
-            this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
-            this.wsrOptions = windshieldAvailableReplacementOptions;
-
-            //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
-            this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+            this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
+            this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
+            this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
         },
         getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
             return {
@@ -96,9 +71,7 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
-                //console.log("oldval=>" + this.modelValue);
                 this.$emit("update:modelValue", newValue);
-                // this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
             }
         },
         selectedWindshieldDamageTypeValues:{
@@ -115,8 +88,6 @@ export default ({
             },
             set: function(newValue) {
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
-                //console.log("here=>" + newValue);
-                //this.$emit("update:selectedChipCount", newValue);
             }
         },
         selectedWindshieldReplaceOptionsValues: {
@@ -137,13 +108,13 @@ export default ({
         isRepairOptionSelected(){
             if (this.selectedWindshieldDamageTypeValues === undefined) return false;
 
-            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
         },
-        // isReplaceOptionSelected(){
-        //     if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+        isReplaceOptionSelected(){
+            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
 
-        //     return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
-        // },
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
+        },
     },
     components: {
         windshieldDamageTypeQuestion,

From ab23fe5fe7efe0dfc615e56023fed631be70d8d2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 08:50:45 -0500
Subject: [PATCH 04/15] CSR-341 WIP nested radio demo

---
 src/layouts/nested-radio-poc/nested-radio.vue | 92 +++++++++++++++---
 src/ux-components/list-card/list-card.vue     |  1 +
 src/ux-components/radio/radio.vue             | 94 ++++++++++---------
 3 files changed, 129 insertions(+), 58 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 6d05c4009..b5a317318 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,27 +1,89 @@
 <template>
-<h5>POC</h5>
+
+  <div class="container-fluid nested-radio">
+    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint, Blue Shade"
+        buttonID="radio1"
+        />
+      </div>
+    </div>
+    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+      <div class="col">
+        <p class="mb-0 fw-bold">Ok, select the features</p>
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, solar, 3rd visor band"
+        buttonID="button1"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+        />
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
+        buttonID="button2"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        />
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint"
+        buttonID="radio2"
+        />
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script>
-
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
-  props: {
-    groupName: String,
-    buttonLabel: String,
-    buttonID: String,
-    isRequired: Boolean,
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    screenReaderOnlyText: String,
-    hasError: Boolean,
-  },
+  components: {
+    radio,
+    listCard,
+  }
 };
-
 </script>
+
+<style lang="scss">
+.nested-radio {
+  padding: 20px; // For demo only
+  .ui-radio {
+    margin: .25rem 0;
+  }
+  p {
+    font-size: .875rem;
+  }
+  // For demo only
+  .show-hide {
+    max-height: 0;
+    transition: max-height 0.35s ease-out;
+    overflow: hidden;
+  }
+  .demo-animate {
+    &:hover {
+      + .show-hide {
+        max-height: 100px;
+        transition: max-height 0.35s ease-in;
+      }
+    }
+  }
+  // END for demo only
+}
+</style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index b3124ccfb..0a2fcc297 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -173,6 +173,7 @@ export default {
     &:checked + label {
       p {
         color: $black;
+        font-weight: 500;
       }
       .sub-copy {
         color: $gray-600;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 83b0976b7..0762c0f6a 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-center radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -81,58 +81,66 @@ export default {
 .ui-radio {
   position: relative;
   input[type="radio"] {
-    position: absolute !important;
+    position: absolute!important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
+    clip: rect(1px,1px,1px,1px);
+    + .radio-label {
+      &:before {
+        content: '';
+        background: $white;
+        border-radius: 100%;
+        border: 1px solid $gray-500;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: .5rem;
+        vertical-align: top;
         cursor: pointer;
+        transition: all 250ms ease;
+        flex-shrink: 0;
       }
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 50%;
+    &:checked {
+      + .radio-label {
+        &:before {
+          background-color: $blue;
+          box-shadow: inset 0 0 0 2px $white;
+        }
+      }
     }
-    &:checked + label::before {
-      background: $white;
-      border: 1px solid $blue;
+    &:hover {
+      + label {
+        cursor: pointer;
+        &:before {
+          box-shadow: 0 0 0 4px #9fcee6;
+        }
+      }
     }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 3px;
-      height: 6px;
-      width: 6px;
-      transform: rotate(-45deg);
-      border: 5px solid $blue;
-      border-radius: 50%;
+    &:focus {
+      + label {
+        &:before {
+          box-shadow: 0 0 0 2px #1574a1;
+        }
+      }
     }
-    &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-300;
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $gray-550;
+          border-color: $gray-550;
+          background: $gray-550;
+        }
+      }
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
+        }
+      }
     }
   }
 }

From 495019b4716c0cca5efde3812657e0f21cb6bac8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 09:15:43 -0500
Subject: [PATCH 05/15] Set radio buttons to align top per Rachel.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 +-
 src/ux-components/checkbox/checkbox.vue       | 1 +
 src/ux-components/radio/radio.vue             | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index b5a317318..0795d8b59 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -79,7 +79,7 @@ export default {
   .demo-animate {
     &:hover {
       + .show-hide {
-        max-height: 100px;
+        max-height: 140px;
         transition: max-height 0.35s ease-in;
       }
     }
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 24c9e830e..d84c5b1c6 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -59,6 +59,7 @@ export default {
       background: white;
       border: 1px solid $gray-500;
       border-radius: 2px;
+      flex-shrink: 0;
     }
     &:checked + label::before {
       background: $blue;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 0762c0f6a..4265958c4 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged"
     />
-    <label class="d-flex align-items-center radio-label" :for="buttonID">
+    <label class="d-flex align-items-start radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -101,6 +101,7 @@ export default {
         cursor: pointer;
         transition: all 250ms ease;
         flex-shrink: 0;
+        top: .25rem;
       }
     }
     &:checked {

From e00cb8d71aefdb83c0887357ed81f8ef648e8d35 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 09:50:27 -0500
Subject: [PATCH 06/15] CSR-269

---
 .../button-question/button-question.vue       |  2 +-
 .../replace-options-question.vue              |  2 +-
 .../vehicle-damage/vehicle-damage.spec.js     | 31 ++++++++
 src/layouts/vehicle-damage/vehicle-damage.vue |  7 +-
 .../windshield-chip-count-question.spec.js    | 12 ++--
 .../windshield-damage-type-question.spec.js   | 71 +++++++++++++++++++
 .../windshield-damage-type-question.vue       |  2 +-
 .../windshield-options/windshield-options.vue |  4 +-
 8 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 823ce79fd..c14c027b9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -127,7 +127,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      if(this.isMultiSelect) {
+      if(this.isMultiSelect && this.selectedValues) {
         // 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);
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..28aa0831e 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
@@ -71,7 +71,7 @@ export default ({
         },
     },
     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;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..247fce2e9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -122,6 +122,37 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+
+
+describe("vehicle-damage.vue", () => {
+  test("Windshield Options ares initailized with api data", async (done) => {
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select Damage";
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
+      done();
+    });
+  });
+});
+
+
+
+
 describe("vehicle-damage.vue", () => {
   test("CarId set, arePagePrerequisitesValid should be true ", async () => {
     //Arrange
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 3c0df2599..b1ebfc6c8 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,12 +4,12 @@
         <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" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -34,6 +34,9 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
+  updated() {
+      console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
+  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
index 5811bb1fa..123051d35 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -8,15 +8,15 @@ jest.mock("@/store", () => { return {}; }, {virtual: true});
 describe("windshield-chip-count-question.vue", () => {
     test("Selected chip count is emitted upon selection.", async () => {
       //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: "Two" });
-      const chipCountToSelect = "Two";
+      const { wrapper } = setupMocks({modelValueProp: ["One"]});
   
       //Act
-      wrapper.setValue({ modelValue: chipCountToSelect });
+      wrapper.setValue({ modelValue: ["Two"] });
       await wrapper.vm.$nextTick();
-  
+        
       //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
+      expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]);
     });
   });
 
@@ -24,7 +24,7 @@ describe("windshield-chip-count-question.vue", () => {
     test("Should display question and answers from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
   
       //Act
       windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
new file mode 100644
index 000000000..3bb64d695
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-damage-type-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      wrapper.setValue({ modelValue: ["Replace"] });
+      await wrapper.vm.$nextTick();
+        
+      //Assert
+      expect(wrapper.vm.selectedValues).toEqual(["Repair"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]);
+    });
+  });
+
+  describe("windshield-damage-type-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldDamageTypeQuestion",
+    cmsQuestionText = "What's your windshield damage?",
+    cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp
+    };
+   
+    const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index bdc3b8cb5..78c72800c 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -19,7 +19,7 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import { defineRule } from "vee-validate";
 
-// DEFINE VALIDATION RULES
+//DEFINE VALIDATION RULES
 defineRule("windshield-damage-required", (value) => {
     if (!value || value.length < 1) {
         return "Please select windshield damage";
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 9db08aa66..c917031aa 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -106,12 +106,12 @@ export default ({
                 });
         },
         isRepairOptionSelected(){
-            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+            if (!this.selectedWindshieldDamageTypeValues) return false;
 
             return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
         },
         isReplaceOptionSelected(){
-            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+            if (!this.selectedWindshieldDamageTypeValues) return false;
 
             return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
         },

From b96d85199f3040f2b5d3fa6868520177b676cdcb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 11:26:51 -0500
Subject: [PATCH 07/15] Update checkbox to fix breakage with wordwrap.

---
 src/styles/common-error-styles.scss     |  1 +
 src/ux-components/checkbox/checkbox.vue | 82 +++++++------------------
 2 files changed, 22 insertions(+), 61 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d7d1c019d..2ca852f66 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -22,6 +22,7 @@
   }
   &.ui-radio,
   &.ui-checkbox {
+    input[type=checkbox],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index d84c5b1c6..10022b438 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
-    <input
-      type="checkbox"
-      aria-checked="false"
-      :name="checkboxName"
-      :id="buttonID"
-      :tabindex="tabIndex"
-      :aria-required="isRequired"
+  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <input class="form-check-input"
+    type="checkbox"
+    aria-checked="false"
+    :name="checkboxName"
+    :id="buttonID"
+    :tabindex="tabIndex"
+    :aria-required="isRequired"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -34,61 +34,21 @@ export default {
 </script>
 
 <style lang="scss">
-.ui-checkbox {
-  position: relative;
-  input[type="checkbox"] {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+    &:checked {
+      background-size: 125%;
+      border: 1px solid $blue;
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-      flex-shrink: 0;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 2px;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 12px;
-      transform: rotate(-45deg);
-    }
-    &:hover + label::before {
+    &:focus {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }

From e3cdbfbe6c624385ce652631b9bb5c652bc1cf6c Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 11:49:40 -0500
Subject: [PATCH 08/15] csr-269

---
 .../vehicle-damage/vehicle-damage.spec.js     | 31 -------------------
 .../windshield-options/windshield-options.vue |  4 +++
 2 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 247fce2e9..0e47eb37f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -122,37 +122,6 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
-
-
-describe("vehicle-damage.vue", () => {
-  test("Windshield Options ares initailized with api data", async (done) => {
-    //Arrange
-    const pageHeaderWidgetHeaderText = "Select Damage";
-    const { wrapper, apiPromise } = setupMocks({
-      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
-    });
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    //Assert
-    apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
-        pageHeaderWidgetHeaderText
-      );
-      done();
-    });
-  });
-});
-
-
-
-
 describe("vehicle-damage.vue", () => {
   test("CarId set, arePagePrerequisitesValid should be true ", async () => {
     //Arrange
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index c917031aa..8f57f61b7 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -79,6 +79,8 @@ 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);
             }
         },
@@ -87,6 +89,7 @@ export default ({
                 return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
+                this.selectedValues.selectedWindshieldReplaceOptions = null;
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
             }
         },
@@ -95,6 +98,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldReplaceOptions;
             },
             set: function(newValue) {
+                this.selectedValues.selectedWindshieldChipCount = null;
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
             }
         },

From 2dda277c752dac3cb0b87f23c46f14f8d08b303c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 12:23:22 -0500
Subject: [PATCH 09/15] Rebuild radio buttons.

---
 src/ux-components/checkbox/checkbox.vue |  2 +-
 src/ux-components/radio/radio.vue       | 81 ++++++-------------------
 2 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 10022b438..73eb562bf 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 5a2353bc4..9ae2ed8bf 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,8 +1,9 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
+    class="form-check-input"
     aria-checked="false"
     :name="groupName"
     :id="buttonID"
@@ -11,7 +12,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged()"
     />
-    <label class="d-flex align-items-start radio-label" :for="buttonID">
+    <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -77,71 +78,25 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.ui-radio {
-  position: relative;
-  input[type="radio"] {
-    position: absolute!important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px,1px,1px,1px);
-    + .radio-label {
-      &:before {
-        content: '';
-        background: $white;
-        border-radius: 100%;
-        border: 1px solid $gray-500;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: relative;
-        margin-right: .5rem;
-        vertical-align: top;
-        cursor: pointer;
-        transition: all 250ms ease;
-        flex-shrink: 0;
-        top: .25rem;
-      }
-    }
+<style lang="scss" scoped>
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 100%;
+    margin-right: .5rem;
     &:checked {
-      + .radio-label {
-        &:before {
-          background-color: $blue;
-          box-shadow: inset 0 0 0 2px $white;
-        }
-      }
-    }
-    &:hover {
-      + label {
-        cursor: pointer;
-        &:before {
-          box-shadow: 0 0 0 4px #9fcee6;
-        }
-      }
+      background-color: $white;
+      background-size: 71%;
+      border: 1px solid $blue;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
     }
     &:focus {
-      + label {
-        &:before {
-          box-shadow: 0 0 0 2px #1574a1;
-        }
-      }
+      box-shadow: 0 0 0 4px $blue-300;
     }
-    &:disabled {
-      + .radio-label {
-        &:before {
-          box-shadow: inset 0 0 0 4px $gray-550;
-          border-color: $gray-550;
-          background: $gray-550;
-        }
-      }
-    }
-    + .radio-label {
-      &:empty {
-        &:before {
-          margin-right: 0;
-        }
-      }
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }

From 6372c72f04cd89681e1a95231a72feaac6830734 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 13:31:37 -0500
Subject: [PATCH 10/15] CSS organize and cleanup.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 +-
 src/styles/common-error-styles.scss           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 0795d8b59..6fe3a753c 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -63,7 +63,6 @@ export default {
 
 <style lang="scss">
 .nested-radio {
-  padding: 20px; // For demo only
   .ui-radio {
     margin: .25rem 0;
   }
@@ -71,6 +70,7 @@ export default {
     font-size: .875rem;
   }
   // For demo only
+  padding: 20px;
   .show-hide {
     max-height: 0;
     transition: max-height 0.35s ease-out;
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 2ca852f66..4b9a18114 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -23,6 +23,7 @@
   &.ui-radio,
   &.ui-checkbox {
     input[type=checkbox],
+    input[type=radio],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;

From 470774f03dc4a15eefeab615c48fc0e413001378 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 16:03:57 -0500
Subject: [PATCH 11/15] CSR-269

---
 .../vehicle-damage/vehicle-damage.spec.js     | 22 +++++++------
 src/layouts/vehicle-damage/vehicle-damage.vue |  3 --
 .../windshield-damage-type-question.vue       | 31 ++++++++++---------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..4a26b3426 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -6,6 +6,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -177,7 +178,7 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
     });
   });
@@ -198,8 +199,8 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
+      },
     },
   };
 
@@ -226,12 +227,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const windshieldOptions = replaceOptionsQuestion
-  windshieldOptions.methods = {
+  damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
-  damageLocationQuestion.methods = {
+  windshieldOptions.methods = {
     initializeComponent: jest.fn(),
   };
 
@@ -262,11 +262,13 @@ function setupMocks({
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
-  const windshieldOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(1);
+  const windshieldOptionsWrapper = wrapper.findComponent({
+    name: "windshieldOptions",
+  });
+  
   windshieldOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
+  windshieldOptions.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 b1ebfc6c8..998a43892 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -34,9 +34,6 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
-  updated() {
-      console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
-  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 78c72800c..80656e0a4 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -8,8 +8,6 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-                :suppressError="suppressError"
             />
         </div>
     </transition>
@@ -17,21 +15,24 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-import { defineRule } from "vee-validate";
+//import { defineRule } from "vee-validate";
 
 //DEFINE VALIDATION RULES
-defineRule("windshield-damage-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
-defineRule("checkForRepairAndReplace", (value, [other]) => {
-    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
-        return "checkForRepairAndReplace error"
-    }
-    return true;
-});
+// add these to the button component above:
+// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// :suppressError="suppressError"
+// defineRule("windshield-damage-required", (value) => {
+//     if (!value || value.length < 1) {
+//         return "Please select windshield damage";
+//     }
+//     return true;
+// });
+// defineRule("checkForRepairAndReplace", (value, [other]) => {
+//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//         return "checkForRepairAndReplace error"
+//     }
+//     return true;
+// });
 
 export default ({
     name: "windshieldDamageTypeQuestion",

From e16f08598e9b9e99784504894c83380aa5fded5b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 21 Feb 2022 10:32:04 -0500
Subject: [PATCH 12/15] CSR-342 replace radio with button-question.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 54 ++++++++-----------
 src/ux-components/radio/radio.vue             |  2 +-
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 6fe3a753c..d8404e838 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div class="container-fluid nested-radio">
-    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <listCard
         groupName="listcard1"
@@ -12,24 +12,17 @@
         />
       </div>
     </div>
-    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <p class="mb-0 fw-bold">Ok, select the features</p>
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, solar, 3rd visor band"
-        buttonID="button1"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-        />
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
-        buttonID="button2"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        <buttonQuestion
+          buttonType="radio"
+          groupName="Demo Group"
+          buttonID="button1"
+          isRequired
+          value="test button"
+          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+          :answers="demoArray"
         />
       </div>
     </div>
@@ -49,14 +42,24 @@
 </template>
 
 <script>
+import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
+    buttonQuestion,
     radio,
     listCard,
+  },
+  data() {
+    return {
+      demoArray: [
+        "rain sensor, solar, 3rd visor band",
+        "rain sensor, heated glass, solar, 3rd visor band",
+      ]
+    }
   }
 };
 </script>
@@ -64,26 +67,11 @@ export default {
 <style lang="scss">
 .nested-radio {
   .ui-radio {
+    flex-direction: column;
     margin: .25rem 0;
   }
   p {
     font-size: .875rem;
   }
-  // For demo only
-  padding: 20px;
-  .show-hide {
-    max-height: 0;
-    transition: max-height 0.35s ease-out;
-    overflow: hidden;
-  }
-  .demo-animate {
-    &:hover {
-      + .show-hide {
-        max-height: 140px;
-        transition: max-height 0.35s ease-in;
-      }
-    }
-  }
-  // END for demo only
 }
 </style>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 9ae2ed8bf..952aefb1d 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     class="form-check-input"

From a76f3f75a28d796939629e7f4925c71bc91e2b6d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 21 Feb 2022 12:32:10 -0500
Subject: [PATCH 13/15] Remove unused component.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index d8404e838..3bdeba866 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -44,13 +44,11 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
-import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
     buttonQuestion,
-    radio,
     listCard,
   },
   data() {

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 14/15] 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 15/15] 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;