csr-269 wip

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)
                     }) 
                 : [];
         },

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: [],
+      selectedWindshieldOptions: []
-      selectedChipCount: []
     }
   },
   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,

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

@@ -1,38 +1,42 @@
 <template>
     <transition name="fade">
-        <div class="windshield-options">
+        <div class="windshield-options" aria-live="polite">
-            <!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+            <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" 
+                v-model="selectedWindshieldChipCountValues" 
-            /> -->
+            />
-            <replaceOptionsQuestion :ref="replaceOptionsQuestion" 
+            <replaceOptionsQuestion ref="replaceOptionsQuestion"
-                v-if="isWindshieldDamageLocation"
                 isAvailable
-                :questionText="replaceOptionsQuestionText"
+                groupName="WindshieldReplaceOptions"
-                :answersFromCms="replaceOptionsAnswersFromCms"
+                v-model="selectedWindshieldReplaceOptionsValues"
-                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 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 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 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>
+</script>
-
-        suppressError: Boolean,