From dd502e41ba57aba95bc8e7d983f46b14f5f937bd Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 8 May 2023 15:47:37 -0400
Subject: [PATCH] CSR-1137 | Finished time slot selection for in shop

---
 src/layouts/schedule/schedule.vue             | 130 +++++-------------
 .../time-slot-selection-modal.vue             |  38 ++++-
 2 files changed, 63 insertions(+), 105 deletions(-)

diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 5a7211f43..7bdda50d6 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -25,11 +25,11 @@
             <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
             <time-slot-selection-modal
                 ref="timeSlotModal"
-                v-model="selectedTimeSlot"
-                :dateForTimeSlotPicker="dateForTimeSlotPicker"
-                :availableTimeSlots="availableTimeSlots"
-                estimatedServiceMinutesMinimum="90"
-                estimatedServiceMinutesMaximum="180" />
+                v-model="selectedTimeSlotId"
+                :dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal"
+                :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
+                :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
+                @timeSlotSaved="updateAppointmentDateAndTime" />
             <button @click="openInshopTimeslotsModal">Click for timeslots</button>
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
@@ -65,7 +65,6 @@ import {
 } from "@/helpers/cms-content-helper";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
-import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";
 
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 
@@ -74,91 +73,13 @@ export default {
     data() {
         return {
             selectedDate: null,
-            selectedTimeSlot: null,
-            dateForTimeSlotPicker: new Date("May 23 2023"),
-            availableTimeSlots: [
-                "8:00 AM",
-                "10:30 AM",
-                "11:00 AM",
-                "12:30 AM",
-                "1:00 PM",
-                "2:00 PM",
-                "4:30 PM",
-                "8:00 AM",
-                "10:30 AM",
-                "11:00 AM",
-                "12:30 AM",
-                "1:00 PM",
-                "2:00 PM",
-                "4:30 PM",
-                "8:00 AM",
-                "10:30 AM",
-                "11:00 AM",
-                "12:30 AM",
-                "1:00 PM",
-                "2:00 PM",
-                "4:30 PM",
-            ],
-            mockSelectableDatesData: [
-                { dateString: "2023-04-28" },
-
-                { dateString: "2023-05-04" },
-                { dateString: "2023-05-09" },
-                { dateString: "2023-05-11" },
-                { dateString: "2023-05-17" },
-                { dateString: "2023-05-18" },
-                { dateString: "2023-05-19" },
-                { dateString: "2023-05-23" },
-                { dateString: "2023-05-24" },
-                { dateString: "2023-05-25" },
-                { dateString: "2023-05-30" },
-                { dateString: "2023-05-31" },
-
-                { dateString: "2023-06-01" },
-                { dateString: "2023-06-02" },
-                { dateString: "2023-06-06" },
-                { dateString: "2023-06-07" },
-                { dateString: "2023-06-09" },
-                { dateString: "2023-06-12" },
-                { dateString: "2023-06-13" },
-                { dateString: "2023-06-15" },
-                { dateString: "2023-06-16" },
-                { dateString: "2023-06-17" },
-                { dateString: "2023-06-20" },
-                { dateString: "2023-06-21" },
-                { dateString: "2023-06-22" },
-                { dateString: "2023-06-23" },
-                { dateString: "2023-06-26" },
-                { dateString: "2023-06-27" },
-                { dateString: "2023-06-28" },
-                { dateString: "2023-06-29" },
-                { dateString: "2023-06-30" },
-
-                { dateString: "2023-07-01" },
-                { dateString: "2023-07-03" },
-                { dateString: "2023-07-04" },
-                { dateString: "2023-07-05" },
-                { dateString: "2023-07-06" },
-                { dateString: "2023-07-07" },
-                { dateString: "2023-07-10" },
-                { dateString: "2023-07-11" },
-                { dateString: "2023-07-12" },
-                { dateString: "2023-07-13" },
-                { dateString: "2023-07-14" },
-                { dateString: "2023-07-15" },
-                { dateString: "2023-07-17" },
-                { dateString: "2023-07-18" },
-                { dateString: "2023-07-19" },
-                { dateString: "2023-07-20" },
-                { dateString: "2023-07-21" },
-                { dateString: "2023-07-24" },
-                { dateString: "2023-07-25" },
-                { dateString: "2023-07-26" },
-                { dateString: "2023-07-27" },
-                { dateString: "2023-07-28" },
-                { dateString: "2023-07-29" },
-                { dateString: "2023-07-31" },
-            ],
+            selectedTimeSlotId: null,
+            appointmentDateAndTime: {
+                date: null,
+                startTime: null,
+                endTime: null,
+                id: null,
+            },
             selectableDatesData: [],
         };
     },
@@ -189,12 +110,12 @@ export default {
             // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
             return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
         },
-        DateSelectedReadableDate() {
-            const dayOfWeek = this.dateForTimeSlotPicker.getDay();
-            const month = this.dateForTimeSlotPicker.getMonth();
-            const dayOfMonth = this.dateForTimeSlotPicker.getDate();
-            return `${daysOfWeek[dayOfWeek]}, ${monthsOfYear[month]} ${dayOfMonth}`;
-        },
+        DateAndTimeSlotDataForTimeslotModal() {
+            if (this.selectedDate === null) {
+                return null;
+            }
+            return this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString);
+        }
     },
     methods: {
         doesCopyContainRouterLink,
@@ -219,10 +140,13 @@ export default {
             const newShopTimeSlots = newShopTimeSlotsResponse.data;
             // console.log("newShopTimeSlots ", newShopTimeSlots)
 
+            
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData = this.selectableDatesData.concat(
                 this.convertApiResponse(newShopTimeSlots.days)
             );
+            this.selectableDatesData.estimatedServiceMinutesMaximum = newShopTimeSlots.estimatedServiceMinutesMaximum;
+            this.selectableDatesData.estimatedServiceMinutesMinimum = newShopTimeSlots.estimatedServiceMinutesMinimum;
             console.log("this.selectableDatesData is now: ", this.selectableDatesData);
 
             // RETURN AGGREGATE DATE DATA
@@ -241,9 +165,19 @@ export default {
             return responseData;
         },
         openInshopTimeslotsModal() {
-            
             this.$refs["timeSlotModal"].openModal();
         },
+        updateAppointmentDateAndTime() {
+            let timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId);
+            this.appointmentDateAndTime.date = this.selectedDate.dateString;
+            this.appointmentDateAndTime.startTime = timeSlotSelectedObject.startTime;
+            this.appointmentDateAndTime.endTime = timeSlotSelectedObject.endTime;
+            this.appointmentDateAndTime.id = this.selectedTimeSlotId;
+        },
+        getTimeSlotObjectFromTimeSlotId(timeSlotId) {
+            let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
+            return timeSlots.find(timeSlot => timeSlot.id === timeSlotId);
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
diff --git a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue
index 9763b5359..17a1c19db 100644
--- a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue
+++ b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue
@@ -17,7 +17,7 @@
             class="mb-5" />
         <buttonQuestion
             class="radioQuestion"
-            :answers="availableTimeSlots"
+            :answers="availableTimeslots"
             groupName="ChooseTimeSlot"
             textPosition="text-center"
             v-model="currentlySelectedTimeSlot"
@@ -37,8 +37,7 @@ export default {
     name: "timeSlotSelectionModal",
     props: {
         modelValue: Object,
-        dateForTimeSlotPicker: Date,
-        availableTimeSlots: Array,
+        dateAndTimeSlotData: Object,
         estimatedServiceMinutesMinimum: Number,
         estimatedServiceMinutesMaximum: Number,
     },
@@ -54,9 +53,14 @@ export default {
     },
     computed: {
         dateSelectedReadableDate() {
-            const weekdayName = daysOfWeek[this.dateForTimeSlotPicker.getDay()];
-            const month = monthsOfYear[this.dateForTimeSlotPicker.getMonth()];
-            const numberDayOfMonth = this.dateForTimeSlotPicker.getDate();
+            if (this.dateAndTimeSlotData === null) {
+                return null;
+            }
+            // This conversion ensures we don't get get GMT induced date changes
+            let dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`);
+            const weekdayName = daysOfWeek[dateObject.getDay()];
+            const month = monthsOfYear[dateObject.getMonth()];
+            const numberDayOfMonth = dateObject.getDate();
             // Ex. Tuesday, April 23
             return `${weekdayName}, ${month} ${numberDayOfMonth}`;
         },
@@ -70,6 +74,25 @@ export default {
             }
             return durationSubHeaderText;
         },
+        availableTimeslots() {
+            if (this.dateAndTimeSlotData === null) {
+                return null;
+            }
+            return this.dateAndTimeSlotData.timeSlots.map(timeslot => {
+                let hours = timeslot.startTime.split(":")[0];
+                let minutes = timeslot.startTime.split(":")[1];
+                let meridianNotation = "AM";
+                if (timeslot.startTime.split(":")[0] > 12) {
+                    hours -= 12;
+                    meridianNotation = "PM";
+                }
+                let readableTime =  `${hours}:${minutes} ${meridianNotation}`;
+                return {
+                    value: timeslot.id,
+                    buttonLabel: readableTime,
+                };
+            });
+        },
     },
     methods: {
         openModal() {
@@ -78,7 +101,8 @@ export default {
         // fires any time the footer button is used, is fired before "onModalClosed"
         closeModal() {
             this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
-            this.$refs["timeSlots"].closeModal("test");
+            this.$refs["timeSlots"].closeModal();
+            this.$emit("timeSlotSaved");
         },
         // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
         onModalClosed() {