diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 5473134f4..e8ce97d63 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -40,13 +40,6 @@
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required"
labelBold="true" />
-
@@ -224,7 +217,6 @@ import textBlock from "@/digital-components/text-block/text-block";
import mobileFeeWaiverAlert from "./mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue";
// Supporting files
-import loader from "@/ux-components/loader/loader";
import baseMixin from "@/mixins/base-mixin.js";
import experimentMixin from "@/mixins/experiment-mixin.js";
import { experimentUniverses, experimentSettings } from "@/constants/experiments";
@@ -454,15 +446,14 @@ export default {
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
mobilePremiumAppointmentFee: null,
waitListRequested: null,
- displayWaitList: null,
pricingByDayUpchargeLineItem: null,
includePricingByDayUpcharge: null,
isPricingByDayExperiment: null,
pricingByDayBasePrice: null,
pricingByDayUpcharge: null,
showPricingByDay: null,
- selectableDatesInshop: [],
- selectableDatesMobile: [],
+ selectableDatesInshop: {},
+ selectableDatesMobile: {},
preSelectedDate: null,
streetAddress: this.getServiceAddressFromStore(),
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
@@ -628,8 +619,9 @@ export default {
);
vm.initializeDatePicker().then(() => {
vm.showMobileFirstModal();
- vm.calendarLoadingStatus = "none";
vm.hideLoadingModal();
+ vm.calendarLoadingStatus = "none";
+ if (!vm.preSelectedDate) vm.setSelectedDateToFirstAvailable();
});
});
},
@@ -901,6 +893,53 @@ export default {
? this.$refs.mobileFirstModal?.getIsModalOpen()
: false;
},
+ displayWaitList() {
+ if (!this.appointmentType) return false;
+ const firstMobileDateString =
+ Array.isArray(this.selectableDatesMobile.days) &&
+ this.selectableDatesMobile.days.length > 0
+ ? this.selectableDatesMobile.days[0].date
+ : null;
+ const firstInshopDateString =
+ Array.isArray(this.selectableDatesInshop.days) &&
+ this.selectableDatesInshop.days.length > 0
+ ? this.selectableDatesInshop.days[0].date
+ : null;
+ const dateString =
+ this.isMobileSelected && firstMobileDateString
+ ? firstMobileDateString
+ : firstInshopDateString;
+
+ if (
+ experimentMixin.methods.hasSettingEqualTo(
+ experimentSettings.DISPLAY_WAITLIST,
+ "true"
+ ) &&
+ dateString
+ ) {
+ const [year, month, day] = dateString.split("-").map(Number);
+ const targetDate = new Date(year, month - 1, day);
+ const currentDate = getTodayDate();
+ const futureDate = new Date(currentDate);
+ const experimentThresholdDays = experimentMixin.methods.hasSetting(
+ experimentSettings.WAITLIST_THRESHOLD_DAYS
+ )
+ ? parseInt(
+ experimentMixin.methods.getSettingValue(
+ experimentSettings.WAITLIST_THRESHOLD_DAYS
+ )
+ )
+ : 0;
+ futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
+
+ if (targetDate >= futureDate) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+ return false;
+ },
},
methods: {
splitCopyOnCMSPlaceHolder,
@@ -1247,7 +1286,6 @@ export default {
await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
this.selectableDatesMobile =
await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
- this.setDisplayWaitList();
if (this.preSelectedDate) {
this.selectedDate = this.preSelectedDate;
@@ -1259,7 +1297,6 @@ export default {
) {
await this.$nextTick();
await this.$refs.datePicker.showAnotherMonth();
- this.setDisplayWaitList();
}
}
},
@@ -1531,39 +1568,6 @@ export default {
}
this.showLoadingModal();
},
- setDisplayWaitList() {
- const dateString = this.isMobileSelected
- ? this.selectableDatesMobile?.days[0]?.date
- : this.selectableDatesInshop?.days[0]?.date;
- if (
- experimentMixin.methods.hasSettingEqualTo(
- experimentSettings.DISPLAY_WAITLIST,
- "true"
- ) &&
- dateString
- ) {
- const [year, month, day] = dateString.split("-").map(Number);
- const targetDate = new Date(year, month - 1, day);
- const currentDate = getTodayDate();
- const futureDate = new Date(currentDate);
- const experimentThresholdDays = experimentMixin.methods.hasSetting(
- experimentSettings.WAITLIST_THRESHOLD_DAYS
- )
- ? parseInt(
- experimentMixin.methods.getSettingValue(
- experimentSettings.WAITLIST_THRESHOLD_DAYS
- )
- )
- : 0;
- futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
-
- if (targetDate >= futureDate) {
- this.displayWaitList = true;
- } else {
- this.displayWaitList = false;
- }
- }
- },
updateSupportingItems() {
const supportingItems = this.getSupportingItems();
@@ -1843,7 +1847,6 @@ export default {
this.appointmentType = null;
}
this.setSelectedDateToFirstAvailable();
- this.setDisplayWaitList();
},
setSelectedDateToFirstAvailable() {
this.selectedDate = this.getFirstAvailableDate();
@@ -2054,7 +2057,6 @@ export default {
durationTextBlock,
shopLocation,
mobileFeeWaiverAlert,
- loader,
},
};
@@ -2073,14 +2075,6 @@ export default {
&.hidden-background {
display: none;
}
- .appointment-type-loader {
- margin-top: 1.5rem;
- width: calc(100% - 2rem);
- &.loader:after {
- width: 2rem;
- height: 2rem;
- }
- }
}
.alert.alert-warning {
.alert-heading {
diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue
index 09ed43117..18a22e89a 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -400,9 +400,24 @@ export default {
);
},
isLazyLoad() {
- if (this.isMobileAppointment || this.selectedAnswerForTimeSlots) return false;
+ if (this.availableTimeSlots?.length < (this.lazyLoadAmountToLoad + 1)) return false;
+ if (this.isMobileAppointment) return false;
+ if (this.selectedAnswerForTimeSlots && !this.isSelectedInshopTimeSlotShowing) return false;
return true;
},
+ availableTimeSlotsForInshop() {
+ return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate?.timeSlots);
+ },
+ isSelectedInshopTimeSlotShowing() {
+ if (!this.selectedAnswerForTimeSlots) return false;
+ const idx = this.availableTimeSlotsForInshop?.findIndex(timeSlot => {
+ return timeSlot.value === this.selectedAnswerForTimeSlots;
+ });
+ if ((idx > -1) && (idx < this.lazyLoadAmountToLoad)) {
+ return true;
+ }
+ return false;
+ },
},
methods: {
updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
@@ -460,6 +475,7 @@ export default {
// }
// },
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
+ if (!timeSlotsForSelectedDate) return;
return timeSlotsForSelectedDate
.filter((timeSlot) => {
return !isDropOffRouteCode(timeSlot.id);