diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 245543937..9c79fcb05 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -141,7 +141,7 @@ export default { const fieldOptions = { value: modelValue, - initialValue: modelValue, + initialValue: null, }; const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } = @@ -255,10 +255,8 @@ export default { }, }, watch: { - modelValue(newValue) { - this.resetField({ - value: newValue, - }); + modelValue(newValue, oldValue) { + this.resetField(); }, answers() { //once we get the answers to display from parent, see if we need a GA event to log what we showed diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 4317352d3..74c3ddd46 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -151,7 +151,6 @@ export default { isRecalibrationServiceableMobile: null, selectedAppointmentType: this.getSelectedAppointmentType(), selectedProvider: this.getSelectedProvider(), - //selectedProviderNumber: this.getSelectedProvider().providerNumber, mobileFeePart: null, zipContainsMilitaryBase: false, zipCodeCtu: null, @@ -336,6 +335,9 @@ export default { this.zipContainsMilitaryBase = val; } }, + setMobileFeePart(mobileFeePart) { + this.mobileFeePart = mobileFeePart; + }, getServiceAddressFromStore() { return store.getters.order.serviceLocation.address; }, @@ -354,10 +356,7 @@ export default { : store.getters.order.serviceLocation.appointmentType; }, getSelectedProvider() { - return store.getters.order.serviceLocation.provider ?? null; - }, - setMobileFeePart(mobileFeePart) { - this.mobileFeePart = mobileFeePart; + return store.getters.order.serviceLocation.provider; }, resetMobileLocation() { this.streetAddress = ""; @@ -411,10 +410,14 @@ export default { async reloadShopData() { await this.$refs.shopQuestion.reloadShopData(this.zipCode); }, - onProviderSelected(selectedProvider) { - this.selectedProvider = selectedProvider; - }, }, + // watch: { + // selectedAppointmentType: { + // handler() { + // this.selectedProvider = null; + // } + // } + // }, components: { alert, serviceZipModalQuestion, diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index a61eae88d..45f73cadd 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -45,11 +45,13 @@ import textLink from "@/ux-components/text-link/text-link"; import { storeActions } from "@/constants/store-actions.js"; // Supporting files -import { defineRule } from "vee-validate"; +import { defineRule, useField } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; import baseMixin from "@/mixins/base-mixin.js"; import { nextTick } from "vue"; +import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper"; +import { thisTypeAnnotation } from "@babel/types"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -68,6 +70,7 @@ export default { props: { modelValue: { type: Object, + default: () => (null) }, serviceZipCode: String, selectedAppointmentType: String, @@ -81,9 +84,10 @@ export default { }, selectedValue: { get: function () { - return this.modelValue; + return this.modelValue?.providerNumber; }, set: function (newValue) { + // Button Question only supports Number, String data types so we must get the full object to emit const provider = this.getSelectedProviderObject(newValue); this.$emit("update:modelValue", provider); }, @@ -165,11 +169,8 @@ export default { resetAnswers() { this.answers = []; this.shopIndex = 0; - this.selectedValue = ""; + - if (this.$refs.buttonQuestion) { - this.$refs.buttonQuestion.resetField(); - } }, async reloadShopData(serviceZipCode) { const result = await this.loadData(serviceZipCode); @@ -181,7 +182,6 @@ export default { await this.getNextShopsFromList(); }, getSelectedProviderObject(providerNumber) { - // Button Question only supports primitive values so we must get the full object const provider = this.shopProviders?.find( (provider) => provider.providerNumber == providerNumber ); @@ -203,6 +203,12 @@ export default { await this.$nextTick(); + this.selectedValue = null; + + this.$refs.buttonQuestion?.resetField(); + + await this.$nextTick(); + if (newValue !== "Mobile") { await this.getNextShopsFromList(); } @@ -210,8 +216,6 @@ export default { }, shopProviders: { async handler(newValue) { - this.resetAnswers(); - await this.$nextTick(); if (this.selectedAppointmentType) {