![]()
@@ -111,7 +113,7 @@ defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "time-slot-question",
- emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
+ emits: ["update:modelValue", "time-slot-selection-changed",],
props: {
cmsWidgetName: String,
mobileCmsWidgetName: String,
@@ -125,15 +127,15 @@ export default {
premiumAppointmentFee: Object,
validationRules: String,
customComponentId: String,
- selectedDate: String,
+ isSameDay: Boolean,
displayWaitList: Boolean,
+ selectedRouteCodeData: Object,
},
data() {
return {
- selectedRouteCode: null,
timeSlotModalListButton: timeSlotModalListButton,
selectedAnswerForDropOffOrInshop: null,
- selectedAnswerForTimeSlots: null,
+ selectedAnswerForTimeSlots: null
};
},
setup(props) {
@@ -165,12 +167,28 @@ export default {
errors,
};
},
+ watch: {
+ waitListRequested(newVal) {
+ if (newVal) {
+ this.$nextTick(() => {
+ this.scrollToSuccessMessage();
+ });
+ }
+ },
+ selectedRouteCodeData(newValue) {
+ this.updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(newValue);
+ },
+ timeSlotsForSelectedDate() {
+ this.selectedAnswerForDropOffOrInshop = null;
+ this.selectedAnswerForTimeSlots = null;
+ }
+ },
computed: {
+
supplementalInformationBlock() {
let appointmentTypeCmsWidgetName;
if (
- this.selectedDate == null ||
this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
this.appointmentType === AppointmentTypeStrings.DROP_OFF
@@ -192,11 +210,7 @@ export default {
// );
// }
} else {
- if (!this.selectedAnswerForTimeSlots && this.selectedRouteCode) {
- // Clearing selectedRouteCode if no time slot is selected
- this.resetSelectedTimeSlot();
- }
- appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
+ appointmentTypeCmsWidgetName = this.selectedRouteCodeData?.routeCode?.includes(
PREMIUM_TIME_SLOT_ID_FLAG
)
? this.mobilePremiumCmsWidgetName
@@ -273,13 +287,6 @@ export default {
// return null;
// }
// },
- isSameDay() {
- if (!this.timeSlotsForSelectedDate) {
- return false;
- }
- const todaysDate = new Date().toISOString().split("T")[0];
- return this.selectedDate === todaysDate;
- },
availableTimeSlots() {
if (!this.timeSlotsForSelectedDate) {
return null;
@@ -381,16 +388,45 @@ export default {
},
},
methods: {
- initializeComponent() {
- this.setSelectedRouteCodeFromParent();
+ updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
+ if (selectedRouteCodeData?.routeCode) {
+ if (isDropOffRouteCode(selectedRouteCodeData.routeCode)) {
+ this.selectedAnswerForDropOffOrInshop = selectedRouteCodeData.routeCode;
+ } else {
+ this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
+ this.selectedAnswerForTimeSlots = selectedRouteCodeData.routeCode;
+ }
+ } else {
+ this.selectedAnswerForDropOffOrInshop = null;
+ this.selectedAnswerForTimeSlots = null;
+ }
},
- async setSelectedTimeSlot() {
- this.selectedRouteCode =
- this.selectedAnswerForTimeSlots || this.selectedAnswerForDropOffOrInshop;
- this.$emit(
- "TimeSlotSelected",
- this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
- );
+ dropOffSelectionChanged(newValue) {
+ let newSelectedRouteCodeData = null;
+ if(newValue && newValue != PICK_A_TIME_BUTTON_VALUE) {
+ newSelectedRouteCodeData ={
+ routeCode: newValue,
+ isPremiumAppointment: false
+ };
+ }
+ this.selectedAnswerForTimeSlots = null;
+ this.$emit("time-slot-selection-changed", newSelectedRouteCodeData);
+ },
+ timeSlotSelectionChanged(newValue) {
+ console.log('heard time slot change', newValue);
+ if(newValue) {
+ let routeCode = newValue;
+ let isPremiumAppointment = routeCode.includes(
+ PREMIUM_TIME_SLOT_ID_FLAG
+ );
+ if (isPremiumAppointment) {
+ routeCode = this.removePremiumFlagFromInput(routeCode);
+ }
+ this.$emit("time-slot-selection-changed", {
+ routeCode: routeCode,
+ isPremiumAppointment: isPremiumAppointment
+ })
+ }
},
getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
selectedRouteCode,
@@ -437,8 +473,6 @@ export default {
);
}
- this.resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate);
-
return availableTimeSlots;
},
getPremiumAppointmentTimeSlot(timeSlotData) {
@@ -454,27 +488,10 @@ export default {
},
};
},
- setSelectedRouteCodeFromParent() {
- if (!this.modelValue?.timeSlot?.routeCode) {
- return;
- }
- const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
- if (this.modelValue?.isPremiumAppointment) {
- // Mobile Only
- this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
- } else {
- if (isDropOffRouteCode(routeCodeFromParent)) {
- this.selectedAnswerForDropOffOrInshop = routeCodeFromParent;
- } else {
- this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
- this.selectedAnswerForTimeSlots = routeCodeFromParent;
- }
- }
- },
getWaitListRequestedFromStore() {
return store.getters.order.customer?.waitListRequested;
},
- autoSelectTimeSlotIfOnlyOneIsAvailable() {
+ autoSelectTimeSlotIfOnlyOneIsAvailable() { // this needs to be fixed
const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
if (this.appointmentType && numberOfOptions === 1) {
if (this.availableTimeSlots.length > 0) {
@@ -491,21 +508,6 @@ export default {
removePremiumFlagFromInput(routeCode) {
return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
},
- getSelectedTimeSlotInfoObject(routeCode) {
- // Pick a time button is not a time slot
- if(routeCode === PICK_A_TIME_BUTTON_VALUE)
- return null;
-
- const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
- if (routeCodeIncludesPremium) {
- routeCode = this.removePremiumFlagFromInput(routeCode);
- }
-
- return {
- routeCode: routeCode,
- isPremiumAppointment: routeCodeIncludesPremium
- }
- },
waitListChecked(event) {
this.$emit("waitListRequested", event.target.checked);
},
@@ -515,59 +517,6 @@ export default {
successMessageElement.scrollIntoView({ behavior: "smooth" });
}
},
- resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate) {
- if (this.selectedRouteCode) {
- const selectedRouteCodeString = this.selectedRouteCode.replace(
- PREMIUM_TIME_SLOT_ID_FLAG,
- ""
- );
- const matchingTimeSlot = timeSlotsForSelectedDate.find((slot) => {
- return slot.id === selectedRouteCodeString;
- });
- if (!matchingTimeSlot) {
- this.resetSelectedTimeSlot();
- }
- }
- },
- resetSelectedTimeSlot() {
- this.selectedRouteCode = null;
- },
- },
- watch: {
- waitListRequested(newVal) {
- if (newVal) {
- this.$nextTick(() => {
- this.scrollToSuccessMessage();
- });
- }
- },
- selectedDate: {
- handler() {
- this.resetSelectedTimeSlot();
- this.selectedAnswerForDropOffOrInshop = null;
- this.selectedAnswerForTimeSlots = null;
- this.autoSelectTimeSlotIfOnlyOneIsAvailable();
- },
- },
- selectedRouteCode(newValue) {
- if (newValue) {
- this.setSelectedTimeSlot();
- }
- },
- selectedAnswerForDropOffOrInshop(newValue) {
- if (newValue == PICK_A_TIME_BUTTON_VALUE) {
- this.selectedRouteCode = null;
- this.setSelectedTimeSlot();
- } else {
- this.selectedAnswerForTimeSlots = null;
- this.selectedRouteCode = newValue;
- }
- },
- selectedAnswerForTimeSlots(newValue) {
- if (newValue) {
- this.selectedRouteCode = newValue;
- }
- },
},
components: {
textBlock,