diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 46ad82b6d..65c2396aa 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -14,7 +14,8 @@ :value="value" :checked="isChecked" @blur="handleBlur" - @keypress.enter="handleEventAction('keypressSubmit', $event)" + @keypress.space="handleEventAction('space', $event)" + @keypress.enter="handleEventAction('enter', $event)" @change="handleEventAction('change', $event)" /> @@ -75,13 +76,14 @@ export default { handleEventAction(eventType, e) { const eventTypes = { CHANGE: "change", - KEYPRESS_SUBMIT: "keypressSubmit", + ENTER: "enter", + SPACE: "space", CLICK: "click", }; if (this.isMultiSelect) { switch (eventType) { - case eventTypes.KEYPRESS_SUBMIT: + case eventTypes.ENTER: case eventTypes.CHANGE: this.handleClick(e); this.dispatchStoreAction( @@ -96,7 +98,8 @@ export default { } else { switch (eventType) { case eventTypes.CLICK: - case eventTypes.KEYPRESS_SUBMIT: + case eventTypes.ENTER: + case eventTypes.SPACE: this.handleClick(e); this.pushClickEventToGAIfReady(); break; diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 1346a4f0e..9176bd1bb 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -13,6 +13,7 @@
+
{{ questionText }} {{ diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js index 70f056e3b..16451b219 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js @@ -34,14 +34,14 @@ describe("addressVehiclesQuestion.vue", () => { const wrapper = shallowMount(addressVehiclesQuestion, { mixins: [mockMixin], propsData: { - vehicles: ["1", "2"], - modelValue: ["1", "2"], + vehicles: ["1", "2", "newValue"], + modelValue: "2", } }); // Act const localThis = { $emit: jest.fn() } - addressVehiclesQuestion.computed.selectedVehicleVinAsArray.set.call(localThis, ['newValue']); + addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue'); // Assert expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue"); diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 4bdaa8887..ade10ed99 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue @@ -5,7 +5,7 @@ groupName="ChooseAddressVehicle" :questionText="questionText" :answers="vehicles" - v-model="selectedVehicleVinAsArray" + v-model="selectedVehicleVin" isRequired :validation-rules="validationRules" :valueToLogType="ValueToLogTypes.LAST_5" @@ -63,18 +63,16 @@ export default { questionText() { return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText"); }, - selectedVehicleVinAsArray: { + selectedVehicleVin: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : []; - return modelValueAsArray; + return this.modelValue; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } }, selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above - return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] ); + return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length-1] ); }, }, components: { diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index 081b83fe9..a0edf876f 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -195,7 +195,7 @@ export default { selectedVehicleVin: { handler() { // does this vehicle match the previously selected carId? - this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId; + this.isCarIdDifferent = this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId; if (this.isCarIdDifferent) { this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`); } else { diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index 40fb2cdb4..16d67b3ee 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -6,7 +6,8 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="selectedDamageLocations" + isRequired + v-model="selectedValues" validationRules="damage-location-required" />
@@ -26,12 +27,11 @@ export default ({ name: "damageLocationQuestion", data(){ return { - damageOptions: {}, - selectedDamageLocations: this.modelValue + damageOptions: Object, } }, - props: { - modelValue: [Array, String, Number], + props: { + modelValue: Array, groupName: String, cmsWidgetName: String, }, @@ -47,6 +47,14 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, damageOptionsMap(){ return { Windshield: true, @@ -69,11 +77,6 @@ export default ({ }); }, }, - watch: { - selectedDamageLocations(selectedDamageLocations) { - this.$emit("update:modelValue", selectedDamageLocations); - } - }, components: { buttonQuestion, }, diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index b3d7f537c..d4da8cd1b 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -8,7 +8,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="selectedReplaceOptions" + v-model="selectedValues" :validationRules="validationRules" :suppressError="suppressError" :isRequired="isRequired" @@ -23,17 +23,16 @@ import store from "@/store"; export default ({ name: "replaceOptionsQuestion", - data() { + data(){ return { replaceOptions: [], - selectedReplaceOptions: this.modelValue } }, props: { - modelValue: [Array, String, Number], isAvailable: Boolean, filterByVehicleCategory: Boolean, groupName: String, + modelValue: [Array, String, Number], isMultiSelect: Boolean, validationRules: String, suppressError: Boolean, @@ -41,15 +40,13 @@ export default ({ isRequired: Boolean, }, methods: { - initializeComponent(replaceOptions) { + initializeComponent(replaceOptions){ this.replaceOptions = replaceOptions; }, updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER - // ex: BackGlass stationary - if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { - const selectedAnswer = this.answersToDisplay[0].Name; - this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer; + if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { + this.selectedValues = [this.answersToDisplay[0].Name]; } }, }, @@ -60,6 +57,14 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, answersToDisplay(){ const filteredAnswers = Array.isArray(this.answersFromCms) ? this.answersFromCms.filter(ans => @@ -86,11 +91,8 @@ export default ({ }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { if (!shouldDisplayReplaceOptionsQuestion) { - this.selectedReplaceOptions = []; + this.selectedValues = []; } - }, - selectedReplaceOptions(selectedReplaceOptions) { - this.$emit("update:modelValue", selectedReplaceOptions); } }, components: { diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js index 635f389f1..795606526 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js @@ -17,7 +17,7 @@ describe("windshield-chip-count-question.vue", () => { const { wrapper } = setupMocks({ modelValueProp: 1 }); //Act - await wrapper.setData({ numberOfChips: 2 }); + wrapper.vm.selectedValue = "2"; //Assert expect(wrapper.emitted()["update:modelValue"][0]).toEqual([2]); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue index c2188f9e8..fc26c1d8c 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue @@ -7,7 +7,7 @@ :groupName="groupName" buttonType="listButtonHorizontal" useTextForValue - v-model="numberOfChips" + v-model="selectedValue" :validationRules="validationRules" isRequired /> @@ -19,12 +19,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"; export default ({ - name: "windshieldChipCountQuestion", - data() { - return { - numberOfChips: this.modelValue - } - }, + name: "windshieldOptions", props: { modelValue: [String, Number], groupName: String, @@ -39,14 +34,18 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValue: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + const numberValue = Number(newValue); + this.$emit("update:modelValue", numberValue); + } + }, }, components: { buttonQuestion, - }, - watch: { - numberOfChips(numberOfChips) { - this.$emit("update:modelValue", numberOfChips); - } } }) \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js index 2e3b5aa3c..4b247d705 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js @@ -15,7 +15,7 @@ describe("windshield-damage-type-question.vue", () => { await wrapper.vm.$nextTick(); //Assert - expect(wrapper.vm.selectedWindshieldDamageType).toEqual("Repair"); + expect(wrapper.vm.selectedValues).toEqual("Repair"); expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Replace" }]); }); }); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue index 5a275c45f..e76536103 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -1,18 +1,16 @@ @@ -20,13 +18,8 @@ + } +}) + \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 0d8d6bf9f..31b008760 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => { return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || - !selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) || - selectedDamageLocations.length === 1; + (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || + (selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1); }); defineRule("repair-only", (value) => { return value.toString() === damageLocationsSelected.REPAIR; diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index c3e906cdd..c2a7cd2d2 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -1,15 +1,16 @@ diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 2c1dc46bd..393df6fc9 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -7,7 +7,7 @@ :answers="models" groupName="ChooseVehicleModel" textPosition="text-start" - v-model="selectedModel" + v-model="selectedValue" :selectOnKeypress="false" isRequired /> @@ -25,7 +25,6 @@ export default { data() { return { models: [], - selectedModel: "" }; }, props: { @@ -36,6 +35,14 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, + selectedValue: { + get: function() { + return this.modelValue + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + } }, components: { buttonQuestion, @@ -51,10 +58,5 @@ export default { this.models = initialData; }, }, - watch: { - selectedModel(selectedModel) { - this.$emit("update:modelValue", selectedModel); - } - } }; diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 8e60df50d..bf8fd3d07 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -7,7 +7,7 @@ :answers="styles" groupName="ChooseVehicleStyle" textPosition="text-start" - v-model="selectedStyle" + v-model="selectedValue" :selectOnKeypress="false" isRequired /> @@ -25,16 +25,24 @@ export default { data() { return { styles: [], - selectedStyle: "" }; }, props: { + modelValue: String, cmsWidgetName: String, }, computed: { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, + selectedValue: { + get: function() { + return this.modelValue + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + } }, components: { buttonQuestion, @@ -54,10 +62,5 @@ export default { this.styles = initialData; }, }, - watch: { - selectedStyle(selectedStyle) { - this.$emit("update:modelValue", selectedStyle); - } - } }; diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 1835a7f74..06af5ce64 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,18 +1,16 @@ diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index f2b34a83f..10a759927 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -16,7 +16,10 @@ export default { valueToLogType: String, validationRules: String, isWide: Boolean, - isRequired: Boolean + isRequired: { + type: Boolean, + default: true + } }, data() { return {