some updates for integration

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

@@ -153,6 +153,10 @@ import { selectableDaysOptions } from './mixins/helpers';
 export default {
     name: 'date-picker',
     props: {
+        activeAppointmentType: {
+            type: String,
+            default: null
+        },
         customComponentId: String,
         selectableDatesSetting: {
             type: String,
@@ -168,6 +172,10 @@ export default {
         modelValue: {
             type: Object
         },
+        mobileZipCode: {
+            type: String,
+            default: null
+        },
         todayOverrideDateString: {
             // keep for use in unit tests to override today's date
             type: String,
@@ -315,6 +323,7 @@ export default {
             this.setCalendarData(initialData);
         },
         resetComponent() {
+            console.log('Resetting Date Picker Component');
             this.isLoading = true;
             this.selectableDatesData = []; // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
             this.selectableTimeSlotsData = [];
@@ -376,7 +385,7 @@ export default {
             };
         },
         displayTimeSlotTime(timeSlot) {
-            const { appointmentType } = this.mainStore.order.serviceLocation;
+            const appointmentType = this.activeAppointmentType || AppointmentTypeStrings.IN_SHOP;
             if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
                 return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
             }
@@ -555,8 +564,6 @@ export default {
             this.selectTimeSlotForDay(timeSlot);
         },
         async setCalendarData(config = {}) {
-            // const initialMql = window.matchMedia('(min-width: 1200px)');
-            // this.isMobileView = !initialMql.matches;
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 const dateObjectToPush = {
                     date: selectableDate.date,
@@ -618,9 +625,7 @@ export default {
             const moreSelectableDates =
                 await this.customSelectableDatesCallback(
                     dateStart,
-                    dateEnd,
+                    dateEnd
-                    this.mainStore.order.serviceLocation.appointmentType,
-                    this.mainStore.order.serviceLocation.provider.providerNumber
                 );
 
             moreSelectableDates.days.forEach((selectableDate) => {

src/helpers/service-location-helper.js

@@ -58,11 +58,6 @@ export async function getAvailabilityRating(
     providerNumber
 ) {
     // For a given shop provider number and date range, get the appointment time slots available
-    console.log('Getting shop time slots for availability rating...');
-    console.log(`Provider Number: ${providerNumber}`);
-    console.log(`Start Date: ${startDate}`);
-    console.log(`End Date: ${endDate}`);
-    console.log(`Shop Appointment Type: ${shopAppointmentType}`);
     const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber);
 
     const numberOfDaysToEvaluate = 2;

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

@@ -19,9 +19,9 @@
                         <serviceLocation
                             ref="serviceLocation"
                             @appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
-                            @mobileZipUpdated="mobileZipUpdatedFromChild"
+                            @mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
-                            @providerChanged="providerChangedFromChild"
+                            @providerChanged="providerChangedFromServiceLocation"
-                            @serviceLocationUpdated="serviceLocationUpdatedFromChild" />
+                            @serviceLocationUpdated="serviceLocationUpdatedFromServiceLocation" />
                     </div>
                 </div>
                 <div
@@ -37,7 +37,9 @@
                             customComponentId="dateQuestion"
                             selectableDatesSetting="custom"
                             class="text-link-small"
+                            :activeAppointmentType="activeAppointmentType"
                             :isMobileView="isMobileView"
+                            :mobileZipCode="mobileZipCodeOverride"
                             :showTimeSlotError="showDatePickerError"
                             :customSelectableDatesCallback="getAvailableDatesMethod"
                             @dateSelected="dateSelectedFromPicker"
@@ -81,20 +83,14 @@ import {
 import {
     calcDaysBetweenDates,
     convertDateToDateString,
-    // convertDateToShortMonth,
-    // convertDateToTwoDigitDay,
-    // convertDateToTwoDigitMonth,
-    // getDisplayTextForDurationLength,
-    // isAfternoon,
-    // militaryToTwelveHourTime,
     sumDateString
 } from '@/helpers/date-helper';
 import settleAllPromises from '@/helpers/layout-helper';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
-    getZipCodeData,
+    getZipCodeData
-    getMobileZipCodeData
 } from '@/helpers/service-location-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -107,7 +103,8 @@ const getAvailableDates = async (
     startDateString,
     endDateString,
     appointmentType,
-    providerNumber
+    providerNumber,
+    mobileZipCodeOverride = null
 ) => {
     const apiEndDateLimit = sumDateString(
         startDateString,
@@ -141,7 +138,8 @@ const getAvailableDates = async (
                 storeAction: GET_MOBILE_TIME_SLOTS,
                 payload: {
                     startDate: apiStartDate,
-                    endDate: apiEndDate
+                    endDate: apiEndDate,
+                    zipCodeOverride: mobileZipCodeOverride
                 }
             };
         } else {
@@ -181,7 +179,8 @@ const getAvailableDates = async (
             } else {
                 timeSlotsResponse = await useMainStore().getMobileTimeSlots(
                     storeAction.payload.startDate,
-                    storeAction.payload.endDate
+                    storeAction.payload.endDate,
+                    storeAction.payload.zipCodeOverride
                 );
             }
 
@@ -297,6 +296,7 @@ export default {
             // vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
             await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
+            showIssLoadingModal(false);
         });
     },
     setup() {
@@ -305,8 +305,12 @@ export default {
     },
     data() {
         return {
+            inShopDatesData: [],
             isMobileView: false,
+            mobileDatesData: [],
             mobilePremiumAppointmentFee: null,
+            mobileProviderNumber: null,
+            mobileZipCodeOverride: null,
             selectableDatesData: [],
             selectedAppointmentType: this.getAppointmentType(),
             selectedDate: this.getSelectedDate(),
@@ -317,6 +321,9 @@ export default {
         };
     },
     computed: {
+        activeAppointmentType() {
+            return this.selectedAppointmentType;
+        },
         appointmentType() {
             return useMainStore().order.serviceLocation.appointmentType;
         },
@@ -328,26 +335,21 @@ export default {
             if (!serviceLocationToUse || !this.selectedAppointmentType) {
                 return false;
             }
+
             const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
                 && serviceLocationToUse.zipCodeCtu !== null
                 && serviceLocationToUse.appointmentType !== null
-                && (serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE
+                && (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-                    || serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+                        || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
-                    || serviceLocationToUse.provider.providerNumber);
+                        && serviceLocationToUse.mobileProviderNumber)
+                    || (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP
+                        && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber)));
 
             const damageInfo = useMainStore().order.damage.isRepair
                 || (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
 
             const supportingItems = this.supportingItems !== null;
 
-            console.log('Has Needed Service Location Data Check:', {
-                serviceLocationPreReqs,
-                supportingItems,
-                damageInfo
-            });
-
-            console.log('Result:', (serviceLocationPreReqs && supportingItems && damageInfo));
-
             return (serviceLocationPreReqs && supportingItems && damageInfo);
         },
         isFormValid() {
@@ -359,6 +361,7 @@ export default {
         }
     },
     mounted() {
+        showIssLoadingModal(true);
         this.mql = window.matchMedia('(min-width: 1200px)');
         this.isMobileView = !this.mql.matches;
         this.mql.addEventListener('change', this.handleMqlChange);
@@ -374,7 +377,6 @@ export default {
             return useMainStore().order.serviceLocation.zipCode !== null;
         },
         async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) {
-            // this.selectableDatesData = initialShopTimeSlotsResponse;
             this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
                 ? premiumFeeWithPriceResponse[0]
                 : null;
@@ -382,15 +384,27 @@ export default {
 
             if (this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE
                 && this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
-                const initialData = await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber);
+                await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber).then((initialData) => {
-                this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
+                    this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
-                this.$refs.datePicker.setCalendarData(initialData);
+                    this.$refs.datePicker.setCalendarData(initialData);
+                });
             }
         },
         appointmentTypeChangedFromServiceLocation(newAppointmentType) {
-            console.log('Parent - Appointment Type Changed from Service Location:', newAppointmentType);
+            this.selectedAppointmentType = newAppointmentType.appointmentType;
-            this.selectedAppointmentType = newAppointmentType;
+            if (newAppointmentType.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-            this.shouldRefreshDatePicker();
+                if (this.inShopDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
+                    this.selectableDatesData = this.inShopDatesData.initialShopTimeSlotsResponse;
+                    this.$refs.datePicker.initializeComponent(this.inShopDatesData);
+                } else {
+                    console.log('Appointment Type is In-Shop, but no existing data. Need to fetch here?...');
+                }
+            } else if (this.mobileDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
+                this.selectableDatesData = this.mobileDatesData.initialShopTimeSlotsResponse;
+                this.$refs.datePicker.initializeComponent(this.mobileDatesData);
+            } else {
+                console.log('Appointment Type is Mobile, but no existing data. Need to fetch here?...');
+            }
         },
         dateSelectedFromPicker(date) {
             this.selectedDate = date;
@@ -400,13 +414,11 @@ export default {
             return this.mainStore.order?.serviceLocation?.appointmentType;
         },
         async getAvailableDatesMethod(startDate, endDate) {
-            console.log('Fetching Available Dates from Method...');
-            console.log('More Data concatenation called with Start Date:', startDate, 'End Date:', endDate);
             const newShopTimeSlots = await getAvailableDates(
                 startDate,
                 endDate,
-                this.appointmentType,
+                this.activeAppointmentType,
-                this.mainStore.order.serviceLocation.provider.providerNumber
+                this.selectedProvider.providerNumber
             );
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData.days =
@@ -415,8 +427,9 @@ export default {
         },
         getAvailableDates,
         async getDatePickerInitialData(defaultProviderNumber = null) {
-            console.log('Fetching Date Picker Initial Data...');
+            this.inShopDatesData = [];
-            console.log('defaultProviderNumber:', defaultProviderNumber);
+            this.mobileDatesData = [];
+
             let todayDateString;
             const todayDateObject = new Date();
             const calendarViewDirection = 'future';
@@ -449,7 +462,8 @@ export default {
                     initialViewStartDate,
                     initialViewEndDate,
                     this.selectedAppointmentType || AppointmentTypeStrings.IN_SHOP,
-                    this.selectedProvider.providerNumber || defaultProviderNumber
+                    this.selectedProvider.providerNumber || defaultProviderNumber,
+                    this.selectedServiceLocation.zipCode
                 );
                 resolve(response);
             });
@@ -465,8 +479,36 @@ export default {
                 daysFromStart: endDateObject.daysFromStart || null
             }));
 
-            console.log('Date Picker Initial Data:');
+            if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-            console.log(initialData);
+                || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
+                this.mobileDatesData = initialData;
+
+                const inShopDatePickerPromise = new Promise((resolve) => {
+                    const response = getAvailableDates(
+                        initialViewStartDate,
+                        initialViewEndDate,
+                        AppointmentTypeStrings.IN_SHOP,
+                        this.selectedProvider.providerNumber || defaultProviderNumber,
+                        this.selectedServiceLocation.zipCode
+                    );
+                    resolve(response);
+                });
+
+                const inShopData = await inShopDatePickerPromise.then((response) => ({
+                    todayDate: todayDateString,
+                    initialViewStartDate,
+                    initialViewEndDate,
+                    calendarViewDirection,
+                    initialShopTimeSlotsResponse: response,
+                    preSelectedDate,
+                    initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
+                    daysFromStart: endDateObject.daysFromStart || null
+                }));
+
+                this.inShopDatesData = inShopData;
+            } else {
+                this.inShopDatesData = initialData;
+            }
 
             return initialData;
         },
@@ -531,24 +573,36 @@ export default {
         handleMqlChange(e) {
             this.isMobileView = !e.matches;
         },
-        mobileZipUpdatedFromChild(newMobileZip) {
+        mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
-            console.log('Parent - Mobile Zip Updated from Child:', newMobileZip);
+            if (mobileZipServiceLocation) {
-        },
+                this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;
-        providerChangedFromChild(newProvider) {
+                this.selectedServiceLocation = mobileZipServiceLocation;
-            console.log('Parent - Provider Changed from Child:', newProvider);
+
-            this.selectedProvider = newProvider;
+                if (mobileZipServiceLocation && mobileZipServiceLocation.refreshDatePicker) {
-            // this.shouldRefreshDatePicker();
+                    this.refreshDatePicker();
-        },
+                }
-        serviceLocationUpdatedFromChild(serviceLocationFromChild) {
-            this.selectedServiceLocation = serviceLocationFromChild;
-        },
-        async shouldRefreshDatePicker() {
-            if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && 1 === 2) {
-                const initialData = await this.getDatePickerInitialData();
-                this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
-                this.$refs.datePicker.initializeComponent(initialData);
             }
         },
+        providerChangedFromServiceLocation(newProvider) {
+            console.log('Parent - Provider Changed from Service Location:', newProvider);
+            this.selectedProvider = newProvider?.provider;
+
+            if (newProvider?.refreshDatePicker) {
+                showIssLoadingModal(true);
+                this.refreshDatePicker();
+            }
+        },
+        serviceLocationUpdatedFromServiceLocation(newServiceLocation) {
+            console.log('Parent - Service Location Updated from Service Location:', newServiceLocation);
+            this.selectedServiceLocation = newServiceLocation;
+        },
+        async refreshDatePicker() {
+            await this.getDatePickerInitialData().then((data) => {
+                this.selectableDatesData = data.initialShopTimeSlotsResponse;
+                this.$refs.datePicker.initializeComponent(data);
+                showIssLoadingModal(false);
+            });
+        },
         timeSlotSelectedFromPicker(timeSlot) {
             this.selectedTimeSlotInfo = timeSlot;
             this.showDatePickerError = false;

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

@@ -120,6 +120,7 @@
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import errorMessages from '@/constants/error-messages';
 import { useMainStore } from '@/store';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
     getAvailabilityRating,
     getPricedMobileFeePart,
@@ -185,30 +186,43 @@ export default {
         };
     },
     computed: {
-        questionText() {
-            return this.getCmsContent(
-                'ServiceTypeQuestionWidget',
-                'QuestionText'
-            );
-        },
         answersFromCms() {
             return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
         },
-        isServiceableMobile() {
+        appointmentQuestionText() {
-            if (this.isRecalibrationServiceableMobile !== null) {
+            return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
-                return (
-                    this.isGlassServiceableMobile
-                    && this.isRecalibrationServiceableMobile
-                );
-            }
-            return this.isGlassServiceableMobile;
         },
-        isServiceableInshop() {
+        displayBigTruckNoShops() {
-            if (this.isRecalibrationServiceableInshop !== null) {
+            return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
-                return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop);
+        },
-            }
+        displayLowAvailabilityInshop() {
-
+            return this.availabilityRating === 'low' && this.isInshop;
-            return this.isGlassServiceableInshop;
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        },
+        displayMobileFeeDisclaimer() {
+            return this.mainStore.isNoComp || this.mainStore.isITAC;
+        },
+        displayNoShopsAlert() {
+            return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
+        },
+        displayRecalibrationWarning() {
+            return this.requiresInshopRecalibration;
+        },
+        displayServiceableInshopOnly() {
+            return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
+        },
+        displayServiceableMobileOnly() {
+            return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
+        },
+        inShopOnlyCopy() {
+            let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+            content = content.replace('{custom:city}', toTitleCase(this.city));
+            return content;
+        },
+        isBigTruck() {
+            return this.mainStore.order.vehicle.isBigTruck;
         },
         isInshop() {
             return (
@@ -219,6 +233,51 @@ export default {
         isMobile() {
             return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
         },
+        isServiceableInshop() {
+            if (this.isRecalibrationServiceableInshop !== null) {
+                return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop);
+            }
+
+            return this.isGlassServiceableInshop;
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return (
+                    this.isGlassServiceableMobile
+                    && this.isRecalibrationServiceableMobile
+                );
+            }
+            return this.isGlassServiceableMobile;
+        },
+        militaryBaseWarningLinkText() {
+            return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
+        },
+        militaryBaseWarningText() {
+            return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+        },
+        mobileOnlyCopy() {
+            let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+            content = content.replace('{custom:city}', toTitleCase(this.city));
+            return content;
+        },
+        mobileZipPlaceholder() {
+            return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
+        navigateBackScenario() {
+            const { isNoComp, isITAC } = useMainStore();
+            return isNoComp || isITAC
+                ? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
+                : this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
+        },
+        questionText() {
+            return this.getCmsContent(
+                'ServiceTypeQuestionWidget',
+                'QuestionText'
+            );
+        },
+        recalibrationRequired() {
+            return this.mainStore.hasRecalibrationPart;
+        },
         requiresInshopRecalibration() {
             // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
             return (
@@ -227,104 +286,64 @@ export default {
                 && this.isRecalibrationServiceableMobile === false
             );
         },
-        displayMilitaryZipAlert() {
-            return this.zipContainsMilitaryBase && this.isServiceableMobile;
-        },
-        displayNoShopsAlert() {
-            return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
-        },
-        displayBigTruckNoShops() {
-            return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
-        },
-        displayRecalibrationWarning() {
-            return this.requiresInshopRecalibration;
-        },
-        displayLowAvailabilityInshop() {
-            return this.availabilityRating === 'low' && this.isInshop;
-        },
-        displayServiceableInshopOnly() {
-            return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
-        },
-        displayServiceableMobileOnly() {
-            return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
-        },
-        displayMobileFeeDisclaimer() {
-            return this.mainStore.isNoComp || this.mainStore.isITAC;
-        },
-        navigateBackScenario() {
-            const { isNoComp, isITAC } = useMainStore();
-            return isNoComp || isITAC
-                ? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
-                : this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
-        },
-        isBigTruck() {
-            return this.mainStore.order.vehicle.isBigTruck;
-        },
-        mobileZipPlaceholder() {
-            return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
-        },
-        militaryBaseWarningLinkText() {
-            return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
-        },
-        militaryBaseWarningText() {
-            return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
-        },
-        appointmentQuestionText() {
-            return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
-        },
         scheduleRecalText() {
             if (this.requiresInshopRecalibration) {
                 return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
             }
             return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
-        },
-        inShopOnlyCopy() {
-            let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
-            content = content.replace('{custom:city}', toTitleCase(this.city));
-            return content;
-        },
-        mobileOnlyCopy() {
-            let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
-            content = content.replace('{custom:city}', toTitleCase(this.city));
-            return content;
-        },
-        recalibrationRequired() {
-            return this.mainStore.hasRecalibrationPart;
         }
     },
     watch: {
-        mobileZipCode(newZip) {
+        async mobileZipCode(newZip) {
-            console.log('Mobile Zip Changed:', newZip);
             if (newZip !== '') {
-                this.updateMobileZip();
+                showIssLoadingModal(true);
-                this.$emit('mobile-zip-updated', newZip);
+                await this.updateMobileZip();
+                const updateMobileZipServiceLocationObj = {
+                    mobileProviderNumber: this.mobileProviderNumber,
+                    provider: null,
+                    refreshDatePicker: true,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu
+                };
+                this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
             }
         },
-        selectedAppointmentType() {
+        selectedAppointmentType(newValue, oldValue) {
-            console.log('Appointment Type Changed:', this.selectedAppointmentType);
-            this.mobileZipCode = '';
             if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider && this.availabilityRating === null) {
-                console.log('Fetching availability rating for in-shop appointment type...');
+                this.refreshAvailabilityRating();
-                const startDate = new Date();
+
-                const endDate = new Date();
+                const appointmenTypeServiceLocationObj = {
-                endDate.setDate(startDate.getDate() + 6);
+                    appointmentType: newValue,
-                const formattedStartDate = startDate.toISOString().split('T')[0];
+                    mobileProviderNumber: null,
-                const formattedEndDate = endDate.toISOString().split('T')[0];
+                    provider: this.selectedProvider,
-                getAvailabilityRating(
+                    refreshDatePicker: oldValue !== newValue && oldValue !== null,
-                    formattedStartDate,
+                    resetDatePicker: oldValue !== newValue || oldValue === null,
-                    formattedEndDate,
+                    zipCode: this.zipCode,
-                    AppointmentTypeStrings.IN_SHOP,
+                    zipCodeCtu: this.zipCodeCtu
-                    this.selectedProvider ? this.selectedProvider.providerNumber : null
+                };
-                ).then((rating) => {
+                this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj);
-                    this.availabilityRating = rating;
+            } else {
-                });
+                const appointmenTypeServiceLocationObj = {
+                    appointmentType: newValue,
+                    mobileProviderNumber: this.mobileProviderNumber,
+                    provider: null,
+                    refreshDatePicker: false,
+                    resetDatePicker: true,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu
+                };
+                this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj);
             }
-            this.$emit('appointment-type-changed', this.selectedAppointmentType);
         },
         selectedProvider(newProvider, oldProvider) {
-            if (newProvider !== oldProvider) {
+            if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
-                console.log('Selected Provider Changed:', newProvider);
+                const returnedProvider = {
-                this.$emit('provider-changed', newProvider);
+                    provider: newProvider,
+                    refreshDatePicker: oldProvider?.providerNumber !== null
+                };
+
+                this.refreshAvailabilityRating();
+                this.$emit('provider-changed', returnedProvider);
             }
         }
     },
@@ -394,6 +413,36 @@ export default {
         getSelectedProvider() {
             return useMainStore().order.serviceLocation.provider;
         },
+        async handleInShopZipUpdated(newZip) {
+            this.zipCode = newZip;
+            const zipCodeData = await getZipCodeData(this.zipCode);
+            this.city = zipCodeData.city;
+            this.setCtuForMobile(zipCodeData.zipCodeCtu);
+            this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
+
+            const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
+            await serviceabilityDetailsPromise.then((result) => {
+                const details = result.data;
+                if (details) {
+                    this.setServiceabilityDetails(details);
+                }
+            });
+        },
+        refreshAvailabilityRating() {
+            const startDate = new Date();
+            const endDate = new Date();
+            endDate.setDate(startDate.getDate() + 6);
+            const formattedStartDate = startDate.toISOString().split('T')[0];
+            const formattedEndDate = endDate.toISOString().split('T')[0];
+            getAvailabilityRating(
+                formattedStartDate,
+                formattedEndDate,
+                AppointmentTypeStrings.IN_SHOP,
+                this.selectedProvider ? this.selectedProvider.providerNumber : null
+            ).then((rating) => {
+                this.availabilityRating = rating;
+            });
+        },
         setCtuForMobile(val) {
             this.zipCodeCtu = val;
         },
@@ -463,7 +512,6 @@ export default {
         },
         async updateMobileZip() {
             this.mobileZipError = '';
-
             const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
 
             if (!zipCodeData.isValid) {
@@ -477,7 +525,7 @@ export default {
                 this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
 
                 const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
-                serviceabilityDetailsPromise.then((result) => {
+                await serviceabilityDetailsPromise.then((result) => {
                     const details = result.data;
                     if (details) {
                         this.setServiceabilityDetails(details);
@@ -485,7 +533,7 @@ export default {
                 });
 
                 const providersPromise = useMainStore().getProviders(this.mobileZipCode);
-                providersPromise.then((result) => {
+                await providersPromise.then((result) => {
                     const providers = result.data;
                     if (providers) {
                         this.setMobileProviderNumber(providers.mobileProviderNumber);
@@ -498,21 +546,6 @@ export default {
                     }
                 });
             }
-        },
-        async handleInShopZipUpdated(newZip) {
-            this.zipCode = newZip;
-            const zipCodeData = await getZipCodeData(this.zipCode);
-            this.city = zipCodeData.city;
-            this.setCtuForMobile(zipCodeData.zipCodeCtu);
-            this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
-
-            const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
-            serviceabilityDetailsPromise.then((result) => {
-                const details = result.data;
-                if (details) {
-                    this.setServiceabilityDetails(details);
-                }
-            });
         }
     }
 };

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

@@ -57,7 +57,6 @@ export default {
     },
     methods: {
         updateModelValue() {
-            console.log('Service Zip Updated:', this.internalZipcode);
             this.$emit('update:modelValue', this.internalZipcode);
         }
     }

src/store/index.js

@@ -875,7 +875,8 @@ export const useMainStore = defineStore({
                 logApiCall: true
             });
         },
-        getMobileTimeSlots(startDate, endDate) {
+        getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) {
+            console.log('Getting mobile time slots with zip code override:', zipCodeOverride);
             const { order } = this;
             const { vehicle } = this.order;
             let lineItems = [
@@ -921,7 +922,7 @@ export const useMainStore = defineStore({
                     style: vehicle.style,
                     vin: vehicle.vin ?? ''
                 },
-                zipCode: order.serviceLocation.zipCode
+                zipCode: zipCodeOverride ?? order.serviceLocation.zipCode
             };
             return globalMethods.callHttpClient({
                 method: endpoints.GetMobileTimeSlots.method,
@@ -931,7 +932,7 @@ export const useMainStore = defineStore({
                 additionalSuccessEventDataHandler: (response) =>
                     getTimeSlotsAdditionalEventData(
                         response.data.provisionalTriggers,
-                        order.serviceLocation.zipCode,
+                        zipCodeOverride ?? order.serviceLocation.zipCode,
                         response.data.days?.[0]?.date
                     )
             });