Merge pull request #1116 from Safelite/feature/richardson/INSR-8504

few updates for QoL

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

@@ -329,6 +329,7 @@ export default {
         return {
             inShopAvailabilityRating: 'high',
             inShopDatesData: [],
+            isDatePickerRefreshing: false,
             isMobileView: false,
             mobileDatesData: [],
             mobileFeePart: null,
@@ -352,14 +353,18 @@ export default {
                 return false;
             }
 
+            const validMobileAppointmentType = ((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+                || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
+                && serviceLocationToUse.mobileProviderNumber);
+            const validInShopAppointmentType = ((this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP
+                || this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF)
+                && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber));
+
             const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
                 && serviceLocationToUse.zipCodeCtu !== null
                 && serviceLocationToUse.appointmentType !== null
-                && (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+                && (validMobileAppointmentType || validInShopAppointmentType)
-                        || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
+                && !this.isDatePickerRefreshing;
-                        && serviceLocationToUse.mobileProviderNumber)
-                    || ((this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP || this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF)
-                        && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber)));
 
             const damageInfo = useMainStore().order.damage.isRepair
                 || (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
@@ -685,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.spec.js

@@ -203,7 +203,7 @@ describe('service-location.vue', () => {
             const newMobileServiceZipCode = '45433';
 
             // Act
-            mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);
+            mobileServiceZipCodeQuestion.vm.$emit('service-zip-code-updated', newMobileServiceZipCode);
             await wrapper.vm.$nextTick();
 
             // Assert

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;
         },
@@ -604,6 +616,22 @@ $page-side-padding: 1.5rem;
     div.alert {
         margin-top: 0.625rem;
 
+        &.widget-name-AlertLowAvailabilityInshopWidget {
+            @include media-breakpoint-up(xs) {
+                :deep(.alert-headline-text-container) {
+                    padding-left: 0.5rem;
+                    padding-right: 0.375rem;
+                    letter-spacing: 0.45px;
+                }
+            }
+            @include media-breakpoint-up(xl) {
+                :deep(.alert-headline-text-container) {
+                    padding: 0rem 0.625rem;
+                }
+            }
+            
+        }
+
         button.looka-likea-link {
             background: none;
             border: none;

src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.spec.js

@@ -7,7 +7,7 @@ describe('service-zip-question.vue', () => {
         const text = '12345';
         const wrapper = shallowMount(serviceZipQuestion, {
             props: {
-                modelValue: text
+                parentZipCode: text
             },
             attachTo: document.body
         });
@@ -32,9 +32,9 @@ describe('service-zip-question.vue', () => {
 
         // Act
         wrapper.vm.internalZipcode = '55555';
-        wrapper.vm.updateModelValue();
+        wrapper.vm.emitZipCodeUpdate();
 
         // Assert
-        expect(wrapper.emitted('update:modelValue')).toEqual([['55555']]);
+        expect(wrapper.emitted('service-zip-code-updated')).toEqual([['55555']]);
     });
 });

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(() => {