diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index b785a171..9d1a1443 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/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, diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue index 99139a0a..0cd0f480 100644 --- a/src/layouts/schedule-page/schedule-page.vue +++ b/src/layouts/schedule-page/schedule-page.vue @@ -20,6 +20,7 @@ ref="serviceLocation" @appointmentTypeChanged="appointmentTypeChangedFromServiceLocation" @cityUpdated="cityUpdatedFromServiceLocation" + @inShopZipUpdated="inShopZipUpdatedFromServiceLocation" @mobileZipUpdated="mobileZipUpdatedFromServiceLocation" @providerChanged="providerChangedFromServiceLocation" /> @@ -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) { diff --git a/src/layouts/schedule-page/service-location/service-location.vue b/src/layouts/schedule-page/service-location/service-location.vue index 069ec472..e48dddcc 100644 --- a/src/layouts/schedule-page/service-location/service-location.vue +++ b/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) { - this.setData(initialData); + async initializeComponent(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; diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index 4f0a38ee..677cd1fd 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/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); } }