Merge branch 'develop' into feature/CSR-1144

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,57 @@ 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 = hours > 11 ? "PM" : "AM";
+            if (hours > 12) {
+                hours -= 12;
+            }
+            if (shouldTrimMinutesIfEmpty && minutes === "00") {
+                return `${hours} ${meridianNotation}`;
+            } else {
+                return `${hours}:${minutes} ${meridianNotation}`;
+            }
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -296,6 +347,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,
                     },
                 ];
@@ -256,10 +253,9 @@ export default {
         getDisplayTextForMilitaryTime(militaryTimeInput) {
             let hours = parseInt(militaryTimeInput.split(":")[0]);
             const minutes = militaryTimeInput.split(":")[1];
-            let meridianNotation = "AM";
+            let meridianNotation = hours > 11 ? "PM" : "AM";
-            if (militaryTimeInput.split(":")[0] > 12) {
+            if (hours > 12) {
                 hours -= 12;
-                meridianNotation = "PM";
             }
             return `${hours}:${minutes} ${meridianNotation}`;
         },
@@ -274,6 +270,19 @@ 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,
     },
 };