CSR-1137 | Tech review changes

src/layouts/schedule/schedule.vue

@@ -23,14 +23,14 @@
                 v-model="selectedDate"
                 :customSelectableDatesCallback="getAvailableDates" />
             <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
-            <time-slot-selection-modal
+            <time-slot-modal-question
-                ref="timeSlotModal"
+                ref="timeSlotModalQuestion"
+                cmsWidgetName="TimeSlotModalQuestion"
                 v-model="selectedTimeSlotId"
-                :dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal"
+                :dateAndTimeSlotData="TimeSlotsForSelectedDate"
                 :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
-                :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
+                :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"/>
-                @timeSlotSaved="updateAppointmentDateAndTime" />
+            <button @click="openInshopTimeSlotsModal">Click for timeslots</button>
-            <button @click="openInshopTimeslotsModal">Click for timeslots</button>
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -49,7 +49,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
 import datePicker from "@/digital-components/date-picker/date-picker";
-import timeSlotSelectionModal from "./time-slot-selection-modal/time-slot-selection-modal";
+import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -74,12 +74,6 @@ export default {
         return {
             selectedDate: null,
             selectedTimeSlotId: null,
-            appointmentDateAndTime: {
-                date: null,
-                startTime: null,
-                endTime: null,
-                id: null,
-            },
             selectableDatesData: [],
         };
     },
@@ -110,12 +104,29 @@ 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);
         },
-        DateAndTimeSlotDataForTimeslotModal() {
+        TimeSlotsForSelectedDate() {
             if (this.selectedDate === null) {
                 return null;
             }
             return this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString);
-        }
+        },
+        appointmentDateAndTime() {
+            if (!this.selectedTimeSlotId) {
+                return null;
+            }
+            const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId);
+            if (timeSlotSelectedObject) {
+                return {
+                    date: this.selectedDate.dateString,
+                    startTime: timeSlotSelectedObject.startTime,
+                    endTime: timeSlotSelectedObject.endTime,
+                    id: this.selectedTimeSlotId,
+                };
+            } else {
+                return null;
+            }
+            
+        },
     },
     methods: {
         doesCopyContainRouterLink,
@@ -164,18 +175,11 @@ export default {
             });
             return responseData;
         },
-        openInshopTimeslotsModal() {
+        openInshopTimeSlotsModal() {
-            this.$refs["timeSlotModal"].openModal();
+            this.$refs["timeSlotModalQuestion"].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;
+            const timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
             return timeSlots.find(timeSlot => timeSlot.id === timeSlotId);
         },
         backButtonAction() {
@@ -199,7 +203,7 @@ export default {
         Form,
         loadingModal,
         datePicker,
-        timeSlotSelectionModal,
+        timeSlotModalQuestion,
     },
 };
 </script>

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

@@ -3,24 +3,23 @@
         ref="timeSlots"
         class="time-slots-modal"
         :headerText="dateSelectedReadableDate"
-        footerButtonText="Save time slot"
+        :footerButtonText="footerCloseButtonText"
         allowManualFooterDisableOverride
-        :isFooterDisabledManualOverride="currentlySelectedTimeSlot === null"
+        :isFooterDisabledManualOverride="selectedTimeSlot === null"
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         @footer-button-event="closeModal">
         <textBlock
-            cmsWidgetName="appointmentDuration"
+            :customText="appointmentDurationTextWithTime"
-            :customText="durationSubHeaderText"
             justifyText="center"
             typeStyle="small"
             class="mb-5" />
         <buttonQuestion
             class="radioQuestion"
-            :answers="availableTimeslots"
+            :answers="availableTimeSlots"
             groupName="ChooseTimeSlot"
             textPosition="text-center"
-            v-model="currentlySelectedTimeSlot"
+            v-model="selectedTimeSlot"
             isRequired />
     </modal>
 </template>
@@ -34,38 +33,45 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";
 
 export default {
-    name: "timeSlotSelectionModal",
+    name: "timeSlotModalQuestion",
     props: {
         modelValue: Object,
+        cmsWidgetName: String,
         dateAndTimeSlotData: Object,
         estimatedServiceMinutesMinimum: Number,
         estimatedServiceMinutesMaximum: Number,
     },
     data() {
         return {
-            currentlySelectedTimeSlot: null,
+            selectedTimeSlot: null,
         };
     },
     watch: {
         modelValue() {
-            this.currentlySelectedTimeSlot = this.modelValue;
+            this.selectedTimeSlot = this.modelValue;
         },
     },
     computed: {
+        appointmentDurationTextFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        footerCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
         dateSelectedReadableDate() {
             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 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}`;
         },
-        durationSubHeaderText() {
+        appointmentDurationTextWithTime() {
-            let durationSubHeaderText = "Duration: ";
+            let durationSubHeaderText = this.appointmentDurationTextFromCms + " ";
             if (this.estimatedServiceMinutesMaximum >= 120) {
                 durationSubHeaderText += `${this.estimatedServiceMinutesMinimum / 60} - ${
                 this.estimatedServiceMinutesMaximum / 60} hours`;
@@ -74,7 +80,7 @@ export default {
             }
             return durationSubHeaderText;
         },
-        availableTimeslots() {
+        availableTimeSlots() {
             if (this.dateAndTimeSlotData === null) {
                 return null;
             }
@@ -100,13 +106,12 @@ export default {
         },
         // fires any time the footer button is used, is fired before "onModalClosed"
         closeModal() {
-            this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
+            this.$emit("update:modelValue", this.selectedTimeSlot);
             this.$refs["timeSlots"].closeModal();
-            this.$emit("timeSlotSaved");
         },
         // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
         onModalClosed() {
-            this.currentlySelectedTimeSlot = this.modelValue;
+            this.selectedTimeSlot = this.modelValue;
         },
     },
     components: {