From ec3323cf08cf514cb1f99576135dca4daca5a585 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 30 Apr 2026 11:30:14 -0400
Subject: [PATCH 01/14] CASH-2571 | Scheduling Page

Created new page
Added routing data
Added experiment flag (doesn't exist in framework yet) - hardcoded to true
Header, Footer, Subheader, H5 added
---
 src/constants/experiments.js               |   1 +
 src/constants/progress-bar-mapper.js       |   4 +
 src/layouts/scheduling/scheduling.vue      | 128 +++++++++++++++++++++
 src/router/constants/routes.js             |   4 +
 src/router/constants/routing-table.js      |  21 ++++
 src/router/methods/route-logic/schedule.js |  17 +++
 src/router/methods/routes.js               |   4 +-
 7 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/scheduling/scheduling.vue
 create mode 100644 src/router/methods/route-logic/schedule.js

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index 97e049df0..940e2656c 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -47,6 +47,7 @@ const experimentSettings = {
     USE_ADYEN_PAYMENT: "UseAdyenPayment",
     SHOW_UNVERIFIED_DEDUCT_ENTRY: "ShowUnverifiedDeducEntry",
     SERVICE_PACKAGE_ORDER: "ServicePackageOrder",
+    USE_SCHEDULING_PAGE: "UseSchedulingPage",
 };
 
 const experimentTriggers = {
diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index b21c6c9c7..88bb4d7cf 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -68,6 +68,10 @@ export const pageProgressMapper = {
         percent: 76,
         step: 3,
     },
+    scheduling: {
+        percent: 76,
+        step: 3,
+    },
     "mobile-details": {
         percent: 76,
         step: 3,
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
new file mode 100644
index 000000000..e59ba4d24
--- /dev/null
+++ b/src/layouts/scheduling/scheduling.vue
@@ -0,0 +1,128 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+    <div class="container page-container-grouped-styles">
+        <div class="row">
+            <div class="col-12">
+                <h5 class="fw-normal mb-0" :class="headerColor">
+                    <span>
+                        {{ serviceLocationText }}
+                    </span>
+                </h5>
+                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
+                <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+            </div>
+        </div>
+    </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import { Form } from "vee-validate";
+import store from "@/store";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import {
+    flushPagePrereqsLogs,
+    hasServiceZipInfo,
+    hasGlassPartsOrRepairInfo,
+    hasInsuranceInfo,
+} from "@/helpers/page-prerequisites-helper.js";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+export default {
+    name: "scheduling",
+    async beforeRouteEnter(to, from, next) {
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: fetchCmsContentForPage(to.name),
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        serviceLocationText() {
+            return this.getCmsContent("ServiceLocationText", "Text");
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            const order = store.getters.order;
+            const logQueue = [];
+
+            const serviceZip = hasServiceZipInfo(order, logQueue);
+            const glassPartsOrRepair = hasGlassPartsOrRepairInfo(order, logQueue);
+            const insuranceInfo = hasInsuranceInfo(order, logQueue);
+
+            const supportingItemsInfo = store.getters.lineItems?.supportingItems;
+            const supportingItemsPreReqs = order.payment?.isInsurance
+                ? true
+                : !!supportingItemsInfo;
+
+            const preReqResult =
+                serviceZip && insuranceInfo && glassPartsOrRepair && supportingItemsPreReqs;
+
+            logQueue.push(() => {
+                debugLog(
+                    "store.getters.lineItems.supportingItems:",
+                    store.getters.lineItems?.supportingItems,
+                    !supportingItemsPreReqs
+                );
+            });
+
+            flushPagePrereqsLogs("scheduling.vue", preReqResult, logQueue);
+            return preReqResult;
+        },
+        backButtonAction() {
+            const payment = store.getters.order.payment;
+            if (
+                payment?.isInsurance &&
+                (payment?.insuranceCoverage?.isVerified ||
+                    store.getters.order.referralNumber.length === 6)
+            ) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: false,
+                    pageNameToLog: this.pageName,
+                    navType: "back",
+                });
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
+        },
+        forwardButtonAction() {
+            const appointmentType = store.getters.order.serviceLocation.appointmentType;
+            if (appointmentType === AppointmentTypeStrings.MOBILE) {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    this.pageName
+                );
+            } else {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+            }
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        Form,
+    },
+};
+</script>
diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 47c37bb55..4501c8a92 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -73,6 +73,10 @@ export const routeData = {
         name: "schedule",
         path: "/schedule",
     },
+    SCHEDULING: {
+        name: "scheduling",
+        path: "/scheduling",
+    },
     MOBILE_DETAILS: {
         name: "mobile-details",
         path: "/mobile-details",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index a7be5f387..0165766d9 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -496,6 +496,27 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.SCHEDULING.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.QUOTE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.CUSTOMER_DETAILS,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    destinationPageData: routeData.MOBILE_DETAILS,
+                },
+                {
+                    scenario: navigationScenarios.ZIP_CODE_CHANGED_RECAL_ACK,
+                    destinationPageData: routeData.SERVICE_ZIP,
+                },
+            ],
+        },
         {
             pageName: routeData.MOBILE_DETAILS.name,
             maps: [
diff --git a/src/router/methods/route-logic/schedule.js b/src/router/methods/route-logic/schedule.js
new file mode 100644
index 000000000..78ebe0628
--- /dev/null
+++ b/src/router/methods/route-logic/schedule.js
@@ -0,0 +1,17 @@
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { routeData } from "@/router/constants/routes";
+
+export async function scheduleBeforeEnter(to, from) {
+    const isSchedulingEnabled = true;
+        // experimentMixin.methods
+        //     .getSettingValue(experimentSettings.USE_SCHEDULING_PAGE)
+        //     ?.toLowerCase() === "true";
+
+    if (isSchedulingEnabled) {
+        return {
+            name: routeData.SCHEDULING.name,
+            replace: true,
+        };
+    }
+}
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index 521ba43a1..a69870077 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -14,6 +14,7 @@ import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-m
 import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
 import { serviceLocationBeforeEnter } from "@/router/methods/route-logic/service-location";
 import { adyenReturnBeforeEnter } from "@/router/methods/route-logic/adyen-return";
+import { scheduleBeforeEnter } from "@/router/methods/route-logic/schedule";
 
 export const routes = [
     // Non-virtual pages.
@@ -32,7 +33,8 @@ export const routes = [
     createRoute(routeData.QUOTE, quoteBeforeEnter),
     createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
     createRoute(routeData.SERVICE_LOCATION, serviceLocationBeforeEnter),
-    createRoute(routeData.SCHEDULE),
+    createRoute(routeData.SCHEDULE, scheduleBeforeEnter),
+    createRoute(routeData.SCHEDULING),
     createRoute(routeData.CUSTOMER_DETAILS),
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
     createRoute(routeData.PAYMENT, paymentBeforeEnter),

From fec5db0c9f9cdc065c8fcc99835a1cd4ced1d82f Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 30 Apr 2026 12:08:23 -0400
Subject: [PATCH 02/14] CASH-2572 | Date-Picker for new schedule page

Full functionality
Haven't checked styling
Includes mocking data inside scheduling.vue
---
 src/layouts/scheduling/scheduling.vue         |  48 ++++
 .../date-picker/date-picker.spec.js           | 224 +++++++++++++++
 src/ux-components/date-picker/date-picker.vue | 270 ++++++++++++++++++
 3 files changed, 542 insertions(+)
 create mode 100644 src/ux-components/date-picker/date-picker.spec.js
 create mode 100644 src/ux-components/date-picker/date-picker.vue

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index e59ba4d24..f982ac70d 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -1,5 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+    <loadingModal notFullScreen ref="loadingModal" />
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
     <div class="container page-container-grouped-styles">
         <div class="row">
@@ -10,6 +11,14 @@
                     </span>
                 </h5>
                 <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
+                <datePicker
+                    class="mt-5"
+                    v-model="selectedDate"
+                    :startDate="datePickerStartDate"
+                    :endDate="datePickerEndDate"
+                    :availableDates="availableDates"
+                    :isLoadingDates="isLoadingDates"
+                    @requestMoreDates="handleRequestMoreDates" />
                 <navbar
                     cmsWidgetName="FunnelFooterWidget"
                     ref="navbar"
@@ -25,6 +34,8 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import { Form } from "vee-validate";
+import datePicker from "@/ux-components/date-picker/date-picker";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import store from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -38,6 +49,16 @@ import {
 } from "@/helpers/page-prerequisites-helper.js";
 import { debugLog } from "@/helpers/debug-log-helper";
 
+// Mock scheduling helpers — replace with real API data when integrating
+// Offsets of available days within any 15-day block (gaps on days 2, 6, 7, 10, 13)
+const MOCK_AVAILABLE_OFFSETS = [0, 1, 3, 4, 5, 8, 9, 11, 12, 14];
+
+function toDateString(offsetDays, base = new Date()) {
+    const d = new Date(base);
+    d.setDate(d.getDate() + offsetDays);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
 export default {
     name: "scheduling",
     async beforeRouteEnter(to, from, next) {
@@ -57,6 +78,15 @@ export default {
             return this.getCmsContent("ServiceLocationText", "Text");
         },
     },
+    data() {
+        return {
+            selectedDate: null,
+            isLoadingDates: false,
+            datePickerStartDate: toDateString(0),
+            datePickerEndDate: toDateString(14),
+            availableDates: MOCK_AVAILABLE_OFFSETS.map((n) => toDateString(n)),
+        };
+    },
     methods: {
         arePagePrerequisitesValid() {
             const order = store.getters.order;
@@ -104,6 +134,22 @@ export default {
                 );
             }
         },
+        async handleRequestMoreDates() {
+            this.isLoadingDates = true;
+            this.$refs.loadingModal.showModal();
+
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+
+            const currentEnd = new Date(
+                ...this.datePickerEndDate.split("-").map((n, i) => (i === 1 ? Number(n) - 1 : Number(n)))
+            );
+            const newAvailable = MOCK_AVAILABLE_OFFSETS.map((n) => toDateString(n + 1, currentEnd));
+            this.availableDates = [...this.availableDates, ...newAvailable];
+            this.datePickerEndDate = toDateString(15, currentEnd);
+
+            this.isLoadingDates = false;
+            this.$refs.loadingModal.hideModal();
+        },
         forwardButtonAction() {
             const appointmentType = store.getters.order.serviceLocation.appointmentType;
             if (appointmentType === AppointmentTypeStrings.MOBILE) {
@@ -123,6 +169,8 @@ export default {
         funnelHeader,
         navbar,
         Form,
+        datePicker,
+        loadingModal,
     },
 };
 </script>
diff --git a/src/ux-components/date-picker/date-picker.spec.js b/src/ux-components/date-picker/date-picker.spec.js
new file mode 100644
index 000000000..d2b6c9ee5
--- /dev/null
+++ b/src/ux-components/date-picker/date-picker.spec.js
@@ -0,0 +1,224 @@
+import { shallowMount } from "@vue/test-utils";
+import datePicker from "./date-picker";
+
+const AVAILABLE_DATES = ["2026-01-21", "2026-01-22", "2026-01-23", "2026-01-25"];
+
+function mountDesktop(props = {}) {
+    Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        configurable: true,
+        value: 1024,
+    });
+    return shallowMount(datePicker, {
+        props: { availableDates: AVAILABLE_DATES, modelValue: null, ...props },
+    });
+}
+
+function mountMobile(props = {}) {
+    Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        configurable: true,
+        value: 375,
+    });
+    return shallowMount(datePicker, {
+        props: { availableDates: AVAILABLE_DATES, modelValue: null, ...props },
+    });
+}
+
+describe("date-picker.vue", () => {
+    afterEach(() => {
+        Object.defineProperty(window, "innerWidth", {
+            writable: true,
+            configurable: true,
+            value: 1024,
+        });
+    });
+
+    describe("rendering", () => {
+        test("renders 5 date cards on desktop", () => {
+            const wrapper = mountDesktop();
+            expect(wrapper.findAll(".date-picker__day-card").length).toBe(5);
+            wrapper.unmount();
+        });
+
+        test("renders 3 date cards on mobile", () => {
+            const wrapper = mountMobile();
+            expect(wrapper.findAll(".date-picker__day-card").length).toBe(3);
+            wrapper.unmount();
+        });
+
+        test("renders disabled cards for dates not in availableDates", () => {
+            const wrapper = mountDesktop();
+            // Jan 24 is not in AVAILABLE_DATES but falls in the range Jan 21–25
+            const disabledCards = wrapper.findAll(".date-picker__day-card--disabled");
+            expect(disabledCards.length).toBeGreaterThan(0);
+            wrapper.unmount();
+        });
+
+        test("back navigation button is disabled at the start", () => {
+            const wrapper = mountDesktop();
+            const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
+            expect(backBtn.attributes("disabled")).toBeDefined();
+            wrapper.unmount();
+        });
+
+        test("forward navigation button is disabled when all dates fit in window", () => {
+            // Only 2 available dates → range is 2 days, window size 5 → no forward
+            const wrapper = mountDesktop({ availableDates: ["2026-01-21", "2026-01-22"] });
+            const forwardBtn = wrapper.findAll(".date-picker__nav-btn")[1];
+            expect(forwardBtn.attributes("disabled")).toBeDefined();
+            wrapper.unmount();
+        });
+    });
+
+    describe("allDates computation", () => {
+        test("builds a contiguous date range between first and last available date", () => {
+            const wrapper = mountDesktop();
+            const allValues = wrapper.vm.allDates.map((d) => d.value);
+            // Range Jan 21–25 should include all 5 dates
+            expect(allValues).toEqual([
+                "2026-01-21",
+                "2026-01-22",
+                "2026-01-23",
+                "2026-01-24",
+                "2026-01-25",
+            ]);
+            wrapper.unmount();
+        });
+
+        test("marks dates not in availableDates as unavailable", () => {
+            const wrapper = mountDesktop();
+            const jan24 = wrapper.vm.allDates.find((d) => d.value === "2026-01-24");
+            expect(jan24.isAvailable).toBe(false);
+            wrapper.unmount();
+        });
+
+        test("marks dates in availableDates as available", () => {
+            const wrapper = mountDesktop();
+            const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
+            expect(jan21.isAvailable).toBe(true);
+            wrapper.unmount();
+        });
+
+        test("attaches correct day abbreviation to each date", () => {
+            const wrapper = mountDesktop();
+            const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
+            // 2026-01-21 is a Wednesday
+            expect(jan21.dayAbbr).toBe("WED");
+            wrapper.unmount();
+        });
+
+        test("returns empty array when availableDates is empty", () => {
+            const wrapper = mountDesktop({ availableDates: [] });
+            expect(wrapper.vm.allDates).toEqual([]);
+            wrapper.unmount();
+        });
+    });
+
+    describe("date selection", () => {
+        test("emits update:modelValue with the date string when an available card is clicked", async () => {
+            const wrapper = mountDesktop();
+            const availableCard = wrapper.find(
+                ".date-picker__day-card:not(.date-picker__day-card--disabled)"
+            );
+            await availableCard.trigger("click");
+            expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+            expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21");
+            wrapper.unmount();
+        });
+
+        test("does not emit when a disabled card is clicked", async () => {
+            const wrapper = mountDesktop();
+            const disabledCard = wrapper.find(".date-picker__day-card--disabled");
+            await disabledCard.trigger("click");
+            expect(wrapper.emitted("update:modelValue")).toBeFalsy();
+            wrapper.unmount();
+        });
+
+        test("applies the selected class to the card matching modelValue", async () => {
+            const wrapper = mountDesktop({ modelValue: "2026-01-21" });
+            const selectedCard = wrapper.find(".date-picker__day-card--selected");
+            expect(selectedCard.exists()).toBeTruthy();
+            wrapper.unmount();
+        });
+
+        test("no card has the selected class when modelValue is null", () => {
+            const wrapper = mountDesktop({ modelValue: null });
+            expect(wrapper.find(".date-picker__day-card--selected").exists()).toBe(false);
+            wrapper.unmount();
+        });
+    });
+
+    describe("navigation", () => {
+        test("goForward advances windowStart by the window size", async () => {
+            // Use a longer range so forward is possible on desktop (window 5)
+            const manyDates = [
+                "2026-01-01",
+                "2026-01-02",
+                "2026-01-03",
+                "2026-01-10",
+            ];
+            const wrapper = mountDesktop({ availableDates: manyDates });
+            expect(wrapper.vm.canGoForward).toBe(true);
+            await wrapper.vm.goForward();
+            expect(wrapper.vm.windowStart).toBe(5);
+            wrapper.unmount();
+        });
+
+        test("goBack decrements windowStart by the window size", async () => {
+            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
+            const wrapper = mountDesktop({ availableDates: manyDates });
+            await wrapper.vm.goForward();
+            await wrapper.vm.goBack();
+            expect(wrapper.vm.windowStart).toBe(0);
+            wrapper.unmount();
+        });
+
+        test("goBack does not go below 0", () => {
+            const wrapper = mountDesktop();
+            wrapper.vm.goBack();
+            expect(wrapper.vm.windowStart).toBe(0);
+            wrapper.unmount();
+        });
+
+        test("goForward does not exceed the last window position", async () => {
+            // Range Jan 21–25 = 5 dates, window 5 on desktop → already at max
+            const wrapper = mountDesktop();
+            await wrapper.vm.goForward();
+            // windowStart should not push visible window past the array length
+            expect(wrapper.vm.windowStart + wrapper.vm.windowSize).toBeLessThanOrEqual(
+                wrapper.vm.allDates.length + wrapper.vm.windowSize
+            );
+            wrapper.unmount();
+        });
+
+        test("back button becomes enabled after navigating forward", async () => {
+            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
+            const wrapper = mountDesktop({ availableDates: manyDates });
+            await wrapper.vm.goForward();
+            await wrapper.vm.$nextTick();
+            const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
+            expect(backBtn.attributes("disabled")).toBeUndefined();
+            wrapper.unmount();
+        });
+
+        test("resets windowStart to 0 when availableDates prop changes", async () => {
+            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
+            const wrapper = mountDesktop({ availableDates: manyDates });
+            await wrapper.vm.goForward();
+            expect(wrapper.vm.windowStart).toBeGreaterThan(0);
+            await wrapper.setProps({ availableDates: ["2026-02-01", "2026-02-02"] });
+            expect(wrapper.vm.windowStart).toBe(0);
+            wrapper.unmount();
+        });
+    });
+
+    describe("initial window positioning", () => {
+        test("scrolls to the window containing the pre-selected date on mount", () => {
+            // Jan 25 is the 5th date (index 4); with window size 5 on desktop it's still in window 0
+            const wrapper = mountDesktop({ modelValue: "2026-01-25" });
+            expect(wrapper.vm.windowStart).toBe(0);
+            wrapper.unmount();
+        });
+    });
+});
diff --git a/src/ux-components/date-picker/date-picker.vue b/src/ux-components/date-picker/date-picker.vue
new file mode 100644
index 000000000..c6698897d
--- /dev/null
+++ b/src/ux-components/date-picker/date-picker.vue
@@ -0,0 +1,270 @@
+<template>
+    <div class="date-picker d-flex align-items-center">
+        <button
+            class="date-picker__nav-btn"
+            :disabled="!canGoBack"
+            aria-label="Previous dates"
+            @click="goBack">
+            ‹
+        </button>
+        <div class="date-picker__track d-flex flex-grow-1">
+            <button
+                v-for="date in visibleDates"
+                :key="date.value"
+                class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
+                :class="{
+                    'date-picker__day-card--selected': isSelected(date.value),
+                    'date-picker__day-card--disabled': !date.isAvailable,
+                }"
+                :disabled="!date.isAvailable"
+                :aria-pressed="isSelected(date.value)"
+                :aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
+                @click="selectDate(date)">
+                <span class="date-picker__day-abbr">{{ date.dayAbbr }}</span>
+                <span class="date-picker__day-date">{{ date.monthAbbr }} {{ date.day }}</span>
+            </button>
+        </div>
+        <button
+            class="date-picker__nav-btn"
+            :disabled="!canGoForward"
+            aria-label="Next dates"
+            @click="goForward">
+            ›
+        </button>
+    </div>
+</template>
+
+<script>
+const DAY_ABBRS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const MONTH_ABBRS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MOBILE_WINDOW_SIZE = 3;
+const DESKTOP_WINDOW_SIZE = 5;
+const DESKTOP_BREAKPOINT_PX = 768;
+
+function toLocalDateString(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+}
+
+function parseLocalDate(str) {
+    const [year, month, day] = str.split("-").map(Number);
+    return new Date(year, month - 1, day);
+}
+
+export default {
+    name: "datePicker",
+    props: {
+        availableDates: {
+            type: Array,
+            default: () => [],
+        },
+        startDate: {
+            type: String,
+            default: null,
+        },
+        endDate: {
+            type: String,
+            default: null,
+        },
+        modelValue: {
+            type: String,
+            default: null,
+        },
+        isLoadingDates: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ["update:modelValue", "requestMoreDates"],
+    data() {
+        return {
+            windowStart: 0,
+            windowSize: DESKTOP_WINDOW_SIZE,
+        };
+    },
+    computed: {
+        allDates() {
+            const availableSet = new Set(this.availableDates);
+
+            const hasBounds = this.startDate && this.endDate;
+            const hasAvailable = this.availableDates.length > 0;
+            if (!hasBounds && !hasAvailable) return [];
+
+            let first, last;
+            if (hasBounds) {
+                first = parseLocalDate(this.startDate);
+                last = parseLocalDate(this.endDate);
+            } else {
+                const sorted = [...this.availableDates].sort();
+                first = parseLocalDate(sorted[0]);
+                last = parseLocalDate(sorted[sorted.length - 1]);
+            }
+
+            const dates = [];
+            const cursor = new Date(first);
+            while (cursor <= last) {
+                const value = toLocalDateString(cursor);
+                dates.push({
+                    value,
+                    isAvailable: availableSet.has(value),
+                    dayAbbr: DAY_ABBRS[cursor.getDay()],
+                    monthAbbr: MONTH_ABBRS[cursor.getMonth()],
+                    day: cursor.getDate(),
+                });
+                cursor.setDate(cursor.getDate() + 1);
+            }
+            return dates;
+        },
+        visibleDates() {
+            return this.allDates.slice(this.windowStart, this.windowStart + this.windowSize);
+        },
+        canGoBack() {
+            return this.windowStart > 0;
+        },
+        canGoForward() {
+            return !this.isLoadingDates && this.allDates.length > 0;
+        },
+    },
+    watch: {
+        // Only reset position when startDate changes — that signals a fresh range.
+        // Extending endDate/availableDates (loading more) keeps the current window.
+        startDate() {
+            this.windowStart = 0;
+        },
+    },
+    mounted() {
+        this.updateWindowSize();
+        window.addEventListener("resize", this.updateWindowSize);
+        if (this.modelValue && this.allDates.length) {
+            const idx = this.allDates.findIndex((d) => d.value === this.modelValue);
+            if (idx !== -1) {
+                this.windowStart = Math.floor(idx / this.windowSize) * this.windowSize;
+            }
+        }
+    },
+    beforeUnmount() {
+        window.removeEventListener("resize", this.updateWindowSize);
+    },
+    methods: {
+        updateWindowSize() {
+            this.windowSize =
+                window.innerWidth >= DESKTOP_BREAKPOINT_PX
+                    ? DESKTOP_WINDOW_SIZE
+                    : MOBILE_WINDOW_SIZE;
+        },
+        goBack() {
+            this.windowStart = Math.max(0, this.windowStart - this.windowSize);
+        },
+        goForward() {
+            if (this.isLoadingDates) return;
+            const isAtEnd = this.windowStart + this.windowSize >= this.allDates.length;
+            if (isAtEnd) {
+                this.$emit("requestMoreDates");
+            } else {
+                const maxStart = Math.max(0, this.allDates.length - this.windowSize);
+                this.windowStart = Math.min(maxStart, this.windowStart + this.windowSize);
+            }
+        },
+        selectDate(date) {
+            if (!date.isAvailable) return;
+            this.$emit("update:modelValue", date.value);
+        },
+        isSelected(value) {
+            return this.modelValue === value;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.date-picker {
+    gap: 0.25rem;
+
+    &__nav-btn {
+        flex-shrink: 0;
+        width: 2rem;
+        height: 2rem;
+        border: none;
+        background: transparent;
+        font-size: 2rem;
+        line-height: 1;
+        color: $blue;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-radius: 50%;
+        transition: background 150ms ease;
+
+        &:hover:not(:disabled) {
+            background: $blue-100;
+        }
+
+        &:disabled {
+            color: $gray-300;
+            cursor: default;
+        }
+    }
+
+    &__track {
+        gap: 0.5rem;
+    }
+
+    &__day-card {
+        flex: 1;
+        min-width: 0;
+        border: 1px solid $gray-200;
+        border-radius: $border-radius-lg;
+        background: $white;
+        padding: 0.625rem 0.25rem;
+        cursor: pointer;
+        transition:
+            background 150ms ease,
+            border-color 150ms ease;
+
+        &:hover:not(:disabled):not(.date-picker__day-card--selected) {
+            border-color: $blue;
+        }
+
+        &--selected {
+            background: $blue;
+            border-color: $blue;
+
+            .date-picker__day-abbr,
+            .date-picker__day-date {
+                color: $white;
+            }
+        }
+
+        &--disabled {
+            background: $gray-100;
+            border-color: $gray-200;
+            cursor: default;
+
+            .date-picker__day-abbr,
+            .date-picker__day-date {
+                color: $gray-300;
+            }
+        }
+    }
+
+    &__day-abbr {
+        font-family: $font-family-sans-serif-semibold;
+        font-size: $font-size-12;
+        color: $gray-600;
+        text-transform: uppercase;
+        line-height: 1.2;
+    }
+
+    &__day-date {
+        font-family: $font-family-sans-serif-bold;
+        font-size: $font-size-14;
+        color: $gray-700;
+        line-height: 1.4;
+        white-space: nowrap;
+    }
+}
+</style>

From 0af5ca7fcb0da6943311c8937fce80e3451c5569 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 30 Apr 2026 12:17:33 -0400
Subject: [PATCH 03/14] Fix styling

---
 src/layouts/scheduling/scheduling.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index f982ac70d..8f12b2554 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -5,7 +5,7 @@
     <div class="container page-container-grouped-styles">
         <div class="row">
             <div class="col-12">
-                <h5 class="fw-normal mb-0" :class="headerColor">
+                <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
                     <span>
                         {{ serviceLocationText }}
                     </span>
@@ -32,6 +32,7 @@
 
 <script>
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import { Form } from "vee-validate";
 import datePicker from "@/ux-components/date-picker/date-picker";
@@ -167,6 +168,7 @@ export default {
     },
     components: {
         funnelHeader,
+        funnelSubHeader,
         navbar,
         Form,
         datePicker,
@@ -174,3 +176,8 @@ export default {
     },
 };
 </script>
+<style lang="scss" scoped>
+    .dark-header {
+        color: $black;
+    }
+</style>
\ No newline at end of file

From cd94b853ee06a8b456464964731cfe080d29fe99 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Mon, 4 May 2026 15:12:22 -0400
Subject: [PATCH 04/14] Wire in in-shop timeslots call and map the dates

---
 src/layouts/scheduling/scheduling.vue | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 8f12b2554..ea3f715b0 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -50,10 +50,6 @@ import {
 } from "@/helpers/page-prerequisites-helper.js";
 import { debugLog } from "@/helpers/debug-log-helper";
 
-// Mock scheduling helpers — replace with real API data when integrating
-// Offsets of available days within any 15-day block (gaps on days 2, 6, 7, 10, 13)
-const MOCK_AVAILABLE_OFFSETS = [0, 1, 3, 4, 5, 8, 9, 11, 12, 14];
-
 function toDateString(offsetDays, base = new Date()) {
     const d = new Date(base);
     d.setDate(d.getDate() + offsetDays);
@@ -68,24 +64,40 @@ export default {
                 resultKey: "cmsContent",
                 promise: fetchCmsContentForPage(to.name),
             },
+            {
+                resultKey: "InshopOrDropoffTimeSlots",
+                promise: store.dispatch("getShopTimeSlots", {
+                    payload: {
+                        startDate: toDateString(0),
+                        endDate: toDateString(15),
+                        shopAppointmentType: "InshopOrDropoff",
+                        providerNumber: "003417",
+                    },
+                    pageNameToLog: to.name,
+                }),
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.InshopOrDropoffTimeSlots = resultMap.InshopOrDropoffTimeSlots;
         });
     },
     computed: {
         serviceLocationText() {
             return this.getCmsContent("ServiceLocationText", "Text");
         },
+        availableDates() {
+            return (this.InshopOrDropoffTimeSlots?.days ?? []).map((d) => d.date);
+        },
     },
     data() {
         return {
             selectedDate: null,
             isLoadingDates: false,
             datePickerStartDate: toDateString(0),
-            datePickerEndDate: toDateString(14),
-            availableDates: MOCK_AVAILABLE_OFFSETS.map((n) => toDateString(n)),
+            datePickerEndDate: toDateString(15),
+            InshopOrDropoffTimeSlots: null,
         };
     },
     methods: {
@@ -139,14 +151,8 @@ export default {
             this.isLoadingDates = true;
             this.$refs.loadingModal.showModal();
 
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-
-            const currentEnd = new Date(
-                ...this.datePickerEndDate.split("-").map((n, i) => (i === 1 ? Number(n) - 1 : Number(n)))
-            );
-            const newAvailable = MOCK_AVAILABLE_OFFSETS.map((n) => toDateString(n + 1, currentEnd));
-            this.availableDates = [...this.availableDates, ...newAvailable];
-            this.datePickerEndDate = toDateString(15, currentEnd);
+            // TODO: call getShopTimeSlots with the next date range and append results
+            // to this.availableDates and advance this.datePickerEndDate
 
             this.isLoadingDates = false;
             this.$refs.loadingModal.hideModal();

From 5ec56b11d6b060eb9826acca5d6222ef5b4200ab Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Mon, 4 May 2026 16:13:01 -0400
Subject: [PATCH 05/14] Wire in providerData call

---
 src/layouts/scheduling/scheduling.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index ea3f715b0..958c203e6 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -59,19 +59,28 @@ function toDateString(offsetDays, base = new Date()) {
 export default {
     name: "scheduling",
     async beforeRouteEnter(to, from, next) {
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+
+        const shopProviderData = await store.dispatch("getProviders", {
+            payload: { serviceZipCode },
+            pageNameToLog: to.name,
+        });
+        const inShopProviderNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber;
+        const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber;
+
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: fetchCmsContentForPage(to.name),
             },
             {
-                resultKey: "InshopOrDropoffTimeSlots",
+                resultKey: "inshopOrDropoffTimeSlots",
                 promise: store.dispatch("getShopTimeSlots", {
                     payload: {
                         startDate: toDateString(0),
                         endDate: toDateString(15),
                         shopAppointmentType: "InshopOrDropoff",
-                        providerNumber: "003417",
+                        providerNumber: inShopProviderNumber,
                     },
                     pageNameToLog: to.name,
                 }),
@@ -80,7 +89,9 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.InshopOrDropoffTimeSlots = resultMap.InshopOrDropoffTimeSlots;
+            vm.inshopOrDropoffTimeSlots = resultMap.inshopOrDropoffTimeSlots;
+            vm.inShopProviderNumber = inShopProviderNumber;
+            vm.mobileProviderNumber = mobileProviderNumber;
         });
     },
     computed: {
@@ -88,7 +99,7 @@ export default {
             return this.getCmsContent("ServiceLocationText", "Text");
         },
         availableDates() {
-            return (this.InshopOrDropoffTimeSlots?.days ?? []).map((d) => d.date);
+            return (this.inshopOrDropoffTimeSlots?.days ?? []).map((d) => d.date);
         },
     },
     data() {
@@ -97,7 +108,9 @@ export default {
             isLoadingDates: false,
             datePickerStartDate: toDateString(0),
             datePickerEndDate: toDateString(15),
-            InshopOrDropoffTimeSlots: null,
+            inshopOrDropoffTimeSlots: null,
+            inShopProviderNumber: null,
+            mobileProviderNumber: null,
         };
     },
     methods: {

From 9dbcf1c93de8e7d40f4e67230c4c1c4410a527a2 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 6 May 2026 10:23:01 -0400
Subject: [PATCH 06/14] Styling updates and multi location time slot retrieval

Added back and forward arrow SVGs
Now we call for all timeslots of three closest stores and mobile if a provider is available
---
 src/layouts/scheduling/scheduling.vue         | 107 +++++++++++-------
 .../date-picker/date-picker.spec.js           |   7 +-
 src/ux-components/date-picker/date-picker.vue |  40 +++++--
 3 files changed, 96 insertions(+), 58 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 958c203e6..8d435c729 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -1,32 +1,32 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-    <loadingModal notFullScreen ref="loadingModal" />
-    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-    <div class="container page-container-grouped-styles">
-        <div class="row">
-            <div class="col-12">
-                <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
-                    <span>
-                        {{ serviceLocationText }}
-                    </span>
-                </h5>
-                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
-                <datePicker
-                    class="mt-5"
-                    v-model="selectedDate"
-                    :startDate="datePickerStartDate"
-                    :endDate="datePickerEndDate"
-                    :availableDates="availableDates"
-                    :isLoadingDates="isLoadingDates"
-                    @requestMoreDates="handleRequestMoreDates" />
-                <navbar
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="navbar"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+        <loadingModal notFullScreen ref="loadingModal" />
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12">
+                    <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
+                        <span>
+                            {{ serviceLocationText }}
+                        </span>
+                    </h5>
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
+                    <datePicker
+                        class="mt-5"
+                        v-model="selectedDate"
+                        :startDate="datePickerStartDate"
+                        :endDate="datePickerEndDate"
+                        :availableDates="availableDates"
+                        :isLoadingDates="isLoadingDates"
+                        @requestMoreDates="handleRequestMoreDates" />
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
-    </div>
     </Form>
 </template>
 
@@ -65,32 +65,48 @@ export default {
             payload: { serviceZipCode },
             pageNameToLog: to.name,
         });
-        const inShopProviderNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber;
-        const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber;
+        const providers = shopProviderData?.data?.shopProviders?.slice(0, 3) ?? [];
+        const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber ?? null;
+
+        const startDate = toDateString(0);
+        const endDate = toDateString(14);
 
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: fetchCmsContentForPage(to.name),
             },
-            {
-                resultKey: "inshopOrDropoffTimeSlots",
+            ...providers.map((p, i) => ({
+                resultKey: `inshopTimeSlots_${i}`,
                 promise: store.dispatch("getShopTimeSlots", {
                     payload: {
-                        startDate: toDateString(0),
-                        endDate: toDateString(15),
+                        startDate,
+                        endDate,
                         shopAppointmentType: "InshopOrDropoff",
-                        providerNumber: inShopProviderNumber,
+                        providerNumber: p.providerNumber,
                     },
                     pageNameToLog: to.name,
                 }),
-            },
+            })),
+            ...(mobileProviderNumber
+                ? [
+                      {
+                          resultKey: "mobileTimeSlots",
+                          promise: store.dispatch("getMobileTimeSlots", {
+                              payload: { startDate, endDate, zipCode: serviceZipCode },
+                              pageNameToLog: to.name,
+                          }),
+                      },
+                  ]
+                : []),
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.inshopOrDropoffTimeSlots = resultMap.inshopOrDropoffTimeSlots;
-            vm.inShopProviderNumber = inShopProviderNumber;
+            vm.inShopProviders = providers;
+            vm.inshopTimeSlots = providers.map((_, i) => resultMap[`inshopTimeSlots_${i}`] ?? null);
+            vm.mobileTimeSlots = resultMap.mobileTimeSlots ?? null;
+            vm.inShopProviderNumber = providers[0]?.providerNumber ?? null;
             vm.mobileProviderNumber = mobileProviderNumber;
         });
     },
@@ -99,7 +115,11 @@ export default {
             return this.getCmsContent("ServiceLocationText", "Text");
         },
         availableDates() {
-            return (this.inshopOrDropoffTimeSlots?.days ?? []).map((d) => d.date);
+            const inshopDates = this.inshopTimeSlots.flatMap((ts) =>
+                (ts?.days ?? []).map((d) => d.date)
+            );
+            const mobileDates = (this.mobileTimeSlots?.days ?? []).map((d) => d.date);
+            return [...new Set([...inshopDates, ...mobileDates])].sort();
         },
     },
     data() {
@@ -107,8 +127,10 @@ export default {
             selectedDate: null,
             isLoadingDates: false,
             datePickerStartDate: toDateString(0),
-            datePickerEndDate: toDateString(15),
-            inshopOrDropoffTimeSlots: null,
+            datePickerEndDate: toDateString(14),
+            inShopProviders: [],
+            inshopTimeSlots: [],
+            mobileTimeSlots: null,
             inShopProviderNumber: null,
             mobileProviderNumber: null,
         };
@@ -166,6 +188,7 @@ export default {
 
             // TODO: call getShopTimeSlots with the next date range and append results
             // to this.availableDates and advance this.datePickerEndDate
+            console.log("handleRequestMoreDates");
 
             this.isLoadingDates = false;
             this.$refs.loadingModal.hideModal();
@@ -196,7 +219,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    .dark-header {
-        color: $black;
-    }
-</style>
\ No newline at end of file
+.dark-header {
+    color: $black;
+}
+</style>
diff --git a/src/ux-components/date-picker/date-picker.spec.js b/src/ux-components/date-picker/date-picker.spec.js
index d2b6c9ee5..3d65b29c9 100644
--- a/src/ux-components/date-picker/date-picker.spec.js
+++ b/src/ux-components/date-picker/date-picker.spec.js
@@ -152,12 +152,7 @@ describe("date-picker.vue", () => {
     describe("navigation", () => {
         test("goForward advances windowStart by the window size", async () => {
             // Use a longer range so forward is possible on desktop (window 5)
-            const manyDates = [
-                "2026-01-01",
-                "2026-01-02",
-                "2026-01-03",
-                "2026-01-10",
-            ];
+            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
             const wrapper = mountDesktop({ availableDates: manyDates });
             expect(wrapper.vm.canGoForward).toBe(true);
             await wrapper.vm.goForward();
diff --git a/src/ux-components/date-picker/date-picker.vue b/src/ux-components/date-picker/date-picker.vue
index c6698897d..f94350f7b 100644
--- a/src/ux-components/date-picker/date-picker.vue
+++ b/src/ux-components/date-picker/date-picker.vue
@@ -5,7 +5,12 @@
             :disabled="!canGoBack"
             aria-label="Previous dates"
             @click="goBack">
-            ‹
+            <svg v-if="canGoBack" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#0070D1"/>
+            </svg>
+            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 9.62663 23.2962 7.30655 21.9776 5.33316C20.6591 3.35977 18.7849 1.8217 16.5922 0.913447C14.3995 0.00519388 11.9867 -0.232445 9.65892 0.230578C7.33115 0.6936 5.19295 1.83649 3.51472 3.51472C1.83649 5.19295 0.693606 7.33114 0.230583 9.65891C-0.23244 11.9867 0.00519859 14.3995 0.91345 16.5922C1.8217 18.7849 3.35977 20.6591 5.33316 21.9776C7.30655 23.2962 9.62663 24 12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12ZM12.72 18.1128L7.2 12.5928C7.04319 12.4354 6.95514 12.2222 6.95514 12C6.95514 11.7778 7.04319 11.5646 7.2 11.4072L12.72 5.8872C12.8772 5.72807 13.0912 5.63791 13.3149 5.63656C13.5386 5.63521 13.7537 5.72278 13.9128 5.88C14.0719 6.03722 14.1621 6.25122 14.1634 6.47491C14.1648 6.6986 14.0772 6.91367 13.92 7.0728L8.988 12L13.92 16.9272C14.0772 17.0863 14.1648 17.3014 14.1634 17.5251C14.1621 17.7488 14.0719 17.9628 13.9128 18.12C13.7537 18.2772 13.5386 18.3648 13.3149 18.3634C13.0912 18.3621 12.8772 18.2719 12.72 18.1128Z" fill="#B3B4B5"/>
+            </svg>
         </button>
         <div class="date-picker__track d-flex flex-grow-1">
             <button
@@ -29,14 +34,32 @@
             :disabled="!canGoForward"
             aria-label="Next dates"
             @click="goForward">
-            ›
+            <svg v-if="canGoForward" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#0070D1"/>
+            </svg>
+            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 9.62663 23.2962 7.30655 21.9776 5.33316C20.6591 3.35977 18.7849 1.8217 16.5922 0.913447C14.3995 0.00519388 11.9867 -0.232445 9.65892 0.230578C7.33115 0.6936 5.19295 1.83649 3.51472 3.51472C1.83649 5.19295 0.693606 7.33114 0.230583 9.65891C-0.23244 11.9867 0.00519859 14.3995 0.91345 16.5922C1.8217 18.7849 3.35977 20.6591 5.33316 21.9776C7.30655 23.2962 9.62663 24 12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12ZM12.72 18.1128L7.2 12.5928C7.04319 12.4354 6.95514 12.2222 6.95514 12C6.95514 11.7778 7.04319 11.5646 7.2 11.4072L12.72 5.8872C12.8772 5.72807 13.0912 5.63791 13.3149 5.63656C13.5386 5.63521 13.7537 5.72278 13.9128 5.88C14.0719 6.03722 14.1621 6.25122 14.1634 6.47491C14.1648 6.6986 14.0772 6.91367 13.92 7.0728L8.988 12L13.92 16.9272C14.0772 17.0863 14.1648 17.3014 14.1634 17.5251C14.1621 17.7488 14.0719 17.9628 13.9128 18.12C13.7537 18.2772 13.5386 18.3648 13.3149 18.3634C13.0912 18.3621 12.8772 18.2719 12.72 18.1128Z" fill="#B3B4B5"/>
+            </svg>
         </button>
     </div>
 </template>
 
 <script>
 const DAY_ABBRS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-const MONTH_ABBRS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTH_ABBRS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
 const MOBILE_WINDOW_SIZE = 3;
 const DESKTOP_WINDOW_SIZE = 5;
 const DESKTOP_BREAKPOINT_PX = 768;
@@ -138,9 +161,9 @@ export default {
         this.updateWindowSize();
         window.addEventListener("resize", this.updateWindowSize);
         if (this.modelValue && this.allDates.length) {
-            const idx = this.allDates.findIndex((d) => d.value === this.modelValue);
-            if (idx !== -1) {
-                this.windowStart = Math.floor(idx / this.windowSize) * this.windowSize;
+            const index = this.allDates.findIndex((d) => d.value === this.modelValue);
+            if (index !== -1) {
+                this.windowStart = Math.floor(index / this.windowSize) * this.windowSize;
             }
         }
     },
@@ -159,6 +182,7 @@ export default {
         },
         goForward() {
             if (this.isLoadingDates) return;
+            console.log("goForward", this.windowStart, this.windowSize, this.allDates.length);
             const isAtEnd = this.windowStart + this.windowSize >= this.allDates.length;
             if (isAtEnd) {
                 this.$emit("requestMoreDates");
@@ -188,9 +212,6 @@ export default {
         height: 2rem;
         border: none;
         background: transparent;
-        font-size: 2rem;
-        line-height: 1;
-        color: $blue;
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -204,7 +225,6 @@ export default {
         }
 
         &:disabled {
-            color: $gray-300;
             cursor: default;
         }
     }

From bf38d11bcad5afcc0f0c9c89e5938d9a7ce2f03c Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 6 May 2026 12:45:48 -0400
Subject: [PATCH 07/14] Final review of Scheduling Page

Refactor scheduling.vue state to colocate providers with their time slots

Replace parallel inShopProviders/inshopTimeSlots arrays with a single
inShopProvidersAndTimeslots array of { provider, timeSlots } objects, and
combine mobileTimeSlots/mobileProviderNumber into a single
mobileProviderAndTimeSlot object. Also extract SCHEDULE_FETCH_DAYS constant
to replace the magic number 14
add JSDoc to toDateString, and remove the
unused inShopProviderNumber state.
---
 src/layouts/scheduling/scheduling.vue | 44 ++++++++++++++++-----------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 8d435c729..cb23838c4 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -50,12 +50,19 @@ import {
 } from "@/helpers/page-prerequisites-helper.js";
 import { debugLog } from "@/helpers/debug-log-helper";
 
+/**
+ * Returns a YYYY-MM-DD date string offset by the given number of days from a base date.
+ * @param {number} offsetDays - Number of days to offset (positive or negative).
+ * @param {Date} base - The starting date (defaults to today).
+ */
 function toDateString(offsetDays, base = new Date()) {
     const d = new Date(base);
     d.setDate(d.getDate() + offsetDays);
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
 
+const SCHEDULE_FETCH_DAYS = 15;
+
 export default {
     name: "scheduling",
     async beforeRouteEnter(to, from, next) {
@@ -65,29 +72,31 @@ export default {
             payload: { serviceZipCode },
             pageNameToLog: to.name,
         });
+        // Get the first 3 providers from the shopProviderData
         const providers = shopProviderData?.data?.shopProviders?.slice(0, 3) ?? [];
         const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber ?? null;
 
         const startDate = toDateString(0);
-        const endDate = toDateString(14);
+        const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
 
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: fetchCmsContentForPage(to.name),
             },
-            ...providers.map((p, i) => ({
+            ...providers.map((provider, i) => ({
                 resultKey: `inshopTimeSlots_${i}`,
                 promise: store.dispatch("getShopTimeSlots", {
                     payload: {
                         startDate,
                         endDate,
                         shopAppointmentType: "InshopOrDropoff",
-                        providerNumber: p.providerNumber,
+                        providerNumber: provider.providerNumber,
                     },
                     pageNameToLog: to.name,
                 }),
             })),
+            // Get the mobile time slots if a mobile provider number is available
             ...(mobileProviderNumber
                 ? [
                       {
@@ -103,11 +112,13 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.inShopProviders = providers;
-            vm.inshopTimeSlots = providers.map((_, i) => resultMap[`inshopTimeSlots_${i}`] ?? null);
-            vm.mobileTimeSlots = resultMap.mobileTimeSlots ?? null;
-            vm.inShopProviderNumber = providers[0]?.providerNumber ?? null;
-            vm.mobileProviderNumber = mobileProviderNumber;
+            vm.inShopProvidersAndTimeslots = providers.map((provider, i) => ({
+                provider,
+                timeSlots: resultMap[`inshopTimeSlots_${i}`] ?? null,
+            }));
+            vm.mobileProviderAndTimeSlot = mobileProviderNumber
+                ? { providerNumber: mobileProviderNumber, timeSlots: resultMap.mobileTimeSlots ?? null }
+                : null;
         });
     },
     computed: {
@@ -115,10 +126,10 @@ export default {
             return this.getCmsContent("ServiceLocationText", "Text");
         },
         availableDates() {
-            const inshopDates = this.inshopTimeSlots.flatMap((ts) =>
-                (ts?.days ?? []).map((d) => d.date)
+            const inshopDates = this.inShopProvidersAndTimeslots.flatMap(({ timeSlots }) =>
+                (timeSlots?.days ?? []).map((d) => d.date)
             );
-            const mobileDates = (this.mobileTimeSlots?.days ?? []).map((d) => d.date);
+            const mobileDates = (this.mobileProviderAndTimeSlot?.timeSlots?.days ?? []).map((d) => d.date);
             return [...new Set([...inshopDates, ...mobileDates])].sort();
         },
     },
@@ -127,12 +138,9 @@ export default {
             selectedDate: null,
             isLoadingDates: false,
             datePickerStartDate: toDateString(0),
-            datePickerEndDate: toDateString(14),
-            inShopProviders: [],
-            inshopTimeSlots: [],
-            mobileTimeSlots: null,
-            inShopProviderNumber: null,
-            mobileProviderNumber: null,
+            datePickerEndDate: toDateString(SCHEDULE_FETCH_DAYS - 1),
+            inShopProvidersAndTimeslots: [],
+            mobileProviderAndTimeSlot: null,
         };
     },
     methods: {
@@ -194,7 +202,7 @@ export default {
             this.$refs.loadingModal.hideModal();
         },
         forwardButtonAction() {
-            const appointmentType = store.getters.order.serviceLocation.appointmentType;
+            const appointmentType = store.getters.order.serviceLocation.appointmentType; // TODO: remove this once we have a proper appointment type
             if (appointmentType === AppointmentTypeStrings.MOBILE) {
                 this.$router.navigateWithSaving(
                     this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,

From 00611a599c6c63caa4911045ffbced71ac6f1b80 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 6 May 2026 15:19:19 -0400
Subject: [PATCH 08/14] Refactor scheduling page and date-picker component

scheduling.vue:
- Colocate inshop providers and time slots into inShopProvidersAndTimeslots
  array of { provider, timeSlots } objects, replacing two parallel arrays
- Combine mobileTimeSlots and mobileProviderNumber into a single
  mobileProviderAndTimeSlot object
- Remove unused inShopProviderNumber state
- Extract SCHEDULE_FETCH_DAYS constant to replace magic number 14
- Add JSDoc to toDateString

date-picker:
- Move from src/ux-components/ to src/layouts/scheduling/ since it is
  only used by scheduling.vue
- Replace inline SVGs with chevron-right-blue.svg and chevron-right-grey.svg
  asset files, using CSS scaleX(-1) flip for left-pointing variants
- Import desktop breakpoint from new src/constants/breakpoints.js instead
  of hardcoding 768
---
 src/assets/img/icons/chevron-right-blue.svg   |  3 +
 src/assets/img/icons/chevron-right-grey.svg   |  3 +
 src/constants/breakpoints.js                  |  5 ++
 .../date-picker/date-picker.spec.js           |  0
 .../scheduling}/date-picker/date-picker.vue   | 65 ++++++++++---------
 src/layouts/scheduling/scheduling.vue         | 11 +++-
 6 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/img/icons/chevron-right-blue.svg
 create mode 100644 src/assets/img/icons/chevron-right-grey.svg
 create mode 100644 src/constants/breakpoints.js
 rename src/{ux-components => layouts/scheduling}/date-picker/date-picker.spec.js (100%)
 rename src/{ux-components => layouts/scheduling}/date-picker/date-picker.vue (56%)

diff --git a/src/assets/img/icons/chevron-right-blue.svg b/src/assets/img/icons/chevron-right-blue.svg
new file mode 100644
index 000000000..d7f2b9308
--- /dev/null
+++ b/src/assets/img/icons/chevron-right-blue.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#0070D1"/>
+</svg>
diff --git a/src/assets/img/icons/chevron-right-grey.svg b/src/assets/img/icons/chevron-right-grey.svg
new file mode 100644
index 000000000..f77c94b2d
--- /dev/null
+++ b/src/assets/img/icons/chevron-right-grey.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#B3B4B5"/>
+</svg>
diff --git a/src/constants/breakpoints.js b/src/constants/breakpoints.js
new file mode 100644
index 000000000..f69aaff40
--- /dev/null
+++ b/src/constants/breakpoints.js
@@ -0,0 +1,5 @@
+const Breakpoints = {
+    MD: 768, // This value is to match the md breakpoint in src/styles/ux-variables.scss
+};
+
+export { Breakpoints };
diff --git a/src/ux-components/date-picker/date-picker.spec.js b/src/layouts/scheduling/date-picker/date-picker.spec.js
similarity index 100%
rename from src/ux-components/date-picker/date-picker.spec.js
rename to src/layouts/scheduling/date-picker/date-picker.spec.js
diff --git a/src/ux-components/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
similarity index 56%
rename from src/ux-components/date-picker/date-picker.vue
rename to src/layouts/scheduling/date-picker/date-picker.vue
index f94350f7b..bd33bf4b9 100644
--- a/src/ux-components/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -5,12 +5,16 @@
             :disabled="!canGoBack"
             aria-label="Previous dates"
             @click="goBack">
-            <svg v-if="canGoBack" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg)">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#0070D1"/>
-            </svg>
-            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 9.62663 23.2962 7.30655 21.9776 5.33316C20.6591 3.35977 18.7849 1.8217 16.5922 0.913447C14.3995 0.00519388 11.9867 -0.232445 9.65892 0.230578C7.33115 0.6936 5.19295 1.83649 3.51472 3.51472C1.83649 5.19295 0.693606 7.33114 0.230583 9.65891C-0.23244 11.9867 0.00519859 14.3995 0.91345 16.5922C1.8217 18.7849 3.35977 20.6591 5.33316 21.9776C7.30655 23.2962 9.62663 24 12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12ZM12.72 18.1128L7.2 12.5928C7.04319 12.4354 6.95514 12.2222 6.95514 12C6.95514 11.7778 7.04319 11.5646 7.2 11.4072L12.72 5.8872C12.8772 5.72807 13.0912 5.63791 13.3149 5.63656C13.5386 5.63521 13.7537 5.72278 13.9128 5.88C14.0719 6.03722 14.1621 6.25122 14.1634 6.47491C14.1648 6.6986 14.0772 6.91367 13.92 7.0728L8.988 12L13.92 16.9272C14.0772 17.0863 14.1648 17.3014 14.1634 17.5251C14.1621 17.7488 14.0719 17.9628 13.9128 18.12C13.7537 18.2772 13.5386 18.3648 13.3149 18.3634C13.0912 18.3621 12.8772 18.2719 12.72 18.1128Z" fill="#B3B4B5"/>
-            </svg>
+            <img
+                v-if="canGoBack"
+                src="@/assets/img/icons/chevron-right-blue.svg"
+                class="date-picker__nav-icon date-picker__nav-icon--flipped"
+                alt="" />
+            <img
+                v-else
+                src="@/assets/img/icons/chevron-right-grey.svg"
+                class="date-picker__nav-icon date-picker__nav-icon--flipped"
+                alt="" />
         </button>
         <div class="date-picker__track d-flex flex-grow-1">
             <button
@@ -34,17 +38,23 @@
             :disabled="!canGoForward"
             aria-label="Next dates"
             @click="goForward">
-            <svg v-if="canGoForward" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M-6.24658e-06 12C-6.55781e-06 14.3734 0.703782 16.6935 2.02236 18.6668C3.34094 20.6402 5.21508 22.1783 7.40779 23.0866C9.60051 23.9948 12.0133 24.2324 14.3411 23.7694C16.6688 23.3064 18.807 22.1635 20.4853 20.4853C22.1635 18.8071 23.3064 16.6689 23.7694 14.3411C24.2324 12.0133 23.9948 9.60051 23.0865 7.4078C22.1783 5.21509 20.6402 3.34094 18.6668 2.02237C16.6934 0.703788 14.3734 -2.13306e-07 12 -5.24537e-07C8.8174 -9.41884e-07 5.76515 1.26428 3.51472 3.51472C1.26428 5.76515 -5.82924e-06 8.8174 -6.24658e-06 12ZM11.28 5.8872L16.8 11.4072C16.9568 11.5646 17.0449 11.7778 17.0449 12C17.0449 12.2222 16.9568 12.4354 16.8 12.5928L11.28 18.1128C11.1228 18.2719 10.9088 18.3621 10.6851 18.3634C10.4614 18.3648 10.2463 18.2772 10.0872 18.12C9.92806 17.9628 9.83791 17.7488 9.83656 17.5251C9.83521 17.3014 9.92277 17.0863 10.08 16.9272L15.012 12L10.08 7.0728C9.92278 6.91367 9.83521 6.6986 9.83656 6.47491C9.83791 6.25122 9.92807 6.03722 10.0872 5.88C10.2463 5.72278 10.4614 5.63521 10.6851 5.63656C10.9088 5.63791 11.1228 5.72807 11.28 5.8872Z" fill="#0070D1"/>
-            </svg>
-            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg)">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 9.62663 23.2962 7.30655 21.9776 5.33316C20.6591 3.35977 18.7849 1.8217 16.5922 0.913447C14.3995 0.00519388 11.9867 -0.232445 9.65892 0.230578C7.33115 0.6936 5.19295 1.83649 3.51472 3.51472C1.83649 5.19295 0.693606 7.33114 0.230583 9.65891C-0.23244 11.9867 0.00519859 14.3995 0.91345 16.5922C1.8217 18.7849 3.35977 20.6591 5.33316 21.9776C7.30655 23.2962 9.62663 24 12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12ZM12.72 18.1128L7.2 12.5928C7.04319 12.4354 6.95514 12.2222 6.95514 12C6.95514 11.7778 7.04319 11.5646 7.2 11.4072L12.72 5.8872C12.8772 5.72807 13.0912 5.63791 13.3149 5.63656C13.5386 5.63521 13.7537 5.72278 13.9128 5.88C14.0719 6.03722 14.1621 6.25122 14.1634 6.47491C14.1648 6.6986 14.0772 6.91367 13.92 7.0728L8.988 12L13.92 16.9272C14.0772 17.0863 14.1648 17.3014 14.1634 17.5251C14.1621 17.7488 14.0719 17.9628 13.9128 18.12C13.7537 18.2772 13.5386 18.3648 13.3149 18.3634C13.0912 18.3621 12.8772 18.2719 12.72 18.1128Z" fill="#B3B4B5"/>
-            </svg>
+            <img
+                v-if="canGoForward"
+                src="@/assets/img/icons/chevron-right-blue.svg"
+                class="date-picker__nav-icon"
+                alt="" />
+            <img
+                v-else
+                src="@/assets/img/icons/chevron-right-grey.svg"
+                class="date-picker__nav-icon"
+                alt="" />
         </button>
     </div>
 </template>
 
 <script>
+import { Breakpoints } from "@/constants/breakpoints";
+
 const DAY_ABBRS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
 const MONTH_ABBRS = [
     "Jan",
@@ -62,7 +72,7 @@ const MONTH_ABBRS = [
 ];
 const MOBILE_WINDOW_SIZE = 3;
 const DESKTOP_WINDOW_SIZE = 5;
-const DESKTOP_BREAKPOINT_PX = 768;
+const DESKTOP_BREAKPOINT_PX = Breakpoints.MD;
 
 function toLocalDateString(date) {
     const y = date.getFullYear();
@@ -113,17 +123,10 @@ export default {
 
             const hasBounds = this.startDate && this.endDate;
             const hasAvailable = this.availableDates.length > 0;
-            if (!hasBounds && !hasAvailable) return [];
+            if (!hasBounds || !hasAvailable) return [];
 
-            let first, last;
-            if (hasBounds) {
-                first = parseLocalDate(this.startDate);
-                last = parseLocalDate(this.endDate);
-            } else {
-                const sorted = [...this.availableDates].sort();
-                first = parseLocalDate(sorted[0]);
-                last = parseLocalDate(sorted[sorted.length - 1]);
-            }
+            const first = parseLocalDate(this.startDate);
+            const last = parseLocalDate(this.endDate);
 
             const dates = [];
             const cursor = new Date(first);
@@ -150,13 +153,6 @@ export default {
             return !this.isLoadingDates && this.allDates.length > 0;
         },
     },
-    watch: {
-        // Only reset position when startDate changes — that signals a fresh range.
-        // Extending endDate/availableDates (loading more) keeps the current window.
-        startDate() {
-            this.windowStart = 0;
-        },
-    },
     mounted() {
         this.updateWindowSize();
         window.addEventListener("resize", this.updateWindowSize);
@@ -286,5 +282,14 @@ export default {
         line-height: 1.4;
         white-space: nowrap;
     }
+
+    &__nav-icon {
+        width: 24px;
+        height: 24px;
+
+        &--flipped {
+            transform: scaleX(-1);
+        }
+    }
 }
 </style>
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index cb23838c4..515c966bb 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -35,7 +35,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import { Form } from "vee-validate";
-import datePicker from "@/ux-components/date-picker/date-picker";
+import datePicker from "@/layouts/scheduling/date-picker/date-picker";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import store from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -117,7 +117,10 @@ export default {
                 timeSlots: resultMap[`inshopTimeSlots_${i}`] ?? null,
             }));
             vm.mobileProviderAndTimeSlot = mobileProviderNumber
-                ? { providerNumber: mobileProviderNumber, timeSlots: resultMap.mobileTimeSlots ?? null }
+                ? {
+                      providerNumber: mobileProviderNumber,
+                      timeSlots: resultMap.mobileTimeSlots ?? null,
+                  }
                 : null;
         });
     },
@@ -129,7 +132,9 @@ export default {
             const inshopDates = this.inShopProvidersAndTimeslots.flatMap(({ timeSlots }) =>
                 (timeSlots?.days ?? []).map((d) => d.date)
             );
-            const mobileDates = (this.mobileProviderAndTimeSlot?.timeSlots?.days ?? []).map((d) => d.date);
+            const mobileDates = (this.mobileProviderAndTimeSlot?.timeSlots?.days ?? []).map(
+                (d) => d.date
+            );
             return [...new Set([...inshopDates, ...mobileDates])].sort();
         },
     },

From 5da7971eb299225b5057f8d33db0154961bfbed3 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Fri, 8 May 2026 10:18:28 -0400
Subject: [PATCH 09/14] Styling updates

---
 src/layouts/scheduling/date-picker/date-picker.vue | 8 ++++----
 src/layouts/scheduling/scheduling.vue              | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index bd33bf4b9..c9c0ad81a 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -232,7 +232,7 @@ export default {
     &__day-card {
         flex: 1;
         min-width: 0;
-        border: 1px solid $gray-200;
+        border: 1px solid $blue;
         border-radius: $border-radius-lg;
         background: $white;
         padding: 0.625rem 0.25rem;
@@ -242,7 +242,7 @@ export default {
             border-color 150ms ease;
 
         &:hover:not(:disabled):not(.date-picker__day-card--selected) {
-            border-color: $blue;
+            background: $blue-100;
         }
 
         &--selected {
@@ -270,7 +270,7 @@ export default {
     &__day-abbr {
         font-family: $font-family-sans-serif-semibold;
         font-size: $font-size-12;
-        color: $gray-600;
+        color: $blue;
         text-transform: uppercase;
         line-height: 1.2;
     }
@@ -278,7 +278,7 @@ export default {
     &__day-date {
         font-family: $font-family-sans-serif-bold;
         font-size: $font-size-14;
-        color: $gray-700;
+        color: $blue;
         line-height: 1.4;
         white-space: nowrap;
     }
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 515c966bb..216f0adbe 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container page-container-grouped-styles">
             <div class="row">
-                <div class="col-12">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
                         <span>
                             {{ serviceLocationText }}

From c0fb3e026c4e7834d93bb23967deafa10eceecf0 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 28 May 2026 09:44:28 -0400
Subject: [PATCH 10/14] CASH-2571 | Fix page pre-reqs, remove hardcoding

---
 src/layouts/scheduling/scheduling.vue      | 17 +----------------
 src/router/methods/route-logic/schedule.js |  6 ++----
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 216f0adbe..da6dcf61b 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -157,23 +157,8 @@ export default {
             const glassPartsOrRepair = hasGlassPartsOrRepairInfo(order, logQueue);
             const insuranceInfo = hasInsuranceInfo(order, logQueue);
 
-            const supportingItemsInfo = store.getters.lineItems?.supportingItems;
-            const supportingItemsPreReqs = order.payment?.isInsurance
-                ? true
-                : !!supportingItemsInfo;
+            const preReqResult = serviceZip && insuranceInfo && glassPartsOrRepair;
 
-            const preReqResult =
-                serviceZip && insuranceInfo && glassPartsOrRepair && supportingItemsPreReqs;
-
-            logQueue.push(() => {
-                debugLog(
-                    "store.getters.lineItems.supportingItems:",
-                    store.getters.lineItems?.supportingItems,
-                    !supportingItemsPreReqs
-                );
-            });
-
-            flushPagePrereqsLogs("scheduling.vue", preReqResult, logQueue);
             return preReqResult;
         },
         backButtonAction() {
diff --git a/src/router/methods/route-logic/schedule.js b/src/router/methods/route-logic/schedule.js
index 78ebe0628..5bd7d8c0d 100644
--- a/src/router/methods/route-logic/schedule.js
+++ b/src/router/methods/route-logic/schedule.js
@@ -3,10 +3,8 @@ import { experimentSettings } from "@/constants/experiments";
 import { routeData } from "@/router/constants/routes";
 
 export async function scheduleBeforeEnter(to, from) {
-    const isSchedulingEnabled = true;
-        // experimentMixin.methods
-        //     .getSettingValue(experimentSettings.USE_SCHEDULING_PAGE)
-        //     ?.toLowerCase() === "true";
+    const isSchedulingEnabled =
+        experimentMixin.methods.hasSettingEqualTo(experimentSettings.USE_SCHEDULING_PAGE, "true");
 
     if (isSchedulingEnabled) {
         return {

From 44821ce53614854cb64f576f8cd8e86e7f74f481 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 28 May 2026 10:30:07 -0400
Subject: [PATCH 11/14] Formatting and remove a console log

---
 src/layouts/scheduling/date-picker/date-picker.vue | 1 -
 src/router/methods/route-logic/schedule.js         | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index c9c0ad81a..f073373b6 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -178,7 +178,6 @@ export default {
         },
         goForward() {
             if (this.isLoadingDates) return;
-            console.log("goForward", this.windowStart, this.windowSize, this.allDates.length);
             const isAtEnd = this.windowStart + this.windowSize >= this.allDates.length;
             if (isAtEnd) {
                 this.$emit("requestMoreDates");
diff --git a/src/router/methods/route-logic/schedule.js b/src/router/methods/route-logic/schedule.js
index 5bd7d8c0d..1ac83312f 100644
--- a/src/router/methods/route-logic/schedule.js
+++ b/src/router/methods/route-logic/schedule.js
@@ -3,8 +3,10 @@ import { experimentSettings } from "@/constants/experiments";
 import { routeData } from "@/router/constants/routes";
 
 export async function scheduleBeforeEnter(to, from) {
-    const isSchedulingEnabled =
-        experimentMixin.methods.hasSettingEqualTo(experimentSettings.USE_SCHEDULING_PAGE, "true");
+    const isSchedulingEnabled = experimentMixin.methods.hasSettingEqualTo(
+        experimentSettings.USE_SCHEDULING_PAGE,
+        "true"
+    );
 
     if (isSchedulingEnabled) {
         return {

From 83f4c1dd4b5b696b1bffa7ae99e7e5551a79ffbf Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 28 May 2026 11:00:00 -0400
Subject: [PATCH 12/14] CASH-2572 | Unit test and logic updates

---
 .../scheduling/date-picker/date-picker.spec.js | 18 ------------------
 .../scheduling/date-picker/date-picker.vue     | 16 ++++++++++------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.spec.js b/src/layouts/scheduling/date-picker/date-picker.spec.js
index 3d65b29c9..f4ec21c4b 100644
--- a/src/layouts/scheduling/date-picker/date-picker.spec.js
+++ b/src/layouts/scheduling/date-picker/date-picker.spec.js
@@ -61,14 +61,6 @@ describe("date-picker.vue", () => {
             expect(backBtn.attributes("disabled")).toBeDefined();
             wrapper.unmount();
         });
-
-        test("forward navigation button is disabled when all dates fit in window", () => {
-            // Only 2 available dates → range is 2 days, window size 5 → no forward
-            const wrapper = mountDesktop({ availableDates: ["2026-01-21", "2026-01-22"] });
-            const forwardBtn = wrapper.findAll(".date-picker__nav-btn")[1];
-            expect(forwardBtn.attributes("disabled")).toBeDefined();
-            wrapper.unmount();
-        });
     });
 
     describe("allDates computation", () => {
@@ -196,16 +188,6 @@ describe("date-picker.vue", () => {
             expect(backBtn.attributes("disabled")).toBeUndefined();
             wrapper.unmount();
         });
-
-        test("resets windowStart to 0 when availableDates prop changes", async () => {
-            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates });
-            await wrapper.vm.goForward();
-            expect(wrapper.vm.windowStart).toBeGreaterThan(0);
-            await wrapper.setProps({ availableDates: ["2026-02-01", "2026-02-02"] });
-            expect(wrapper.vm.windowStart).toBe(0);
-            wrapper.unmount();
-        });
     });
 
     describe("initial window positioning", () => {
diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index f073373b6..a6d3c0a7c 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -114,19 +114,23 @@ export default {
     data() {
         return {
             windowStart: 0,
-            windowSize: DESKTOP_WINDOW_SIZE,
+            windowSize:
+                window.innerWidth >= DESKTOP_BREAKPOINT_PX
+                    ? DESKTOP_WINDOW_SIZE
+                    : MOBILE_WINDOW_SIZE,
         };
     },
     computed: {
         allDates() {
             const availableSet = new Set(this.availableDates);
 
-            const hasBounds = this.startDate && this.endDate;
-            const hasAvailable = this.availableDates.length > 0;
-            if (!hasBounds || !hasAvailable) return [];
+            if (!this.availableDates.length) return [];
 
-            const first = parseLocalDate(this.startDate);
-            const last = parseLocalDate(this.endDate);
+            const startStr = this.startDate ?? this.availableDates[0];
+            const endStr = this.endDate ?? this.availableDates[this.availableDates.length - 1];
+
+            const first = parseLocalDate(startStr);
+            const last = parseLocalDate(endStr);
 
             const dates = [];
             const cursor = new Date(first);

From 85b8789bcaab63d6670b92214ea0933f5b0625e8 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 28 May 2026 11:14:28 -0400
Subject: [PATCH 13/14] CASH-2572 | Update logic and unit tests

No dates should display if any of the props are missing
---
 src/layouts/scheduling/date-picker/date-picker.spec.js | 10 +++++-----
 src/layouts/scheduling/date-picker/date-picker.vue     |  9 +++------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.spec.js b/src/layouts/scheduling/date-picker/date-picker.spec.js
index f4ec21c4b..de8eb5845 100644
--- a/src/layouts/scheduling/date-picker/date-picker.spec.js
+++ b/src/layouts/scheduling/date-picker/date-picker.spec.js
@@ -10,7 +10,7 @@ function mountDesktop(props = {}) {
         value: 1024,
     });
     return shallowMount(datePicker, {
-        props: { availableDates: AVAILABLE_DATES, modelValue: null, ...props },
+        props: { availableDates: AVAILABLE_DATES, startDate: "2026-01-21", endDate: "2026-01-25", modelValue: null, ...props },
     });
 }
 
@@ -21,7 +21,7 @@ function mountMobile(props = {}) {
         value: 375,
     });
     return shallowMount(datePicker, {
-        props: { availableDates: AVAILABLE_DATES, modelValue: null, ...props },
+        props: { availableDates: AVAILABLE_DATES, startDate: "2026-01-21", endDate: "2026-01-25", modelValue: null, ...props },
     });
 }
 
@@ -145,7 +145,7 @@ describe("date-picker.vue", () => {
         test("goForward advances windowStart by the window size", async () => {
             // Use a longer range so forward is possible on desktop (window 5)
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates });
+            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
             expect(wrapper.vm.canGoForward).toBe(true);
             await wrapper.vm.goForward();
             expect(wrapper.vm.windowStart).toBe(5);
@@ -154,7 +154,7 @@ describe("date-picker.vue", () => {
 
         test("goBack decrements windowStart by the window size", async () => {
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates });
+            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
             await wrapper.vm.goForward();
             await wrapper.vm.goBack();
             expect(wrapper.vm.windowStart).toBe(0);
@@ -181,7 +181,7 @@ describe("date-picker.vue", () => {
 
         test("back button becomes enabled after navigating forward", async () => {
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates });
+            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
             await wrapper.vm.goForward();
             await wrapper.vm.$nextTick();
             const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index a6d3c0a7c..6b3fb7638 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -124,13 +124,10 @@ export default {
         allDates() {
             const availableSet = new Set(this.availableDates);
 
-            if (!this.availableDates.length) return [];
+            if (!this.availableDates.length || !this.startDate || !this.endDate) return [];
 
-            const startStr = this.startDate ?? this.availableDates[0];
-            const endStr = this.endDate ?? this.availableDates[this.availableDates.length - 1];
-
-            const first = parseLocalDate(startStr);
-            const last = parseLocalDate(endStr);
+            const first = parseLocalDate(this.startDate);
+            const last = parseLocalDate(this.endDate);
 
             const dates = [];
             const cursor = new Date(first);

From 890f50c18ef65910624474de7ce6817ad26ce519 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 28 May 2026 12:30:19 -0400
Subject: [PATCH 14/14] Formatting

---
 .../date-picker/date-picker.spec.js           | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.spec.js b/src/layouts/scheduling/date-picker/date-picker.spec.js
index de8eb5845..f64d27a12 100644
--- a/src/layouts/scheduling/date-picker/date-picker.spec.js
+++ b/src/layouts/scheduling/date-picker/date-picker.spec.js
@@ -10,7 +10,13 @@ function mountDesktop(props = {}) {
         value: 1024,
     });
     return shallowMount(datePicker, {
-        props: { availableDates: AVAILABLE_DATES, startDate: "2026-01-21", endDate: "2026-01-25", modelValue: null, ...props },
+        props: {
+            availableDates: AVAILABLE_DATES,
+            startDate: "2026-01-21",
+            endDate: "2026-01-25",
+            modelValue: null,
+            ...props,
+        },
     });
 }
 
@@ -21,7 +27,13 @@ function mountMobile(props = {}) {
         value: 375,
     });
     return shallowMount(datePicker, {
-        props: { availableDates: AVAILABLE_DATES, startDate: "2026-01-21", endDate: "2026-01-25", modelValue: null, ...props },
+        props: {
+            availableDates: AVAILABLE_DATES,
+            startDate: "2026-01-21",
+            endDate: "2026-01-25",
+            modelValue: null,
+            ...props,
+        },
     });
 }
 
@@ -145,7 +157,11 @@ describe("date-picker.vue", () => {
         test("goForward advances windowStart by the window size", async () => {
             // Use a longer range so forward is possible on desktop (window 5)
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
+            const wrapper = mountDesktop({
+                availableDates: manyDates,
+                startDate: "2026-01-01",
+                endDate: "2026-01-10",
+            });
             expect(wrapper.vm.canGoForward).toBe(true);
             await wrapper.vm.goForward();
             expect(wrapper.vm.windowStart).toBe(5);
@@ -154,7 +170,11 @@ describe("date-picker.vue", () => {
 
         test("goBack decrements windowStart by the window size", async () => {
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
+            const wrapper = mountDesktop({
+                availableDates: manyDates,
+                startDate: "2026-01-01",
+                endDate: "2026-01-10",
+            });
             await wrapper.vm.goForward();
             await wrapper.vm.goBack();
             expect(wrapper.vm.windowStart).toBe(0);
@@ -181,7 +201,11 @@ describe("date-picker.vue", () => {
 
         test("back button becomes enabled after navigating forward", async () => {
             const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
-            const wrapper = mountDesktop({ availableDates: manyDates, startDate: "2026-01-01", endDate: "2026-01-10" });
+            const wrapper = mountDesktop({
+                availableDates: manyDates,
+                startDate: "2026-01-01",
+                endDate: "2026-01-10",
+            });
             await wrapper.vm.goForward();
             await wrapper.vm.$nextTick();
             const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];