CSR-762 Fix vehicle-parts preselecting issue

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

@@ -126,7 +126,6 @@ export default {
     },
     data() {
         return {
-            selectedValues: "",
             lastValuePushedToGa: null,
         };
     },
@@ -199,6 +198,14 @@ export default {
                 })
             );
         },
+        selectedValues: {
+            get() {
+                return this.modelValue;
+            },
+            set(selectedAnswers) {
+                this.$emit("update:modelValue", selectedAnswers);
+            }
+        }
     },
     methods: {
         formatString(str) {
@@ -226,7 +233,6 @@ export default {
             this.selectedValues = selectedAnswers;
 
             this.$emit("buttonQuestionChange", selectedAnswers);
-            this.$emit("update:modelValue", selectedAnswers);
         },
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;

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

@@ -13,8 +13,7 @@
                     altText=""
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
-                    :validationRules="tintValidationRules"
+                    :validationRules="tintValidationRules">
-                >
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
                             <buttonQuestion
@@ -28,8 +27,9 @@
                                 isRequired
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
                                 :validationRules="partValidationRules"
-                                :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
+                                :shouldPushClickEventToGAOnMount="
-                            />
+                                    shouldPushClickEventToGAOnMount
+                                " />
                         </div>
                     </div>
                 </buttonQuestion>
@@ -57,7 +57,7 @@ export default {
             glassColorQuestion: "",
             glassFeatureQuestion: "",
             selectedTint: "",
-            shouldPushClickEventToGAOnMount: true
+            shouldPushClickEventToGAOnMount: true,
         };
     },
     props: {
@@ -67,8 +67,8 @@ export default {
         modelValue: Object,
         alreadyPopulatedPartsData: {
             type: Array,
-            default: () => []
+            default: () => [],
-        }
+        },
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -79,12 +79,18 @@ export default {
     computed: {
         tintValidationRules() {
             const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
-            defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));  
+            defineRule(
+                validationRuleName,
+                required(errorMessages.OPTION_REQUIRED)
+            );
             return validationRuleName;
         },
         partValidationRules() {
             const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
-            defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));   
+            defineRule(
+                validationRuleName,
+                required(errorMessages.OPTION_REQUIRED)
+            );
             return validationRuleName;
         },
         colorQuestionText() {
@@ -115,16 +121,29 @@ export default {
                 return this.modelValue?.partNumber;
             },
             set(newValue) {
-                this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
+                this.$emit(
+                    "update:modelValue",
+                    this.partsForSelectedTint.filter(
+                        (part) => part.partNumber == newValue
+                    )[0]
+                );
             },
         },
 
         partsForSelectedTint() {
-            const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
+            const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(
-                dataForGlassLocationAndName.glassName == this.glassName &&
+                (dataForGlassLocationAndName) =>
-                dataForGlassLocationAndName.glassLocation == this.glassLocation);
+                    dataForGlassLocationAndName.glassName == this.glassName &&
-            const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
+                    dataForGlassLocationAndName.glassLocation ==
-            return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
+                        this.glassLocation
+            );
+            const matchingGlassParts =
+                matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
+            return (
+                matchingGlassParts.filter(
+                    (part) => part.color == this.selectedTint
+                ) ?? []
+            );
         },
 
         // Creates a map of the feature list data in the correct Name/Value
@@ -156,7 +175,9 @@ export default {
         },
 
         PartDataFromApi() {
-            return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
+            return (
+                this.$store.getters.pageData(this.$route.query.fmgPage) ?? {}
+            );
         },
     },
     methods: {
@@ -193,7 +214,8 @@ export default {
         // Check if only a single part is present for the tint and set the v-model if it is.
         AutoSelectIfSinglePart() {
             if (this.partsForSelectedTint?.length == 1) {
-                this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
+                this.selectedPartNumber =
+                    this.partsForSelectedTint[0].partNumber;
             }
         },
 
@@ -203,7 +225,7 @@ export default {
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
                     this.shouldPushClickEventToGAOnMount = false;
-                    this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
+                    this.selectedTint = this.modelValue?.color
                 }
             });
         },
@@ -211,8 +233,8 @@ export default {
     watch: {
         selectedTint() {
             this.AutoSelectIfSinglePart();
-        }
+        },
-    }
+    },
 };
 </script>
 

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

@@ -204,9 +204,7 @@ export default {
                 const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
                 g.parts.forEach((p) => {
                     if (p.partNumber === partNumber) {
-                    this.glassParts[g.glassLocation + "-" + g.glassName] = {
+                        this.glassParts[g.glassLocation + "-" + g.glassName] = p;
-                        [g.glassLocation]: [partNumber],
-                    };
                     }
                 });
                 });