diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index f38df0372..f48b1f43b 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -281,7 +281,7 @@ export default { if (event.screenX === 0 && event.screenY === 0) { return; } - this.$emit("date-selected", date); + this.$emit("date-clicked", date); }, getWeekStartDate(dateString) { const date = convertDateStringToDate(dateString); @@ -846,6 +846,12 @@ export default { }, }, watch: { + isLoading(newValue) { + // if done loading dates, then set to first available date + if (newValue === false && this.firstAvailableSelectableDate) { + this.selectedDate = this.firstAvailableSelectableDate; + } + }, modelValue(newValue) { this.resetField({ value: newValue, diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 948a7de19..1ebf47c7e 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -22,7 +22,6 @@ cmsWidgetName="ScheduleYourServiceWidget" id="schedule-your-service" /> 0; - } else { - return this.selectableDatesInshop?.days?.length > 0; - } - }, }, methods: { splitCopyOnCMSPlaceHolder, @@ -1140,6 +1134,29 @@ export default { ); } }, + getTimeSlotInfo() { + // Get the current date + const currentDate = getTodayDate(); + + // Add 10 days to the current date + currentDate.setDate(currentDate.getDate() + 10); + + // Format the date as yyyy-mm-dd + const year = currentDate.getFullYear(); + const month = String(currentDate.getMonth() + 1).padStart(2, "0"); + const day = String(currentDate.getDate()).padStart(2, "0"); + + const formattedDate = `${year}-${month}-${day}`; + + return { + date: formattedDate, + endTime: "12:00", + jobMaxMinutes: "180", + jobMinMinutes: "120", + routeCode: "3357I-03357-M-I*20988*AM", + startTime: "08:00", + }; + }, onShopSelected(shopQuestionPopUpData) { this.resetWaitlist(); this.preSelectedDate = null; @@ -1192,6 +1209,8 @@ export default { async initializeDatePicker() { this.isShowMobileFirstAppt && this.showLoadingModal(); + this.selectedDate = null; + const includeMobileTimeSlots = this.isServiceableMobile; const includeInshopTimeSlots = this.isServiceableInshop || this.isServiceableDropoff; const datePickerInitialData = await this.$refs.datePicker.loadInitialData({ @@ -1582,40 +1601,28 @@ export default { handleWaitListRequested(value) { this.waitListRequested = value; }, - handleDateSelected(date) { - const previousDate = this.selectedDate; - - // check if date actually changed - if (previousDate !== date.dateString) { - this.selectedTimeSlotInfo = this.getEmptyTimeSlot(); - this.updateFooterButtonText(this.selectedTimeSlotInfo); + handleDateClicked(date) { + // do something to mark this as upcharge day or not... + if (date.isPricingByDayUpchargeDay) { + this.includePricingByDayUpcharge = true; + } else { + this.includePricingByDayUpcharge = false; } - - // TODO: REMOVE AS PART OF CASH-1634 - // // do something to mark this as upcharge day or not... - // if (date.isPricingByDayUpchargeDay) { - // this.includePricingByDayUpcharge = true; - // } else { - // this.includePricingByDayUpcharge = false; - // } - }, - getEmptyTimeSlot() { - return { - timeSlot: { - date: null, - routeCode: null, - startTime: null, - endTime: null, - jobMaxMinutes: null, - jobMinMinutes: null, - }, - isPremiumAppointment: null, - }; }, updateTimeSlot(timeSlotObj) { if (!timeSlotObj?.routeCode) { this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF; - this.selectedTimeSlotInfo = this.getEmptyTimeSlot(); + this.selectedTimeSlotInfo = { + timeSlot: { + date: null, + routeCode: null, + startTime: null, + endTime: null, + jobMaxMinutes: null, + jobMinMinutes: null, + }, + isPremiumAppointment: null, + }; return; } const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find( @@ -1714,9 +1721,6 @@ export default { }, handleAppointmentTypeChange(newAppointmentType) { this.updateFooterButtonText(); - // if time appointment type changes, clear any selected time slot - this.selectedTimeSlotInfo = this.getEmptyTimeSlot(); - if (newAppointmentType === AppointmentTypeStrings.MOBILE) { // Remember last shop selected if previous selection was inshop/dropoff if ( @@ -1725,6 +1729,17 @@ export default { AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) && this.selectedProvider ) { + this.selectedTimeSlotInfo = { + timeSlot: { + date: null, + routeCode: null, + startTime: null, + endTime: null, + jobMaxMinutes: null, + jobMinMinutes: null, + }, + isPremiumAppointment: null, + }; this.lastSelectedInshopOrDropoffProvider = this.selectedProvider; } this.appointmentType = AppointmentTypeStrings.MOBILE; @@ -1751,8 +1766,8 @@ export default { } else { this.appointmentType = null; } - this.setSelectedDateToFirstAvailable(); // v-if on appointmentTypeQuestion ensures dates have been loaded by now - this.setDisplayWaitList(); // v-if on appointmentTypeQuestion ensures dates have been loaded by now + this.setSelectedDateToFirstAvailable(); + this.setDisplayWaitList(); }, setSelectedDateToFirstAvailable() { this.selectedDate = this.getFirstAvailableDate(); @@ -1884,9 +1899,35 @@ export default { watch: { appointmentTypeFromAppointmentTypeQuestion: { handler(newValue, oldValue) { - this.handleAppointmentTypeChange(newValue); // v-if on appointmentTypeQuestion ensures dates have been loaded by now + this.handleAppointmentTypeChange(newValue); }, }, + selectedDate(newValue, oldValue) { + // Clear time slot selection if date selected changes + const selectedDate = this.getSelectedDateFromStore(); + if (oldValue && this.appointmentType === AppointmentTypeStrings.MOBILE) { + oldValue = `${oldValue}-mobile`; + } + const hasValueChanged = newValue !== oldValue; + const isDateDifferent = (newValue || oldValue) !== selectedDate; + + if (hasValueChanged && isDateDifferent && !this.selectedMobileFirstAppointment) { + this.selectedTimeSlotInfo = { + timeSlot: { + date: null, + routeCode: null, + startTime: null, + endTime: null, + jobMaxMinutes: null, + jobMinMinutes: null, + }, + isPremiumAppointment: null, + }; + } + }, + selectedTimeSlotInfo(newValue) { + this.updateFooterButtonText(newValue); + }, }, components: { funnelHeader, @@ -1899,6 +1940,7 @@ export default { textBlock, timeSlotQuestion, mobileFirstModal, + alert, serviceZipModalQuestion, appointmentTypeQuestion, diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue index d12757571..1b8a2cb2e 100644 --- a/src/layouts/schedule/time-slot-question/time-slot-question.vue +++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue @@ -1,7 +1,6 @@