CSR-254: add optional windshield-options and windshield-damage-type-q

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

@@ -35,14 +35,14 @@ export default ({
         modelValue: Array,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        validationRules: Array,
         name: String,
         groupName: String,
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
-            console.log('cmsContent: ', cmsContent)
-            console.log('damageOptions: ', damageOptions)
+            // console.log('cmsContent: ', cmsContent)
+            // console.log('damageOptions: ', damageOptions)
+
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
@@ -84,13 +84,15 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            const data = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
                     }) 
                 : [];
+                console.log('data: ', data);
+                return data;
         },
     },
     components: {

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

@@ -14,10 +14,13 @@
         >
           <damageLocationQuestion
             ref="damageLocation"
-            name="test"
             v-model="selectedDamageLocations"
             groupName="DamageLocationQuestion"
           />
+          <windshieldOptions
+            ref="windshieldOptions"
+            :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+          />
           <replaceOptionsQuestion
             ref="driverSideOptions"
             isAvailable
@@ -46,6 +49,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 textInput from "@/common-components/text-input/text-input";
 
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -119,6 +123,7 @@ export default {
     damageLocationQuestion,
     replaceOptionsQuestion,
     funnelFooter,
+    windshieldOptions,
     // textInput,
   },
   methods: {

src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="windshield-damage-type-question">
+        I AM WINDSHIELD DAMAGE TYPE QUESTION
+        isAvailable is: {{isAvailable}}
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+            :validationRules="setValidationRules()"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+
+export default ({
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+        isAvailable: Boolean,
+        name: String,
+        groupName: String,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+        setValidationRules() {
+            const rulesArray = [
+                {
+                    name: "required",
+                    test: (value) => {
+                        // console.log('required value is... ', value);
+                        if (!value || value.length < 1) {
+                            console.log('WDTQ should return false')
+                            return false;
+                        }
+                        console.log('WDTQ should return true')
+                        return true;
+                    },
+                    error: 'Please select windshield damage'
+                }
+            ]
+
+            return rulesArray;
+        },
+    },
+    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>

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

@@ -0,0 +1,25 @@
+<template>
+    <div class="windshield-options">
+        I AM WINDSHIELD OPTIONS
+        <windshieldDamageTypeQuestion
+            ref="windshieldDamageType"
+            v-model="selectedWindshieldDamageTypes"
+            groupName="windshieldDamageTypeQuestion"
+            :isAvailable="showWindshieldDamageTypeQuestion"
+        />
+    </div>
+</template>
+
+<script>
+import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        showWindshieldDamageTypeQuestion: Boolean,
+    },
+    components: {
+        windshieldDamageTypeQuestion,
+    },
+})
+</script>