CSR-715 WIP

src/common-components/button-question/button-question.vue

@@ -11,6 +11,8 @@
         </legend>
         <div :class="getComponentLoopWrapperClasses">
           <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
+            BQ: {{ getValues(answer) }}
+            BQ MV: {{ modelValue }}
             <component
               :is="buttonType"
               @isCheckedChanged="handleCheckedChanged"
@@ -152,6 +154,8 @@ export default {
         return this.modelValue;
       },
       set: function(newValue) {
+        console.log("selectedValues")
+        console.log(newValue)
         this.$emit("update:modelValue", newValue);
       }
     },
@@ -178,6 +182,10 @@ export default {
         }
       }
 
+      console.log("handling")
+      console.log(val)
+      console.log(this.selectedValues)
+
       this.$emit("isCheckedChanged", val);
     },
   },

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

@@ -5,6 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
+    {{ selectedDamageLocations }}
       <div class="page-container-grouped-styles">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
@@ -201,32 +202,32 @@ export default {
     },
 
     getWindshieldOptionsFromStore() {
-      var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
+      var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
 
       if (store.getters.damage.isRepair === undefined) return windshieldOptions;
 
       if (!store.getters.damage.isRepair) {
         if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.SINGLE })) {
-            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
         }
 
         if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.DRIVER })) {
-            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
         }
 
         if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.PASSENGER })) {
-            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
         }
       }
 
       if (store.getters.damage.isRepair) {
-          windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPAIR);
+          windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
           windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
       }
 
@@ -284,6 +285,7 @@ export default {
     },
 
     async forwardButtonAction() {
+      // TODO CSR-715 look here
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
 
       if (this.isWindshieldRepair){
@@ -311,6 +313,7 @@ export default {
     },
 
     selectedGlassToReplace() {
+      // TODO CSR-715
       const selectedGlassToReplace = [];
       if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
           this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
@@ -361,10 +364,7 @@ export default {
     isWindshieldRepair() {
       if (!this.isWindshieldDamageLocation) return false;
 
-      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType.toUpperCase() === "REPAIR";
-        {
-            return selectedDamageType.toUpperCase() === "REPAIR";
-        });
     },
     isDriverSideReplace() {
       if (!this.isSideDoorDamageLocation) return false;
@@ -386,7 +386,7 @@ export default {
       return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
     },
     hasSplitSingleConflict() {
-      if (!this.selectedDamageLocations || !this.selectedDamageLocations.includes("Windshield") || !this.selectedWindshieldOptions.selectedWindshieldDamageType || !this.selectedWindshieldOptions.selectedWindshieldDamageType.includes("Replace") || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
+      if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType?.toUpperCase() === "REPAIR" || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
 
       return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
         {

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

@@ -1,6 +1,7 @@
 <template>
     <transition name="fade" mode="out-in">
         <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
+            WDTQ: {{ modelValue }}
             <buttonQuestion
                 :questionText="questionText"
                 :answers="answersFromCms"
@@ -22,7 +23,7 @@ import store from "@/store";
 export default ({
     name: "windshieldDamageTypeQuestion",
     props: {
-        modelValue: Array,
+        modelValue: String,
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
@@ -41,7 +42,10 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
+                console.log("setting")
+                console.log(newValue)
                 this.$emit("update:modelValue", newValue);
+                this.$nextTick();
             }
         },
     },

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

@@ -1,5 +1,6 @@
 <template>
     <div class="windshield-options">
+        {{ windshieldDamageTypeQuestionValidationRules }}
         <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
             :isAvailable=isWindshieldDamageLocation
             :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@@ -14,6 +15,10 @@
             alertClass="alert-danger"
             :isDismissible="false"
           />
+          WO:<br>
+          <!-- {{ isRepairOptionSelected }}<br>
+          {{ isReplaceOptionSelected }}<br> -->
+          {{ selectedWindshieldDamageTypeValues }}<br>
         <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
             :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
@@ -21,7 +26,7 @@
             validationRules="windshield-chip-count-required"
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
-            :isAvailable=isReplaceOptionSelected
+            :isAvailable="isReplaceOptionSelected"
             isMultiSelect
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
@@ -51,18 +56,28 @@ import { errorMessages } from "@/constants/error-messages";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 // DEFINE VALIDATION RULES
+console.log("Defining the rules")
 defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
 defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
 defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
+    console.log(value)
+    console.log(otherFieldValue)
+    console.log(value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()))
+    console.log(otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()))
+    console.log(Array.isArray(otherFieldValue))
+    console.log(otherFieldValue.length > 1)
+    // this.$nextTick();
     if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
         otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
         Array.isArray(otherFieldValue) &&
         otherFieldValue.length > 1)
     {
+        console.log("A")
         return false;
     }
+    console.log("B")
     return true;
 });
 defineRule("repair-only", (value) => {
@@ -91,7 +106,7 @@ export default ({
     },
 
     props: {
-        modelValue: Array,
+        modelValue: String,
         selectedDamageLocations: Array,
         hasRepairReplaceConflict: Boolean,
         hasSplitSingleConflict: Boolean,
@@ -103,6 +118,8 @@ export default ({
             this.$refs.replaceOptionsQuestion.initializeComponent(windshieldAvailableReplacementOptions);
         },
         getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
+            console.log("getWindshieldOptions")
+            console.log(selectedWindshieldDamageType)
             // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
             return {
                 selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
@@ -114,18 +131,27 @@ export default ({
     computed: {
         selectedValues: {
             get: function() {
+                console.log("selectedValues in WO")
+                console.log(this.modelValue)
                 return this.modelValue;
             },
             set: function(newValue) {
+                console.log("setting selectedValues in WO")
+                console.log(newValue)
                 this.$emit("update:modelValue", newValue);
             }
         },
-        selectedWindshieldDamageTypeValues:{
+        selectedWindshieldDamageTypeValues: {
             get: function() {
                 return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
+                console.log("selectedWindshieldDamageTypeValues")
+                console.log("I'm changing!")
+                console.log(newValue)
                 this.selectedValues = this.getWindshieldOptions(newValue, null, null);
+                // console.log(this.selectedValues)
+                console.log(this.getWindshieldOptions(newValue, null, null))
             }
         },
         selectedWindshieldChipCountValues: {
@@ -153,12 +179,12 @@ export default ({
         isRepairOptionSelected(){
             if (!this.selectedWindshieldDamageTypeValues) return false;
 
-            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
+            return this.selectedWindshieldDamageTypeValues.toUpperCase() === "REPAIR" && this.isWindshieldDamageLocation;
         },
         isReplaceOptionSelected(){
             if (!this.selectedWindshieldDamageTypeValues) return false;
 
-            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
+            return this.selectedWindshieldDamageTypeValues.toUpperCase() === "REPLACE" && this.isWindshieldDamageLocation;
         },
         isWindshieldReplaceAvailable() {
             return !(Array.isArray(this.windshieldAvailableReplacementOptions) && this.windshieldAvailableReplacementOptions.length < 1);

src/ux-components/list-card/list-card.vue

@@ -1,5 +1,7 @@
 <template>
   <div :class="{'h-100': !isWide}">
+    {{ errors }}
+    <br>{{ hasError }}
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center"
       :class="[
@@ -133,7 +135,9 @@ export default {
     },
   },
   methods: {
-    handleInputChange() {
+    handleInputChange(x) {
+      console.log("handleInputChange")
+      console.log(x)
         if(!this.selectingInitiatesLoad) {
           this.handleCheckChange();
         }
@@ -148,7 +152,9 @@ export default {
       }
       this.handleChange(this.value);
     },
-    triggerButton() {
+    triggerButton(x) {
+      console.log("triggerButton")
+      console.log(x)
       if(this.selectingInitiatesLoad) {
         this.displayLoader();
         this.handleCheckChange();
@@ -157,11 +163,19 @@ export default {
       this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
+      console.log("handleCheckChange")
+      console.log("multiselect: " + this.isMultiSelect)
+      
+      
       const emitEvent = {
         checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
         value: this.value.toString(),
         buttonId: this.buttonID && this.buttonID.toString(),
       };
+
+      console.log(emitEvent)
+      
+      
       this.$emit("isCheckedChanged", emitEvent);
       this.$emit("update:modelValue", emitEvent);
     },