CSR-269 wip

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>

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>

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>

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>