diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index cbaba9193..32fe7f5f3 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -150,6 +150,7 @@ import { import { convertDateToDateString, convertDateStringToDate, + getTodayDateString, } from "@/layouts/schedule/helpers/schedule-helper"; import { useField, ErrorMessage } from "vee-validate"; import { deepClone } from "@/helpers/object-helper"; @@ -227,7 +228,7 @@ export default { }, computed: { todayString() { - return this.todayOverrideDateString || convertDateToDateString(new Date()); + return this.todayOverrideDateString || getTodayDateString(); }, todayDayIndex() { return convertDateStringToDate(this.todayString).getDay(); @@ -259,6 +260,17 @@ export default { this.dispatchStoreAction(this.storeActions.SAVE_WAITLIST_REQUESTED, false, false); }, }, + firstAvailableSelectableDate() { + const mobileFirstDate = Array.isArray(this.selectableDatesMobile) + ? this.selectableDatesMobile[0]?.date + : null; + const inshopFirstDate = Array.isArray(this.selectableDatesInshop) + ? this.selectableDatesInshop[0]?.date + : null; + return this.isMobileSelected && mobileFirstDate + ? mobileFirstDate + "-mobile" + : inshopFirstDate; + }, }, methods: { async initializeComponent(initialData) { @@ -414,7 +426,7 @@ export default { } else if (config.todayOverrideDateString) { todayDateString = config.todayOverrideDateString; } else { - todayDateString = convertDateToDateString(new Date()); + todayDateString = getTodayDateString(); } if (config.selectableDatesSetting === "past") calendarViewDirection = "past"; if (config.selectableDatesSetting === "custom") calendarViewDirection = "future"; @@ -530,6 +542,8 @@ export default { } this.months = months; this.isLoading = false; + // if done loading dates, then set to first available date + if (!this.selectedDate) this.selectedDate = this.firstAvailableSelectableDate; if (config.preSelectedDate) { this.$nextTick(() => { @@ -763,6 +777,9 @@ export default { ); this.isLoading = false; + // if done loading dates, then set to first available date + if (!this.selectedDate) this.selectedDate = this.firstAvailableSelectableDate; + this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", ""); this.scrollToElement(monthToShow.monthString); diff --git a/src/layouts/schedule/helpers/schedule-helper.js b/src/layouts/schedule/helpers/schedule-helper.js index 41a1cd66a..85df8aa43 100644 --- a/src/layouts/schedule/helpers/schedule-helper.js +++ b/src/layouts/schedule/helpers/schedule-helper.js @@ -71,3 +71,11 @@ export function isDropOffRouteCode(routeCode) { routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF) ); } + +export function getTodayDate(routeCode) { + return new Date(); +} + +export function getTodayDateString(routeCode) { + return convertDateToDateString(getTodayDate()); +} diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index af7e67bd0..7c9d9f444 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -233,6 +233,7 @@ import { convertDateStringToDate, sumDateString, isDropOffRouteCode, + getTodayDate, } from "@/layouts/schedule/helpers/schedule-helper"; import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants"; @@ -331,12 +332,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( @@ -389,6 +394,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, @@ -422,7 +431,6 @@ export default { selectableDatesInshop: [], selectableDatesMobile: [], preSelectedDate: null, - streetAddress: this.getServiceAddressFromStore(), apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(), carId: this.getCarIdfromStore(), @@ -612,7 +620,7 @@ export default { this.selectedDate.includes("mobile") && !this.isMobileSelected ) { - this.getNewSelectedDate(); + this.setSelectedDateToFirstAvailable(); } return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion; }, @@ -826,7 +834,7 @@ export default { } }, isSameDay() { - const todaysDate = new Date().toISOString().split("T")[0]; + const todaysDate = getTodayDate().toISOString().split("T")[0]; return this.selectedDate === todaysDate; }, isOvernightDropoff() { @@ -1100,7 +1108,7 @@ export default { }, getTimeSlotInfo() { // Get the current date - const currentDate = new Date(); + const currentDate = getTodayDate(); // Add 10 days to the current date currentDate.setDate(currentDate.getDate() + 10); @@ -1179,45 +1187,23 @@ 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.setDisplayWaitList(); } - - await this.$nextTick(); - - if (this.isMobileSelected) { - this.selectedDate = this.getSelectedDateForMobile(); - } else { - this.selectedDate = this.getSelectedDateForInshop(); - } } }, getScheduleApiResponse, @@ -1403,7 +1389,7 @@ export default { const type = store.getters.isMobileAppointment ? "mobile" : "inshop"; gaLabel = `${status}_${type}`; - const currentDate = new Date(); + const currentDate = getTodayDate(); const dateString = this.isMobileSelected ? this.selectableDatesMobile.days[0].date : this.selectableDatesInshop.days[0].date; @@ -1477,7 +1463,7 @@ export default { ) { const [year, month, day] = dateString.split("-").map(Number); const targetDate = new Date(year, month - 1, day); - const currentDate = new Date(); + const currentDate = getTodayDate(); const futureDate = new Date(currentDate); const experimentThresholdDays = experimentMixin.methods.hasSetting( experimentSettings.WAITLIST_THRESHOLD_DAYS @@ -1622,7 +1608,7 @@ export default { ? AppointmentTypeStrings.DROP_OFF : AppointmentTypeStrings.IN_SHOP; }, - getSelectedDate() { + getFirstAvailableDate() { let dateToSelect; if (this.isMobileSelected) { dateToSelect = returnFirstDate(this.selectableDatesMobile); @@ -1632,16 +1618,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(); @@ -1740,11 +1716,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: {