CASH-464: working without modal and validation works too

src/digital-components/date-picker/date-picker.vue

@@ -4,6 +4,12 @@
         :class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
+            <div style="font-size: .8rem; background: aqua; padding: .2rem; text-align: left;" >
+                <div>componentId {{ componentId }}</div>
+                <div>meta {{ meta }}</div>
+                <div>errors {{ errors }}</div>
+                <div>errorMessage {{ errorMessage }}</div>
+            </div>
             <div
                 v-for="month in months"
                 :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
@@ -99,11 +105,46 @@
                 @click="showAnotherMonth">
                 View more dates
             </button>
+
+            <div class="new-times">
+                <div>selectedDate: {{ selectedDate }}</div>
+                <div>selectedTimeSlotInfo: {{ selectedTimeSlotInfo }}</div>
+                <!-- <div>timeSlotsForSelectedDate: {{ timeSlotsForSelectedDate }}</div> -->
+            </div>
+
+            <timeSlotQuestion 
+                ref="timeSlotModalQuestion"
+                v-model="selectedTimeSlotInfo"
+                                    cmsWidgetName="TimeSlotModalQuestion"
+                                    waitListLabelWidget="WaitListLabelWidget"
+                                    waitListQuestionWidget="WaitListQuestionWidget"
+                                    mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                                    mobileCmsWidgetName="MobileTimeSlotModal"
+                                    dropoffCmsWidgetName="DropOffTimeSlotModal"
+                                    sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                                    overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                                    :selectedDate="selectedDate"
+                                    :appointmentType="appointmentType"
+                                    :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                                    :displayWaitList="displayWaitList"
+                                    :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                                    :estimatedServiceMinutesMinimum="
+                                        selectableDatesData.estimatedServiceMinutesMinimum
+                                    "
+                                    :estimatedServiceMinutesMaximum="
+                                        selectableDatesData.estimatedServiceMinutesMaximum
+                                    "
+                                    @waitListRequested="handleWaitListRequested"
+                                    @time-slot-modal-closed="timeSlotModalClosed"
+                                    
+            />
         </fieldset>
     </div>
 </template>
 
 <script>
+import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
+
 // Supporting files
 import loader from "@/ux-components/loader/loader";
 import store from "@/store";
@@ -113,6 +154,11 @@ import {
     MONTHS_OF_YEAR,
     DAYS_OF_WEEK,
 } from "@/digital-components/date-picker/mixins/constants";
+import {
+    AppointmentTypeStrings,
+    PREMIUM_FEE_PART_TYPE,
+    PRICING_BY_DAY_PART_TYPE,
+} from "@/constants/schedule-constants";
 import {
     selectableDaysOptions,
     requiredParameter,
@@ -122,11 +168,25 @@ import {
     convertDateToDateString,
     convertDateStringToDate,
 } from "@/layouts/schedule/helpers/schedule-helper";
-import { useField, ErrorMessage } from "vee-validate";
+import { useField, ErrorMessage, defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
 
 import { deepClone } from "@/helpers/object-helper";
 import { v4 as uuidv4 } from "uuid";
 
+// DEFINE VALIDATION RULES
+defineRule("time-slot-selection-required", (value) => {
+    console.log("%c         DP -  VALIDATION of time-slot-selection-required, value is:  ", "background: lime; color: black;", value);
+    debugger; // eslint-disable-line no-debugger
+    if (value?.timeSlot?.routeCode == null) {
+        console.log("%c         DP -  VALIDATION of time-slot-selection-required, VALIDATION ERROR...  ", "background: lime; color: black;", "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED);
+        return "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED;
+    }
+    return true;
+});
+
+
+
 export default {
     name: "datePicker",
     data() {
@@ -136,6 +196,9 @@ export default {
             disableViewMoreDatesButton: false,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
             hideSomeDaysForInitialView: null,
+
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+
         };
     },
     props: {
@@ -169,6 +232,10 @@ export default {
         pricingByDayBasePrice: Number,
         pricingByDayUpcharge: Number,
         isPricingByDayExperiment: Boolean,
+
+        // selectedTimeSlotInfo: Object,
+        timeSlotsForSelectedDate: Object,
+        
     },
     setup(props) {
         const uuid = uuidv4();
@@ -184,6 +251,9 @@ export default {
             initialValue: initialValue,
         };
 
+        console.log("%c         DP - running setup()... modelValue:  ", "background: lime; color: black;", modelValue);
+        debugger; // eslint-disable-line no-debugger
+
         const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
             useField(componentId, props.validationRules, fieldOptions);
 
@@ -228,12 +298,36 @@ export default {
         },
         selectedDate: {
             get() {
+                console.log("%c         DP - G etting selectedDate; it is:  ", "background: lime; color: black;", this.modelValue);
+                debugger; // eslint-disable-line no-debugger
+
                 return this.modelValue;
             },
             set(newSelectedDate) {
+                console.log("%c         DP - S etting selectedDate; it is now:  ", "background: lime; color: black;", newSelectedDate);
+                debugger; // eslint-disable-line no-debugger
+
+
                 this.$emit("update:modelValue", newSelectedDate);
             },
         },
+        // selectedTimeSlotInfo: {
+        //     get() {
+        //         console.log("%c         DP - G etting selectedTimeSlotInfo; it is:  ", "background: lime; color: black;", this.modelValue);
+        //         debugger; // eslint-disable-line no-debugger
+
+        //         return this.modelValue;
+        //     },
+        //     set(newSelectedTimeSlotInfo) {
+        //         console.log("%c         DP - S etting selectedTimeSlotInfo; it is now:  ", "background: lime; color: black;", newSelectedTimeSlotInfo);
+        //         debugger; // eslint-disable-line no-debugger
+
+
+        //         this.$emit("update:modelValue", newSelectedTimeSlotInfo);
+        //     },
+        // },
+
+
     },
     methods: {
         initializeComponent(initialData) {
@@ -744,9 +838,50 @@ export default {
             };
             window.requestAnimationFrame(step);
         },
+
+
+
+
+
+
+
+        ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   
+        ////   ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   ////   NEW METHODS   
+
+
+
+        getSelectedTimeSlotInfo() {
+            const supportingItems = this.getSupportingItems();
+
+            var isPremiumAppointment = false;
+            if (supportingItems) {
+                isPremiumAppointment =
+                    !!supportingItems.filter(
+                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
+                    ).length > 0;
+            }
+
+            const selectedTimeSlotInfo = {
+                timeSlot: store.getters.order.schedule,
+                isPremiumAppointment: isPremiumAppointment,
+            };
+
+            console.log("%c         DP - computing getSelectedTimeSlotInfo()...  returning:   ", "background: lime; color: black;", selectedTimeSlotInfo);
+            debugger; // eslint-disable-line no-debugger
+
+            return selectedTimeSlotInfo;
+        },
+        getSupportingItems() {
+            return store.getters.lineItems.supportingItems;
+        },
+
+
     },
     watch: {
         modelValue(newValue, oldValue) {
+            console.log("%c         DP - WATCHED modelValue now:  ", "background: lime; color: black;", newValue);
+            console.log(" ");
+            debugger; // eslint-disable-line no-debugger
             this.resetField({
                 value: newValue,
             });
@@ -757,10 +892,31 @@ export default {
                 this.scrollToElement("date-of-month-error");
             }
         },
+
+
+        selectedDate(newValue) {
+            console.log("%c         DP - WATCHED selectedDate now:  ", "background: lime; color: black;", newValue);
+            console.log(" ");
+            debugger; // eslint-disable-line no-debugger
+        },
+        selectedTimeSlotInfo(newValue) {
+            console.log("%c         DP - WATCHED selectedTimeSlotInfo now:  ", "background: lime; color: black;", newValue);
+            console.log(" ");
+            debugger; // eslint-disable-line no-debugger
+
+            this.$emit(
+                "TimeSlotSelected",
+                newValue
+            );
+        },
+
+
+
     },
     components: {
         loader,
         ErrorMessage,
+        timeSlotQuestion,
     },
 };
 </script>
@@ -1115,7 +1271,7 @@ export default {
                 &:focus + label,
                 &:checked:focus + label {
                     box-shadow: none;
-                    background-color: $white;
+                    background-color: $blue-100;
                     color: $black;
                 }
                 &:checked + label {
@@ -1209,4 +1365,12 @@ export default {
     max-width: 414px;
     text-align: left;
 }
+
+.new-times {
+    min-height: 1rem;
+    padding: .2rem;
+    margin: 1rem 0;
+    background: lightgreen;
+    font-size: .6rem;
+}
 </style>

src/layouts/schedule/schedule.vue

@@ -1,6 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
+
+        <div style="font-size: .8rem; background: silver; padding: .2rem; text-align: left;" >
+                <div>componentId {{ componentId }}</div>
+                <div>meta {{ meta }}</div>
+                <div>errors {{ errors }}</div>
+                <div>errorMessage {{ errorMessage }}</div>
+            </div>
+
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
@@ -23,6 +31,7 @@
                         selectableDatesSetting="custom"
                         ref="datePicker"
                         v-model="selectedDate"
+                        v-model:new="selectedTimeSlotInfo"
                         class="text-link-small"
                         :customSelectableDatesCallback="getAvailableDatesMethod"
                         validationRules="date-required"
@@ -30,34 +39,41 @@
                         :pricingByDayUpcharge="pricingByDayUpcharge"
                         :showPricingByDay="showPricingByDay"
                         :isPricingByDayExperiment="isPricingByDayExperiment"
-                        @date-clicked="handleDateClicked" />
+
-                    <timeSlotModalQuestion
+                        :selectedTimeSlotInfo="selectedTimeSlotInfo"
-                        ref="timeSlotModalQuestion"
-                        customComponentId="timeSlotModalQuestion"
-                        v-model="selectedTimeSlotInfo"
-                        cmsWidgetName="TimeSlotModalQuestion"
-                        waitListLabelWidget="WaitListLabelWidget"
-                        waitListQuestionWidget="WaitListQuestionWidget"
-                        mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                        mobileCmsWidgetName="MobileTimeSlotModal"
-                        dropoffCmsWidgetName="DropOffTimeSlotModal"
-                        sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                        overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                        :selectedDate="selectedDate"
-                        :appointmentType="appointmentType"
-                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                        :displayWaitList="displayWaitList"
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                        :estimatedServiceMinutesMinimum="
+
-                            selectableDatesData.estimatedServiceMinutesMinimum
+                        @TimeSlotSelected="updateTimeSlot"
-                        "
+
-                        :estimatedServiceMinutesMaximum="
+                        @date-clicked="handleDateClicked" />
-                            selectableDatesData.estimatedServiceMinutesMaximum
+
-                        "
+                    <timeSlotModalQuestion
-                        @waitListRequested="handleWaitListRequested"
+                                    ref="timeSlotModalQuestion"
-                        @time-slot-modal-closed="timeSlotModalClosed"
+                                    customComponentId="timeSlotModalQuestion"
-                        validationRules="time-slot-selection-required"
+                                v-model="selectedTimeSlotInfo"
-                        @TimeSlotSelected="forwardButtonAction" />
+                                    cmsWidgetName="TimeSlotModalQuestion"
+                                    waitListLabelWidget="WaitListLabelWidget"
+                                    waitListQuestionWidget="WaitListQuestionWidget"
+                                    mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                                    mobileCmsWidgetName="MobileTimeSlotModal"
+                                    dropoffCmsWidgetName="DropOffTimeSlotModal"
+                                    sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                                    overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                                    :selectedDate="selectedDate"
+                                    :appointmentType="appointmentType"
+                                    :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                                    :displayWaitList="displayWaitList"
+                                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                                    :estimatedServiceMinutesMinimum="
+                                        selectableDatesData.estimatedServiceMinutesMinimum
+                                    "
+                                    :estimatedServiceMinutesMaximum="
+                                        selectableDatesData.estimatedServiceMinutesMaximum
+                                    "
+                                    @waitListRequested="handleWaitListRequested"
+                                    @time-slot-modal-closed="timeSlotModalClosed"
+                                    validationRules="time-slot-selection-required"
+                                    @TimeSlotSelected="forwardButtonAction" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -112,13 +128,24 @@ import { partNumberStrings } from "@/constants/part-number-strings";
 import { deepClone } from "@/helpers/object-helper";
 
 // DEFINE VALIDATION RULES
-defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+// defineRule("date-required", required(errorMessages.DATE_REQUIRED));
-defineRule("time-slot-selection-required", (value) => {
+defineRule("date-required", (value) => {
-    if (value?.timeSlot?.routeCode == null) {
+    console.log("SCHEDULE     VALIDATION of date-required, value is: ", value)
-        return errorMessages.DATE_REQUIRED;
+    debugger; // eslint-disable-line no-debugger
-    }
+
+    // if (!value || value == null || value?.length < 1) {
+    //     return errorMessages.DATE_REQUIRED;
+    // }
     return true;
 });
+// defineRule("time-slot-selection-required", (value) => {
+//     console.log("SCHEDULE                       VALIDATION of time-slot-selection-required, value is: ", value)
+//     debugger; // eslint-disable-line no-debugger
+//     if (value?.timeSlot?.routeCode == null) {
+//         return "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED;
+//     }
+//     return true;
+// });
 
 // Define constants
 const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
@@ -398,8 +425,15 @@ export default {
             return this.$store.getters.order.serviceLocation.appointmentType;
         },
         timeSlotsForSelectedDate() {
+            console.log("SCHEDULE,  computing timeSlotsForSelectedDate...  this.selectedDate: ", this.selectedDate)
             if (!this.selectedDate) return null;
 
+            let tempOutput = this.selectableDatesData.days?.find(
+                (selectableDate) => selectableDate.date === this.selectedDate
+            );
+            console.log("SCHEDULE,  computing timeSlotsForSelectedDate...  returning: ", tempOutput)
+            debugger; // eslint-disable-line no-debugger
+
             return this.selectableDatesData.days?.find(
                 (selectableDate) => selectableDate.date === this.selectedDate
             );
@@ -483,6 +517,9 @@ export default {
                 isPremiumAppointment: isPremiumAppointment,
             };
 
+            console.log("SCHEDULE,  computing getSelectedTimeSlotInfo()...  returning: ", selectedTimeSlotInfo)
+            debugger; // eslint-disable-line no-debugger
+
             return selectedTimeSlotInfo;
         },
         getSupportingItems() {
@@ -548,6 +585,9 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         forwardButtonAction() {
+            console.log(" ")
+            console.log("SCHEDULE,  forwardButtonAction... this.selectedTimeSlotInfo: ", this.selectedTimeSlotInfo)
+            debugger; // eslint-disable-line no-debugger
             this.updateSupportingItems();
 
             if (this.waitListRequested) {
@@ -703,11 +743,23 @@ export default {
                 this.includePricingByDayUpcharge = false;
             }
 
-            this.openInshopTimeSlotsModal();
+            // this.openInshopTimeSlotsModal();  // TURNON OR TURNOFF OLD MODAL OLDMODAL AJC
         },
+
+
+
+        updateTimeSlot(timeSlot) {
+            console.log(" << NEW >>    updateTimeSlot()...   timeSlot: ", timeSlot)
+            debugger; // eslint-disable-line no-debugger
+            this.selectedTimeSlotInfo = timeSlot;
+        }
     },
     watch: {
         selectedDate(newValue, oldValue) {
+            console.log("SCHEDULE     WATCHED selectedDate was updated to: ", newValue)
+            debugger; // eslint-disable-line no-debugger
+
+
             // Clear time slot selection if date selected changes
             if (newValue !== oldValue) {
                 this.selectedTimeSlotInfo = {
@@ -724,6 +776,10 @@ export default {
             }
         },
         selectedTimeSlotInfo(newValue) {
+
+            console.log("SCHEDULE     WATCHED selectedTimeSlotInfo was updated to: ", newValue)
+            debugger; // eslint-disable-line no-debugger
+
             this.updateFooterButtonText(newValue);
         },
     },
@@ -765,4 +821,25 @@ export default {
         margin-bottom: 0.25rem;
     }
 }
+
+
+
+
+.modal-open {
+    overflow: auto !important;
+    padding-right: auto !important;
+
+    .modal {
+        position: relative;
+        display: block;
+        height: auto;
+    }
+    .modal-backdrop {
+        display: none !important;
+    }
+}
+
+
+
+
 </style>