diff --git a/src/constants/dynamictext-mapper.js b/src/constants/dynamictext-mapper.js index 31e49c368..b450d0561 100644 --- a/src/constants/dynamictext-mapper.js +++ b/src/constants/dynamictext-mapper.js @@ -3,7 +3,7 @@ // Please use lowercase only so that we don't have to worry about case sensitivity. const customMappings = { - glassname: [ + formattedglassname: [ { key: 'Windshield Single', transformedValue: 'windshield' }, { key: 'Windshield Driver', transformedValue: 'driver side split windshield' }, { key: 'Windshield Passenger', transformedValue: 'passenger side split windshield' }, diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 177211ae0..dddab1d66 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -11,6 +11,7 @@ const storeActions = { GET_EVOX_IMAGE: "getEvoxImage", LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", + GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", // DEPENDENCY MUTATIONS RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies", diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue index 10d5a8392..121d358e8 100644 --- a/src/layouts/vehicle-parts/part-question/part-question.vue +++ b/src/layouts/vehicle-parts/part-question/part-question.vue @@ -17,14 +17,13 @@ " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" /> -
- +
@@ -49,10 +48,8 @@ export default { inheritAttrs: false, data() { return { - glassColorQuestion: String, - glassFeatureQuestion: String, - featureListData: Object, - selectedPart: {}, // v-model for the radio button selections + glassColorQuestion: '', + glassFeatureQuestion: '', selectedTint: {}, // v-model for the list card selections }; }, @@ -60,6 +57,7 @@ export default { glassName: String, glassLocation: String, colorAnswers: Array, + modelValue: Object }, components: { listCard, @@ -67,24 +65,21 @@ export default { }, computed: { colorQuestionText() { - return getCustomTransformValue( - "Select your current {custom:glassName} color", - `${this.glassLocation} ${this.glassName}` - ); + return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`); }, - }, - mounted() { - this.featureListData = this.createFeatureListMap(this.colorAnswers); - }, - methods: { - initializeComponent(cmsContent, initialData) { - console.log("Im here"); + selectedPart: { + get: function () { + return this.modelValue; + }, + set: function (newValue) { + this.$emit("update:modelValue", newValue); + } }, // Creates a map of the feature list data in the correct Name/Value // format for the button-question component. - createFeatureListMap(colorAnswers) { - const tintMapByColor = colorAnswers.reduce((arr, item) => { + featureListData() { + const tintMapByColor = this.colorAnswers.reduce((arr, item) => { // Create the key const itemColor = item.ColorAnswerText; arr[itemColor] = arr[itemColor] || []; @@ -104,6 +99,12 @@ export default { }, {}); return tintMapByColor; + } + }, + methods: { + initializeComponent(cmsContent, initialData) { + this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText; + this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText; }, // Gets tint images based on the glass type, and tint name. @@ -123,12 +124,6 @@ export default { this.selectedTint = {}; this.selectedPart = {}; }, - - // Emits selected part back to the parent vehicle-parts component - // so it can have a object that contains all selected parts. - EmitPartSelection(event) { - this.$emit("update:modelValue", event); - }, }, }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 1f4323a65..1c213465e 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -1,11 +1,12 @@