diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index e3b0ca823..a20ff376e 100644 --- a/src/common-components/button-question/button-question.vue +++ b/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; diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 51abbbd44..14f707818 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -13,8 +13,7 @@ altText="" isRequired :groupName="`${glassLocation}-${glassName}`" - :validationRules="tintValidationRules" - > + :validationRules="tintValidationRules">
+ :shouldPushClickEventToGAOnMount=" + shouldPushClickEventToGAOnMount + " />
@@ -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 => - dataForGlassLocationAndName.glassName == this.glassName && - dataForGlassLocationAndName.glassLocation == this.glassLocation); - const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : []; - return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? []; + const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter( + (dataForGlassLocationAndName) => + dataForGlassLocationAndName.glassName == this.glassName && + dataForGlassLocationAndName.glassLocation == + 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(); - } - } + }, + }, }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index e3a5fa7cf..dd03be1c4 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/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] = { - [g.glassLocation]: [partNumber], - }; + this.glassParts[g.glassLocation + "-" + g.glassName] = p; } }); });