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;
}
});
});