Time-slot refactor - move logic into parent

src/layouts/schedule/duration-text-block/duration-text-block.vue

@@ -1,6 +1,5 @@
 <template>
     <textBlock
-        v-show="durationTextBlockCopy"
         :customText="durationTextBlockCopy"
         justifyText="center"
         typeStyle="small"
@@ -15,7 +14,6 @@ import textBlock from "@/digital-components/text-block/text-block";
 // Constants
 import {
     AppointmentTypeStrings,
-    RouteCodeFlags,
     cmsWidgetFieldMappings
 } from "@/constants/schedule-constants";
 
@@ -92,15 +90,13 @@ export default {
             console.log("durationTextBlockCopy", this.appointmentType, this.estimatedServiceMinutesMaximum, this.estimatedServiceMinutesMinimum);
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.mobileDurationText;
-            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                return this.inshopDurationText;
             } else if (
-                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                 this.appointmentType === AppointmentTypeStrings.DROP_OFF
             ) {
                 return this.getDurationTextBlockCopyForDropoff();
+            } else {
+                return this.inshopDurationText;
             }
-            return null;
         },
     },
     methods: {

src/layouts/schedule/schedule.vue

@@ -1589,20 +1589,50 @@ export default {
             }
         },
         updateTimeSlot(timeSlotObj) {
-            this.selectedTimeSlotInfo = timeSlotObj;
+            console.log("timeSlotObj", timeSlotObj);
+            if (!timeSlotObj?.routeCode) {
+                this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
+                return {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null,
+                    },
+                    isPremiumAppointment: null,
+                };
+            }
+            const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
+                (slot) => slot.id == timeSlotObj.routeCode
+            );
+
+            this.selectedTimeSlotInfo = {
+                timeSlot: {
+                    date: this.timeSlotsForSelectedDate.date,
+                    routeCode: timeSlotObj.routeCode,
+                    startTime: timeSlot.startTime,
+                    endTime: timeSlot.endTime,
+                    jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
+                    jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(),
+                },
+                isPremiumAppointment: timeSlotObj.isPremiumAppointment ? true : false,
+            };
+
             if (
                 this.appointmentType !== AppointmentTypeStrings.MOBILE &&
                 this.appointmentType !== null
             ) {
                 // update apptType based on routeCode to determine if it should be dropoff or inshop
                 debugLog(`Updating appointment type based on route code.`);
-                debugLog(`Route code =`, timeSlotObj.timeSlot.routeCode);
+                debugLog(`Route code =`, timeSlotObj.routeCode);
                 debugLog(
                     `Parsed type = `,
-                    this.getInShopOrDropOffApptType(timeSlotObj.timeSlot.routeCode)
+                    this.getInShopOrDropOffApptType(timeSlotObj.routeCode)
                 );
                 this.appointmentType = this.getInShopOrDropOffApptType(
-                    timeSlotObj.timeSlot.routeCode
+                    timeSlotObj.routeCode
                 );
             }
         },

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -88,7 +88,6 @@ import {
     isDropOffRouteCode,
     militaryToTwelveHourTime,
 } from "@/layouts/schedule/helpers/schedule-helper";
-import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 
 // Validation
 import { defineRule, useField } from "vee-validate";
@@ -114,20 +113,6 @@ export default {
     name: "time-slot-question",
     emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
     props: {
-        modelValue: {
-            type: Object,
-            default: () => ({
-                timeSlot: {
-                    routeCode: null,
-                    date: null,
-                    startTime: null,
-                    endTime: null,
-                    jobMaxMinutes: null,
-                    jobMinMinutes: null,
-                },
-                isPremiumAppointment: null,
-            }),
-        },
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
         mobilePremiumCmsWidgetName: String,
@@ -138,8 +123,6 @@ export default {
         appointmentType: String,
         timeSlotsForSelectedDate: Object,
         premiumAppointmentFee: Object,
-        estimatedServiceMinutesMinimum: Number,
-        estimatedServiceMinutesMaximum: Number,
         validationRules: String,
         customComponentId: String,
         selectedDate: String,
@@ -404,10 +387,6 @@ export default {
         async setSelectedTimeSlot() {
             this.selectedRouteCode =
                 this.selectedAnswerForTimeSlots || this.selectedAnswerForDropOffOrInshop;
-            this.$emit(
-                "update:modelValue",
-                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
-            );
             this.$emit(
                 "TimeSlotSelected",
                 this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
@@ -513,39 +492,19 @@ export default {
             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);
             }
-            const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
-                (slot) => slot.id == routeCode
-            );
-
-            if (timeSlot) {
-                return {
-                    timeSlot: {
-                        date: this.timeSlotsForSelectedDate.date,
-                        routeCode: timeSlot.id,
-                        startTime: timeSlot.startTime,
-                        endTime: timeSlot.endTime,
-                        jobMaxMinutes: this.estimatedServiceMinutesMaximum?.toString() || null,
-                        jobMinMinutes: this.estimatedServiceMinutesMinimum?.toString() || null,
-                    },
-                    isPremiumAppointment: routeCodeIncludesPremium ? true : false,
-                };
-            }
 
             return {
-                timeSlot: {
+                routeCode: routeCode,
-                    date: null,
+                isPremiumAppointment: routeCodeIncludesPremium
-                    routeCode: null,
+            }
-                    startTime: null,
-                    endTime: null,
-                    jobMaxMinutes: null,
-                    jobMinMinutes: null,
-                },
-                isPremiumAppointment: null,
-            };
         },
         waitListChecked(event) {
             this.$emit("waitListRequested", event.target.checked);
@@ -582,12 +541,6 @@ export default {
                 });
             }
         },
-        modelValue: {
-            handler(newValue) {
-                this.handleChange(newValue);
-            },
-            deep: true,
-        },
         selectedDate: {
             handler() {
                 this.resetSelectedTimeSlot();