CSR-1149 | Implement continue button changes

Cleaned up timeslot-modal-list-button
Fixed bug with auto-selecting appointments when only one is available

src/layouts/schedule/schedule.vue

@@ -73,7 +73,7 @@ import {
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
 } from "@/helpers/cms-content-helper";
-import { PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
+import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 import store from "@/store";
@@ -267,6 +267,46 @@ export default {
                 this.selectedDate = null;
             }
         },
+        updateFooterButtonText(timeSlotData) {
+            let funnelFooterButtonText;
+            if (!timeSlotData.id) {
+                funnelFooterButtonText = "Continue";
+            } else {
+                funnelFooterButtonText = "Select " + this.convertSelectedDateToShortMonthAndDay(this.selectedDate);
+            
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    funnelFooterButtonText += " at " + this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime);
+                } else if (this.appointmentType === AppointmentTypeStrings.MOBILE && !timeSlotData.isPremiumAppointment) {
+                    funnelFooterButtonText +=
+                    " at " +
+                    this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime, true) + 
+                    " - " + 
+                    this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.endTime, true);
+                }
+            }
+
+            this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
+            return dateObject.toLocaleDateString("en-us", {month:"short", day:"numeric"});
+        },
+        // Expected input: "HH:MM:SS"
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            let hours = parseInt(militaryTimeInput.split(":")[0]);
+            const minutes = militaryTimeInput.split(":")[1];
+            let meridianNotation = "AM";
+            if (militaryTimeInput.split(":")[0] > 12) {
+                hours -= 12;
+                meridianNotation = "PM";
+            }
+            if (shouldTrimMinutesIfEmpty && minutes === "00") {
+                return `${hours} ${meridianNotation}`;
+            } else {
+                return `${hours}:${minutes} ${meridianNotation}`;
+            }
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -296,6 +336,9 @@ export default {
                 };
             }
         },
+        selectedTimeSlotData() {
+            this.updateFooterButtonText(this.selectedTimeSlotData);
+        }
     },
     components: {
         funnelHeader,

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

@@ -97,10 +97,7 @@ export default {
             this.handleChange(this.modelValue.id);
         },
         dateAndTimeSlotData(newValue, oldValue) {
-            const numberOfOptions = newValue?.timeSlots.length;
+            this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
-            if (numberOfOptions === 1) {
-                this.selectedTimeSlotId = newValue.timeSlots[0].id;
-            }
         },
     },
     computed: {
@@ -181,7 +178,7 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
                 availableTimeSlots = [
                     {
-                        value: this.dateAndTimeSlotData.timeSlots[0],
+                        value: this.dateAndTimeSlotData.timeSlots[0].id,
                         buttonLabel: this.dropoffButtonText,
                     },
                 ];
@@ -274,6 +271,12 @@ export default {
             }
             return displayTextForDurationLength;
         },
+        autoSelectTimeSlotIfOnlyOneIsAvailable(newdateAndTimeSlotDataValue) {
+            const numberOfOptions = newdateAndTimeSlotDataValue?.timeSlots.length;
+            if (numberOfOptions === 1 && !(this.appointmentType === AppointmentTypeStrings.MOBILE && this.premiumAppointmentFee && newdateAndTimeSlotDataValue.timeSlots[0].offerPremium)) {
+                this.selectedTimeSlotId = newdateAndTimeSlotDataValue.timeSlots[0].id;
+            }
+        },
         addPremiumFlagToInput(timeSlotId) {
             return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
         },

src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue

@@ -19,33 +19,17 @@
             <span v-if="screenReaderOnlyText" class="sr-only">
                 {{ screenReaderOnlyText }}
             </span>
-            <loader
-                v-if="isLoaderDisplayed && selectingInitiatesLoad"
-                :class="[this.loaderColor, this.loaderPosition]" />
         </div>
     </baseInputButton>
 </template>
 
 <script>
-import loader from "@/ux-components/loader/loader";
 import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
     name: "timeslotModalListButton",
     mixins: [inputButtonWrapperMixin],
-    props: {
-        loaderColor: String,
-        loaderPosition: {
-            type: String,
-            default: "right",
-        },
-    },
-    data() {
-        return {
-            isLoaderDisplayed: false,
-        };
-    },
     computed: {
         formattedButtonLabelSubCopy() {
             return this.buttonLabelSubCopy;
@@ -62,7 +46,6 @@ export default {
         },
     },
     components: {
-        loader,
         baseInputButton,
     },
 };