From 28589258114aa43d82b1f8e2441c7b2bb7caf1e9 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 28 Jan 2026 17:03:36 -0500 Subject: [PATCH] CASH-2096 fix by updating lazyload logic also make waitlist be a computed --- src/layouts/schedule/schedule.vue | 108 +++++++++--------- .../time-slot-question/time-slot-question.vue | 18 ++- 2 files changed, 68 insertions(+), 58 deletions(-) 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);