From c0b02c8c0016f6e2bc0ef1c6d76a8efa95f1b529 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 31 Aug 2023 07:39:17 -0400 Subject: [PATCH] Checkpoint before trying to simplify --- src/constants/schedule-constants.js | 2 +- src/layouts/schedule/schedule.vue | 32 +++++--- .../time-slot-modal-question.vue | 77 ++++++++++--------- 3 files changed, 63 insertions(+), 48 deletions(-) diff --git a/src/constants/schedule-constants.js b/src/constants/schedule-constants.js index 86c2a793c..5bb784efb 100644 --- a/src/constants/schedule-constants.js +++ b/src/constants/schedule-constants.js @@ -4,7 +4,7 @@ const AppointmentTypeStrings = { DROP_OFF: "Dropoff", }; -const PREMIUM_TIME_SLOT_ID_FLAG = "-premium"; +const PREMIUM_TIME_SLOT_ID_FLAG = "-PREMIUM"; const PREMIUM_FEE_PART_TYPE = "EARLY BIRD"; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 00b3e796b..86a200dc3 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -24,17 +24,17 @@ 0); + return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo; }, async getAvailableDatesMethod(startDate, endDate) { @@ -327,14 +331,19 @@ export default { openInshopTimeSlotsModal() { this.$refs["timeSlotModalQuestion"].openModal(); }, - getSelectedTimeSlot() { - return store.getters.order.schedule; - }, getSelectedDate() { return store.getters.order.schedule.date; }, - getSelectedRouteCode() { - return store.getters.order.schedule.routeCode; + getSelectedTimeSlot() { + const supportingItems = this.getSupportingItems(); + const isPremiumAppointment = !!supportingItems.filter( + (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE + ).length > 0; + + const selectedTimeSlot = store.getters.order.schedule; + selectedTimeSlot.isPremiumAppointment = isPremiumAppointment + + return selectedTimeSlot; }, getSupportingItems() { return store.getters.lineItems.supportingItems; @@ -376,8 +385,8 @@ export default { // Ex: April 25 return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); }, - // Expected input: "HH:MM" getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) { + // Expected input: "HH:MM" let hours = parseInt(militaryTimeInput.split(":")[0]); const minutes = militaryTimeInput.split(":")[1]; const meridianNotation = hours > 11 ? "PM" : "AM"; @@ -395,6 +404,10 @@ export default { }, forwardButtonAction() { this.updateSupportingItems(); + + // Remove the isPremiumAppointment flag to ensure it never gets into the store + delete this.selectedTimeSlot.isPremiumAppointment; + this.dispatchStoreAction(this.storeActions.SAVE_SCHEDULE, this.selectedTimeSlot, false); this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route); @@ -455,6 +468,7 @@ export default { endTime: null, jobMaxMinutes: null, jobMinMinutes: null, + isPremiumAppointment: null, }; } }, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index cce2c0503..79238f539 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -22,7 +22,7 @@ :answers="availableTimeSlots" groupName="chooseTimeSlot" textPosition="text-center" - v-model="selectedTimeSlotId" + v-model="selectedRouteCode" isRequired validationRules="time-slot-required" />
({ - routeCode: null, - date: null, - startTime: null, - endTime: null, - jobMaxMinutes: null, - jobMinMinutes: null, - }), - }, + modelValue: Object, cmsWidgetName: String, mobileCmsWidgetName: String, mobilePremiumCmsWidgetName: String, @@ -102,7 +92,7 @@ export default { sameDayDropOffCmsWidgetName: String, overnightDropOffCmsWidgetName: String, appointmentType: String, - dateAndTimeSlotData: Object, + timeSlotsForSelectedDate: Object, premiumAppointmentFee: Object, estimatedServiceMinutesMinimum: Number, estimatedServiceMinutesMaximum: Number, @@ -113,7 +103,7 @@ export default { data() { return { isModalOpened: false, - selectedValue: null, + selectedRouteCode: this.getSelectedRouteCode(), timeSlotModalListButton: timeSlotModalListButton, }; }, @@ -150,14 +140,8 @@ export default { modalName() { return "timeSlots"; }, - selectedTimeSlotId: { - get: function () { - return this.modelValue?.routeCode; - }, - set: function (newValue) { - // Button Question only supports Number, or String data types so we must convert to the full object before emitting - this.selectedValue = this.getSelectedTimeSlotObject(newValue); - }, + modal() { + return this.$refs[this.modalName]; }, supplementalInformationBlock() { let appointmentTypeCmsWidgetName; @@ -295,21 +279,21 @@ export default { } }, isSameDay() { - if (!this.dateAndTimeSlotData) { + if (!this.timeSlotsForSelectedDate) { return false; } - const selectedDate = this.dateAndTimeSlotData.date; + const selectedDate = this.timeSlotsForSelectedDate.date; const todaysDate = new Date().toISOString().split("T")[0]; return selectedDate === todaysDate; }, dateSelectedReadableDate() { - if (!this.dateAndTimeSlotData) { + if (!this.timeSlotsForSelectedDate) { return null; } // This conversion ensures we don't get get GMT induced date changes - const dateObject = convertDateStringToDate(this.dateAndTimeSlotData.date); + const dateObject = convertDateStringToDate(this.timeSlotsForSelectedDate.date); // Ex: Tuesday, April 22 return dateObject.toLocaleDateString("en-us", { weekday: "long", @@ -318,21 +302,18 @@ export default { }); }, availableTimeSlots() { - if (!this.dateAndTimeSlotData) { + if (!this.timeSlotsForSelectedDate) { return null; } if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { - return this.getAvailableTimeSlotsForDropOff(this.dateAndTimeSlotData.timeSlots); + return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots); } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) { - return this.getAvailableTimeSlotsForMobile(this.dateAndTimeSlotData.timeSlots); + return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots); } else { - return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots); + return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots); } }, - modal() { - return this.$refs[this.modalName]; - }, }, methods: { openModal() { @@ -348,7 +329,7 @@ export default { this.$emit("time-slot-modal-closed"); }, async setSelectedTimeSlot() { - this.$emit("update:modelValue", this.selectedValue); + this.$emit("update:modelValue", this.getSelectedTimeSlotObject(this.selectedRouteCode)); this.closeModal(); }, getRelevantDropOffCmsWidgetNameForSelectedTimeSlot( @@ -416,6 +397,7 @@ export default { getPremiumAppointmentTimeSlot(timeSlotData) { const formattedPrice = "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2); + return { // Unique value is required for each and the premium appoinment shares a timeSlot ID value: this.addPremiumFlagToInput(timeSlotData.id), @@ -426,31 +408,49 @@ export default { }, }; }, + getSelectedRouteCode() { + if (!this.modelValue?.routeCode) { + return null; + } + + if (this.modelValue?.isPremiumAppointment) { + return this.addPremiumFlagToInput(this.modelValue?.routeCode); + } else { + return this.modelValue?.routeCode; + } + }, autoSelectTimeSlotIfOnlyOneIsAvailable(newAvailableTimeSlotsValue) { const numberOfOptions = newAvailableTimeSlotsValue?.length; if (numberOfOptions === 1) { - this.selectedTimeSlotId = newAvailableTimeSlotsValue[0].value; + this.selectedRouteCode = newAvailableTimeSlotsValue[0].value; } }, addPremiumFlagToInput(timeSlotId) { return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG); }, removePremiumFlagFromInput(timeSlotId) { - return timeSlotId.substring(0, timeSlotId.length - PREMIUM_TIME_SLOT_ID_FLAG.length); + return timeSlotId.replace(PREMIUM_TIME_SLOT_ID_FLAG, ""); }, getSelectedTimeSlotObject(timeSlotId) { - const timeSlot = this.dateAndTimeSlotData?.timeSlots?.find( + console.log(timeSlotId) + const timeSlotIdIncludesPremium = timeSlotId?.includes(PREMIUM_TIME_SLOT_ID_FLAG); + if (timeSlotIdIncludesPremium) { + timeSlotId = this.removePremiumFlagFromInput(timeSlotId); + } + + const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find( (timeSlot) => timeSlot.id == timeSlotId ); if (timeSlot) { return { - date: this.dateAndTimeSlotData.date, + date: this.timeSlotsForSelectedDate.date, routeCode: timeSlot.id, startTime: timeSlot.startTime, endTime: timeSlot.endTime, jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(), jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(), + isPremiumAppointment: timeSlotIdIncludesPremium ? true : false }; } @@ -461,6 +461,7 @@ export default { routeCode: null, jobMaxMinutes: null, jobMinMinutes: null, + isPremiumAppointment: null }; }, },