From 3b3f8cd800eb3e8468e84e8fe027c24f5dfd5ef6 Mon Sep 17 00:00:00 2001 From: AdamCaouetteSafelite Date: Wed, 31 Dec 2025 17:13:20 -0500 Subject: [PATCH] CASH-1315: ensure that date picker selects first available date once loaded (cherry picked from commit f2322450781b679a753dc5be8177de75ee04b568) --- .../date-picker/date-picker.vue | 3 +- src/layouts/schedule/schedule.vue | 72 +++++++------------ 2 files changed, 27 insertions(+), 48 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index d586ff839..e12c835e9 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -200,6 +200,7 @@ export default { pricingByDayUpcharge: Number, isPricingByDayExperiment: Boolean, isMobileSelected: Boolean, + isLoadingDates: Boolean, }, setup(props) { const uuid = uuidv4(); @@ -846,7 +847,7 @@ export default { }, }, watch: { - isLoading(newValue) { + isLoadingDates(newValue) { // if done loading dates, then set to first available date if (newValue === false && this.firstAvailableSelectableDate) { this.selectedDate = this.firstAvailableSelectableDate; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 01b9841c0..178a15d7b 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -134,6 +134,7 @@ selectableDatesSetting="custom" ref="datePicker" v-model="selectedDate" + :isLoadingDates="isLoadingDates" :isMobileSelected="isMobileSelected" class="text-link-small" :getMoreDatesCallback="getMoreScheduleData" @@ -332,12 +333,16 @@ const getScheduleApiResponse = async ({ const mobileTimeSlotsData = { days: [], }; - function compareDayStrings(a, b) { if (a.date < b.date) return -1; if (a.date > b.date) return 1; return 0; } + function removePastDates(array, todaysDate) { + return array.filter(function (a) { + return !(a.date < todaysDate); + }); + } const makeParallelCalls = async () => { await Promise.all( @@ -390,6 +395,10 @@ const getScheduleApiResponse = async ({ inshopTimeSlotsData.days.sort(compareDayStrings); mobileTimeSlotsData.days.sort(compareDayStrings); + const todaysDate = getTodayDate().toISOString().split("T")[0]; + inshopTimeSlotsData.days = removePastDates(inshopTimeSlotsData.days, todaysDate); + mobileTimeSlotsData.days = removePastDates(mobileTimeSlotsData.days, todaysDate); + return { inshopTimeSlotsData: inshopTimeSlotsData, mobileTimeSlotsData: mobileTimeSlotsData, @@ -423,7 +432,7 @@ export default { selectableDatesInshop: [], selectableDatesMobile: [], preSelectedDate: null, - + isLoadingDates: true, streetAddress: this.getServiceAddressFromStore(), apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(), carId: this.getCarIdfromStore(), @@ -613,7 +622,7 @@ export default { this.selectedDate.includes("mobile") && !this.isMobileSelected ) { - this.getNewSelectedDate(); + this.setSelectedDateToFirstAvailable(); } return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion; }, @@ -1180,45 +1189,24 @@ export default { datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge; await this.$refs.datePicker.initializeComponent(datePickerInitialData); this.selectableDatesInshop = - datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData; + await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData; this.selectableDatesMobile = - datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData; + await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData; this.setDisplayWaitList(); - if (this.preSelectedDate) this.selectedDate = this.preSelectedDate; - - if (!this.preSelectedDate) { - // if no date is preselected on load, then select the first available - let selectedDateMobile = this.getSelectedDateForMobile(); - let selectedDateInshop = this.getSelectedDateForInshop(); - - // if there is still no selected date, then load more and try again + if (this.preSelectedDate) { + this.selectedDate = this.preSelectedDate; + } else { + // if no date is preselected on load, make sure there are some dates available if ( - (this.isServiceableMobile && !selectedDateMobile) || - (this.isServiceableInshop && !selectedDateInshop) || - (this.isServiceableDropoff && !selectedDateInshop) + this.selectableDatesInshop.days.length < 1 || + this.selectableDatesMobile.days.length < 1 ) { await this.$nextTick(); await this.$refs.datePicker.showAnotherMonth(); - - // update all dates - - // > CHLOE HERD 7/22 -- CASH-1207 - // > Do not update the available dates again here; - // > they have already been updated by `showAnotherMonth`. - // > Doing so will likely add or remove dates, - // > desyncing the schedule page and the date-picker. - + this.isLoadingDates = false; this.setDisplayWaitList(); } - - await this.$nextTick(); - - if (this.isMobileSelected) { - this.selectedDate = this.getSelectedDateForMobile(); - } else { - this.selectedDate = this.getSelectedDateForInshop(); - } } }, getScheduleApiResponse, @@ -1623,7 +1611,7 @@ export default { ? AppointmentTypeStrings.DROP_OFF : AppointmentTypeStrings.IN_SHOP; }, - getSelectedDate() { + getFirstAvailableDate() { let dateToSelect; if (this.isMobileSelected) { dateToSelect = returnFirstDate(this.selectableDatesMobile); @@ -1633,16 +1621,6 @@ export default { 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(); @@ -1741,11 +1719,11 @@ export default { } else { this.appointmentType = null; } - this.selectedDate = this.getSelectedDate(); + this.setSelectedDateToFirstAvailable(); this.setDisplayWaitList(); }, - getNewSelectedDate() { - this.selectedDate = this.getSelectedDate(); + setSelectedDateToFirstAvailable() { + this.selectedDate = this.getFirstAvailableDate(); }, }, watch: {