CSR-1137 | Working version before messing with pricing

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

@@ -45,6 +45,7 @@
                         type="radio"
                         name="day-of-month"
                         v-model="selectedDate"
+                        @click="fireDateClickedEvent"
                         :value="date.inputValue"
                         :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
                     <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
@@ -145,6 +146,9 @@ export default {
         },
     },
     methods: {
+        fireDateClickedEvent() {
+            this.$emit("date-clicked");
+        },
         getWeekStartDate(date) {
             // Get the day of the week for date
             let dayOfWeek = date.getDay();

src/layouts/schedule/schedule.vue

@@ -33,7 +33,8 @@
                 selectableDatesSetting="custom"
                 ref="datePicker"
                 v-model="selectedDate"
-                :customSelectableDatesCallback="getAvailableDatesMethod" />
+                :customSelectableDatesCallback="getAvailableDatesMethod"
+                @date-clicked="openInshopTimeSlotsModal" />
             <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
             <time-slot-modal-question
                 ref="timeSlotModalQuestion"
@@ -42,16 +43,13 @@
                 mobileCmsWidgetName="MobileTimeSlotModal"
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 v-model="selectedTimeSlotId"
+                @time-slot-modal-closed="timeSlotModalClosed"
                 :appointmentType="appointmentType"
                 :mobileEarlyBirdFee="mobileEarlyBirdFee"
                 :dateAndTimeSlotData="timeSlotsForSelectedDate"
                 :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
                 :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
                 validationRules="time-slot-selection-required" />
-            <button @click="setAppointmentType('Inshop')">Set to Inshop</button>
-            <button @click="setAppointmentType('Mobile')">Set to Mobile</button>
-            <button @click="setAppointmentType('Dropoff')">Set to Dropoff</button>
-            <button @click="openInshopTimeSlotsModal">Click for timeslots</button>
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -129,7 +127,6 @@ export default {
             selectableDatesData: [],
             weatherAlerts: [],
             mobileEarlyBirdFee: null,
-            TEMPORARYappointmentType: "Inshop",
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -227,8 +224,7 @@ export default {
             return this.weatherAlerts.length > 0;
         },
         appointmentType() {
-            return this.TEMPORARYappointmentType;
+            return this.$store.getters.order.serviceLocation.appointmentType;
-            //return this.$store.getters.order.serviceLocation.appointmentType;
         },
         timeSlotsForSelectedDate() {
             if (this.selectedDate === null) {
@@ -305,9 +301,6 @@ export default {
         getServiceZipCtuCodeFromStore() {
             return store.getters.order.serviceLocation.zipCodeCtu;
         },
-        setAppointmentType(appointmentType) {
-            this.TEMPORARYappointmentType = appointmentType;
-        },
         openInshopTimeSlotsModal() {
             this.$refs["timeSlotModalQuestion"].openModal();
         },
@@ -317,6 +310,12 @@ export default {
             ).timeSlots;
             return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
         },
+        timeSlotModalClosed() {
+            // Clear the selectedDate if no timeslot has been selected
+            if (!this.selectedTimeSlotId) {
+                this.selectedDate = null;
+            }
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -337,10 +336,11 @@ export default {
         },
     },
     watch: {
-        selectedDate(date) {
+        selectedDate(newValue, oldValue) {
-            /* EXAMPLE RETURNED date OBJECT:
+            // Clear time slot selection if date selected changes
-                { "year": 2023, "month": 5, "date": 25, "dateString": "2023-05-25" }
+            if (newValue!== oldValue) {
-            */
+                this.selectedTimeSlotId = null;
+            }
         },
     },
     components: {

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

@@ -166,7 +166,7 @@ export default {
             }
             let availableTimeSlots;
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                availableTimeSlots = [{ value: "Dropoff", buttonLabel: this.dropoffButtonText }];
+                availableTimeSlots = [{ value: this.dateAndTimeSlotData.timeSlots[0], buttonLabel: this.dropoffButtonText }];
             } else {
                 availableTimeSlots = this.dateAndTimeSlotData.timeSlots.map((timeslot) => {
                     let readableTime;
@@ -210,6 +210,7 @@ export default {
         // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
         onModalClosed() {
             this.selectedTimeSlot = this.modelValue;
+            this.$emit("time-slot-modal-closed");
         },
         // Expected input: "HH:MM:SS"
         getDisplayTextForMilitaryTime(militaryTimeInput) {