From db7ac46935ed739be8aac34eb6c28be1c6c8f993 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 5 Jun 2023 15:37:09 -0400
Subject: [PATCH] CSR-1137 | Handle auto-loading of existing store data

Date and time-slot are auto selected
Date-picker still needs work to handle dates that are beyond initial load set.
---
 src/layouts/schedule/schedule.vue              | 14 +++++++-------
 .../time-slot-modal-question.vue               | 18 +++++++++---------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 4a80e74d2..cbfa07d33 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -185,6 +185,7 @@ export default {
             vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
                 ? resultMap.premiumFeeWithPrice[0]
                 : null;
+            vm.updateFooterButtonText(vm.selectedTimeSlotData);
         });
     },
     computed: {
@@ -199,11 +200,11 @@ export default {
             return this.$store.getters.order.serviceLocation.appointmentType;
         },
         timeSlotsForSelectedDate() {
-            if (this.selectedDate === null) {
+            if (!this.selectedDate) {
                 return null;
             }
             return this.selectableDatesData.days?.find(
-                (selectableDate) => selectableDate.dateString === this.selectedDate.dateString
+                (selectableDate) => selectableDate.date === this.selectedDate
             );
         },
         appointmentDateAndTime() {
@@ -213,10 +214,9 @@ export default {
             const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
                 this.selectedTimeSlotData.id
             );
-
             if (timeSlotSelectedObject) {
                 return {
-                    date: this.selectedDate.dateString,
+                    date: this.selectedDate,
                     startTime: timeSlotSelectedObject.startTime,
                     endTime: timeSlotSelectedObject.endTime,
                     routeCode: this.selectedTimeSlotData.id,
@@ -258,7 +258,7 @@ export default {
         },
         getTimeSlotObjectFromTimeSlotId(timeSlotId) {
             const timeSlots = this.selectableDatesData.days.find(
-                (selectableDate) => selectableDate.dateString === this.selectedDate.dateString
+                (selectableDate) => selectableDate.date === this.selectedDate
             ).timeSlots;
             return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
         },
@@ -308,7 +308,7 @@ export default {
         },
         convertSelectedDateToShortMonthAndDay(selectedDate) {
             // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
+            const dateObject = new Date(`${selectedDate}T00:00:00`);
             // Ex: April 25
             return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
         },
@@ -348,7 +348,7 @@ export default {
                 };
             }
         },
-        selectedTimeSlotData() {
+        selectedTimeSlotData(newValue) {
             this.updateFooterButtonText(this.selectedTimeSlotData);
         },
     },
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
index 62d052941..10640dfd9 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
@@ -78,13 +78,14 @@ export default {
     },
     data() {
         return {
-            selectedTimeSlotId: null,
+            selectedTimeSlotId: this.modelValue.id,
             timeSlotModalListButton: timeSlotModalListButton,
         };
     },
     setup(props) {
         const { handleChange } = useField("time-slot-modal-question", props.validationRules);
-
+        // Run validation on component load
+        handleChange(props.modelValue.id);
         return {
             handleChange,
         };
@@ -92,6 +93,11 @@ export default {
     watch: {
         modelValue() {
             // Run component validation that is used at parent level
+            if (this.modelValue.isPremiumAppointment) {
+                this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
+            } else {
+                this.selectedTimeSlotId = this.modelValue.id;
+            }
             this.handleChange(this.modelValue.id);
         },
         availableTimeSlots(newValue) {
@@ -162,7 +168,7 @@ export default {
             }
 
             // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`);
+            const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
             // Ex: Tuesday, April 22
             return dateObject.toLocaleDateString("en-us", {
                 weekday: "long",
@@ -203,12 +209,6 @@ export default {
         },
         // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
         onModalClosed() {
-            // Reset component state to parent's state
-            if (this.modelValue.isPremiumAppointment) {
-                this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
-            } else {
-                this.selectedTimeSlotId = this.modelValue.id;
-            }
             this.$emit("time-slot-modal-closed");
         },
         // Expected input: "HH:MM"