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
This commit is contained in:
AdamCaouetteSafelite 2025-12-31 17:13:20 -05:00
parent 9c4d2daa3e
commit f232245078
2 changed files with 42 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -200,6 +200,7 @@ export default {
pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean,
isMobileSelected: Boolean,
isLoadingDates: Boolean,
},
setup(props) {
const uuid = uuidv4();
@ -260,6 +261,15 @@ 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 + "-mobile" : inshopFirstDate;
},
},
methods: {
async initializeComponent(initialData) {
@ -835,6 +845,13 @@ export default {
},
},
watch: {
isLoadingDates(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,

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

@ -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: {