From 6b9ed59cfcadfab39c8377b1a3292a97e5e9eb07 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 12 Jan 2026 14:35:24 -0500
Subject: [PATCH 01/10] initial check in for schedule page

---
 src/assets/img/icons/icon-ablue-next.png      |  Bin 0 -> 494 bytes
 src/assets/img/icons/icon-ablue-previous.png  |  Bin 0 -> 510 bytes
 src/constants/error-messages.js               |    3 +-
 .../date-picker/date-picker.vue               | 1124 ++++++++---------
 src/helpers/date-helper.js                    |   17 +
 .../schedule-page/schedule-page.spec.js       |   21 -
 src/layouts/schedule-page/schedule-page.vue   |  166 +--
 src/router/index.js                           |    2 +
 8 files changed, 572 insertions(+), 761 deletions(-)
 create mode 100644 src/assets/img/icons/icon-ablue-next.png
 create mode 100644 src/assets/img/icons/icon-ablue-previous.png

diff --git a/src/assets/img/icons/icon-ablue-next.png b/src/assets/img/icons/icon-ablue-next.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff8ec863ba182bb7d92944fc4b9f92953b2772c0
GIT binary patch
literal 494
zcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$00001b5ch_0Itp)
z=>Px$s7XXYR5%f1WIzMj4f}cC{(YP9|39Pue+C9^M#lfbK=xZk28OFZ_C{f5;RRP4
z9KRrI1Ii(QMD6;p|Ns9@`p@uR93hIzVq{=^$;il*_o6v)6-<T+#t^SrTlw$*-<9|b
z0I3DZgVcf4!}Nk(0&)RJ0wzc-&BVwY4ssDAC=A~Gd3Oih1)0{W3~uU@3<=AQGkpB<
z8>_h>uZge-sW5>95la|2s){pMDT*?zNwj6)=U~NZ2*_fPekM>XU{jI2`~<_fC+`^a
zqy+IB1k}$2ibiaPeE#`|A#A~6f(C)~Gl9|pHbX#SFoPbv`vP{+><DuVr6Bzv@4Us3
zK@#xMmS&I_<YxHy??1!Zi;t0HAWV>cCQwSmkbw$>8ptv9`5Q9;^)qCyImNK@{6h?-
zApIckY{ZZO3IyuPFiZ?I0ZZkrJI%1+@)K;z7(n`&KzRWa-{>lGY}FY+&Me$;mSGJR
zZ-CT;^g;9kIoMLH3_llxswgkR{yP}v!|j8oSeOVXF8~uy8;nng2D+l^WlL~7NFC6@
k2taNwMll3r9699)0D{EF4a9P?QUCw|07*qoM6N<$f(<;@TmS$7

literal 0
HcmV?d00001

diff --git a/src/assets/img/icons/icon-ablue-previous.png b/src/assets/img/icons/icon-ablue-previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebac34a235693e208cc43ec570971c5e43ae8c5d
GIT binary patch
literal 510
zcmV<a0RjGrP)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$00001b5ch_0Itp)
z=>Px$xJg7oR5%f>R8J^_VHp3t?<i#wqiH*ch*`Oc8tukXk{UUYtCS;Aia0742bbMM
z{$5=iq&QH@ME*n+!#B-FsoCp&#<%Tz8It$%KF{;}^F8msk3kvEk#)27s&xs$S_I%^
zOju;BF~Be5Rg1~u^N+YAsWOQrN73-ISBTh@fUqX3#)yFh7~_36qpkBg!u7y9v^WqG
zuXEoS5SMV`5ntEFJE0B;(2KvFIWx6WM~wF1J{mkp*FkPpCVZW>SUbAL^yaa_pO#jT
zkzdB+o0w(~$Y7z{g}RbLxXV9p6MdNUoKC@D|B>hh)wVqBUIo!JyY&?fq~~;uDykZI
zeH#eBL{(ZmCq1WoprSJ!HJ}d8gAsgZKswUXax~RsY3~xTm_Tt}HkzGw6*lCgH<|0(
z8)daL71_TD;ZzI5Q)NeEr41JkPdEsKQYnd8p3t@_r@@;m*X2o6KZ3*CM=6fL<FKR2
zVZ)g;rJ6c8!z8D-K<BN3lrP9-^{?ze64C3b_(UPyyIw*+-B@>-6~}jBT!o$uMu{7%
zSLrRt%QLR$Kh3g>!N6GC1o8gm6&p;*^)LUEH^3&-ctN(XC;$Ke07*qoM6N<$f@i<$
AqW}N^

literal 0
HcmV?d00001

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index e1d23731..cc4bd3b2 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -58,7 +58,8 @@ const errorMessages = Object.freeze({
     MODEL_REQUIRED: 'Vehicle model is required.',
     STYLE_REQUIRED: 'Vehicle style is required.',
     MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
-    DATE_REQUIRED: 'Please select a date'
+    DATE_REQUIRED: 'Please select a date',
+    TIME_REQUIRED: 'Please select an appointment time.'
 });
 
 export default errorMessages;
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 954451f6..76e87f44 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -2,108 +2,109 @@
     <div
         class="date-picker text-center"
         :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
-        <fieldset
-            id="date-picker-fieldset"
-            ref="datePickerFieldset">
+        <fieldset id="date-picker-fieldset">
             <legend class="sr-only">
-                Select a day and time
+                When would you like service?
             </legend>
+            <div class="appointment-date-picker-header">
+                When would you like service?
+            </div>
+            <div class="appointment-estimate-header">
+                Your service will take approximately <span>{{ appointmentEstimate }}</span>
+            </div>
             <div
-                v-for="month in months"
-                :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                class="calendar-grid-container"
-                :class="[
-                    hideSomeDaysForInitialView
-                        ? 'partial-month-initial-view'
-                        : '',
-                    month.monthClass
-                ]">
-                <div
-                    class="month-year body-small d-flex align-items-center small">
-                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
+                class="appointment-date-picker-container"
+                :class="isMobileView ? 'mobile' : 'desktop'">
+                <div class="header-cell header-start">
+                    <span
+                        v-if="activePageIndex !== 0"
+                        class="span-block-flex"
+                        @click="gotoPreviousPage()">
+                        <img
+                            class="arrow-icon"
+                            src="~@/assets/img/icons/icon-ablue-previous.png"
+                            alt="Left arrow icon" />
+                        Previous
+                    </span>
                 </div>
-                <div
-                    v-if="calendarViewDirection === 'future'"
-                    class="legend caption d-flex align-items-center justify-content-end">
-                    <span class="legend-circle me-1"></span> &equals; Available
+                <div class="header-cell header-middle">
+                    {{ headerDateString }}
                 </div>
-                <div class="separator-line"></div>
-                <div class="nav-back ps-3">
-                    <button></button>
+                <div class="header-cell header-end">
+                    <span
+                        class="span-block-flex"
+                        @click="gotoNextPage()">
+                        More
+                        <img
+                            class="arrow-icon"
+                            src="~@/assets/img/icons/icon-ablue-next.png"
+                            alt="Right arrow icon" />
+                    </span>
                 </div>
-                <div class="nav-forward pe-3">
-                    <button></button>
+                <div class="week-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div class="day-of-week-header">
+                            <span class="span-block day-of-week-caption">{{ showDayOfWeekForIndex(n - 1) }}</span>
+                            <span class="span-block month-day-caption">{{ showMonthAndDayForIndex(n - 1) }}</span>
+                        </div>
+                    </template>
                 </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Sunday</span>S
+                <div class="morning-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div
+                            class="morning-row-cell"
+                            :class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
+                            , checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
+                            @click="showMorningTimes(n - 1)">
+                            <span class="span-block top-caption">Morning</span>
+                            <span class="span-block bottom-caption">
+                                {{ showMorningAvailabilityForIndex(n - 1) }} available
+                            </span>
+                        </div>
+                    </template>
                 </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Monday</span>M
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Tuesday</span>T
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Wednesday</span>W
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Thursday</span>T
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Friday</span>F
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Saturday</span>S
-                </div>
-                <div
-                    v-for="date in month.dates"
-                    :id="date.inputValue"
-                    :key="date.inputValue"
-                    class="grid-item radio-wrapper"
-                    :class="[
-                        date.dateNum === 1
-                            ? 'first-day-' + month.startDateDayIndex
-                            : '',
-                        date.dayClasses,
-                        date.isSelectable ? 'selectable-day' : ''
-                    ]">
-                    <input
-                        :id="`${month.monthLabel}-${date.dateNum.toString()}`"
-                        v-model="selectedDate"
-                        :disabled="!date.isSelectable"
-                        type="radio"
-                        name="day-of-month"
-                        :value="date.inputValue"
-                        @click="fireDateSelectedEvent"
-                        @keypress.enter="fireDateSelectedEvent" />
-                    <label
-                        :aria-label="getDateLabel(date, month)"
-                        :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                        <span aria-hidden="true">{{ date.dateNum.toString() }}</span>
-                    </label>
+                <div class="afternoon-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div
+                            class="afternoon-row-cell"
+                            :class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
+                            , checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
+                            @click="showAfternoonTimes(n - 1)">
+                            <span class="span-block top-caption">Afternoon</span>
+                            <span class="span-block bottom-caption">
+                                {{ showAfternoonAvailabilityForIndex(n - 1) }} available
+                            </span>
+                        </div>
+                    </template>
                 </div>
             </div>
             <div
-                id="date-of-month-error"
-                class="row form-test-error">
-                <ErrorMessage
-                    :name="customComponentId"
-                    class="small mt-1">
-                </ErrorMessage>
+                v-if="selectedDate"
+                class="appointment-time-picker-container"
+                :class="isMobileView ? 'mobile' : 'desktop'">
+                <div class="appointment-time-picker-header">
+                    Available Times:
+                </div>
+                <div
+                    v-for="timeSlot in selectableTimeSlotsData"
+                    :key="timeSlot.startTime"
+                    class="time-slot-button"
+                    :class="checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''"
+                    @click="selectTimeSlotForDay(timeSlot)">
+                    {{ displayTimeSlotTime(timeSlot.startTime) }}
+                </div>
+            </div>
+            <div class="row form-test-error">
+                <div v-if="showTimeSlotError">
+                    {{ displayErrorMessage }}
+                </div>
             </div>
-            <button
-                v-if="
-                    calendarViewDirection === 'future' &&
-                    !disableViewMoreDatesButton
-                "
-                id="viewMoreDates"
-                type="button"
-                class="btn btn-link"
-                :disabled="isLoading"
-                @click="showAnotherMonth">
-                View more dates
-            </button>
         </fieldset>
     </div>
 </template>
@@ -111,24 +112,21 @@
 <script>
 // Supporting files
 import { useMainStore } from '@/store';
-import { useField, ErrorMessage } from 'vee-validate';
+import { useField } from 'vee-validate';
 import { deepClone } from '@/helpers/object-helper';
 import {
-    convertDateStringToDate,
-    convertDateToDateString
+    convertDateToDateString,
+    convertDateToShortMonth,
+    convertDateToTwoDigitDay,
+    convertDateToTwoDigitMonth,
+    militaryToTwelveHourTime
 } from '@/helpers/date-helper';
-import {
-    TIMINGFUNC_MAP,
-    BUFFER_OFFSET,
-    MONTHS_OF_YEAR
-} from './mixins/constants';
-import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
+import errorMessages from '@/constants/error-messages.js';
+import { selectableDaysOptions } from './mixins/helpers';
 
 export default {
     name: 'date-picker',
-    components: {
-        ErrorMessage
-    },
     props: {
         customComponentId: String,
         selectableDatesSetting: {
@@ -152,12 +150,16 @@ export default {
                 return [];
             }
         },
+        showTimeSlotError: {
+            type: Boolean,
+            default: false
+        },
         validationRules: {
             type: String,
             default: ''
         }
     },
-    emits: ['update:modelValue', 'date-clicked'],
+    emits: ['update:modelValue', 'dateSelected', 'timeSlotSelected'],
     setup(props) {
         const uuid = crypto.randomUUID();
         const componentId = !props.customComponentId
@@ -169,6 +171,10 @@ export default {
         const { modelValue } = deepClone(props);
         const initialValue = modelValue;
 
+        console.log('DatePicker setup called with modelValue: ');
+        console.log(modelValue);
+        console.log(props.validationRules);
+
         const fieldOptions = {
             value: modelValue,
             initialValue
@@ -199,209 +205,221 @@ export default {
     data() {
         return {
             isLoading: true,
-            months: null,
-            disableViewMoreDatesButton: false,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            hideSomeDaysForInitialView: null
+            selectableTimeSlotsData: [],
+            selectedTimeOfDayGrouping: null,
+            selectedDate: null,
+            selectedTimeSlot: null,
+            activeDate: new Date(),
+            activePageIndex: 0,
+            todaysDate: new Date(),
+            mql: null,
+            daysInViewMobile: 3,
+            daysInViewStandard: 5,
+            daysLoaded: 0,
+            initialDaysToLoad: 15,
+            isMobileView: false
         };
     },
     computed: {
+        appointmentEstimate() {
+            return '1.5 - 2 hours.';
+        },
+        daysToAdd() {
+            return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard;
+        },
+        displayErrorMessage() {
+            return errorMessages.TIME_REQUIRED;
+        },
+        headerDateString() {
+            const dayOffset = this.activePageIndex * this.daysToAdd;
+            const startDateToShow = new Date(this.activeDate);
+            startDateToShow.setDate(startDateToShow.getDate() + dayOffset);
+            const startMonthDisplay = convertDateToShortMonth(startDateToShow);
+            const endDateToShow = new Date(startDateToShow);
+            endDateToShow.setDate(endDateToShow.getDate() + (this.daysToAdd - 1));
+            const endMonthDisplay = convertDateToShortMonth(endDateToShow);
+
+            if (startMonthDisplay !== endMonthDisplay) {
+                return `${startMonthDisplay}. ${startDateToShow.getDate()} - ${endMonthDisplay}. ${endDateToShow.getDate()}`;
+            }
+            return `${startMonthDisplay}. ${startDateToShow.getDate()}-${endDateToShow.getDate()}`;
+        },
+        shortMonth() {
+            return this.todaysDate.toLocaleString('en-US', { month: 'short' });
+        },
         todayString() {
             return (
                 this.todayOverrideDateString
                 || convertDateToDateString(new Date())
             );
         },
-        todayDayIndex() {
-            return convertDateStringToDate(this.todayString).getDay();
-        },
-        todayDateNum() {
-            return convertDateStringToDate(this.todayString).getDate();
-        },
-        currentWeekStartDateNum() {
-            return this.todayDayIndex >= this.todayDateNum
-                ? 1
-                : this.todayDateNum - this.todayDayIndex;
-        },
-        currentWeekEndDateNum() {
-            return this.todayDateNum + (6 - this.todayDayIndex);
-        },
         calendarViewDirection() {
             if (this.selectableDatesSetting === 'custom') return 'future';
             return 'past';
-        },
-        selectedDate: {
-            get() {
-                return this.modelValue;
-            },
-            set(newSelectedDate) {
-                this.$emit('update:modelValue', newSelectedDate);
-            }
         }
     },
     watch: {
-        modelValue(newValue, oldValue) {
-            this.resetField({
-                value: newValue
-            });
-        },
-        errorMessage(newValue, oldValue) {
-            // Check for changing from no error message to some error message.
-            if (newValue && !oldValue) {
-                this.scrollToElement('date-of-month-error');
+        selectedTimeSlot(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                this.$emit('timeSlotSelected', newValue);
             }
+        },
+        selectedDate(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                this.$emit('dateSelected', newValue);
+            }
+        }
+    },
+    mounted() {
+        this.mql = window.matchMedia('(min-width: 1200px)');
+        this.isMobileView = !this.mql.matches;
+        this.mql.addEventListener('change', this.handleMqlChange);
+    },
+    unmounted() {
+        if (this.mql) {
+            this.mql.removeEventListener('change', () => {});
         }
     },
     methods: {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
         },
-        fireDateSelectedEvent(event) {
-            // Ignore if arrow key selected radioButton
-            if (event.screenX === 0 && event.screenY === 0) {
+        handleMqlChange(e) {
+            this.isMobileView = !e.matches;
+            this.activePageIndex = 0;
+            this.selectedDate = null;
+            this.selectedTimeOfDayGrouping = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
+        },
+        displayTimeSlotTime(militaryTime) {
+            return militaryToTwelveHourTime(militaryTime);
+        },
+        findFirstAvailableDateInView() {
+            for (let i = 0; i < this.daysToAdd; i += 1) {
+                const dateInView = this.getDateToShow(i);
+                const dateInViewString = convertDateToDateString(dateInView);
+                const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
+                if (selectableDateObj && selectableDateObj.timeSlots && selectableDateObj.timeSlots.length > 0) {
+                    if (selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                        this.showMorningTimes(i);
+                    } else {
+                        this.showAfternoonTimes(i);
+                    }
+                    break;
+                }
+            }
+        },
+        getDateToShow(index) {
+            const dayOffset = this.activePageIndex * this.daysToAdd;
+            const dateToShow = new Date(this.activeDate);
+            dateToShow.setDate(dateToShow.getDate() + index + dayOffset);
+            return dateToShow;
+        },
+        getDateToShowString(index) {
+            const dateToShow = this.getDateToShow(index);
+            return convertDateToDateString(dateToShow);
+        },
+        gotoNextPage() {
+            const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
+            if (this.activePageIndex >= maxPageIndex) {
+                // do not go to next page right away if at end of loaded days
+                this.loadMoreDays(maxPageIndex, this.daysToAdd, this.initialDaysToLoad).then(() => {
+                    this.daysLoaded += this.initialDaysToLoad;
+                    this.activePageIndex += 1;
+                    this.selectedDate = null;
+                    this.selectedTimeSlot = null;
+                    this.findFirstAvailableDateInView();
+                });
                 return;
             }
-            this.$emit('date-clicked');
+            this.activePageIndex += 1;
+            this.selectedDate = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
         },
-        getWeekStartDate(dateString) {
-            const date = convertDateStringToDate(dateString);
-            const dayOfWeek = date.getDay();
-            // Subtract the day of the week from date to get the date of Sunday
-            const sunday = new Date(date);
-            sunday.setDate(sunday.getDate() - dayOfWeek);
-            return convertDateToDateString(sunday);
+        gotoPreviousPage() {
+            this.activePageIndex -= 1;
+            this.selectedDate = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
         },
-        getWeekEndDate(dateString) {
-            const date = convertDateStringToDate(dateString);
-            const dayOfWeek = date.getDay();
-            const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
-            // Clone the given date and add the remaining days until Saturday
-            const saturday = new Date(date);
-            saturday.setDate(date.getDate() + daysUntilSaturday);
-            return convertDateToDateString(saturday);
+        checkIsSelectedDay(index, timeOfDayGrouping) {
+            const dateToShowString = this.getDateToShowString(index);
+            return this.selectedDate === dateToShowString && this.selectedTimeOfDayGrouping === timeOfDayGrouping;
         },
-        getNextWeekSunday(dateString) {
-            const date = convertDateStringToDate(dateString);
-            const dayOfWeek = date.getDay();
-            const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
-            // Clone the given date and add the remaining days until Sunday
-            const nextSunday = new Date(date);
-            nextSunday.setDate(date.getDate() + daysUntilNextSunday);
-            return convertDateToDateString(nextSunday);
-        },
-        getMonthEnd(dateStr) {
-            // convert string to date, do date calc, then return a string back
-            const date = new Date(
-                dateStr.split('-')[0],
-                parseInt(dateStr.split('-')[1], 10),
-                0
-            );
-            return convertDateToDateString(date);
-        },
-        getInitialViewWeeks(
-            todayString,
-            initialViewRowsToShow,
-            preSelectedDateString
-        ) {
-            // TODO: this only is for future direction; need to create logic for past direction
-            const weeks = [];
-            let weekStartDate = this.getWeekStartDate(todayString);
-            let weekEndDate = this.getWeekEndDate(todayString);
-
-            if (preSelectedDateString) {
-                const preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
-                let weekIncludesPreSelectedMonthEnd = false;
-                let i = 0;
-                while (!weekIncludesPreSelectedMonthEnd) {
-                    if (i > 0) {
-                        weekStartDate = this.getNextWeekSunday(weekEndDate);
-                        weekEndDate = this.getWeekEndDate(weekStartDate);
-
-                        if (
-                            (preSelectedDateMonthEnd > weekStartDate
-                                && preSelectedDateMonthEnd < weekEndDate)
-                            || preSelectedDateMonthEnd === weekStartDate
-                            || preSelectedDateMonthEnd === weekEndDate
-                        ) {
-                            weekEndDate = preSelectedDateMonthEnd;
-                            weekIncludesPreSelectedMonthEnd = true;
-                        }
-                    }
-                    weeks.push({
-                        weekNum: i + 1,
-                        weekStartDate,
-                        weekEndDate
-                    });
-                    i++;
-                }
-            } else {
-                for (let i = 0; i < initialViewRowsToShow; i++) {
-                    if (i > 0) {
-                        weekStartDate = this.getNextWeekSunday(weekEndDate);
-                        weekEndDate = this.getWeekEndDate(weekStartDate);
-                    }
-                    weeks.push({
-                        weekNum: i + 1,
-                        weekStartDate,
-                        weekEndDate
-                    });
-                }
-                // If any of these weeks is split between two months, then make them 2 separate "weeks"
-                // (a week split between two months is considered 2 weeks per business requirements)
-                const hasSplitWeek = (week) =>
-                    week.weekStartDate.split('-')[1]
-                    !== week.weekEndDate.split('-')[1];
-                const splitWeekIndex = weeks.findIndex(hasSplitWeek);
-
-                if (splitWeekIndex > -1) {
-                    const week1 = [];
-                    const week2 = [];
-                    let switchToWeek2 = false;
-
-                    for (let j = 0; j < 7; j++) {
-                        const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate);
-                        newDate.setDate(newDate.getDate() + j);
-                        if (newDate.getDate() === 1) switchToWeek2 = true;
-                        if (switchToWeek2) {
-                            week2.push(convertDateToDateString(newDate));
-                        } else {
-                            week1.push(convertDateToDateString(newDate));
-                        }
-                    }
-
-                    const week1EndDate = week1[week1.length - 1];
-                    const week2StartDate = week2[0];
-
-                    if (week1EndDate < todayString) {
-                        // replace week 1 with week 2
-                        weeks[splitWeekIndex].weekStartDate = week2StartDate;
-                    } else {
-                        const newWeek = {
-                            weekNum: weeks[splitWeekIndex].weekNum,
-                            weekStartDate: week2StartDate,
-                            weekEndDate: weeks[splitWeekIndex].weekEndDate
-                        };
-                        weeks[splitWeekIndex].weekEndDate = week1EndDate;
-                        weeks.splice(splitWeekIndex + 1, 0, newWeek);
-                        weeks.pop();
-                        weeks.forEach((item, index) => {
-                            if (index > splitWeekIndex) {
-                                item.weekNum += 1;
-                            }
-                        });
-                    }
-                }
+        checkIsSelectedTimeSlot(timeSlot) {
+            if (!this.selectedTimeSlot) {
+                return false;
+            }
+            return this.selectedTimeSlot.startTime === timeSlot.startTime;
+        },
+        selectTimeSlotForDay(timeSlot) {
+            if (timeSlot) {
+                this.selectedTimeSlot = timeSlot;
+            }
+        },
+        showDayOfWeekForIndex(index) {
+            const dateToShow = this.getDateToShow(index);
+            return dateToShow.toLocaleDateString('en-US', { weekday: 'short' });
+        },
+        showMonthAndDayForIndex(index) {
+            const dateToShow = this.getDateToShow(index);
+            return `${convertDateToTwoDigitMonth(dateToShow)}/${convertDateToTwoDigitDay(dateToShow)}`;
+        },
+        showMorningAvailabilityForIndex(index) {
+            const morningDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === morningDateString);
+            if (selectableDateObj && selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                return selectableDateObj.morningTimeSlots.length;
+            }
+            return 0;
+        },
+        showMorningTimes(index) {
+            const morningDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === morningDateString);
+            if (selectableDateObj && selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                if (this.selectedDate === morningDateString && this.selectedTimeOfDayGrouping === 'morning') {
+                    // already selected, do nothing
+                    return;
+                }
+                this.selectedDate = morningDateString;
+                this.selectedTimeOfDayGrouping = 'morning';
+                this.selectableTimeSlotsData = selectableDateObj.morningTimeSlots;
+                this.selectedTimeSlot = null;
+            }
+        },
+        showAfternoonAvailabilityForIndex(index) {
+            const afternoonDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === afternoonDateString);
+            if (selectableDateObj && selectableDateObj.afternoonTimeSlots && selectableDateObj.afternoonTimeSlots.length > 0) {
+                return selectableDateObj.afternoonTimeSlots.length;
+            }
+            return 0;
+        },
+        showAfternoonTimes(index) {
+            const afternoonDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === afternoonDateString);
+            if (selectableDateObj && selectableDateObj.afternoonTimeSlots && selectableDateObj.afternoonTimeSlots.length > 0) {
+                if (this.selectedDate === afternoonDateString
+                    && this.selectedTimeOfDayGrouping === 'afternoon') {
+                    // already selected, do nothing
+                    return;
+                }
+                this.selectedDate = afternoonDateString;
+                this.selectedTimeOfDayGrouping = 'afternoon';
+                this.selectableTimeSlotsData = selectableDateObj.afternoonTimeSlots;
+                this.selectedTimeSlot = null;
             }
-            return weeks;
         },
         async loadInitialData(config) {
             /*
              ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
              */
             let todayDateString;
-            let calendarViewDirection = 'none';
-            let hideSomeDaysForInitialView = false;
-            let hideSecondMonth = false;
+            const calendarViewDirection = 'future';
+            const initialDays = 15;
 
             if (this.todayString) {
                 todayDateString = this.todayString;
@@ -410,47 +428,13 @@ export default {
             } else {
                 todayDateString = convertDateToDateString(new Date());
             }
-            if (config.selectableDatesSetting === 'past') calendarViewDirection = 'past';
-            if (config.selectableDatesSetting === 'custom') calendarViewDirection = 'future';
 
-            const currentMonthEnd = this.getMonthEnd(todayDateString);
-            // TODO - set up currentMonthStart if direction is PAST:
-            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
-            const initialViewWeeks = this.getInitialViewWeeks(
-                todayDateString,
-                config.initialViewRowsToShow,
-                config.preSelectedDate
-            );
             const initialViewStartDate = todayDateString;
-            const initialViewEndDate =
-                initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+            const initialEndDate = new Date();
+            initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
+            const initialViewEndDate = convertDateToDateString(initialEndDate);
 
-            if (!config.preSelectedDate) {
-                const firstSaturdayMonth =
-                    initialViewWeeks[0].weekEndDate.split('-')[1];
-                const lastSundayMonth =
-                    initialViewWeeks[
-                        initialViewWeeks.length - 1
-                    ].weekStartDate.split('-')[1];
-
-                if (calendarViewDirection === 'future') {
-                    if (firstSaturdayMonth !== lastSundayMonth) {
-                        hideSomeDaysForInitialView = true;
-                    }
-                    if (
-                        initialViewStartDate.split('-')[1] === lastSundayMonth
-                    ) {
-                        hideSecondMonth = true;
-                        if (currentMonthEnd > initialViewEndDate) {
-                            // should part of 1st month be hidden?
-                            hideSomeDaysForInitialView = true;
-                        }
-                    }
-                }
-                // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE THE ABOVE ^ ^ ^
-            }
-
-            const loadInitialDataPromise = new Promise((resolve, reject) => {
+            const loadInitialDataPromise = new Promise((resolve) => {
                 const response = config.customSelectableDatesCallback(
                     initialViewStartDate,
                     initialViewEndDate,
@@ -467,317 +451,84 @@ export default {
                     initialViewEndDate,
                     calendarViewDirection,
                     initialShopTimeSlotsResponse: response,
-                    hideSomeDaysForInitialView,
-                    hideSecondMonth,
-                    preSelectedDate: config.preSelectedDate
+                    preSelectedDate: config.preSelectedDate,
+                    initialDaysLoaded: initialDays
                 };
+
                 return initialData;
             });
         },
         async setCalendarData(config = {}) {
-            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            const { hideSecondMonth } = config;
-            const direction = config.calendarViewDirection;
-            const monthsAfterToLoadOffset = 6;
-            const monthsBeforeToLoadOffset = 36;
+            console.log('DatePicker: setCalendarData called:');
+            console.log(config);
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
-                this.selectableDatesData.push(selectableDate);
+                const dateObjectToPush = {
+                    date: selectableDate.date,
+                    timeSlots: selectableDate.timeSlots,
+                    morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                        const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                        return timeHour < 12;
+                    }),
+                    afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                        const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                        return timeHour >= 12;
+                    }),
+                    isSelected: false
+                };
+                this.selectableDatesData.push(dateObjectToPush);
             });
 
-            // GENERATE MONTHS AND PUSH THEM INTO ARRAY
-            const months = [];
-            const options = {
-                calendarViewDirection: direction,
-                monthsBeforeToLoadOffset,
-                monthsAfterToLoadOffset,
-                initialViewStartDate: config.initialViewStartDate,
-                initialViewEndDate: config.initialViewEndDate,
-                hideSecondMonth,
-                preSelectedDate: config.preSelectedDate
-            };
-            if (direction === 'future') {
-                // first 0, then 1
-                for (let i = 0; i <= monthsAfterToLoadOffset; i++) {
-                    months.push(await this.getMonthData(i, options));
-                }
-            } else if (direction === 'past') {
-                // first 0, then -1
-                for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
-                    months.unshift(await this.getMonthData(i, options));
-                }
-            } else {
-                // TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
-                // for (let i = monthsAfterToLoadOffset; i >= monthsBeforeToLoadOffset; i--) {
-                //     months.push(this.getMonthDataPAST(i));
-                // }
-            }
-            this.months = months;
+            this.daysLoaded = config.initialDaysLoaded || this.initialDaysToLoad;
+
+            this.findFirstAvailableDateInView();
             this.isLoading = false;
-
-            if (config.preSelectedDate) {
-                this.$nextTick(() => {
-                    // Advance to month
-                    const monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-preselected'));
-                    if (
-                        monthToShow.monthClass.includes('month-preselected')
-                        && monthToShow.monthClass.includes('last-available-month')
-                    ) {
-                        // disable View More dates button if the preSelectedDate in the last available month
-                        this.disableViewMoreDatesButton = true;
-                    }
-                    this.scrollToElement(monthToShow.monthString);
-                });
-            }
         },
-        async getMonthData(offset = requiredParameter(), options) {
-            /*  options will contain:
-                    calendarViewDirection (string)
-                    initialViewStartDateNum (number)
-                    initialViewEndDateNum (number)
-                    monthsBeforeToLoadOffset (number),
-                    monthsAfterToLoadOffset (number),
-                    hideSecondMonth (boolean),
-                    preSelectedDate (string)
+        async loadMoreDays(maxPageIndex, daysInView, daysToFetch) {
+            showIssLoadingModal(true);
 
-                data used:
-                    todayDate (date object)
-                    this.hideSomeDaysForInitialView (string)
-            */
-
-            let monthNum =
-                convertDateStringToDate(this.todayString).getMonth()
-                + offset
-                + 1;
-            let yearNum = convertDateStringToDate(this.todayString).getFullYear();
-            const { calendarViewDirection } = options;
-            if (calendarViewDirection === 'future' && offset > 0) {
-                while (monthNum > 12) {
-                    monthNum -= 12;
-                    yearNum++;
-                }
-            } else if (calendarViewDirection === 'past' && offset < 0) {
-                while (monthNum < 1) {
-                    monthNum = 12 + monthNum;
-                    yearNum--;
-                }
-            }
-            const { initialViewEndDate } = options;
-            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
-            const { hideSecondMonth } = options;
-            const preSelectedDateObj = options.preSelectedDate
-                ? convertDateStringToDate(options.preSelectedDate)
-                : null;
-            const dates = [];
-            const monthEndDate = new Date(yearNum, monthNum, 0);
-            const monthStartDateNum =
-                offset === 0 && calendarViewDirection === 'future'
-                    ? this.currentWeekStartDateNum
-                    : 1;
-            const monthStartDate = new Date(
-                yearNum,
-                monthNum - 1,
-                monthStartDateNum
+            const startDateForFetch = new Date(this.activeDate);
+            startDateForFetch.setDate(startDateForFetch.getDate() + (maxPageIndex + 1) * daysInView);
+            const startDateToFetchString = convertDateToDateString(startDateForFetch);
+            const endDateForFetch = new Date(startDateForFetch);
+            endDateForFetch.setDate(endDateForFetch.getDate() + (daysToFetch - 1));
+            const endDateToFetchString = convertDateToDateString(endDateForFetch);
+            // make new API call with this month's start and end dates
+            await this.updateSelectableDates(
+                startDateToFetchString,
+                endDateToFetchString
             );
-            const startDateDayIndex = monthStartDate.getDay();
 
-            let monthClass = '';
-            let isMonthThatHidesSomeDaysForInitialView;
-            let monthEndDateNum = monthEndDate.getDate();
-
-            if (
-                offset === 0
-                && calendarViewDirection === 'past'
-                && monthEndDateNum > this.currentWeekEndDateNum
-            ) {
-                monthEndDateNum = this.currentWeekEndDateNum;
-            }
-
-            if (options.preSelectedDate) {
-                if (
-                    monthStartDate.getFullYear()
-                        === preSelectedDateObj.getFullYear()
-                    && monthStartDate.getMonth() === preSelectedDateObj.getMonth()
-                ) {
-                    monthClass += ' month-preselected';
-                } else if (monthStartDate > preSelectedDateObj) {
-                    monthClass += ' month-hidden';
-                }
-            } else if (Math.abs(offset) === 1 && hideSecondMonth) {
-                monthClass = `${monthClass} month-hidden`;
-            } else if (Math.abs(offset) > 1) {
-                monthClass = `${monthClass} month-hidden`;
-            }
-
-            if (
-                Math.abs(offset) === options.monthsAfterToLoadOffset
-                && calendarViewDirection === 'future'
-            ) {
-                monthClass += ' last-available-month';
-            }
-            if (
-                Math.abs(offset) === options.monthsBeforeToLoadOffset
-                && calendarViewDirection === 'past'
-            ) {
-                // TODO - re-check this logic if past direction
-                monthClass += ' last-available-month';
-            }
-
-            // populate dates array
-            for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
-                let dayClasses = '';
-                const dateString = `${yearNum.toString()}-${`0${monthNum}`.slice(-2)}-${`0${i}`.slice(-2)}`;
-
-                if (offset === 0 && i === this.todayDateNum) {
-                    dayClasses += ' current-day';
-                }
-                if (
-                    offset === 0
-                    && i < this.todayDateNum
-                    && calendarViewDirection === 'future'
-                ) {
-                    dayClasses += ' unavailable-day';
-                }
-                if (
-                    offset === 0
-                    && i > this.todayDateNum
-                    && calendarViewDirection === 'past'
-                ) {
-                    dayClasses += ' unavailable-day';
-                }
-                if (convertDateStringToDate(dateString).getDay() === 0) {
-                    dayClasses += ' sunday';
-                }
-                if (
-                    this.hideSomeDaysForInitialView
-                    && convertDateStringToDate(initialViewEndDate).getMonth()
-                        + 1
-                        === monthNum
-                    && convertDateStringToDate(initialViewEndDate).getDate() < i
-                ) {
-                    dayClasses += ' day-hidden';
-                    isMonthThatHidesSomeDaysForInitialView = true;
-                }
-                const dateObject = {
-                    dateNum: i,
-                    dayClasses,
-                    inputValue: dateString,
-                    isSelectable:
-                        this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
-                };
-                dates.push(dateObject);
-            }
-
-            const monthToAdd = {
-                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
-                monthIndex: monthNum,
-                monthString: `${
-                    MONTHS_OF_YEAR[monthNum - 1]
-                }-${yearNum?.toString()}`,
-                yearNum,
-                dates,
-                startDateDayIndex,
-                monthClass,
-                isMonthThatHidesSomeDaysForInitialView
-            };
-            return monthToAdd;
+            showIssLoadingModal(false);
         },
-        async showAnotherMonth() {
-            this.isLoading = true;
-            let monthToShow;
-            let monthStartDateNum = 0;
-
-            if (this.hideSomeDaysForInitialView) {
-                monthToShow = this.months.find(({ isMonthThatHidesSomeDaysForInitialView }) =>
-                    isMonthThatHidesSomeDaysForInitialView);
-                // find the first day-hidden to become the next api call start date
-                monthStartDateNum =
-                    monthToShow.dates.find(({ dayClasses }) =>
-                        dayClasses.includes('day-hidden')).dateNum - 1;
-            } else {
-                if (this.calendarViewDirection === 'future') {
-                    monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-hidden'));
-                }
-                if (this.calendarViewDirection === 'past') {
-                    // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
-                    monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-hidden'));
-                }
-            }
-            if (monthToShow) {
-                // make new API call with this month's start and end dates
-                await this.updateSelectableDates(
-                    monthToShow.dates[monthStartDateNum].inputValue,
-                    monthToShow.dates[monthToShow.dates.length - 1].inputValue
-                );
-                this.isLoading = false;
-                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
-                monthToShow.monthClass = monthToShow.monthClass.replace(
-                    ' month-hidden',
-                    ''
-                );
-                this.scrollToElement(monthToShow.monthString);
-
-                if (monthToShow.monthClass.includes('last-available-month')) this.disableViewMoreDatesButton = true;
-            }
-        },
-        async updateSelectableDates(monthStart, monthEnd) {
+        async updateSelectableDates(dateStart, dateEnd) {
             const moreSelectableDates =
                 await this.customSelectableDatesCallback(
-                    monthStart,
-                    monthEnd,
+                    dateStart,
+                    dateEnd,
                     this.mainStore.order.serviceLocation.appointmentType,
                     this.mainStore.order.serviceLocation.provider.providerNumber
                 );
 
             moreSelectableDates.days.forEach((selectableDate) => {
                 const index = this.selectableDatesData.findIndex((dateObj) => dateObj.date === selectableDate.date);
-                if (index === -1) this.selectableDatesData.push(selectableDate);
-                this.months.forEach((month) => {
-                    // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
-                    month.dates.forEach((date) => {
-                        if (date.inputValue === selectableDate.date) {
-                            date.isSelectable = true;
-                        }
-                    });
-                });
-            });
-        },
-        scrollToElement(elementId, duration = 800, easing = 'ease-in-out') {
-            const wrapper = document.querySelector('.fade-on-route-transition');
-            const target = document.getElementById(elementId);
-            const initY = wrapper.scrollTop;
-            const wrapperRect = wrapper.getBoundingClientRect();
-            const targetRect = target.getBoundingClientRect();
-            const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
-            const timingFunc = TIMINGFUNC_MAP[easing];
-            let start = null;
-            const step = (timestamp) => {
-                start = start || timestamp;
-                const time = Math.min(1, (timestamp - start) / duration);
-                const percentageNew = timingFunc(time);
-                const distanceToGo = targetY;
-                const thisDistance = percentageNew * distanceToGo;
-                wrapper.scrollTo(0, initY + thisDistance);
-                if (percentageNew < 1) {
-                    window.requestAnimationFrame(step);
+                if (index === -1) {
+                    const dateObjectToPush = {
+                        date: selectableDate.date,
+                        timeSlots: selectableDate.timeSlots,
+                        morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                            const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                            return timeHour < 12;
+                        }),
+                        afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                            const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                            return timeHour >= 12;
+                        }),
+                        isSelected: false
+                    };
+
+                    this.selectableDatesData.push(dateObjectToPush);
                 }
-            };
-            window.requestAnimationFrame(step);
-        },
-        getDateLabel(date, month) {
-            const dateStr = `${month.yearNum?.toString()}-${month.monthIndex?.toString()}-${date.dateNum.toString()}`;
-            const dateObj = convertDateStringToDate(dateStr);
-            const labelOptions = {
-                weekday: 'long',
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric'
-            };
-            let label = dateObj.toLocaleDateString('en-US', labelOptions);
-            date.isSelectable ? label += ', available' : label += ', unavailable';
-            return label;
+            });
         }
     }
 };
@@ -792,9 +543,176 @@ export default {
 }
 .date-picker {
     position: relative;
-    flex-grow: 0;
-    display: flex;
-    flex-direction: column;
+
+    .appointment-date-picker-header {
+        font-weight: 600;
+        color: #000;
+        font-size: 1rem;
+        text-align: left;
+        margin-top: 1.25rem;
+    }
+
+    .appointment-estimate-header {
+        font-weight: 400;
+        color: #525656;
+        font-size: 1rem;
+        text-align: left;
+        margin-top: 0.25rem;
+
+        span {
+            font-weight: 600;
+            color:#000;
+        }
+    }
+
+    .appointment-date-picker-container {
+        display: grid;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+
+        margin-top: 1.25rem;
+        border-radius: .3125rem;
+        box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.2);
+
+        @include media-breakpoint-up(xs) {
+            grid-template-columns: repeat(3, 33.33%);
+        }
+        @include media-breakpoint-up(xl) {
+            grid-template-columns: repeat(5, 20%);
+        }
+        .date-picker-row {
+            display: contents;
+        }
+        .header-cell {
+            font-size: 1rem;
+            padding: .3125rem;
+
+            .span-block-flex {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+        .header-end {
+            text-align: end;
+
+            .span-block-flex {
+                justify-content: flex-end;
+
+                img {
+                    margin-left: 0.25rem;
+                }
+            }
+        }
+        .header-middle {
+            font-weight: 600;
+            @include media-breakpoint-up(xs) {
+                grid-column: 2 / span 1;
+            }
+            @include media-breakpoint-up(xl) {
+                grid-column: 2 / span 3;
+            }
+
+            text-align: center;
+        }
+        .header-start {
+            text-align: start;
+
+            .span-block-flex {
+                justify-content: flex-start;
+
+                img {
+                    margin-right: 0.25rem;
+                }
+            }
+        }
+        .day-of-week-header {
+            background-color: #0070d1;
+            color: $white;
+            padding: 0.5rem 0.25rem;
+            line-height: 1.5rem;
+
+            .day-of-week-caption {
+                font-weight: 600;
+                font-size: 1rem;
+            }
+            .month-day-caption {
+                font-weight: 300;
+                font-size: 0.8125rem;
+            }
+        }
+        .morning-row-cell, .afternoon-row-cell {
+            padding: 0.8125rem 0.25rem;
+            line-height: 1.5rem;
+            border: solid 1px #cacbcc;
+
+            .top-caption {
+                font-weight: 400;
+                font-size: 1rem;
+                color: #000;
+            }
+            .bottom-caption {
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            &.has-appointments {
+                &:hover {
+                    border: solid 1px #0070d1;
+                    cursor: pointer;
+                }
+
+                .bottom-caption {
+                    color: #1574a1;
+                    font-weight: 500;
+                }
+            }
+
+            &.selected-date {
+                background-color: #e7f1f6;
+                border: solid 1px #0070d1;
+            }
+
+        }
+        .span-block {
+            display: block;
+        }
+    }
+
+    .appointment-time-picker-container {
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+
+        .appointment-time-picker-header {
+            font-weight: 600;
+            color: #000;
+            font-size: 1rem;
+            text-align: left;
+        }
+
+        .time-slot-button {
+            width: 100%;
+            border: 1px solid #b3b4b5;
+            border-radius: 1.375rem;
+            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
+            color: #525656;
+            padding: 0.5rem 0;
+            margin-top: 0.625rem;
+            text-align: center;
+            cursor: pointer;
+
+            &.selected-time-slot {
+                background-color: #e7f1f6;
+                border: solid 1px #0070d1;
+                color:#000;
+                font-weight: 500;
+            }
+        }
+    }
 
     fieldset {
         flex-grow: 1;
@@ -1115,8 +1033,10 @@ export default {
 }
 
 .form-test-error {
-    margin: 0 auto;
-    max-width: 414px;
     text-align: left;
+    margin-top: 0;
+    color: #db0020;
+    font-weight: 400;
+    font-size: 1rem;
 }
 </style>
diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js
index c1ef3093..bedf9ca2 100644
--- a/src/helpers/date-helper.js
+++ b/src/helpers/date-helper.js
@@ -17,6 +17,21 @@ export function convertDateToDateString(date) {
     );
 }
 
+export function convertDateToTwoDigitDay(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getDate()}`).slice(-2);
+}
+
+export function convertDateToTwoDigitMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getMonth() + 1}`).slice(-2);
+}
+
+export function convertDateToShortMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return date.toLocaleString('en-US', { month: 'short' });
+}
+
 export function convertDateStringToDate(dateString) {
     // dateString must be YYYY-MM-DD format
     if (typeof dateString !== 'string') return null;
@@ -163,9 +178,11 @@ export function combineDateAndTime(date, time) {
     // Return the new date object
     return newDate;
 }
+
 export function addMinutes(date, minutes) {
     return new Date(date.getTime() + minutes * 60000);
 }
+
 export function shortTimeString(date) {
     // Use a ternary operator to check if the input is a valid date object
     return date instanceof Date
diff --git a/src/layouts/schedule-page/schedule-page.spec.js b/src/layouts/schedule-page/schedule-page.spec.js
index ad18458e..280a0547 100644
--- a/src/layouts/schedule-page/schedule-page.spec.js
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@@ -290,27 +290,6 @@ describe('schedule-page.vue', () => {
             // Assert
             expect(testValue).toStrictEqual('01234');
         });
-        test('getDisplayTextForMilitaryTime should return the correctly formatted string', () => {
-            // Arrange
-            const { wrapper } = getShallowMountedComponent();
-            wrapper.vm.selectableDatesData = {
-                days: []
-            };
-            const timeInput1 = '15:00';
-            const timeInput2 = '15:30';
-
-            // Act
-            const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
-            const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
-            const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
-            const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
-
-            // Assert
-            expect(testOutput1).toBe('3:00 PM');
-            expect(testOutput2).toBe('3:30 PM');
-            expect(testOutput3).toBe('3 PM');
-            expect(testOutput4).toBe('3:30 PM');
-        });
     });
     test('forwardButtonAction should call route method navigateWithoutSaving', async () => {
         // Arrange
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 38a5b1b1..5505cdcf 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -1,7 +1,6 @@
 <template>
     <Form
         ref="theForm"
-        v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="fade-on-route-transition">
@@ -16,56 +15,27 @@
                         cmsWidgetName="ScheduleSubHeaderWidget"
                         secondaryTextClasses="text-center small sub-text"
                         class="mt-4" />
-                    <template v-if="ChangeShopLink.length">
-                        <textBlock
-                            cmsWidgetName="ChangeShopLink"
-                            justifyText="center"
-                            class="mb-5 text-link-small change-shop-link"
-                            :marginTopSizeOverride="1" />
-                    </template>
                     <div class="main-content-container">
                         <locationAlerts
                             ref="locationAlerts"
                             cmsWidgetPrefix="LocationAlert-" />
                         <datePicker
                             ref="datePicker"
-                            v-model="selectedDate"
+                            v-model="selectedTimeSlotInfo"
                             customComponentId="dateQuestion"
                             selectableDatesSetting="custom"
                             class="text-link-small"
+                            :showTimeSlotError="showDatePickerError"
                             :customSelectableDatesCallback="
                                 getAvailableDatesMethod
                             "
-                            validationRules="date-required"
-                            @dateClicked="openInshopTimeSlotsModal" />
-                        <timeSlotModalQuestion
-                            ref="timeSlotModalQuestion"
-                            v-model="selectedTimeSlotInfo"
-                            customComponentId="timeSlotModalQuestion"
-                            cmsWidgetName="TimeSlotModalQuestion"
-                            mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                            mobileCmsWidgetName="MobileTimeSlotModal"
-                            dropoffCmsWidgetName="DropOffTimeSlotModal"
-                            sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                            overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                            :selectedDate="selectedDate"
-                            :appointmentType="appointmentType"
-                            :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                            :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                            :estimatedServiceMinutesMinimum="
-                                selectableDatesData.estimatedServiceMinutesMinimum
-                            "
-                            :estimatedServiceMinutesMaximum="
-                                selectableDatesData.estimatedServiceMinutesMaximum
-                            "
-                            validationRules="time-slot-selection-required"
-                            @timeSlotModalClosed="timeSlotModalClosed"
-                            @timeSlotSelected="forwardButtonAction" />
+                            @dateSelected="dateSelectedFromPicker"
+                            @timeSlotSelected="timeSlotSelectedFromPicker" />
                         <siteFooter
                             ref="navbar"
                             class="mt-5"
                             cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardButtonNavigationDisabled="!isFormValid"
                             @backClicked="navigateBack"
                             @forwardClicked="forwardButtonAction" />
                     </div>
@@ -80,9 +50,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
 import datePicker from '@/digital-components/date-picker/date-picker.vue';
-import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Supporting files
 import {
@@ -97,25 +65,13 @@ import {
 } from '@/helpers/cms-content-helper';
 import {
     calcDaysBetweenDates,
-    convertDateStringToDate,
     sumDateString
 } from '@/helpers/date-helper';
 import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
+import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import errorMessages from '@/constants/error-messages';
-import { required } from '@/helpers/validation-rules';
 import { useMainStore } from '@/store';
 
-// DEFINE VALIDATION RULES
-defineRule('date-required', required(errorMessages.DATE_REQUIRED));
-defineRule('time-slot-selection-required', (value) => {
-    if (value?.timeSlot?.routeCode == null) {
-        return errorMessages.DATE_REQUIRED;
-    }
-    return true;
-});
-
 // Define constants
 const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
 
@@ -132,8 +88,6 @@ const getAvailableDates = async (
     const difference = calcDaysBetweenDates(startDateString, endDateString);
     const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
     const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
     let apiStartDate = startDateString;
     let apiEndDate = endDateString;
 
@@ -232,9 +186,7 @@ export default {
         siteSubHeader,
         locationAlerts,
         datePicker,
-        timeSlotModalQuestion,
         siteFooter,
-        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -300,7 +252,6 @@ export default {
                 resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
                 resultMap.premiumFeeWithPrice
             );
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
         });
     },
     setup() {
@@ -312,6 +263,7 @@ export default {
             selectedDate: this.getSelectedDate(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             selectableDatesData: [],
+            showDatePickerError: false,
             mobilePremiumAppointmentFee: null
         };
     },
@@ -325,38 +277,16 @@ export default {
         appointmentType() {
             return useMainStore().order.serviceLocation.appointmentType;
         },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) {
-                return null;
-            }
-
-            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+        isFormValid() {
+            console.log('isFormValid called');
+            console.log(this.selectedTimeSlotInfo);
+            const hasTimeSlotSelected = this.selectedTimeSlotInfo?.id != null;
+            return hasTimeSlotSelected;
         },
         supportingItems() {
             return useMainStore().lineItems.supportingItems;
         }
     },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null
-                    },
-                    isPremiumAppointment: null
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        }
-    },
     methods: {
         splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
@@ -400,8 +330,8 @@ export default {
         getServiceZipCtuCodeFromStore() {
             return this.mainStore.order.serviceLocation.zipCodeCtu;
         },
-        openInshopTimeSlotsModal() {
-            this.$refs.timeSlotModalQuestion.openModal();
+        dateTimeSelected() {
+            console.log('dateTimeSelected called');
         },
         getSelectedDate() {
             return this.mainStore.order.schedule.date;
@@ -420,62 +350,24 @@ export default {
 
             return selectedTimeSlotInfo;
         },
-        timeSlotModalClosed() {
-            // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-                this.selectedDate = null;
-            }
+        dateSelectedFromPicker(date) {
+            console.log('schedule-page: dateSelectedFromPicker called');
+            console.log(date);
+            this.selectedDate = date;
+            this.showDatePickerError = false;
         },
-        updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                navbarButtonText = 'Continue';
-            } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE
-                    && !timeSlotInfo.isPremiumAppointment
-                ) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.navbar.updateButtonText(navbarButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            return dateObject.toLocaleDateString('en-us', {
-                month: 'short',
-                day: 'numeric'
-            });
-        },
-        getDisplayTextForMilitaryTime(
-            militaryTimeInput,
-            shouldTrimMinutesIfEmpty = false
-        ) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(':')[0], 10);
-            const minutes = militaryTimeInput.split(':')[1];
-            const meridianNotation = hours > 11 ? 'PM' : 'AM';
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === '00') {
-                return `${hours} ${meridianNotation}`;
-            }
-            return `${hours}:${minutes} ${meridianNotation}`;
+        timeSlotSelectedFromPicker(timeSlot) {
+            console.log('schedule-page: timeSlotSelectedFromPicker called');
+            console.log(timeSlot);
+            this.selectedTimeSlotInfo = timeSlot;
+            this.showDatePickerError = false;
         },
         forwardButtonAction() {
+            console.log('forwardButtonAction called');
+            if (!this.isFormValid) {
+                this.showDatePickerError = true;
+                return;
+            }
             this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
 
             this.$router.navigate(
diff --git a/src/router/index.js b/src/router/index.js
index c0cb576b..e353b125 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -136,6 +136,7 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
     const fromQueryPage = from.query?.issPage;
     if (fromQueryPage === undefined) {
+        console.log('router.beforeEach: showing loading modal');
         showIssLoadingModal(true);
     }
 
@@ -288,6 +289,7 @@ function navigate(
     }
 
     if (forceSpinner) {
+        console.log('navigate: showing loading modal');
         showIssLoadingModal(true);
     }
 

From 50fa11a2b5b86401bd05d7cffb7fdba9f8583eee Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 12 Jan 2026 15:12:29 -0500
Subject: [PATCH 02/10] remove some console log

---
 src/digital-components/date-picker/date-picker.vue | 6 ------
 src/layouts/schedule-page/schedule-page.vue        | 9 +--------
 src/router/index.js                                | 2 --
 3 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 76e87f44..7de8a2ab 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -171,10 +171,6 @@ export default {
         const { modelValue } = deepClone(props);
         const initialValue = modelValue;
 
-        console.log('DatePicker setup called with modelValue: ');
-        console.log(modelValue);
-        console.log(props.validationRules);
-
         const fieldOptions = {
             value: modelValue,
             initialValue
@@ -459,8 +455,6 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
-            console.log('DatePicker: setCalendarData called:');
-            console.log(config);
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 const dateObjectToPush = {
                     date: selectableDate.date,
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 5505cdcf..8a5667b0 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -278,8 +278,6 @@ export default {
             return useMainStore().order.serviceLocation.appointmentType;
         },
         isFormValid() {
-            console.log('isFormValid called');
-            console.log(this.selectedTimeSlotInfo);
             const hasTimeSlotSelected = this.selectedTimeSlotInfo?.id != null;
             return hasTimeSlotSelected;
         },
@@ -351,25 +349,20 @@ export default {
             return selectedTimeSlotInfo;
         },
         dateSelectedFromPicker(date) {
-            console.log('schedule-page: dateSelectedFromPicker called');
-            console.log(date);
             this.selectedDate = date;
             this.showDatePickerError = false;
         },
         timeSlotSelectedFromPicker(timeSlot) {
-            console.log('schedule-page: timeSlotSelectedFromPicker called');
-            console.log(timeSlot);
             this.selectedTimeSlotInfo = timeSlot;
             this.showDatePickerError = false;
         },
         forwardButtonAction() {
-            console.log('forwardButtonAction called');
             if (!this.isFormValid) {
                 this.showDatePickerError = true;
                 return;
             }
-            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
 
+            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
             this.$router.navigate(
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route
diff --git a/src/router/index.js b/src/router/index.js
index e353b125..c0cb576b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -136,7 +136,6 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
     const fromQueryPage = from.query?.issPage;
     if (fromQueryPage === undefined) {
-        console.log('router.beforeEach: showing loading modal');
         showIssLoadingModal(true);
     }
 
@@ -289,7 +288,6 @@ function navigate(
     }
 
     if (forceSpinner) {
-        console.log('navigate: showing loading modal');
         showIssLoadingModal(true);
     }
 

From 7774e64cbce7e94907ce6c05bbda36d52a24c3f8 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 12 Jan 2026 16:47:47 -0500
Subject: [PATCH 03/10] couple updates for dates

---
 src/digital-components/date-picker/date-picker.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 7de8a2ab..e369f11f 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -95,7 +95,8 @@
                     v-for="timeSlot in selectableTimeSlotsData"
                     :key="timeSlot.startTime"
                     class="time-slot-button"
-                    :class="checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''"
+                    :class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''
+                    , {'has-date-error': showTimeSlotError}]"
                     @click="selectTimeSlotForDay(timeSlot)">
                     {{ displayTimeSlotTime(timeSlot.startTime) }}
                 </div>
@@ -119,6 +120,7 @@ import {
     convertDateToShortMonth,
     convertDateToTwoDigitDay,
     convertDateToTwoDigitMonth,
+    getDisplayTextForDurationLength,
     militaryToTwelveHourTime
 } from '@/helpers/date-helper';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
@@ -213,13 +215,15 @@ export default {
             daysInViewMobile: 3,
             daysInViewStandard: 5,
             daysLoaded: 0,
+            appointmentDurationMinutesMinimum: 90,
+            appointmentDurationMinutesMaximum: 120,
             initialDaysToLoad: 15,
             isMobileView: false
         };
     },
     computed: {
         appointmentEstimate() {
-            return '1.5 - 2 hours.';
+            return getDisplayTextForDurationLength(this.appointmentDurationMinutesMinimum, this.appointmentDurationMinutesMaximum);
         },
         daysToAdd() {
             return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard;
@@ -473,6 +477,8 @@ export default {
             });
 
             this.daysLoaded = config.initialDaysLoaded || this.initialDaysToLoad;
+            this.appointmentDurationMinutesMaximum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMaximum;
+            this.appointmentDurationMinutesMinimum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMinimum;
 
             this.findFirstAvailableDateInView();
             this.isLoading = false;
@@ -705,6 +711,10 @@ export default {
                 color:#000;
                 font-weight: 500;
             }
+
+            &.has-date-error {
+                border: 1px solid #d93025;
+            }
         }
     }
 

From 9fb3be5f44e6cdaa5a3503db9437884424dd55c2 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 13 Jan 2026 08:34:06 -0500
Subject: [PATCH 04/10] fix test

---
 src/layouts/schedule-page/schedule-page.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/layouts/schedule-page/schedule-page.spec.js b/src/layouts/schedule-page/schedule-page.spec.js
index 280a0547..49ef7264 100644
--- a/src/layouts/schedule-page/schedule-page.spec.js
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@@ -295,6 +295,9 @@ describe('schedule-page.vue', () => {
         // Arrange
         const { wrapper } = getShallowMountedComponent();
         wrapper.vm.$router.navigate = jest.fn(() => ({}));
+        wrapper.vm.selectedTimeSlotInfo = {
+            id: 'test-id'
+        };
 
         // Act
         await wrapper.vm.forwardButtonAction();

From b15ea179b942943a6640d27e3f8eb24382cb81b9 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 13:29:52 -0500
Subject: [PATCH 05/10] updates for schedule

---
 .../date-picker/date-picker.vue               | 214 ++++++++++++++++--
 src/helpers/date-helper.js                    |   6 +
 .../schedule-page/schedule-page.spec.js       |  11 +-
 src/layouts/schedule-page/schedule-page.vue   |  17 +-
 src/store/index.js                            |  26 +--
 src/styles/ux-variables.scss                  |   1 +
 6 files changed, 226 insertions(+), 49 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index e369f11f..7c9bacc2 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -16,7 +16,7 @@
                 class="appointment-date-picker-container"
                 :class="isMobileView ? 'mobile' : 'desktop'">
                 <div class="header-cell header-start">
-                    <span
+                    <button
                         v-if="activePageIndex !== 0"
                         class="span-block-flex"
                         @click="gotoPreviousPage()">
@@ -25,13 +25,13 @@
                             src="~@/assets/img/icons/icon-ablue-previous.png"
                             alt="Left arrow icon" />
                         Previous
-                    </span>
+                    </button>
                 </div>
                 <div class="header-cell header-middle">
                     {{ headerDateString }}
                 </div>
                 <div class="header-cell header-end">
-                    <span
+                    <button
                         class="span-block-flex"
                         @click="gotoNextPage()">
                         More
@@ -39,7 +39,7 @@
                             class="arrow-icon"
                             src="~@/assets/img/icons/icon-ablue-next.png"
                             alt="Right arrow icon" />
-                    </span>
+                    </button>
                 </div>
                 <div class="week-row-container date-picker-row">
                     <template
@@ -56,6 +56,7 @@
                         v-for="n in daysToAdd"
                         :key="n">
                         <div
+                            tabindex="0"
                             class="morning-row-cell"
                             :class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
@@ -72,6 +73,7 @@
                         v-for="n in daysToAdd"
                         :key="n">
                         <div
+                            tabindex="0"
                             class="afternoon-row-cell"
                             :class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
@@ -89,17 +91,28 @@
                 class="appointment-time-picker-container"
                 :class="isMobileView ? 'mobile' : 'desktop'">
                 <div class="appointment-time-picker-header">
-                    Available Times:
+                    Available times:
                 </div>
-                <div
+                <template
                     v-for="timeSlot in selectableTimeSlotsData"
-                    :key="timeSlot.startTime"
-                    class="time-slot-button"
-                    :class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''
-                    , {'has-date-error': showTimeSlotError}]"
-                    @click="selectTimeSlotForDay(timeSlot)">
-                    {{ displayTimeSlotTime(timeSlot.startTime) }}
-                </div>
+                    :key="timeSlot.startTime">
+                    <label
+                        :for="`timeslot${timeSlot.startTime}`"
+                        class="time-slot-button"
+                        :class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''
+                        , {'has-date-error': showTimeSlotError}]"
+                        @click="selectTimeSlotForDay(timeSlot)">
+                        {{ displayTimeSlotTime(timeSlot.startTime) }}
+                    </label>
+                    <input
+                        :id="`timeslot${timeSlot.startTime}`"
+                        v-model="selectedTime"
+                        type="radio"
+                        name="time-slot"
+                        class="sr-only"
+                        :value="timeSlot.startTime"
+                        @change="timeSlotInputChanged(timeSlot)" />
+                </template>
             </div>
             <div class="row form-test-error">
                 <div v-if="showTimeSlotError">
@@ -121,8 +134,12 @@ import {
     convertDateToTwoDigitDay,
     convertDateToTwoDigitMonth,
     getDisplayTextForDurationLength,
+    isAfternoon,
     militaryToTwelveHourTime
 } from '@/helpers/date-helper';
+import {
+    PREMIUM_TIME_SLOT_ID_FLAG
+} from '@/constants/schedule-constants';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import errorMessages from '@/constants/error-messages.js';
 import { selectableDaysOptions } from './mixins/helpers';
@@ -207,6 +224,7 @@ export default {
             selectableTimeSlotsData: [],
             selectedTimeOfDayGrouping: null,
             selectedDate: null,
+            selectedTime: null,
             selectedTimeSlot: null,
             activeDate: new Date(),
             activePageIndex: 0,
@@ -262,7 +280,8 @@ export default {
     watch: {
         selectedTimeSlot(newValue, oldValue) {
             if (newValue !== oldValue) {
-                this.$emit('timeSlotSelected', newValue);
+                const testObj = this.getSelectedTimeSlotInfoObject(newValue);
+                this.$emit('timeSlotSelected', testObj);
             }
         },
         selectedDate(newValue, oldValue) {
@@ -285,11 +304,54 @@ export default {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
         },
+        addPremiumFlagToInput(routeCode) {
+            return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`);
+        },
+        removePremiumFlagFromInput(routeCode) {
+            return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, '');
+        },
+        getSelectedTimeSlotInfoObject(timeSlot) {
+            const routeCode = timeSlot?.id;
+            let routeCodeToUse = routeCode;
+            const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
+            if (routeCodeIncludesPremium) {
+                routeCodeToUse = this.removePremiumFlagFromInput(routeCode);
+            }
+
+            const fullTimeSlot = this.selectableTimeSlotsData?.find((ts) => ts.id === routeCodeToUse);
+
+            if (fullTimeSlot) {
+                return {
+                    timeSlot: {
+                        date: this.selectedDate,
+                        routeCode: fullTimeSlot.id,
+                        startTime: fullTimeSlot.startTime,
+                        endTime: fullTimeSlot.endTime,
+                        jobMaxMinutes: this.appointmentDurationMinutesMaximum.toString(),
+                        jobMinMinutes: this.appointmentDurationMinutesMinimum.toString()
+                    },
+                    isPremiumAppointment: !!routeCodeIncludesPremium
+                };
+            }
+
+            return {
+                timeSlot: {
+                    date: null,
+                    startTime: null,
+                    endTime: null,
+                    routeCode: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null
+                },
+                isPremiumAppointment: null
+            };
+        },
         handleMqlChange(e) {
             this.isMobileView = !e.matches;
             this.activePageIndex = 0;
             this.selectedDate = null;
             this.selectedTimeOfDayGrouping = null;
+            this.selectedTime = null;
             this.selectedTimeSlot = null;
             this.findFirstAvailableDateInView();
         },
@@ -311,6 +373,46 @@ export default {
                 }
             }
         },
+        findInitialPageIndex(daysFromStart) {
+            if (daysFromStart !== null && daysFromStart !== undefined) {
+                return {
+                    initialPageIndex: Math.floor(daysFromStart / this.daysToAdd),
+                    initialDayIndex: daysFromStart % this.daysToAdd
+                };
+            }
+            return {
+                initialPageIndex: 0,
+                initialDayIndex: null
+            };
+        },
+        findInitialDate(myDateString, initialDayIndex) {
+            const dateInView = this.getDateToShow(initialDayIndex);
+            const dateInViewString = convertDateToDateString(dateInView);
+            if (dateInViewString === myDateString) {
+                const isAfternoonSlot = isAfternoon(myDateString);
+                const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
+                if (selectableDateObj) {
+                    if (isAfternoonSlot) {
+                        this.showAfternoonTimes(initialDayIndex);
+                        this.findInitialTimeByStore(selectableDateObj.afternoonTimeSlots);
+                    } else {
+                        this.showMorningTimes(initialDayIndex);
+                        this.findInitialTimeByStore(selectableDateObj.morningTimeSlots);
+                    }
+                }
+            }
+        },
+        findInitialTimeByStore(timeSlots) {
+            const initialTimeSlot = this.mainStore.order.schedule;
+            if (!initialTimeSlot || !initialTimeSlot.startTime) {
+                return;
+            }
+            const initialStartTime = initialTimeSlot.startTime;
+            const foundTimeSlot = timeSlots.find((ts) => ts.startTime === initialStartTime);
+            if (foundTimeSlot) {
+                this.selectTimeSlotForDay(foundTimeSlot);
+            }
+        },
         getDateToShow(index) {
             const dayOffset = this.activePageIndex * this.daysToAdd;
             const dateToShow = new Date(this.activeDate);
@@ -321,6 +423,38 @@ export default {
             const dateToShow = this.getDateToShow(index);
             return convertDateToDateString(dateToShow);
         },
+        getEndDateForExistingDate(startDate, selectedDateString, daysInView) {
+            const endDate = new Date(startDate);
+            endDate.setDate(endDate.getDate() + (daysInView - 1));
+
+            if (selectedDateString) {
+                const selectedDate = new Date(`${selectedDateString}T00:00:00`);
+                const daysDifferenceComparedToStartDate = Math.ceil((selectedDate - startDate) / (1000 * 60 * 60 * 24));
+                if (selectedDate > endDate) {
+                    const daysDifferenceComparedToStartDateAsPages = Math.ceil(daysDifferenceComparedToStartDate / daysInView);
+                    const newEndDate = new Date(startDate);
+                    newEndDate.setDate(newEndDate.getDate() + (daysDifferenceComparedToStartDateAsPages * daysInView) - 1);
+
+                    return {
+                        endDateString: convertDateToDateString(newEndDate),
+                        newDaysLoaded: (daysDifferenceComparedToStartDateAsPages * daysInView),
+                        daysFromStart: daysDifferenceComparedToStartDate
+                    };
+                }
+
+                return {
+                    endDateString: convertDateToDateString(endDate),
+                    newDaysLoaded: null,
+                    daysFromStart: daysDifferenceComparedToStartDate
+                };
+            }
+
+            return {
+                endDateString: convertDateToDateString(endDate),
+                newDaysLoaded: null,
+                daysFromStart: null
+            };
+        },
         gotoNextPage() {
             const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
             if (this.activePageIndex >= maxPageIndex) {
@@ -329,6 +463,7 @@ export default {
                     this.daysLoaded += this.initialDaysToLoad;
                     this.activePageIndex += 1;
                     this.selectedDate = null;
+                    this.selectedTime = null;
                     this.selectedTimeSlot = null;
                     this.findFirstAvailableDateInView();
                 });
@@ -336,12 +471,14 @@ export default {
             }
             this.activePageIndex += 1;
             this.selectedDate = null;
+            this.selectedTIme = null;
             this.selectedTimeSlot = null;
             this.findFirstAvailableDateInView();
         },
         gotoPreviousPage() {
             this.activePageIndex -= 1;
             this.selectedDate = null;
+            this.selectedTime = null;
             this.selectedTimeSlot = null;
             this.findFirstAvailableDateInView();
         },
@@ -357,6 +494,7 @@ export default {
         },
         selectTimeSlotForDay(timeSlot) {
             if (timeSlot) {
+                this.selectedTime = timeSlot.startTime;
                 this.selectedTimeSlot = timeSlot;
             }
         },
@@ -387,6 +525,7 @@ export default {
                 this.selectedDate = morningDateString;
                 this.selectedTimeOfDayGrouping = 'morning';
                 this.selectableTimeSlotsData = selectableDateObj.morningTimeSlots;
+                this.selectedTime = null;
                 this.selectedTimeSlot = null;
             }
         },
@@ -411,13 +550,18 @@ export default {
                 this.selectedTimeOfDayGrouping = 'afternoon';
                 this.selectableTimeSlotsData = selectableDateObj.afternoonTimeSlots;
                 this.selectedTimeSlot = null;
+                this.selectedTime = null;
             }
         },
+        timeSlotInputChanged(timeSlot) {
+            this.selectTimeSlotForDay(timeSlot);
+        },
         async loadInitialData(config) {
             /*
              ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
              */
             let todayDateString;
+            const todayDateObject = new Date();
             const calendarViewDirection = 'future';
             const initialDays = 15;
 
@@ -426,13 +570,23 @@ export default {
             } else if (config.todayOverrideDateString) {
                 todayDateString = config.todayOverrideDateString;
             } else {
-                todayDateString = convertDateToDateString(new Date());
+                todayDateString = convertDateToDateString(todayDateObject);
             }
 
             const initialViewStartDate = todayDateString;
             const initialEndDate = new Date();
             initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
-            const initialViewEndDate = convertDateToDateString(initialEndDate);
+            let initialViewEndDate = convertDateToDateString(initialEndDate);
+
+            const endDateObject = this.getEndDateForExistingDate(
+                todayDateObject,
+                config.preSelectedDate,
+                initialDays
+            );
+
+            if (endDateObject.endDateString !== initialViewEndDate) {
+                initialViewEndDate = endDateObject.endDateString;
+            }
 
             const loadInitialDataPromise = new Promise((resolve) => {
                 const response = config.customSelectableDatesCallback(
@@ -452,7 +606,8 @@ export default {
                     calendarViewDirection,
                     initialShopTimeSlotsResponse: response,
                     preSelectedDate: config.preSelectedDate,
-                    initialDaysLoaded: initialDays
+                    initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
+                    daysFromStart: endDateObject.daysFromStart || null
                 };
 
                 return initialData;
@@ -480,7 +635,18 @@ export default {
             this.appointmentDurationMinutesMaximum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMaximum;
             this.appointmentDurationMinutesMinimum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMinimum;
 
-            this.findFirstAvailableDateInView();
+            let pageIndexObj = { initialPageIndex: 0, initialDayIndex: null };
+            if (config.daysFromStart !== null && config.daysFromStart !== undefined) {
+                pageIndexObj = this.findInitialPageIndex(config.daysFromStart);
+                this.activePageIndex = pageIndexObj.initialPageIndex;
+            }
+
+            if (config.preSelectedDate) {
+                this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
+            } else {
+                this.findFirstAvailableDateInView();
+            }
+
             this.isLoading = false;
         },
         async loadMoreDays(maxPageIndex, daysInView, daysToFetch) {
@@ -590,6 +756,9 @@ export default {
             .span-block-flex {
                 display: flex;
                 align-items: center;
+                border: none;
+                background-color: #fff;
+                color: #525656;
                 cursor: pointer;
 
                 &:hover {
@@ -601,6 +770,7 @@ export default {
             text-align: end;
 
             .span-block-flex {
+                justify-self: flex-end;
                 justify-content: flex-end;
 
                 img {
@@ -610,6 +780,7 @@ export default {
         }
         .header-middle {
             font-weight: 600;
+            color: #000;
             @include media-breakpoint-up(xs) {
                 grid-column: 2 / span 1;
             }
@@ -623,6 +794,7 @@ export default {
             text-align: start;
 
             .span-block-flex {
+                justify-self: flex-start;
                 justify-content: flex-start;
 
                 img {
@@ -677,6 +849,10 @@ export default {
                 border: solid 1px #0070d1;
             }
 
+            &:focus, &:focus-visible {
+                outline: none;
+                border: solid 2px #0070d1;
+            }
         }
         .span-block {
             display: block;
@@ -697,7 +873,7 @@ export default {
         .time-slot-button {
             width: 100%;
             border: 1px solid #b3b4b5;
-            border-radius: 1.375rem;
+            border-radius: $border-radius-list-button;
             box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
             color: #525656;
             padding: 0.5rem 0;
diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js
index bedf9ca2..24a90760 100644
--- a/src/helpers/date-helper.js
+++ b/src/helpers/date-helper.js
@@ -66,6 +66,12 @@ export function getDisplayTextForDurationLength(durationMinimum, durationMaximum
     return `${durationText} ${unitText}`;
 }
 
+export function isAfternoon(timeString) {
+    if (typeof timeString !== 'string') return false;
+    const hours = parseInt(timeString.split(':')[0], 10);
+    return hours >= 12;
+}
+
 export function militaryToTwelveHourTime(timeString) {
     // Expected input: "HH:MM"
     if (typeof timeString !== 'string') return null;
diff --git a/src/layouts/schedule-page/schedule-page.spec.js b/src/layouts/schedule-page/schedule-page.spec.js
index 49ef7264..133654da 100644
--- a/src/layouts/schedule-page/schedule-page.spec.js
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@@ -6,7 +6,6 @@ import { createTestingPinia } from '@pinia/testing';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store/index.js';
-import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -214,7 +213,7 @@ describe('schedule-page.vue', () => {
             // Act
             const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
                 '2023-01-01',
-                '2023-01-31'
+                '2023-01-15'
             );
 
             // Assert
@@ -236,7 +235,7 @@ describe('schedule-page.vue', () => {
                 estimatedServiceMinutesMaximum: 120
             });
         });
-        test('Should call API service in days of 34 or less when getAvailableDatesMethod is called with large date ranges', async () => {
+        test('Should call API service in days of 15 or less when getAvailableDatesMethod is called with large date ranges', async () => {
             // Arrange
             const { wrapper } = getShallowMountedComponent();
             wrapper.vm.selectableDatesData = {
@@ -264,7 +263,7 @@ describe('schedule-page.vue', () => {
             // 2023-01-01 --> 2023-02-05
             // 2023-02-06 --> 2023-03-12
             // 2023-03-13 --> 2023-03-31
-            expect(store.getShopTimeSlots).toHaveBeenCalledTimes(3);
+            expect(store.getShopTimeSlots).toHaveBeenCalledTimes(6);
         });
     });
     describe('Rendering', () => {
@@ -296,7 +295,9 @@ describe('schedule-page.vue', () => {
         const { wrapper } = getShallowMountedComponent();
         wrapper.vm.$router.navigate = jest.fn(() => ({}));
         wrapper.vm.selectedTimeSlotInfo = {
-            id: 'test-id'
+            timeSlot: {
+                routeCode: 'test-id'
+            }
         };
 
         // Act
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 8a5667b0..aa08e79a 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -73,7 +73,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 
 // Define constants
-const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+const TIME_SLOTS_CALL_DAYS_LIMIT = 15;
 
 const getAvailableDates = async (
     startDateString,
@@ -83,7 +83,7 @@ const getAvailableDates = async (
 ) => {
     const apiEndDateLimit = sumDateString(
         startDateString,
-        TIME_SLOTS_CALL_DAYS_LIMIT
+        TIME_SLOTS_CALL_DAYS_LIMIT - 1
     );
     const difference = calcDaysBetweenDates(startDateString, endDateString);
     const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
@@ -98,7 +98,7 @@ const getAvailableDates = async (
             apiStartDate = sumDateString(apiEndDate, 1);
             apiEndDate = sumDateString(
                 apiStartDate,
-                TIME_SLOTS_CALL_DAYS_LIMIT
+                TIME_SLOTS_CALL_DAYS_LIMIT - 1
             );
 
             if (i === apiCallsCount) {
@@ -108,11 +108,7 @@ const getAvailableDates = async (
             apiEndDate = apiEndDateLimit;
         }
 
-        if (
-            appointmentType === AppointmentTypeStrings.MOBILE
-            || appointmentType
-                === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
-        ) {
+        if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
             storeActionConfig = {
                 storeAction: GET_MOBILE_TIME_SLOTS,
                 payload: {
@@ -278,7 +274,7 @@ export default {
             return useMainStore().order.serviceLocation.appointmentType;
         },
         isFormValid() {
-            const hasTimeSlotSelected = this.selectedTimeSlotInfo?.id != null;
+            const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null;
             return hasTimeSlotSelected;
         },
         supportingItems() {
@@ -328,9 +324,6 @@ export default {
         getServiceZipCtuCodeFromStore() {
             return this.mainStore.order.serviceLocation.zipCodeCtu;
         },
-        dateTimeSelected() {
-            console.log('dateTimeSelected called');
-        },
         getSelectedDate() {
             return this.mainStore.order.schedule.date;
         },
diff --git a/src/store/index.js b/src/store/index.js
index 1d6e44b7..5d2c3c15 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2369,23 +2369,23 @@ export const useMainStore = defineStore({
 
             const isMobileApt = appointmentType === AppointmentTypeStrings.MOBILE
                 || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
-            
+
             const retPricedLineItems = await globalMethods.callHttpClient({
                 method: endpoints.TaxOrderItems.method,
                 endpoint: endpoints.TaxOrderItems.url,
                 payload: {
-                ParentAccountNumber: this.order.parentAccountNumber,
-                BillToAccountNumber: this.billToAccountNumber,
-                ProviderNumber: this.providerNumber,
-                AppointmentType: appointmentType,
-                PricedLineItems: getLineItemsFlattened(pricedLineItems),
-                ServiceLocation: {
-                    City: isMobileApt ? serviceLocationCity : null,
-                    State: isMobileApt ? serviceLocationState : null,
-                    ZipCode: isMobileApt ? serviceLocationZipCode : null,
-                },
-                ServerData: lineItemServerData ? lineItemServerData : "",
-            },
+                    ParentAccountNumber: this.order.parentAccountNumber,
+                    BillToAccountNumber: this.billToAccountNumber,
+                    ProviderNumber: this.providerNumber,
+                    AppointmentType: appointmentType,
+                    PricedLineItems: getLineItemsFlattened(pricedLineItems),
+                    ServiceLocation: {
+                        City: isMobileApt ? serviceLocationCity : null,
+                        State: isMobileApt ? serviceLocationState : null,
+                        ZipCode: isMobileApt ? serviceLocationZipCode : null
+                    },
+                    ServerData: lineItemServerData || ''
+                }
             }).then((response) => {
                 this.order.lineItems.serverData = response.data.serverData;
                 return addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 41cd8269..280b9a24 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -154,6 +154,7 @@ $border-radius: 0.25rem;
 $border-radius-sm: 0.2rem;
 $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
 $border-radius-pill: 50rem;
+$border-radius-list-button: 1.375rem; // Used for list buttons
 
 //Progress Bar Styling
 $progress-bar-success-color: $green;

From 6a2bc71ea0e2c3826c779e4ad34f40a217c2ca71 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 13:42:10 -0500
Subject: [PATCH 06/10] update

---
 .../date-picker/date-picker.vue               | 293 +-----------------
 1 file changed, 2 insertions(+), 291 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 7c9bacc2..80a19ab6 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -389,9 +389,10 @@ export default {
             const dateInView = this.getDateToShow(initialDayIndex);
             const dateInViewString = convertDateToDateString(dateInView);
             if (dateInViewString === myDateString) {
-                const isAfternoonSlot = isAfternoon(myDateString);
                 const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
                 if (selectableDateObj) {
+                    const initialTimeSlot = this.mainStore.order.schedule;
+                    const isAfternoonSlot = isAfternoon(initialTimeSlot?.startTime);
                     if (isAfternoonSlot) {
                         this.showAfternoonTimes(initialDayIndex);
                         this.findInitialTimeByStore(selectableDateObj.afternoonTimeSlots);
@@ -898,239 +899,6 @@ export default {
         flex-grow: 1;
         position: relative;
     }
-    .calendar-grid-container {
-        margin: 0 auto 2rem auto;
-        max-width: 414px;
-        position: relative;
-        transition: height ease 2s, opacity ease 2s;
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        justify-content: center;
-        align-items: center;
-        padding: 0 0.75rem;
-        opacity: 1;
-
-        .grid-item {
-            text-align: center;
-            margin: 10px 3px;
-            font-size: 0.875rem;
-            line-height: 1.5;
-
-            &.first-day-,
-            &.first-day-0 {
-                grid-column-start: 1;
-            }
-            &.first-day-1 {
-                grid-column-start: 2;
-            }
-            &.first-day-2 {
-                grid-column-start: 3;
-            }
-            &.first-day-3 {
-                grid-column-start: 4;
-            }
-            &.first-day-4 {
-                grid-column-start: 5;
-            }
-            &.first-day-5 {
-                grid-column-start: 6;
-            }
-            &.first-day-6 {
-                grid-column-start: 7;
-            }
-        }
-
-        .separator-line {
-            grid-area: 2/1/2/8;
-            border-top: 1px solid $gray-500;
-            margin: 0.5rem 0;
-        }
-
-        .month-year {
-            grid-area: 1 / 1 / 2 / 5;
-            text-transform: uppercase;
-            font-weight: 300;
-        }
-        .legend {
-            grid-area: 1 / 5 / 2 / 8;
-            .legend-circle {
-                border-radius: 50%;
-                width: 16px;
-                height: 16px;
-                background-color: $blue-100;
-                border: 1px solid $blue;
-            }
-        }
-        .nav-back,
-        .nav-forward {
-            display: none;
-        }
-
-        .radio-wrapper {
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            outline: none;
-            height: 1.5rem;
-            opacity: 1;
-            transition: height ease 250ms, opacity ease 250ms;
-
-            input[type='radio'] {
-                position: absolute; //override bootstrap
-                height: 0;
-                opacity: 0;
-
-                &:focus-visible + label {
-                    box-shadow: 0 0 0 2.5px $blue;
-                }
-
-                &:focus + label,
-                &:checked:focus + label {
-                    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-                    background-color: $blue;
-                    color: $white;
-                    &.current-day {
-                        &:after {
-                            background-color: $white;
-                        }
-                        .first-day {
-                            color: $white;
-                        }
-                    }
-                }
-
-                &:checked + label {
-                    color: $white;
-                    background: $blue;
-                    &:after {
-                        background-color: $white;
-                    }
-                    .first-day {
-                        color: $white;
-                    }
-                }
-            }
-
-            .first-day {
-                position: absolute;
-                font-size: 9px;
-                font-weight: 500;
-                color: $gray-600;
-                top: 0;
-                z-index: 1;
-            }
-
-            label {
-                position: relative;
-                cursor: pointer;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 2.5rem;
-                width: 2.5rem;
-                height: 2.5rem;
-
-                span {
-                    &.small {
-                        font-size: 0.75rem;
-                        color: $gray-550;
-                    }
-                }
-
-                &:hover,
-                &:checked {
-                    @include media-breakpoint-up(sm) {
-                        box-shadow: 0 0 0 4px transparent;
-                        background-color: $blue;
-                        color: $white;
-                        &:after {
-                            background-color: $white;
-                        }
-                    }
-                    cursor: pointer;
-                    &.current-day {
-                        + .first-day {
-                            color: $white;
-                        }
-                    }
-                    .first-day {
-                        color: $white;
-                    }
-                }
-                + p {
-                    display: none;
-                }
-            }
-
-            &.selectable-day {
-                label {
-                    color: $blue;
-                    background-color: $blue-100;
-                    border: 1px solid $blue;
-                    min-width: 2.5rem;
-                    width: 2.5rem;
-                    border-radius: 50%;
-                }
-            }
-            &.unavailable-day {
-                label {
-                    color: $gray-500;
-                    background-color: $gray-100;
-                    border: none;
-                    pointer-events: none;
-                }
-            }
-            &.unavailable-day:not(&.sunday) {
-                label {
-                    &::before {
-                        content: '';
-                        display: inline-block;
-                        position: absolute;
-                        left: -1rem;
-                        width: 1rem;
-                        height: 2.5rem;
-                        background: $gray-100;
-                    }
-                }
-            }
-            &.current-day {
-                label {
-                    font-weight: 500;
-                    color: $black;
-
-                    &:after {
-                        content: '';
-                        width: 0.25rem;
-                        height: 0.25rem;
-                        border-radius: 50%;
-                        background-color: $black;
-                        position: absolute;
-                        top: 28px;
-                    }
-                    .first-day {
-                        color: $blue;
-                    }
-                }
-            }
-        }
-
-        &.partial-month-initial-view {
-            .day-hidden {
-                opacity: 0;
-                overflow: hidden;
-                display: flex;
-                margin: 0;
-                max-height: 0;
-            }
-        }
-        &.month-hidden {
-            opacity: 0;
-            max-height: 0;
-            margin-bottom: 0;
-            overflow: hidden;
-        }
-    }
 
     .btn-link {
         font-weight: 500;
@@ -1140,63 +908,6 @@ export default {
             box-shadow: none;
         }
     }
-
-    .past {
-        .calendar-grid-container {
-            .month-year {
-                grid-area: 1 / 1 / 2 / 6;
-            }
-            .nav-forward {
-                grid-area: 1 / 7 / 2 / 8;
-                display: flex;
-                justify-content: flex-end;
-                button {
-                    &:after {
-                        content: '';
-                        position: absolute;
-                        width: 7px;
-                        height: 12px;
-                        background-image: url($svg-date-picker-forward-button);
-                    }
-                }
-            }
-            .nav-back {
-                grid-area: 1 / 6 / 2 / 7;
-                display: flex;
-                justify-content: flex-end;
-                button {
-                    &:after {
-                        content: '';
-                        position: absolute;
-                        width: 7px;
-                        height: 12px;
-                        background-image: url($svg-date-picker-nav-back-button);
-                    }
-                }
-            }
-            .nav-back,
-            .nav-forward {
-                button {
-                    position: relative;
-                    border-radius: 50%;
-                    width: 28px;
-                    height: 28px;
-                    background-color: $blue-100;
-                    border: 1px solid $blue;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    &:focus,
-                    &:focus-visible {
-                        border: 2.5px solid $blue;
-                        box-shadow: none;
-                        background-color: $blue-100;
-                        color: $white;
-                    }
-                }
-            }
-        }
-    }
 }
 .btn-link {
     display: block;

From cb0ef2b6279e6e3e3ef989ac1f3e76f52962e007 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 14:07:40 -0500
Subject: [PATCH 07/10] cursor updates

---
 src/digital-components/date-picker/date-picker.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 80a19ab6..02337bf0 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -18,6 +18,7 @@
                 <div class="header-cell header-start">
                     <button
                         v-if="activePageIndex !== 0"
+                        type="button"
                         class="span-block-flex"
                         @click="gotoPreviousPage()">
                         <img
@@ -32,6 +33,7 @@
                 </div>
                 <div class="header-cell header-end">
                     <button
+                        type="button"
                         class="span-block-flex"
                         @click="gotoNextPage()">
                         More
@@ -297,7 +299,7 @@ export default {
     },
     unmounted() {
         if (this.mql) {
-            this.mql.removeEventListener('change', () => {});
+            this.mql.removeEventListener('change', this.handleMqlChange);
         }
     },
     methods: {
@@ -472,7 +474,7 @@ export default {
             }
             this.activePageIndex += 1;
             this.selectedDate = null;
-            this.selectedTIme = null;
+            this.selectedTime = null;
             this.selectedTimeSlot = null;
             this.findFirstAvailableDateInView();
         },

From 88bd6b239d2e3cb5864897eec5bcb2e1b004342c Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 14:59:33 -0500
Subject: [PATCH 08/10] couple updates

---
 .../date-picker/date-picker.vue               | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 02337bf0..aa685e88 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -62,7 +62,8 @@
                             class="morning-row-cell"
                             :class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
-                            @click="showMorningTimes(n - 1)">
+                            @click="showMorningTimes(n - 1)"
+                            @keydown.enter="showMorningTimes(n - 1)">
                             <span class="span-block top-caption">Morning</span>
                             <span class="span-block bottom-caption">
                                 {{ showMorningAvailabilityForIndex(n - 1) }} available
@@ -79,7 +80,8 @@
                             class="afternoon-row-cell"
                             :class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
-                            @click="showAfternoonTimes(n - 1)">
+                            @click="showAfternoonTimes(n - 1)"
+                            @keydown.enter="showAfternoonTimes(n - 1)">
                             <span class="span-block top-caption">Afternoon</span>
                             <span class="span-block bottom-caption">
                                 {{ showAfternoonAvailabilityForIndex(n - 1) }} available
@@ -98,6 +100,15 @@
                 <template
                     v-for="timeSlot in selectableTimeSlotsData"
                     :key="timeSlot.startTime">
+                    <input
+                        :id="`timeslot${timeSlot.startTime}`"
+                        v-model="selectedTime"
+                        type="radio"
+                        name="time-slot"
+                        class="sr-only"
+                        :value="timeSlot.startTime"
+                        @focus="timeSlotFocused(timeSlot)"
+                        @change="timeSlotInputChanged(timeSlot)" />
                     <label
                         :for="`timeslot${timeSlot.startTime}`"
                         class="time-slot-button"
@@ -106,14 +117,6 @@
                         @click="selectTimeSlotForDay(timeSlot)">
                         {{ displayTimeSlotTime(timeSlot.startTime) }}
                     </label>
-                    <input
-                        :id="`timeslot${timeSlot.startTime}`"
-                        v-model="selectedTime"
-                        type="radio"
-                        name="time-slot"
-                        class="sr-only"
-                        :value="timeSlot.startTime"
-                        @change="timeSlotInputChanged(timeSlot)" />
                 </template>
             </div>
             <div class="row form-test-error">
@@ -180,7 +183,7 @@ export default {
             default: ''
         }
     },
-    emits: ['update:modelValue', 'dateSelected', 'timeSlotSelected'],
+    emits: ['dateSelected', 'timeSlotSelected'],
     setup(props) {
         const uuid = crypto.randomUUID();
         const componentId = !props.customComponentId
@@ -556,6 +559,11 @@ export default {
                 this.selectedTime = null;
             }
         },
+        timeSlotFocused(timeSlot) {
+            if (timeSlot && this.selectedTime === null) {
+                this.selectTimeSlotForDay(timeSlot);
+            }
+        },
         timeSlotInputChanged(timeSlot) {
             this.selectTimeSlotForDay(timeSlot);
         },
@@ -648,6 +656,9 @@ export default {
                 this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
             } else {
                 this.findFirstAvailableDateInView();
+                while (!this.selectedDate) {
+                    this.gotoNextPage();
+                }
             }
 
             this.isLoading = false;
@@ -665,7 +676,9 @@ export default {
             await this.updateSelectableDates(
                 startDateToFetchString,
                 endDateToFetchString
-            );
+            ).catch(() => {
+                showIssLoadingModal(false);
+            });
 
             showIssLoadingModal(false);
         },

From 4bb40f2cecfd627f4ecafb83019eb7b8951e1fcc Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 15:25:34 -0500
Subject: [PATCH 09/10] cursor bot update

---
 src/digital-components/date-picker/date-picker.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index aa685e88..6bdf1c77 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -461,11 +461,11 @@ export default {
                 daysFromStart: null
             };
         },
-        gotoNextPage() {
+        async gotoNextPage() {
             const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
             if (this.activePageIndex >= maxPageIndex) {
                 // do not go to next page right away if at end of loaded days
-                this.loadMoreDays(maxPageIndex, this.daysToAdd, this.initialDaysToLoad).then(() => {
+                await this.loadMoreDays(maxPageIndex, this.daysToAdd, this.initialDaysToLoad).then(() => {
                     this.daysLoaded += this.initialDaysToLoad;
                     this.activePageIndex += 1;
                     this.selectedDate = null;
@@ -625,6 +625,8 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
+            const initialMql = window.matchMedia('(min-width: 1200px)');
+            this.isMobileView = !initialMql.matches;
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 const dateObjectToPush = {
                     date: selectableDate.date,

From c0b3a054c42af9c69de337e32af0c031c924e1f3 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 14 Jan 2026 15:38:55 -0500
Subject: [PATCH 10/10] display mobile time

---
 src/digital-components/date-picker/date-picker.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 6bdf1c77..b5cd4b77 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -115,7 +115,7 @@
                         :class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''
                         , {'has-date-error': showTimeSlotError}]"
                         @click="selectTimeSlotForDay(timeSlot)">
-                        {{ displayTimeSlotTime(timeSlot.startTime) }}
+                        {{ displayTimeSlotTime(timeSlot) }}
                     </label>
                 </template>
             </div>
@@ -143,6 +143,7 @@ import {
     militaryToTwelveHourTime
 } from '@/helpers/date-helper';
 import {
+    AppointmentTypeStrings,
     PREMIUM_TIME_SLOT_ID_FLAG
 } from '@/constants/schedule-constants';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
@@ -360,8 +361,12 @@ export default {
             this.selectedTimeSlot = null;
             this.findFirstAvailableDateInView();
         },
-        displayTimeSlotTime(militaryTime) {
-            return militaryToTwelveHourTime(militaryTime);
+        displayTimeSlotTime(timeSlot) {
+            const { appointmentType } = this.mainStore.order.serviceLocation;
+            if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
+                return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
+            }
+            return militaryToTwelveHourTime(timeSlot.startTime);
         },
         findFirstAvailableDateInView() {
             for (let i = 0; i < this.daysToAdd; i += 1) {