jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-1315: ensure that date picker selects first available date once loaded

Browse source 
(cherry picked from commit f232245078)
This commit is contained in:
AdamCaouetteSafelite 2025-12-31 17:13:20 -05:00
parent ad1990d8b4
commit 3b3f8cd800
2 changed files with 27 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/digital-components/date-picker/date-picker.vue
View file

@ -200,6 +200,7 @@ export default {
pricingByDayUpcharge: Number, pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean, isPricingByDayExperiment: Boolean,
isMobileSelected: Boolean, isMobileSelected: Boolean,
isLoadingDates: Boolean,
}, },
setup(props) { setup(props) {
const uuid = uuidv4(); const uuid = uuidv4();
@ -846,7 +847,7 @@ export default {
}, },
}, },
watch: { watch: {
isLoading(newValue) { isLoadingDates(newValue) {
// if done loading dates, then set to first available date // if done loading dates, then set to first available date
if (newValue === false && this.firstAvailableSelectableDate) { if (newValue === false && this.firstAvailableSelectableDate) {
this.selectedDate = this.firstAvailableSelectableDate; this.selectedDate = this.firstAvailableSelectableDate;

72
src/layouts/schedule/schedule.vue
View file

@ -134,6 +134,7 @@
selectableDatesSetting="custom" selectableDatesSetting="custom"
ref="datePicker" ref="datePicker"
v-model="selectedDate" v-model="selectedDate"
:isLoadingDates="isLoadingDates"
:isMobileSelected="isMobileSelected" :isMobileSelected="isMobileSelected"
class="text-link-small" class="text-link-small"
:getMoreDatesCallback="getMoreScheduleData" :getMoreDatesCallback="getMoreScheduleData"
@ -332,12 +333,16 @@ const getScheduleApiResponse = async ({
const mobileTimeSlotsData = { const mobileTimeSlotsData = {
days: [], days: [],
}; };
function compareDayStrings(a, b) { function compareDayStrings(a, b) {
if (a.date < b.date) return -1; if (a.date < b.date) return -1;
if (a.date > b.date) return 1; if (a.date > b.date) return 1;
return 0; return 0;
} }
function removePastDates(array, todaysDate) {
return array.filter(function (a) {
return !(a.date < todaysDate);
});
}
const makeParallelCalls = async () => { const makeParallelCalls = async () => {
await Promise.all( await Promise.all(
@ -390,6 +395,10 @@ const getScheduleApiResponse = async ({
inshopTimeSlotsData.days.sort(compareDayStrings); inshopTimeSlotsData.days.sort(compareDayStrings);
mobileTimeSlotsData.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 { return {
inshopTimeSlotsData: inshopTimeSlotsData, inshopTimeSlotsData: inshopTimeSlotsData,
mobileTimeSlotsData: mobileTimeSlotsData, mobileTimeSlotsData: mobileTimeSlotsData,
@ -423,7 +432,7 @@ export default {
selectableDatesInshop: [], selectableDatesInshop: [],
selectableDatesMobile: [], selectableDatesMobile: [],
preSelectedDate: null, preSelectedDate: null,
isLoadingDates: true,
streetAddress: this.getServiceAddressFromStore(), streetAddress: this.getServiceAddressFromStore(),
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(), apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
carId: this.getCarIdfromStore(), carId: this.getCarIdfromStore(),
@ -613,7 +622,7 @@ export default {
this.selectedDate.includes("mobile") && this.selectedDate.includes("mobile") &&
!this.isMobileSelected !this.isMobileSelected
) { ) {
this.getNewSelectedDate(); this.setSelectedDateToFirstAvailable();
} }
return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion; return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion;
}, },
@ -1180,45 +1189,24 @@ export default {
datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge; datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
await this.$refs.datePicker.initializeComponent(datePickerInitialData); await this.$refs.datePicker.initializeComponent(datePickerInitialData);
this.selectableDatesInshop = this.selectableDatesInshop =
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData; await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
this.selectableDatesMobile = this.selectableDatesMobile =
datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData; await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
this.setDisplayWaitList(); this.setDisplayWaitList();
if (this.preSelectedDate) this.selectedDate = this.preSelectedDate; if (this.preSelectedDate) {
this.selectedDate = this.preSelectedDate;
if (!this.preSelectedDate) { } else {
// if no date is preselected on load, then select the first available // if no date is preselected on load, make sure there are some dates available
let selectedDateMobile = this.getSelectedDateForMobile();
let selectedDateInshop = this.getSelectedDateForInshop();
// if there is still no selected date, then load more and try again
if ( if (
(this.isServiceableMobile && !selectedDateMobile) || this.selectableDatesInshop.days.length < 1 ||
(this.isServiceableInshop && !selectedDateInshop) || this.selectableDatesMobile.days.length < 1
(this.isServiceableDropoff && !selectedDateInshop)
) { ) {
await this.$nextTick(); await this.$nextTick();
await this.$refs.datePicker.showAnotherMonth(); await this.$refs.datePicker.showAnotherMonth();
this.isLoadingDates = false;
// 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(); this.setDisplayWaitList();
} }
await this.$nextTick();
if (this.isMobileSelected) {
this.selectedDate = this.getSelectedDateForMobile();
} else {
this.selectedDate = this.getSelectedDateForInshop();
}
} }
}, },
getScheduleApiResponse, getScheduleApiResponse,
@ -1623,7 +1611,7 @@ export default {
? AppointmentTypeStrings.DROP_OFF ? AppointmentTypeStrings.DROP_OFF
: AppointmentTypeStrings.IN_SHOP; : AppointmentTypeStrings.IN_SHOP;
}, },
getSelectedDate() { getFirstAvailableDate() {
let dateToSelect; let dateToSelect;
if (this.isMobileSelected) { if (this.isMobileSelected) {
dateToSelect = returnFirstDate(this.selectableDatesMobile); dateToSelect = returnFirstDate(this.selectableDatesMobile);
@ -1633,16 +1621,6 @@ export default {
if (!dateToSelect) return null; if (!dateToSelect) return null;
return this.isMobileSelected ? dateToSelect + "-mobile" : dateToSelect; 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() { resetSelectedProvider() {
this.selectedProvider = new Provider(); this.selectedProvider = new Provider();
this.updateSelectedProvider(); this.updateSelectedProvider();
@ -1741,11 +1719,11 @@ export default {
} else { } else {
this.appointmentType = null; this.appointmentType = null;
} }
this.selectedDate = this.getSelectedDate(); this.setSelectedDateToFirstAvailable();
this.setDisplayWaitList(); this.setDisplayWaitList();
}, },
getNewSelectedDate() { setSelectedDateToFirstAvailable() {
this.selectedDate = this.getSelectedDate(); this.selectedDate = this.getFirstAvailableDate();
}, },
}, },
watch: { watch: {