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

CASH-845: several updates to get date picker working with schedule again

Browse source
This commit is contained in:
AdamCaouetteSafelite 2025-07-18 07:03:10 -04:00
parent f1ec6e6ff8
commit 2cf882988d
2 changed files with 125 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -359,8 +359,8 @@ export default {
},
},
methods: {
initializeComponent(initialData) {
this.setCalendarData(initialData);
async initializeComponent(initialData) {
await this.setCalendarData(initialData);
this.$refs.timeSlotModalQuestion.initializeComponent();
},
fireDateSelectedEvent(event, date) {
@ -555,6 +555,8 @@ export default {
endDateString: initialViewEndDate,
providerNumber: config.providerNumber,
zipCode: config.zipCode,
includeMobileTimeSlots: config.includeMobileTimeSlots,
includeInshopTimeSlots: config.includeInshopTimeSlots,
});
resolve(response);
});
@ -574,6 +576,11 @@ export default {
});
},
async setCalendarData(config = {}) {
this.isLoading = true;
this.selectableDatesInshop = [];
this.selectableDatesMobile = [];
this.months = [];
this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
const hideSecondMonth = config.hideSecondMonth;
const direction = config.calendarViewDirection;

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

@ -119,6 +119,8 @@
<div class="col-md-6 col-xl-4">
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
<datePicker
:currentZip="zipCode"
:currentProviderNumber="selectedProvider?.providerNumber"
v-show="appointmentType"
customComponentId="dateQuestion"
selectableDatesSetting="custom"
@ -382,7 +384,7 @@ export default {
name: "schedule",
data() {
return {
selectedDate: this.getSelectedDate(),
selectedDate: this.getSelectedDateFromStore(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
mobilePremiumAppointmentFee: null,
waitListRequested: null,
@ -420,7 +422,6 @@ export default {
billToAccountNumber: null,
shopProviderData: null,
navigatingForward: false,
isMobileAddressValid: true,
shopListButton: shopListButton,
};
},
@ -599,56 +600,7 @@ export default {
});
},
async mounted() {
const datePickerInitialData = await datePicker.methods.loadInitialData({
// setup config options for date-picker
selectableDatesSetting: "custom",
initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
getSelectableDatesCallback: getScheduleApiResponse,
// preSelectedDate: preSelectedDate,
providerNumber: this.selectedProvider?.providerNumber,
zipCode: this.zipCode,
includeMobileTimeSlots: this.isServiceableMobile,
includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
});
datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
this.$refs.datePicker.initializeComponent(datePickerInitialData);
this.selectableDatesInshop =
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
this.selectableDatesMobile =
datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
this.$nextTick(() => {
if (!this.selectedDate) {
// if no date is preselected on load, then select the first available
if (this.isMobileSelected) {
this.selectedDate = returnFirstDate(this.selectableDatesMobile);
} else {
this.selectedDate = returnFirstDate(this.selectableDatesInshop);
}
// if there is still no selected date, then load more and try again
if (!this.selectedDate) {
setTimeout(() => {
this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
// update global
this.selectableDatesInshop.days =
moreSelectableDates.inshopTimeSlotsData.days;
this.selectableDatesMobile.days =
moreSelectableDates.mobileTimeSlotsData.days;
if (this.isMobileSelected) {
this.selectedDate = returnFirstDate(this.selectableDatesMobile);
} else {
this.selectedDate = returnFirstDate(this.selectableDatesInshop);
}
this.setDisplayWaitList();
});
}, 50);
}
}
});
await this.initializeDatePicker();
},
computed: {
serviceZipCodeQuestion: {
@ -792,7 +744,7 @@ export default {
return store.getters.order.policy.isNoComp;
},
isForwardActionDisabled() {
return this.displayNoShopsAlert || !this.isMobileAddressValid;
return this.displayNoShopsAlert;
},
additionalButtonData() {
return {
@ -1147,17 +1099,15 @@ export default {
onShopSelected(shopQuestionPopUpData) {
this.shopProviderData = shopQuestionPopUpData.shopProviderData;
this.setServiceabilityDetails(shopQuestionPopUpData.serviceabilityDetails);
this.selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
return shopProvider.providerNumber === shopQuestionPopUpData.selectedProviderNumber;
});
// No zipCodeData comes back if zip was not changed
if (shopQuestionPopUpData.zipCodeData) {
this.zipCode = shopQuestionPopUpData.zipCodeData.zipCode;
this.state = shopQuestionPopUpData.zipCodeData.state;
this.zipCodeCtu = shopQuestionPopUpData.zipCodeData.zipCodeCtu;
this.zipContainsMilitaryBase =
shopQuestionPopUpData.zipCodeData.containsMilitaryBase;
this.updateSelectedProviderAndZipCode(shopQuestionPopUpData.zipCodeData, selectedProvider);
} else {
this.updateSelectedProvider(selectedProvider);
}
},
async getMoreScheduleData(startDate, endDate) {
@ -1181,11 +1131,61 @@ export default {
return moreShopTimeSlots;
},
async initializeDatePicker() {
this.selectedDate = null;
const datePickerInitialData = await this.$refs.datePicker.loadInitialData({
// setup config options for date-picker
selectableDatesSetting: "custom",
initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
getSelectableDatesCallback: getScheduleApiResponse,
// preSelectedDate: preSelectedDate,
providerNumber: this.selectedProvider?.providerNumber,
zipCode: this.zipCode,
includeMobileTimeSlots: this.isServiceableMobile,
includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
});
datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
this.$refs.datePicker.initializeComponent(datePickerInitialData);
this.selectableDatesInshop =
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
this.selectableDatesMobile =
datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
// TODO - CHECK FOR A PRESELECTED DATE!!! DON'T NEED TO DO THE BELOW IF THERE'S A PRESELECTED...?
if (!this.selectedDate) {
// if no date is preselected on load, then select the first available
const selectedDateMobile = this.getSelectedDateForMobile();
const selectedDateInshop = this.getSelectedDateForInshop();
// if there is still no selected date, then load more and try again
if ((this.isServiceableMobile && !selectedDateMobile) || (this.isServiceableInshop && !selectedDateInshop) || (this.isServiceableDropoff && !selectedDateInshop)) {
setTimeout(() => {
this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
// update all dates
this.selectableDatesInshop.days =
moreSelectableDates.inshopTimeSlotsData.days;
this.selectableDatesMobile.days =
moreSelectableDates.mobileTimeSlotsData.days;
this.setDisplayWaitList();
});
}, 50);
}
if (this.isMobileSelected) {
this.selectedDate = selectedDateMobile;
} else {
this.selectedDate = selectedDateInshop;
}
}
},
getScheduleApiResponse,
getServiceZipCtuCodeFromStore() {
return store.getters.order.serviceLocation.zipCodeCtu;
},
getSelectedDate() {
getSelectedDateFromStore() {
let isMobileSelected = this.isMobileSelected;
if (isMobileSelected === undefined) {
isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE;
@ -1539,9 +1539,34 @@ export default {
? AppointmentTypeStrings.DROP_OFF
: AppointmentTypeStrings.IN_SHOP;
},
updateSelectedProvider(oldProvider, newProvider) {
getSelectedDate() {
let dateToSelect;
if (this.isMobileSelected) {
dateToSelect = returnFirstDate(this.selectableDatesMobile);
} else {
dateToSelect = returnFirstDate(this.selectableDatesInshop);
}
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();
},
updateSelectedProvider(newProvider) {
if (newProvider) {
this.selectedProvider = newProvider;
this.initializeDatePicker();
} else if (
// use closest shopProvider if none exists
!this.selectedProvider?.address?.streetAddress &&
@ -1552,27 +1577,39 @@ export default {
},
handleZipCodeChange(newZipCode) {
this.resetMobileLocation();
this.selectedProvider = new Provider();
getShopProviderData(newZipCode.zipCode).then(async (result) => {
this.appointmentTypeFromAppointmentTypeQuestion = null;
getShopProviderData(newZipCode.zipCode).then((result) => {
this.shopProviderData = result.data;
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
this.updateSelectedProvider(
this.selectedProvider,
new Provider(this.shopProviderData.mobileProviderNumber)
);
} else {
this.isMobileAddressValid = true;
this.updateSelectedProvider();
}
this.resetSelectedProvider();
this.state = newZipCode.state;
this.zipCode = newZipCode.zipCode;
this.zipCodeCtu = newZipCode.zipCodeCtu;
this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase;
this.selectedDate = null;
this.initializeDatePicker();
});
this.state = newZipCode.state;
this.zipCode = newZipCode.zipCode;
this.zipCodeCtu = newZipCode.zipCodeCtu;
},
updateSelectedProviderAndZipCode(newZipCode, newProvider) {
this.resetMobileLocation();
getShopProviderData(newZipCode.zipCode).then((result) => {
this.shopProviderData = result.data;
this.state = newZipCode.state;
this.zipCode = newZipCode.zipCode;
this.zipCodeCtu = newZipCode.zipCodeCtu;
this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase;
this.selectedDate = null;
this.selectedProvider = newProvider;
this.initializeDatePicker();
});
},
handleAppointmentTypeChange(newAppointmentType) {
this.updateFooterButtonText();
if (newAppointmentType === AppointmentTypeStrings.MOBILE) {
this.appointmentType = AppointmentTypeStrings.MOBILE;
} else {
} else if (newAppointmentType) {
if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
// update appointmentType based on routeCode to determine if it should be dropoff or inshop
this.appointmentType = this.getInShopOrDropOffApptType(
@ -1584,7 +1621,10 @@ export default {
// make sure a selectedProvider exists
this.updateSelectedProvider();
} else {
this.appointmentType = null;
}
this.selectedDate = this.getSelectedDate();
},
},
watch: {