WIP

src/digital-components/button-question/button-question.vue

@@ -121,7 +121,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
-        modelValue: [Array, Number, String, Object],
+        modelValue: [Array, Number, String],
         value: [Number, String],
         validationRules: String,
         suppressError: Boolean,

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div class="appointment-type-question" aria-live="polite">
+        <div class="appointment-type-question" aria-live="polite" v-if="isDisplayed">
             <buttonQuestion
                 ref="buttonQuestion"
                 customButtonQuestionId="appointmentTypeQuestion"
@@ -25,6 +25,7 @@ export default {
         modelValue: String,
         groupName: String,
         isAvailable: Boolean,
+        isDisplayed: Boolean,
         suppressError: Boolean,
         validationRules: String,
         cmsWidgetName: String,

src/layouts/service-location/service-location.vue

@@ -47,9 +47,10 @@
                 alertClass="alert-warning" />
             <appointmentTypeQuestion
                 v-model="selectedAppointmentType"
-                v-show="!displayNoShopsAlert"
+                v-show="isAppointmentTypeDisplayed"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
+                :isDisplayed="isAppointmentTypeDisplayed"
                 ref="appointmentTypeQuestion"
                 groupName="appointmentTypeQuestion"
                 cmsWidgetName="AppointmentTypeQuestionWidget"
@@ -71,7 +72,7 @@
                 <shopQuestion
                     ref="shopQuestion"
                     v-show="isShopQuestionDisplayed"
-                    v-model="selectedProviderNumber"
+                    v-model="selectedProvider"
                     @providerSelected="onProviderSelected"
                     :serviceZipCode="zipCode"
                     :selectedAppointmentType="selectedAppointmentType"
@@ -134,14 +135,6 @@ defineRule("mobile-location-required", (value) => {
     return true;
 });
 
-const defaultProvider = {
-    providerNumber: null,
-    address: null,
-    city: null,
-    state: null,
-    zip: null,
-};
-
 export default {
     name: "service-location",
     data() {
@@ -158,7 +151,7 @@ export default {
             isRecalibrationServiceableMobile: null,
             selectedAppointmentType: this.getSelectedAppointmentType(),
             selectedProvider: this.getSelectedProvider(),
-            selectedProviderNumber: this.getSelectedProvider().providerNumber,
+            //selectedProviderNumber: this.getSelectedProvider().providerNumber,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
             zipCodeCtu: null,
@@ -226,7 +219,7 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
-                    this.selectedProvider = defaultProvider;
+                    this.selectedProvider = null;
                 }
 
                 this.state = newValue.state;
@@ -261,7 +254,7 @@ export default {
                     if (!this.selectedAppointmentType == "Mobile") {
                         this.selectedAppointmentType = null;
                     }
-                    this.selectedProvider = defaultProvider;
+                    this.selectedProvider = null;
                 }
             },
         },
@@ -285,6 +278,11 @@ export default {
                 this.selectedAppointmentType === "Dropoff"
             );
         },
+        isAppointmentTypeDisplayed() {
+            return (
+                this.zipCode && !this.displayNoShopsAlert
+            );
+        },
         // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
         requiresInshopRecalibration() {
             return (
@@ -353,10 +351,10 @@ export default {
             return store.getters.order.serviceLocation.zipCode;
         },
         getSelectedAppointmentType() {
-            return store.getters.order.serviceLocation.appointmentType;
+            return store.getters.order.serviceLocation.appointmentType == "None" ? null : store.getters.order.serviceLocation.appointmentType;
         },
         getSelectedProvider() {
-            return store.getters.order.serviceLocation.provider ?? defaultProvider;
+            return store.getters.order.serviceLocation.provider ?? null;
         },
         setMobileFeePart(mobileFeePart) {
             this.mobileFeePart = mobileFeePart;

src/layouts/service-location/shop-question/shop-question.vue

@@ -84,13 +84,8 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-                // Button Question only supports primitive values so we must get the full object to emit to the page
+                const provider = this.getSelectedProviderObject(newValue);
-                const provider = this.shopProviders?.find(
+                this.$emit("update:modelValue", provider);
-                    (provider) => provider.providerNumber == newValue
-                );
-
-                this.$emit("update:modelValue", newValue);
-                this.$emit("providerSelected", provider);
             },
         },
         displayDropoffInformation() {
@@ -185,6 +180,21 @@ export default {
             await nextTick();
             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
+            );
+
+            return provider;
+        },
+        getSelectedProviderIndex(providers, selectedProviderNumber) {
+            const index = providers.findIndex(
+                (provider) => provider.providerNumber == selectedProviderNumber
+            );
+            
+            return index;
+        }
     },
     watch: {
         selectedAppointmentType: {
@@ -200,14 +210,12 @@ export default {
         },
         shopProviders: {
             async handler(newValue) {
-                //this.resetAnswers();
+                this.resetAnswers();
 
                 await this.$nextTick();
 
                 if (this.selectedAppointmentType) {
-                    const selectedShopIndex = newValue.findIndex(
+                    const selectedShopIndex = this.getSelectedProviderIndex(newValue, this.modelValue);
-                        (provider) => provider.providerNumber == this.modelValue
-                    );
 
                     if (selectedShopIndex >= 3) {
                         await this.getNextShopsFromList(selectedShopIndex + 1);