Merge pull request #1052 from Safelite/feature/richardson/INSR-8114.3

Mobile appt updates

src/digital-components/date-picker/date-picker.vue

@@ -559,6 +559,7 @@ export default {
             this.selectTimeSlotForDay(timeSlot);
         },
         async setCalendarData(config = {}) {
+            // set selectable dates data
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 const dateObjectToPush = {
                     date: selectableDate.date,

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

@@ -20,6 +20,7 @@
                             ref="serviceLocation"
                             @appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
                             @cityUpdated="cityUpdatedFromServiceLocation"
+                            @inShopZipUpdated="inShopZipUpdatedFromServiceLocation"
                             @mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
                             @providerChanged="providerChangedFromServiceLocation" />
                     </div>
@@ -182,7 +183,8 @@ const getAvailableDates = async (
                     storeAction.payload.endDate,
                     storeAction.payload.zipCodeOverride
                 ).catch((error) => {
-                    console.log('Error fetching mobile time slots:', error);
+                    // eslint-disable-next-line no-console
+                    console.warn('Error fetching mobile time slots:', error);
                 });
             }
 
@@ -224,6 +226,8 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         const storeServiceLocation = useMainStore().order.serviceLocation;
         const storeSelectedAppointmentType = storeServiceLocation?.appointmentType;
+        const isMobileAppointment = storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE
+                || storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
         const storeSelectedProvider = storeServiceLocation?.provider;
         const serviceZipCode = storeServiceLocation?.zipCode || useMainStore().order.customer.address.zipCode;
         const zipCodeData = getZipCodeData(serviceZipCode);
@@ -275,6 +279,9 @@ export default {
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         const serviceLocationData = {
+            defaultMobileZipCode: isMobileAppointment
+                ? storeServiceLocation?.zipCode
+                : '',
             glassFees: resultMap.glassFees,
             mobileFeePart: resultMap.mobileFeePart,
             providers: resultMap.providers,
@@ -285,8 +292,6 @@ export default {
         next(async (vm) => {
             const providerToUse = resultMap.providers?.shopProviders
                 .find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || resultMap.providers?.shopProviders[0];
-            const isMobileAppointment = storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE
-                || storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
             const initialServiceLocationObj = {
                 mobileProviderNumber: isMobileAppointment
                     ? storeSelectedProvider?.providerNumber
@@ -314,10 +319,10 @@ export default {
             mobileFeePart: null,
             mobilePremiumAppointmentFee: null,
             mobileProviderNumber: null,
-            mobileZipCodeOverride: null,
             selectableDatesData: [],
             selectedAppointmentType: this.getAppointmentType(),
             selectedDate: this.getSelectedDate(),
+            selectedMobileZipCode: null,
             selectedProvider: this.getSelectedProvider(),
             selectedServiceLocation: this.getServiceLocation(),
             selectedServiceLocationCity: this.getServiceLocationCity(),
@@ -401,6 +406,7 @@ export default {
                 });
             } else {
                 this.mobileProviderNumber = initialServiceLocationObj.mobileProviderNumber;
+                this.selectedMobileZipCode = initialServiceLocationObj.zipCode;
                 await this.getDatePickerInitialData().then((initialData) => {
                     this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
                     this.$refs.datePicker.setCalendarData(initialData);
@@ -430,11 +436,18 @@ export default {
             return this.mainStore.order?.serviceLocation?.appointmentType;
         },
         async getAvailableDatesMethod(startDate, endDate) {
+            let mobileProviderNumberToUse = this.mobileProviderNumber;
+            if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+                || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
+                mobileProviderNumberToUse = this.selectedServiceLocation.mobileProviderNumber;
+            }
+
             const newShopTimeSlots = await getAvailableDates(
                 startDate,
                 endDate,
                 this.selectedAppointmentType,
-                this.selectedProvider.providerNumber
+                this.selectedProvider.providerNumber || mobileProviderNumberToUse,
+                this.selectedMobileZipCode
             );
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData.days =
@@ -590,9 +603,17 @@ export default {
         handleMqlChange(e) {
             this.isMobileView = !e.matches;
         },
+        inShopZipUpdatedFromServiceLocation(inShopZipServiceLocation) {
+            if (inShopZipServiceLocation) {
+                this.mobileProviderNumber = null;
+                this.selectedMobileZipCode = null;
+                this.selectedServiceLocation = inShopZipServiceLocation;
+            }
+        },
         mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
             if (mobileZipServiceLocation) {
                 this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;
+                this.selectedMobileZipCode = mobileZipServiceLocation.zipCode;
                 this.selectedServiceLocation = mobileZipServiceLocation;
 
                 if (mobileZipServiceLocation.refreshDatePicker) {

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

@@ -159,7 +159,7 @@ export default {
         serviceZipQuestion
     },
     mixins: [baseFormMixin],
-    emits: ['appointment-type-changed', 'city-updated', 'mobile-zip-updated', 'provider-changed'],
+    emits: ['appointment-type-changed', 'city-updated', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'],
     setup() {
         const mainStore = useMainStore();
         return { mainStore };
@@ -171,6 +171,7 @@ export default {
             city: this.getServiceCityFromStore(),
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
+            initializingData: false,
             isGlassServiceableInshop: null,
             isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
@@ -289,7 +290,7 @@ export default {
             }
         },
         async mobileZipCode(newZip, oldZip) {
-            if (newZip !== '' && newZip !== oldZip) {
+            if (newZip !== '' && newZip !== oldZip && !this.initializingData) {
                 showIssLoadingModal(true);
                 await this.updateMobileZip();
                 const updateMobileZipServiceLocationObj = {
@@ -348,8 +349,10 @@ export default {
         }
     },
     methods: {
-        initializeComponent(initialData) {
+        async initializeComponent(initialData) {
-            this.setData(initialData);
+            this.initializingData = true;
+            await this.setData(initialData);
+            this.initializingData = false;
         },
         async forwardButtonAction() {
             let provider = this.selectedProvider;
@@ -424,6 +427,17 @@ export default {
                 if (details) {
                     this.setServiceabilityDetails(details);
                 }
+
+                const inShopZipServiceLocationObj = {
+                    appointmentType: AppointmentTypeStrings.IN_SHOP,
+                    mobileProviderNumber: null,
+                    provider: this.selectedProvider,
+                    refreshDatePicker: false,
+                    resetDatePicker: false,
+                    zipCode: newZip,
+                    zipCodeCtu: zipCodeData.zipCodeCtu
+                };
+                this.$emit('in-shop-zip-updated', inShopZipServiceLocationObj);
             });
         },
         refreshAvailabilityRating() {
@@ -447,7 +461,11 @@ export default {
         setCtuForMobile(val) {
             this.zipCodeCtu = val;
         },
-        setData(initialData) {
+        async setData(initialData) {
+            if (initialData.defaultMobileZipCode) {
+                this.mobileZipCode = initialData.defaultMobileZipCode;
+            }
+
             if (initialData.zipCodeData) {
                 this.zipContainsMilitaryBase = initialData.zipCodeData.containsMilitaryBase;
                 this.zipCodeCtu = initialData.zipCodeData.zipCodeCtu;

src/layouts/welcome-page/welcome-page.vue

@@ -509,7 +509,6 @@ form {
                 :deep(.input-wrapper) {
                     input[type="date"]::-webkit-calendar-picker-indicator {
                         background-color: $svg-calendar-error-fill-color;
-                        // eslint-disable-next-line max-len
                         background-image: url($svg-error-calendar-graphic);
                     }
                 }