Checkpoint before trying to simplify

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";
 

src/layouts/schedule/schedule.vue

@@ -24,17 +24,17 @@
             <timeSlotModalQuestion
                 ref="timeSlotModalQuestion"
                 customComponentId="timeSlotModalQuestion"
+                v-model="selectedTimeSlot"
                 cmsWidgetName="TimeSlotModalQuestion"
                 mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
                 mobileCmsWidgetName="MobileTimeSlotModal"
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"      
-                v-model="selectedTimeSlot"
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
                 :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                :dateAndTimeSlotData="timeSlotsForSelectedDate"
+                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                 :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
                 :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
                 @time-slot-modal-closed="timeSlotModalClosed"
@@ -293,18 +293,22 @@ export default {
         splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
             const serviceLocation = store.getters.order.serviceLocation;
+
             const serviceLocationPreReqs =
                 serviceLocation.zipCode &&
                 serviceLocation.zipCodeCtu &&
                 serviceLocation.appointmentType &&
                 (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
                     serviceLocation.provider.providerNumber);
+
             const paymentInfo = store.getters.payment.isInsurance !== null;
             const supportingItems = store.getters.lineItems.supportingItems !== null;
+
             const damageInfo =
                 store.getters.order.damage.isRepair ||
                 (store.getters.order.lineItems?.glassParts != null &&
                     store.getters.order.lineItems.glassParts.length > 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() {
+        getSelectedTimeSlot() {
-            return store.getters.order.schedule.routeCode;
+            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,
                 };
             }
         },

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" />
             <div
@@ -84,17 +84,7 @@ export default {
     name: "time-slot-modal-question",
     emits: ["update:modelValue"],
     props: {
-        modelValue: {
+        modelValue: Object,
-            type: Object,
-            default: () => ({
-                routeCode: null,
-                date: null,
-                startTime: null,
-                endTime: null,
-                jobMaxMinutes: null,
-                jobMinMinutes: null,
-            }),
-        },
         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: {
+        modal() {
-            get: function () {
+            return this.$refs[this.modalName];
-                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);
-            },
         },
         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 <input> 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
             };
         },
     },