WIP

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -137,6 +137,9 @@ export default {
         alertInvalidZipWidgetName: String,
         customComponentId: String,
         validationRules: String,
+        optionalCallback: {
+            type: Function,
+        },
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -257,6 +260,10 @@ export default {
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
 
+                if (this.optionalCallback) {
+                    await this.optionalCallback(serviceZipCode);
+                }
+
                 this.closeModal();
             }
         },

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

@@ -12,7 +12,8 @@
                 @updated-serviceability="setServiceabilityDetails"
                 @updated-contains-military-base="setContainsMilitaryBase"
                 linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget" />
+                modalWidgetName="ServiceZipModalWidget"
+                :optionalCallback="reloadShopData" />
             <alert
                 ref="alertMilitaryBaseZip"
                 class="my-5"
@@ -64,17 +65,16 @@
                 validationRules="mobile-location-required"
                 ref="mobileLocationQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
+                modalWidgetName="MobileLocationModalWidget"
+                :optionalCallback="reloadShopData" />
             <Transition name="fade" mode="out-in">
                 <shopQuestion
                     ref="shopQuestion"
-                    v-show="
+                    v-show="isShopQuestionDisplayed"
-                        selectedAppointmentType === 'Inshop' ||
-                        selectedAppointmentType === 'Dropoff'
-                    "
                     v-model="selectedProvider"
                     :serviceZipCode="zipCode"
                     :selectedAppointmentType="selectedAppointmentType"
+                    :isDisplayed="isShopQuestionDisplayed"
                     cmsWidgetName="ShopQuestionWidget" />
             </Transition>
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@@ -268,6 +268,12 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
+        isShopQuestionDisplayed() {
+            return (
+                this.selectedAppointmentType === "Inshop" ||
+                this.selectedAppointmentType === "Dropoff"
+            );
+        },
         // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
         requiresInshopRecalibration() {
             return (
@@ -364,6 +370,9 @@ export default {
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
         },
+        async reloadShopData() {
+            await this.$refs.shopQuestion.reloadShopData(this.zipCode);
+        },
     },
     components: {
         alert,

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -69,6 +69,9 @@ export default {
         },
         linkWidgetName: String,
         modalWidgetName: String,
+        optionalCallback: {
+            type: Function,
+        },
     },
     setup() {
         const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
@@ -161,6 +164,10 @@ export default {
                     // Update the page level model
                     this.$emit("update:modelValue", this.internalModel);
 
+                    if (this.optionalCallback) {
+                        await this.optionalCallback(serviceZipCode);
+                    }
+
                     this.closeModal();
                 }
             } else {

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

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div class="shop-question" aria-live="polite">
+        <div v-if="isDisplayed" class="shop-question" aria-live="polite">
             <alert
                 ref="alertDropoffInformation"
                 v-if="displayDropoffInformation"
@@ -49,6 +49,7 @@ import { defineRule } 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";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -73,6 +74,7 @@ export default {
         selectedAppointmentType: String,
         cmsWidgetName: String,
         validationRules: String,
+        isDisplayed: Boolean,
     },
     computed: {
         questionText() {
@@ -83,9 +85,11 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-                const provider = this.shopProviders.find(
+                // Button Question only supports primitive values so we must get the full object to emit to the page
+                const provider = this.shopProviders?.find(
                     (provider) => provider.providerNumber == newValue
                 );
+
                 this.$emit("update:modelValue", provider);
             },
         },
@@ -98,6 +102,9 @@ export default {
     },
     methods: {
         loadInitialData(serviceZipCode) {
+            return this.loadData(serviceZipCode);
+        },
+        loadData(serviceZipCode) {
             return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
                 serviceZipCode: serviceZipCode,
             });
@@ -164,44 +171,28 @@ export default {
             this.answers = [];
             this.shopIndex = 0;
             this.selectedValue = "";
-            this.$refs.buttonQuestion.resetField();
         },
         async reloadShopData(serviceZipCode) {
-            const result = await this.loadInitialData(serviceZipCode);
+            const result = await this.loadData(serviceZipCode);
-            this.initializeComponent(result);
+            this.initializeComponent(result.data);
+
             this.resetShopList();
+
+            await nextTick();
+            await this.getNextShopsFromList();
         },
     },
     watch: {
-        serviceZipCode: {
-            async handler(newValue) {
-                await this.reloadShopData(newValue);
-            },
-        },
         selectedAppointmentType: {
-            async handler() {
-                // If the validation has been previously triggered, clear it before displaying the component
-                this.$refs.buttonQuestion.resetField();
-
-                this.resetShopList();
-                await this.getNextShopsFromList();
-
-                await this.$nextTick();
-
-                this.scrollToPageBottom();
-            },
-        },
-        shopProviders: {
             async handler(newValue) {
-                this.$refs.buttonQuestion.resetField();
+                this.resetShopList();
-                const selectedShopIndex = newValue.findIndex(
+                await this.$nextTick();
-                    (provider) => provider.providerNumber == this.modelValue?.providerNumber
+                if (newValue !== "Mobile") {
-                );
-
-                if (selectedShopIndex >= 3) {
-                    await this.getNextShopsFromList(selectedShopIndex + 1);
-                } else {
                     await this.getNextShopsFromList();
+
+                    await this.$nextTick();
+
+                    this.scrollToPageBottom();
                 }
             },
         },