Move some logic out of time-slot into schedule
Get rid of lots of watchers in time-slot
This commit is contained in:
Scott Kiener
parent
6af4bca738
commit
fd3a8e1aee
2 changed files with 90 additions and 123 deletions
|
|
@ -146,7 +146,8 @@
|
|||
:isPricingByDayExperiment="isPricingByDayExperiment" />
|
||||
<timeSlotQuestion
|
||||
ref="timeSlotModalQuestion"
|
||||
@timeSlotSelected="updateTimeSlot"
|
||||
v-if="showTimeSlotQuestion"
|
||||
@time-slot-selection-changed="updateTimeSlot"
|
||||
cmsWidgetName="TimeSlotModalQuestion"
|
||||
waitListLabelWidget="WaitListLabelWidget"
|
||||
waitListQuestionWidget="WaitListQuestionWidget"
|
||||
|
|
@ -156,13 +157,12 @@
|
|||
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
||||
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
||||
dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
|
||||
:selectedDate="selectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="premiumAppointmentFee"
|
||||
:premiumAppointmentFee="mobilePremiumAppointmentFee"
|
||||
:displayWaitList="displayWaitList"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
|
||||
:estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
|
||||
:isSameDay="isSameDay"
|
||||
:selectedRouteCodeData="selectedRouteCodeData"
|
||||
@waitListRequested="handleWaitListRequested" />
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -649,6 +649,11 @@ export default {
|
|||
return this.isGlassServiceableMobile;
|
||||
}
|
||||
},
|
||||
showTimeSlotQuestion() {
|
||||
return (
|
||||
this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion
|
||||
)
|
||||
},
|
||||
isMobileStaticRecalibrationApplicable() {
|
||||
return (
|
||||
this.displayMSR &&
|
||||
|
|
@ -806,6 +811,18 @@ export default {
|
|||
}
|
||||
return [];
|
||||
},
|
||||
selectedRouteCodeData() {
|
||||
console.log('1', JSON.stringify(this.selectedTimeSlotInfo))
|
||||
if (!this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
|
||||
console.log('returning null')
|
||||
return null;
|
||||
}
|
||||
console.log('returning data');
|
||||
return {
|
||||
routeCode: this.selectedTimeSlotInfo.timeSlot.routeCode,
|
||||
isPremiumAppointment: this.selectedTimeSlotInfo.isPremiumAppointment
|
||||
}
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
|
||||
},
|
||||
|
|
@ -1194,7 +1211,6 @@ export default {
|
|||
datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
|
||||
datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
|
||||
await this.$refs.datePicker.initializeComponent(datePickerInitialData);
|
||||
await this.$refs.timeSlotModalQuestion.initializeComponent();
|
||||
this.selectableDatesInshop =
|
||||
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
|
||||
this.selectableDatesMobile =
|
||||
|
|
@ -1592,7 +1608,7 @@ export default {
|
|||
console.log("timeSlotObj", timeSlotObj);
|
||||
if (!timeSlotObj?.routeCode) {
|
||||
this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
|
||||
return {
|
||||
this.selectedTimeSlotInfo = {
|
||||
timeSlot: {
|
||||
date: null,
|
||||
routeCode: null,
|
||||
|
|
@ -1603,6 +1619,7 @@ export default {
|
|||
},
|
||||
isPremiumAppointment: null,
|
||||
};
|
||||
return;
|
||||
}
|
||||
const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
|
||||
(slot) => slot.id == timeSlotObj.routeCode
|
||||
|
|
@ -1788,6 +1805,7 @@ export default {
|
|||
}
|
||||
},
|
||||
selectedTimeSlotInfo(newValue) {
|
||||
console.log('heard a change on selectedTimeslotInfo', newValue);
|
||||
this.updateFooterButtonText(newValue);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<buttonQuestion
|
||||
v-if="isDropOffAppointmentAvailable"
|
||||
v-model="selectedAnswerForDropOffOrInshop"
|
||||
@update:modelValue="dropOffSelectionChanged"
|
||||
:questionText="dropOffOrPickATimeQuestionLabelText"
|
||||
:answers="answersForDropOffQuestion"
|
||||
isRequired
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
<buttonQuestion
|
||||
ref="buttonQuestion"
|
||||
v-if="shouldDisplayTimeSlotQuestion"
|
||||
@update:modelValue="timeSlotSelectionChanged"
|
||||
buttonTypeString="timeSlotModalListButton"
|
||||
:buttonTypeObject="timeSlotModalListButton"
|
||||
class="mt-4 timeslots"
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
v-if="supplementalInformationBlock"
|
||||
v-html="supplementalInformationBlock" />
|
||||
<div
|
||||
v-if="hasWaitListExperiment && displayWaitListFeature && selectedDate"
|
||||
v-if="hasWaitListExperiment && displayWaitListFeature"
|
||||
class="mt-5 bg-light rounded waitlist">
|
||||
<textBlock
|
||||
cmsWidgetName="WaitListLabelWidget"
|
||||
|
|
@ -55,7 +57,7 @@
|
|||
@click="waitListChecked" />
|
||||
</div>
|
||||
<div
|
||||
v-if="waitListRequested && displayWaitList && selectedDate"
|
||||
v-if="waitListRequested && displayWaitList"
|
||||
class="rounded waitlist-success"
|
||||
ref="waitlistSuccessMessage">
|
||||
<img :src="waitListSuccessImage" class="success-image" />
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue