From c557680038f9f5a669d41204291df8222d823fed Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Tue, 1 Jul 2025 14:46:57 -0400
Subject: [PATCH 01/11] CASH-845: save old and new versions of pages together

---
 .../date-picker/date-picker.vue               | 1351 +++++++++++++++++
 src/layouts/schedule/schedule.vue             |  794 ++++++++++
 .../service-location/service-location.vue     |  859 +++++++++++
 3 files changed, 3004 insertions(+)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 5b35792dd..fbaddeae4 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,3 +1,1345 @@
+<!-- OLD DATE-PICKER BEGINS -->
+
+
+
+<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 -->
+
+<!-- NEW DATE-PICKER BEGINS -->
+
+<!-- 
+
 <template>
     <div
         class="date-picker text-center"
@@ -1397,3 +2739,12 @@ export default {
     text-align: left;
 }
 </style>
+
+
+-->
+
+<!-- NEW DATE-PICKER ENDS -->
+
+
+
+
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index ee2096c36..37a0b8029 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,3 +1,793 @@
+<!-- OLD SCHEDULE BEGINS -->
+
+
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles page-schedule">
+            <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 cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                    <template v-if="ChangeShopLink.length">
+                        <textBlock
+                            cmsWidgetName="ChangeShopLink"
+                            justifyText="center"
+                            class="mb-5 text-link-small change-location"
+                            marginTopSizeOverride="1" />
+                    </template>
+                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
+                    <datePicker
+                        customComponentId="dateQuestion"
+                        selectableDatesSetting="custom"
+                        ref="datePicker"
+                        v-model="selectedDate"
+                        class="text-link-small"
+                        :customSelectableDatesCallback="getAvailableDatesMethod"
+                        validationRules="date-required"
+                        @date-clicked="handleDateClicked"
+                        :pricingByDayBasePrice="pricingByDayBasePrice"
+                        :pricingByDayUpcharge="pricingByDayUpcharge"
+                        :showPricingByDay="showPricingByDay"
+                        :isPricingByDayExperiment="isPricingByDayExperiment"
+                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                        :estimatedServiceMinutesMinimum="
+                            selectableDatesData.estimatedServiceMinutesMinimum
+                        "
+                        :estimatedServiceMinutesMaximum="
+                            selectableDatesData.estimatedServiceMinutesMaximum
+                        "
+                        @TimeSlotSelected="updateTimeSlot"
+                        :displayWaitList="displayWaitList"
+                        @waitListRequested="handleWaitListRequested" />
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form, defineRule } from "vee-validate";
+import datePicker from "@/digital-components/date-picker/date-picker";
+import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
+import textBlock from "@/digital-components/text-block/text-block";
+
+// Supporting files
+import { queryStrings } from "@/constants/query-strings";
+import { getQuerystringParameter } from "@/helpers/querystring-helper";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import {
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString,
+} from "@/layouts/schedule/helpers/schedule-helper";
+import {
+    AppointmentTypeStrings,
+    PREMIUM_FEE_PART_TYPE,
+    PRICING_BY_DAY_PART_TYPE,
+} from "@/constants/schedule-constants";
+import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import store from "@/store";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
+import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
+import { partNumberStrings } from "@/constants/part-number-strings";
+import { deepClone } from "@/helpers/object-helper";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+// DEFINE VALIDATION RULES
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+
+// Define constants
+const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+
+const getAvailableDates = async (
+    startDateString,
+    endDateString,
+    appointmentType,
+    providerNumber
+) => {
+    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
+    const difference = calcDaysBetweenDates(startDateString, endDateString);
+    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+    const storeActionConfigs = [];
+    const timeSlotsData = {};
+    timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = endDateString;
+
+    for (let i = 1; i <= apiCallsCount; i++) {
+        let storeActionConfig;
+
+        if (i > 1) {
+            apiStartDate = sumDateString(apiEndDate, 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+
+            if (i === apiCallsCount) {
+                apiEndDate = endDateString;
+            }
+        } else {
+            if (apiEndDate > apiEndDateLimit) {
+                apiEndDate = apiEndDateLimit;
+            }
+        }
+
+        if (appointmentType === AppointmentTypeStrings.MOBILE) {
+            storeActionConfig = {
+                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                },
+            };
+        } else {
+            storeActionConfig = {
+                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                    shopAppointmentType: appointmentType,
+                    providerNumber: providerNumber,
+                },
+            };
+        }
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+    }
+
+    const timeSlotsResponsesData = {
+        days: [],
+    };
+
+    function compareDayStrings(a, b) {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return 1;
+        return 0;
+    }
+
+    const makeParallelCalls = async () => {
+        await Promise.all(
+            storeActionConfigs.map(async (storeAction) => {
+                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeAction.storeAction,
+                    storeAction.payload,
+                    "schedule",
+                    false
+                );
+                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+                timeSlotsResponsesData.days = [
+                    ...timeSlotsResponsesData.days,
+                    ...timeSlotsResponse.data.days,
+                ];
+            })
+        );
+    };
+
+    return makeParallelCalls().then(() => {
+        // sort days chronologically
+        timeSlotsResponsesData.days.sort(compareDayStrings);
+        return timeSlotsResponsesData;
+    });
+};
+
+export default {
+    name: "schedule",
+    data() {
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null,
+            waitListRequested: null,
+            displayWaitList: null,
+            pricingByDayUpchargeLineItem: null,
+            includePricingByDayUpcharge: null,
+            isPricingByDayExperiment: null,
+            pricingByDayBasePrice: null,
+            pricingByDayUpcharge: null,
+            showPricingByDay: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
+            experimentSettings.PRICING_BY_DAY,
+            "true"
+        );
+        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
+
+        // Get pricingByDayBasePrice needed for Pricing By Day
+        const lineItems = deepClone(store.getters.order.lineItems);
+        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
+        const shouldHideRecalibration =
+            experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.RECAL_PRICE_REMOVE,
+                "true"
+            ) && isRecalibrationOnOrder;
+        const glassParts =
+            isRecalibrationOnOrder && shouldHideRecalibration
+                ? getItemsWithoutRecalParts(lineItems.glassParts)
+                : (lineItems.glassParts ?? []);
+        const supportingItemsFromStore = lineItems?.supportingItems;
+        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
+            lineItems.supportingItems,
+            {
+                partNumbersToRemove: [
+                    partNumberStrings.RECYCLE_FEE,
+                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
+                ],
+            }
+        );
+        const lineItemsToBePriced = {
+            glassParts: glassParts,
+            supportingItems: supportingItemsWithoutFees,
+            vaps: lineItems.vaps ?? [],
+            promos: lineItems.promos ?? [],
+        };
+        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
+        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
+        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
+        let includePricingByDayUpcharge = false;
+
+        //  Check to see if date should be pre-selected
+        let preSelectedSlot = await store.getters.order.schedule;
+        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
+            preSelectedSlot = null;
+        } else {
+            // Check to see if pre-selected date should have pricing by day upcharge
+            if (showPricingByDay) {
+                // is this preSelectedDate a higher priced pricingByDay day?
+                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
+                const dayObject = DAYS_OF_WEEK[dayIndex];
+                if (dayObject.isPricingByDayUpchargeDay) {
+                    includePricingByDayUpcharge = true;
+                }
+            }
+        }
+
+        // Set up promises
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            store.getters.order.serviceLocation.zipCodeCtu,
+            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
+        );
+
+        // While Pricing By Day Experiment is active, using the updated datePicker
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+            // setup config options for date-picker
+            selectableDatesSetting: "custom",
+            initialViewRowsToShow: 2,
+            customSelectableDatesCallback: getAvailableDates,
+            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
+        });
+
+        // Get pricingByDayUpcharge needed for Pricing By Day
+        const pricingByDayUpchargePartPromise = showPricingByDay
+            ? getPricingByDayPartWithPrice()
+            : null;
+
+        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_MOBILE_PREMIUM_FEE,
+            null,
+            "schedule"
+        );
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+                    {
+                        availableLineItems: [result.data],
+                    },
+                    "schedule",
+                    false
+                );
+            } else {
+                return result.data;
+            }
+        });
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "alertReasons",
+                promise: alertReasonsPromise,
+            },
+            {
+                resultKey: "datePickerInitialData",
+                promise: datePickerInitialDataPromise,
+            },
+            {
+                resultKey: "pricingByDayUpchargePart",
+                promise: pricingByDayUpchargePartPromise,
+            },
+            {
+                resultKey: "premiumFeeWithPrice",
+                promise: premiumFeeWithPricePromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        const pricingByDayUpcharge = showPricingByDay
+            ? await baseMixin.methods.getTotalLineItemPrice(
+                  resultMap.pricingByDayUpchargePart,
+                  false
+              )
+            : null;
+
+        const datePickerInitialData = resultMap.datePickerInitialData;
+        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
+        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
+            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
+                ? resultMap.premiumFeeWithPrice[0]
+                : null;
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+            vm.setDisplayWaitList();
+            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
+            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
+            vm.isPricingByDayExperiment = isPricingByDayExperiment;
+            vm.pricingByDayBasePrice = pricingByDayBasePrice;
+            vm.pricingByDayUpcharge = pricingByDayUpcharge;
+            vm.showPricingByDay = showPricingByDay;
+        });
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const selectableDatesData = this.selectableDatesData;
+            // if no date selected on load
+            if (!this.selectedDate) {
+                if (selectableDatesData?.days?.length > 0) {
+                    this.selectedDate = selectableDatesData.days[0].date;
+                } else {
+                    setTimeout(() => {
+                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
+                            this.selectableDatesData = moreSelectableDatesData;
+                            if (selectableDatesData?.days?.length > 0) {
+                                this.selectedDate = selectableDatesData.days[0].date;
+                            }
+
+                            this.setDisplayWaitList();
+                        });
+                    }, 50);
+                }
+            }
+        });
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent("ChangeShopLink", "Text");
+        },
+        ChangeShopLink() {
+            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        timeSlotsForSelectedDate() {
+            if (!this.selectedDate) return null;
+
+            return this.selectableDatesData.days?.find(
+                (selectableDate) => selectableDate.date === this.selectedDate
+            );
+        },
+    },
+    methods: {
+        splitCopyOnCMSPlaceHolder,
+        arePagePrerequisitesValid() {
+            const serviceLocation = store.getters.order.serviceLocation;
+
+            const serviceLocationPreReqs =
+                serviceLocation.zipCode &&
+                serviceLocation.zipCodeCtu &&
+                serviceLocation.appointmentType &&
+                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+                    serviceLocation.provider.providerNumber);
+
+            const paymentInfo = store.getters.payment.isInsurance !== null;
+
+            const damageInfo =
+                store.getters.order.damage.isRepair ||
+                (store.getters.order.lineItems?.glassParts != null &&
+                    store.getters.order.lineItems.glassParts.length > 0);
+
+            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
+
+            // prettier-ignore
+            {
+                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
+                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
+                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
+                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
+                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
+            }
+            return preReqResult;
+        },
+        async getAvailableDatesMethod(startDate, endDate) {
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
+            );
+
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            this.selectableDatesData.days = this.selectableDatesData.days.concat(
+                newShopTimeSlots.days
+            );
+            return newShopTimeSlots;
+        },
+        getAvailableDates,
+        getServiceZipCtuCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCodeCtu;
+        },
+        getSelectedDate() {
+            return store.getters.order.schedule.date;
+        },
+        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;
+        },
+        updateFooterButtonText(timeSlotInfo) {
+            let navbarButtonText;
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+                navbarButtonText = "Continue";
+            } else {
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                    timeSlotInfo.timeSlot.date
+                )}`;
+
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime
+                    )}`;
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    !timeSlotInfo.isPremiumAppointment
+                ) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime,
+                        true
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
+                }
+            }
+            this.$refs.navbar.updateButtonText(navbarButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(selectedDate);
+            // Ex: April 25
+            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
+        },
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            // Expected input: "HH:MM"
+            let hours = parseInt(militaryTimeInput.split(":")[0]);
+            const minutes = militaryTimeInput.split(":")[1];
+            const meridianNotation = hours > 11 ? "PM" : "AM";
+
+            if (hours > 12) {
+                hours -= 12;
+            }
+
+            if (shouldTrimMinutesIfEmpty && minutes === "00") {
+                return `${hours} ${meridianNotation}`;
+            } else {
+                return `${hours}:${minutes} ${meridianNotation}`;
+            }
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        forwardButtonAction() {
+            this.updateSupportingItems();
+
+            if (this.displayWaitList) {
+                var gaLabel = "";
+                const status = this.waitListRequested ? "checked" : "unchecked";
+                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
+                gaLabel = `${status}_${type}`;
+
+                const currentDate = new Date();
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const appointmentDate = new Date(year, month - 1, day);
+                const timeDifference = appointmentDate - currentDate;
+
+                // Convert the time difference from milliseconds to days
+                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+
+                gaLabel +=
+                    "_" +
+                    daysUntilAppointment.toString() +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCode +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCodeCtu;
+                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
+            }
+            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
+                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
+                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                this.selectedTimeSlotInfo.timeSlot,
+                false
+            );
+
+            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_WAITLIST_REQUESTED,
+                    this.waitListRequested,
+                    false
+                );
+            }
+
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setDisplayWaitList() {
+            if (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_WAITLIST,
+                    "true"
+                ) &&
+                this.selectableDatesData.days[0]
+            ) {
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const targetDate = new Date(year, month - 1, day);
+                const currentDate = new Date();
+                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();
+
+            // if we have a pricing by day upcharge, then save/update supporting items with it
+            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
+                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
+            );
+
+            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
+                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
+                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
+                        this.pricingByDayUpchargeLineItem.laborAmount;
+                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
+                        this.pricingByDayUpchargeLineItem.sellingPrice;
+                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
+                        this.pricingByDayUpchargeLineItem.kitPrice;
+                } else {
+                    supportingItems.push(this.pricingByDayUpchargeLineItem);
+                }
+            } else {
+                if (pricingByDayUpchargeFeeIndex >= 0) {
+                    // remove pricing by day upcharge if it already was in store
+                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
+                }
+            }
+
+            // if we have a premium fee(early bird), then save/update supporting items
+            if (
+                this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                this.selectedTimeSlotInfo?.isPremiumAppointment
+            ) {
+                const premiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (premiumFeeIndex > -1) {
+                    supportingItems[premiumFeeIndex].laborAmount =
+                        this.mobilePremiumAppointmentFee.laborAmount;
+                    supportingItems[premiumFeeIndex].sellingPrice =
+                        this.mobilePremiumAppointmentFee.sellingPrice;
+                    supportingItems[premiumFeeIndex].kitPrice =
+                        this.mobilePremiumAppointmentFee.kitPrice;
+                } else {
+                    supportingItems.push(this.mobilePremiumAppointmentFee);
+                }
+            } else {
+                if (!supportingItems) {
+                    return;
+                }
+
+                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
+                const removePremiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (removePremiumFeeIndex >= 0) {
+                    supportingItems.splice(removePremiumFeeIndex, 1);
+                }
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                supportingItems,
+                false
+            );
+        },
+        handleWaitListRequested(value) {
+            this.waitListRequested = value;
+        },
+        handleDateClicked(date) {
+            // do something to mark this as upcharge day or not...
+            if (date.isPricingByDayUpchargeDay) {
+                this.includePricingByDayUpcharge = true;
+            } else {
+                this.includePricingByDayUpcharge = false;
+            }
+        },
+        updateTimeSlot(timeSlot) {
+            this.selectedTimeSlotInfo = timeSlot;
+        },
+    },
+    watch: {
+        selectedDate(newValue, oldValue) {
+            // Clear time slot selection if date selected changes
+            if (newValue !== oldValue) {
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null,
+                    },
+                    isPremiumAppointment: null,
+                };
+            }
+        },
+        selectedTimeSlotInfo(newValue) {
+            this.updateFooterButtonText(newValue);
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        datePicker,
+        locationAlerts,
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss">
+.container-fluid {
+    &.page-schedule {
+        padding: 0 1rem;
+        .text-link-small {
+            a,
+            .btn-link {
+                width: auto;
+                margin: 0 auto;
+                height: auto;
+                font-size: 0.875rem;
+                line-height: 1.75;
+                padding: 0;
+                border-radius: 0;
+                &:focus {
+                    outline: 1px solid $blue;
+                }
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
+            }
+        }
+        .funnel-sub-header {
+            h5.dark-header {
+                margin-bottom: 0.25rem;
+            }
+        }
+        .change-location a {
+            font-family: AvertaSemibold;
+        }
+        .time-slots-question {
+            padding: 0 0.75rem;
+        }
+    }
+}
+</style>
+
+-->
+
+<!-- OLD SCHEDULE ENDS -->
+
+
+<!-- NEW SCHEDULE BEGINS -->
+
+<!-- 
+
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -867,3 +1657,7 @@ export default {
     }
 }
 </style>
+
+-->
+
+<!-- NEW SCHEDULE ENDS -->
\ No newline at end of file
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 776fe1199..bdcc3d11a 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,3 +1,858 @@
+<!-- OLD SERVICE LOCATION BEGINS -->
+
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <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 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <serviceZipModalQuestion
+                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
+                        v-model="serviceZipCodeQuestion"
+                        ref="serviceZipCodeQuestion"
+                        :carId="carId"
+                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
+                        :mobileFeePart="mobileFeePart"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-bill-to-account-number="setBillToAccountNumber"
+                        linkWidgetName="ServiceZipLinkWidget"
+                        modalWidgetName="ServiceZipModalWidget" />
+
+                    <alert
+                        ref="alertMilitaryBaseZip"
+                        class="my-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        v-if="displayMilitaryZipAlert"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertMobileOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        v-if="displayServiceableMobileOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertRecalNoMobile"
+                        class="my-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        v-if="displayRecalibrationWarning"
+                        @text-link-clicked="openModalAction"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertInshopOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        v-if="displayServiceableInshopOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertNoShops"
+                        class="my-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        v-if="displayNoShopsAlert"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertMobileFeeFree"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileFeeFreeWidget"
+                        v-if="showMobileFreeAlert"
+                        alertClass="alert-success" />
+                </div>
+            </div>
+            <div class="row justify-content-center appointment-type">
+                <div class="col-md-6">
+                    <appointmentTypeQuestion
+                        v-model="selectedAppointmentType"
+                        v-show="isAppointmentTypeDisplayed"
+                        :isServiceableMobile="isServiceableMobile"
+                        :isServiceableInshop="isServiceableInshop"
+                        :isServiceableDropoff="isServiceableDropoff"
+                        :isDisplayed="isAppointmentTypeDisplayed"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        :zipCode="zipCode"
+                        ref="appointmentTypeQuestion"
+                        groupName="appointmentTypeQuestion"
+                        cmsWidgetName="AppointmentTypeQuestionWidget"
+                        validationRules="option-required"
+                        labelBold="true" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <mobileLocationModalQuestions
+                        customComponentId="mobileLocationQuestions"
+                        v-show="selectedAppointmentType === 'Mobile'"
+                        v-model="mobileLocationQuestions"
+                        :mobileFeePart="mobileFeePart"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-mobile-ctu="setCtuForMobile"
+                        validationRules="mobile-location-required"
+                        ref="mobileLocationQuestions"
+                        linkWidgetName="MobileLocationLinkWidget"
+                        modalWidgetName="MobileLocationModalWidget"
+                        @setMobileLocation="setMobileLocationQuestions"
+                        @set-mobile-location-invalid="setMobileLocationInValid" />
+
+                    <shopQuestion
+                        ref="shopQuestion"
+                        v-show="isShopQuestionDisplayed"
+                        v-model="selectedProvider"
+                        :selectedAppointmentType="selectedAppointmentType"
+                        :shopProviderData="shopProviderData"
+                        :isDisplayed="isShopQuestionDisplayed"
+                        cmsWidgetName="ShopQuestionWidget" />
+
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
+import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
+import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
+
+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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form } from "vee-validate";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+
+// Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+    getShopProviderData,
+    getZipCodeData,
+} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { applicationConfig } from "@/constants/application-config";
+import { Provider } from "@/layouts/service-location/classes/provider";
+import { partNumberStrings } from "@/constants/part-number-strings";
+
+import store from "@/store";
+
+// Validation
+import { defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
+
+const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
+
+// DEFINE VALIDATION RULES
+defineRule("mobile-location-required", (value) => {
+    const addressQuestionsValues = Object.values(
+        [
+            value.addressQuestions.streetAddress,
+            value.addressQuestions.city,
+            value.isVehicleProtected,
+        ] || {}
+    );
+    const filledFields = addressQuestionsValues.filter(
+        (val) => val !== null && val !== undefined && val !== ""
+    );
+    if (
+        value.isMobileSelected &&
+        filledFields.length > 0 &&
+        filledFields.length < addressQuestionsValues.length
+    ) {
+        return errorMessages.MOBILE_LOCATION_REQUIRED;
+    }
+    return true;
+});
+
+export default {
+    name: "service-location",
+    data() {
+        return {
+            streetAddress: this.getServiceAddressFromStore(),
+            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
+            carId: this.getCarIdfromStore(),
+            city: this.getServiceCityFromStore(),
+            state: this.getServiceStateFromStore(),
+            zipCode: this.getServiceZipCodeFromStore(),
+            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
+            isGlassServiceableInshop: null,
+            isRecalibrationServiceableInshop: null,
+            isGlassServiceableDropoff: null,
+            isRecalibrationServiceableDropoff: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
+            selectedAppointmentType: this.getSelectedAppointmentType(),
+            selectedProvider: this.getSelectedProvider(),
+            mobileFeePart: null,
+            recycleFeePart: null,
+            zipContainsMilitaryBase: false,
+            zipCodeCtu: null,
+            billToAccountNumber: null,
+            shopProviderData: null,
+            navigatingForward: false,
+            isMobileAddressValid: true,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
+
+        const serviceabilityDetailsPromise = getServiceabilityDetails(
+            serviceZipCode,
+            null,
+            "service-location"
+        );
+
+        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
+
+        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "zipCodeData",
+                promise: zipCodeDataPromise,
+            },
+            {
+                resultKey: "mobileFeePart",
+                promise: mobileFeePartPromise,
+            },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
+            {
+                resultKey: "shopProviderData",
+                promise: shopProviderDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart,
+                resultMap.shopProviderData
+            );
+        });
+    },
+    computed: {
+        serviceZipCodeQuestion: {
+            get: function () {
+                return {
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.zipCode !== this.zipCode) {
+                    this.resetMobileLocation();
+                    this.selectedAppointmentType = null;
+                    this.selectedProvider = new Provider();
+                }
+
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+                this.zipCodeCtu = newValue.zipCodeCtu;
+
+                this.$nextTick();
+            },
+        },
+        mobileLocationQuestions: {
+            get: function () {
+                return {
+                    addressQuestions: {
+                        streetAddress: this.streetAddress,
+                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
+                        city: this.city,
+                        state: this.state,
+                        zipCode: this.zipCode,
+                    },
+                    isVehicleProtected: this.isVehicleProtected,
+                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
+                };
+            },
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return (
+                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
+                    this.isMobileStaticRecalibrationApplicable
+                );
+            } else {
+                return this.isGlassServiceableMobile;
+            }
+        },
+        isMobileStaticRecalibrationApplicable() {
+            return (
+                this.displayMSR &&
+                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
+                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
+            );
+        },
+        displayMSR() {
+            return (
+                experimentMixin.methods
+                    .getSettingValue(experimentSettings.DISPLAY_MSR)
+                    ?.toLowerCase() === "true"
+            );
+        },
+        isCashItacNoComp() {
+            return !this.isInsurance || this.isITAC || this.isNoComp;
+        },
+        mobileFeeHasPrice() {
+            return (
+                this.mobileFeePart?.laborAmount > 0 ||
+                this.mobileFeePart?.sellingPrice > 0 ||
+                this.mobileFeePart?.kitPrice > 0
+            );
+        },
+        mobileFeeApplies() {
+            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
+                return this.isCashItacNoComp;
+            } else {
+                return this.mobileFeeHasPrice;
+            }
+        },
+        showMobileFreeAlert() {
+            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
+                return true;
+            }
+            return false;
+        },
+        isServiceableInshop() {
+            if (this.isRecalibrationServiceableInshop !== null) {
+                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+            } else {
+                return this.isGlassServiceableInshop;
+            }
+        },
+        isServiceableDropoff() {
+            if (this.isRecalibrationServiceableDropoff !== null) {
+                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
+            } else {
+                return this.isGlassServiceableDropoff;
+            }
+        },
+        isShopQuestionDisplayed() {
+            return (
+                this.selectedAppointmentType === "Inshop" ||
+                this.selectedAppointmentType === "Dropoff"
+            );
+        },
+        isAppointmentTypeDisplayed() {
+            return this.zipCode && !this.displayNoShopsAlert;
+        },
+        requiresInshopRecalibration() {
+            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+            return (
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false &&
+                !this.isMobileStaticRecalibrationApplicable
+            );
+        },
+        displayRecalibrationWarning() {
+            return this.requiresInshopRecalibration;
+        },
+        displayServiceableInshopOnly() {
+            return (
+                !this.displayRecalibrationWarning &&
+                this.isServiceableInshop &&
+                !this.isServiceableMobile
+            );
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        },
+        displayServiceableMobileOnly() {
+            return this.isServiceableMobile && !this.isServiceableInshop;
+        },
+        displayNoShopsAlert() {
+            return !this.isServiceableInshop && !this.isServiceableMobile;
+        },
+        recalibrationInformationModal() {
+            return this.$refs.recalibrationInformationModal;
+        },
+        isInsurance() {
+            return store.getters.payment.isInsurance;
+        },
+        isITAC() {
+            return store.getters.order.policy.isItac;
+        },
+        isNoComp() {
+            return store.getters.order.policy.isNoComp;
+        },
+        isForwardActionDisabled() {
+            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
+            if (store.getters.payment.isInsurance) {
+                if (
+                    store.getters.payment.parentAccountNumber !==
+                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
+                    store.getters.order.policy.policyNumber &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
+                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+
+                    return false;
+                }
+            } else {
+                if (
+                    store.getters.lineItems.supportingItems &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Cash: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+                    return false;
+                }
+            }
+        },
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+                this.zipCodeCtu = zipCodeData.zipCodeCtu;
+            }
+
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+
+            if (mobileFeePart) {
+                this.mobileFeePart = mobileFeePart;
+            }
+
+            if (shopProviderData) {
+                this.shopProviderData = shopProviderData;
+            }
+
+            var gaLabel = this.GaLabels.NO;
+            if (this.isServiceableMobile) {
+                gaLabel = this.GaLabels.YES;
+            }
+
+            this.pushEventToGA(
+                this.GaCategories.APPOINTMENT,
+                this.GaActions.MOBILE_AVAILABLE,
+                gaLabel,
+                true
+            );
+        },
+        setContainsMilitaryBase(val) {
+            if (this.zipContainsMilitaryBase !== val) {
+                this.zipContainsMilitaryBase = val;
+            }
+        },
+        setBillToAccountNumber(val) {
+            this.billToAccountNumber = val;
+        },
+        setCtuForMobile(val) {
+            this.zipCodeCtu = val;
+        },
+        setMobileFeePart(mobileFeePart) {
+            this.mobileFeePart = mobileFeePart;
+        },
+        setRecycleFeePart(recycleFeePart) {
+            this.recycleFeePart = recycleFeePart;
+        },
+        //creating async function as the computed property can not directly handle asynchronous operations or promises.
+        async setMobileLocationQuestions(newValue) {
+            var newZipCode = newValue.addressQuestions.zipCode;
+            if (newZipCode !== this.zipCode) {
+                await getShopProviderData(newZipCode).then((result) => {
+                    if (this.isServiceableMobile) {
+                        this.shopProviderData = result.data;
+                        this.selectedProvider = new Provider(
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    }
+                });
+            }
+            if (this.isServiceableMobile) {
+                this.setMobileLocation(newValue);
+                this.setMobileLocationInValid(false);
+            } else {
+                await getZipCodeData(newZipCode).then((zipCodeData) => {
+                    this.serviceZipCodeQuestion = {
+                        state: zipCodeData.state,
+                        zipCode: newZipCode,
+                        zipCodeCtu: zipCodeData.zipCodeCtu,
+                    };
+                });
+            }
+        },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getServiceAddressFromStore() {
+            return store.getters.order.serviceLocation.address;
+        },
+        getServiceAddress2FromStore() {
+            return store.getters.order.serviceLocation.address2;
+        },
+        getServiceCityFromStore() {
+            return store.getters.order.serviceLocation.city;
+        },
+        getServiceStateFromStore() {
+            return store.getters.order.serviceLocation.state;
+        },
+        getServiceZipCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.order.vehicle?.isBigTruck ?? false;
+        },
+        getIsVehicleProtectedFromStore() {
+            return store.getters.order.serviceLocation.isVehicleProtected;
+        },
+        getSelectedAppointmentType() {
+            return store.getters.order.serviceLocation.appointmentType;
+        },
+        getSelectedProvider() {
+            return store.getters.order.serviceLocation.provider;
+        },
+        resetMobileLocation() {
+            this.streetAddress = "";
+            this.apartmentNumberOrBusinessName = "";
+            this.city = "";
+
+            this.isVehicleProtected = null;
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
+            this.isRecalibrationServiceableDropoff =
+                serviceabilityDetails.isRecalibrationServiceableDropoff;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
+        setMobileLocation(mobileLocation) {
+            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
+            this.apartmentNumberOrBusinessName =
+                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
+            this.city = mobileLocation.addressQuestions.city;
+            this.state = mobileLocation.addressQuestions.state;
+            this.zipCode = mobileLocation.addressQuestions.zipCode;
+            this.isVehicleProtected = mobileLocation.isVehicleProtected;
+        },
+        async reloadShopData(zipCode) {
+            await this.$refs.shopQuestion.reloadShopData(zipCode);
+        },
+        openRecalibrationInformationModal() {
+            this.recalibrationInformationModal.openModal();
+        },
+        backButtonAction() {
+            const payment = store.getters.order.payment;
+            if (
+                payment?.isInsurance &&
+                (payment?.insuranceCoverage?.isVerified ||
+                    store.getters.order.referralNumber.length === 6)
+            ) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: false,
+                    pageNameToLog: "service-location",
+                    navType: "back",
+                });
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
+        },
+        updateAndSaveIsMSRFeeApplicable() {
+            const isMSRFeeApplicable =
+                this.isMobileStaticRecalibrationApplicable &&
+                this.selectedAppointmentType == "Mobile";
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
+                isMSRFeeApplicable
+            );
+        },
+        updateAndSaveSupportingItems() {
+            let supportingItems = store.getters.lineItems.supportingItems;
+            let shouldSaveSupportingItems = false;
+
+            supportingItems =
+                !supportingItems && this.isMobileStaticRecalibrationApplicable
+                    ? []
+                    : supportingItems;
+
+            // for insurance orders, fees can get removed causing supportingitems to be null or empty
+            if (!supportingItems) {
+                return;
+            }
+
+            // update recyle fee price
+            if (this.recycleFeePart) {
+                const recycleFeeIndex = supportingItems.findIndex(
+                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
+                );
+                if (recycleFeeIndex >= 0) {
+                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
+                    supportingItems[recycleFeeIndex].sellingPrice =
+                        this.recycleFeePart.sellingPrice;
+                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
+
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // if we have a mobile fee, then save/update supporting items
+            if (this.selectedAppointmentType == "Mobile") {
+                const mobileFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+                // If it already exists, update the price with latest data
+                if (mobileFeeIndex >= 0) {
+                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
+                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
+                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
+                } else {
+                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
+                }
+
+                shouldSaveSupportingItems = true;
+            } else {
+                // if it's not a mobile, then make sure we remove any that may have been added
+                const removeMobileFeeIndex = supportingItems?.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+
+                if (removeMobileFeeIndex >= 0) {
+                    supportingItems.splice(removeMobileFeeIndex, 1);
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
+            if (shouldSaveSupportingItems) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                    supportingItems,
+                    false
+                );
+            }
+        },
+        async forwardButtonAction() {
+            this.navigatingForward = true;
+            var ctu = this.zipCodeCtu;
+            if (
+                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
+                this.selectedProvider &&
+                this.selectedProvider.address
+            ) {
+                this.selectedProvider.address.streetAddress = null;
+                this.selectedProvider.address.city = null;
+                this.selectedProvider.address.state = null;
+                this.selectedProvider.address.zipCode = null;
+                this.selectedProvider.address.zipCodeCtu = null;
+            } else {
+                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
+                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
+                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
+                    ctu = this.selectedProvider.address.zipCodeCtu;
+                }
+                this.resetMobileLocation();
+            }
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SERVICE_LOCATION,
+                {
+                    address: this.streetAddress,
+                    address2: this.apartmentNumberOrBusinessName,
+                    city: this.city,
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: ctu,
+                    appointmentType: this.selectedAppointmentType,
+                    isVehicleProtected: this.isVehicleProtected,
+                    provider: {
+                        providerNumber: this.selectedProvider?.providerNumber,
+                        address: {
+                            streetAddress: this.selectedProvider?.address?.streetAddress,
+                            city: this.selectedProvider?.address?.city,
+                            state: this.selectedProvider?.address?.state,
+                            zipCode: this.selectedProvider?.address?.zipCode,
+                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
+                        },
+                    },
+                },
+                false
+            );
+
+            if (this.billToAccountNumber) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
+                    this.billToAccountNumber,
+                    false
+                );
+            }
+
+            this.updateAndSaveSupportingItems();
+            this.updateAndSaveIsMSRFeeApplicable();
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setMobileLocationInValid(isMobileLocationInValid) {
+            this.isMobileAddressValid = !isMobileLocationInValid;
+        },
+    },
+    watch: {
+        zipCode: {
+            handler(newValue) {
+                if (!this.navigatingForward) {
+                    getShopProviderData(this.zipCode).then(async (result) => {
+                        this.shopProviderData = result.data;
+                        if (this.selectedAppointmentType === "Mobile") {
+                            this.selectedProvider = new Provider(
+                                this.shopProviderData.mobileProviderNumber
+                            );
+                        } else {
+                            this.selectedProvider = new Provider();
+                        }
+                    });
+                }
+            },
+        },
+        selectedAppointmentType: {
+            handler(newValue) {
+                if (newValue === "Mobile") {
+                    this.selectedProvider = new Provider(
+                        this.shopProviderData.mobileProviderNumber
+                    );
+                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
+                        //restore mobile address from store in case user make changes to address but not commit it.
+                        this.streetAddress = this.getServiceAddressFromStore();
+                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
+                        this.city = this.getServiceCityFromStore();
+                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
+                        this.$refs.mobileLocationQuestions.resetAlerts();
+                    } else {
+                        this.resetMobileLocation();
+                    }
+                } else {
+                    this.selectedProvider = new Provider();
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        serviceZipModalQuestion,
+        appointmentTypeQuestion,
+        mobileLocationModalQuestions,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        contentGroupModal,
+        shopQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.appointment-type-question {
+    .button-question {
+        .col {
+            @include media-breakpoint-up(md) {
+                padding: 0 0.75rem;
+            }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
+.question-text {
+    & > span {
+        text-align: center;
+        color: $black;
+    }
+}
+</style>
+
+
+
+<!-- OLD SERVICE LOCATION ENDS -->
+
+
+<!-- NEW SERVICE LOCATION BEGINS -->
+
+<!--
+
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -959,3 +1814,7 @@ export default {
     box-shadow: 0 0 0 1px $primary !important;
 }
 </style>
+
+-->
+
+<!-- NEW SERVICE LOCATION ENDS -->
\ No newline at end of file

From 94dea85a9400fec51f6fb1a90e3442136ae502a9 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Tue, 1 Jul 2025 15:02:50 -0400
Subject: [PATCH 02/11] CASH-845: move old versions prior to CASH-845 work into
 their own files with comments and excluded from unit tests

---
 jest.config.js                                |    3 +
 .../date-picker/date-picker-june-2025.vue     | 1341 ++++++++++++++++
 .../date-picker/date-picker.vue               | 1351 -----------------
 src/layouts/schedule/schedule-june-2025.vue   |  782 ++++++++++
 src/layouts/schedule/schedule.vue             |  796 +---------
 .../service-location-june-2025.vue            |  850 +++++++++++
 .../service-location/service-location.vue     |  859 -----------
 7 files changed, 2977 insertions(+), 3005 deletions(-)
 create mode 100644 src/digital-components/date-picker/date-picker-june-2025.vue
 create mode 100644 src/layouts/schedule/schedule-june-2025.vue
 create mode 100644 src/layouts/service-location/service-location-june-2025.vue

diff --git a/jest.config.js b/jest.config.js
index ae8dd01c5..421a9a907 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -31,6 +31,9 @@ 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/**/*-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
diff --git a/src/digital-components/date-picker/date-picker-june-2025.vue b/src/digital-components/date-picker/date-picker-june-2025.vue
new file mode 100644
index 000000000..1ff54e6e7
--- /dev/null
+++ b/src/digital-components/date-picker/date-picker-june-2025.vue
@@ -0,0 +1,1341 @@
+<!-- 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.vue b/src/digital-components/date-picker/date-picker.vue
index fbaddeae4..5b35792dd 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,1345 +1,3 @@
-<!-- OLD DATE-PICKER BEGINS -->
-
-
-
-<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 -->
-
-<!-- NEW DATE-PICKER BEGINS -->
-
-<!-- 
-
 <template>
     <div
         class="date-picker text-center"
@@ -2739,12 +1397,3 @@ export default {
     text-align: left;
 }
 </style>
-
-
--->
-
-<!-- NEW DATE-PICKER ENDS -->
-
-
-
-
diff --git a/src/layouts/schedule/schedule-june-2025.vue b/src/layouts/schedule/schedule-june-2025.vue
new file mode 100644
index 000000000..0464b2914
--- /dev/null
+++ b/src/layouts/schedule/schedule-june-2025.vue
@@ -0,0 +1,782 @@
+<!-- OLD SCHEDULE BEGINS -->
+
+<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles page-schedule">
+            <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 cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                    <template v-if="ChangeShopLink.length">
+                        <textBlock
+                            cmsWidgetName="ChangeShopLink"
+                            justifyText="center"
+                            class="mb-5 text-link-small change-location"
+                            marginTopSizeOverride="1" />
+                    </template>
+                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
+                    <datePicker
+                        customComponentId="dateQuestion"
+                        selectableDatesSetting="custom"
+                        ref="datePicker"
+                        v-model="selectedDate"
+                        class="text-link-small"
+                        :customSelectableDatesCallback="getAvailableDatesMethod"
+                        validationRules="date-required"
+                        @date-clicked="handleDateClicked"
+                        :pricingByDayBasePrice="pricingByDayBasePrice"
+                        :pricingByDayUpcharge="pricingByDayUpcharge"
+                        :showPricingByDay="showPricingByDay"
+                        :isPricingByDayExperiment="isPricingByDayExperiment"
+                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                        :estimatedServiceMinutesMinimum="
+                            selectableDatesData.estimatedServiceMinutesMinimum
+                        "
+                        :estimatedServiceMinutesMaximum="
+                            selectableDatesData.estimatedServiceMinutesMaximum
+                        "
+                        @TimeSlotSelected="updateTimeSlot"
+                        :displayWaitList="displayWaitList"
+                        @waitListRequested="handleWaitListRequested" />
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form, defineRule } from "vee-validate";
+import datePicker from "@/digital-components/date-picker/date-picker";
+import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
+import textBlock from "@/digital-components/text-block/text-block";
+
+// Supporting files
+import { queryStrings } from "@/constants/query-strings";
+import { getQuerystringParameter } from "@/helpers/querystring-helper";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import {
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString,
+} from "@/layouts/schedule/helpers/schedule-helper";
+import {
+    AppointmentTypeStrings,
+    PREMIUM_FEE_PART_TYPE,
+    PRICING_BY_DAY_PART_TYPE,
+} from "@/constants/schedule-constants";
+import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import store from "@/store";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
+import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
+import { partNumberStrings } from "@/constants/part-number-strings";
+import { deepClone } from "@/helpers/object-helper";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+// DEFINE VALIDATION RULES
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+
+// Define constants
+const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+
+const getAvailableDates = async (
+    startDateString,
+    endDateString,
+    appointmentType,
+    providerNumber
+) => {
+    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
+    const difference = calcDaysBetweenDates(startDateString, endDateString);
+    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+    const storeActionConfigs = [];
+    const timeSlotsData = {};
+    timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = endDateString;
+
+    for (let i = 1; i <= apiCallsCount; i++) {
+        let storeActionConfig;
+
+        if (i > 1) {
+            apiStartDate = sumDateString(apiEndDate, 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+
+            if (i === apiCallsCount) {
+                apiEndDate = endDateString;
+            }
+        } else {
+            if (apiEndDate > apiEndDateLimit) {
+                apiEndDate = apiEndDateLimit;
+            }
+        }
+
+        if (appointmentType === AppointmentTypeStrings.MOBILE) {
+            storeActionConfig = {
+                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                },
+            };
+        } else {
+            storeActionConfig = {
+                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                    shopAppointmentType: appointmentType,
+                    providerNumber: providerNumber,
+                },
+            };
+        }
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+    }
+
+    const timeSlotsResponsesData = {
+        days: [],
+    };
+
+    function compareDayStrings(a, b) {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return 1;
+        return 0;
+    }
+
+    const makeParallelCalls = async () => {
+        await Promise.all(
+            storeActionConfigs.map(async (storeAction) => {
+                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeAction.storeAction,
+                    storeAction.payload,
+                    "schedule",
+                    false
+                );
+                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+                timeSlotsResponsesData.days = [
+                    ...timeSlotsResponsesData.days,
+                    ...timeSlotsResponse.data.days,
+                ];
+            })
+        );
+    };
+
+    return makeParallelCalls().then(() => {
+        // sort days chronologically
+        timeSlotsResponsesData.days.sort(compareDayStrings);
+        return timeSlotsResponsesData;
+    });
+};
+
+export default {
+    name: "schedule",
+    data() {
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null,
+            waitListRequested: null,
+            displayWaitList: null,
+            pricingByDayUpchargeLineItem: null,
+            includePricingByDayUpcharge: null,
+            isPricingByDayExperiment: null,
+            pricingByDayBasePrice: null,
+            pricingByDayUpcharge: null,
+            showPricingByDay: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
+            experimentSettings.PRICING_BY_DAY,
+            "true"
+        );
+        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
+
+        // Get pricingByDayBasePrice needed for Pricing By Day
+        const lineItems = deepClone(store.getters.order.lineItems);
+        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
+        const shouldHideRecalibration =
+            experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.RECAL_PRICE_REMOVE,
+                "true"
+            ) && isRecalibrationOnOrder;
+        const glassParts =
+            isRecalibrationOnOrder && shouldHideRecalibration
+                ? getItemsWithoutRecalParts(lineItems.glassParts)
+                : (lineItems.glassParts ?? []);
+        const supportingItemsFromStore = lineItems?.supportingItems;
+        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
+            lineItems.supportingItems,
+            {
+                partNumbersToRemove: [
+                    partNumberStrings.RECYCLE_FEE,
+                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
+                ],
+            }
+        );
+        const lineItemsToBePriced = {
+            glassParts: glassParts,
+            supportingItems: supportingItemsWithoutFees,
+            vaps: lineItems.vaps ?? [],
+            promos: lineItems.promos ?? [],
+        };
+        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
+        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
+        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
+        let includePricingByDayUpcharge = false;
+
+        //  Check to see if date should be pre-selected
+        let preSelectedSlot = await store.getters.order.schedule;
+        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
+            preSelectedSlot = null;
+        } else {
+            // Check to see if pre-selected date should have pricing by day upcharge
+            if (showPricingByDay) {
+                // is this preSelectedDate a higher priced pricingByDay day?
+                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
+                const dayObject = DAYS_OF_WEEK[dayIndex];
+                if (dayObject.isPricingByDayUpchargeDay) {
+                    includePricingByDayUpcharge = true;
+                }
+            }
+        }
+
+        // Set up promises
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            store.getters.order.serviceLocation.zipCodeCtu,
+            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
+        );
+
+        // While Pricing By Day Experiment is active, using the updated datePicker
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+            // setup config options for date-picker
+            selectableDatesSetting: "custom",
+            initialViewRowsToShow: 2,
+            customSelectableDatesCallback: getAvailableDates,
+            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
+        });
+
+        // Get pricingByDayUpcharge needed for Pricing By Day
+        const pricingByDayUpchargePartPromise = showPricingByDay
+            ? getPricingByDayPartWithPrice()
+            : null;
+
+        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_MOBILE_PREMIUM_FEE,
+            null,
+            "schedule"
+        );
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+                    {
+                        availableLineItems: [result.data],
+                    },
+                    "schedule",
+                    false
+                );
+            } else {
+                return result.data;
+            }
+        });
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "alertReasons",
+                promise: alertReasonsPromise,
+            },
+            {
+                resultKey: "datePickerInitialData",
+                promise: datePickerInitialDataPromise,
+            },
+            {
+                resultKey: "pricingByDayUpchargePart",
+                promise: pricingByDayUpchargePartPromise,
+            },
+            {
+                resultKey: "premiumFeeWithPrice",
+                promise: premiumFeeWithPricePromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        const pricingByDayUpcharge = showPricingByDay
+            ? await baseMixin.methods.getTotalLineItemPrice(
+                  resultMap.pricingByDayUpchargePart,
+                  false
+              )
+            : null;
+
+        const datePickerInitialData = resultMap.datePickerInitialData;
+        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
+        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
+            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
+                ? resultMap.premiumFeeWithPrice[0]
+                : null;
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+            vm.setDisplayWaitList();
+            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
+            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
+            vm.isPricingByDayExperiment = isPricingByDayExperiment;
+            vm.pricingByDayBasePrice = pricingByDayBasePrice;
+            vm.pricingByDayUpcharge = pricingByDayUpcharge;
+            vm.showPricingByDay = showPricingByDay;
+        });
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const selectableDatesData = this.selectableDatesData;
+            // if no date selected on load
+            if (!this.selectedDate) {
+                if (selectableDatesData?.days?.length > 0) {
+                    this.selectedDate = selectableDatesData.days[0].date;
+                } else {
+                    setTimeout(() => {
+                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
+                            this.selectableDatesData = moreSelectableDatesData;
+                            if (selectableDatesData?.days?.length > 0) {
+                                this.selectedDate = selectableDatesData.days[0].date;
+                            }
+
+                            this.setDisplayWaitList();
+                        });
+                    }, 50);
+                }
+            }
+        });
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent("ChangeShopLink", "Text");
+        },
+        ChangeShopLink() {
+            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        timeSlotsForSelectedDate() {
+            if (!this.selectedDate) return null;
+
+            return this.selectableDatesData.days?.find(
+                (selectableDate) => selectableDate.date === this.selectedDate
+            );
+        },
+    },
+    methods: {
+        splitCopyOnCMSPlaceHolder,
+        arePagePrerequisitesValid() {
+            const serviceLocation = store.getters.order.serviceLocation;
+
+            const serviceLocationPreReqs =
+                serviceLocation.zipCode &&
+                serviceLocation.zipCodeCtu &&
+                serviceLocation.appointmentType &&
+                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+                    serviceLocation.provider.providerNumber);
+
+            const paymentInfo = store.getters.payment.isInsurance !== null;
+
+            const damageInfo =
+                store.getters.order.damage.isRepair ||
+                (store.getters.order.lineItems?.glassParts != null &&
+                    store.getters.order.lineItems.glassParts.length > 0);
+
+            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
+
+            // prettier-ignore
+            {
+                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
+                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
+                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
+                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
+                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
+            }
+            return preReqResult;
+        },
+        async getAvailableDatesMethod(startDate, endDate) {
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
+            );
+
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            this.selectableDatesData.days = this.selectableDatesData.days.concat(
+                newShopTimeSlots.days
+            );
+            return newShopTimeSlots;
+        },
+        getAvailableDates,
+        getServiceZipCtuCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCodeCtu;
+        },
+        getSelectedDate() {
+            return store.getters.order.schedule.date;
+        },
+        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;
+        },
+        updateFooterButtonText(timeSlotInfo) {
+            let navbarButtonText;
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+                navbarButtonText = "Continue";
+            } else {
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                    timeSlotInfo.timeSlot.date
+                )}`;
+
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime
+                    )}`;
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    !timeSlotInfo.isPremiumAppointment
+                ) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime,
+                        true
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
+                }
+            }
+            this.$refs.navbar.updateButtonText(navbarButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(selectedDate);
+            // Ex: April 25
+            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
+        },
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            // Expected input: "HH:MM"
+            let hours = parseInt(militaryTimeInput.split(":")[0]);
+            const minutes = militaryTimeInput.split(":")[1];
+            const meridianNotation = hours > 11 ? "PM" : "AM";
+
+            if (hours > 12) {
+                hours -= 12;
+            }
+
+            if (shouldTrimMinutesIfEmpty && minutes === "00") {
+                return `${hours} ${meridianNotation}`;
+            } else {
+                return `${hours}:${minutes} ${meridianNotation}`;
+            }
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        forwardButtonAction() {
+            this.updateSupportingItems();
+
+            if (this.displayWaitList) {
+                var gaLabel = "";
+                const status = this.waitListRequested ? "checked" : "unchecked";
+                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
+                gaLabel = `${status}_${type}`;
+
+                const currentDate = new Date();
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const appointmentDate = new Date(year, month - 1, day);
+                const timeDifference = appointmentDate - currentDate;
+
+                // Convert the time difference from milliseconds to days
+                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+
+                gaLabel +=
+                    "_" +
+                    daysUntilAppointment.toString() +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCode +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCodeCtu;
+                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
+            }
+            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
+                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
+                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                this.selectedTimeSlotInfo.timeSlot,
+                false
+            );
+
+            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_WAITLIST_REQUESTED,
+                    this.waitListRequested,
+                    false
+                );
+            }
+
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setDisplayWaitList() {
+            if (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_WAITLIST,
+                    "true"
+                ) &&
+                this.selectableDatesData.days[0]
+            ) {
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const targetDate = new Date(year, month - 1, day);
+                const currentDate = new Date();
+                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();
+
+            // if we have a pricing by day upcharge, then save/update supporting items with it
+            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
+                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
+            );
+
+            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
+                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
+                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
+                        this.pricingByDayUpchargeLineItem.laborAmount;
+                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
+                        this.pricingByDayUpchargeLineItem.sellingPrice;
+                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
+                        this.pricingByDayUpchargeLineItem.kitPrice;
+                } else {
+                    supportingItems.push(this.pricingByDayUpchargeLineItem);
+                }
+            } else {
+                if (pricingByDayUpchargeFeeIndex >= 0) {
+                    // remove pricing by day upcharge if it already was in store
+                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
+                }
+            }
+
+            // if we have a premium fee(early bird), then save/update supporting items
+            if (
+                this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                this.selectedTimeSlotInfo?.isPremiumAppointment
+            ) {
+                const premiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (premiumFeeIndex > -1) {
+                    supportingItems[premiumFeeIndex].laborAmount =
+                        this.mobilePremiumAppointmentFee.laborAmount;
+                    supportingItems[premiumFeeIndex].sellingPrice =
+                        this.mobilePremiumAppointmentFee.sellingPrice;
+                    supportingItems[premiumFeeIndex].kitPrice =
+                        this.mobilePremiumAppointmentFee.kitPrice;
+                } else {
+                    supportingItems.push(this.mobilePremiumAppointmentFee);
+                }
+            } else {
+                if (!supportingItems) {
+                    return;
+                }
+
+                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
+                const removePremiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (removePremiumFeeIndex >= 0) {
+                    supportingItems.splice(removePremiumFeeIndex, 1);
+                }
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                supportingItems,
+                false
+            );
+        },
+        handleWaitListRequested(value) {
+            this.waitListRequested = value;
+        },
+        handleDateClicked(date) {
+            // do something to mark this as upcharge day or not...
+            if (date.isPricingByDayUpchargeDay) {
+                this.includePricingByDayUpcharge = true;
+            } else {
+                this.includePricingByDayUpcharge = false;
+            }
+        },
+        updateTimeSlot(timeSlot) {
+            this.selectedTimeSlotInfo = timeSlot;
+        },
+    },
+    watch: {
+        selectedDate(newValue, oldValue) {
+            // Clear time slot selection if date selected changes
+            if (newValue !== oldValue) {
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null,
+                    },
+                    isPremiumAppointment: null,
+                };
+            }
+        },
+        selectedTimeSlotInfo(newValue) {
+            this.updateFooterButtonText(newValue);
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        datePicker,
+        locationAlerts,
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss">
+.container-fluid {
+    &.page-schedule {
+        padding: 0 1rem;
+        .text-link-small {
+            a,
+            .btn-link {
+                width: auto;
+                margin: 0 auto;
+                height: auto;
+                font-size: 0.875rem;
+                line-height: 1.75;
+                padding: 0;
+                border-radius: 0;
+                &:focus {
+                    outline: 1px solid $blue;
+                }
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
+            }
+        }
+        .funnel-sub-header {
+            h5.dark-header {
+                margin-bottom: 0.25rem;
+            }
+        }
+        .change-location a {
+            font-family: AvertaSemibold;
+        }
+        .time-slots-question {
+            padding: 0 0.75rem;
+        }
+    }
+}
+</style>
+
+<!-- OLD SCHEDULE ENDS -->
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 37a0b8029..9e1506e2e 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,793 +1,3 @@
-<!-- OLD SCHEDULE BEGINS -->
-
-
-
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles page-schedule">
-            <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 cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    <template v-if="ChangeShopLink.length">
-                        <textBlock
-                            cmsWidgetName="ChangeShopLink"
-                            justifyText="center"
-                            class="mb-5 text-link-small change-location"
-                            marginTopSizeOverride="1" />
-                    </template>
-                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <datePicker
-                        customComponentId="dateQuestion"
-                        selectableDatesSetting="custom"
-                        ref="datePicker"
-                        v-model="selectedDate"
-                        class="text-link-small"
-                        :customSelectableDatesCallback="getAvailableDatesMethod"
-                        validationRules="date-required"
-                        @date-clicked="handleDateClicked"
-                        :pricingByDayBasePrice="pricingByDayBasePrice"
-                        :pricingByDayUpcharge="pricingByDayUpcharge"
-                        :showPricingByDay="showPricingByDay"
-                        :isPricingByDayExperiment="isPricingByDayExperiment"
-                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                        :appointmentType="appointmentType"
-                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                        :estimatedServiceMinutesMinimum="
-                            selectableDatesData.estimatedServiceMinutesMinimum
-                        "
-                        :estimatedServiceMinutesMaximum="
-                            selectableDatesData.estimatedServiceMinutesMaximum
-                        "
-                        @TimeSlotSelected="updateTimeSlot"
-                        :displayWaitList="displayWaitList"
-                        @waitListRequested="handleWaitListRequested" />
-                    <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form>
-</template>
-
-<script>
-// Components
-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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
-import datePicker from "@/digital-components/date-picker/date-picker";
-import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
-import textBlock from "@/digital-components/text-block/text-block";
-
-// Supporting files
-import { queryStrings } from "@/constants/query-strings";
-import { getQuerystringParameter } from "@/helpers/querystring-helper";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
-import {
-    calcDaysBetweenDates,
-    convertDateStringToDate,
-    sumDateString,
-} from "@/layouts/schedule/helpers/schedule-helper";
-import {
-    AppointmentTypeStrings,
-    PREMIUM_FEE_PART_TYPE,
-    PRICING_BY_DAY_PART_TYPE,
-} from "@/constants/schedule-constants";
-import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
-import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import store from "@/store";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-import { experimentSettings } from "@/constants/experiments";
-import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
-import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
-import { partNumberStrings } from "@/constants/part-number-strings";
-import { deepClone } from "@/helpers/object-helper";
-import { debugLog } from "@/helpers/debug-log-helper";
-
-// DEFINE VALIDATION RULES
-defineRule("date-required", required(errorMessages.DATE_REQUIRED));
-
-// Define constants
-const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
-
-const getAvailableDates = async (
-    startDateString,
-    endDateString,
-    appointmentType,
-    providerNumber
-) => {
-    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
-    const difference = calcDaysBetweenDates(startDateString, endDateString);
-    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
-    const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
-    let apiStartDate = startDateString;
-    let apiEndDate = endDateString;
-
-    for (let i = 1; i <= apiCallsCount; i++) {
-        let storeActionConfig;
-
-        if (i > 1) {
-            apiStartDate = sumDateString(apiEndDate, 1);
-            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
-
-            if (i === apiCallsCount) {
-                apiEndDate = endDateString;
-            }
-        } else {
-            if (apiEndDate > apiEndDateLimit) {
-                apiEndDate = apiEndDateLimit;
-            }
-        }
-
-        if (appointmentType === AppointmentTypeStrings.MOBILE) {
-            storeActionConfig = {
-                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                },
-            };
-        } else {
-            storeActionConfig = {
-                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                    shopAppointmentType: appointmentType,
-                    providerNumber: providerNumber,
-                },
-            };
-        }
-        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
-    }
-
-    const timeSlotsResponsesData = {
-        days: [],
-    };
-
-    function compareDayStrings(a, b) {
-        if (a.date < b.date) return -1;
-        if (a.date > b.date) return 1;
-        return 0;
-    }
-
-    const makeParallelCalls = async () => {
-        await Promise.all(
-            storeActionConfigs.map(async (storeAction) => {
-                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
-                    storeAction.storeAction,
-                    storeAction.payload,
-                    "schedule",
-                    false
-                );
-                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-                timeSlotsResponsesData.days = [
-                    ...timeSlotsResponsesData.days,
-                    ...timeSlotsResponse.data.days,
-                ];
-            })
-        );
-    };
-
-    return makeParallelCalls().then(() => {
-        // sort days chronologically
-        timeSlotsResponsesData.days.sort(compareDayStrings);
-        return timeSlotsResponsesData;
-    });
-};
-
-export default {
-    name: "schedule",
-    data() {
-        return {
-            selectedDate: this.getSelectedDate(),
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-            selectableDatesData: [],
-            mobilePremiumAppointmentFee: null,
-            waitListRequested: null,
-            displayWaitList: null,
-            pricingByDayUpchargeLineItem: null,
-            includePricingByDayUpcharge: null,
-            isPricingByDayExperiment: null,
-            pricingByDayBasePrice: null,
-            pricingByDayUpcharge: null,
-            showPricingByDay: null,
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
-            experimentSettings.PRICING_BY_DAY,
-            "true"
-        );
-        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
-
-        // Get pricingByDayBasePrice needed for Pricing By Day
-        const lineItems = deepClone(store.getters.order.lineItems);
-        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
-        const shouldHideRecalibration =
-            experimentMixin.methods.hasSettingEqualTo(
-                experimentSettings.RECAL_PRICE_REMOVE,
-                "true"
-            ) && isRecalibrationOnOrder;
-        const glassParts =
-            isRecalibrationOnOrder && shouldHideRecalibration
-                ? getItemsWithoutRecalParts(lineItems.glassParts)
-                : (lineItems.glassParts ?? []);
-        const supportingItemsFromStore = lineItems?.supportingItems;
-        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
-            lineItems.supportingItems,
-            {
-                partNumbersToRemove: [
-                    partNumberStrings.RECYCLE_FEE,
-                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
-                ],
-            }
-        );
-        const lineItemsToBePriced = {
-            glassParts: glassParts,
-            supportingItems: supportingItemsWithoutFees,
-            vaps: lineItems.vaps ?? [],
-            promos: lineItems.promos ?? [],
-        };
-        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
-        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
-        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
-        let includePricingByDayUpcharge = false;
-
-        //  Check to see if date should be pre-selected
-        let preSelectedSlot = await store.getters.order.schedule;
-        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
-            preSelectedSlot = null;
-        } else {
-            // Check to see if pre-selected date should have pricing by day upcharge
-            if (showPricingByDay) {
-                // is this preSelectedDate a higher priced pricingByDay day?
-                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
-                const dayObject = DAYS_OF_WEEK[dayIndex];
-                if (dayObject.isPricingByDayUpchargeDay) {
-                    includePricingByDayUpcharge = true;
-                }
-            }
-        }
-
-        // Set up promises
-        const cmsContentPromise = fetchCmsContentForPage(to.name);
-
-        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
-            store.getters.order.serviceLocation.zipCodeCtu,
-            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
-        );
-
-        // While Pricing By Day Experiment is active, using the updated datePicker
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: 2,
-            customSelectableDatesCallback: getAvailableDates,
-            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
-        });
-
-        // Get pricingByDayUpcharge needed for Pricing By Day
-        const pricingByDayUpchargePartPromise = showPricingByDay
-            ? getPricingByDayPartWithPrice()
-            : null;
-
-        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
-            storeActions.GET_MOBILE_PREMIUM_FEE,
-            null,
-            "schedule"
-        );
-        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
-            if (result.data) {
-                return baseMixin.methods.dispatchStoreActionWithLogging(
-                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
-                    {
-                        availableLineItems: [result.data],
-                    },
-                    "schedule",
-                    false
-                );
-            } else {
-                return result.data;
-            }
-        });
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "alertReasons",
-                promise: alertReasonsPromise,
-            },
-            {
-                resultKey: "datePickerInitialData",
-                promise: datePickerInitialDataPromise,
-            },
-            {
-                resultKey: "pricingByDayUpchargePart",
-                promise: pricingByDayUpchargePartPromise,
-            },
-            {
-                resultKey: "premiumFeeWithPrice",
-                promise: premiumFeeWithPricePromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        const pricingByDayUpcharge = showPricingByDay
-            ? await baseMixin.methods.getTotalLineItemPrice(
-                  resultMap.pricingByDayUpchargePart,
-                  false
-              )
-            : null;
-
-        const datePickerInitialData = resultMap.datePickerInitialData;
-        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
-        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
-
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
-            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
-            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
-                ? resultMap.premiumFeeWithPrice[0]
-                : null;
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-            vm.setDisplayWaitList();
-            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
-            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
-            vm.isPricingByDayExperiment = isPricingByDayExperiment;
-            vm.pricingByDayBasePrice = pricingByDayBasePrice;
-            vm.pricingByDayUpcharge = pricingByDayUpcharge;
-            vm.showPricingByDay = showPricingByDay;
-        });
-    },
-    mounted() {
-        this.$nextTick(() => {
-            const selectableDatesData = this.selectableDatesData;
-            // if no date selected on load
-            if (!this.selectedDate) {
-                if (selectableDatesData?.days?.length > 0) {
-                    this.selectedDate = selectableDatesData.days[0].date;
-                } else {
-                    setTimeout(() => {
-                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
-                            this.selectableDatesData = moreSelectableDatesData;
-                            if (selectableDatesData?.days?.length > 0) {
-                                this.selectedDate = selectableDatesData.days[0].date;
-                            }
-
-                            this.setDisplayWaitList();
-                        });
-                    }, 50);
-                }
-            }
-        });
-    },
-    computed: {
-        ChangeShopLinkText() {
-            return this.getCmsContent("ChangeShopLink", "Text");
-        },
-        ChangeShopLink() {
-            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
-            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
-        },
-        appointmentType() {
-            return this.$store.getters.order.serviceLocation.appointmentType;
-        },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) return null;
-
-            return this.selectableDatesData.days?.find(
-                (selectableDate) => selectableDate.date === this.selectedDate
-            );
-        },
-    },
-    methods: {
-        splitCopyOnCMSPlaceHolder,
-        arePagePrerequisitesValid() {
-            const serviceLocation = store.getters.order.serviceLocation;
-
-            const serviceLocationPreReqs =
-                serviceLocation.zipCode &&
-                serviceLocation.zipCodeCtu &&
-                serviceLocation.appointmentType &&
-                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
-                    serviceLocation.provider.providerNumber);
-
-            const paymentInfo = store.getters.payment.isInsurance !== null;
-
-            const damageInfo =
-                store.getters.order.damage.isRepair ||
-                (store.getters.order.lineItems?.glassParts != null &&
-                    store.getters.order.lineItems.glassParts.length > 0);
-
-            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
-
-            // prettier-ignore
-            {
-                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
-                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
-                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
-                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
-                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
-            }
-            return preReqResult;
-        },
-        async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(
-                startDate,
-                endDate,
-                this.appointmentType,
-                this.$store.getters.order.serviceLocation.provider.providerNumber
-            );
-
-            // ADD API CALL RESULTS TO EXISTING DATE DATA
-            this.selectableDatesData.days = this.selectableDatesData.days.concat(
-                newShopTimeSlots.days
-            );
-            return newShopTimeSlots;
-        },
-        getAvailableDates,
-        getServiceZipCtuCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCodeCtu;
-        },
-        getSelectedDate() {
-            return store.getters.order.schedule.date;
-        },
-        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;
-        },
-        updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                navbarButtonText = "Continue";
-            } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
-                    timeSlotInfo.timeSlot.date
-                )}`;
-
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime
-                    )}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                    !timeSlotInfo.isPremiumAppointment
-                ) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.navbar.updateButtonText(navbarButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            // Ex: April 25
-            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
-        },
-        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(":")[0]);
-            const minutes = militaryTimeInput.split(":")[1];
-            const meridianNotation = hours > 11 ? "PM" : "AM";
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === "00") {
-                return `${hours} ${meridianNotation}`;
-            } else {
-                return `${hours}:${minutes} ${meridianNotation}`;
-            }
-        },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_BACK,
-                this.pageName
-            );
-        },
-        forwardButtonAction() {
-            this.updateSupportingItems();
-
-            if (this.displayWaitList) {
-                var gaLabel = "";
-                const status = this.waitListRequested ? "checked" : "unchecked";
-                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
-                gaLabel = `${status}_${type}`;
-
-                const currentDate = new Date();
-                const dateString = this.selectableDatesData.days[0].date;
-                const [year, month, day] = dateString.split("-").map(Number);
-                const appointmentDate = new Date(year, month - 1, day);
-                const timeDifference = appointmentDate - currentDate;
-
-                // Convert the time difference from milliseconds to days
-                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
-
-                gaLabel +=
-                    "_" +
-                    daysUntilAppointment.toString() +
-                    "_" +
-                    store.getters.order.serviceLocation.zipCode +
-                    "_" +
-                    store.getters.order.serviceLocation.zipCodeCtu;
-                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
-            }
-            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
-                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
-                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
-                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
-                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
-            }
-
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_SCHEDULE,
-                this.selectedTimeSlotInfo.timeSlot,
-                false
-            );
-
-            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_WAITLIST_REQUESTED,
-                    this.waitListRequested,
-                    false
-                );
-            }
-
-            this.$router.navigateWithSaving(
-                this.navigationScenarios.CLICKED_FORWARD,
-                this.pageName
-            );
-        },
-        setDisplayWaitList() {
-            if (
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_WAITLIST,
-                    "true"
-                ) &&
-                this.selectableDatesData.days[0]
-            ) {
-                const dateString = this.selectableDatesData.days[0].date;
-                const [year, month, day] = dateString.split("-").map(Number);
-                const targetDate = new Date(year, month - 1, day);
-                const currentDate = new Date();
-                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();
-
-            // if we have a pricing by day upcharge, then save/update supporting items with it
-            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
-                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
-            );
-
-            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
-                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
-                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
-                        this.pricingByDayUpchargeLineItem.laborAmount;
-                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
-                        this.pricingByDayUpchargeLineItem.sellingPrice;
-                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
-                        this.pricingByDayUpchargeLineItem.kitPrice;
-                } else {
-                    supportingItems.push(this.pricingByDayUpchargeLineItem);
-                }
-            } else {
-                if (pricingByDayUpchargeFeeIndex >= 0) {
-                    // remove pricing by day upcharge if it already was in store
-                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
-                }
-            }
-
-            // if we have a premium fee(early bird), then save/update supporting items
-            if (
-                this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                this.selectedTimeSlotInfo?.isPremiumAppointment
-            ) {
-                const premiumFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
-
-                if (premiumFeeIndex > -1) {
-                    supportingItems[premiumFeeIndex].laborAmount =
-                        this.mobilePremiumAppointmentFee.laborAmount;
-                    supportingItems[premiumFeeIndex].sellingPrice =
-                        this.mobilePremiumAppointmentFee.sellingPrice;
-                    supportingItems[premiumFeeIndex].kitPrice =
-                        this.mobilePremiumAppointmentFee.kitPrice;
-                } else {
-                    supportingItems.push(this.mobilePremiumAppointmentFee);
-                }
-            } else {
-                if (!supportingItems) {
-                    return;
-                }
-
-                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
-                const removePremiumFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
-
-                if (removePremiumFeeIndex >= 0) {
-                    supportingItems.splice(removePremiumFeeIndex, 1);
-                }
-            }
-
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                supportingItems,
-                false
-            );
-        },
-        handleWaitListRequested(value) {
-            this.waitListRequested = value;
-        },
-        handleDateClicked(date) {
-            // do something to mark this as upcharge day or not...
-            if (date.isPricingByDayUpchargeDay) {
-                this.includePricingByDayUpcharge = true;
-            } else {
-                this.includePricingByDayUpcharge = false;
-            }
-        },
-        updateTimeSlot(timeSlot) {
-            this.selectedTimeSlotInfo = timeSlot;
-        },
-    },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null,
-                    },
-                    isPremiumAppointment: null,
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        },
-    },
-    components: {
-        funnelHeader,
-        navbar,
-        funnelSubHeader,
-        Form,
-        loadingModal,
-        datePicker,
-        locationAlerts,
-        textBlock,
-    },
-};
-</script>
-
-<style lang="scss">
-.container-fluid {
-    &.page-schedule {
-        padding: 0 1rem;
-        .text-link-small {
-            a,
-            .btn-link {
-                width: auto;
-                margin: 0 auto;
-                height: auto;
-                font-size: 0.875rem;
-                line-height: 1.75;
-                padding: 0;
-                border-radius: 0;
-                &:focus {
-                    outline: 1px solid $blue;
-                }
-                @include media-breakpoint-up(md) {
-                    font-size: 1rem;
-                }
-            }
-        }
-        .funnel-sub-header {
-            h5.dark-header {
-                margin-bottom: 0.25rem;
-            }
-        }
-        .change-location a {
-            font-family: AvertaSemibold;
-        }
-        .time-slots-question {
-            padding: 0 0.75rem;
-        }
-    }
-}
-</style>
-
--->
-
-<!-- OLD SCHEDULE ENDS -->
-
-
-<!-- NEW SCHEDULE BEGINS -->
-
-<!-- 
-
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -1656,8 +866,4 @@ export default {
         }
     }
 }
-</style>
-
--->
-
-<!-- NEW SCHEDULE ENDS -->
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/layouts/service-location/service-location-june-2025.vue b/src/layouts/service-location/service-location-june-2025.vue
new file mode 100644
index 000000000..306d1aab3
--- /dev/null
+++ b/src/layouts/service-location/service-location-june-2025.vue
@@ -0,0 +1,850 @@
+<!-- OLD SERVICE LOCATION BEGINS -->
+
+<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <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 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <serviceZipModalQuestion
+                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
+                        v-model="serviceZipCodeQuestion"
+                        ref="serviceZipCodeQuestion"
+                        :carId="carId"
+                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
+                        :mobileFeePart="mobileFeePart"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-bill-to-account-number="setBillToAccountNumber"
+                        linkWidgetName="ServiceZipLinkWidget"
+                        modalWidgetName="ServiceZipModalWidget" />
+
+                    <alert
+                        ref="alertMilitaryBaseZip"
+                        class="my-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        v-if="displayMilitaryZipAlert"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertMobileOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        v-if="displayServiceableMobileOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertRecalNoMobile"
+                        class="my-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        v-if="displayRecalibrationWarning"
+                        @text-link-clicked="openModalAction"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertInshopOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        v-if="displayServiceableInshopOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertNoShops"
+                        class="my-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        v-if="displayNoShopsAlert"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertMobileFeeFree"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileFeeFreeWidget"
+                        v-if="showMobileFreeAlert"
+                        alertClass="alert-success" />
+                </div>
+            </div>
+            <div class="row justify-content-center appointment-type">
+                <div class="col-md-6">
+                    <appointmentTypeQuestion
+                        v-model="selectedAppointmentType"
+                        v-show="isAppointmentTypeDisplayed"
+                        :isServiceableMobile="isServiceableMobile"
+                        :isServiceableInshop="isServiceableInshop"
+                        :isServiceableDropoff="isServiceableDropoff"
+                        :isDisplayed="isAppointmentTypeDisplayed"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        :zipCode="zipCode"
+                        ref="appointmentTypeQuestion"
+                        groupName="appointmentTypeQuestion"
+                        cmsWidgetName="AppointmentTypeQuestionWidget"
+                        validationRules="option-required"
+                        labelBold="true" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <mobileLocationModalQuestions
+                        customComponentId="mobileLocationQuestions"
+                        v-show="selectedAppointmentType === 'Mobile'"
+                        v-model="mobileLocationQuestions"
+                        :mobileFeePart="mobileFeePart"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-mobile-ctu="setCtuForMobile"
+                        validationRules="mobile-location-required"
+                        ref="mobileLocationQuestions"
+                        linkWidgetName="MobileLocationLinkWidget"
+                        modalWidgetName="MobileLocationModalWidget"
+                        @setMobileLocation="setMobileLocationQuestions"
+                        @set-mobile-location-invalid="setMobileLocationInValid" />
+
+                    <shopQuestion
+                        ref="shopQuestion"
+                        v-show="isShopQuestionDisplayed"
+                        v-model="selectedProvider"
+                        :selectedAppointmentType="selectedAppointmentType"
+                        :shopProviderData="shopProviderData"
+                        :isDisplayed="isShopQuestionDisplayed"
+                        cmsWidgetName="ShopQuestionWidget" />
+
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
+import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
+import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
+
+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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form } from "vee-validate";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+
+// Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+    getShopProviderData,
+    getZipCodeData,
+} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { applicationConfig } from "@/constants/application-config";
+import { Provider } from "@/layouts/service-location/classes/provider";
+import { partNumberStrings } from "@/constants/part-number-strings";
+
+import store from "@/store";
+
+// Validation
+import { defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
+
+const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
+
+// DEFINE VALIDATION RULES
+defineRule("mobile-location-required", (value) => {
+    const addressQuestionsValues = Object.values(
+        [
+            value.addressQuestions.streetAddress,
+            value.addressQuestions.city,
+            value.isVehicleProtected,
+        ] || {}
+    );
+    const filledFields = addressQuestionsValues.filter(
+        (val) => val !== null && val !== undefined && val !== ""
+    );
+    if (
+        value.isMobileSelected &&
+        filledFields.length > 0 &&
+        filledFields.length < addressQuestionsValues.length
+    ) {
+        return errorMessages.MOBILE_LOCATION_REQUIRED;
+    }
+    return true;
+});
+
+export default {
+    name: "service-location",
+    data() {
+        return {
+            streetAddress: this.getServiceAddressFromStore(),
+            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
+            carId: this.getCarIdfromStore(),
+            city: this.getServiceCityFromStore(),
+            state: this.getServiceStateFromStore(),
+            zipCode: this.getServiceZipCodeFromStore(),
+            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
+            isGlassServiceableInshop: null,
+            isRecalibrationServiceableInshop: null,
+            isGlassServiceableDropoff: null,
+            isRecalibrationServiceableDropoff: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
+            selectedAppointmentType: this.getSelectedAppointmentType(),
+            selectedProvider: this.getSelectedProvider(),
+            mobileFeePart: null,
+            recycleFeePart: null,
+            zipContainsMilitaryBase: false,
+            zipCodeCtu: null,
+            billToAccountNumber: null,
+            shopProviderData: null,
+            navigatingForward: false,
+            isMobileAddressValid: true,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
+
+        const serviceabilityDetailsPromise = getServiceabilityDetails(
+            serviceZipCode,
+            null,
+            "service-location"
+        );
+
+        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
+
+        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "zipCodeData",
+                promise: zipCodeDataPromise,
+            },
+            {
+                resultKey: "mobileFeePart",
+                promise: mobileFeePartPromise,
+            },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
+            {
+                resultKey: "shopProviderData",
+                promise: shopProviderDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart,
+                resultMap.shopProviderData
+            );
+        });
+    },
+    computed: {
+        serviceZipCodeQuestion: {
+            get: function () {
+                return {
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.zipCode !== this.zipCode) {
+                    this.resetMobileLocation();
+                    this.selectedAppointmentType = null;
+                    this.selectedProvider = new Provider();
+                }
+
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+                this.zipCodeCtu = newValue.zipCodeCtu;
+
+                this.$nextTick();
+            },
+        },
+        mobileLocationQuestions: {
+            get: function () {
+                return {
+                    addressQuestions: {
+                        streetAddress: this.streetAddress,
+                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
+                        city: this.city,
+                        state: this.state,
+                        zipCode: this.zipCode,
+                    },
+                    isVehicleProtected: this.isVehicleProtected,
+                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
+                };
+            },
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return (
+                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
+                    this.isMobileStaticRecalibrationApplicable
+                );
+            } else {
+                return this.isGlassServiceableMobile;
+            }
+        },
+        isMobileStaticRecalibrationApplicable() {
+            return (
+                this.displayMSR &&
+                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
+                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
+            );
+        },
+        displayMSR() {
+            return (
+                experimentMixin.methods
+                    .getSettingValue(experimentSettings.DISPLAY_MSR)
+                    ?.toLowerCase() === "true"
+            );
+        },
+        isCashItacNoComp() {
+            return !this.isInsurance || this.isITAC || this.isNoComp;
+        },
+        mobileFeeHasPrice() {
+            return (
+                this.mobileFeePart?.laborAmount > 0 ||
+                this.mobileFeePart?.sellingPrice > 0 ||
+                this.mobileFeePart?.kitPrice > 0
+            );
+        },
+        mobileFeeApplies() {
+            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
+                return this.isCashItacNoComp;
+            } else {
+                return this.mobileFeeHasPrice;
+            }
+        },
+        showMobileFreeAlert() {
+            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
+                return true;
+            }
+            return false;
+        },
+        isServiceableInshop() {
+            if (this.isRecalibrationServiceableInshop !== null) {
+                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+            } else {
+                return this.isGlassServiceableInshop;
+            }
+        },
+        isServiceableDropoff() {
+            if (this.isRecalibrationServiceableDropoff !== null) {
+                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
+            } else {
+                return this.isGlassServiceableDropoff;
+            }
+        },
+        isShopQuestionDisplayed() {
+            return (
+                this.selectedAppointmentType === "Inshop" ||
+                this.selectedAppointmentType === "Dropoff"
+            );
+        },
+        isAppointmentTypeDisplayed() {
+            return this.zipCode && !this.displayNoShopsAlert;
+        },
+        requiresInshopRecalibration() {
+            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+            return (
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false &&
+                !this.isMobileStaticRecalibrationApplicable
+            );
+        },
+        displayRecalibrationWarning() {
+            return this.requiresInshopRecalibration;
+        },
+        displayServiceableInshopOnly() {
+            return (
+                !this.displayRecalibrationWarning &&
+                this.isServiceableInshop &&
+                !this.isServiceableMobile
+            );
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        },
+        displayServiceableMobileOnly() {
+            return this.isServiceableMobile && !this.isServiceableInshop;
+        },
+        displayNoShopsAlert() {
+            return !this.isServiceableInshop && !this.isServiceableMobile;
+        },
+        recalibrationInformationModal() {
+            return this.$refs.recalibrationInformationModal;
+        },
+        isInsurance() {
+            return store.getters.payment.isInsurance;
+        },
+        isITAC() {
+            return store.getters.order.policy.isItac;
+        },
+        isNoComp() {
+            return store.getters.order.policy.isNoComp;
+        },
+        isForwardActionDisabled() {
+            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
+            if (store.getters.payment.isInsurance) {
+                if (
+                    store.getters.payment.parentAccountNumber !==
+                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
+                    store.getters.order.policy.policyNumber &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
+                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+
+                    return false;
+                }
+            } else {
+                if (
+                    store.getters.lineItems.supportingItems &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Cash: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+                    return false;
+                }
+            }
+        },
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+                this.zipCodeCtu = zipCodeData.zipCodeCtu;
+            }
+
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+
+            if (mobileFeePart) {
+                this.mobileFeePart = mobileFeePart;
+            }
+
+            if (shopProviderData) {
+                this.shopProviderData = shopProviderData;
+            }
+
+            var gaLabel = this.GaLabels.NO;
+            if (this.isServiceableMobile) {
+                gaLabel = this.GaLabels.YES;
+            }
+
+            this.pushEventToGA(
+                this.GaCategories.APPOINTMENT,
+                this.GaActions.MOBILE_AVAILABLE,
+                gaLabel,
+                true
+            );
+        },
+        setContainsMilitaryBase(val) {
+            if (this.zipContainsMilitaryBase !== val) {
+                this.zipContainsMilitaryBase = val;
+            }
+        },
+        setBillToAccountNumber(val) {
+            this.billToAccountNumber = val;
+        },
+        setCtuForMobile(val) {
+            this.zipCodeCtu = val;
+        },
+        setMobileFeePart(mobileFeePart) {
+            this.mobileFeePart = mobileFeePart;
+        },
+        setRecycleFeePart(recycleFeePart) {
+            this.recycleFeePart = recycleFeePart;
+        },
+        //creating async function as the computed property can not directly handle asynchronous operations or promises.
+        async setMobileLocationQuestions(newValue) {
+            var newZipCode = newValue.addressQuestions.zipCode;
+            if (newZipCode !== this.zipCode) {
+                await getShopProviderData(newZipCode).then((result) => {
+                    if (this.isServiceableMobile) {
+                        this.shopProviderData = result.data;
+                        this.selectedProvider = new Provider(
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    }
+                });
+            }
+            if (this.isServiceableMobile) {
+                this.setMobileLocation(newValue);
+                this.setMobileLocationInValid(false);
+            } else {
+                await getZipCodeData(newZipCode).then((zipCodeData) => {
+                    this.serviceZipCodeQuestion = {
+                        state: zipCodeData.state,
+                        zipCode: newZipCode,
+                        zipCodeCtu: zipCodeData.zipCodeCtu,
+                    };
+                });
+            }
+        },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getServiceAddressFromStore() {
+            return store.getters.order.serviceLocation.address;
+        },
+        getServiceAddress2FromStore() {
+            return store.getters.order.serviceLocation.address2;
+        },
+        getServiceCityFromStore() {
+            return store.getters.order.serviceLocation.city;
+        },
+        getServiceStateFromStore() {
+            return store.getters.order.serviceLocation.state;
+        },
+        getServiceZipCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.order.vehicle?.isBigTruck ?? false;
+        },
+        getIsVehicleProtectedFromStore() {
+            return store.getters.order.serviceLocation.isVehicleProtected;
+        },
+        getSelectedAppointmentType() {
+            return store.getters.order.serviceLocation.appointmentType;
+        },
+        getSelectedProvider() {
+            return store.getters.order.serviceLocation.provider;
+        },
+        resetMobileLocation() {
+            this.streetAddress = "";
+            this.apartmentNumberOrBusinessName = "";
+            this.city = "";
+
+            this.isVehicleProtected = null;
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
+            this.isRecalibrationServiceableDropoff =
+                serviceabilityDetails.isRecalibrationServiceableDropoff;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
+        setMobileLocation(mobileLocation) {
+            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
+            this.apartmentNumberOrBusinessName =
+                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
+            this.city = mobileLocation.addressQuestions.city;
+            this.state = mobileLocation.addressQuestions.state;
+            this.zipCode = mobileLocation.addressQuestions.zipCode;
+            this.isVehicleProtected = mobileLocation.isVehicleProtected;
+        },
+        async reloadShopData(zipCode) {
+            await this.$refs.shopQuestion.reloadShopData(zipCode);
+        },
+        openRecalibrationInformationModal() {
+            this.recalibrationInformationModal.openModal();
+        },
+        backButtonAction() {
+            const payment = store.getters.order.payment;
+            if (
+                payment?.isInsurance &&
+                (payment?.insuranceCoverage?.isVerified ||
+                    store.getters.order.referralNumber.length === 6)
+            ) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: false,
+                    pageNameToLog: "service-location",
+                    navType: "back",
+                });
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
+        },
+        updateAndSaveIsMSRFeeApplicable() {
+            const isMSRFeeApplicable =
+                this.isMobileStaticRecalibrationApplicable &&
+                this.selectedAppointmentType == "Mobile";
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
+                isMSRFeeApplicable
+            );
+        },
+        updateAndSaveSupportingItems() {
+            let supportingItems = store.getters.lineItems.supportingItems;
+            let shouldSaveSupportingItems = false;
+
+            supportingItems =
+                !supportingItems && this.isMobileStaticRecalibrationApplicable
+                    ? []
+                    : supportingItems;
+
+            // for insurance orders, fees can get removed causing supportingitems to be null or empty
+            if (!supportingItems) {
+                return;
+            }
+
+            // update recyle fee price
+            if (this.recycleFeePart) {
+                const recycleFeeIndex = supportingItems.findIndex(
+                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
+                );
+                if (recycleFeeIndex >= 0) {
+                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
+                    supportingItems[recycleFeeIndex].sellingPrice =
+                        this.recycleFeePart.sellingPrice;
+                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
+
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // if we have a mobile fee, then save/update supporting items
+            if (this.selectedAppointmentType == "Mobile") {
+                const mobileFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+                // If it already exists, update the price with latest data
+                if (mobileFeeIndex >= 0) {
+                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
+                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
+                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
+                } else {
+                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
+                }
+
+                shouldSaveSupportingItems = true;
+            } else {
+                // if it's not a mobile, then make sure we remove any that may have been added
+                const removeMobileFeeIndex = supportingItems?.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+
+                if (removeMobileFeeIndex >= 0) {
+                    supportingItems.splice(removeMobileFeeIndex, 1);
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
+            if (shouldSaveSupportingItems) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                    supportingItems,
+                    false
+                );
+            }
+        },
+        async forwardButtonAction() {
+            this.navigatingForward = true;
+            var ctu = this.zipCodeCtu;
+            if (
+                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
+                this.selectedProvider &&
+                this.selectedProvider.address
+            ) {
+                this.selectedProvider.address.streetAddress = null;
+                this.selectedProvider.address.city = null;
+                this.selectedProvider.address.state = null;
+                this.selectedProvider.address.zipCode = null;
+                this.selectedProvider.address.zipCodeCtu = null;
+            } else {
+                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
+                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
+                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
+                    ctu = this.selectedProvider.address.zipCodeCtu;
+                }
+                this.resetMobileLocation();
+            }
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SERVICE_LOCATION,
+                {
+                    address: this.streetAddress,
+                    address2: this.apartmentNumberOrBusinessName,
+                    city: this.city,
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: ctu,
+                    appointmentType: this.selectedAppointmentType,
+                    isVehicleProtected: this.isVehicleProtected,
+                    provider: {
+                        providerNumber: this.selectedProvider?.providerNumber,
+                        address: {
+                            streetAddress: this.selectedProvider?.address?.streetAddress,
+                            city: this.selectedProvider?.address?.city,
+                            state: this.selectedProvider?.address?.state,
+                            zipCode: this.selectedProvider?.address?.zipCode,
+                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
+                        },
+                    },
+                },
+                false
+            );
+
+            if (this.billToAccountNumber) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
+                    this.billToAccountNumber,
+                    false
+                );
+            }
+
+            this.updateAndSaveSupportingItems();
+            this.updateAndSaveIsMSRFeeApplicable();
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setMobileLocationInValid(isMobileLocationInValid) {
+            this.isMobileAddressValid = !isMobileLocationInValid;
+        },
+    },
+    watch: {
+        zipCode: {
+            handler(newValue) {
+                if (!this.navigatingForward) {
+                    getShopProviderData(this.zipCode).then(async (result) => {
+                        this.shopProviderData = result.data;
+                        if (this.selectedAppointmentType === "Mobile") {
+                            this.selectedProvider = new Provider(
+                                this.shopProviderData.mobileProviderNumber
+                            );
+                        } else {
+                            this.selectedProvider = new Provider();
+                        }
+                    });
+                }
+            },
+        },
+        selectedAppointmentType: {
+            handler(newValue) {
+                if (newValue === "Mobile") {
+                    this.selectedProvider = new Provider(
+                        this.shopProviderData.mobileProviderNumber
+                    );
+                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
+                        //restore mobile address from store in case user make changes to address but not commit it.
+                        this.streetAddress = this.getServiceAddressFromStore();
+                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
+                        this.city = this.getServiceCityFromStore();
+                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
+                        this.$refs.mobileLocationQuestions.resetAlerts();
+                    } else {
+                        this.resetMobileLocation();
+                    }
+                } else {
+                    this.selectedProvider = new Provider();
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        serviceZipModalQuestion,
+        appointmentTypeQuestion,
+        mobileLocationModalQuestions,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        contentGroupModal,
+        shopQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.appointment-type-question {
+    .button-question {
+        .col {
+            @include media-breakpoint-up(md) {
+                padding: 0 0.75rem;
+            }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
+.question-text {
+    & > span {
+        text-align: center;
+        color: $black;
+    }
+}
+</style>
+
+
+
+<!-- OLD SERVICE LOCATION ENDS -->
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index bdcc3d11a..776fe1199 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,858 +1,3 @@
-<!-- OLD SERVICE LOCATION BEGINS -->
-
-
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <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 mt-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-
-                    <serviceZipModalQuestion
-                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
-                        v-model="serviceZipCodeQuestion"
-                        ref="serviceZipCodeQuestion"
-                        :carId="carId"
-                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
-                        :mobileFeePart="mobileFeePart"
-                        @updated-mobile-fee-part="setMobileFeePart"
-                        @updated-recycle-fee-part="setRecycleFeePart"
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-bill-to-account-number="setBillToAccountNumber"
-                        linkWidgetName="ServiceZipLinkWidget"
-                        modalWidgetName="ServiceZipModalWidget" />
-
-                    <alert
-                        ref="alertMilitaryBaseZip"
-                        class="my-5"
-                        cmsWidgetName="AlertMilitaryBaseZipWidget"
-                        v-if="displayMilitaryZipAlert"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertMobileOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileOnlyWidget"
-                        v-if="displayServiceableMobileOnly"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertRecalNoMobile"
-                        class="my-5"
-                        cmsWidgetName="AlertRecalNoMobileWidget"
-                        v-if="displayRecalibrationWarning"
-                        @text-link-clicked="openModalAction"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertInshopOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertInshopOnlyWidget"
-                        v-if="displayServiceableInshopOnly"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertNoShops"
-                        class="my-5"
-                        cmsWidgetName="AlertNoShopsWidget"
-                        v-if="displayNoShopsAlert"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertMobileFeeFree"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileFeeFreeWidget"
-                        v-if="showMobileFreeAlert"
-                        alertClass="alert-success" />
-                </div>
-            </div>
-            <div class="row justify-content-center appointment-type">
-                <div class="col-md-6">
-                    <appointmentTypeQuestion
-                        v-model="selectedAppointmentType"
-                        v-show="isAppointmentTypeDisplayed"
-                        :isServiceableMobile="isServiceableMobile"
-                        :isServiceableInshop="isServiceableInshop"
-                        :isServiceableDropoff="isServiceableDropoff"
-                        :isDisplayed="isAppointmentTypeDisplayed"
-                        :mobileFeeApplies="mobileFeeApplies"
-                        :zipCode="zipCode"
-                        ref="appointmentTypeQuestion"
-                        groupName="appointmentTypeQuestion"
-                        cmsWidgetName="AppointmentTypeQuestionWidget"
-                        validationRules="option-required"
-                        labelBold="true" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <mobileLocationModalQuestions
-                        customComponentId="mobileLocationQuestions"
-                        v-show="selectedAppointmentType === 'Mobile'"
-                        v-model="mobileLocationQuestions"
-                        :mobileFeePart="mobileFeePart"
-                        :mobileFeeApplies="mobileFeeApplies"
-                        @updated-mobile-fee-part="setMobileFeePart"
-                        @updated-recycle-fee-part="setRecycleFeePart"
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-mobile-ctu="setCtuForMobile"
-                        validationRules="mobile-location-required"
-                        ref="mobileLocationQuestions"
-                        linkWidgetName="MobileLocationLinkWidget"
-                        modalWidgetName="MobileLocationModalWidget"
-                        @setMobileLocation="setMobileLocationQuestions"
-                        @set-mobile-location-invalid="setMobileLocationInValid" />
-
-                    <shopQuestion
-                        ref="shopQuestion"
-                        v-show="isShopQuestionDisplayed"
-                        v-model="selectedProvider"
-                        :selectedAppointmentType="selectedAppointmentType"
-                        :shopProviderData="shopProviderData"
-                        :isDisplayed="isShopQuestionDisplayed"
-                        cmsWidgetName="ShopQuestionWidget" />
-
-                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-
-                    <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        ref="navbar"
-                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form>
-</template>
-
-<script>
-// Components
-import alert from "@/ux-components/alert/alert";
-import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
-import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
-import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
-import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
-
-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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
-import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
-
-// Supporting files
-import baseMixin from "@/mixins/base-mixin.js";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-import { experimentSettings } from "@/constants/experiments";
-import { AppointmentTypeStrings } from "@/constants/schedule-constants";
-
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import {
-    getPricedMobileFeePart,
-    getServiceabilityDetails,
-    getShopProviderData,
-    getZipCodeData,
-} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { applicationConfig } from "@/constants/application-config";
-import { Provider } from "@/layouts/service-location/classes/provider";
-import { partNumberStrings } from "@/constants/part-number-strings";
-
-import store from "@/store";
-
-// Validation
-import { defineRule } from "vee-validate";
-import { errorMessages } from "@/constants/error-messages";
-
-const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
-
-// DEFINE VALIDATION RULES
-defineRule("mobile-location-required", (value) => {
-    const addressQuestionsValues = Object.values(
-        [
-            value.addressQuestions.streetAddress,
-            value.addressQuestions.city,
-            value.isVehicleProtected,
-        ] || {}
-    );
-    const filledFields = addressQuestionsValues.filter(
-        (val) => val !== null && val !== undefined && val !== ""
-    );
-    if (
-        value.isMobileSelected &&
-        filledFields.length > 0 &&
-        filledFields.length < addressQuestionsValues.length
-    ) {
-        return errorMessages.MOBILE_LOCATION_REQUIRED;
-    }
-    return true;
-});
-
-export default {
-    name: "service-location",
-    data() {
-        return {
-            streetAddress: this.getServiceAddressFromStore(),
-            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
-            carId: this.getCarIdfromStore(),
-            city: this.getServiceCityFromStore(),
-            state: this.getServiceStateFromStore(),
-            zipCode: this.getServiceZipCodeFromStore(),
-            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
-            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
-            isGlassServiceableInshop: null,
-            isRecalibrationServiceableInshop: null,
-            isGlassServiceableDropoff: null,
-            isRecalibrationServiceableDropoff: null,
-            isGlassServiceableMobile: null,
-            isRecalibrationServiceableMobile: null,
-            selectedAppointmentType: this.getSelectedAppointmentType(),
-            selectedProvider: this.getSelectedProvider(),
-            mobileFeePart: null,
-            recycleFeePart: null,
-            zipContainsMilitaryBase: false,
-            zipCodeCtu: null,
-            billToAccountNumber: null,
-            shopProviderData: null,
-            navigatingForward: false,
-            isMobileAddressValid: true,
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.name);
-
-        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
-
-        const serviceabilityDetailsPromise = getServiceabilityDetails(
-            serviceZipCode,
-            null,
-            "service-location"
-        );
-
-        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
-
-        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "zipCodeData",
-                promise: zipCodeDataPromise,
-            },
-            {
-                resultKey: "mobileFeePart",
-                promise: mobileFeePartPromise,
-            },
-            {
-                resultKey: "serviceabilityDetails",
-                promise: serviceabilityDetailsPromise,
-            },
-            {
-                resultKey: "shopProviderData",
-                promise: shopProviderDataPromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(
-                resultMap.zipCodeData,
-                resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart,
-                resultMap.shopProviderData
-            );
-        });
-    },
-    computed: {
-        serviceZipCodeQuestion: {
-            get: function () {
-                return {
-                    state: this.state,
-                    zipCode: this.zipCode,
-                    zipCodeCtu: this.zipCodeCtu,
-                };
-            },
-            set: function (newValue) {
-                if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation();
-                    this.selectedAppointmentType = null;
-                    this.selectedProvider = new Provider();
-                }
-
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-                this.zipCodeCtu = newValue.zipCodeCtu;
-
-                this.$nextTick();
-            },
-        },
-        mobileLocationQuestions: {
-            get: function () {
-                return {
-                    addressQuestions: {
-                        streetAddress: this.streetAddress,
-                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
-                        city: this.city,
-                        state: this.state,
-                        zipCode: this.zipCode,
-                    },
-                    isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
-                };
-            },
-        },
-        isServiceableMobile() {
-            if (this.isRecalibrationServiceableMobile !== null) {
-                return (
-                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
-                    this.isMobileStaticRecalibrationApplicable
-                );
-            } else {
-                return this.isGlassServiceableMobile;
-            }
-        },
-        isMobileStaticRecalibrationApplicable() {
-            return (
-                this.displayMSR &&
-                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
-                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
-            );
-        },
-        displayMSR() {
-            return (
-                experimentMixin.methods
-                    .getSettingValue(experimentSettings.DISPLAY_MSR)
-                    ?.toLowerCase() === "true"
-            );
-        },
-        isCashItacNoComp() {
-            return !this.isInsurance || this.isITAC || this.isNoComp;
-        },
-        mobileFeeHasPrice() {
-            return (
-                this.mobileFeePart?.laborAmount > 0 ||
-                this.mobileFeePart?.sellingPrice > 0 ||
-                this.mobileFeePart?.kitPrice > 0
-            );
-        },
-        mobileFeeApplies() {
-            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
-                return this.isCashItacNoComp;
-            } else {
-                return this.mobileFeeHasPrice;
-            }
-        },
-        showMobileFreeAlert() {
-            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
-                return true;
-            }
-            return false;
-        },
-        isServiceableInshop() {
-            if (this.isRecalibrationServiceableInshop !== null) {
-                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
-            } else {
-                return this.isGlassServiceableInshop;
-            }
-        },
-        isServiceableDropoff() {
-            if (this.isRecalibrationServiceableDropoff !== null) {
-                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
-            } else {
-                return this.isGlassServiceableDropoff;
-            }
-        },
-        isShopQuestionDisplayed() {
-            return (
-                this.selectedAppointmentType === "Inshop" ||
-                this.selectedAppointmentType === "Dropoff"
-            );
-        },
-        isAppointmentTypeDisplayed() {
-            return this.zipCode && !this.displayNoShopsAlert;
-        },
-        requiresInshopRecalibration() {
-            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
-            return (
-                this.isServiceableInshop &&
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile === false &&
-                !this.isMobileStaticRecalibrationApplicable
-            );
-        },
-        displayRecalibrationWarning() {
-            return this.requiresInshopRecalibration;
-        },
-        displayServiceableInshopOnly() {
-            return (
-                !this.displayRecalibrationWarning &&
-                this.isServiceableInshop &&
-                !this.isServiceableMobile
-            );
-        },
-        displayMilitaryZipAlert() {
-            return this.zipContainsMilitaryBase && this.isServiceableMobile;
-        },
-        displayServiceableMobileOnly() {
-            return this.isServiceableMobile && !this.isServiceableInshop;
-        },
-        displayNoShopsAlert() {
-            return !this.isServiceableInshop && !this.isServiceableMobile;
-        },
-        recalibrationInformationModal() {
-            return this.$refs.recalibrationInformationModal;
-        },
-        isInsurance() {
-            return store.getters.payment.isInsurance;
-        },
-        isITAC() {
-            return store.getters.order.policy.isItac;
-        },
-        isNoComp() {
-            return store.getters.order.policy.isNoComp;
-        },
-        isForwardActionDisabled() {
-            return this.displayNoShopsAlert || !this.isMobileAddressValid;
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
-            if (store.getters.payment.isInsurance) {
-                if (
-                    store.getters.payment.parentAccountNumber !==
-                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
-                    store.getters.order.policy.policyNumber &&
-                    store.getters.order.serviceLocation.zipCode
-                ) {
-                    return true;
-                } else {
-                    // prettier-ignore
-                    {
-                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
-                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
-                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
-                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
-                    }
-
-                    return false;
-                }
-            } else {
-                if (
-                    store.getters.lineItems.supportingItems &&
-                    store.getters.order.serviceLocation.zipCode
-                ) {
-                    return true;
-                } else {
-                    // prettier-ignore
-                    {
-                        console.log(new Date() + "Cash: servce-location invalid prereqs");
-                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
-                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
-                    }
-                    return false;
-                }
-            }
-        },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
-            if (zipCodeData) {
-                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
-                this.zipCodeCtu = zipCodeData.zipCodeCtu;
-            }
-
-            if (serviceabilityDetails) {
-                this.setServiceabilityDetails(serviceabilityDetails);
-            }
-
-            if (mobileFeePart) {
-                this.mobileFeePart = mobileFeePart;
-            }
-
-            if (shopProviderData) {
-                this.shopProviderData = shopProviderData;
-            }
-
-            var gaLabel = this.GaLabels.NO;
-            if (this.isServiceableMobile) {
-                gaLabel = this.GaLabels.YES;
-            }
-
-            this.pushEventToGA(
-                this.GaCategories.APPOINTMENT,
-                this.GaActions.MOBILE_AVAILABLE,
-                gaLabel,
-                true
-            );
-        },
-        setContainsMilitaryBase(val) {
-            if (this.zipContainsMilitaryBase !== val) {
-                this.zipContainsMilitaryBase = val;
-            }
-        },
-        setBillToAccountNumber(val) {
-            this.billToAccountNumber = val;
-        },
-        setCtuForMobile(val) {
-            this.zipCodeCtu = val;
-        },
-        setMobileFeePart(mobileFeePart) {
-            this.mobileFeePart = mobileFeePart;
-        },
-        setRecycleFeePart(recycleFeePart) {
-            this.recycleFeePart = recycleFeePart;
-        },
-        //creating async function as the computed property can not directly handle asynchronous operations or promises.
-        async setMobileLocationQuestions(newValue) {
-            var newZipCode = newValue.addressQuestions.zipCode;
-            if (newZipCode !== this.zipCode) {
-                await getShopProviderData(newZipCode).then((result) => {
-                    if (this.isServiceableMobile) {
-                        this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(
-                            this.shopProviderData.mobileProviderNumber
-                        );
-                    }
-                });
-            }
-            if (this.isServiceableMobile) {
-                this.setMobileLocation(newValue);
-                this.setMobileLocationInValid(false);
-            } else {
-                await getZipCodeData(newZipCode).then((zipCodeData) => {
-                    this.serviceZipCodeQuestion = {
-                        state: zipCodeData.state,
-                        zipCode: newZipCode,
-                        zipCodeCtu: zipCodeData.zipCodeCtu,
-                    };
-                });
-            }
-        },
-        getCarIdfromStore() {
-            return store.getters.vehicle.carId;
-        },
-        getServiceAddressFromStore() {
-            return store.getters.order.serviceLocation.address;
-        },
-        getServiceAddress2FromStore() {
-            return store.getters.order.serviceLocation.address2;
-        },
-        getServiceCityFromStore() {
-            return store.getters.order.serviceLocation.city;
-        },
-        getServiceStateFromStore() {
-            return store.getters.order.serviceLocation.state;
-        },
-        getServiceZipCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
-        },
-        getIsVehicleHeavyTruckFromStore() {
-            return store.getters.order.vehicle?.isBigTruck ?? false;
-        },
-        getIsVehicleProtectedFromStore() {
-            return store.getters.order.serviceLocation.isVehicleProtected;
-        },
-        getSelectedAppointmentType() {
-            return store.getters.order.serviceLocation.appointmentType;
-        },
-        getSelectedProvider() {
-            return store.getters.order.serviceLocation.provider;
-        },
-        resetMobileLocation() {
-            this.streetAddress = "";
-            this.apartmentNumberOrBusinessName = "";
-            this.city = "";
-
-            this.isVehicleProtected = null;
-        },
-        setServiceabilityDetails(serviceabilityDetails) {
-            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
-            this.isRecalibrationServiceableInshop =
-                serviceabilityDetails.isRecalibrationServiceableInshop;
-            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
-            this.isRecalibrationServiceableDropoff =
-                serviceabilityDetails.isRecalibrationServiceableDropoff;
-            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
-            this.isRecalibrationServiceableMobile =
-                serviceabilityDetails.isRecalibrationServiceableMobile;
-        },
-        setMobileLocation(mobileLocation) {
-            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
-            this.apartmentNumberOrBusinessName =
-                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
-            this.city = mobileLocation.addressQuestions.city;
-            this.state = mobileLocation.addressQuestions.state;
-            this.zipCode = mobileLocation.addressQuestions.zipCode;
-            this.isVehicleProtected = mobileLocation.isVehicleProtected;
-        },
-        async reloadShopData(zipCode) {
-            await this.$refs.shopQuestion.reloadShopData(zipCode);
-        },
-        openRecalibrationInformationModal() {
-            this.recalibrationInformationModal.openModal();
-        },
-        backButtonAction() {
-            const payment = store.getters.order.payment;
-            if (
-                payment?.isInsurance &&
-                (payment?.insuranceCoverage?.isVerified ||
-                    store.getters.order.referralNumber.length === 6)
-            ) {
-                navigateToHeritageFunnel({
-                    shouldSaveSession: false,
-                    pageNameToLog: "service-location",
-                    navType: "back",
-                });
-            } else {
-                this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.CLICKED_BACK,
-                    this.pageName
-                );
-            }
-        },
-        updateAndSaveIsMSRFeeApplicable() {
-            const isMSRFeeApplicable =
-                this.isMobileStaticRecalibrationApplicable &&
-                this.selectedAppointmentType == "Mobile";
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
-                isMSRFeeApplicable
-            );
-        },
-        updateAndSaveSupportingItems() {
-            let supportingItems = store.getters.lineItems.supportingItems;
-            let shouldSaveSupportingItems = false;
-
-            supportingItems =
-                !supportingItems && this.isMobileStaticRecalibrationApplicable
-                    ? []
-                    : supportingItems;
-
-            // for insurance orders, fees can get removed causing supportingitems to be null or empty
-            if (!supportingItems) {
-                return;
-            }
-
-            // update recyle fee price
-            if (this.recycleFeePart) {
-                const recycleFeeIndex = supportingItems.findIndex(
-                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
-                );
-                if (recycleFeeIndex >= 0) {
-                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
-                    supportingItems[recycleFeeIndex].sellingPrice =
-                        this.recycleFeePart.sellingPrice;
-                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
-
-                    shouldSaveSupportingItems = true;
-                }
-            }
-
-            // if we have a mobile fee, then save/update supporting items
-            if (this.selectedAppointmentType == "Mobile") {
-                const mobileFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == MOBILE_FEE_PART_TYPE
-                );
-                // If it already exists, update the price with latest data
-                if (mobileFeeIndex >= 0) {
-                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
-                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
-                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
-                } else {
-                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
-                }
-
-                shouldSaveSupportingItems = true;
-            } else {
-                // if it's not a mobile, then make sure we remove any that may have been added
-                const removeMobileFeeIndex = supportingItems?.findIndex(
-                    (item) => item.partType == MOBILE_FEE_PART_TYPE
-                );
-
-                if (removeMobileFeeIndex >= 0) {
-                    supportingItems.splice(removeMobileFeeIndex, 1);
-                    shouldSaveSupportingItems = true;
-                }
-            }
-
-            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
-            if (shouldSaveSupportingItems) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                    supportingItems,
-                    false
-                );
-            }
-        },
-        async forwardButtonAction() {
-            this.navigatingForward = true;
-            var ctu = this.zipCodeCtu;
-            if (
-                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
-                this.selectedProvider &&
-                this.selectedProvider.address
-            ) {
-                this.selectedProvider.address.streetAddress = null;
-                this.selectedProvider.address.city = null;
-                this.selectedProvider.address.state = null;
-                this.selectedProvider.address.zipCode = null;
-                this.selectedProvider.address.zipCodeCtu = null;
-            } else {
-                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
-                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
-                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
-                    ctu = this.selectedProvider.address.zipCodeCtu;
-                }
-                this.resetMobileLocation();
-            }
-
-            await this.dispatchStoreAction(
-                this.storeActions.SAVE_SERVICE_LOCATION,
-                {
-                    address: this.streetAddress,
-                    address2: this.apartmentNumberOrBusinessName,
-                    city: this.city,
-                    state: this.state,
-                    zipCode: this.zipCode,
-                    zipCodeCtu: ctu,
-                    appointmentType: this.selectedAppointmentType,
-                    isVehicleProtected: this.isVehicleProtected,
-                    provider: {
-                        providerNumber: this.selectedProvider?.providerNumber,
-                        address: {
-                            streetAddress: this.selectedProvider?.address?.streetAddress,
-                            city: this.selectedProvider?.address?.city,
-                            state: this.selectedProvider?.address?.state,
-                            zipCode: this.selectedProvider?.address?.zipCode,
-                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
-                        },
-                    },
-                },
-                false
-            );
-
-            if (this.billToAccountNumber) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
-                    this.billToAccountNumber,
-                    false
-                );
-            }
-
-            this.updateAndSaveSupportingItems();
-            this.updateAndSaveIsMSRFeeApplicable();
-            this.$router.navigateWithSaving(
-                this.navigationScenarios.CLICKED_FORWARD,
-                this.pageName
-            );
-        },
-        setMobileLocationInValid(isMobileLocationInValid) {
-            this.isMobileAddressValid = !isMobileLocationInValid;
-        },
-    },
-    watch: {
-        zipCode: {
-            handler(newValue) {
-                if (!this.navigatingForward) {
-                    getShopProviderData(this.zipCode).then(async (result) => {
-                        this.shopProviderData = result.data;
-                        if (this.selectedAppointmentType === "Mobile") {
-                            this.selectedProvider = new Provider(
-                                this.shopProviderData.mobileProviderNumber
-                            );
-                        } else {
-                            this.selectedProvider = new Provider();
-                        }
-                    });
-                }
-            },
-        },
-        selectedAppointmentType: {
-            handler(newValue) {
-                if (newValue === "Mobile") {
-                    this.selectedProvider = new Provider(
-                        this.shopProviderData.mobileProviderNumber
-                    );
-                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
-                        //restore mobile address from store in case user make changes to address but not commit it.
-                        this.streetAddress = this.getServiceAddressFromStore();
-                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
-                        this.city = this.getServiceCityFromStore();
-                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
-                        this.$refs.mobileLocationQuestions.resetAlerts();
-                    } else {
-                        this.resetMobileLocation();
-                    }
-                } else {
-                    this.selectedProvider = new Provider();
-                }
-            },
-        },
-    },
-    components: {
-        alert,
-        serviceZipModalQuestion,
-        appointmentTypeQuestion,
-        mobileLocationModalQuestions,
-        funnelHeader,
-        navbar,
-        funnelSubHeader,
-        Form,
-        loadingModal,
-        contentGroupModal,
-        shopQuestion,
-    },
-};
-</script>
-
-<style lang="scss">
-.appointment-type-question {
-    .button-question {
-        .col {
-            @include media-breakpoint-up(md) {
-                padding: 0 0.75rem;
-            }
-            @include media-breakpoint-up(xl) {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
-        }
-    }
-}
-.question-text {
-    & > span {
-        text-align: center;
-        color: $black;
-    }
-}
-</style>
-
-
-
-<!-- OLD SERVICE LOCATION ENDS -->
-
-
-<!-- NEW SERVICE LOCATION BEGINS -->
-
-<!--
-
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -1814,7 +959,3 @@ export default {
     box-shadow: 0 0 0 1px $primary !important;
 }
 </style>
-
--->
-
-<!-- NEW SERVICE LOCATION ENDS -->
\ No newline at end of file

From 2a89bd86a4aefb67d3dd8915788904f92e7602e3 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Wed, 2 Jul 2025 12:34:50 -0400
Subject: [PATCH 03/11] CASH-845: routing changes

---
 src/constants/progress-bar-mapper.js          |  5 +-
 .../date-picker/date-picker-june-2025.vue     |  6 ---
 src/layouts/schedule/schedule.vue             |  2 +-
 .../service-location-june-2025.vue            |  2 -
 src/router/constants/routes.js                |  9 ++--
 src/router/constants/routing-table.js         | 47 ++++++++++---------
 .../methods/helpers/handle-heritage-return.js | 13 ++++-
 src/router/methods/routes.js                  |  3 +-
 8 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index dc1bc4a05..50b353151 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -13,8 +13,9 @@ const pagePercentageMapper = {
     "capability-questions": 40,
     quote: 48,
     "insurance-company": 52,
-    "service-location": 60,
-    schedule: 72,
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+    // "service-location": 60,
+    schedule: 64,
     "mobile-details": 76,
     "customer-details": 84,
     "payment-method": 92,
diff --git a/src/digital-components/date-picker/date-picker-june-2025.vue b/src/digital-components/date-picker/date-picker-june-2025.vue
index 1ff54e6e7..9d001a113 100644
--- a/src/digital-components/date-picker/date-picker-june-2025.vue
+++ b/src/digital-components/date-picker/date-picker-june-2025.vue
@@ -1332,10 +1332,4 @@ export default {
 }
 </style>
 
-
 <!-- OLD DATE-PICKER ENDS -->
-
-
-
-
-
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 9e1506e2e..ee2096c36 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -866,4 +866,4 @@ export default {
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/service-location/service-location-june-2025.vue b/src/layouts/service-location/service-location-june-2025.vue
index 306d1aab3..8dac38faf 100644
--- a/src/layouts/service-location/service-location-june-2025.vue
+++ b/src/layouts/service-location/service-location-june-2025.vue
@@ -845,6 +845,4 @@ export default {
 }
 </style>
 
-
-
 <!-- OLD SERVICE LOCATION ENDS -->
diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 7e9a3a793..45fdfb243 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -55,10 +55,11 @@ export const routeData = {
         name: "insurance-company",
         path: "/insurance-company",
     },
-    SERVICE_LOCATION: {
-        name: "service-location",
-        path: "/service-location",
-    },
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+    // SERVICE_LOCATION: {
+    //     name: "service-location",
+    //     path: "/service-location",
+    // },
     HERITAGE: {
         name: "heritage",
         path: "/virtual/heritage",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index 4a07bcfaf..02a0d9384 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -421,7 +421,7 @@ const routingTable = function () {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_CASH,
-                    destinationPageData: routeData.SERVICE_LOCATION,
+                    destinationPageData: routeData.SCHEDULE,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
@@ -449,8 +449,26 @@ const routingTable = function () {
                 },
             ],
         },
+        // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+        // {
+        //     pageName: routeData.SERVICE_LOCATION.name,
+        //     maps: [
+        //         {
+        //             scenario: navigationScenarios.CLICKED_BACK,
+        //             destinationPageData: routeData.QUOTE,
+        //         },
+        //         {
+        //             scenario: navigationScenarios.CLICKED_FORWARD,
+        //             destinationPageData: routeData.SCHEDULE,
+        //         },
+        //         {
+        //             scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+        //             destinationPageData: routeData.MOBILE_DETAILS,
+        //         },
+        //     ],
+        // },
         {
-            pageName: routeData.SERVICE_LOCATION.name,
+            pageName: routeData.SCHEDULE.name,
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
@@ -458,37 +476,24 @@ const routingTable = function () {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
-                    destinationPageData: routeData.SCHEDULE,
+                    destinationPageData: routeData.CUSTOMER_DETAILS,
                 },
+                // {
+                //     scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
+                //     destinationPageData: routeData.SERVICE_LOCATION,
+                // },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
                     destinationPageData: routeData.MOBILE_DETAILS,
                 },
             ],
         },
-        {
-            pageName: routeData.SCHEDULE.name,
-            maps: [
-                {
-                    scenario: navigationScenarios.CLICKED_BACK,
-                    destinationPageData: routeData.SERVICE_LOCATION,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_FORWARD,
-                    destinationPageData: routeData.CUSTOMER_DETAILS,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
-                    destinationPageData: routeData.SERVICE_LOCATION,
-                },
-            ],
-        },
         {
             pageName: routeData.MOBILE_DETAILS.name,
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
-                    destinationPageData: routeData.SERVICE_LOCATION,
+                    destinationPageData: routeData.SCHEDULE,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
diff --git a/src/router/methods/helpers/handle-heritage-return.js b/src/router/methods/helpers/handle-heritage-return.js
index 7914c8e0e..7ad61adf9 100644
--- a/src/router/methods/helpers/handle-heritage-return.js
+++ b/src/router/methods/helpers/handle-heritage-return.js
@@ -1,6 +1,7 @@
 import { queryStrings } from "@/constants/query-strings";
 import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
 import { loadSessionIfPresent } from "@/helpers/heritage-integration/order-helper";
+import router from "@/router";
 import { routeData } from "@/router/constants/routes";
 
 export async function handleHeritageReturn(to, from) {
@@ -11,6 +12,16 @@ export async function handleHeritageReturn(to, from) {
         await consumeReferralQuerystrings();
 
         // load session with new cookie
-        await loadSessionIfPresent(true, routeData.SERVICE_LOCATION.name);
+        await loadSessionIfPresent(true, routeData.SCHEDULE.name);
+
+        // Temporary redirect until URLs to old service-location page can be updated in Heritage
+        if (
+            to.fullPath.includes("fmgPage=service-location")
+        ) {
+            // Redirect to Schedule page
+            router.push({
+                name: routeData.SCHEDULE.name,
+            });
+        }
     }
 }
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index 01f4f8a58..83fbb3811 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -29,7 +29,8 @@ export const routes = [
     createRoute(routeData.CAPABILITY_QUESTIONS),
     createRoute(routeData.QUOTE, quoteBeforeEnter),
     createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
-    createRoute(routeData.SERVICE_LOCATION),
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+    // createRoute(routeData.SERVICE_LOCATION),
     createRoute(routeData.SCHEDULE),
     createRoute(routeData.CUSTOMER_DETAILS),
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),

From 825e27413d229baa25969e66a40d92b13ae3b132 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Wed, 2 Jul 2025 14:38:18 -0400
Subject: [PATCH 04/11] CASH-845: prettier formatting

---
 src/router/methods/helpers/handle-heritage-return.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/router/methods/helpers/handle-heritage-return.js b/src/router/methods/helpers/handle-heritage-return.js
index 7ad61adf9..6d8c60a58 100644
--- a/src/router/methods/helpers/handle-heritage-return.js
+++ b/src/router/methods/helpers/handle-heritage-return.js
@@ -15,9 +15,7 @@ export async function handleHeritageReturn(to, from) {
         await loadSessionIfPresent(true, routeData.SCHEDULE.name);
 
         // Temporary redirect until URLs to old service-location page can be updated in Heritage
-        if (
-            to.fullPath.includes("fmgPage=service-location")
-        ) {
+        if (to.fullPath.includes("fmgPage=service-location")) {
             // Redirect to Schedule page
             router.push({
                 name: routeData.SCHEDULE.name,

From 449771b0020b746d56c0c7a7eb22c888cd0a32f3 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 3 Jul 2025 10:00:02 -0400
Subject: [PATCH 05/11] CASH-814 | Most work done, need refactor and CSS

---
 .../button-question/button-question.vue       |  26 ++-
 .../date-picker/date-picker.vue               |   2 +-
 .../time-slot-question/time-slot-question.vue | 183 ++++++++++++++----
 .../shop-question/shop-question.vue           |  31 +--
 4 files changed, 186 insertions(+), 56 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 050dcdea0..dc1f50c15 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -36,7 +36,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 <div :class="getComponentLoopWrapperClasses" class="button-inner-wrapper">
                     <div
                         :class="getComponentWrapperClasses"
-                        v-for="answer in buttonsInfo"
+                        v-for="(answer, index) in buttonsInfo"
                         :key="answer.value ? answer.value : answer">
                         <component
                             :is="buttonTypeString"
@@ -72,6 +72,13 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                                 <slot></slot>
                             </div>
                         </transition>
+                        <div
+                            class="or-label"
+                            v-if="
+                                insertOrLabelBeforeFinalOption && buttonsInfo.length - 2 === index
+                            ">
+                            <span>OR</span>
+                        </div>
                     </div>
                 </div>
             </fieldset>
@@ -149,6 +156,11 @@ export default {
             required: false,
             default: false,
         },
+        insertOrLabelBeforeFinalOption: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -390,4 +402,16 @@ export default {
         }
     }
 }
+.or-label {
+    width: 100%;
+    text-align: center;
+    border-bottom: 1px solid black;
+    line-height: 1px;
+    margin: 10px 0 20px;
+
+    span {
+        background: #fff;
+        padding: 0 10px;
+    }
+}
 </style>
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 3d517fd85..642c90174 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1373,7 +1373,7 @@ export default {
             }
         }
     }
-    :deep(.button-inner-wrapper) {
+    :deep(.timeslots .button-inner-wrapper) {
         display: flex;
         max-width: 100%;
         flex-wrap: wrap;
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 58648746e..e3d2ef691 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -7,11 +7,30 @@
             justifyText="center"
             typeStyle="small"
             class="duration-text-block" />
+        <buttonQuestion
+            v-if="isDropOffAppointmentAvailable"
+            v-model="selectedAnswerForDropOff"
+            questionText="Choose an option:"
+            :answers="answersForDropOffQuestion"
+            isRequired
+            insertOrLabelBeforeFinalOption
+            groupName="chooseDropOffOrPickATime">
+            <div>
+                <alert
+                    v-if="shouldDisplayDropOffAlert"
+                    ref="alertDropoffInformation"
+                    class="mb-4 drop-off-alert"
+                    :cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
+                    alertClass="alert-info"
+                    v-bind:isDismissible="false" />
+            </div>
+        </buttonQuestion>
         <buttonQuestion
             ref="buttonQuestion"
+            v-if="shouldDisplayTimeSlotQuestion"
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
-            class="mt-4"
+            class="mt-4 timeslots"
             :class="[
                 isMobileAppointment ? 'is-mobile-appointment' : '',
                 isDropOffAppointment ? 'is-drop-off-appointment' : '',
@@ -19,7 +38,7 @@
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
             textPosition="text-center"
-            v-model="selectedRouteCode"
+            v-model="selectedAnswerForTimeSlots"
             isRequired
             validationRules="time-slot-required" />
         <div
@@ -59,6 +78,7 @@ import textBlock from "@/digital-components/text-block/text-block";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 import timeSlotModalListButton from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue";
+import alert from "@/ux-components/alert/alert.vue";
 import experimentMixin from "@/mixins/experiment-mixin";
 import { experimentSettings } from "@/constants/experiments";
 import store from "@/store";
@@ -94,10 +114,12 @@ const cmsWidgetFieldMappings = {
     DURATION: "SubheaderText",
 };
 
+const PICK_A_TIME_BUTTON_VALUE = "pick-a-time-selected";
+
 defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
-    name: "time-slot-no-modal-question",
+    name: "time-slot-question",
     emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
     props: {
         modelValue: {
@@ -135,6 +157,8 @@ export default {
             selectedRouteCode: this.getSelectedRouteCode(),
             timeSlotModalListButton: timeSlotModalListButton,
             waitListRequested: this.getWaitListRequestedFromStore(),
+            selectedAnswerForDropOff: null,
+            selectedAnswerForTimeSlots: null,
         };
     },
     setup(props) {
@@ -288,8 +312,6 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                return this.inshopDurationText;
-            } else {
                 if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                     return this.overnightDropoffDurationText;
                 } else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
@@ -298,10 +320,10 @@ export default {
                     } else {
                         return this.dropOffDurationText;
                     }
-                } else {
-                    return null;
                 }
+                return this.inshopDurationText;
             }
+            return null;
         },
         isSameDay() {
             if (!this.timeSlotsForSelectedDate) {
@@ -329,16 +351,45 @@ export default {
                 return null;
             }
 
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                return this.getAvailableTimeSlotsForDropOff(
-                    this.timeSlotsForSelectedDate.timeSlots
-                );
-            } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
                 return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
             }
         },
+        answersForDropOffQuestion() {
+            if (!this.timeSlotsForSelectedDate) {
+                return null;
+            }
+            const dropOffQuestionAnswers = this.timeSlotsForSelectedDate.timeSlots
+                .filter((timeSlot) => {
+                    return this.isDropOffRouteCode(timeSlot.id);
+                })
+                .map((timeSlot) => {
+                    let buttonLabelValue;
+                    if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                        buttonLabelValue = this.overnightDropoffButtonText;
+                    } else if (this.isSameDay) {
+                        buttonLabelValue = this.sameDayDropoffButtonText;
+                    } else {
+                        buttonLabelValue = this.dropoffButtonText;
+                    }
+                    return {
+                        value: timeSlot.id,
+                        buttonLabel: buttonLabelValue,
+                    };
+                });
+            if (
+                this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots)
+                    .length !== 0
+            ) {
+                dropOffQuestionAnswers.push({
+                    value: PICK_A_TIME_BUTTON_VALUE,
+                    buttonLabel: "Pick a time",
+                });
+            }
+            return dropOffQuestionAnswers;
+        },
         hasWaitListExperiment() {
             return experimentMixin.methods.hasSettingEqualTo(
                 experimentSettings.DISPLAY_WAITLIST,
@@ -360,6 +411,33 @@ export default {
         isDropOffAppointment() {
             return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
         },
+        shouldDisplayDropOffAlert() {
+            return this.isDropOffRouteCode(this.selectedAnswerForDropOff);
+        },
+        dropOffTimeSlotAlertCMSWidgetName() {
+            if (this.selectedAnswerForDropOff.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                return "OvernightDropOffTimeSlotAlert";
+            } else if (this.isSameDay) {
+                return "SameDayDropOffTimeSlotAlert";
+            } else {
+                return "DropOffTimeSlotAlert";
+            }
+        },
+        isDropOffAppointmentAvailable() {
+            console.log("its running");
+
+            return (
+                this.answersForDropOffQuestion !== null &&
+                this.answersForDropOffQuestion.length !== 0 &&
+                this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
+            );
+        },
+        shouldDisplayTimeSlotQuestion() {
+            return (
+                this.selectedAnswerForDropOff == PICK_A_TIME_BUTTON_VALUE ||
+                !this.isDropOffAppointmentAvailable
+            );
+        },
     },
     methods: {
         async setSelectedTimeSlot() {
@@ -382,31 +460,17 @@ export default {
             }
         },
         getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
-            return timeSlotsForSelectedDate.map((timeSlot) => {
-                const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
-                return {
-                    value: timeSlot.id,
-                    buttonLabel: readableTime,
-                };
-            });
-        },
-        getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
-            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
-                let buttonLabelValue;
-                if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
-                    buttonLabelValue = this.overnightDropoffButtonText;
-                } else if (this.isSameDay) {
-                    buttonLabelValue = this.sameDayDropoffButtonText;
-                } else {
-                    buttonLabelValue = this.dropoffButtonText;
-                }
-                return {
-                    value: timeSlot.id,
-                    buttonLabel: buttonLabelValue,
-                };
-            });
-
-            return availableTimeSlots;
+            return timeSlotsForSelectedDate
+                .filter((timeSlot) => {
+                    return !this.isDropOffRouteCode(timeSlot.id);
+                })
+                .map((timeSlot) => {
+                    const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
+                    return {
+                        value: timeSlot.id,
+                        buttonLabel: readableTime,
+                    };
+                });
         },
         getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
             const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
@@ -463,9 +527,14 @@ export default {
             return store.getters.order.customer?.waitListRequested;
         },
         autoSelectTimeSlotIfOnlyOneIsAvailable() {
-            const numberOfOptions = this.availableTimeSlots?.length;
+            console.log(this.timeSlotsForSelectedDate.timeSlots?.length);
+            const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
             if (numberOfOptions === 1) {
-                this.selectedRouteCode = this.availableTimeSlots[0].value;
+                if (this.availableTimeSlots.length > 0) {
+                    this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
+                } else {
+                    this.selectedAnswerForDropOff = this.answersForDropOffQuestion[0].value;
+                }
             }
         },
         addPremiumFlagToInput(routeCode) {
@@ -519,6 +588,12 @@ export default {
                 successMessageElement.scrollIntoView({ behavior: "smooth" });
             }
         },
+        isDropOffRouteCode(routeCode) {
+            return (
+                routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF) ||
+                routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)
+            );
+        },
     },
     watch: {
         waitListRequested(newVal) {
@@ -545,12 +620,24 @@ export default {
                 this.setSelectedTimeSlot();
             }
         },
+        selectedAnswerForDropOff(newValue) {
+            if (newValue == PICK_A_TIME_BUTTON_VALUE) {
+                this.selectedRouteCode = null;
+            } else {
+                this.selectedAnswerForTimeSlots = null;
+                this.selectedRouteCode = newValue;
+            }
+        },
+        selectedAnswerForTimeSlots(newValue) {
+            if (newValue) this.selectedRouteCode = newValue;
+        },
     },
     components: {
         // Removed modal
         textBlock,
         buttonQuestion,
         checkboxQuestion,
+        alert,
     },
 };
 </script>
@@ -623,5 +710,23 @@ export default {
         text-align: left;
         margin: 1.5rem 0 0;
     }
+    .drop-off-alert {
+        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-size: 0.75rem;
+        background-position: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+        gap: 0.25rem;
+        background-color: #e4f1f7;
+
+        .alert-heading {
+            text-align: left;
+            font-size: 0.75rem;
+            line-height: 1.25rem;
+        }
+    }
 }
 </style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 5a9278d78..7191a1f07 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -277,23 +277,24 @@ export default {
             margin-top: 0.5rem;
         }
     }
-}
 
-.drop-off-alert {
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    background-size: 0.75rem;
-    background-position: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
-    gap: 0.25rem;
+    .drop-off-alert {
+        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-size: 0.75rem;
+        background-position: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+        gap: 0.25rem;
+        background-color: #e4f1f7;
 
-    .alert-heading {
-        text-align: left;
-        font-size: 0.75rem;
-        line-height: 1.25rem;
+        .alert-heading {
+            text-align: left;
+            font-size: 0.75rem;
+            line-height: 1.25rem;
+        }
     }
 }
 </style>

From b311f6d41c26eec32e13694901d6d8e668bf8d31 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 3 Jul 2025 10:33:25 -0400
Subject: [PATCH 06/11] CASH-959 update hop font-weights.

---
 public/css/hop-styling.css   | 9 +++++----
 public/scss/hop-styling.scss | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index a79c2f049..41fc1edd5 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -12,7 +12,7 @@ body {
   padding: 8px;
 }
 body h3 {
-  font-weight: 600;
+  font-weight: 700;
 }
 body .validation-info {
   display: none;
@@ -35,7 +35,7 @@ body .form-group {
 body .headerlinecontainer .headerline1 {
   font-size: 20px;
   line-height: 32px;
-  font-weight: 500;
+  font-weight: 400;
   margin: 24px 0;
   text-align: center;
 }
@@ -96,7 +96,7 @@ body .creditCardSpecific div .headerlinecontainer {
   display: none;
 }
 body .creditCardSpecific div label {
-  font-weight: 600;
+  font-weight: 500;
 }
 body .creditCardSpecific #infoRow2 {
   margin-bottom: 0;
@@ -140,6 +140,7 @@ body .buttonContainer button {
   border-radius: 8px;
   color: #fff;
   justify-content: center;
+  font-family: Urbanist, Arial, Helvetica, sans-serif;
   font-weight: 500;
   font-size: 16px;
   height: 48px;
@@ -272,7 +273,7 @@ body .cc-error-container #alert-message {
 #fmg-checkout-shared #other-payments-container label span.paymentOptionText {
   margin: auto 0;
   padding-left: 0;
-  font-weight: 600;
+  font-weight: 400;
 }
 #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
   width: 100%;
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index 3d30255cc..bb38cf6b9 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -12,7 +12,7 @@ body {
     padding: 8px;
 
     h3 {
-        font-weight: 600;
+        font-weight: 700;
     }
 
     .validation-info {
@@ -42,7 +42,7 @@ body {
         .headerline1 {
             font-size: 20px;
             line-height: 32px;
-            font-weight: 500;
+            font-weight: 400;
             margin: 24px 0;
             text-align: center;
         }
@@ -103,7 +103,7 @@ body {
                 display: none;
             }
             label {
-                font-weight: 600;
+                font-weight: 500;
             }
         }
         #infoRow2 {
@@ -151,6 +151,7 @@ body {
             border-radius: 8px;
             color: #fff;
             justify-content: center;
+            font-family: Urbanist, Arial, Helvetica, sans-serif;
             font-weight: 500;
             font-size: 16px;
             height: 48px;
@@ -330,7 +331,7 @@ body {
 				&.paymentOptionText {
 					margin: auto 0;
 					padding-left: 0;
-                    font-weight: 600;
+                    font-weight: 400;
 				}
 			}
 		}

From e3e6b27148c531941290b37b5704d07e10ad7cd5 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 3 Jul 2025 13:01:32 -0400
Subject: [PATCH 07/11] CASH-1127 update hop font.

---
 public/css/hop-styling.css   | 2 ++
 public/scss/hop-styling.scss | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index 41fc1edd5..0318d52ff 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -51,6 +51,8 @@ body select {
   font-size: 16px;
   color: #000;
   background-color: #fff;
+  font-family: Urbanist, Arial, Helvetica, sans-serif;
+  font-weight: 400;
 }
 body input:focus, body input:focus-visible,
 body select:focus,
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index bb38cf6b9..aae9913e2 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -61,6 +61,8 @@ body {
         font-size: 16px;
         color: #000;
         background-color: #fff;
+        font-family: Urbanist, Arial, Helvetica, sans-serif;
+        font-weight: 400;
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px #1574a1;

From 76d67981f6a6e3dd430a1ddbb9288062f519bac8 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Thu, 3 Jul 2025 14:44:39 -0400
Subject: [PATCH 08/11] CASH-845 router change refactor

---
 src/router/constants/routes.js                       | 9 ++++-----
 src/router/methods/helpers/handle-heritage-return.js | 9 ---------
 src/router/methods/route-logic/service-location.js   | 8 ++++++++
 src/router/methods/routes.js                         | 4 ++--
 4 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 src/router/methods/route-logic/service-location.js

diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 45fdfb243..6fec2455d 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -55,11 +55,10 @@ export const routeData = {
         name: "insurance-company",
         path: "/insurance-company",
     },
-    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
-    // SERVICE_LOCATION: {
-    //     name: "service-location",
-    //     path: "/service-location",
-    // },
+    SERVICE_LOCATION: { // keep even though this page has been removed from the regular flow bc Heritage still points to it
+        name: "service-location",
+        path: "/service-location",
+    },
     HERITAGE: {
         name: "heritage",
         path: "/virtual/heritage",
diff --git a/src/router/methods/helpers/handle-heritage-return.js b/src/router/methods/helpers/handle-heritage-return.js
index 6d8c60a58..74a1ce62a 100644
--- a/src/router/methods/helpers/handle-heritage-return.js
+++ b/src/router/methods/helpers/handle-heritage-return.js
@@ -1,7 +1,6 @@
 import { queryStrings } from "@/constants/query-strings";
 import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
 import { loadSessionIfPresent } from "@/helpers/heritage-integration/order-helper";
-import router from "@/router";
 import { routeData } from "@/router/constants/routes";
 
 export async function handleHeritageReturn(to, from) {
@@ -13,13 +12,5 @@ export async function handleHeritageReturn(to, from) {
 
         // load session with new cookie
         await loadSessionIfPresent(true, routeData.SCHEDULE.name);
-
-        // Temporary redirect until URLs to old service-location page can be updated in Heritage
-        if (to.fullPath.includes("fmgPage=service-location")) {
-            // Redirect to Schedule page
-            router.push({
-                name: routeData.SCHEDULE.name,
-            });
-        }
     }
 }
diff --git a/src/router/methods/route-logic/service-location.js b/src/router/methods/route-logic/service-location.js
new file mode 100644
index 000000000..ecaebe149
--- /dev/null
+++ b/src/router/methods/route-logic/service-location.js
@@ -0,0 +1,8 @@
+import { routeData } from "@/router/constants/routes";
+
+export async function serviceLocationBeforeEnter(to, from) {
+    return {
+        name: routeData.SCHEDULE.name,
+        replace: true,
+    };
+}
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index 83fbb3811..97af04068 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -12,6 +12,7 @@ import { errorBeforeEnter } from "@/router/methods/route-logic/error";
 import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
 import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
 import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
+import { serviceLocationBeforeEnter } from "@/router/methods/route-logic/service-location";
 
 export const routes = [
     // Non-virtual pages.
@@ -29,8 +30,7 @@ export const routes = [
     createRoute(routeData.CAPABILITY_QUESTIONS),
     createRoute(routeData.QUOTE, quoteBeforeEnter),
     createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
-    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
-    // createRoute(routeData.SERVICE_LOCATION),
+    createRoute(routeData.SERVICE_LOCATION, serviceLocationBeforeEnter),
     createRoute(routeData.SCHEDULE),
     createRoute(routeData.CUSTOMER_DETAILS),
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),

From 13b8e7f7373d95b42c1e2bff8a03d5b4994070f6 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Thu, 3 Jul 2025 14:46:48 -0400
Subject: [PATCH 09/11] CASH-845 restore handle-heritage-return completely

---
 src/router/methods/helpers/handle-heritage-return.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/methods/helpers/handle-heritage-return.js b/src/router/methods/helpers/handle-heritage-return.js
index 74a1ce62a..7914c8e0e 100644
--- a/src/router/methods/helpers/handle-heritage-return.js
+++ b/src/router/methods/helpers/handle-heritage-return.js
@@ -11,6 +11,6 @@ export async function handleHeritageReturn(to, from) {
         await consumeReferralQuerystrings();
 
         // load session with new cookie
-        await loadSessionIfPresent(true, routeData.SCHEDULE.name);
+        await loadSessionIfPresent(true, routeData.SERVICE_LOCATION.name);
     }
 }

From fc088ecd08a65907e61171bc3d7c5140b0a575ec Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Thu, 3 Jul 2025 14:49:59 -0400
Subject: [PATCH 10/11] CASH-845: prettier change

---
 src/router/constants/routes.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 6fec2455d..5632fe357 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -55,7 +55,8 @@ export const routeData = {
         name: "insurance-company",
         path: "/insurance-company",
     },
-    SERVICE_LOCATION: { // keep even though this page has been removed from the regular flow bc Heritage still points to it
+    SERVICE_LOCATION: {
+        // keep even though this page has been removed from the regular flow bc Heritage still points to it
         name: "service-location",
         path: "/service-location",
     },

From c1a5dcdeef1c4fe8cd3ba82ddb48e0afe4971672 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 7 Jul 2025 12:13:08 -0400
Subject: [PATCH 11/11] CASH-814 | Styling, cleanup, auto select, CMS
 integration

---
 .../button-question/button-question.vue       |  2 +-
 .../date-picker/date-picker.spec.js           |  2 +-
 .../date-picker/date-picker.vue               |  2 +
 .../time-slot-question/time-slot-question.vue | 79 +++++++++----------
 4 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index dc1f50c15..2eaf204ad 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -407,7 +407,7 @@ export default {
     text-align: center;
     border-bottom: 1px solid black;
     line-height: 1px;
-    margin: 10px 0 20px;
+    margin: 20px 0 20px;
 
     span {
         background: #fff;
diff --git a/src/digital-components/date-picker/date-picker.spec.js b/src/digital-components/date-picker/date-picker.spec.js
index e1fbf302f..09bf21d76 100644
--- a/src/digital-components/date-picker/date-picker.spec.js
+++ b/src/digital-components/date-picker/date-picker.spec.js
@@ -481,7 +481,7 @@ describe("date-picker.vue", () => {
                 },
             });
             const spy = jest.spyOn(wrapper.vm, "setCalendarData");
-
+            wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn();
             wrapper.vm.$nextTick();
 
             // Act
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index e008021db..8f6b35f60 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -140,6 +140,7 @@
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
                 overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
                 :premiumAppointmentFee="premiumAppointmentFee"
@@ -292,6 +293,7 @@ export default {
     methods: {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
+            this.$refs.timeSlotModalQuestion.initializeComponent();
         },
         fireDateSelectedEvent(event, date) {
             // Ignore if arrow key selected radioButton
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 2d67ddc90..80d22cae5 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -10,7 +10,7 @@
         <buttonQuestion
             v-if="isDropOffAppointmentAvailable"
             v-model="selectedAnswerForDropOff"
-            questionText="Choose an option:"
+            :questionText="dropOffOrPickATimeQuestionLabelText"
             :answers="answersForDropOffQuestion"
             isRequired
             insertOrLabelBeforeFinalOption
@@ -142,6 +142,7 @@ export default {
         dropoffCmsWidgetName: String,
         sameDayDropOffCmsWidgetName: String,
         overnightDropOffCmsWidgetName: String,
+        dropOffOrPickATimeQuestionCmsWidgetName: String,
         appointmentType: String,
         timeSlotsForSelectedDate: Object,
         premiumAppointmentFee: Object,
@@ -154,7 +155,7 @@ export default {
     },
     data() {
         return {
-            selectedRouteCode: this.getSelectedRouteCode(),
+            selectedRouteCode: null,
             timeSlotModalListButton: timeSlotModalListButton,
             waitListRequested: this.getWaitListRequestedFromStore(),
             selectedAnswerForDropOff: null,
@@ -193,7 +194,11 @@ export default {
     computed: {
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
-            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+
+            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
+                // This is planned to be used again for drop-off
+                // Leaving this here with that in mind, move logic from the final else in here
+                //   and only apply it when a dropoff slot is selected
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
@@ -224,9 +229,16 @@ export default {
                 cmsWidgetFieldMappings.MODAL_CLOSE_BUTTON
             );
         },
+        dropOffOrPickATimeQuestionLabelText() {
+            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
+        },
+        pickATimeButtonLabelText() {
+            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
+                .Text;
+        },
         premiumAppointmentButtonText() {
             return this.getCmsContent(
-                this.mobilePremiumCmsWidgetName,
+                this.dropOffOrPickATimeQuestionCmsWidgetName,
                 cmsWidgetFieldMappings.TIME_SLOT_BUTTON
             );
         },
@@ -311,7 +323,7 @@ export default {
         durationTextBlockCopy() {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return null;
-            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
                 if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                     return this.overnightDropoffDurationText;
                 } else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
@@ -354,9 +366,7 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
-                return this.getAvailableTimeSlotsForInshopOrDropOff(
-                    this.timeSlotsForSelectedDate.timeSlots
-                );
+                return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
             }
         },
         answersForDropOffQuestion() {
@@ -387,7 +397,7 @@ export default {
             ) {
                 dropOffQuestionAnswers.push({
                     value: PICK_A_TIME_BUTTON_VALUE,
-                    buttonLabel: "Pick a time",
+                    buttonLabel: this.pickATimeButtonLabelText,
                 });
             }
             return dropOffQuestionAnswers;
@@ -426,8 +436,6 @@ export default {
             }
         },
         isDropOffAppointmentAvailable() {
-            console.log("its running");
-
             return (
                 this.answersForDropOffQuestion !== null &&
                 this.answersForDropOffQuestion.length !== 0 &&
@@ -442,6 +450,9 @@ export default {
         },
     },
     methods: {
+        initializeComponent() {
+            this.setSelectedRouteCodeFromParent();
+        },
         async setSelectedTimeSlot() {
             this.$emit(
                 "update:modelValue",
@@ -474,26 +485,6 @@ export default {
                     };
                 });
         },
-        getAvailableTimeSlotsForInshopOrDropOff(timeSlotsForSelectedDate) {
-            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
-                let buttonLabelValue;
-                if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
-                    buttonLabelValue = this.dropoffButtonText;
-                } else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
-                    buttonLabelValue = this.overnightDropoffButtonText;
-                } else if (this.isSameDay) {
-                    buttonLabelValue = this.sameDayDropoffButtonText;
-                } else {
-                    buttonLabelValue = militaryToTwelveHourTime(timeSlot.startTime);
-                }
-                return {
-                    value: timeSlot.id,
-                    buttonLabel: buttonLabelValue,
-                };
-            });
-
-            return availableTimeSlots;
-        },
         getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
             const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
                 const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(
@@ -529,27 +520,27 @@ export default {
                 },
             };
         },
-        getSelectedRouteCode() {
-            let selectedRouteCode;
+        setSelectedRouteCodeFromParent() {
             if (!this.modelValue?.timeSlot) {
-                selectedRouteCode = null;
+                return;
             }
-
+            const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
             if (this.modelValue?.isPremiumAppointment) {
-                selectedRouteCode = this.addPremiumFlagToInput(
-                    this.modelValue?.timeSlot?.routeCode
-                );
+                // Mobile Only
+                this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
             } else {
-                selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
+                if (this.isDropOffRouteCode(routeCodeFromParent)) {
+                    this.selectedAnswerForDropOff = routeCodeFromParent;
+                } else {
+                    this.selectedAnswerForDropOff = PICK_A_TIME_BUTTON_VALUE;
+                    this.selectedAnswerForTimeSlots = routeCodeFromParent;
+                }
             }
-
-            return selectedRouteCode;
         },
         getWaitListRequestedFromStore() {
             return store.getters.order.customer?.waitListRequested;
         },
         autoSelectTimeSlotIfOnlyOneIsAvailable() {
-            console.log(this.timeSlotsForSelectedDate.timeSlots?.length);
             const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
             if (numberOfOptions === 1) {
                 if (this.availableTimeSlots.length > 0) {
@@ -570,7 +561,6 @@ export default {
             if (routeCodeIncludesPremium) {
                 routeCode = this.removePremiumFlagFromInput(routeCode);
             }
-
             const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
                 (slot) => slot.id == routeCode
             );
@@ -611,6 +601,9 @@ export default {
             }
         },
         isDropOffRouteCode(routeCode) {
+            if (!routeCode) {
+                return false;
+            }
             return (
                 routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF) ||
                 routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)