some hide show updates change modelValue to emit

src/layouts/schedule-page/schedule-page.vue

@@ -329,6 +329,7 @@ export default {
         return {
             inShopAvailabilityRating: 'high',
             inShopDatesData: [],
+            isDatePickerRefreshing: false,
             isMobileView: false,
             mobileDatesData: [],
             mobileFeePart: null,
@@ -362,7 +363,8 @@ export default {
             const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
                 && serviceLocationToUse.zipCodeCtu !== null
                 && serviceLocationToUse.appointmentType !== null
-                && (validMobileAppointmentType || validInShopAppointmentType);
+                && (validMobileAppointmentType || validInShopAppointmentType)
+                && !this.isDatePickerRefreshing;
 
             const damageInfo = useMainStore().order.damage.isRepair
                 || (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
@@ -688,11 +690,12 @@ export default {
             }
         },
         async refreshDatePicker() {
-            console.log('refresh date picker...');
             this.resetLocalFlags();
+            this.isDatePickerRefreshing = true;
             await this.getDatePickerInitialData().then((data) => {
                 this.selectableDatesData = data.initialShopTimeSlotsResponse;
                 this.$refs.datePicker.initializeComponent(data);
+                this.isDatePickerRefreshing = false;
                 showIssLoadingModal(false);
             });
         },

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

@@ -96,13 +96,14 @@
             </div>
             <serviceZipQuestion
                 ref="mobileServiceZipCodeQuestion"
-                v-model="mobileZipCode"
                 customInputId="mobileServiceZipCode"
                 class="mobile-service-zip-question"
+                :parentZipCode="mobileZipCode"
                 :placeholderText="mobileZipPlaceholder"
                 :serviceZipFormatErrorMessage="errorMessages.MOBILE_SERVICE_ZIP_FORMAT"
                 :hasError="mobileZipError !== ''"
-                cmsWidgetName="MobileZipWidget" />
+                cmsWidgetName="MobileZipWidget"
+                @serviceZipCodeUpdated="handleServiceZipCodeChanged" />
             <div
                 v-if="mobileZipError"
                 ref="errorMessageDiv"
@@ -300,16 +301,7 @@ export default {
         },
         async mobileZipCode(newZip, oldZip) {
             if (newZip !== '' && newZip !== oldZip && !this.initializingData) {
-                showIssLoadingModal(true);
+                await this.processMobileZipCodeChange();
-                await this.updateMobileZip();
-                const updateMobileZipServiceLocationObj = {
-                    mobileProviderNumber: this.mobileProviderNumber,
-                    provider: null,
-                    refreshDatePicker: true,
-                    zipCode: this.zipCode,
-                    zipCodeCtu: this.zipCodeCtu
-                };
-                this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
             }
         },
         schedulingInshopAvailabilityRating(newRating) {
@@ -446,6 +438,26 @@ export default {
                 this.$emit('in-shop-zip-updated', inShopZipServiceLocationObj);
             });
         },
+        async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
+            if (serviceZipCodeFromQuestion !== this.mobileZipCode) {
+                // Can probs just make this one call but have to think about initialization flow and not wanting to trigger extra calls on load
+                this.mobileZipCode = serviceZipCodeFromQuestion;
+            } else {
+                await this.processMobileZipCodeChange();
+            }
+        },
+        async processMobileZipCodeChange() {
+            showIssLoadingModal(true);
+            await this.updateMobileZip();
+            const updateMobileZipServiceLocationObj = {
+                mobileProviderNumber: this.mobileProviderNumber,
+                provider: null,
+                refreshDatePicker: true,
+                zipCode: this.zipCode,
+                zipCodeCtu: this.zipCodeCtu
+            };
+            this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
+        },
         setCtuForMobile(val) {
             this.zipCodeCtu = val;
         },

src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue

@@ -10,7 +10,7 @@
         isRequired
         :hasError="hasError"
         :validationRules="`zip-required|${cmsWidgetName}-zip-format`"
-        @clickEvent="updateModelValue"
+        @clickEvent="emitZipCodeUpdate"
         @fieldHasError="handleFieldError" />
 </template>
 
@@ -32,7 +32,7 @@ export default {
     },
     // TODO: Correct prop def.
     props: {
-        modelValue: String,
+        parentZipCode: String,
         cmsWidgetName: String,
         serviceZipFormatErrorMessage: {
             type: String,
@@ -43,14 +43,14 @@ export default {
             default: false
         }
     },
-    emits: ['update:modelValue', 'field-has-error'],
+    emits: ['service-zip-code-updated', 'field-has-error'],
     data() {
         return {
-            internalZipcode: this.modelValue
+            internalZipcode: this.parentZipCode
         };
     },
     watch: {
-        modelValue(newValue) {
+        parentZipCode(newValue) {
             if (newValue !== this.internalZipcode) {
                 this.internalZipcode = newValue;
             }
@@ -63,8 +63,8 @@ export default {
         handleFieldError(hasError) {
             this.$emit('field-has-error', hasError);
         },
-        updateModelValue() {
+        emitZipCodeUpdate() {
-            this.$emit('update:modelValue', this.internalZipcode);
+            this.$emit('service-zip-code-updated', this.internalZipcode);
         }
     }
 };

src/layouts/schedule-page/service-location/shop-address/shop-address.vue

@@ -75,10 +75,11 @@
                 <serviceZipQuestion
                     v-if="renderServiceZip"
                     :ref="SERVICE_ZIP_QUESTION_REF_NAME"
-                    v-model="internalZipcode"
+                    :parentZipCode="internalZipcode"
                     customInputId="serviceZipCode"
                     :cmsWidgetName="textboxQuestionWidgetName"
-                    @fieldHasError="handleFieldError" />
+                    @fieldHasError="handleFieldError"
+                    @serviceZipCodeUpdated="handleServiceZipCodeChanged" />
                 <div
                     v-if="errorMessage"
                     ref="errorMessageDiv"
@@ -243,7 +244,7 @@ export default {
             showIssLoadingModal(false);
         }
     },
-    methods: {
+    methods: { 
         async updateShops(autoExpand = false) {
             this.errorMessage = '';
             let result = await this.getNearbyShops(this.searchRadiusInMiles);
@@ -333,6 +334,11 @@ export default {
                 this.errorMessage = '';
             }
         },
+        async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
+            if (serviceZipCodeFromQuestion !== this.internalZipcode) {
+                this.internalZipcode = serviceZipCodeFromQuestion;
+            }
+        },
         forceServiceZipRerender() {
             this.renderServiceZip = false;
             this.$nextTick(() => {