CSR-343 Correctly select parts

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

@@ -139,7 +139,7 @@ export default {
       if (this.useTextForValue){
         return answer.Text
       }
-      console.log(answer.Name ? answer.Name : answer)
+      // console.log(answer.Name ? answer.Name : answer)
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {

src/layouts/vehicle-make/make-question/make-question.vue

@@ -7,7 +7,7 @@
     :answers="makes"
     groupName="ChooseVehicleMake"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },

src/layouts/vehicle-model/model-question/model-question.vue

@@ -7,7 +7,7 @@
     :answers="models"
     groupName="ChooseVehicleModel"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -17,14 +17,13 @@
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
-                    :nestedAnswers="featureListData[selectedTint]"
                     buttonType="listCard"
                     :isWide="true"
                     altText=""
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
                     @isCheckedChanged="ResetTintAndPartSelections()"
-                    :validationRules="validationRules"
+                    validationRules="replace-options-required"
                 >
                     <transition name="fade" mode="out-in">
                         <div class="row my-2" aria-live="polite">
@@ -39,7 +38,7 @@
                                     :loaderEnabled="false"
                                     isRequired
                                     :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
-                                    :validationRules="validationRules"
+                                    validationRules="part-required"
                                 />
                             </div>
                         </div>
@@ -63,8 +62,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import { getTintImage } from "@/constants/tint-mapper";
 import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 // import { ErrorMessage } from "vee-validate";
 
+defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("part-required", required(errorMessages.OPTION_REQUIRED));
+
 export default {
     name: "glass-part-question",
     inheritAttrs: false,
@@ -80,7 +85,7 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        validationRules: String,
+        // validationRules: String,
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -240,6 +245,11 @@ export default {
             });
         },
     },
+    watch: {
+        selectedTint(newTint, previousTint) {
+            this.selectedPart = null;
+        }
+    }
 };
 </script>
 

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -3,7 +3,6 @@
   @submit="onSubmit"
   @invalid-submit="onInvalidSubmit"
   ref="theForm"
-  v-slot="{ meta }"
   >
   <div class="page-container-grouped-styles vehicle-parts">
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
@@ -35,13 +34,12 @@
           :glassLocation="item.glassLocation"
           :glassName="item.glassName"
           :colorAnswers="item.colorAnswers"
-          validationRules="replace-options-required"
           />
       </div>
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
         ref="funnelFooter"
-        :isForwardActionDisabled="!meta.valid"
+        :isForwardActionDisabled="isForwardActionDisabled"
         @back-clicked="backButtonAction"
         @ForwardClicked="forwardButtonAction"
       />
@@ -69,7 +67,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
+// defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
   name: "vehicle-parts",
@@ -88,12 +86,12 @@ export default {
 
       // Glass Part Question dynamic component
       Object.keys(vm.$refs)
-      .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-      .forEach((c) =>
-      vm.$refs[c][0].initializeComponent({
-        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-      })
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+        .forEach((c) =>
+        vm.$refs[c][0].initializeComponent({
+          ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+          FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+        })
     );
   });
 },
@@ -113,6 +111,10 @@ components: {
   alert,
 },
 computed: {
+  isForwardActionDisabled() {
+    console.log(this.glassParts)
+    return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
+  },
   PartsForQuestions() {
     const partsData = this.PartsFromApi;
 
@@ -188,7 +190,7 @@ methods: {
       );
 
       if (isMatched) {
-        matchedParts.push(currentPart);
+        // matchedParts.push(currentPart);
       }
       
       // for (let [partKey, partValue] of Object.entries(value.parts)) {

src/layouts/vehicle-style/style-question/style-question.vue

@@ -7,7 +7,7 @@
     :answers="styles"
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },

src/layouts/vehicle-year/year-question/year-question.vue

@@ -7,7 +7,7 @@
     :answers="years"
     groupName="ChooseVehicleYear"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -35,14 +35,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },