diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 164010f5d..9fe6bb7a9 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -359,8 +359,8 @@ export default { }, }, methods: { - initializeComponent(initialData) { - this.setCalendarData(initialData); + async initializeComponent(initialData) { + await this.setCalendarData(initialData); this.$refs.timeSlotModalQuestion.initializeComponent(); }, fireDateSelectedEvent(event, date) { @@ -555,6 +555,8 @@ export default { endDateString: initialViewEndDate, providerNumber: config.providerNumber, zipCode: config.zipCode, + includeMobileTimeSlots: config.includeMobileTimeSlots, + includeInshopTimeSlots: config.includeInshopTimeSlots, }); resolve(response); }); @@ -574,6 +576,11 @@ export default { }); }, async setCalendarData(config = {}) { + this.isLoading = true; + this.selectableDatesInshop = []; + this.selectableDatesMobile = []; + this.months = []; + this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView; const hideSecondMonth = config.hideSecondMonth; const direction = config.calendarViewDirection; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 2398f167d..bae6ca5eb 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -119,6 +119,8 @@
{ - if (!this.selectedDate) { - // if no date is preselected on load, then select the first available - if (this.isMobileSelected) { - this.selectedDate = returnFirstDate(this.selectableDatesMobile); - } else { - this.selectedDate = returnFirstDate(this.selectableDatesInshop); - } - - // if there is still no selected date, then load more and try again - if (!this.selectedDate) { - setTimeout(() => { - this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => { - // update global - this.selectableDatesInshop.days = - moreSelectableDates.inshopTimeSlotsData.days; - this.selectableDatesMobile.days = - moreSelectableDates.mobileTimeSlotsData.days; - - if (this.isMobileSelected) { - this.selectedDate = returnFirstDate(this.selectableDatesMobile); - } else { - this.selectedDate = returnFirstDate(this.selectableDatesInshop); - } - - this.setDisplayWaitList(); - }); - }, 50); - } - } - }); + await this.initializeDatePicker(); }, computed: { serviceZipCodeQuestion: { @@ -792,7 +744,7 @@ export default { return store.getters.order.policy.isNoComp; }, isForwardActionDisabled() { - return this.displayNoShopsAlert || !this.isMobileAddressValid; + return this.displayNoShopsAlert; }, additionalButtonData() { return { @@ -1147,17 +1099,15 @@ export default { onShopSelected(shopQuestionPopUpData) { this.shopProviderData = shopQuestionPopUpData.shopProviderData; this.setServiceabilityDetails(shopQuestionPopUpData.serviceabilityDetails); - this.selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => { + const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => { return shopProvider.providerNumber === shopQuestionPopUpData.selectedProviderNumber; }); // No zipCodeData comes back if zip was not changed if (shopQuestionPopUpData.zipCodeData) { - this.zipCode = shopQuestionPopUpData.zipCodeData.zipCode; - this.state = shopQuestionPopUpData.zipCodeData.state; - this.zipCodeCtu = shopQuestionPopUpData.zipCodeData.zipCodeCtu; - this.zipContainsMilitaryBase = - shopQuestionPopUpData.zipCodeData.containsMilitaryBase; + this.updateSelectedProviderAndZipCode(shopQuestionPopUpData.zipCodeData, selectedProvider); + } else { + this.updateSelectedProvider(selectedProvider); } }, async getMoreScheduleData(startDate, endDate) { @@ -1181,11 +1131,61 @@ export default { return moreShopTimeSlots; }, + + async initializeDatePicker() { + this.selectedDate = null; + + const datePickerInitialData = await this.$refs.datePicker.loadInitialData({ + // setup config options for date-picker + selectableDatesSetting: "custom", + initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW, + getSelectableDatesCallback: getScheduleApiResponse, + // preSelectedDate: preSelectedDate, + providerNumber: this.selectedProvider?.providerNumber, + zipCode: this.zipCode, + includeMobileTimeSlots: this.isServiceableMobile, + includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff, + }); + datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice; + datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge; + this.$refs.datePicker.initializeComponent(datePickerInitialData); + this.selectableDatesInshop = + datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData; + this.selectableDatesMobile = + datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData; + + // TODO - CHECK FOR A PRESELECTED DATE!!! DON'T NEED TO DO THE BELOW IF THERE'S A PRESELECTED...? + + if (!this.selectedDate) { + // if no date is preselected on load, then select the first available + const selectedDateMobile = this.getSelectedDateForMobile(); + const selectedDateInshop = this.getSelectedDateForInshop(); + + // if there is still no selected date, then load more and try again + if ((this.isServiceableMobile && !selectedDateMobile) || (this.isServiceableInshop && !selectedDateInshop) || (this.isServiceableDropoff && !selectedDateInshop)) { + setTimeout(() => { + this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => { + // update all dates + this.selectableDatesInshop.days = + moreSelectableDates.inshopTimeSlotsData.days; + this.selectableDatesMobile.days = + moreSelectableDates.mobileTimeSlotsData.days; + this.setDisplayWaitList(); + }); + }, 50); + } + if (this.isMobileSelected) { + this.selectedDate = selectedDateMobile; + } else { + this.selectedDate = selectedDateInshop; + } + } + }, getScheduleApiResponse, getServiceZipCtuCodeFromStore() { return store.getters.order.serviceLocation.zipCodeCtu; }, - getSelectedDate() { + getSelectedDateFromStore() { let isMobileSelected = this.isMobileSelected; if (isMobileSelected === undefined) { isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE; @@ -1539,9 +1539,34 @@ export default { ? AppointmentTypeStrings.DROP_OFF : AppointmentTypeStrings.IN_SHOP; }, - updateSelectedProvider(oldProvider, newProvider) { + getSelectedDate() { + let dateToSelect; + if (this.isMobileSelected) { + dateToSelect = returnFirstDate(this.selectableDatesMobile); + } else { + dateToSelect = returnFirstDate(this.selectableDatesInshop); + } + if (!dateToSelect) return null; + return this.isMobileSelected ? dateToSelect + "-mobile" : dateToSelect; + }, + getSelectedDateForMobile() { + let dateToSelect = returnFirstDate(this.selectableDatesMobile); + if (!dateToSelect) return null; + return dateToSelect + "-mobile"; + }, + getSelectedDateForInshop() { + let dateToSelect = returnFirstDate(this.selectableDatesInshop); + if (!dateToSelect) return null; + return dateToSelect; + }, + resetSelectedProvider() { + this.selectedProvider = new Provider(); + this.updateSelectedProvider(); + }, + updateSelectedProvider(newProvider) { if (newProvider) { this.selectedProvider = newProvider; + this.initializeDatePicker(); } else if ( // use closest shopProvider if none exists !this.selectedProvider?.address?.streetAddress && @@ -1552,27 +1577,39 @@ export default { }, handleZipCodeChange(newZipCode) { this.resetMobileLocation(); - this.selectedProvider = new Provider(); - getShopProviderData(newZipCode.zipCode).then(async (result) => { + this.appointmentTypeFromAppointmentTypeQuestion = null; + + getShopProviderData(newZipCode.zipCode).then((result) => { this.shopProviderData = result.data; - if (this.appointmentType === AppointmentTypeStrings.MOBILE) { - this.updateSelectedProvider( - this.selectedProvider, - new Provider(this.shopProviderData.mobileProviderNumber) - ); - } else { - this.isMobileAddressValid = true; - this.updateSelectedProvider(); - } + this.resetSelectedProvider(); + this.state = newZipCode.state; + this.zipCode = newZipCode.zipCode; + this.zipCodeCtu = newZipCode.zipCodeCtu; + this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase; + this.selectedDate = null; + this.initializeDatePicker(); }); - this.state = newZipCode.state; - this.zipCode = newZipCode.zipCode; - this.zipCodeCtu = newZipCode.zipCodeCtu; + }, + updateSelectedProviderAndZipCode(newZipCode, newProvider) { + this.resetMobileLocation(); + + getShopProviderData(newZipCode.zipCode).then((result) => { + this.shopProviderData = result.data; + this.state = newZipCode.state; + this.zipCode = newZipCode.zipCode; + this.zipCodeCtu = newZipCode.zipCodeCtu; + this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase; + this.selectedDate = null; + this.selectedProvider = newProvider; + this.initializeDatePicker(); + }); + }, handleAppointmentTypeChange(newAppointmentType) { + this.updateFooterButtonText(); if (newAppointmentType === AppointmentTypeStrings.MOBILE) { this.appointmentType = AppointmentTypeStrings.MOBILE; - } else { + } else if (newAppointmentType) { if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) { // update appointmentType based on routeCode to determine if it should be dropoff or inshop this.appointmentType = this.getInShopOrDropOffApptType( @@ -1584,7 +1621,10 @@ export default { // make sure a selectedProvider exists this.updateSelectedProvider(); + } else { + this.appointmentType = null; } + this.selectedDate = this.getSelectedDate(); }, }, watch: {