diff --git a/jest.config.js b/jest.config.js
index 7b59ea2c1..6c0addf5f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -32,11 +32,7 @@ module.exports = {
     "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
-    "!src/layouts/schedule/**/*.vue", // Temp test exclusion while in development
     "!src/digital-components/date-picker/**/*.vue", // Temp test exclusion while in development
-
-    "!src/**/*-june-2025.vue", // Exclude these temporary files for CASH-845 project
-
     "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
     "!src/experiment-components/*.vue",
     // END
@@ -44,7 +40,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 64,
+      statements: 68,
     },
   },
   // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index a57774c21..b21c6c9c7 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -48,6 +48,10 @@ export const pageProgressMapper = {
         percent: 30,
         step: 1,
     },
+    "policy-info": {
+        percent: 55,
+        step: 2,
+    },
     quote: {
         percent: 60,
         step: 2,
diff --git a/src/digital-components/date-picker/date-picker-june-2025.vue b/src/digital-components/date-picker/date-picker-june-2025.vue
deleted file mode 100644
index 9d001a113..000000000
--- a/src/digital-components/date-picker/date-picker-june-2025.vue
+++ /dev/null
@@ -1,1335 +0,0 @@
-<!-- OLD DATE-PICKER BEGINS -->
-
-<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
-
-<template>
-    <div
-        class="date-picker text-center"
-        :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
-        <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
-            <legend class="sr-only">Select a day and time</legend>
-            <div
-                v-for="month in months"
-                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                :id="`${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">
-                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
-                </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>
-                <div class="nav-back ps-3"><button></button></div>
-                <div class="nav-forward pe-3"><button></button></div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Sunday</span>
-                    SUN
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Monday</span>
-                    MON
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Tuesday</span>
-                    TUE
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Wednesday</span>
-                    WED
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Thursday</span>
-                    THU
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Friday</span>
-                    FRI
-                </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Saturday</span>
-                    SAT
-                </div>
-                <div
-                    v-for="date in month.dates"
-                    :key="date.inputValue"
-                    :id="date.inputValue"
-                    class="grid-item radio-wrapper"
-                    :class="[
-                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
-                        date.dayClasses,
-                        date.isSelectable ? 'selectable-day' : '',
-                        date.isPricingByDayUpchargeDay ? 'upch-day' : '',
-                    ]">
-                    <input
-                        :disabled="!date.isSelectable"
-                        type="radio"
-                        name="day-of-month"
-                        v-model="selectedDate"
-                        @click="fireDateSelectedEvent($event, date)"
-                        @keypress.enter="fireDateSelectedEvent($event, date)"
-                        :value="date.inputValue"
-                        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
-                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                        <span>{{ date.dateNum.toString() }}</span>
-                        <span
-                            v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
-                            class="price">
-                            {{ date.priceString }}
-                        </span>
-                    </label>
-                </div>
-            </div>
-            <loader
-                :class="[!isLoading ? 'date-picker-hidden' : '']"
-                loaderColor="blue"
-                loaderPosition="center" />
-            <div class="row form-test-error" id="date-of-month-error">
-                <ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
-            </div>
-            <button
-                v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
-                type="button"
-                class="btn btn-link view-more-dates"
-                id="viewMoreDates"
-                :disabled="isLoading"
-                @click="showAnotherMonth">
-                View more dates
-            </button>
-            <timeSlotQuestion
-                ref="timeSlotModalQuestion"
-                v-model="selectedTimeSlotInfo"
-                cmsWidgetName="TimeSlotModalQuestion"
-                waitListLabelWidget="WaitListLabelWidget"
-                waitListQuestionWidget="WaitListQuestionWidget"
-                mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                mobileCmsWidgetName="MobileTimeSlotModal"
-                dropoffCmsWidgetName="DropOffTimeSlotModal"
-                sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                :selectedDate="selectedDate"
-                :appointmentType="appointmentType"
-                :premiumAppointmentFee="premiumAppointmentFee"
-                :displayWaitList="displayWaitList"
-                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
-                :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
-                @waitListRequested="handleWaitListRequested"
-                @time-slot-modal-closed="timeSlotModalClosed" />
-        </fieldset>
-    </div>
-</template>
-
-<script>
-import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
-
-// Supporting files
-import loader from "@/ux-components/loader/loader";
-import store from "@/store";
-import {
-    TIMINGFUNC_MAP,
-    BUFFER_OFFSET,
-    MONTHS_OF_YEAR,
-    DAYS_OF_WEEK,
-} from "@/digital-components/date-picker/mixins/constants";
-import {
-    AppointmentTypeStrings,
-    PREMIUM_FEE_PART_TYPE,
-    PRICING_BY_DAY_PART_TYPE,
-} from "@/constants/schedule-constants";
-import {
-    selectableDaysOptions,
-    requiredParameter,
-    forceTwoDigitString,
-} from "@/digital-components/date-picker/mixins/helpers";
-import {
-    convertDateToDateString,
-    convertDateStringToDate,
-} from "@/layouts/schedule/helpers/schedule-helper";
-import { useField, ErrorMessage, defineRule } from "vee-validate";
-import { deepClone } from "@/helpers/object-helper";
-import { v4 as uuidv4 } from "uuid";
-
-export default {
-    name: "datePicker",
-    data() {
-        return {
-            isLoading: true,
-            months: null,
-            disableViewMoreDatesButton: false,
-            selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            hideSomeDaysForInitialView: null,
-
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-        };
-    },
-    props: {
-        customComponentId: String,
-        selectableDatesSetting: {
-            type: String,
-            validator(value) {
-                return Object.values(selectableDaysOptions).includes(value);
-            },
-            default: selectableDaysOptions.PAST,
-        },
-        modelValue: {
-            type: Object,
-        },
-        todayOverrideDateString: {
-            // keep for use in unit tests to override today's date
-            type: String,
-            default: null,
-        },
-        customSelectableDatesCallback: {
-            type: Function,
-            default() {
-                return [];
-            },
-        },
-        validationRules: {
-            type: String,
-            default: "",
-        },
-        showPricingByDay: Boolean,
-        pricingByDayBasePrice: Number,
-        pricingByDayUpcharge: Number,
-        isPricingByDayExperiment: Boolean,
-        timeSlotsForSelectedDate: Object,
-        appointmentType: String,
-        premiumAppointmentFee: Object,
-        estimatedServiceMinutesMinimum: Number,
-        estimatedServiceMinutesMaximum: Number,
-        displayWaitList: Boolean,
-    },
-    setup(props) {
-        const uuid = uuidv4();
-        const componentId = !props.customComponentId
-            ? `component-${uuid}`
-            : props.customComponentId;
-        const modelValue = deepClone(props).modelValue;
-        const initialValue = modelValue;
-        const fieldOptions = {
-            value: modelValue,
-            initialValue: initialValue,
-        };
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
-            useField(componentId, props.validationRules, fieldOptions);
-
-        return {
-            componentId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-            resetField,
-        };
-    },
-    computed: {
-        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";
-        },
-        showPricingByDayClass() {
-            return this.showPricingByDay ? "show-pricing-by-day" : "";
-        },
-        selectedDate: {
-            get() {
-                return this.modelValue;
-            },
-            set(newSelectedDate) {
-                this.$emit("update:modelValue", newSelectedDate);
-            },
-        },
-    },
-    methods: {
-        initializeComponent(initialData) {
-            this.setCalendarData(initialData);
-        },
-        fireDateSelectedEvent(event, date) {
-            // Ignore if arrow key selected radioButton
-            if (event.screenX === 0 && event.screenY === 0) {
-                return;
-            }
-            this.$emit("date-clicked", date);
-        },
-        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);
-        },
-        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);
-        },
-        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]), 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) {
-                let 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: weekStartDate,
-                        weekEndDate: 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: weekStartDate,
-                        weekEndDate: 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) => {
-                    return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
-                        ? true
-                        : false;
-                };
-                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 = item.weekNum + 1;
-                            }
-                        });
-                    }
-                }
-            }
-            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;
-
-            if (this.todayString) {
-                todayDateString = this.todayString;
-            } else if (config.todayOverrideDateString) {
-                todayDateString = config.todayOverrideDateString;
-            } 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;
-
-            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 response = config.customSelectableDatesCallback(
-                    initialViewStartDate,
-                    initialViewEndDate,
-                    store.getters.order.serviceLocation.appointmentType,
-                    store.getters.order.serviceLocation.provider.providerNumber
-                );
-                resolve(response);
-            });
-
-            return loadInitialDataPromise.then((response) => {
-                const initialData = {
-                    todayDate: todayDateString,
-                    initialViewStartDate: initialViewStartDate,
-                    initialViewEndDate: initialViewEndDate,
-                    calendarViewDirection: calendarViewDirection,
-                    initialShopTimeSlotsResponse: response,
-                    hideSomeDaysForInitialView: hideSomeDaysForInitialView,
-                    hideSecondMonth: hideSecondMonth,
-                    preSelectedDate: config.preSelectedDate,
-                };
-                return initialData;
-            });
-        },
-        async setCalendarData(config = {}) {
-            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            const hideSecondMonth = config.hideSecondMonth;
-            const direction = config.calendarViewDirection;
-            const monthsAfterToLoadOffset = 6;
-            const monthsBeforeToLoadOffset = 36;
-            config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
-                this.selectableDatesData.push(selectableDate);
-            });
-
-            // GENERATE MONTHS AND PUSH THEM INTO ARRAY
-            const months = [];
-            const options = {
-                calendarViewDirection: direction,
-                monthsBeforeToLoadOffset: monthsBeforeToLoadOffset,
-                monthsAfterToLoadOffset: monthsAfterToLoadOffset,
-                initialViewStartDate: config.initialViewStartDate,
-                initialViewEndDate: config.initialViewEndDate,
-                hideSecondMonth: hideSecondMonth,
-                preSelectedDate: config.preSelectedDate,
-                pricingByDayBasePrice: config.pricingByDayBasePrice,
-                pricingByDayUpcharge: config.pricingByDayUpcharge,
-            };
-            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.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)
-
-                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.calendarViewDirection;
-            if (calendarViewDirection === "future" && offset > 0) {
-                while (monthNum > 12) {
-                    monthNum = monthNum - 12;
-                    yearNum++;
-                }
-            } else if (calendarViewDirection === "past" && offset < 0) {
-                while (monthNum < 1) {
-                    monthNum = 12 + monthNum;
-                    yearNum--;
-                }
-            }
-            const initialViewEndDate = options.initialViewEndDate;
-            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
-            const hideSecondMonth = options.hideSecondMonth;
-            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 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 = monthClass + " month-preselected";
-                } else if (monthStartDate > preSelectedDateObj) {
-                    monthClass = 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 = monthClass + " last-available-month";
-            }
-            if (
-                Math.abs(offset) === options.monthsBeforeToLoadOffset &&
-                calendarViewDirection === "past"
-            ) {
-                // TODO - re-check this logic if past direction
-                monthClass = 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);
-                const dayIndex = convertDateStringToDate(dateString).getDay();
-                const dayObject = DAYS_OF_WEEK[dayIndex];
-                const isSelectable =
-                    this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
-                        ? true
-                        : false;
-                const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
-                const displayPrice = isPricingByDayUpchargeDay
-                    ? options.pricingByDayBasePrice + options.pricingByDayUpcharge
-                    : options.pricingByDayBasePrice;
-                const priceString = "$" + displayPrice;
-
-                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 (dayIndex === 0) {
-                    dayClasses += " " + dayObject.cssClass;
-                }
-                if (
-                    this.hideSomeDaysForInitialView &&
-                    convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
-                    convertDateStringToDate(initialViewEndDate).getDate() < i
-                ) {
-                    dayClasses += " day-hidden";
-                    isMonthThatHidesSomeDaysForInitialView = true;
-                }
-                const dateObject = {
-                    dateNum: i,
-                    dayClasses: dayClasses,
-                    inputValue: dateString,
-                    priceString: priceString,
-                    isSelectable: isSelectable,
-                    isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
-                };
-                dates.push(dateObject);
-            }
-
-            const monthToAdd = {
-                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
-                monthIndex: monthNum,
-                monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
-                yearNum: yearNum,
-                dates: dates,
-                startDateDayIndex: startDateDayIndex,
-                monthClass: monthClass,
-                isMonthThatHidesSomeDaysForInitialView: isMonthThatHidesSomeDaysForInitialView,
-            };
-            return monthToAdd;
-        },
-        async showAnotherMonth() {
-            if (!this.months) return;
-            this.isLoading = true;
-            let monthToShow;
-            let monthStartDate;
-
-            if (this.hideSomeDaysForInitialView) {
-                monthToShow = this.months.find(
-                    ({ isMonthThatHidesSomeDaysForInitialView }) =>
-                        isMonthThatHidesSomeDaysForInitialView
-                );
-
-                // find the first day-hidden to become the next api call start date
-                monthStartDate = monthToShow.dates.find(({ dayClasses }) =>
-                    dayClasses.includes("day-hidden")
-                );
-            } 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) {
-                const monthStartDateString = monthStartDate
-                    ? monthStartDate.inputValue
-                    : monthToShow.dates[0].inputValue;
-
-                // make new API call with this month's start and end dates
-                const moreSelectableDatesData = await this.updateSelectableDates(
-                    monthStartDateString,
-                    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;
-
-                return moreSelectableDatesData;
-            }
-        },
-        async updateSelectableDates(monthStart, monthEnd) {
-            const moreSelectableDates = await this.customSelectableDatesCallback(
-                monthStart,
-                monthEnd,
-                this.$store.getters.order.serviceLocation.appointmentType,
-                this.$store.getters.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;
-                        }
-                    });
-                });
-            });
-            return moreSelectableDates;
-        },
-        scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
-            const wrapper = document.querySelector(".page-container-grouped-styles");
-            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);
-                }
-            };
-            window.requestAnimationFrame(step);
-        },
-        getSelectedTimeSlotInfo() {
-            const supportingItems = this.getSupportingItems();
-
-            var isPremiumAppointment = false;
-            if (supportingItems) {
-                isPremiumAppointment =
-                    !!supportingItems.filter(
-                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
-                    ).length > 0;
-            }
-
-            const selectedTimeSlotInfo = {
-                timeSlot: store.getters.order.schedule,
-                isPremiumAppointment: isPremiumAppointment,
-            };
-
-            return selectedTimeSlotInfo;
-        },
-        getSupportingItems() {
-            return store.getters.lineItems.supportingItems;
-        },
-        handleWaitListRequested(value) {
-            this.$emit("waitListRequested", value);
-        },
-    },
-    watch: {
-        modelValue(newValue) {
-            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");
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.$emit("TimeSlotSelected", newValue); // NEEDED ON SCHEDULE - to update footer button text and to save to Store correctly
-        },
-    },
-    components: {
-        loader,
-        ErrorMessage,
-        timeSlotQuestion,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.date-picker-hidden {
-    opacity: 0;
-    max-height: 0;
-}
-.date-picker {
-    position: relative;
-    flex-grow: 0;
-    display: flex;
-    flex-direction: column;
-
-    fieldset {
-        flex-grow: 1;
-        position: relative;
-
-        .view-more-dates {
-            color: $blue;
-        }
-    }
-    .loader {
-        height: 2rem;
-        width: calc(100% - 1.5rem);
-
-        &::after {
-            width: 1.5rem;
-            height: 1.5rem;
-        }
-    }
-    .calendar-grid-container {
-        margin: 0 auto 1rem auto;
-        max-width: 360px;
-        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;
-        opacity: 1;
-
-        .grid-item {
-            text-align: center;
-            margin: 10px 3px;
-            font-size: 0.75rem;
-            line-height: 1.5;
-
-            &.caption {
-                color: $gray-550;
-            }
-
-            &.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;
-            font-family: UrbanistBold;
-            color: $black;
-            justify-content: center;
-            margin-bottom: 0.5rem;
-        }
-        .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;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 2.5rem;
-                width: 2.5rem;
-                height: 2.5rem;
-                border: 2px solid transparent;
-
-                span {
-                    &.small {
-                        font-size: 0.75rem;
-                        color: $gray-550;
-                    }
-                }
-
-                &: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 {
-                    background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
-                    border-radius: 50%;
-                    cursor: pointer;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
-                    &:hover {
-                        border: 2px solid $blue;
-                    }
-                }
-            }
-            &.unavailable-day {
-                label {
-                    border: none;
-                    pointer-events: none;
-                }
-            }
-            //NEEDED?
-            &.unavailable-day:not(&.sunday) {
-                label {
-                    &::before {
-                        content: "";
-                        display: inline-block;
-                        position: absolute;
-                        left: -1rem;
-                        width: 1rem;
-                        height: 2.5rem;
-                    }
-                }
-            }
-            &.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: 1.75rem;
-                    }
-                    .first-day {
-                        color: $blue;
-                    }
-                }
-                input[type="radio"]:checked + label:after {
-                    background-color: $black;
-                }
-            }
-        }
-
-        &.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;
-        text-underline-offset: 4px;
-        flex-grow: 0;
-        &:focus {
-            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("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-                    }
-                }
-            }
-            .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("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-                    }
-                }
-            }
-            .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;
-                    }
-                }
-            }
-        }
-    }
-    // new calendar styling overrides
-    &.calendar-2025 {
-        .calendar-grid-container .grid-item {
-            margin: 0 0 0.15rem 0;
-        }
-        .month-year {
-            grid-area: 1 / 1 / 2 / 8;
-        }
-        .legend {
-            display: none;
-        }
-        .radio-wrapper {
-            align-items: flex-start;
-            width: 100%;
-            height: 2.5rem;
-            color: $black;
-
-            input[type="radio"] {
-                &:focus-visible + label {
-                    box-shadow: none;
-                }
-
-                &:focus + label,
-                &:checked:focus + label {
-                    box-shadow: none;
-                    background-color: $blue-100;
-                    color: $black;
-                }
-                &:checked + label {
-                    background: $blue-100;
-                    border: 2px solid $blue;
-                    border-radius: 0.25rem;
-                    color: $black;
-                    span {
-                        font-family: UrbanistSemibold;
-                        font-weight: 400;
-                    }
-                }
-            }
-            label {
-                color: $gray-500;
-                flex-direction: column;
-                height: 2.5rem;
-                width: 100%;
-                font-size: 0.75rem;
-                line-height: 1.2;
-                justify-content: center;
-                padding: 0.25rem;
-            }
-            &.selectable-day {
-                label {
-                    color: $black;
-                    background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
-                    border-radius: 0.25rem;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
-                }
-            }
-            &.current-day {
-                label {
-                    font-weight: 600;
-                    font-family: "UrbanistSemibold";
-                    color: $black;
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
-                }
-            }
-        }
-        &.show-pricing-by-day {
-            .radio-wrapper {
-                &.selectable-day label span {
-                    text-decoration: none;
-                    color: $black;
-                    font-weight: 400;
-                    font-family: "UrbanistSemibold";
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
-
-                    &.price {
-                        font-weight: 400;
-                    }
-                }
-                &.upch-day label span.price {
-                    color: $gray-600;
-                    font-weight: 400;
-                    font-family: $font-family-sans-serif;
-                }
-                input[type="radio"] {
-                    &:focus + label,
-                    &:checked:focus + label {
-                        color: $gray-600;
-                    }
-                    &:checked + label {
-                        color: $blue;
-                        span {
-                            font-weight: 400;
-                            font-family: "UrbanistSemibold";
-                        }
-                    }
-                }
-                &.selectable-day.current-day {
-                    label {
-                        &:after {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    :deep(.button-inner-wrapper) {
-        display: flex;
-        max-width: 100%;
-        flex-wrap: wrap;
-        gap: 0 0.5rem;
-
-        & > div {
-            flex: 0 0 calc(50% - 0.25rem);
-        }
-    }
-    :deep(.button-question.is-mobile-appointment) {
-        .button-inner-wrapper > div {
-            flex: 0 0 100%;
-        }
-    }
-    :deep(.button-question.is-drop-off-appointment) {
-        .button-inner-wrapper > div {
-            flex: 0 0 100%;
-        }
-    }
-}
-
-.btn-link {
-    display: block;
-    position: relative;
-    height: 2rem;
-    width: 100%;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    font-weight: 500;
-    text-underline-offset: 4px;
-    z-index: 2;
-}
-
-.form-test-error {
-    margin: 0 auto;
-    max-width: 414px;
-    text-align: left;
-}
-</style>
-
-<!-- OLD DATE-PICKER ENDS -->
diff --git a/src/digital-components/date-picker/date-picker.specDISABLED.js b/src/digital-components/date-picker/date-picker.specDISABLED.js
deleted file mode 100644
index 6ed05d663..000000000
--- a/src/digital-components/date-picker/date-picker.specDISABLED.js
+++ /dev/null
@@ -1,1435 +0,0 @@
-import datePicker from "./date-picker";
-
-// Supporting Files
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import store from "@/store";
-
-// Constants
-const mockValuesForSetDate01 = {
-    overrideDate: "2023-12-01",
-    monthEnd: "2023-12-31",
-    initialViewWeeks: [
-        {
-            weekNum: 1,
-            weekStartDate: "2023-12-01",
-            weekEndDate: "2023-12-02",
-        },
-        {
-            weekNum: 2,
-            weekStartDate: "2023-12-03",
-            weekEndDate: "2023-12-09",
-        },
-        {
-            weekNum: 3,
-            weekStartDate: "2023-12-10",
-            weekEndDate: "2023-12-16",
-        },
-        {
-            weekNum: 4,
-            weekStartDate: "2023-12-17",
-            weekEndDate: "2023-12-23",
-        },
-        {
-            weekNum: 5,
-            weekStartDate: "2023-12-24",
-            weekEndDate: "2023-12-30",
-        },
-    ],
-    config: {
-        todayDate: "2023-12-01",
-        initialViewStartDate: "2023-12-01",
-        initialViewEndDate: "2023-12-30",
-        calendarViewDirection: "future",
-        initialShopTimeSlotsResponse: {
-            inshopTimeSlotsData: {
-                days: [
-                    {
-                        date: "2023-12-30",
-                        timeSlots: [
-                            {
-                                id: "06747-01820-S-B*20453*7 AM",
-                                startTime: "07:00",
-                                endTime: "08:00",
-                                offerPremium: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-            mobileTimeSlotsData: {
-                days: [
-                    {
-                        date: "2023-12-30",
-                        timeSlots: [
-                            {
-                                id: "06747-01820-S-B*20453*7 AM",
-                                startTime: "07:00",
-                                endTime: "08:00",
-                                offerPremium: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-            estimatedServiceMinutesMinimum: 90,
-            estimatedServiceMinutesMaximum: 120,
-        },
-        hideSomeDaysForInitialView: true,
-        hideSecondMonth: true,
-        preSelectedDate: null,
-    },
-    monthsData: [
-        {
-            monthLabel: "December",
-            monthIndex: 12,
-            monthString: "December-2023",
-            yearNum: 2023,
-            datesInshop: [
-                {
-                    dateNum: 1,
-                    dayClasses: " current-day",
-                    inputValue: "2023-12-01",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 2,
-                    dayClasses: "",
-                    inputValue: "2023-12-02",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 3,
-                    dayClasses: " sunday",
-                    inputValue: "2023-12-03",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 4,
-                    dayClasses: "",
-                    inputValue: "2023-12-04",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 5,
-                    dayClasses: "",
-                    inputValue: "2023-12-05",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 6,
-                    dayClasses: "",
-                    inputValue: "2023-12-06",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 7,
-                    dayClasses: "",
-                    inputValue: "2023-12-07",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 8,
-                    dayClasses: "",
-                    inputValue: "2023-12-08",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 9,
-                    dayClasses: "",
-                    inputValue: "2023-12-09",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 10,
-                    dayClasses: " sunday",
-                    inputValue: "2023-12-10",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 11,
-                    dayClasses: "",
-                    inputValue: "2023-12-11",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 12,
-                    dayClasses: "",
-                    inputValue: "2023-12-12",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 13,
-                    dayClasses: "",
-                    inputValue: "2023-12-13",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 14,
-                    dayClasses: "",
-                    inputValue: "2023-12-14",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 15,
-                    dayClasses: "",
-                    inputValue: "2023-12-15",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 16,
-                    dayClasses: "",
-                    inputValue: "2023-12-16",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 17,
-                    dayClasses: " sunday",
-                    inputValue: "2023-12-17",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 18,
-                    dayClasses: "",
-                    inputValue: "2023-12-18",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 19,
-                    dayClasses: "",
-                    inputValue: "2023-12-19",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 20,
-                    dayClasses: "",
-                    inputValue: "2023-12-20",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 21,
-                    dayClasses: "",
-                    inputValue: "2023-12-21",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 22,
-                    dayClasses: "",
-                    inputValue: "2023-12-22",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 23,
-                    dayClasses: "",
-                    inputValue: "2023-12-23",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 24,
-                    dayClasses: " sunday",
-                    inputValue: "2023-12-24",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 25,
-                    dayClasses: "",
-                    inputValue: "2023-12-25",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 26,
-                    dayClasses: "",
-                    inputValue: "2023-12-26",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 27,
-                    dayClasses: "",
-                    inputValue: "2023-12-27",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 28,
-                    dayClasses: "",
-                    inputValue: "2023-12-28",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 29,
-                    dayClasses: "",
-                    inputValue: "2023-12-29",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 30,
-                    dayClasses: "",
-                    inputValue: "2023-12-30",
-                    isAvailable: true,
-                },
-                {
-                    dateNum: 31,
-                    dayClasses: " sunday day-hidden",
-                    inputValue: "2023-12-31",
-                    isAvailable: false,
-                },
-            ],
-            datesMobile: [],
-            startDateDayIndex: 5,
-            monthClass: "",
-            isMonthThatHidesSomeDaysForInitialView: true,
-        },
-        {
-            monthLabel: "January",
-            monthIndex: 1,
-            monthString: "January-2024",
-            yearNum: 2024,
-            datesInshop: [
-                {
-                    dateNum: 1,
-                    dayClasses: "",
-                    inputValue: "2024-01-01",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 2,
-                    dayClasses: "",
-                    inputValue: "2024-01-02",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 30,
-                    dayClasses: "",
-                    inputValue: "2024-01-30",
-                    isAvailable: false,
-                },
-                {
-                    dateNum: 31,
-                    dayClasses: "",
-                    inputValue: "2024-01-31",
-                    isAvailable: false,
-                },
-            ],
-            datesMobile: [],
-            startDateDayIndex: 1,
-            monthClass: " month-hidden",
-        },
-    ],
-};
-
-const mockInitialData = {
-    todayDate: "2023-07-04",
-    initialViewStartDate: "2023-07-05",
-    initialViewEndDate: "2023-08-19",
-    calendarViewDirection: "future",
-    initialShopTimeSlotsResponse: {
-        inshopTimeSlotsData: {
-            days: [
-                {
-                    date: "2023-07-25",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20295*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                        {
-                            id: "06747-01820-S-B*20295*730 AM",
-                            startTime: "07:30",
-                            endTime: "08:30",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-                {
-                    date: "2023-07-26",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20296*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-            ],
-        },
-        mobileTimeSlotsData: {
-            days: [
-                {
-                    date: "2023-07-25",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20295*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                        {
-                            id: "06747-01820-S-B*20295*730 AM",
-                            startTime: "07:30",
-                            endTime: "08:30",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-                {
-                    date: "2023-07-26",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20296*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-            ],
-        },
-        estimatedServiceMinutesMinimum: 90,
-        estimatedServiceMinutesMaximum: 120,
-    },
-    hideSomeDaysForInitialView: true,
-    hideSecondMonth: false,
-    preSelectedDate: null,
-};
-
-const mockCallbackResponse = {
-    inshopTimeSlotsData: {
-        days: [
-            {
-                date: "2024-12-30",
-                timeSlots: [
-                    {
-                        id: "06747-01820-S-B*20453*7 AM",
-                        startTime: "07:00",
-                        endTime: "08:00",
-                        offerPremium: false,
-                    },
-                ],
-            },
-            {
-                date: "2024-01-02",
-                timeSlots: [
-                    {
-                        id: "06747-01820-S-B*20453*7 AM",
-                        startTime: "07:00",
-                        endTime: "08:00",
-                        offerPremium: false,
-                    },
-                ],
-            },
-        ],
-    },
-    mobileTimeSlotsData: {
-        days: [
-            {
-                date: "2024-12-30",
-                timeSlots: [
-                    {
-                        id: "06747-01820-S-B*20453*7 AM",
-                        startTime: "07:00",
-                        endTime: "08:00",
-                        offerPremium: false,
-                    },
-                ],
-            },
-            {
-                date: "2024-01-02",
-                timeSlots: [
-                    {
-                        id: "06747-01820-S-B*20453*7 AM",
-                        startTime: "07:00",
-                        endTime: "08:00",
-                        offerPremium: false,
-                    },
-                ],
-            },
-        ],
-    },
-
-    estimatedServiceMinutesMinimum: 90,
-    estimatedServiceMinutesMaximum: 120,
-};
-
-const mockPromiseResolve = (returnValue) =>
-    jest.fn(async () => Promise.resolve({ valid: returnValue }));
-
-describe("date-picker.vue", () => {
-    describe("initial setup", () => {
-        test("Expect initializeComponent to be run", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-            wrapper.vm.initializeComponent = jest.fn().mockImplementation();
-            wrapper.vm.initializeComponent(mockInitialData);
-
-            // Assert
-            expect(wrapper.vm.initializeComponent).toHaveBeenCalled();
-
-            wrapper.unmount();
-        });
-
-        test("When initializeComponent runs, expect will run setCalendarData method", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-            const spy = jest.spyOn(wrapper.vm, "setCalendarData");
-            wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn();
-            wrapper.vm.$nextTick();
-
-            // Act
-            wrapper.vm.initializeComponent(mockInitialData);
-
-            // Assert
-            expect(spy).toHaveBeenCalled();
-
-            wrapper.unmount();
-        });
-
-        test("If prop customComponentId is supplied, expect it will be used for componentId in setup method", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    customComponentId: "dateQuestion",
-                },
-            });
-
-            // Act
-            const componentIdValue = wrapper.vm.componentId;
-
-            // Assert
-            expect(componentIdValue).toEqual("dateQuestion");
-
-            wrapper.unmount();
-        });
-
-        test("If prop getMoreDatesCallback is not supplied, expect the default function will return empty array", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-
-            // Act
-            const callbackResponse = wrapper.vm.getMoreDatesCallback(
-                "2023-07-24",
-                "2023-08-19",
-                "Inshop",
-                "006747"
-            );
-
-            // Assert
-            expect(callbackResponse).toEqual([]);
-
-            wrapper.unmount();
-        });
-
-        test("expect a date string created from today", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-            const todayDate = new Date();
-            const todayDateString =
-                todayDate.getFullYear() +
-                "-" +
-                ("0" + (todayDate.getMonth() + 1)).slice(-2) +
-                "-" +
-                ("0" + todayDate.getDate()).slice(-2);
-
-            // Assert
-            expect(wrapper.vm.todayString).toEqual(todayDateString);
-
-            wrapper.unmount();
-        });
-
-        test("expect a date string created from todayOverrideDateString", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-02",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.todayString).toEqual("2023-07-02");
-
-            wrapper.unmount();
-        });
-
-        test("expect computed todayDayIndex returns the correct day index", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-02",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.todayDayIndex).toEqual(0);
-
-            wrapper.unmount();
-        });
-
-        test("expect computed todayDateNum returns the correct date number", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-02",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.todayDateNum).toEqual(2);
-
-            wrapper.unmount();
-        });
-
-        test("expect computed currentWeekStartDateNum returns the correct date number when todayDayIndex is < todayDateNum", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.currentWeekStartDateNum).toEqual(2);
-
-            wrapper.unmount();
-        });
-
-        test("expect computed currentWeekStartDateNum returns 1 when todayDayIndex is >= todayDateNum", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-01",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.currentWeekStartDateNum).toEqual(1);
-
-            wrapper.unmount();
-        });
-
-        test("expect computed currentWeekEndDateNum returns correct value", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.currentWeekEndDateNum).toEqual(8);
-
-            wrapper.unmount();
-        });
-
-        test("expect computed calendarViewDirection returns 'past' when prop selectableDatesSetting is 'past'", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "past",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.calendarViewDirection).toEqual("past");
-
-            wrapper.unmount();
-        });
-
-        test("expect computed calendarViewDirection returns 'future' when prop selectableDatesSetting is 'custom'", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-
-            // Assert
-            expect(wrapper.vm.calendarViewDirection).toEqual("future");
-
-            wrapper.unmount();
-        });
-
-        // describe("when loadInitialData is run...", () => {
-        //     test("and this.todayString exists, expect it should have a todayDate matching today", async () => {
-        //         // Arrange
-        //         const { wrapper } = setupMocks({});
-        //         const todayDate = new Date();
-        //         const todayDateString =
-        //             todayDate.getFullYear() +
-        //             "-" +
-        //             ("0" + (todayDate.getMonth() + 1)).slice(-2) +
-        //             "-" +
-        //             ("0" + todayDate.getDate()).slice(-2);
-
-        //         // Act
-        //         const testResult = await wrapper.vm.loadInitialData({
-        //             selectableDatesSetting: "custom",
-        //             initialViewRowsToShow: 5,
-        //             getSelectableDatesCallback: mockPromiseResolve,
-        //             preSelectedDate: null,
-        //         });
-
-        //         // Assert
-        //         expect(testResult).toMatchObject({
-        //             todayDate: todayDateString,
-        //         });
-
-        //         wrapper.unmount();
-        //     });
-
-        //     test("and overrride date exists, expect it should have a todayDate matching the override", async () => {
-        //         // Arrange
-        //         const overrideDate = mockValuesForSetDate01.overrideDate;
-        //         const { wrapper } = setupMocks({
-        //             propsData: {
-        //                 selectableDatesSetting: "custom",
-        //                 todayOverrideDateString: overrideDate,
-        //             },
-        //         });
-
-        //         // Act
-        //         const localThis = {
-        //             todayString: null,
-        //             todayOverrideDateString: overrideDate,
-        //             getMonthEnd: () => mockValuesForSetDate01.monthEnd,
-        //             getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
-        //         };
-        //         const testResult = await datePicker.methods.loadInitialData.call(localThis, {
-        //             selectableDatesSetting: "custom",
-        //             initialViewRowsToShow: 5,
-        //             getSelectableDatesCallback: mockPromiseResolve,
-        //             preSelectedDate: null,
-
-        //             todayOverrideDateString: overrideDate,
-        //         });
-
-        //         // Assert
-        //         expect(testResult).toMatchObject({
-        //             todayDate: overrideDate,
-        //         });
-
-        //         wrapper.unmount();
-        //     });
-
-        //     test("with no this.todayString or overrride date, expect it should have a todayDate matching today", async () => {
-        //         // Arrange
-        //         const { wrapper } = setupMocks({});
-        //         const todayDate = new Date();
-        //         const todayDateString =
-        //             todayDate.getFullYear() +
-        //             "-" +
-        //             ("0" + (todayDate.getMonth() + 1)).slice(-2) +
-        //             "-" +
-        //             ("0" + todayDate.getDate()).slice(-2);
-
-        //         // Act
-        //         const localThis = {
-        //             todayString: null,
-        //             getMonthEnd: () => mockValuesForSetDate01.monthEnd,
-        //             getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks,
-        //         };
-
-        //         //Act
-        //         const testResult = await datePicker.methods.loadInitialData.call(localThis, {
-        //             selectableDatesSetting: "custom",
-        //             initialViewRowsToShow: 5,
-        //             getSelectableDatesCallback: mockPromiseResolve,
-        //             preSelectedDate: null,
-        //         });
-
-        //         // Assert
-        //         expect(testResult).toMatchObject({
-        //             todayDate: todayDateString,
-        //         });
-
-        //         wrapper.unmount();
-        //     });
-
-        //     test("and config.selectableDatesSetting is PAST, expect it should have a calendarViewDirection of PAST", async () => {
-        //         // Arrange
-        //         const { wrapper } = setupMocks({});
-
-        //         // Act
-        //         const testResult = await wrapper.vm.loadInitialData({
-        //             selectableDatesSetting: "past",
-        //             initialViewRowsToShow: 5,
-        //             getSelectableDatesCallback: mockPromiseResolve,
-        //         });
-
-        //         // Assert
-        //         expect(testResult).toMatchObject({
-        //             calendarViewDirection: "past",
-        //         });
-
-        //         wrapper.unmount();
-        //     });
-
-        //     test("and config.selectableDatesSetting is CUSTOM, expect it should have a calendarViewDirection of FUTURE", async () => {
-        //         // Arrange
-        //         const { wrapper } = setupMocks({});
-
-        //         // Act
-        //         const testResult = await wrapper.vm.loadInitialData({
-        //             selectableDatesSetting: "custom",
-        //             initialViewRowsToShow: 5,
-        //             getSelectableDatesCallback: mockPromiseResolve,
-        //         });
-
-        //         // Assert
-        //         expect(testResult).toMatchObject({
-        //             calendarViewDirection: "future",
-        //         });
-
-        //         wrapper.unmount();
-        //     });
-        // });
-
-        describe("when setCalendarData is run...", () => {
-            test("expect that data elements are updated properly", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "custom",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-
-                // Act
-                await wrapper.vm.setCalendarData(mockValuesForSetDate01.config);
-
-                // Assert
-                expect(wrapper.vm.hideSomeDaysForInitialView).toBe(true);
-                expect(wrapper.vm.selectableDatesInshop[0]).toMatchObject({
-                    date: "2023-12-30",
-                });
-                expect(wrapper.vm.selectableDatesInshop[0].timeSlots.length).toBeGreaterThan(0);
-                expect(wrapper.vm.months.length).toBe(7);
-                expect(wrapper.vm.months[0]).toMatchObject({
-                    monthLabel: "December",
-                    monthIndex: 12,
-                    monthString: "December-2023",
-                    yearNum: 2023,
-                    startDateDayIndex: 5,
-                    monthClass: "",
-                    isMonthThatHidesSomeDaysForInitialView: true,
-                });
-
-                wrapper.unmount();
-            });
-
-            test("expect that this.months are reversed if direction is past", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "past",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-                const modifiedConfig = { ...mockValuesForSetDate01.config };
-                modifiedConfig.calendarViewDirection = "past";
-
-                // Act
-                await wrapper.vm.setCalendarData(modifiedConfig);
-
-                // Assert
-                expect(wrapper.vm.months.length).toBe(37);
-                expect(wrapper.vm.months[0]).toMatchObject({
-                    monthString: "December-2020",
-                    startDateDayIndex: 2,
-                    monthClass: " month-hidden last-available-month",
-                });
-
-                wrapper.unmount();
-            });
-
-            test("expect that if there's a pre-selected date that it will scroll to it", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "custom",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-                const modifiedConfig = { ...mockValuesForSetDate01.config };
-                modifiedConfig.preSelectedDate = "2023-12-25";
-                wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-
-                // Act
-                await wrapper.vm.setCalendarData(modifiedConfig);
-                await wrapper.vm.$nextTick();
-
-                // Assert
-                expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023");
-
-                wrapper.unmount();
-            });
-
-            test("expect that if there's a pre-selected date within the last month available then the View More Dates button will be hidden", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "custom",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-                const modifiedConfig = { ...mockValuesForSetDate01.config };
-                modifiedConfig.preSelectedDate = "2024-06-11";
-                wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-
-                // Act
-                await wrapper.vm.setCalendarData(modifiedConfig);
-                await wrapper.vm.$nextTick();
-
-                // Assert
-                expect(wrapper.vm.disableViewMoreDatesButton).toBe(true);
-
-                wrapper.unmount();
-            });
-
-            test("expect that this.months are reversed if direction is past", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "past",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-                const modifiedConfig = { ...mockValuesForSetDate01.config };
-                modifiedConfig.calendarViewDirection = "past";
-
-                // Act
-                await wrapper.vm.setCalendarData(modifiedConfig);
-
-                // Assert
-                expect(wrapper.vm.months.length).toBe(37);
-                expect(wrapper.vm.months[0]).toMatchObject({
-                    monthString: "December-2020",
-                    startDateDayIndex: 2,
-                    monthClass: " month-hidden last-available-month",
-                });
-
-                wrapper.unmount();
-            });
-
-            test("expect that if there's a pre-selected date that it will scroll to it", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "custom",
-                        todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    },
-                });
-                const modifiedConfig = { ...mockValuesForSetDate01.config };
-                modifiedConfig.preSelectedDate = "2023-12-25";
-                wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-
-                // Act
-                await wrapper.vm.setCalendarData(modifiedConfig);
-                await wrapper.vm.$nextTick();
-
-                // Assert
-                expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023");
-
-                wrapper.unmount();
-            });
-        });
-
-        describe("when getInitialViewWeeks is run...", () => {
-            test("expect that 5 weeks will be returned when no preselected date", () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                const todayString = "2023-02-01";
-
-                // Act
-                const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5);
-
-                // Assert
-                expect(testResult.length).toBe(5);
-
-                wrapper.unmount();
-            });
-
-            test("expect that today will be in the start/end range of dates of the first week when no preselected date", () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                const todayString = "2023-02-01";
-
-                // Act
-                const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5);
-
-                // Assert
-                expect(
-                    testResult[0].weekStartDate <= todayString &&
-                        todayString <= testResult[0].weekEndDate
-                ).toBe(true);
-
-                wrapper.unmount();
-            });
-
-            test("expect that single weeks that span 2 months will be split into separate shorter 'week' spans", () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                const todayString = "2023-02-15";
-
-                // Act
-                const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5);
-
-                // Assert
-                expect(testResult.length).toBe(5);
-                expect(testResult[0]).toMatchObject({
-                    weekStartDate: "2023-02-12",
-                });
-                expect(testResult[testResult.length - 1]).toMatchObject({
-                    weekEndDate: "2023-03-11",
-                });
-
-                wrapper.unmount();
-            });
-
-            test("expect that if today is 7/31/23 and there's a preselected date of 10/1/23 that there will be 14 initial weeks returned", () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                const mockPreSelectedDate = "2023-10-01";
-
-                // Act
-                const testResult = wrapper.vm.getInitialViewWeeks(
-                    "2023-07-31",
-                    5,
-                    mockPreSelectedDate
-                );
-
-                // Assert
-                expect(testResult.length).toBe(14);
-
-                wrapper.unmount();
-            });
-
-            test("expect that if there's a preselected date that the last week end date will be the end of the month of the preselected date", () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                const mockPreSelectedDate = "2023-10-01";
-
-                // Act
-                const testResult = wrapper.vm.getInitialViewWeeks(
-                    "2023-07-31",
-                    5,
-                    mockPreSelectedDate
-                );
-
-                // Assert
-                expect(testResult[testResult.length - 1]).toMatchObject({
-                    weekEndDate: "2023-10-31",
-                });
-
-                wrapper.unmount();
-            });
-        });
-
-        describe("when there's a pre-selected date...", () => {
-            test("and loadInitialData runs, expect hideSomeDaysForInitialView and hideSecondMonth to be false", async () => {
-                // Arrange
-                // uses "2023-12-01" which would set both hideSomeDaysForInitialView and hideSecondMonth to true, unless there was a pre-selected date
-                const overrideDate = mockValuesForSetDate01.overrideDate;
-                const mockMonthEnd = mockValuesForSetDate01.monthEnd;
-                const mockInitialViewWeeks = mockValuesForSetDate01.initialViewWeeks;
-                const { wrapper } = setupMocks({
-                    propsData: {
-                        selectableDatesSetting: "custom",
-                        todayOverrideDateString: overrideDate,
-                    },
-                });
-
-                // Act
-                const localThis = {
-                    todayString: null,
-                    todayOverrideDateString: overrideDate,
-                    getMonthEnd: () => mockMonthEnd,
-                    getInitialViewWeeks: () => mockInitialViewWeeks,
-                };
-                const testResult = await datePicker.methods.loadInitialData.call(localThis, {
-                    selectableDatesSetting: "custom",
-                    initialViewRowsToShow: 5,
-                    getSelectableDatesCallback: mockPromiseResolve,
-                    preSelectedDate: "2024-01-01",
-                    todayOverrideDateString: overrideDate,
-                });
-
-                // Assert
-                expect(testResult).toMatchObject({
-                    hideSomeDaysForInitialView: false,
-                    hideSecondMonth: false,
-                });
-
-                wrapper.unmount();
-            });
-        });
-    });
-
-    describe("showAnotherMonth method...", () => {
-        test("expect that when hideSomeDaysForInitialView is true that it scrolls to correct month", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                },
-            });
-            wrapper.vm.months = mockValuesForSetDate01.monthsData;
-            wrapper.vm.updateSelectableDates = jest.fn().mockImplementation();
-            wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-            wrapper.vm.hideSomeDaysForInitialView = true;
-
-            // Act
-            await wrapper.vm.showAnotherMonth();
-
-            // // Assert
-            // expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith(
-            //     "2023-12-31",
-            //     "2023-12-31"
-            // );
-            // expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023");
-
-            // wrapper.unmount();
-        });
-
-        test("expect that when hideSomeDaysForInitialView is false and direction is FUTURE that it scrolls to correct month", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                },
-            });
-            wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original
-            wrapper.vm.updateSelectableDates = jest.fn().mockImplementation();
-            wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-            wrapper.vm.hideSomeDaysForInitialView = false;
-
-            // Act
-            await wrapper.vm.showAnotherMonth();
-
-            // Assert
-            expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith(
-                "2024-01-01",
-                "2024-01-31"
-            );
-            expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("January-2024");
-
-            wrapper.unmount();
-        });
-
-        test("expect that when hideSomeDaysForInitialView is false and direction is PAST that it scrolls to correct month", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "past",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                },
-            });
-            // Force correct state for this test. // TODO - figure out why original array is getting mutated here, making next line necessary
-            mockValuesForSetDate01.monthsData[1].monthClass = " month-hidden";
-
-            wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original
-            wrapper.vm.updateSelectableDates = jest.fn().mockImplementation();
-            wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-            wrapper.vm.hideSomeDaysForInitialView = false;
-
-            // Act
-            await wrapper.vm.showAnotherMonth();
-
-            // Assert
-            expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith(
-                "2024-01-01",
-                "2024-01-31"
-            );
-            expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("January-2024");
-
-            wrapper.unmount();
-        });
-
-        test("expect that when the month to scroll to is the last available month that it will disable the View More Dates button", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                },
-            });
-            wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original
-            wrapper.vm.updateSelectableDates = jest.fn().mockImplementation();
-            wrapper.vm.scrollToElement = jest.fn().mockImplementation();
-            wrapper.vm.disableViewMoreDatesButton = false;
-            mockValuesForSetDate01.monthsData[1].monthClass = " month-hidden last-available-month"; // Force correct state for this test.
-
-            // Act
-            await wrapper.vm.showAnotherMonth();
-
-            // Assert
-            expect(wrapper.vm.disableViewMoreDatesButton).toBe(true);
-
-            wrapper.unmount();
-        });
-    });
-
-    describe("updateSelectableDates method...", () => {
-        test("expect that new dates from callback are added to selectableDatesInshop", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    getMoreDatesCallback: jest.fn(() => mockCallbackResponse),
-                },
-            });
-            wrapper.vm.selectableDatesInshop = [
-                {
-                    date: "2023-12-30",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20453*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-            ];
-            wrapper.vm.months = mockValuesForSetDate01.monthsData;
-
-            // Act
-            await wrapper.vm.updateSelectableDates("2024-01-01", "2024-01-05");
-
-            const isFoundInArray = wrapper.vm.selectableDatesInshop.find((obj) => {
-                return obj.date === "2024-01-02";
-            });
-
-            // Assert
-            expect(isFoundInArray).not.toBeUndefined();
-
-            wrapper.unmount();
-        });
-
-        test("expect that isAvailable flag on selectable dates is set to true", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                    getMoreDatesCallback: jest.fn(() => mockCallbackResponse),
-                },
-            });
-            wrapper.vm.selectableDatesInshop = [
-                {
-                    date: "2023-12-30",
-                    timeSlots: [
-                        {
-                            id: "06747-01820-S-B*20453*7 AM",
-                            startTime: "07:00",
-                            endTime: "08:00",
-                            offerPremium: false,
-                        },
-                    ],
-                },
-            ];
-            wrapper.vm.months = mockValuesForSetDate01.monthsData;
-
-            // Act
-            await wrapper.vm.updateSelectableDates("2024-01-01", "2024-01-05");
-            const targetMonth = wrapper.vm.months.find((month) => {
-                return month.monthString === "January-2024";
-            });
-
-            console.log("TEST   targetMonth: ", targetMonth);
-
-            const dateInArray = targetMonth.datesInshop.find((date) => {
-                return date.inputValue === "2024-01-02";
-            });
-
-            // Assert
-            expect(dateInArray).toMatchObject({
-                isAvailable: true,
-            });
-
-            wrapper.unmount();
-        });
-    });
-
-    describe("scrollToElement method...", () => {
-        test("expect that new dates from callback are added to selectableDatesInshop", () => {
-            // Arrange
-            const container = document.createElement("div");
-            container.classList.add("page-container-grouped-styles");
-            const targetElement = document.createElement("div");
-            targetElement.setAttribute("id", "January-2024");
-            container.appendChild(targetElement);
-            document.body.appendChild(container);
-            window.requestAnimationFrame = jest.fn();
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: mockValuesForSetDate01.overrideDate,
-                },
-            });
-
-            // Act
-            wrapper.vm.scrollToElement("January-2024");
-
-            // Assert
-            expect(window.requestAnimationFrame).toBeCalled();
-
-            wrapper.unmount();
-        });
-    });
-
-    describe("If user selects a date...", () => {
-        test("expect it will emit update:modelValue", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-            const dateToSelect = "2023-07-07";
-
-            // Act
-            wrapper.setValue({ selectedDate: dateToSelect });
-
-            // Assert
-            expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
-                { selectedDate: "2023-07-07" },
-            ]);
-
-            wrapper.unmount();
-        });
-
-        test("expect watched modelValue will be triggered", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-            const dateToSelect = "2023-07-07";
-            wrapper.vm.resetField = jest.fn();
-
-            // Act
-            wrapper.vm.$options.watch.modelValue.call(wrapper.vm, dateToSelect);
-
-            // Assert
-            expect(wrapper.vm.resetField).toBeCalled();
-            expect(wrapper.vm.resetField).toBeCalledWith({ value: dateToSelect });
-
-            wrapper.unmount();
-        });
-    });
-
-    describe("If fireDateSelectedEvent runs... ", () => {
-        test("expect it will emit date-clicked on mouse clicks ", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-
-            // Act
-            wrapper.vm.fireDateSelectedEvent({});
-            const flattenedEmitted = JSON.stringify(wrapper.emitted());
-
-            // Assert
-            expect(wrapper.emitted()).toHaveProperty("date-clicked");
-            expect(flattenedEmitted.includes("date-clicked")).toBeTruthy;
-
-            wrapper.unmount();
-        });
-
-        test("expect it will NOT emit date-clicked on keyboard arrow navigation ", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                },
-            });
-
-            // Act
-            wrapper.vm.fireDateSelectedEvent({ screenX: 0, screenY: 0 });
-            const flattenedEmitted = JSON.stringify(wrapper.emitted());
-
-            // Assert
-            expect(wrapper.emitted()).not.toHaveProperty("date-clicked");
-            expect(flattenedEmitted.includes("date-clicked")).toBe(false);
-
-            wrapper.unmount();
-        });
-    });
-
-    describe("If user triggers a validation error...", () => {
-        test("expect that watched errorMessage will be triggered", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                propsData: {
-                    selectableDatesSetting: "custom",
-                    todayOverrideDateString: "2023-07-05",
-                },
-            });
-            wrapper.vm.scrollToElement = jest.fn();
-
-            // Act
-            wrapper.vm.$options.watch.errorMessage.call(wrapper.vm, "anything");
-
-            // Assert
-            expect(wrapper.vm.scrollToElement).toBeCalled();
-            expect(wrapper.vm.scrollToElement).toBeCalledWith("date-of-month-error");
-
-            wrapper.unmount();
-        });
-    });
-});
-
-function setupMocks(mountOptionsMockData = {}) {
-    store.getters = {
-        order: {
-            serviceLocation: { appointmentType: "Inshop", provider: { providerNumber: "12345" } },
-        },
-        lineItems: { supportingItems: [] },
-    };
-    const initialMountOptionsMockData = {
-        store: {
-            getters: store.getters,
-        },
-    };
-    const mountOptions = getMountOptions(
-        Object.assign(initialMountOptionsMockData, mountOptionsMockData)
-    );
-
-    const wrapper = shallowMount(datePicker, mountOptions);
-
-    return { wrapper };
-}
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index a4eb232e0..59297ae05 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,17 +1,18 @@
 <template>
     <div
         class="date-picker text-center"
-        :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
+        :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass} ${loadingStatus === 'reinitial' ? 'loading-reinitial' : ''}`">
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
             <div
-                v-for="month in months"
+                v-for="(month, i) in months"
                 :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
                 :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                class="calendar-grid-container"
+                class="calendar-grid-container month"
                 :class="[
                     hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
                     month.monthClass,
+                    i === 0 ? 'first-month-shown' : '',
                 ]">
                 <div class="month-year body-small d-flex align-items-center">
                     {{ month.monthLabel }} {{ month.yearNum?.toString() }}
@@ -114,7 +115,8 @@
                 </div>
             </div>
             <loader
-                :class="[!isLoading ? 'date-picker-hidden' : '']"
+                class="date-picker-loader"
+                :class="[loadingStatus !== 'none' ? 'show-loader' : '']"
                 loaderColor="blue"
                 loaderPosition="center" />
             <div class="row form-test-error" id="date-of-month-error">
@@ -125,7 +127,7 @@
                 type="button"
                 class="btn btn-link view-more-dates"
                 id="viewMoreDates"
-                :disabled="isLoading"
+                :disabled="loadingStatus !== 'none'"
                 @click="showAnotherMonth">
                 View more dates
             </button>
@@ -160,7 +162,6 @@ export default {
     name: "datePicker",
     data() {
         return {
-            isLoading: true,
             months: null,
             disableViewMoreDatesButton: false,
             hideSomeDaysForInitialView: null,
@@ -169,7 +170,10 @@ export default {
         };
     },
     props: {
-        customComponentId: String,
+        customComponentId: {
+            type: String,
+            default: "",
+        },
         selectableDatesSetting: {
             type: String,
             validator(value) {
@@ -200,6 +204,10 @@ export default {
         pricingByDayUpcharge: Number,
         isPricingByDayExperiment: Boolean,
         isMobileSelected: Boolean,
+        loadingStatus: {
+            type: String,
+            default: "none",
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -324,9 +332,9 @@ export default {
                 let preSelectedDateMonthEnd = this.getMonthEnd(
                     preSelectedDate.replace("-mobile", "")
                 );
-                let weekIncludesPreSelectedMonthEnd = false;
+                let monthEndsByThisWeek = false;
                 let i = 0;
-                while (!weekIncludesPreSelectedMonthEnd) {
+                while (!monthEndsByThisWeek && i < 52) {
                     if (i > 0) {
                         weekStartDate = this.getNextWeekSunday(weekEndDate);
                         weekEndDate = this.getWeekEndDate(weekStartDate);
@@ -338,7 +346,12 @@ export default {
                             preSelectedDateMonthEnd === weekEndDate
                         ) {
                             weekEndDate = preSelectedDateMonthEnd;
-                            weekIncludesPreSelectedMonthEnd = true;
+                            monthEndsByThisWeek = true;
+                        } else if (preSelectedDateMonthEnd < weekEndDate) {
+                            // Additional case: if month ends before this week (but not necessarily during it),
+                            // still cut the loop here, but don't truncate the week.
+
+                            monthEndsByThisWeek = true;
                         }
                     }
                     weeks.push({
@@ -489,7 +502,6 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
-            this.isLoading = true;
             this.selectableDatesInshop = [];
             this.selectableDatesMobile = [];
             this.months = [];
@@ -541,7 +553,6 @@ export default {
                 // }
             }
             this.months = months;
-            this.isLoading = false;
 
             if (config.preSelectedDate) {
                 this.$nextTick(() => {
@@ -729,7 +740,6 @@ export default {
         },
         async showAnotherMonth() {
             if (!this.months) return;
-            this.isLoading = true;
             let monthToShow;
             let monthStartDate;
 
@@ -774,7 +784,6 @@ export default {
                     monthToShowDates[monthToShowDates.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);
@@ -787,7 +796,6 @@ export default {
         },
         async updateSelectableDates(monthStart, monthEnd) {
             const moreSelectableDates = await this.getMoreDatesCallback(monthStart, monthEnd);
-
             moreSelectableDates.inshopTimeSlotsData.days.forEach((selectableDate) => {
                 const index = this.selectableDatesInshop.findIndex(
                     (dateObj) => dateObj.date === selectableDate.date
@@ -846,12 +854,6 @@ export default {
         },
     },
     watch: {
-        isLoading(newValue) {
-            // if done loading dates, then set to first available date
-            if (newValue === false && this.firstAvailableSelectableDate) {
-                this.selectedDate = this.firstAvailableSelectableDate;
-            }
-        },
         modelValue(newValue) {
             this.resetField({
                 value: newValue,
@@ -872,9 +874,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.date-picker-hidden {
+.date-picker-loader {
     opacity: 0;
     max-height: 0;
+
+    &.show-loader {
+        opacity: 1;
+        max-height: none;
+    }
 }
 .date-picker {
     position: relative;
@@ -903,12 +910,12 @@ export default {
             height: 1.5rem;
         }
     }
-    .calendar-grid-container {
+    .month {
         margin: 0 auto 1rem auto;
         position: relative;
         transition:
-            height ease 2s,
-            opacity ease 2s;
+            height ease 1s,
+            max-height ease 1s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
@@ -1157,7 +1164,7 @@ export default {
     }
 
     .past {
-        .calendar-grid-container {
+        .month {
             .month-year {
                 grid-area: 1 / 1 / 2 / 6;
             }
@@ -1214,7 +1221,7 @@ export default {
     }
     // new calendar styling overrides
     &.calendar-2025 {
-        .calendar-grid-container .grid-item {
+        .month .grid-item {
             margin: 0 0 0.15rem 0;
         }
         .month-year {
@@ -1316,6 +1323,33 @@ export default {
                 }
             }
         }
+
+        &.loading-reinitial {
+            .month {
+                opacity: 0;
+                max-height: 0;
+            }
+            .month.first-month-shown {
+                opacity: 1;
+                max-height: none;
+
+                .grid-item.radio-wrapper.selectable-day {
+                    input[type="radio"]:checked + label,
+                    label {
+                        background-color: $white;
+                        border: none;
+                        color: initial;
+                        cursor: default;
+                        &:hover {
+                            border: none;
+                        }
+                        span {
+                            font-family: UrbanistRegular;
+                        }
+                    }
+                }
+            }
+        }
     }
     :deep(.timeslots .button-inner-wrapper) {
         display: flex;
diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
index da11702e3..85d9d891d 100644
--- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
@@ -41,9 +41,6 @@ export default {
     beforeUnmount() {
         // Clean up event listeners and observers
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
-        if (this._salesforceChatOpenObserver) {
-            this._salesforceChatOpenObserver.disconnect();
-        }
     },
     methods: {
         initializeSalesforceWebchat() {
@@ -133,6 +130,9 @@ export default {
 </script>
 
 <style lang="scss">
+.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
+    z-index: 9999 !important;
+}
 .dockableContainer {
     &.showDockableContainer {
         color: $gray-600;
diff --git a/src/digital-components/sierra-webchat/sierra-webchat.spec.js b/src/digital-components/sierra-webchat/sierra-webchat.spec.js
index 964a4f52e..2fd3bd3a3 100644
--- a/src/digital-components/sierra-webchat/sierra-webchat.spec.js
+++ b/src/digital-components/sierra-webchat/sierra-webchat.spec.js
@@ -59,14 +59,6 @@ describe("sierraWebchat.vue", () => {
         expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
     });
 
-    it("dispatches sierra-chat-closed on handleSierraOnClose", () => {
-        const eventSpy = jest.spyOn(window, "dispatchEvent");
-        wrapper.vm.createSierraConfig().onClose();
-        expect(eventSpy).toHaveBeenCalledWith(
-            expect.objectContaining({ type: "sierra-chat-closed" })
-        );
-    });
-
     it("dispatches sierra-chat-transfer on handleSierraOnTransfer", () => {
         const eventSpy = jest.spyOn(window, "dispatchEvent");
         const transfer = {
diff --git a/src/digital-components/sierra-webchat/sierra-webchat.vue b/src/digital-components/sierra-webchat/sierra-webchat.vue
index 162367a62..0b4381411 100644
--- a/src/digital-components/sierra-webchat/sierra-webchat.vue
+++ b/src/digital-components/sierra-webchat/sierra-webchat.vue
@@ -7,10 +7,20 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import store from "@/store";
 import { routeData } from "@/router/constants/routes";
 import { deepClone } from "@/helpers/object-helper";
+import { webchatHelper } from "@/helpers/webchat-helper";
 
 export default {
     name: "sierraWebchat",
     mixins: [analyticsMixin],
+    data() {
+        return {
+            transferInProgress: false,
+        };
+    },
+    setup() {
+        const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
+        return { webchatGlobalNonpersistedState, launchWebchat };
+    },
     methods: {
         openSierraChatModal() {
             const sierra = window.sierraChat || window.sierra || window.SierraChat;
@@ -35,11 +45,18 @@ export default {
                 display: "corner",
                 onLoad: () => this.openSierraChatModal(),
                 onOpen: () => {},
-                onClose: () => window.dispatchEvent(new CustomEvent("sierra-chat-closed")),
-                onTransfer: (transfer) =>
+                onClose: () => {
+                    if (!this.transferInProgress) {
+                        this.webchatGlobalNonpersistedState.showWebchatButton = true;
+                        this.transferInProgress = false;
+                    }
+                },
+                onTransfer: (transfer) => {
+                    this.transferInProgress = true;
                     window.dispatchEvent(
                         new CustomEvent("sierra-chat-transfer", { detail: transfer })
-                    ),
+                    );
+                },
             };
         },
         getSierraContext() {
@@ -138,10 +155,7 @@ export default {
             }
             // Pass data to Salesforce chat if available
             const transfer = event.detail;
-            if (
-                window.embeddedservice_bootstrap &&
-                typeof window.embeddedservice_bootstrap.bootstrapEmbeddedService === "function"
-            ) {
+            if (window.embeddedservice_bootstrap && window.embeddedservice_bootstrap.prechatAPI) {
                 if (
                     transfer &&
                     transfer.data &&
@@ -155,37 +169,16 @@ export default {
                         LastName: transfer.data.last_name,
                         Email: transfer.data.email,
                     });
-                    if (
-                        window.embeddedservice_bootstrap.utilAPI &&
-                        typeof window.embeddedservice_bootstrap.utilAPI.launchChat === "function"
-                    ) {
-                        window.embeddedservice_bootstrap.utilAPI.launchChat();
-                        return;
-                    }
                 }
-                window.embeddedservice_bootstrap.utilAPI.launchChat();
+                this.webchatGlobalNonpersistedState.shouldLaunchSierra = false;
+                this.launchWebchat();
             }
         };
         window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);
-
-        // Notify funnel-header about Sierra chat open/close state
-        this._sierraChatContainerObserver = new MutationObserver(() => {
-            const isOpen = !!document.querySelector("[data-sierra-chat-container]");
-            window.dispatchEvent(
-                new CustomEvent("sierra-chat-visibility", { detail: { open: isOpen } })
-            );
-        });
-        this._sierraChatContainerObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
     },
     beforeUnmount() {
         window.removeEventListener("launch-sierra-webchat", this.triggerSierraChat);
         window.removeEventListener("sierra-chat-transfer", this._handleSierraTransfer);
-        if (this._sierraChatContainerObserver) {
-            this._sierraChatContainerObserver.disconnect();
-        }
     },
 };
 </script>
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index 00df5db87..7bfa3eef6 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -79,16 +79,7 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
         shouldShowWebchatButton() {
-            // Hide the chat icon if Sierra chat is open
-            if (this.sierraChatOpen) {
-                return false;
-            }
-            // Show if either Sierra is enabled or Salesforce button is available and not hidden by page
-            return (
-                (this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
-                    this.webchatGlobalNonpersistedState.showWebchatButton) &&
-                !this.shouldHideWebchatButtonOnPage
-            );
+            return this.webchatGlobalNonpersistedState.showWebchatButton;
         },
     },
     methods: {
@@ -116,10 +107,6 @@ export default {
         webchatClicked(event) {
             event.preventDefault();
             this.launchWebchat();
-            // Only set sierraChatOpen if Sierra experiment is active
-            if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
-                this.sierraChatOpen = true;
-            }
         },
         syncSierraExperimentFlag() {
             const experiments = store.getters.applicationUser.experiments;
@@ -159,11 +146,6 @@ export default {
             unknownAlertEvent.displayAlert = true;
             this.globalAlertMessages.push(unknownAlertEvent);
         }
-        // Listen for Sierra chat open/close events from sierra-webchat
-        this._handleSierraChatVisibility = (event) => {
-            this.sierraChatOpen = !!(event.detail && event.detail.open);
-        };
-        window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
 
         // Add scroll listener for header shadow effect
         this._handleScroll = () => {
@@ -172,8 +154,6 @@ export default {
         window.addEventListener("scroll", this._handleScroll);
     },
     beforeUnmount() {
-        window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
-        window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
         window.removeEventListener("scroll", this._handleScroll);
     },
diff --git a/src/helpers/webchat-helper.js b/src/helpers/webchat-helper.js
index e5254d08d..1317f3341 100644
--- a/src/helpers/webchat-helper.js
+++ b/src/helpers/webchat-helper.js
@@ -8,6 +8,7 @@ const webchatGlobalNonpersistedState = reactive({
 
 export const webchatHelper = () => {
     function launchWebchat() {
+        webchatGlobalNonpersistedState.showWebchatButton = false;
         if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
             window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat
         } else {
diff --git a/src/layouts/payment-adyen/payment-adyen.vue b/src/layouts/payment-adyen/payment-adyen.vue
index 34a232e2c..cddb2189c 100644
--- a/src/layouts/payment-adyen/payment-adyen.vue
+++ b/src/layouts/payment-adyen/payment-adyen.vue
@@ -246,7 +246,7 @@ export default {
             console.log(`Price = ${this.amountDue}`);
             console.log(`Adyen Price = ${this.adyenPriceTotal}`);
 
-            const requestBody = this.adyenInitRequestInfo;
+            const requestBody = this.getAdyenInitRequestInfo();
 
             console.log(`Calling with:`);
             console.log(requestBody);
@@ -294,6 +294,15 @@ export default {
 
             console.log(checkout);
 
+            const expiryTime = new Date(checkout.options.expiresAt);
+            const expiryInterval = expiryTime.getTime() - new Date().getTime();
+
+            const handleTimeout = () => {
+                this.resetAdyenDropin();
+            };
+
+            const timeout = setTimeout(handleTimeout, expiryInterval);
+
             const configuration = {
                 paymentMethodsConfiguration: {
                     ideal: {
@@ -505,14 +514,26 @@ export default {
                 return;
             }
         },
-    },
 
-    computed: {
-        piaType() {
-            return this.$store.getters.order.payment.piaType;
+        async resetAdyenDropin() {
+            this?.dropinComponent?.unmount();
+            await this.initializeAdyen();
         },
 
-        adyenInitRequestInfo() {
+        // Now a Method so it is always freshly called and not cached.
+        getIdempotencyKey() {
+            const currentDateTime = new Date();
+            const currentHour = currentDateTime.getUTCHours();
+            const currentDate = currentDateTime.getUTCDate();
+            const id = this?.$store?.getters?.order?.referralCorrelationId;
+            const system = this.sourceSystem;
+            const total = this.adyenPriceTotal;
+
+            return `${id}-${system}-${currentDate}-${currentHour}-${total}`;
+        },
+
+        // Now a Method so it is always freshly called and not cached.
+        getAdyenInitRequestInfo() {
             return {
                 sourceSystem: this.sourceSystem,
                 referralSequenceNumber: this.$store.getters.order.referralSequenceNumber,
@@ -529,9 +550,15 @@ export default {
                 IP: "127.0.0.1", // TODO
                 firstName: this.$store.getters.order.customer.firstName,
                 lastName: this.$store.getters.order.customer.lastName,
-                idempotencyKey: this.idempotencyKey,
+                idempotencyKey: this.getIdempotencyKey(),
             };
         },
+    },
+
+    computed: {
+        piaType() {
+            return this.$store.getters.order.payment.piaType;
+        },
 
         workOrderNumberLastSixDigits() {
             const workOrderNumber = this.$store.getters.order.workOrderNumber ?? "";
@@ -588,10 +615,6 @@ export default {
             };
         },
 
-        idempotencyKey() {
-            return `${this.$store.getters.order.referralCorrelationId}-${this.sourceSystem}`;
-        },
-
         sourceSystem() {
             return "FMG-2.0";
         },
@@ -601,7 +624,7 @@ export default {
         },
 
         adyenPriceTotal() {
-            return this.amountDue * 100;
+            return Math.round(this.amountDue * 100);
         },
 
         // Cart info
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index b8e481174..6c547f3d2 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -745,10 +745,16 @@ export default {
             }
         },
         updatePaymentMethod(paymentMethod) {
-            // if the payment method is not set yet, then set it based on what HOP sends us
+            debugLog(
+                `updatePaymentMethod(${paymentMethod}) and existing store.getters.order.payment.piaType = ${store?.getters?.order?.payment?.piaType}`
+            );
+
+            // if the payment method is not set yet, then set it based on what HOP sends
+            //  or if its not already set to AfterPay, always set it based on what HOP sends
             if (
                 store.getters.order.payment.piaType == paymentMethods.PAY_NOW ||
-                store.getters.order.payment.piaType == paymentMethods.NONE
+                store.getters.order.payment.piaType == paymentMethods.NONE ||
+                store.getters.order.payment.piaType != paymentMethods.AFTERPAY
             ) {
                 console.log(new Date() + " UPDATE PaymentMethod from HOP:" + paymentMethod);
                 this.dispatchStoreAction(
diff --git a/src/layouts/policy-info/policy-info.spec.js b/src/layouts/policy-info/policy-info.spec.js
new file mode 100644
index 000000000..b3251154a
--- /dev/null
+++ b/src/layouts/policy-info/policy-info.spec.js
@@ -0,0 +1,70 @@
+import policyInfo from "@/layouts/policy-info/policy-info.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("policy-info.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-info", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyInfo, mountOptions);
+
+    return { wrapper };
+}
diff --git a/src/layouts/policy-info/policy-info.vue b/src/layouts/policy-info/policy-info.vue
new file mode 100644
index 000000000..106a28d70
--- /dev/null
+++ b/src/layouts/policy-info/policy-info.vue
@@ -0,0 +1,76 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="container-fluid">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+            ... Page code goes here.
+          -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "policy-info",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+    },
+    // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
+    async beforeRouteEnter(to, from, next) {
+        const pageName = to.name;
+        const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        async backButtonAction() {
+            // Stub, for navigating back via nav-bar.
+        },
+        async forwardButtonAction() {
+            // Stub, for navigating forward via nav-bar
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>
diff --git a/src/layouts/schedule/helpers/schedule-helper.js b/src/layouts/schedule/helpers/schedule-helper.js
index 85df8aa43..4952ce2a9 100644
--- a/src/layouts/schedule/helpers/schedule-helper.js
+++ b/src/layouts/schedule/helpers/schedule-helper.js
@@ -72,10 +72,10 @@ export function isDropOffRouteCode(routeCode) {
     );
 }
 
-export function getTodayDate(routeCode) {
+export function getTodayDate() {
     return new Date();
 }
 
-export function getTodayDateString(routeCode) {
+export function getTodayDateString() {
     return convertDateToDateString(getTodayDate());
 }
diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js
new file mode 100644
index 000000000..7d5cdcec1
--- /dev/null
+++ b/src/layouts/schedule/schedule.spec.js
@@ -0,0 +1,183 @@
+// Components
+import schedule from "@/layouts/schedule/schedule.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { routeData } from "@/router/constants/routes";
+import store from "@/store";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+
+const storeMocked = {
+    getters: {
+        payment: { isInsurance: false },
+        order: {
+            payment: { isInsurance: false, insuranceCoverage: { isVerified: false } },
+            referralNumber: "",
+            serviceLocation: {
+                address: "",
+                address2: "",
+                city: "",
+                state: "",
+                zipCode: "00000",
+                zipCodeCtu: "000",
+                appointmentType: null,
+                provider: {},
+                isVehicleProtected: false,
+            },
+            schedule: {
+                date: "",
+                routeCode: "",
+                startTime: "",
+                endTime: "",
+                jobMinMinutes: null,
+                jobMaxMinutes: null,
+            },
+            policy: {
+                isItac: false,
+                isNoComp: false,
+            },
+            damage: { isRepair: false },
+            lineItems: { glassParts: [] },
+        },
+        vehicle: {
+            cardId: "",
+        },
+        lineItems: {
+            supportingItems: [],
+        },
+        applicationUser: {
+            experiments: [],
+        },
+        isMobileAppointment: false,
+    },
+};
+
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+    navigateToHeritageFunnel: jest.fn(),
+}));
+
+describe("schedule.vue", () => {
+    describe("navigation", () => {
+        test("backButtonAction => non-insurance: navigateWithoutSaving called", () => {
+            // Arrange
+            const { wrapper, mocks } = setupMocks();
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalledWith(
+                mocks.navigationScenarios.CLICKED_BACK,
+                routeData.SCHEDULE.name
+            );
+        });
+
+        test("backButtonAction => insurance verified: navigateToHeritageFunnel called", () => {
+            // Arrange
+            store.getters.order.payment.isInsurance = true;
+            store.getters.order.payment.insuranceCoverage = { isVerified: true };
+            store.getters.order.referralNumber = "";
+            const { wrapper } = setupMocks();
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(navigateToHeritageFunnel).toHaveBeenCalledWith({
+                shouldSaveSession: false,
+                pageNameToLog: "schedule",
+                navType: "back",
+            });
+        });
+    });
+
+    describe("computed: isForwardActionDisabled", () => {
+        test("should be true when routeCode missing or appointmentType not set", async () => {
+            const { wrapper } = setupMocks();
+            await wrapper.setData({
+                selectedTimeSlotInfo: { timeSlot: { routeCode: null } },
+                appointmentType: null,
+            });
+            expect(wrapper.vm.isForwardActionDisabled).toBe(true);
+        });
+
+        test("should be false when routeCode present and appointmentType set", async () => {
+            const { wrapper } = setupMocks();
+            await wrapper.setData({
+                selectedTimeSlotInfo: { timeSlot: { routeCode: "RC123" } },
+                appointmentType: "SomeType",
+            });
+            expect(wrapper.vm.isForwardActionDisabled).toBe(false);
+        });
+    });
+
+    describe("computed: selectedRouteCodeData", () => {
+        test("should return null when routeCode not set", async () => {
+            const { wrapper } = setupMocks();
+            await wrapper.setData({
+                selectedTimeSlotInfo: { timeSlot: { routeCode: null } },
+            });
+            expect(wrapper.vm.selectedRouteCodeData).toBeNull();
+        });
+
+        test("should return routeCode and premium flag when set", async () => {
+            const { wrapper } = setupMocks();
+            await wrapper.setData({
+                selectedTimeSlotInfo: {
+                    timeSlot: { routeCode: "RC999" },
+                    isPremiumAppointment: true,
+                },
+            });
+            expect(wrapper.vm.selectedRouteCodeData).toEqual({
+                routeCode: "RC999",
+                isPremiumAppointment: true,
+            });
+        });
+    });
+
+    describe("forwardButtonAction (early exit path)", () => {
+        test("shows recal acknowledgement popup and does not navigate when required", async () => {
+            const { wrapper } = setupMocks();
+            // Force the recal-ack modal path
+            wrapper.vm.showRecalAcknowledgementModal = jest.fn(() => true);
+            await wrapper.setData({ isRecalAcknowledgedForScheduling: null });
+
+            await wrapper.vm.forwardButtonAction();
+
+            expect(wrapper.vm.showRecalAcknowledgementPopup).toBe(true);
+            expect(wrapper.vm.$router.navigateWithSaving).not.toHaveBeenCalled();
+        });
+    });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+    const route = { name: "schedule" };
+    const defaultMountOptions = {
+        route: route,
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+        store: { ...storeMocked },
+    };
+    const mockBaseMixin = {
+        methods: {
+            getTierOnePackagePrice: jest.fn(),
+            filterOutFees: jest.fn(),
+            getCmsContent: jest.fn(),
+        },
+    };
+    const baseMountOptions = getMountOptions({
+        ...defaultMountOptions,
+        ...mountOptionsMockData,
+    });
+
+    baseMountOptions.global.mixins = [mockBaseMixin];
+    baseMountOptions.global.mocks.pageName = route.name;
+    const wrapper = shallowMount(schedule, baseMountOptions);
+    wrapper.getCmsContent = jest.fn();
+
+    return { wrapper, mocks: baseMountOptions.global?.mocks || {} };
+}
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 30bc21433..e20c025fb 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -98,15 +98,11 @@
                     linkWidgetName="ServiceZipLinkWidget"
                     modalWidgetName="ServiceZipModalWidget" />
             </div>
-            <div
-                class="row your-shop-location"
-                v-if="appointmentType && appointmentType !== appointmentTypeStrings.MOBILE">
+            <div class="row your-shop-location" v-if="showShopLocationComponent">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <div>
                         <shopLocation
-                            v-if="
-                                appointmentType && appointmentType !== appointmentTypeStrings.MOBILE
-                            "
+                            v-if="showShopLocationComponent"
                             :selectedShop="selectedShopAnswer"
                             :selectedProviderNumberFromParent="selectedProvider?.providerNumber"
                             :shopProviderDataFromParent="shopProviderData"
@@ -153,7 +149,8 @@
                         :pricingByDayBasePrice="pricingByDayBasePrice"
                         :pricingByDayUpcharge="pricingByDayUpcharge"
                         :showPricingByDay="showPricingByDay"
-                        :isPricingByDayExperiment="isPricingByDayExperiment" />
+                        :isPricingByDayExperiment="isPricingByDayExperiment"
+                        :loadingStatus="calendarLoadingStatus" />
                     <timeSlotQuestion
                         ref="timeSlotModalQuestion"
                         v-if="showTimeSlotQuestion"
@@ -172,7 +169,8 @@
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                         :isSameDay="isSameDay"
                         :selectedRouteCodeData="selectedRouteCodeData"
-                        @waitListRequested="handleWaitListRequested" />
+                        @waitListRequested="handleWaitListRequested"
+                        :lazyLoadAmountToLoad="10" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -443,15 +441,14 @@ export default {
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             mobilePremiumAppointmentFee: null,
             waitListRequested: null,
-            displayWaitList: null,
             pricingByDayUpchargeLineItem: null,
             includePricingByDayUpcharge: null,
             isPricingByDayExperiment: null,
             pricingByDayBasePrice: null,
             pricingByDayUpcharge: null,
             showPricingByDay: null,
-            selectableDatesInshop: [],
-            selectableDatesMobile: [],
+            selectableDatesInshop: {},
+            selectableDatesMobile: {},
             preSelectedDate: null,
             streetAddress: this.getServiceAddressFromStore(),
             apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
@@ -484,6 +481,7 @@ export default {
                 experimentSettings.SHOW_MOBILE_FIRST_APPT,
                 "true"
             ),
+            calendarLoadingStatus: "none",
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -594,6 +592,8 @@ export default {
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
+            vm.showLoadingModal();
+            vm.calendarLoadingStatus = "initial";
             vm.setCmsContent(resultMap.cmsContent);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.mobilePremiumAppointmentFee = pricedPremiumFee;
@@ -614,6 +614,9 @@ export default {
             );
             vm.initializeDatePicker().then(() => {
                 vm.showMobileFirstModal();
+                vm.hideLoadingModal();
+                vm.calendarLoadingStatus = "none";
+                if (!vm.preSelectedDate) vm.setSelectedDateToFirstAvailable();
             });
         });
     },
@@ -630,6 +633,20 @@ export default {
                 this.handleZipCodeChange(newValue);
             },
         },
+        showShopLocationComponent() {
+            // If we get no inshop or mobile data, then show the shoplocation component so the user is not
+            // looking at a half blank screen with no way to try another zip/location.
+            if (
+                (this.selectableDatesInshop === undefined &&
+                    this.selectableDatesMobile === undefined) ||
+                (this.selectableDatesInshop?.days?.length === 0 &&
+                    this.selectableDatesMobile?.days?.length === 0) ||
+                (this.appointmentType && this.appointmentType !== AppointmentTypeStrings.MOBILE)
+            ) {
+                return true;
+            }
+            return false;
+        },
         isMobileSelected() {
             return (
                 this.appointmentType == AppointmentTypeStrings.MOBILE ||
@@ -885,6 +902,53 @@ export default {
                 ? this.$refs.mobileFirstModal?.getIsModalOpen()
                 : false;
         },
+        displayWaitList() {
+            if (!this.appointmentType) return false;
+            const firstMobileDateString =
+                Array.isArray(this.selectableDatesMobile.days) &&
+                this.selectableDatesMobile.days.length > 0
+                    ? this.selectableDatesMobile.days[0].date
+                    : null;
+            const firstInshopDateString =
+                Array.isArray(this.selectableDatesInshop.days) &&
+                this.selectableDatesInshop.days.length > 0
+                    ? this.selectableDatesInshop.days[0].date
+                    : null;
+            const dateString =
+                this.isMobileSelected && firstMobileDateString
+                    ? firstMobileDateString
+                    : firstInshopDateString;
+
+            if (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_WAITLIST,
+                    "true"
+                ) &&
+                dateString
+            ) {
+                const [year, month, day] = dateString.split("-").map(Number);
+                const targetDate = new Date(year, month - 1, day);
+                const currentDate = getTodayDate();
+                const futureDate = new Date(currentDate);
+                const experimentThresholdDays = experimentMixin.methods.hasSetting(
+                    experimentSettings.WAITLIST_THRESHOLD_DAYS
+                )
+                    ? parseInt(
+                          experimentMixin.methods.getSettingValue(
+                              experimentSettings.WAITLIST_THRESHOLD_DAYS
+                          )
+                      )
+                    : 0;
+                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
+
+                if (targetDate >= futureDate) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            return false;
+        },
         hasSelectableDatesLoaded() {
             if (this.isMobileSelected) {
                 return this.selectableDatesMobile?.days?.length > 0;
@@ -1153,9 +1217,10 @@ export default {
                 );
             }
         },
-        async onShopSelected(shopQuestionPopUpData) {
+        onShopSelected(shopQuestionPopUpData) {
             this.resetWaitlist();
             this.preSelectedDate = null;
+            this.calendarLoadingStatus = "reinitial";
             this.shopProviderData = shopQuestionPopUpData.shopProviderData;
             const oldProvider = this.selectedProvider;
             const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
@@ -1175,11 +1240,16 @@ export default {
                     this.updateSelectedProvider(selectedProvider);
                 }
             }
-            await this.initializeDatePicker();
-            this.setSelectedDateToFirstAvailable();
+            this.initializeDatePicker().then(() => {
+                this.showMobileFirstModal();
+                this.hideLoadingModal();
+                this.calendarLoadingStatus = "none";
+                this.setSelectedDateToFirstAvailable();
+            });
         },
         async getMoreScheduleData(startDate, endDate) {
             // called only when "View more dates" is clicked; not on initial page load
+            this.calendarLoadingStatus = "more";
             const moreShopTimeSlots = await getScheduleApiResponse({
                 startDateString: startDate,
                 endDateString: endDate,
@@ -1191,6 +1261,7 @@ export default {
                 includeMobileTimeSlots: this.isServiceableMobile,
                 includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
             });
+            this.calendarLoadingStatus = "none";
 
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesInshop.days = this.selectableDatesInshop.days.concat(
@@ -1229,7 +1300,6 @@ export default {
                 await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
             this.selectableDatesMobile =
                 await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
-            this.setDisplayWaitList();
 
             if (this.preSelectedDate) {
                 this.selectedDate = this.preSelectedDate;
@@ -1241,11 +1311,8 @@ export default {
                 ) {
                     await this.$nextTick();
                     await this.$refs.datePicker.showAnotherMonth();
-                    this.setDisplayWaitList();
                 }
             }
-
-            this.isShowMobileFirstAppt && this.hideLoadingModal();
         },
         getIsRecalAcknowledgedForSchedulingFromStore() {
             return store.getters.order.isRecalAcknowledgedForScheduling;
@@ -1259,8 +1326,8 @@ export default {
             if (isMobileSelected === undefined) {
                 isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE;
             }
-            let storedDate = store.getters.order.schedule.date;
-            if (isMobileSelected) storedDate += "-mobile";
+            let storedDate = store.getters.order.schedule?.date;
+            if (isMobileSelected && storedDate) storedDate += "-mobile";
             return storedDate;
         },
         getSelectedTimeSlotInfo() {
@@ -1515,39 +1582,6 @@ export default {
             }
             this.showLoadingModal();
         },
-        setDisplayWaitList() {
-            const dateString = this.isMobileSelected
-                ? this.selectableDatesMobile?.days[0]?.date
-                : this.selectableDatesInshop?.days[0]?.date;
-            if (
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_WAITLIST,
-                    "true"
-                ) &&
-                dateString
-            ) {
-                const [year, month, day] = dateString.split("-").map(Number);
-                const targetDate = new Date(year, month - 1, day);
-                const currentDate = getTodayDate();
-                const futureDate = new Date(currentDate);
-                const experimentThresholdDays = experimentMixin.methods.hasSetting(
-                    experimentSettings.WAITLIST_THRESHOLD_DAYS
-                )
-                    ? parseInt(
-                          experimentMixin.methods.getSettingValue(
-                              experimentSettings.WAITLIST_THRESHOLD_DAYS
-                          )
-                      )
-                    : 0;
-                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
-
-                if (targetDate >= futureDate) {
-                    this.displayWaitList = true;
-                } else {
-                    this.displayWaitList = false;
-                }
-            }
-        },
         updateSupportingItems() {
             const supportingItems = this.getSupportingItems();
 
@@ -1743,6 +1777,7 @@ export default {
             }
 
             this.resetMobileLocation();
+            this.calendarLoadingStatus = "initial";
 
             getShopProviderData(newZipCode.zipCode, this.pageName).then((result) => {
                 this.shopProviderData = result.data;
@@ -1753,6 +1788,9 @@ export default {
                 this.selectedDate = null;
                 this.initializeDatePicker().then(() => {
                     this.showMobileFirstModal();
+                    this.hideLoadingModal();
+                    this.calendarLoadingStatus = "none";
+                    this.setSelectedDateToFirstAvailable();
                 });
             });
         },
@@ -1805,7 +1843,6 @@ export default {
                 this.appointmentType = null;
             }
             this.setSelectedDateToFirstAvailable(); // v-if on appointmentTypeQuestion ensures dates have been loaded by now
-            this.setDisplayWaitList(); // v-if on appointmentTypeQuestion ensures dates have been loaded by now
         },
         setSelectedDateToFirstAvailable() {
             this.selectedDate = this.getFirstAvailableDate();
diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue
index b4a2937b7..a855ab399 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -36,7 +36,10 @@
                 isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
             ]"
             :answers="availableTimeSlots"
-            :lazyLoad="{ isLazyLoad: !isMobileAppointment, amountToLoad: 10 }"
+            :lazyLoad="{
+                isLazyLoad: isLazyLoad,
+                amountToLoad: lazyLoadAmountToLoad || 10,
+            }"
             groupName="chooseTimeSlot"
             textPosition="text-center"
             questionText="Available times:"
@@ -134,6 +137,7 @@ export default {
         isSameDay: Boolean,
         displayWaitList: Boolean,
         selectedRouteCodeData: Object,
+        lazyLoadAmountToLoad: Number,
     },
     data() {
         return {
@@ -396,6 +400,26 @@ export default {
                 !this.isDropOffAppointmentAvailable
             );
         },
+        isLazyLoad() {
+            if (this.availableTimeSlots?.length < this.lazyLoadAmountToLoad + 1) return false;
+            if (this.isMobileAppointment) return false;
+            if (this.selectedAnswerForTimeSlots && !this.isSelectedInshopTimeSlotShowing)
+                return false;
+            return true;
+        },
+        availableTimeSlotsForInshop() {
+            return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate?.timeSlots);
+        },
+        isSelectedInshopTimeSlotShowing() {
+            if (!this.selectedAnswerForTimeSlots) return false;
+            const idx = this.availableTimeSlotsForInshop?.findIndex((timeSlot) => {
+                return timeSlot.value === this.selectedAnswerForTimeSlots;
+            });
+            if (idx > -1 && idx < this.lazyLoadAmountToLoad) {
+                return true;
+            }
+            return false;
+        },
     },
     methods: {
         updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
@@ -453,6 +477,7 @@ export default {
         //     }
         // },
         getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
+            if (!timeSlotsForSelectedDate) return;
             return timeSlotsForSelectedDate
                 .filter((timeSlot) => {
                     return !isDropOffRouteCode(timeSlot.id);
diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 5090df2b3..47c37bb55 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -51,6 +51,10 @@ export const routeData = {
         name: "quote",
         path: "/quote",
     },
+    POLICY_INFO: {
+        name: "policy-info",
+        path: "/policy-info",
+    },
     INSURANCE_COMPANY: {
         name: "insurance-company",
         path: "/insurance-company",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index d5f8e442c..2d2f49a25 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -429,6 +429,10 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.POLICY_INFO.name,
+            maps: [],
+        },
         {
             pageName: routeData.INSURANCE_COMPANY.name,
             maps: [
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index ec6077270..521ba43a1 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -41,6 +41,7 @@ export const routes = [
     createRoute(routeData.CONFIRMATION),
     createRoute(routeData.RETURN_USER),
     createRoute(routeData.MOBILE_DETAILS),
+    createRoute(routeData.POLICY_INFO),
 
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),