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

CASH-2096 fix by updating lazyload logic also make waitlist be a computed

Browse source
This commit is contained in:
Adam Caouette 2026-01-28 17:03:36 -05:00
parent 80a7cfe99e
commit 2858925811
2 changed files with 68 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -40,13 +40,6 @@
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required"
labelBold="true" />
<loader
v-if="
isServiceableMobile && isServiceableInshop && !hasSelectableDatesLoaded
"
class="appointment-type-loader"
loaderColor="blue"
loaderPosition="center" />
</div>
</div>
<div class="row">
@ -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,
},
};
</script>
@ -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 {

18
src/layouts/schedule/time-slot-question/time-slot-question.vue
View file

@ -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);